TimeColumn.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  4. import classNames from 'classnames';
  5. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  6. import * as React from 'react';
  7. import { usePanelContext } from "../../context";
  8. import useScrollTo from "./useScrollTo";
  9. var SCROLL_DELAY = 300;
  10. // Not use JSON.stringify to avoid dead loop
  11. function flattenUnits(units) {
  12. return units.map(function (_ref) {
  13. var value = _ref.value,
  14. label = _ref.label,
  15. disabled = _ref.disabled;
  16. return [value, label, disabled].join(',');
  17. }).join(';');
  18. }
  19. export default function TimeColumn(props) {
  20. var units = props.units,
  21. value = props.value,
  22. optionalValue = props.optionalValue,
  23. type = props.type,
  24. onChange = props.onChange,
  25. onHover = props.onHover,
  26. onDblClick = props.onDblClick,
  27. changeOnScroll = props.changeOnScroll;
  28. var _usePanelContext = usePanelContext(),
  29. prefixCls = _usePanelContext.prefixCls,
  30. cellRender = _usePanelContext.cellRender,
  31. now = _usePanelContext.now,
  32. locale = _usePanelContext.locale;
  33. var panelPrefixCls = "".concat(prefixCls, "-time-panel");
  34. var cellPrefixCls = "".concat(prefixCls, "-time-panel-cell");
  35. // ========================== Refs ==========================
  36. var ulRef = React.useRef(null);
  37. // ========================= Scroll =========================
  38. var checkDelayRef = React.useRef();
  39. var clearDelayCheck = function clearDelayCheck() {
  40. clearTimeout(checkDelayRef.current);
  41. };
  42. // ========================== Sync ==========================
  43. var _useScrollTo = useScrollTo(ulRef, value !== null && value !== void 0 ? value : optionalValue),
  44. _useScrollTo2 = _slicedToArray(_useScrollTo, 3),
  45. syncScroll = _useScrollTo2[0],
  46. stopScroll = _useScrollTo2[1],
  47. isScrolling = _useScrollTo2[2];
  48. // Effect sync value scroll
  49. useLayoutEffect(function () {
  50. syncScroll();
  51. clearDelayCheck();
  52. return function () {
  53. stopScroll();
  54. clearDelayCheck();
  55. };
  56. }, [value, optionalValue, flattenUnits(units)]);
  57. // ========================= Change =========================
  58. // Scroll event if sync onScroll
  59. var onInternalScroll = function onInternalScroll(event) {
  60. clearDelayCheck();
  61. var target = event.target;
  62. if (!isScrolling() && changeOnScroll) {
  63. checkDelayRef.current = setTimeout(function () {
  64. var ul = ulRef.current;
  65. var firstLiTop = ul.querySelector("li").offsetTop;
  66. var liList = Array.from(ul.querySelectorAll("li"));
  67. var liTopList = liList.map(function (li) {
  68. return li.offsetTop - firstLiTop;
  69. });
  70. var liDistList = liTopList.map(function (top, index) {
  71. if (units[index].disabled) {
  72. return Number.MAX_SAFE_INTEGER;
  73. }
  74. return Math.abs(top - target.scrollTop);
  75. });
  76. // Find min distance index
  77. var minDist = Math.min.apply(Math, _toConsumableArray(liDistList));
  78. var minDistIndex = liDistList.findIndex(function (dist) {
  79. return dist === minDist;
  80. });
  81. var targetUnit = units[minDistIndex];
  82. if (targetUnit && !targetUnit.disabled) {
  83. onChange(targetUnit.value);
  84. }
  85. }, SCROLL_DELAY);
  86. }
  87. };
  88. // ========================= Render =========================
  89. var columnPrefixCls = "".concat(panelPrefixCls, "-column");
  90. return /*#__PURE__*/React.createElement("ul", {
  91. className: columnPrefixCls,
  92. ref: ulRef,
  93. "data-type": type,
  94. onScroll: onInternalScroll
  95. }, units.map(function (_ref2) {
  96. var label = _ref2.label,
  97. unitValue = _ref2.value,
  98. disabled = _ref2.disabled;
  99. var inner = /*#__PURE__*/React.createElement("div", {
  100. className: "".concat(cellPrefixCls, "-inner")
  101. }, label);
  102. return /*#__PURE__*/React.createElement("li", {
  103. key: unitValue,
  104. className: classNames(cellPrefixCls, _defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-selected"), value === unitValue), "".concat(cellPrefixCls, "-disabled"), disabled)),
  105. onClick: function onClick() {
  106. if (!disabled) {
  107. onChange(unitValue);
  108. }
  109. },
  110. onDoubleClick: function onDoubleClick() {
  111. if (!disabled && onDblClick) {
  112. onDblClick();
  113. }
  114. },
  115. onMouseEnter: function onMouseEnter() {
  116. onHover(unitValue);
  117. },
  118. onMouseLeave: function onMouseLeave() {
  119. onHover(null);
  120. },
  121. "data-value": unitValue
  122. }, cellRender ? cellRender(unitValue, {
  123. prefixCls: prefixCls,
  124. originNode: inner,
  125. today: now,
  126. type: 'time',
  127. subType: type,
  128. locale: locale
  129. }) : inner);
  130. }));
  131. }