UNPKG

tdesign-react

Version:
625 lines (598 loc) 23.8 kB
/** * tdesign v1.16.2 * (c) 2025 tdesign * @license MIT */ 'use strict'; var defineProperty = require('./dep-0fe55884.js'); var slicedToArray = require('./dep-5cb0d66d.js'); var React = require('react'); var classNames = require('classnames'); var dayjs = require('dayjs'); var customParseFormat = require('./dep-ad26c517.js'); var advancedFormat = require('./dep-dc049363.js'); var hooks_useConfig = require('../hooks/useConfig.js'); var _util_noop = require('../_util/noop.js'); var timePicker_hooks_useTimePickerTextConfig = require('../time-picker/hooks/useTimePickerTextConfig.js'); var hooks_useDebounce = require('../hooks/useDebounce.js'); var hooks_usePropsRef = require('../hooks/usePropsRef.js'); var _isIterateeCall = require('./dep-753b7d52.js'); var toString = require('./dep-7659797a.js'); var _stringToArray = require('./dep-a76ede3e.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames); var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs); /** * The base implementation of `_.property` without support for deep paths. * * @private * @param {string} key The key of the property to get. * @returns {Function} Returns the new accessor function. */ function baseProperty(key) { return function (object) { return object == null ? undefined : object[key]; }; } /** Used as references for various `Number` constants. */ var MAX_SAFE_INTEGER = 9007199254740991; /* Built-in method references for those with the same name as other `lodash` methods. */ var nativeFloor = Math.floor; /** * The base implementation of `_.repeat` which doesn't coerce arguments. * * @private * @param {string} string The string to repeat. * @param {number} n The number of times to repeat the string. * @returns {string} Returns the repeated string. */ function baseRepeat(string, n) { var result = ''; if (!string || n < 1 || n > MAX_SAFE_INTEGER) { return result; } // Leverage the exponentiation by squaring algorithm for a faster repeat. // See https://en.wikipedia.org/wiki/Exponentiation_by_squaring for more details. do { if (n % 2) { result += string; } n = nativeFloor(n / 2); if (n) { string += string; } } while (n); return result; } /** * Gets the size of an ASCII `string`. * * @private * @param {string} string The string inspect. * @returns {number} Returns the string size. */ var asciiSize = baseProperty('length'); var asciiSize$1 = asciiSize; /** Used to compose unicode character classes. */ var rsAstralRange = "\\ud800-\\udfff", rsComboMarksRange = "\\u0300-\\u036f", reComboHalfMarksRange = "\\ufe20-\\ufe2f", rsComboSymbolsRange = "\\u20d0-\\u20ff", rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange, rsVarRange = "\\ufe0e\\ufe0f"; /** Used to compose unicode capture groups. */ var rsAstral = '[' + rsAstralRange + ']', rsCombo = '[' + rsComboRange + ']', rsFitz = "\\ud83c[\\udffb-\\udfff]", rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')', rsNonAstral = '[^' + rsAstralRange + ']', rsRegional = "(?:\\ud83c[\\udde6-\\uddff]){2}", rsSurrPair = "[\\ud800-\\udbff][\\udc00-\\udfff]", rsZWJ = "\\u200d"; /** Used to compose unicode regexes. */ var reOptMod = rsModifier + '?', rsOptVar = '[' + rsVarRange + ']?', rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*', rsSeq = rsOptVar + reOptMod + rsOptJoin, rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')'; /** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */ var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g'); /** * Gets the size of a Unicode `string`. * * @private * @param {string} string The string inspect. * @returns {number} Returns the string size. */ function unicodeSize(string) { var result = reUnicode.lastIndex = 0; while (reUnicode.test(string)) { ++result; } return result; } /** * Gets the number of symbols in `string`. * * @private * @param {string} string The string to inspect. * @returns {number} Returns the string size. */ function stringSize(string) { return _stringToArray.hasUnicode(string) ? unicodeSize(string) : asciiSize$1(string); } /* Built-in method references for those with the same name as other `lodash` methods. */ var nativeCeil$1 = Math.ceil; /** * Creates the padding for `string` based on `length`. The `chars` string * is truncated if the number of characters exceeds `length`. * * @private * @param {number} length The padding length. * @param {string} [chars=' '] The string used as padding. * @returns {string} Returns the padding for `string`. */ function createPadding(length, chars) { chars = chars === undefined ? ' ' : toString.baseToString(chars); var charsLength = chars.length; if (charsLength < 2) { return charsLength ? baseRepeat(chars, length) : chars; } var result = baseRepeat(chars, nativeCeil$1(length / stringSize(chars))); return _stringToArray.hasUnicode(chars) ? _stringToArray.castSlice(_stringToArray.stringToArray(result), 0, length).join('') : result.slice(0, length); } /** * Pads `string` on the left side if it's shorter than `length`. Padding * characters are truncated if they exceed `length`. * * @static * @memberOf _ * @since 4.0.0 * @category String * @param {string} [string=''] The string to pad. * @param {number} [length=0] The padding length. * @param {string} [chars=' '] The string used as padding. * @returns {string} Returns the padded string. * @example * * _.padStart('abc', 6); * // => ' abc' * * _.padStart('abc', 6, '_-'); * // => '_-_abc' * * _.padStart('abc', 3); * // => 'abc' */ function padStart(string, length, chars) { string = toString.toString(string); length = advancedFormat.toInteger(length); var strLength = length ? stringSize(string) : 0; return length && strLength < length ? createPadding(length - strLength, chars) + string : string; } /* Built-in method references for those with the same name as other `lodash` methods. */ var nativeCeil = Math.ceil, nativeMax = Math.max; /** * The base implementation of `_.range` and `_.rangeRight` which doesn't * coerce arguments. * * @private * @param {number} start The start of the range. * @param {number} end The end of the range. * @param {number} step The value to increment or decrement by. * @param {boolean} [fromRight] Specify iterating from right to left. * @returns {Array} Returns the range of numbers. */ function baseRange(start, end, step, fromRight) { var index = -1, length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), result = Array(length); while (length--) { result[fromRight ? length : ++index] = start; start += step; } return result; } /** * Creates a `_.range` or `_.rangeRight` function. * * @private * @param {boolean} [fromRight] Specify iterating from right to left. * @returns {Function} Returns the new range function. */ function createRange(fromRight) { return function (start, end, step) { if (step && typeof step != 'number' && _isIterateeCall.isIterateeCall(start, end, step)) { end = step = undefined; } // Ensure the sign of `-0` is preserved. start = advancedFormat.toFinite(start); if (end === undefined) { end = start; start = 0; } else { end = advancedFormat.toFinite(end); } step = step === undefined ? start < end ? 1 : -1 : advancedFormat.toFinite(step); return baseRange(start, end, step, fromRight); }; } /** * Creates an array of numbers (positive and/or negative) progressing from * `start` up to, but not including, `end`. A step of `-1` is used if a negative * `start` is specified without an `end` or `step`. If `end` is not specified, * it's set to `start` with `start` then set to `0`. * * **Note:** JavaScript follows the IEEE-754 standard for resolving * floating-point values which can produce unexpected results. * * @static * @since 0.1.0 * @memberOf _ * @category Util * @param {number} [start=0] The start of the range. * @param {number} end The end of the range. * @param {number} [step=1] The value to increment or decrement by. * @returns {Array} Returns the range of numbers. * @see _.inRange, _.rangeRight * @example * * _.range(4); * // => [0, 1, 2, 3] * * _.range(-4); * // => [0, -1, -2, -3] * * _.range(1, 5); * // => [1, 2, 3, 4] * * _.range(0, 20, 5); * // => [0, 5, 10, 15] * * _.range(0, -4, -1); * // => [0, -1, -2, -3] * * _.range(1, 4, 0); * // => [1, 1, 1] * * _.range(0); * // => [] */ var range = createRange(); var range$1 = range; var AM = "am"; var PM = "pm"; var MERIDIEM_LIST = [AM, PM]; var TIME_PICKER_EMPTY = [void 0, void 0]; var DEFAULT_STEPS = [1, 1, 1]; var DEFAULT_FORMAT = "HH:mm:ss"; var EPickerCols = /* @__PURE__ */function (EPickerCols2) { EPickerCols2["hour"] = "hour"; EPickerCols2["minute"] = "minute"; EPickerCols2["second"] = "second"; EPickerCols2["milliSecond"] = "millisecond"; EPickerCols2["meridiem"] = "meridiem"; return EPickerCols2; }(EPickerCols || {}); var TIME_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g; var TWELVE_HOUR_FORMAT = /[h]{1}/; dayjs__default["default"].extend(advancedFormat.advancedFormat); dayjs__default["default"].extend(customParseFormat.customParseFormat); function validateInputValue(value, format) { return dayjs__default["default"](value, format).format(format) === value; } function formatInputValue(value, format) { return dayjs__default["default"](value, format).format(format); } function closestLookup(availableArr, calcVal, step) { if (step <= 1) return calcVal; return availableArr.sort(function (a, b) { return Math.abs(calcVal + 1 - a) - Math.abs(calcVal + 1 - b); })[0]; } function getPickerCols(format) { var renderCol = []; var meridiem = EPickerCols.meridiem, hour = EPickerCols.hour, minute = EPickerCols.minute, second = EPickerCols.second, milliSecond = EPickerCols.milliSecond; var match = format.match(TIME_FORMAT); match.forEach(function (m) { switch (m) { case "H": case "HH": case "h": case "hh": renderCol.push(hour); break; case "a": case "A": renderCol.push(meridiem); break; case "m": case "mm": renderCol.push(minute); break; case "s": case "ss": renderCol.push(second); break; case "SSS": renderCol.push(milliSecond); break; } }); return renderCol; } var timeArr = [EPickerCols.hour, EPickerCols.minute, EPickerCols.second, EPickerCols.milliSecond]; var panelOffset = { top: 15, bottom: 21 }; dayjs__default["default"].extend(customParseFormat.customParseFormat); var SinglePanel = function SinglePanel(props) { var steps = props.steps, format = props.format, _props$onChange = props.onChange, onChange = _props$onChange === void 0 ? _util_noop["default"] : _props$onChange, value = props.value, _props$hideDisabledTi = props.hideDisabledTime, hideDisabledTime = _props$hideDisabledTi === void 0 ? true : _props$hideDisabledTi, disableTime = props.disableTime, _props$position = props.position, position = _props$position === void 0 ? "start" : _props$position, triggerScroll = props.triggerScroll, resetTriggerScroll = props.resetTriggerScroll, isVisible = props.isVisible; var _useConfig = hooks_useConfig["default"](), classPrefix = _useConfig.classPrefix; var TEXT_CONFIG = timePicker_hooks_useTimePickerTextConfig.useTimePickerTextConfig(); var panelClassName = "".concat(classPrefix, "-time-picker__panel"); var _useState = React.useState([]), _useState2 = slicedToArray._slicedToArray(_useState, 2), cols = _useState2[0], setCols = _useState2[1]; var colsRef = React.useRef([]); var maskRef = React.useRef(null); var dayjsValue = React.useMemo(function () { var isStepsSet = !!steps.filter(function (v) { return Number(v) > 1; }).length; if (value) return dayjs__default["default"](value, format); if (isStepsSet) return dayjs__default["default"]().hour(0).minute(0).second(0); return dayjs__default["default"](); }, [value, format, steps]); React.useEffect(function () { colsRef.current = colsRef.current.slice(0, cols.length); }, [cols]); React.useEffect(function () { var renderCol = getPickerCols(format); setCols(renderCol); }, [format]); var getItemHeight = React.useCallback(function () { var _maskRef$current; var maskDom = maskRef === null || maskRef === void 0 || (_maskRef$current = maskRef.current) === null || _maskRef$current === void 0 ? void 0 : _maskRef$current.querySelector("div"); if (!maskDom) { return { offsetHeight: 0, margin: 0 }; } return { offsetHeight: maskDom.offsetHeight, margin: parseInt(getComputedStyle(maskDom).marginTop, 10) }; }, []); var timeItemCanUsed = React.useCallback(function (col, el) { var colIdx = timeArr.indexOf(col); if (colIdx !== -1) { var _ref; var params = [dayjsValue.hour(), dayjsValue.minute(), dayjsValue.second(), dayjsValue.millisecond()]; params[colIdx] = Number(el); return !((_ref = disableTime && (disableTime === null || disableTime === void 0 ? void 0 : disableTime.apply(void 0, params.concat([{ partial: position }])))) !== null && _ref !== void 0 && (_ref = _ref[col]) !== null && _ref !== void 0 && _ref.includes(Number(el))); } return true; }, [position, disableTime, dayjsValue]); var getColList = React.useCallback(function (col) { var count = 0; if (timeArr.includes(col)) { var colIdx = timeArr.indexOf(col); var colStep = steps[colIdx] || 1; if (col === EPickerCols.hour) count = TWELVE_HOUR_FORMAT.test(format) ? 11 : 23;else if (col === EPickerCols.milliSecond) count = 999;else count = 59; var colList = range$1(0, count + 1, Number(colStep)).map(function (v) { return padStart(String(v), 2, "0"); }) || []; return hideDisabledTime && !!disableTime ? colList.filter(function (t) { var _disableTime; var params = [dayjsValue.hour(), dayjsValue.minute(), dayjsValue.second(), dayjsValue.millisecond()]; params[colIdx] = Number(t); return !(disableTime !== null && disableTime !== void 0 && (_disableTime = disableTime.apply(void 0, params.concat([{ partial: position }]))) !== null && _disableTime !== void 0 && (_disableTime = _disableTime[col]) !== null && _disableTime !== void 0 && _disableTime.includes(Number(t))); }) : colList; } return MERIDIEM_LIST; }, [steps, format, hideDisabledTime, dayjsValue, disableTime, position]); var getScrollDistance = React.useCallback(function (col, time) { if (col === EPickerCols.hour && /[h]{1}/.test(format)) time = time % 12; var itemIdx = getColList(col).indexOf(padStart(String(time), 2, "0")); var _getItemHeight = getItemHeight(), offsetHeight = _getItemHeight.offsetHeight, margin = _getItemHeight.margin; var timeItemTotalHeight = offsetHeight + margin; var distance = Math.abs(Math.max(0, itemIdx) * timeItemTotalHeight); return distance; }, [getItemHeight, getColList, format]); var isVisibleRef = hooks_usePropsRef.usePropRef(isVisible); var handleScroll = hooks_useDebounce["default"](function (col, idx, e) { var _colsRef$current$idx; if (!isVisibleRef.current) { return; } var val; var formattedVal; var scrollTop = ((_colsRef$current$idx = colsRef.current[idx]) === null || _colsRef$current$idx === void 0 ? void 0 : _colsRef$current$idx.scrollTop) + panelOffset.top; var _getItemHeight2 = getItemHeight(), offsetHeight = _getItemHeight2.offsetHeight, margin = _getItemHeight2.margin; var timeItemTotalHeight = offsetHeight + margin; var colStep = Math.abs(Math.round(scrollTop / timeItemTotalHeight + 0.5)); var meridiem = MERIDIEM_LIST[Math.min(colStep - 1, 1)].toLowerCase(); if (Number.isNaN(colStep)) colStep = 1; if (timeArr.includes(col)) { var max = 59; if (col === EPickerCols.hour) max = /[h]{1}/.test(format) ? 11 : 23;else if (col === EPickerCols.milliSecond) max = 999; var colIdx = timeArr.indexOf(col); var availableArr = range$1(0, max + 1, Number(steps[colIdx]) || 1); val = closestLookup(availableArr, Number(getColList(col)[Math.min(colStep - 1, max + 1, availableArr.length - 1)]), Number(steps[colIdx]) || 1); if (Number.isNaN(val)) val = availableArr[availableArr.length - 1]; if (col === EPickerCols.hour && cols.includes(EPickerCols.meridiem) && dayjsValue.hour() >= 12) { val = Number(val) + 12; } } else val = meridiem; var distance = getScrollDistance(col, val); if (!dayjs__default["default"](dayjsValue).isValid() || value && !dayjs__default["default"](value, format, true).isValid()) { return; } if (timeArr.includes(col)) { var _dayjsValue$col; if (timeItemCanUsed(col, val)) formattedVal = (_dayjsValue$col = dayjsValue[col]) === null || _dayjsValue$col === void 0 ? void 0 : _dayjsValue$col.call(dayjsValue, val).format(format);else formattedVal = dayjsValue.format(format); } else { var currentHour = dayjsValue.hour(); if (meridiem === AM && currentHour >= 12) { formattedVal = dayjsValue.hour(currentHour - 12).format(format); } else if (meridiem === PM && currentHour < 12) { formattedVal = dayjsValue.hour(currentHour + 12).format(format); } else { formattedVal = dayjsValue.format(format); } } if (formattedVal !== value) { onChange(formattedVal, e); } if (distance !== scrollTop) { var _scrollCtrl$scrollTo; var scrollCtrl = colsRef.current[cols.indexOf(col)]; if (!scrollCtrl || scrollCtrl.scrollTop === distance) return; (_scrollCtrl$scrollTo = scrollCtrl.scrollTo) === null || _scrollCtrl$scrollTo === void 0 || _scrollCtrl$scrollTo.call(scrollCtrl, { top: distance, behavior: "smooth" }); } }, 50); var scrollToTime = React.useCallback(function (col, time, idx) { var _scrollCtrl$scrollTo2; var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto"; var distance = getScrollDistance(col, time); var scrollCtrl = colsRef.current[idx]; if (!scrollCtrl || scrollCtrl.scrollTop === distance || !timeItemCanUsed(col, time)) return; (_scrollCtrl$scrollTo2 = scrollCtrl.scrollTo) === null || _scrollCtrl$scrollTo2 === void 0 || _scrollCtrl$scrollTo2.call(scrollCtrl, { top: distance, behavior: behavior }); }, [getScrollDistance]); var updateTimeScrollPos = React.useCallback(function () { var isAutoScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; var behavior = value && !isAutoScroll ? "smooth" : "auto"; var isStepsSet = !!steps.filter(function (v) { return Number(v) > 1; }).length; cols.forEach(function (col, idx) { if (!isStepsSet || isStepsSet && value) { var _dayjsValue$col2; scrollToTime(col, timeArr.includes(col) ? (_dayjsValue$col2 = dayjsValue[col]) === null || _dayjsValue$col2 === void 0 ? void 0 : _dayjsValue$col2.call(dayjsValue) : dayjsValue.format("a"), idx, behavior); } else { var _getColList; scrollToTime(col, (_getColList = getColList(col)) === null || _getColList === void 0 ? void 0 : _getColList[0], idx, behavior); } }); resetTriggerScroll(); }, [cols, scrollToTime, dayjsValue, value, steps, getColList, resetTriggerScroll]); var handleTimeItemClick = function handleTimeItemClick(col, el, idx, e) { if (!timeItemCanUsed(col, el)) return; if (timeArr.includes(col)) { if (col === EPickerCols.hour && dayjsValue.format("a") === PM && cols.includes(EPickerCols.meridiem)) { el = Number(el) + 12; } scrollToTime(col, el, idx, "smooth"); setTimeout(function () { var _dayjsValue$col3; onChange((_dayjsValue$col3 = dayjsValue[col]) === null || _dayjsValue$col3 === void 0 ? void 0 : _dayjsValue$col3.call(dayjsValue, el).format(format), e); }, 100); } else { var currentHour = dayjsValue.hour(); if (el === AM && currentHour >= 12) { onChange(dayjsValue.hour(currentHour - 12).format(format), e); } else if (el === PM && currentHour < 12) { onChange(dayjsValue.hour(currentHour + 12).format(format), e); } } }; React.useEffect(function () { if (value) updateTimeScrollPos(true); }, [value, updateTimeScrollPos]); React.useEffect(function () { if (triggerScroll) updateTimeScrollPos(true); }, [triggerScroll, updateTimeScrollPos]); var isCurrent = React.useCallback(function (col, colItem) { var _dayjsValue$col4; var colVal; if (col === EPickerCols.meridiem) { var currentMeridiem = dayjsValue.format("a"); return currentMeridiem === colItem; } colVal = (_dayjsValue$col4 = dayjsValue[col]) === null || _dayjsValue$col4 === void 0 ? void 0 : _dayjsValue$col4.call(dayjsValue); if (col === EPickerCols.hour && /[h]{1}/.test(format)) { colVal %= 12; } return colVal === Number(colItem); }, [format, dayjsValue]); function renderScrollCtrl() { return cols.map(function (col, idx) { return /* @__PURE__ */React__default["default"].createElement("ul", { key: "".concat(col, "_").concat(idx), ref: function ref(el) { colsRef.current[idx] = el; }, className: "".concat(panelClassName, "-body-scroll"), onScroll: function onScroll(e) { return handleScroll(col, idx, e); }, style: { "--timePickerPanelOffsetTop": panelOffset.top, "--timePickerPanelOffsetBottom": panelOffset.bottom } }, getColList(col).map(function (el) { return /* @__PURE__ */React__default["default"].createElement("li", { key: el, className: classNames__default["default"]("".concat(panelClassName, "-body-scroll-item"), defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(classPrefix, "-is-disabled"), !timeItemCanUsed(col, el)), "".concat(classPrefix, "-is-current"), isCurrent(col, el))), onClick: function onClick(e) { return handleTimeItemClick(col, el, idx, e); } }, timeArr.includes(col) ? TWELVE_HOUR_FORMAT.test(format) && col === EPickerCols.hour && el === "00" ? "12" : el : TEXT_CONFIG[el]); })); }); } return /* @__PURE__ */React__default["default"].createElement("div", { className: "".concat(panelClassName, "-body") }, /* @__PURE__ */React__default["default"].createElement("div", { className: "".concat(panelClassName, "-body-active-mask"), ref: maskRef }, cols.map(function (col, idx) { return /* @__PURE__ */React__default["default"].createElement("div", { key: "".concat(col, "_").concat(idx) }); })), renderScrollCtrl()); }; exports.DEFAULT_FORMAT = DEFAULT_FORMAT; exports.DEFAULT_STEPS = DEFAULT_STEPS; exports.SinglePanel = SinglePanel; exports.TIME_PICKER_EMPTY = TIME_PICKER_EMPTY; exports.formatInputValue = formatInputValue; exports.validateInputValue = validateInputValue; //# sourceMappingURL=dep-bcee2619.js.map