TimeUnitColumn.js
2.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import * as React from 'react';
import { useRef, useLayoutEffect } from 'react';
import classNames from 'classnames';
import { scrollTo, waitElementReady } from '../../utils/uiUtil';
import PanelContext from '../../PanelContext';
function TimeUnitColumn(props) {
var prefixCls = props.prefixCls,
units = props.units,
onSelect = props.onSelect,
value = props.value,
active = props.active,
hideDisabledOptions = props.hideDisabledOptions;
var cellPrefixCls = "".concat(prefixCls, "-cell");
var _React$useContext = React.useContext(PanelContext),
open = _React$useContext.open;
var ulRef = useRef(null);
var liRefs = useRef(new Map());
var scrollRef = useRef(); // `useLayoutEffect` here to avoid blink by duration is 0
useLayoutEffect(function () {
var li = liRefs.current.get(value);
if (li && open !== false) {
scrollTo(ulRef.current, li.offsetTop, 120);
}
}, [value]);
useLayoutEffect(function () {
if (open) {
var li = liRefs.current.get(value);
if (li) {
scrollRef.current = waitElementReady(li, function () {
scrollTo(ulRef.current, li.offsetTop, 0);
});
}
}
return function () {
var _scrollRef$current;
(_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.call(scrollRef);
};
}, [open]);
return /*#__PURE__*/React.createElement("ul", {
className: classNames("".concat(prefixCls, "-column"), _defineProperty({}, "".concat(prefixCls, "-column-active"), active)),
ref: ulRef,
style: {
position: 'relative'
}
}, units.map(function (unit) {
var _classNames2;
if (hideDisabledOptions && unit.disabled) {
return null;
}
return /*#__PURE__*/React.createElement("li", {
key: unit.value,
ref: function ref(element) {
liRefs.current.set(unit.value, element);
},
className: classNames(cellPrefixCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(cellPrefixCls, "-disabled"), unit.disabled), _defineProperty(_classNames2, "".concat(cellPrefixCls, "-selected"), value === unit.value), _classNames2)),
onClick: function onClick() {
if (unit.disabled) {
return;
}
onSelect(unit.value);
}
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cellPrefixCls, "-inner")
}, unit.label));
}));
}
export default TimeUnitColumn;