zent
Version:
一套前端设计语言和基于React的实现
59 lines (58 loc) • 3.09 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { setHours, setMinutes, setSeconds } from 'date-fns';
import TimeUnitColumn from './TimeUnitColumn';
import { useTimePanelValue } from '../../hooks/useTimePanelValue';
import { formatDate } from '../../utils/index';
var setTimeMap = {
hour: setHours,
minute: setMinutes,
second: setSeconds,
};
var TimePickerBody = function (_a) {
var selected = _a.selected, format = _a.format, disabledTimeOption = _a.disabledTimeOption, hourStep = _a.hourStep, minuteStep = _a.minuteStep, secondStep = _a.secondStep, onSelected = _a.onSelected, defaultTime = _a.defaultTime;
var _b = useTimePanelValue(selected, defaultTime, format), panelTime = _b.panelTime, setPanelTime = _b.setPanelTime;
var unitColumns = useMemo(function () {
var disabledHours = disabledTimeOption.disabledHours, disabledMinutes = disabledTimeOption.disabledMinutes, disabledSeconds = disabledTimeOption.disabledSeconds;
var panelTimeHours = panelTime.getHours();
var panelTimeMins = panelTime.getMinutes();
var UnitColumnConfig = [
{
type: 'hour',
format: 'HH',
value: panelTimeHours,
disabledUnits: (disabledHours === null || disabledHours === void 0 ? void 0 : disabledHours()) || [],
max: 23,
step: hourStep,
},
{
type: 'minute',
format: 'mm',
value: panelTimeMins,
disabledUnits: (disabledMinutes === null || disabledMinutes === void 0 ? void 0 : disabledMinutes(panelTimeHours)) || [],
max: 59,
step: minuteStep,
},
{
type: 'second',
format: 'ss',
value: panelTime.getSeconds(),
disabledUnits: (disabledSeconds === null || disabledSeconds === void 0 ? void 0 : disabledSeconds(panelTimeHours, panelTimeMins)) || [],
max: 59,
step: secondStep,
},
];
return UnitColumnConfig.filter(function (item) { return format.indexOf(item.format) !== -1; });
}, [panelTime, format, disabledTimeOption, hourStep, minuteStep, secondStep]);
var setItemTime = useCallback(function (val, type) {
var time = setTimeMap[type](panelTime, val);
setPanelTime(time);
onSelected(formatDate(format, time));
}, [panelTime, format, onSelected, setPanelTime]);
return (_jsx("div", __assign({ className: "zent-datepicker-time-panel-body", "data-zv": '10.0.17' }, { children: unitColumns.map(function (_a) {
var type = _a.type, value = _a.value, step = _a.step, disabledUnits = _a.disabledUnits;
return (_jsx(TimeUnitColumn, { type: type, step: step, selected: value, setting: function (val) { return setItemTime(val, type); }, disabledUnits: disabledUnits }, type));
}) }), void 0));
};
export default TimePickerBody;