123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
- import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
- import classNames from 'classnames';
- import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
- import * as React from 'react';
- import { usePanelContext } from "../../context";
- import useScrollTo from "./useScrollTo";
- var SCROLL_DELAY = 300;
- // Not use JSON.stringify to avoid dead loop
- function flattenUnits(units) {
- return units.map(function (_ref) {
- var value = _ref.value,
- label = _ref.label,
- disabled = _ref.disabled;
- return [value, label, disabled].join(',');
- }).join(';');
- }
- export default function TimeColumn(props) {
- var units = props.units,
- value = props.value,
- optionalValue = props.optionalValue,
- type = props.type,
- onChange = props.onChange,
- onHover = props.onHover,
- onDblClick = props.onDblClick,
- changeOnScroll = props.changeOnScroll;
- var _usePanelContext = usePanelContext(),
- prefixCls = _usePanelContext.prefixCls,
- cellRender = _usePanelContext.cellRender,
- now = _usePanelContext.now,
- locale = _usePanelContext.locale;
- var panelPrefixCls = "".concat(prefixCls, "-time-panel");
- var cellPrefixCls = "".concat(prefixCls, "-time-panel-cell");
- // ========================== Refs ==========================
- var ulRef = React.useRef(null);
- // ========================= Scroll =========================
- var checkDelayRef = React.useRef();
- var clearDelayCheck = function clearDelayCheck() {
- clearTimeout(checkDelayRef.current);
- };
- // ========================== Sync ==========================
- var _useScrollTo = useScrollTo(ulRef, value !== null && value !== void 0 ? value : optionalValue),
- _useScrollTo2 = _slicedToArray(_useScrollTo, 3),
- syncScroll = _useScrollTo2[0],
- stopScroll = _useScrollTo2[1],
- isScrolling = _useScrollTo2[2];
- // Effect sync value scroll
- useLayoutEffect(function () {
- syncScroll();
- clearDelayCheck();
- return function () {
- stopScroll();
- clearDelayCheck();
- };
- }, [value, optionalValue, flattenUnits(units)]);
- // ========================= Change =========================
- // Scroll event if sync onScroll
- var onInternalScroll = function onInternalScroll(event) {
- clearDelayCheck();
- var target = event.target;
- if (!isScrolling() && changeOnScroll) {
- checkDelayRef.current = setTimeout(function () {
- var ul = ulRef.current;
- var firstLiTop = ul.querySelector("li").offsetTop;
- var liList = Array.from(ul.querySelectorAll("li"));
- var liTopList = liList.map(function (li) {
- return li.offsetTop - firstLiTop;
- });
- var liDistList = liTopList.map(function (top, index) {
- if (units[index].disabled) {
- return Number.MAX_SAFE_INTEGER;
- }
- return Math.abs(top - target.scrollTop);
- });
- // Find min distance index
- var minDist = Math.min.apply(Math, _toConsumableArray(liDistList));
- var minDistIndex = liDistList.findIndex(function (dist) {
- return dist === minDist;
- });
- var targetUnit = units[minDistIndex];
- if (targetUnit && !targetUnit.disabled) {
- onChange(targetUnit.value);
- }
- }, SCROLL_DELAY);
- }
- };
- // ========================= Render =========================
- var columnPrefixCls = "".concat(panelPrefixCls, "-column");
- return /*#__PURE__*/React.createElement("ul", {
- className: columnPrefixCls,
- ref: ulRef,
- "data-type": type,
- onScroll: onInternalScroll
- }, units.map(function (_ref2) {
- var label = _ref2.label,
- unitValue = _ref2.value,
- disabled = _ref2.disabled;
- var inner = /*#__PURE__*/React.createElement("div", {
- className: "".concat(cellPrefixCls, "-inner")
- }, label);
- return /*#__PURE__*/React.createElement("li", {
- key: unitValue,
- className: classNames(cellPrefixCls, _defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-selected"), value === unitValue), "".concat(cellPrefixCls, "-disabled"), disabled)),
- onClick: function onClick() {
- if (!disabled) {
- onChange(unitValue);
- }
- },
- onDoubleClick: function onDoubleClick() {
- if (!disabled && onDblClick) {
- onDblClick();
- }
- },
- onMouseEnter: function onMouseEnter() {
- onHover(unitValue);
- },
- onMouseLeave: function onMouseLeave() {
- onHover(null);
- },
- "data-value": unitValue
- }, cellRender ? cellRender(unitValue, {
- prefixCls: prefixCls,
- originNode: inner,
- today: now,
- type: 'time',
- subType: type,
- locale: locale
- }) : inner);
- }));
- }
|