123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278 |
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
- import * as React from 'react';
- import useTimeInfo from "../../../hooks/useTimeInfo";
- import { formatValue } from "../../../utils/dateUtil";
- import { PickerHackContext, usePanelContext } from "../../context";
- import TimeColumn from "./TimeColumn";
- function isAM(hour) {
- return hour < 12;
- }
- export default function TimePanelBody(props) {
- var showHour = props.showHour,
- showMinute = props.showMinute,
- showSecond = props.showSecond,
- showMillisecond = props.showMillisecond,
- showMeridiem = props.use12Hours,
- changeOnScroll = props.changeOnScroll;
- var _usePanelContext = usePanelContext(),
- prefixCls = _usePanelContext.prefixCls,
- values = _usePanelContext.values,
- generateConfig = _usePanelContext.generateConfig,
- locale = _usePanelContext.locale,
- onSelect = _usePanelContext.onSelect,
- _usePanelContext$onHo = _usePanelContext.onHover,
- onHover = _usePanelContext$onHo === void 0 ? function () {} : _usePanelContext$onHo,
- pickerValue = _usePanelContext.pickerValue;
- var value = (values === null || values === void 0 ? void 0 : values[0]) || null;
- var _React$useContext = React.useContext(PickerHackContext),
- onCellDblClick = _React$useContext.onCellDblClick;
- // ========================== Info ==========================
- var _useTimeInfo = useTimeInfo(generateConfig, props, value),
- _useTimeInfo2 = _slicedToArray(_useTimeInfo, 5),
- getValidTime = _useTimeInfo2[0],
- rowHourUnits = _useTimeInfo2[1],
- getMinuteUnits = _useTimeInfo2[2],
- getSecondUnits = _useTimeInfo2[3],
- getMillisecondUnits = _useTimeInfo2[4];
- // ========================= Value ==========================
- // PickerValue will tell which one to align on the top
- var getUnitValue = function getUnitValue(func) {
- var valueUnitVal = value && generateConfig[func](value);
- var pickerUnitValue = pickerValue && generateConfig[func](pickerValue);
- return [valueUnitVal, pickerUnitValue];
- };
- var _getUnitValue = getUnitValue('getHour'),
- _getUnitValue2 = _slicedToArray(_getUnitValue, 2),
- hour = _getUnitValue2[0],
- pickerHour = _getUnitValue2[1];
- var _getUnitValue3 = getUnitValue('getMinute'),
- _getUnitValue4 = _slicedToArray(_getUnitValue3, 2),
- minute = _getUnitValue4[0],
- pickerMinute = _getUnitValue4[1];
- var _getUnitValue5 = getUnitValue('getSecond'),
- _getUnitValue6 = _slicedToArray(_getUnitValue5, 2),
- second = _getUnitValue6[0],
- pickerSecond = _getUnitValue6[1];
- var _getUnitValue7 = getUnitValue('getMillisecond'),
- _getUnitValue8 = _slicedToArray(_getUnitValue7, 2),
- millisecond = _getUnitValue8[0],
- pickerMillisecond = _getUnitValue8[1];
- var meridiem = hour === null ? null : isAM(hour) ? 'am' : 'pm';
- // ========================= Column =========================
- // Hours
- var hourUnits = React.useMemo(function () {
- if (!showMeridiem) {
- return rowHourUnits;
- }
- return isAM(hour) ? rowHourUnits.filter(function (h) {
- return isAM(h.value);
- }) : rowHourUnits.filter(function (h) {
- return !isAM(h.value);
- });
- }, [hour, rowHourUnits, showMeridiem]);
- // >>> Pick Fallback
- var getEnabled = function getEnabled(units, val) {
- var _enabledUnits$;
- var enabledUnits = units.filter(function (unit) {
- return !unit.disabled;
- });
- return val !== null && val !== void 0 ? val : // Fallback to enabled value
- enabledUnits === null || enabledUnits === void 0 || (_enabledUnits$ = enabledUnits[0]) === null || _enabledUnits$ === void 0 ? void 0 : _enabledUnits$.value;
- };
- // >>> Minutes
- var validHour = getEnabled(rowHourUnits, hour);
- var minuteUnits = React.useMemo(function () {
- return getMinuteUnits(validHour);
- }, [getMinuteUnits, validHour]);
- // >>> Seconds
- var validMinute = getEnabled(minuteUnits, minute);
- var secondUnits = React.useMemo(function () {
- return getSecondUnits(validHour, validMinute);
- }, [getSecondUnits, validHour, validMinute]);
- // >>> Milliseconds
- var validSecond = getEnabled(secondUnits, second);
- var millisecondUnits = React.useMemo(function () {
- return getMillisecondUnits(validHour, validMinute, validSecond);
- }, [getMillisecondUnits, validHour, validMinute, validSecond]);
- var validMillisecond = getEnabled(millisecondUnits, millisecond);
- // Meridiem
- var meridiemUnits = React.useMemo(function () {
- if (!showMeridiem) {
- return [];
- }
- var base = generateConfig.getNow();
- var amDate = generateConfig.setHour(base, 6);
- var pmDate = generateConfig.setHour(base, 18);
- var formatMeridiem = function formatMeridiem(date, defaultLabel) {
- var cellMeridiemFormat = locale.cellMeridiemFormat;
- return cellMeridiemFormat ? formatValue(date, {
- generateConfig: generateConfig,
- locale: locale,
- format: cellMeridiemFormat
- }) : defaultLabel;
- };
- return [{
- label: formatMeridiem(amDate, 'AM'),
- value: 'am',
- disabled: rowHourUnits.every(function (h) {
- return h.disabled || !isAM(h.value);
- })
- }, {
- label: formatMeridiem(pmDate, 'PM'),
- value: 'pm',
- disabled: rowHourUnits.every(function (h) {
- return h.disabled || isAM(h.value);
- })
- }];
- }, [rowHourUnits, showMeridiem, generateConfig, locale]);
- // ========================= Change =========================
- /**
- * Check if time is validate or will match to validate one
- */
- var triggerChange = function triggerChange(nextDate) {
- var validateDate = getValidTime(nextDate);
- onSelect(validateDate);
- };
- // ========================= Column =========================
- // Create a template date for the trigger change event
- var triggerDateTmpl = React.useMemo(function () {
- var tmpl = value || pickerValue || generateConfig.getNow();
- var isNotNull = function isNotNull(num) {
- return num !== null && num !== undefined;
- };
- if (isNotNull(hour)) {
- tmpl = generateConfig.setHour(tmpl, hour);
- tmpl = generateConfig.setMinute(tmpl, minute);
- tmpl = generateConfig.setSecond(tmpl, second);
- tmpl = generateConfig.setMillisecond(tmpl, millisecond);
- } else if (isNotNull(pickerHour)) {
- tmpl = generateConfig.setHour(tmpl, pickerHour);
- tmpl = generateConfig.setMinute(tmpl, pickerMinute);
- tmpl = generateConfig.setSecond(tmpl, pickerSecond);
- tmpl = generateConfig.setMillisecond(tmpl, pickerMillisecond);
- } else if (isNotNull(validHour)) {
- tmpl = generateConfig.setHour(tmpl, validHour);
- tmpl = generateConfig.setMinute(tmpl, validMinute);
- tmpl = generateConfig.setSecond(tmpl, validSecond);
- tmpl = generateConfig.setMillisecond(tmpl, validMillisecond);
- }
- return tmpl;
- }, [value, pickerValue, hour, minute, second, millisecond, validHour, validMinute, validSecond, validMillisecond, pickerHour, pickerMinute, pickerSecond, pickerMillisecond, generateConfig]);
- // ===================== Columns Change =====================
- var fillColumnValue = function fillColumnValue(val, func) {
- if (val === null) {
- return null;
- }
- return generateConfig[func](triggerDateTmpl, val);
- };
- var getNextHourTime = function getNextHourTime(val) {
- return fillColumnValue(val, 'setHour');
- };
- var getNextMinuteTime = function getNextMinuteTime(val) {
- return fillColumnValue(val, 'setMinute');
- };
- var getNextSecondTime = function getNextSecondTime(val) {
- return fillColumnValue(val, 'setSecond');
- };
- var getNextMillisecondTime = function getNextMillisecondTime(val) {
- return fillColumnValue(val, 'setMillisecond');
- };
- var getMeridiemTime = function getMeridiemTime(val) {
- if (val === null) {
- return null;
- }
- if (val === 'am' && !isAM(hour)) {
- return generateConfig.setHour(triggerDateTmpl, hour - 12);
- } else if (val === 'pm' && isAM(hour)) {
- return generateConfig.setHour(triggerDateTmpl, hour + 12);
- }
- return triggerDateTmpl;
- };
- var onHourChange = function onHourChange(val) {
- triggerChange(getNextHourTime(val));
- };
- var onMinuteChange = function onMinuteChange(val) {
- triggerChange(getNextMinuteTime(val));
- };
- var onSecondChange = function onSecondChange(val) {
- triggerChange(getNextSecondTime(val));
- };
- var onMillisecondChange = function onMillisecondChange(val) {
- triggerChange(getNextMillisecondTime(val));
- };
- var onMeridiemChange = function onMeridiemChange(val) {
- triggerChange(getMeridiemTime(val));
- };
- // ====================== Column Hover ======================
- var onHourHover = function onHourHover(val) {
- onHover(getNextHourTime(val));
- };
- var onMinuteHover = function onMinuteHover(val) {
- onHover(getNextMinuteTime(val));
- };
- var onSecondHover = function onSecondHover(val) {
- onHover(getNextSecondTime(val));
- };
- var onMillisecondHover = function onMillisecondHover(val) {
- onHover(getNextMillisecondTime(val));
- };
- var onMeridiemHover = function onMeridiemHover(val) {
- onHover(getMeridiemTime(val));
- };
- // ========================= Render =========================
- var sharedColumnProps = {
- onDblClick: onCellDblClick,
- changeOnScroll: changeOnScroll
- };
- return /*#__PURE__*/React.createElement("div", {
- className: "".concat(prefixCls, "-content")
- }, showHour && /*#__PURE__*/React.createElement(TimeColumn, _extends({
- units: hourUnits,
- value: hour,
- optionalValue: pickerHour,
- type: "hour",
- onChange: onHourChange,
- onHover: onHourHover
- }, sharedColumnProps)), showMinute && /*#__PURE__*/React.createElement(TimeColumn, _extends({
- units: minuteUnits,
- value: minute,
- optionalValue: pickerMinute,
- type: "minute",
- onChange: onMinuteChange,
- onHover: onMinuteHover
- }, sharedColumnProps)), showSecond && /*#__PURE__*/React.createElement(TimeColumn, _extends({
- units: secondUnits,
- value: second,
- optionalValue: pickerSecond,
- type: "second",
- onChange: onSecondChange,
- onHover: onSecondHover
- }, sharedColumnProps)), showMillisecond && /*#__PURE__*/React.createElement(TimeColumn, _extends({
- units: millisecondUnits,
- value: millisecond,
- optionalValue: pickerMillisecond,
- type: "millisecond",
- onChange: onMillisecondChange,
- onHover: onMillisecondHover
- }, sharedColumnProps)), showMeridiem && /*#__PURE__*/React.createElement(TimeColumn, _extends({
- units: meridiemUnits,
- value: meridiem,
- type: "meridiem",
- onChange: onMeridiemChange,
- onHover: onMeridiemHover
- }, sharedColumnProps)));
- }
|