@sms-frontend/components/es/DatePicker/picker-range.js

SMS Design React UI Library.

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useState, useRef, useEffect, useContext } from 'react';
import Trigger from '../Trigger';
import DateInputRange from '../_class/picker/input-range';
import { isArray, isDayjs, isObject } from '../_util/is';
import cs from '../_util/classNames';
import { ConfigContext } from '../ConfigProvider';
import { getDayjsValue, getValueWithTime, dayjs, getNow, methods, getSortedDayjsArray, isDayjsArrayChange, initializeDateLocale, getResolvedDayjsLocaleName, } from '../_util/dayjs';
import IconCalendar from '../../icon/react-icon/IconCalendar';
import IconCalendarClock from '../../icon/react-icon/IconCalendarClock';
import RangePickerPanel from './panels/range';
import Footer from './panels/footer';
import Shortcuts from './panels/shortcuts';
import { getAvailableDayjsLength } from './util';
import useMergeProps from '../_util/hooks/useMergeProps';
// get default format by mode
function getFormat(props) {
    var format = props.format, showTime = props.showTime, mode = props.mode;
    var valueFormat;
    switch (mode) {
        case 'date':
            valueFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
            break;
        case 'month':
            valueFormat = 'YYYY-MM';
            break;
        case 'year':
            valueFormat = 'YYYY';
            break;
        case 'week':
            valueFormat = 'YYYY-wo';
            break;
        case 'quarter':
            valueFormat = 'YYYY-[Q]Q';
            break;
        default:
            valueFormat = 'YYYY-MM-DD';
    }
    if (format) {
        valueFormat = format;
    }
    return valueFormat;
}
var defaultProps = {
    allowClear: true,
    unmountOnExit: true,
    position: 'bl',
    editable: true,
    mode: 'date',
    dayStartOfWeek: 0,
};
var Picker = function (baseProps) {
    var _a, _b;
    var _c = useContext(ConfigContext), getPrefixCls = _c.getPrefixCls, locale = _c.locale, ctxSize = _c.size, componentConfig = _c.componentConfig;
    var props = useMergeProps(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.DatePicker);
    var allowClear = props.allowClear, className = props.className, style = props.style, placeholder = props.placeholder, getPopupContainer = props.getPopupContainer, disabled = props.disabled, position = props.position, error = props.error, unmountOnExit = props.unmountOnExit, editable = props.editable, triggerProps = props.triggerProps, shortcuts = props.shortcuts, onSelect = props.onSelect, onVisibleChange = props.onVisibleChange, propsValue = props.value, onChange = props.onChange, icons = props.icons, disabledDate = props.disabledDate, disabledTime = props.disabledTime, mode = props.mode, showTime = props.showTime, onSelectShortcut = props.onSelectShortcut, extra = props.extra, shortcutsPlacementLeft = props.shortcutsPlacementLeft, dayStartOfWeek = props.dayStartOfWeek, onOk = props.onOk, defaultPickerValue = props.defaultPickerValue, pickerValue = props.pickerValue, onPickerValueChange = props.onPickerValueChange, triggerElement = props.triggerElement, clearRangeOnReselect = props.clearRangeOnReselect;
    var prefixCls = getPrefixCls('picker-range');
    var localeName = getResolvedDayjsLocaleName(locale.locale);
    initializeDateLocale(localeName, dayStartOfWeek);
    var refInput = useRef(null);
    var refPanel = useRef(null);
    var refShortcuts = useRef(null);
    var shortcutEnterTimer = useRef(null);
    var shortcutLeaveTimer = useRef(null);
    var format = getFormat(props);
    // 获取半禁用时的序号
    function getAvailableInputIndex() {
        if (isArray(disabled)) {
            if (disabled[0] && !disabled[1]) {
                return 1;
            }
            if (disabled[1] && !disabled[0]) {
                return 0;
            }
        }
    }
    var availableInputIndex = getAvailableInputIndex();
    var isHalfAvailable = typeof availableInputIndex === 'number';
    var disabledTimePickerIndex = isHalfAvailable ? 1 ^ availableInputIndex : undefined;
    // 当前聚焦的输入框
    var _d = __read(useState(isHalfAvailable ? availableInputIndex : 0), 2), focusedInputIndex = _d[0], setFocusedInputIndex = _d[1];
    var nextFocusedInputIndex = 1 ^ focusedInputIndex;
    var _e = __read(useState(), 2), inputValue = _e[0], setInputValue = _e[1];
    var _f = __read(useState(), 2), hoverPlaceholderValue = _f[0], setHoverPlaceholderValue = _f[1];
    var _g = __read(useState(getDefaultValue()), 2), value = _g[0], setValue = _g[1];
    var _h = __read(useState(), 2), valueShow = _h[0], setValueShow = _h[1];
    var _j = __read(useState(), 2), valueShowHover = _j[0], setValueShowHover = _j[1];
    var _k = __read(useState(), 2), shortcutsValue = _k[0], setShortcutsValue = _k[1];
    var _l = __read(useState(props.popupVisible), 2), popupVisible = _l[0], setPopupVisible = _l[1];
    var _m = __read(useState([mode, mode]), 2), panelModes = _m[0], setPanelModes = _m[1];
    var _o = __read(useState(false), 2), isTimePanel = _o[0], setIsTimePanel = _o[1];
    var mergedPopupVisible = 'popupVisible' in props ? props.popupVisible : popupVisible;
    var propsValueDayjs = getDayjsValue(propsValue, format);
    var mergedValue = 'value' in props ? propsValueDayjs : value;
    var panelValue = shortcutsValue || valueShow || mergedValue || [];
    var selectedLength = getAvailableDayjsLength(valueShow || mergedValue);
    // the first time we select a range after open
    var firstRange = useRef(true);
    var now = getNow();
    function getTimeValues() {
        var timeValues = [];
        var defaultTimeValue = isObject(showTime) && showTime.defaultValue
            ? getDayjsValue(showTime.defaultValue, showTime.format || 'HH:mm:ss')
            : [];
        timeValues[0] = panelValue[0] || defaultTimeValue[0] || now;
        timeValues[1] = panelValue[1] || defaultTimeValue[1] || now;
        return timeValues;
    }
    var timeValues = getTimeValues();
    var initialDisabledDate = isHalfAvailable
        ? function (current) {
            return availableInputIndex === 0
                ? current.isAfter(panelValue[1], mode)
                : current.isBefore(panelValue[0], mode);
        }
        : undefined;
    var selectedDisabledDate = useRef(initialDisabledDate);
    // if triggerElement !== undefined, we should activate clearRangeOnReselect by default
    var customTriggerElement = triggerElement !== undefined;
    var resetRange = customTriggerElement || clearRangeOnReselect;
    function getDefaultValue() {
        var value;
        if (props.value) {
            value = getDayjsValue(props.value, format);
        }
        else {
            value = getDayjsValue(props.defaultValue, format);
        }
        if (isHalfAvailable && (!value || (value && !value[nextFocusedInputIndex]))) {
            var nv = [];
            nv[nextFocusedInputIndex] = getNow();
            return nv;
        }
        return value;
    }
    var defaultPageShowDates = mergedValue ||
        getDayjsValue(defaultPickerValue, format) || [getNow(), getNow()];
    // 控制两个日期选择器面板显示的日期
    var _p = __read(useState(getShowDatesFromFocused(defaultPageShowDates)), 2), pageShowDates = _p[0], setPageShowDates = _p[1];
    var mergedPageShowDate = getShowDatesFromFocused(getDayjsValue(pickerValue, format)) || pageShowDates;
    useEffect(function () {
        setPanelModes([mode, mode]);
    }, [mode]);
    useEffect(function () {
        setHoverPlaceholderValue(undefined);
        setInputValue(undefined);
        if (mergedPopupVisible) {
            setIsTimePanel(false);
            setPanelModes([mode, mode]);
            setPageShowDates(getShowDatesFromFocused(defaultPageShowDates));
            setValueShow(mergedValue);
            if (shortcutsPlacementLeft) {
                refShortcuts.current.style.maxHeight = refPanel.current.clientHeight + "px";
            }
        }
        else {
            setValueShow(undefined);
            setValueShowHover(undefined);
            setShortcutsValue(undefined);
            resetSelectedDisabledDate();
        }
        firstRange.current = mergedPopupVisible;
    }, [mergedPopupVisible]);
    var startStr = (_a = propsValueDayjs === null || propsValueDayjs === void 0 ? void 0 : propsValueDayjs[0]) === null || _a === void 0 ? void 0 : _a.format(format);
    var endStr = (_b = propsValueDayjs === null || propsValueDayjs === void 0 ? void 0 : propsValueDayjs[1]) === null || _b === void 0 ? void 0 : _b.format(format);
    useEffect(function () {
        setValueShow(undefined);
        setValueShowHover(undefined);
    }, [startStr, endStr]);
    function setFixedPageShowDates(innerValue) {
        var newPageShowDates = getShowDatesFromFocused(innerValue);
        setPageShowDates(newPageShowDates);
        handlePickerValueChange(newPageShowDates);
    }
    function handlePickerValueChange(v) {
        if (!isSamePanel([v[0], pageShowDates[0]], mode)) {
            onPickerValueChange &&
                onPickerValueChange(isArray(v) ? v.map(function (v) { return v && v.format(format); }) : undefined, v);
        }
    }
    function getShowDatesFromFocused(dates, index) {
        if (index === void 0) { index = focusedInputIndex; }
        var prev = index === 0 || isSamePanel(dates, mode);
        if (isArray(dates) && dates.length < 2) {
            return getPageShowDatesByValue(dates[0] || getNow(), mode, 'prev');
        }
        if (isArray(dates) && dates.length === 2) {
            if (dates[index]) {
                return getPageShowDatesByValue(dates[index], mode, prev ? 'prev' : 'next');
            }
            return getPageShowDatesByValue(dates[index === 0 ? 1 : 0] || getNow(), mode, prev && !dates[index === 0 ? 1 : 0] ? 'prev' : 'next');
        }
    }
    function setNestPageShowDates(dates, pickerMode, index) {
        if (isArray(dates) && dates[index]) {
            setPageShowDates(getPageShowDatesByValue(dates[index], pickerMode, index === 0 ? 'prev' : 'next'));
            handlePickerValueChange(dates);
        }
    }
    function isSamePanel(innerValue, pickerMode) {
        if (innerValue && innerValue.length === 2 && isValidDayjsArray(innerValue)) {
            return (((pickerMode === 'date' || pickerMode === 'week') &&
                innerValue[0].isSame(innerValue[1], 'month')) ||
                ((pickerMode === 'month' || pickerMode === 'quarter') &&
                    innerValue[0].isSame(innerValue[1], 'year')) ||
                (pickerMode === 'year' &&
                    Math.floor(innerValue[0].year() / 10) === Math.floor(innerValue[1].year() / 10)));
        }
    }
    // 获取默认的面板显示日期
    function getPageShowDatesByValue(value, pickerMode, type) {
        if (value === void 0) { value = getNow(); }
        if (pickerMode === void 0) { pickerMode = mode; }
        if (type === void 0) { type = 'prev'; }
        var prev = type === 'prev';
        switch (pickerMode) {
            case 'date':
            case 'week':
                return prev
                    ? [value, methods.add(value, 1, 'month')]
                    : [methods.subtract(value, 1, 'month'), value];
            case 'month':
            case 'quarter':
                return prev
                    ? [value, methods.add(value, 1, 'year')]
                    : [methods.subtract(value, 1, 'year'), value];
            case 'year':
                return prev
                    ? [value, methods.add(value, 10, 'year')]
                    : [methods.subtract(value, 10, 'year'), value];
            default:
                return [];
        }
    }
    function focusInput(index) {
        refInput.current &&
            refInput.current.focus &&
            refInput.current.focus(isHalfAvailable ? availableInputIndex : index);
    }
    function visibleChange(visible) {
        if (!('popupVisible' in props)) {
            if (visible) {
                setTimeout(function () { return focusInput(); });
                setOpen(visible);
            }
            else {
                setOpen(false);
            }
        }
    }
    // 弹出框打开关闭的回调
    function setOpen(visible) {
        onVisibleChange && onVisibleChange(visible);
        setPopupVisible(visible);
    }
    function onClear(e) {
        e.stopPropagation();
        var newValueShow = __spreadArray([], __read(panelValue), false);
        if (isHalfAvailable) {
            newValueShow[availableInputIndex] = undefined;
        }
        else {
            newValueShow = undefined;
        }
        setValue(newValueShow);
        setValueShow(newValueShow);
        onHandleChange(newValueShow);
        props.onClear && props.onClear();
    }
    function changeFocusedInputIndex(index, silent) {
        setInputValue(undefined);
        setFocusedInputIndex(index);
        if (panelValue && panelValue.length && !silent) {
            var newPageShowDates = getShowDatesFromFocused(panelValue, index);
            setPageShowDates(newPageShowDates);
            handlePickerValueChange(newPageShowDates);
        }
    }
    function isDisabledDate(date) {
        var selectedDisabled = typeof selectedDisabledDate.current === 'function'
            ? selectedDisabledDate.current(date)
            : false;
        var originDisabledDate = typeof disabledDate === 'function' ? disabledDate(date) : false;
        return originDisabledDate || selectedDisabled;
    }
    // 判断输入日期是否格式正确
    function isValid(time) {
        return (typeof time === 'string' &&
            dayjs(time, format).format(format) === time &&
            !isDisabledDate(dayjs(time, format))
        // (panelValue[nextFocusedInputIndex]
        //   ? nextFocusedInputIndex === 0
        //     ? panelValue[nextFocusedInputIndex].isBefore(dayjs(time, format))
        //     : panelValue[nextFocusedInputIndex].isAfter(dayjs(time, format))
        //   : true)
        );
    }
    function resetSelectedDisabledDate() {
        selectedDisabledDate.current = initialDisabledDate;
    }
    function onChangeInput(e) {
        var newValueShow = __spreadArray([], __read((panelValue || [])), false);
        var niv = e.target.value;
        setInputValue(niv);
        if (!mergedPopupVisible) {
            setOpen(true);
        }
        if (isValid(niv)) {
            newValueShow[focusedInputIndex] = getDayjsValue(niv, format);
            setValueShow(newValueShow);
            setFixedPageShowDates(newValueShow);
            setInputValue(undefined);
        }
    }
    // 跟上次的值进行对比，如果值改变了才触发 onChange
    function onHandleChange(newValue) {
        if (isDayjsArrayChange(mergedValue, newValue)) {
            onChange &&
                onChange(isArray(newValue) ? newValue.map(function (v) { return v && v.format(format); }) : undefined, newValue);
        }
    }
    function onPressEnter() {
        if (isArray(valueShow) && valueShow.length) {
            if (inputValue && !isValid(inputValue)) {
                setInputValue(undefined);
            }
            else if (selectedLength !== 2) {
                switchFocusedInput();
            }
            else if (selectedLength === 2) {
                onConfirmValue(valueShow);
            }
        }
        else {
            setOpen(false);
        }
    }
    function onPressTab(e) {
        e.preventDefault();
    }
    // 确认更新组件值
    function onConfirmValue(date, keepOpen) {
        var confirmValue = date || panelValue;
        if (!confirmValue || !confirmValue[0] || !confirmValue[1]) {
            return;
        }
        var sortedValues = getSortedDayjsArray(confirmValue);
        setValue(sortedValues);
        onHandleChange(sortedValues);
        resetSelectedDisabledDate();
        if (triggerElement !== null && !keepOpen) {
            setOpen(false);
        }
    }
    // 点击确认按钮的回调
    function onClickConfirmBtn() {
        onConfirmValue();
        onOk &&
            onOk(panelValue.map(function (v) { return v && v.format(format); }), panelValue);
    }
    // 点击面板日期的回调
    function onSelectPanel(_, date) {
        var newValueShow = resetRange && selectedLength === 2 && !isHalfAvailable ? [] : __spreadArray([], __read(panelValue), false);
        // if custom triggerElement, focused input index always 0 -> 1
        var focusedIndex = customTriggerElement
            ? selectedLength === 0 || selectedLength === 2
                ? 0
                : 1
            : focusedInputIndex;
        var newDate = showTime ? getValueWithTime(date, timeValues[focusedIndex]) : date;
        newValueShow[focusedIndex] = newDate;
        var sortedValueShow = getSortedDayjsArray(newValueShow);
        onSelectValueShow(sortedValueShow);
        setInputValue(undefined);
        setHoverPlaceholderValue(undefined);
        if (resetRange) {
            if (selectedLength === 0 || (selectedLength === 2 && !isHalfAvailable)) {
                customTriggerElement ? setFocusedInputIndex(1) : switchFocusedInput(true);
            }
            else if (!showTime) {
                onConfirmValue(newValueShow);
            }
        }
        else {
            setFixedPageShowDates(sortedValueShow);
            if (selectedLength === 0) {
                switchFocusedInput(true);
            }
            else if (selectedLength === 2 && firstRange.current && !isHalfAvailable) {
                firstRange.current = false;
                switchFocusedInput(true);
                if (!showTime) {
                    onConfirmValue(newValueShow, true);
                }
            }
            else {
                firstRange.current = false;
                if (!showTime) {
                    onConfirmValue(newValueShow);
                }
            }
        }
    }
    // 点击时间的回调
    function onTimePickerSelect(index, _, time) {
        var newValueShow = isArray(panelValue) ? __spreadArray([], __read(panelValue), false) : [];
        var newTimeValue = getValueWithTime(newValueShow[index], time);
        newValueShow[index] = newTimeValue;
        onSelectValueShow(newValueShow);
    }
    function onSelectValueShow(newValueShow) {
        setValueShow(newValueShow);
        setValueShowHover(undefined);
        var sortedValues = getSortedDayjsArray(newValueShow);
        onSelect &&
            onSelect(sortedValues.map(function (v) { return v && v.format(format); }), sortedValues, { type: focusedInputIndex === 1 ? 'end' : 'start' });
    }
    // 切换到另一个输入框
    function switchFocusedInput(silent) {
        changeFocusedInputIndex(nextFocusedInputIndex, silent);
        setTimeout(function () { return focusInput(nextFocusedInputIndex); });
    }
    // 鼠标移入单元格的回调
    function onMouseEnterCell(date, disabled) {
        var newValueShowHover = __spreadArray([], __read((panelValue || [])), false);
        var needShowHover = resetRange ? selectedLength === 1 : selectedLength !== 0;
        if (!disabled && needShowHover) {
            newValueShowHover[focusedInputIndex] = getValueWithTime(date, timeValues[focusedInputIndex]);
            setValueShowHover(newValueShowHover);
            setInputValue(undefined);
        }
        if (!disabled) {
            var placeHolderValue = showTime
                ? getValueWithTime(date, timeValues[focusedInputIndex])
                : date;
            setHoverPlaceholderValue(placeHolderValue.format(format));
        }
    }
    function onMouseLeaveCell() {
        setValueShowHover(undefined);
        setHoverPlaceholderValue(undefined);
    }
    function isValidDayjsArray(sv) {
        return sv && isArray(sv) && sv.length === 2 && isDayjs(sv[0]) && isDayjs(sv[1]);
    }
    // 判断快捷输入的值是否格式正确
    function isValidShortcut(shortcut) {
        var sv = typeof shortcut.value === 'function' && shortcut.value();
        return isValidDayjsArray(sv);
    }
    function clearShortcutsTimer() {
        clearTimeout(shortcutEnterTimer.current);
        clearTimeout(shortcutLeaveTimer.current);
        shortcutEnterTimer.current = null;
        shortcutLeaveTimer.current = null;
    }
    // 鼠标移入快捷输入按钮
    function onMouseEnterShortcut(shortcut) {
        clearShortcutsTimer();
        shortcutEnterTimer.current = setTimeout(function () {
            if (isValidShortcut(shortcut)) {
                var nv = getDayjsValue(shortcut.value(), format);
                setShortcutsValue(nv);
                setFixedPageShowDates(nv);
            }
        }, 50);
    }
    // 鼠标移出快捷输入按钮
    function onMouseLeaveShortcut() {
        clearShortcutsTimer();
        shortcutLeaveTimer.current = setTimeout(function () {
            setShortcutsValue(undefined);
            setFixedPageShowDates(valueShow || mergedValue || [getNow(), getNow()]);
        }, 50);
    }
    // 点击选择快捷输入按钮
    function onHandleSelectShortcut(shortcut) {
        onSelectShortcut && onSelectShortcut(shortcut);
        if (isValidShortcut(shortcut)) {
            var time = getDayjsValue(shortcut.value(), format);
            onConfirmValue(time);
        }
    }
    // 修改面板日期（面板自身的值，并非选中的值）
    function changePageShowDates(type, unit, num) {
        if (num === void 0) { num = 1; }
        var index = type === 'prev' ? 0 : 1;
        var newPageShowDates = __spreadArray([], __read(mergedPageShowDate), false);
        if (type === 'prev') {
            newPageShowDates[index] = methods.subtract(mergedPageShowDate[index], num, unit);
        }
        if (type === 'next') {
            newPageShowDates[index] = methods.add(mergedPageShowDate[index], num, unit);
        }
        newPageShowDates = getPageShowDatesByValue(newPageShowDates[index], mode, type);
        setFixedPageShowDates(newPageShowDates);
    }
    // 点击翻页按钮的回调
    function getHeaderOperations(pickerMode) {
        if (pickerMode === void 0) { pickerMode = mode; }
        if (pickerMode === 'date' || pickerMode === 'week') {
            return {
                onPrev: function () { return changePageShowDates('prev', 'month'); },
                onNext: function () { return changePageShowDates('next', 'month'); },
                onSuperPrev: function () { return changePageShowDates('prev', 'year'); },
                onSuperNext: function () { return changePageShowDates('next', 'year'); },
            };
        }
        if (pickerMode === 'month' || pickerMode === 'quarter') {
            return {
                onSuperPrev: function () { return changePageShowDates('prev', 'year'); },
                onSuperNext: function () { return changePageShowDates('next', 'year'); },
            };
        }
        if (pickerMode === 'year') {
            return {
                onSuperPrev: function () { return changePageShowDates('prev', 'year', 10); },
                onSuperNext: function () { return changePageShowDates('next', 'year', 10); },
            };
        }
    }
    function onClickSelectTimeBtn() {
        setIsTimePanel(!isTimePanel);
    }
    // 实际渲染的弹出框的内容
    function renderPopup(panelOnly) {
        var _a;
        var classNames = cs(prefixCls + "-container", (_a = {},
            _a[prefixCls + "-panel-only"] = panelOnly,
            _a[prefixCls + "-container-shortcuts-placement-left"] = isArray(shortcuts) && shortcutsPlacementLeft,
            _a), panelOnly ? className : '');
        var shortcutsProps = {
            prefixCls: getPrefixCls('picker'),
            showTime: showTime,
            shortcuts: shortcuts,
            onMouseEnterShortcut: onMouseEnterShortcut,
            onMouseLeaveShortcut: onMouseLeaveShortcut,
            onSelectShortcut: onHandleSelectShortcut,
        };
        var shouldShowFooter = (showTime && panelModes[0] === 'date' && panelModes[1] === 'date') ||
            extra ||
            (isArray(shortcuts) && shortcuts.length && !shortcutsPlacementLeft);
        var content = (React.createElement(React.Fragment, null,
            React.createElement(RangePickerPanel, __assign({}, props, getHeaderOperations(), { getHeaderOperations: getHeaderOperations, setRangePageShowDates: setNestPageShowDates, pageShowDates: mergedPageShowDate, value: panelValue, format: format, onSelectPanel: onSelectPanel, onMouseEnterCell: onMouseEnterCell, onMouseLeaveCell: onMouseLeaveCell, disabledDate: function (current) { return isDisabledDate(current); }, disabledTime: disabledTime, mode: mode, localeName: localeName, showTime: showTime, timeValues: shortcutsValue || timeValues, onTimePickerSelect: onTimePickerSelect, popupVisible: mergedPopupVisible, dayStartOfWeek: dayStartOfWeek, disabledTimePickerIndex: disabledTimePickerIndex, isTimePanel: isTimePanel, valueShowHover: valueShowHover, panelModes: panelModes, setPanelModes: setPanelModes })),
            shouldShowFooter && (React.createElement(Footer, __assign({}, shortcutsProps, { DATEPICKER_LOCALE: locale.DatePicker, disabled: !(isArray(panelValue) && panelValue[0] && panelValue[1]), onClickConfirmBtn: onClickConfirmBtn, extra: extra, shortcutsPlacementLeft: shortcutsPlacementLeft, onClickSelectTimeBtn: onClickSelectTimeBtn, isTimePanel: isTimePanel })))));
        return (React.createElement("div", { className: classNames, onClick: function () { return focusInput(); }, style: panelOnly ? style : {} }, shortcutsPlacementLeft ? (React.createElement(React.Fragment, null,
            React.createElement(Shortcuts, __assign({ ref: refShortcuts }, shortcutsProps)),
            React.createElement("div", { ref: refPanel, className: prefixCls + "-panel-wrapper" }, content))) : (content)));
    }
    var size = props.size || ctxSize;
    var placeholders = isArray(placeholder) ? placeholder : locale.DatePicker.placeholders[mode];
    var suffixIcon = icons && icons.inputSuffix === null
        ? null
        : (icons && icons.inputSuffix) || (showTime ? React.createElement(IconCalendarClock, null) : React.createElement(IconCalendar, null));
    var baseInputProps = {
        style: style,
        className: className,
        popupVisible: mergedPopupVisible,
        format: format,
        disabled: disabled,
        error: error,
        size: size,
        onPressEnter: onPressEnter,
        onPressTab: onPressTab,
        onClear: onClear,
        suffixIcon: suffixIcon,
        editable: editable,
        allowClear: allowClear,
    };
    var triggerDisabled = isArray(disabled) ? disabled[0] && disabled[1] : disabled;
    if (triggerElement === null) {
        return renderPopup(true);
    }
    return (React.createElement(Trigger, __assign({ popup: renderPopup, trigger: "click", clickToClose: false, position: position, disabled: triggerDisabled, popupAlign: { bottom: 4 }, getPopupContainer: getPopupContainer, onVisibleChange: visibleChange, popupVisible: mergedPopupVisible, classNames: "slideDynamicOrigin", unmountOnExit: unmountOnExit }, triggerProps), triggerElement || (React.createElement(DateInputRange, __assign({}, baseInputProps, { ref: refInput, placeholder: placeholders, value: valueShow || mergedValue, onChange: onChangeInput, inputValue: hoverPlaceholderValue || inputValue, changeFocusedInputIndex: changeFocusedInputIndex, focusedInputIndex: focusedInputIndex, isPlaceholder: !!hoverPlaceholderValue })))));
};
Picker.displayName = 'RangePicker';
export default Picker;