Dashboard sipadu mbip
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

useFocusManager.js 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = useFocusManager;
  4. var _react = require("react");
  5. var _useMounted = _interopRequireDefault(require("./useMounted"));
  6. var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
  7. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  8. /**
  9. * useFocusManager provides a way to track and manage focus as it moves around
  10. * a container element. An `onChange` is fired when focus enters or leaves the
  11. * element, but not when it moves around inside the element, similar to
  12. * `pointerenter` and `pointerleave` DOM events.
  13. *
  14. * ```ts
  15. * const [focused, setFocusState] = useState(false)
  16. *
  17. * const { onBlur, onFocus } = useFocusManager({
  18. * onChange: nextFocused => setFocusState(nextFocused)
  19. * })
  20. *
  21. * return (
  22. * <div tabIndex="-1" onFocus={onFocus} onBlur={onBlur}>
  23. * {String(focused)}
  24. * <input />
  25. * <input />
  26. *
  27. * <button>A button</button>
  28. * </div>
  29. * ```
  30. *
  31. * @param opts Options
  32. * @returns FocusController a set of paired focus and blur event handlers
  33. */
  34. function useFocusManager(opts) {
  35. var isMounted = (0, _useMounted.default)();
  36. var lastFocused = (0, _react.useRef)();
  37. var handle = (0, _react.useRef)();
  38. var willHandle = (0, _useEventCallback.default)(opts.willHandle);
  39. var didHandle = (0, _useEventCallback.default)(opts.didHandle);
  40. var onChange = (0, _useEventCallback.default)(opts.onChange);
  41. var isDisabled = (0, _useEventCallback.default)(opts.isDisabled);
  42. var handleFocusChange = (0, _react.useCallback)(function (focused, event) {
  43. if (event && event.persist) event.persist();
  44. if (willHandle && willHandle(focused, event) === false) return;
  45. clearTimeout(handle.current);
  46. handle.current = setTimeout(function () {
  47. if (focused !== lastFocused.current) {
  48. if (didHandle) didHandle(focused, event); // only fire a change when unmounted if its a blur
  49. if (isMounted() || !focused) {
  50. lastFocused.current = focused;
  51. onChange && onChange(focused, event);
  52. }
  53. }
  54. });
  55. }, [isMounted, willHandle, didHandle, onChange, lastFocused]);
  56. var handleBlur = (0, _react.useCallback)(function (event) {
  57. if (!isDisabled()) handleFocusChange(false, event);
  58. }, [handleFocusChange, isDisabled]);
  59. var handleFocus = (0, _react.useCallback)(function (event) {
  60. if (!isDisabled()) handleFocusChange(true, event);
  61. }, [handleFocusChange, isDisabled]);
  62. return {
  63. onBlur: handleBlur,
  64. onFocus: handleFocus
  65. };
  66. }