zent
Version:
一套前端设计语言和基于React的实现
50 lines (49 loc) • 2.27 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { createRef, useContext } from 'react';
import cx from 'classnames';
import PanelContext from '../../context/PanelContext';
import { smoothScroll } from '../../../utils/scroll';
import { useIsomorphicLayoutEffect } from '../../../utils/hooks/useIsomorphicLayoutEffect';
var prefixCls = 'zent-datepicker-time-panel-body';
function generateUnits(start, end, step, disabledUnits) {
var units = [];
for (var i = start; i <= end; i += step) {
units.push({
label: i.toString().padStart(2, '0'),
value: i,
disabled: disabledUnits.includes(i),
});
}
return units;
}
var UNIT_MAP = {
hour: 23,
minute: 59,
second: 59,
};
var TimeUnitColumn = function (_a) {
var type = _a.type, _b = _a.step, step = _b === void 0 ? 1 : _b, selected = _a.selected, setting = _a.setting, _c = _a.disabledUnits, disabledUnits = _c === void 0 ? [] : _c;
var ulRef = createRef();
var visibleChange = useContext(PanelContext).visibleChange;
var units = generateUnits(0, UNIT_MAP[type], step, disabledUnits);
useIsomorphicLayoutEffect(function () {
visibleChange &&
ulRef.current &&
smoothScroll(ulRef.current, 0, (selected * 32) / step, 1);
selected &&
!visibleChange &&
ulRef.current &&
smoothScroll(ulRef.current, 0, (selected * 32) / step, 160);
}, [selected, visibleChange, ulRef, step]);
return (_jsx("div", __assign({ className: prefixCls + "_scroll", ref: ulRef, "data-zv": '10.0.17' }, { children: units.map(function (_a) {
var _b;
var value = _a.value, label = _a.label, disabled = _a.disabled;
return (_jsx("div", __assign({ className: cx(prefixCls + "-unit", (_b = {},
_b[prefixCls + "-unit_selected"] = value === selected,
_b[prefixCls + "-unit_disabled"] = disabled,
_b[prefixCls + "-unit_available"] = !disabled,
_b)), onClick: function () { return !disabled && setting(value); }, "data-zv": '10.0.17' }, { children: label }), value));
}) }), void 0));
};
export default TimeUnitColumn;