index.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  5. var _excluded = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "activeHandleRender", "draggingIndex", "draggingDelete", "onFocus"];
  6. import * as React from 'react';
  7. import { flushSync } from 'react-dom';
  8. import { getIndex } from "../util";
  9. import Handle from "./Handle";
  10. var Handles = /*#__PURE__*/React.forwardRef(function (props, ref) {
  11. var prefixCls = props.prefixCls,
  12. style = props.style,
  13. onStartMove = props.onStartMove,
  14. onOffsetChange = props.onOffsetChange,
  15. values = props.values,
  16. handleRender = props.handleRender,
  17. activeHandleRender = props.activeHandleRender,
  18. draggingIndex = props.draggingIndex,
  19. draggingDelete = props.draggingDelete,
  20. onFocus = props.onFocus,
  21. restProps = _objectWithoutProperties(props, _excluded);
  22. var handlesRef = React.useRef({});
  23. // =========================== Active ===========================
  24. var _React$useState = React.useState(false),
  25. _React$useState2 = _slicedToArray(_React$useState, 2),
  26. activeVisible = _React$useState2[0],
  27. setActiveVisible = _React$useState2[1];
  28. var _React$useState3 = React.useState(-1),
  29. _React$useState4 = _slicedToArray(_React$useState3, 2),
  30. activeIndex = _React$useState4[0],
  31. setActiveIndex = _React$useState4[1];
  32. var onActive = function onActive(index) {
  33. setActiveIndex(index);
  34. setActiveVisible(true);
  35. };
  36. var onHandleFocus = function onHandleFocus(e, index) {
  37. onActive(index);
  38. onFocus === null || onFocus === void 0 || onFocus(e);
  39. };
  40. var onHandleMouseEnter = function onHandleMouseEnter(e, index) {
  41. onActive(index);
  42. };
  43. // =========================== Render ===========================
  44. React.useImperativeHandle(ref, function () {
  45. return {
  46. focus: function focus(index) {
  47. var _handlesRef$current$i;
  48. (_handlesRef$current$i = handlesRef.current[index]) === null || _handlesRef$current$i === void 0 || _handlesRef$current$i.focus();
  49. },
  50. hideHelp: function hideHelp() {
  51. flushSync(function () {
  52. setActiveVisible(false);
  53. });
  54. }
  55. };
  56. });
  57. // =========================== Render ===========================
  58. // Handle Props
  59. var handleProps = _objectSpread({
  60. prefixCls: prefixCls,
  61. onStartMove: onStartMove,
  62. onOffsetChange: onOffsetChange,
  63. render: handleRender,
  64. onFocus: onHandleFocus,
  65. onMouseEnter: onHandleMouseEnter
  66. }, restProps);
  67. return /*#__PURE__*/React.createElement(React.Fragment, null, values.map(function (value, index) {
  68. var dragging = draggingIndex === index;
  69. return /*#__PURE__*/React.createElement(Handle, _extends({
  70. ref: function ref(node) {
  71. if (!node) {
  72. delete handlesRef.current[index];
  73. } else {
  74. handlesRef.current[index] = node;
  75. }
  76. },
  77. dragging: dragging,
  78. draggingDelete: dragging && draggingDelete,
  79. style: getIndex(style, index),
  80. key: index,
  81. value: value,
  82. valueIndex: index
  83. }, handleProps));
  84. }), activeHandleRender && activeVisible && /*#__PURE__*/React.createElement(Handle, _extends({
  85. key: "a11y"
  86. }, handleProps, {
  87. value: values[activeIndex],
  88. valueIndex: null,
  89. dragging: draggingIndex !== -1,
  90. draggingDelete: draggingDelete,
  91. render: activeHandleRender,
  92. style: {
  93. pointerEvents: 'none'
  94. },
  95. tabIndex: null,
  96. "aria-hidden": true
  97. })));
  98. });
  99. if (process.env.NODE_ENV !== 'production') {
  100. Handles.displayName = 'Handles';
  101. }
  102. export default Handles;