@fjyueke/arco-mcp 1.0.0

package/metaData/components/date-picker/doc.md

@@ -0,0 +1,102 @@
+### 数据录入
+
+# 日期时间选择器 DatePicker
+
+日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|onOk|点击选中时执行的回调|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
+|currentTs|当前选中的时间，timestamp|number \| \[number, number\]|Date.now()|
+|onChange|选中后的回调|(timestamp: number \| \[number, number\], obj: IDateObj \| \[IDateObj, IDateObj\]) =\> void|-|
+|onValueChange|每列数据选择变化后的回调函数|(timestamp: number, obj: IDateObj, index: number) =\> void|-|
+|mode|可选列类型，date \- 年月日，time \- 时分秒，datetime \- 年月日时分秒|"date" \| "time" \| "datetime"|"datetime"|
+|typeArr|可选列数组|ItemType\[\]|[]|
+|minTs|最小可选日期，timestamp|number \| \{ startTs: number; endTs: number; \}|当前时间的前十年|
+|maxTs|最大可选日期，timestamp|number \| \{ startTs: number; endTs: number; \}|当前时间的后十年|
+|useUTC|是否使用 UTC 时间|boolean|false|
+|rangeItemFormat|日期时间范围选择展示格式|string|-|
+|formatter|各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字|(value: number, type: ItemType) =\> string|(value: number) => (value < 10 ? \`0${value}\` : String(value))|
+|valueFilter|可选择行过滤方法，参数type为ItemType，参数value为当前行的值，返回true表示该行可选择|(type: ItemType, value: number) =\> boolean|() => true|
+|columnsProcessor|选择器列表项干预，可插入自定义选项|(columns: PickerData\[\]\[\], currentDateObj: IDateObj) =\> PickerData\[\]\[\]|-|
+|renderSeparator|自定义分隔符|() =\> ReactNode|-|
+|renderLinkedContainer|将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器|(currentTs: number \| \[number, number\], itemTypes: ItemType\[\]) =\> ReactNode|-|
+|visible|是否展示选择器|boolean|false|
+|maskClosable|点击蒙层是否关闭菜单|boolean|false|
+|needBottomOffset|从底部滑出的菜单内容是否适配ipx底部|boolean|false|
+|translateZ|\[即将废弃\] 开启translateZ强制提升|boolean|false|
+|maskTransitionTimeout|菜单蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionTimeout|菜单内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionType|内容过渡动画类名|string|\`slide-from-${props.direction}\`|
+|className|自定义类名|string|-|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|true|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|rows|行数(一列可选项的行数)，必须是奇数，最小为3个|number|5|
+|disabled|是否不可用|boolean|false|
+|onHide|点击遮罩层或取消、确定按钮的隐藏回调|(scene?: string) =\> void|-|
+|itemStyle|每列样式|CSSProperties|-|
+|okText|弹窗确认已选值的文案|string|"确定"|
+|dismissText|弹窗取消的文案|string|"取消"|
+|onDismiss|点击取消时执行的回调|() =\> void|-|
+|clickable|是否可通过点击操作选择内容|boolean|true|
+|hideEmptyCols|是否隐藏无数据的空列，常用于级联选择|boolean|false|
+|title|选择器标题|string|""|
+|touchToStop|是否通过长按停止滑动，传入数字 x 表示触摸超过 x 毫秒算长按，传 true 表示 x=100，长按事件与 click 事件互斥|number \| boolean|false|
+|renderExtraHeader|自定义头部扩展区域|() =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> IDateObj
+
+|参数|描述|类型|
+|----------|-------------|------|
+|year|年|number|
+|month|月|number|
+|date|日|number|
+|hour|时|number|
+|minute|分|number|
+|second|秒|number|
+
+> mode
+
+```
+"date" | "time" | "datetime"
+```
+
+> ItemType
+
+```
+"date" | "year" | "month" | "hour" | "minute" | "second"
+```
+
+> PickerData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|value|每一列展示的每项文案对应的值|ReactText|
+|label|每一列展示的文案|ReactNode|
+|children|级联状态下，该列对应的下一列数据|PickerData\[\]|

package/metaData/components/date-picker/example/index.tsx

@@ -0,0 +1,545 @@
+import React, {
+    useEffect,
+    useRef,
+    useState,
+    useMemo,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+} from 'react';
+import { cls, componentWrapper, formatDateNumber, isEmptyValue } from '@arco-design/mobile-utils';
+import Picker, { PickerRef } from '../picker';
+import { PickerData, ValueType } from '../picker-view';
+import { ContextLayout } from '../context-provider';
+import { convertTsToDateObj, oneOf, judgeObj, convertObjToTs } from './helper';
+import { ItemType, IDateObj, DatePickerProps } from './type';
+
+export * from './type';
+
+const allTypes = ['year', 'month', 'date', 'hour', 'minute', 'second'] as ItemType[];
+
+const defaultFormatter = formatDateNumber;
+
+export const YEAR = 12 * 30 * 24 * 60 * 60 * 1000;
+
+const initMinDate = Date.now() - 10 * YEAR;
+const initMaxDate = Date.now() + 10 * YEAR;
+const initDate = Date.now();
+
+export interface DatePickerRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+const DatePicker = forwardRef((props: DatePickerProps, ref: Ref<DatePickerRef>) => {
+    const {
+        currentTs: userSetCurrentTs = initDate,
+        className = '',
+        visible = false,
+        onOk,
+        onChange,
+        onValueChange,
+        mode = 'datetime',
+        typeArr = [],
+        minTs: userSetMinTs = initMinDate,
+        maxTs: userSetMaxTs = initMaxDate,
+        rangeItemFormat,
+        formatter = defaultFormatter,
+        valueFilter = () => true,
+        columnsProcessor,
+        touchToStop,
+        useUTC = false,
+        renderSeparator,
+        renderLinkedContainer,
+        ...otherProps
+    } = props;
+    const isRange = typeof userSetCurrentTs !== 'number';
+    const [leftTimeValue, setLeftTimeValue] = useState(userSetCurrentTs[0]);
+    const [rightTimeValue, setRightTimeValue] = useState(userSetCurrentTs[1]);
+    const [activeTabIndex, setActiveTabIndex] = useState<0 | 1>(0);
+    const [minTs, maxTs] = useMemo(() => {
+        return _updateTimeScope();
+    }, [userSetMinTs, userSetMaxTs, activeTabIndex]);
+    const [currentTs, setCurrentTs] = useState(
+        isRange
+            ? Math.min(maxTs, Math.max(minTs, userSetCurrentTs[0]))
+            : Math.min(maxTs, Math.max(minTs, userSetCurrentTs as number)),
+    );
+    const [data, setData] = useState<PickerData[][]>([[]]);
+    const [value, setValue] = useState<ValueType[]>([]);
+    const currentDateObjRef = useRef(_convertTsToDateObj(currentTs));
+    const minDateObjRef = useRef(_convertTsToDateObj(minTs));
+    const maxDateObjRef = useRef(_convertTsToDateObj(maxTs));
+    const keyOptions = useMemo(() => _getKeyOptions(), [mode, typeArr]);
+    const leftTimeString = useMemo(() => _getRangeItemValue(leftTimeValue), [leftTimeValue]);
+    const rightTimeString = useMemo(() => _getRangeItemValue(rightTimeValue), [rightTimeValue]);
+    const pickerRef = useRef<PickerRef | null>(null);
+
+    function _updateRangeValue(nowCurrentTs: number) {
+        const leftMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.startTs : userSetMinTs;
+        const rightMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.endTs : userSetMinTs;
+        const leftMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.startTs : userSetMaxTs;
+        const rightMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.endTs : userSetMaxTs;
+
+        if (isRange) {
+            let leftTime: number, rightTime: number;
+            if (activeTabIndex === 0) {
+                leftTime = nowCurrentTs;
+                rightTime = Math.min(
+                    rightMaxTs,
+                    Math.max(Math.max(leftTime, rightMinTs), rightTimeValue),
+                );
+            } else {
+                rightTime = nowCurrentTs;
+                leftTime = Math.min(leftMaxTs, Math.max(leftMinTs, leftTimeValue));
+            }
+            setLeftTimeValue(leftTime);
+            setRightTimeValue(rightTime);
+        }
+    }
+
+    useImperativeHandle(ref, () => ({
+        dom: pickerRef.current ? pickerRef.current.dom : null,
+    }));
+
+    function _getColumns() {
+        const dateObj = _getActualArray();
+        let columns = keyOptions.map(opt => dateObj[opt]);
+        if (columnsProcessor) {
+            columns = columnsProcessor(columns, currentDateObjRef.current);
+        }
+
+        return {
+            columns,
+            dateObj,
+        };
+    }
+
+    function _parseFormat(format: string, timeValue: IDateObj): string {
+        const { year, month, date, hour, minute, second } = timeValue;
+
+        const padZero = (num: number | string, targetLength = 2): string => {
+            let str = `${num}`;
+            while (str.length < targetLength) {
+                str = `0${str}`;
+            }
+            return str;
+        };
+
+        const replace = (formatArg: string, str: string, num: number) => {
+            if (formatArg.includes(str)) {
+                return str !== 'Y'
+                    ? formatArg.replace(str.repeat(2), padZero(num)).replace(str, padZero(num))
+                    : formatArg
+                          .replace(str.repeat(4), padZero(num))
+                          .replace(str.repeat(2), padZero(num))
+                          .replace(str, padZero(num));
+            }
+            return formatArg;
+        };
+
+        return [
+            ['Y', year],
+            ['M', month],
+            ['D', date],
+            ['H', hour],
+            ['m', minute],
+            ['s', second],
+        ].reduce((current, item) => {
+            return replace(current, item[0] as string, item[1] as number);
+        }, format) as string;
+    }
+
+    function _getRangeItemValue(time: number) {
+        const timeValue = _convertTsToDateObj(time);
+
+        if (!isRange) {
+            return;
+        }
+
+        if (rangeItemFormat) {
+            return _parseFormat(rangeItemFormat, timeValue);
+        }
+
+        const format = (options: ItemType[], joinString: string) => {
+            return options
+                .filter(option => {
+                    return keyOptions.includes(option);
+                })
+                .map(option => {
+                    return timeValue[option] < 10
+                        ? `0${timeValue[option]}`
+                        : `${timeValue[option]}`;
+                })
+                .join(joinString);
+        };
+
+        const datePart = format(['year', 'month', 'date'] as ItemType[], '/');
+        const timePart = format(['hour', 'minute', 'second'] as ItemType[], ':');
+
+        return datePart + (datePart && timePart && ' ') + timePart;
+    }
+
+    function _getSelectValue(columns: PickerData[][]) {
+        const val = keyOptions.map((opt, index) => {
+            const curCol = columns[index] || [];
+            const selectIndex = curCol.findIndex(
+                col => col.value === currentDateObjRef.current[opt],
+            );
+
+            return curCol[Math.max(selectIndex, 0)]?.value;
+        });
+
+        return val;
+    }
+
+    function _initData() {
+        const { columns } = _getColumns();
+        const val = _getSelectValue(columns);
+
+        setData(() => columns);
+        setValue(() => val);
+    }
+
+    // 根据当前选中的日期动态改变其他列的options
+    // @en Dynamically change the options of other columns based on the currently selected date
+    function _getActualArray() {
+        const dateObj = {} as Record<ItemType, PickerData[]>;
+        // 当前时间对象
+        // @en current Date object
+        let currentDateObj = { ...currentDateObjRef.current };
+        allTypes.forEach(type => {
+            // 根据日期类型，计算出默认的日期范围
+            // @en According to the date type, calculate the default date range.
+            const normalRange = _getNormalRange(type, currentDateObj);
+            let range = [] as number[];
+            switch (type) {
+                case 'year':
+                    // 默认使用minTs和maxTs年份区间
+                    // @en Default use minTs and maxTs years.
+                    range = [minDateObjRef.current.year, maxDateObjRef.current.year];
+                    break;
+                default: {
+                    // 除了年份外，其他日期类型都需要判断上一级日期是否相同
+                    // @en In addition to the year, other date types need to check if the upper-level date is the same.
+                    const checkKeys = allTypes.slice(0, allTypes.indexOf(type));
+                    range = normalRange;
+                    if (judgeObj(currentDateObj, minDateObjRef.current, checkKeys)) {
+                        range[0] = minDateObjRef.current[type];
+                        currentDateObj = {
+                            ...currentDateObj,
+                            // 取当前日期时间和minTs的最大值
+                            // @en Take the maximum value between the current date and time and minTs.
+                            [type]: Math.max(minDateObjRef.current[type], currentDateObj[type]),
+                        };
+                    }
+
+                    if (judgeObj(currentDateObj, maxDateObjRef.current, checkKeys)) {
+                        range[range.length - 1] = maxDateObjRef.current[type];
+                        currentDateObj = {
+                            ...currentDateObj,
+                            // 取当前日期时间和maxTs的最小值
+                            // @en Take the minimum value between the current date and time and maxTs.
+                            [type]: Math.min(maxDateObjRef.current[type], currentDateObj[type]),
+                        };
+                    }
+                }
+            }
+            dateObj[type] = _convertRangeToArr(type, range);
+        });
+        return dateObj;
+    }
+
+    function _convertRangeToArr(type, range) {
+        const [start = 0, end = 0] = range;
+        const arr = [] as PickerData[];
+
+        for (let i = start; i <= end; i += 1) {
+            if (valueFilter(type, i)) {
+                const text = formatter(i, type);
+
+                arr.push({
+                    label: text === void 0 ? defaultFormatter(i) : text,
+                    value: i,
+                });
+            }
+        }
+        return arr;
+    }
+
+    function _getNormalRange(type: ItemType, nowDateObj: IDateObj) {
+        switch (type) {
+            case 'month':
+                return [1, 12];
+            case 'date':
+                if (nowDateObj.month === 2) {
+                    // 闰年2月29天
+                    // @en February 29th in leap year
+                    return nowDateObj.year % 4 === 0 ? [1, 29] : [1, 28];
+                }
+                return oneOf(nowDateObj.month, [1, 3, 5, 7, 8, 10, 12]) ? [1, 31] : [1, 30];
+            case 'hour':
+                return [0, 23];
+            case 'minute':
+            case 'second':
+                return [0, 59];
+            default:
+                return [];
+        }
+    }
+
+    function _convertObjToTs(obj: IDateObj, defaultTs: number) {
+        return convertObjToTs(obj, defaultTs, useUTC);
+    }
+
+    function _convertTsToDateObj(ts: number) {
+        return convertTsToDateObj(ts, useUTC);
+    }
+
+    function _handlePickerChange(values: ValueType[], index: number) {
+        const type = keyOptions[index];
+        const nowDateObj = currentDateObjRef.current as IDateObj;
+        values.forEach((i, keyIndex) => {
+            nowDateObj[keyOptions[keyIndex]] = i as number;
+        });
+
+        if (~keyOptions.slice(0, keyOptions.length - 1).indexOf(type)) {
+            currentDateObjRef.current = nowDateObj;
+            const { columns, dateObj } = _getColumns();
+
+            // 校准选中日期，比如先选中2020-02-29 年份改为2019，则2月没有29日；需要校准
+            // @en Calibration selected date, For example, if you first select 2020-02-29 and change the year to 2019, there will be no 29th in February; calibration is required
+            keyOptions.forEach(key => {
+                if (dateObj[key].findIndex(item => item.value === nowDateObj[key]) < 0) {
+                    nowDateObj[key] = dateObj[key][dateObj[key].length - 1].value as number;
+                }
+            });
+            const val = _getSelectValue(columns);
+
+            setData(columns);
+            setValue(val);
+        }
+
+        setCurrentTs(_convertObjToTs(nowDateObj, currentTs));
+
+        if (onValueChange) {
+            onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
+        }
+    }
+
+    function _handlePickerConfirm(values: ValueType[]) {
+        let nowDateObj;
+        let newTs;
+        if (isRange) {
+            const leftTimeObj = _convertTsToDateObj(leftTimeValue);
+            const rightTimeObj = _convertTsToDateObj(rightTimeValue);
+            nowDateObj = keyOptions.reduce(
+                (arr, key) => {
+                    arr[0][key] = leftTimeObj[key];
+                    arr[1][key] = rightTimeObj[key];
+                    return arr;
+                },
+                [{} as IDateObj, {} as IDateObj],
+            );
+            newTs = [
+                _convertObjToTs(nowDateObj[0], currentTs),
+                _convertObjToTs(nowDateObj[1], currentTs),
+            ];
+        } else {
+            nowDateObj = {} as IDateObj;
+
+            values.forEach((index, keyIndex) => {
+                nowDateObj[keyOptions[keyIndex]] = index as number;
+            });
+            newTs = _convertObjToTs(nowDateObj, currentTs);
+        }
+
+        if (onOk) {
+            onOk(newTs, nowDateObj);
+        }
+
+        if (onChange) {
+            onChange(newTs, nowDateObj);
+        }
+    }
+
+    function _getKeyOptions() {
+        if (typeArr && typeArr.length) {
+            return typeArr;
+        }
+        let options = [] as ItemType[];
+
+        switch (mode) {
+            case 'date':
+                options = allTypes.slice(0, 3);
+                break;
+            case 'time':
+                options = allTypes.slice(3);
+                break;
+            default:
+                options = allTypes;
+        }
+        return options;
+    }
+
+    function _updateTimeScope(isLeft?: boolean): [number, number] {
+        let nowMaxTs: number, nowMinTs: number;
+        if (isLeft || activeTabIndex === 0) {
+            nowMaxTs = typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs;
+            nowMinTs = Math.min(
+                nowMaxTs,
+                typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.startTs,
+            );
+        } else {
+            nowMinTs = Math.max(
+                Math.min(
+                    typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs,
+                    leftTimeValue,
+                ),
+                typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.endTs,
+            );
+            nowMaxTs = Math.max(
+                nowMinTs,
+                typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.endTs,
+            );
+        }
+        return [nowMinTs, nowMaxTs];
+    }
+
+    function _chooseTimeActive(index: 0 | 1) {
+        setActiveTabIndex(index);
+    }
+
+    useEffect(() => {
+        minDateObjRef.current = _convertTsToDateObj(minTs);
+        currentDateObjRef.current = _convertTsToDateObj(currentTs);
+        maxDateObjRef.current = _convertTsToDateObj(maxTs);
+
+        _initData();
+    }, [currentTs, minTs, maxTs, useUTC]);
+
+    useEffect(() => {
+        let nowCurrentTs;
+        if (isRange) {
+            nowCurrentTs = Math.min(
+                maxTs,
+                Math.max(minTs, activeTabIndex === 0 ? leftTimeValue : rightTimeValue),
+            );
+            if (currentTs === nowCurrentTs) {
+                _updateRangeValue(currentTs);
+            }
+        } else {
+            nowCurrentTs = Math.min(maxTs, Math.max(minTs, currentTs));
+        }
+        setCurrentTs(nowCurrentTs);
+    }, [minTs, maxTs]);
+
+    useEffect(() => {
+        _updateRangeValue(currentTs);
+    }, [currentTs]);
+
+    useEffect(() => {
+        if (visible) {
+            // 初始化当前时间
+            if (isRange) {
+                setActiveTabIndex(0);
+                setLeftTimeValue(userSetCurrentTs[0]);
+                setRightTimeValue(userSetCurrentTs[1]);
+                const [nowMinTs, nowMaxTs] = _updateTimeScope(true);
+                const nowCurrentTs = Math.min(nowMaxTs, Math.max(nowMinTs, userSetCurrentTs[0]));
+                setCurrentTs(nowCurrentTs);
+                if (currentTs === nowCurrentTs) {
+                    _updateRangeValue(currentTs);
+                }
+            } else {
+                setCurrentTs(Math.min(maxTs, Math.max(minTs, userSetCurrentTs as number)));
+            }
+            _initData();
+        }
+    }, [visible]);
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <Picker
+                    {...otherProps}
+                    ref={pickerRef}
+                    visible={visible}
+                    className={cls(className, `${prefixCls}-date-picker`)}
+                    cascade={false}
+                    data={data}
+                    value={value}
+                    onPickerChange={_handlePickerChange}
+                    onOk={_handlePickerConfirm}
+                    touchToStop={touchToStop}
+                    renderExtraHeader={
+                        isRange
+                            ? () => (
+                                  <div className={`${prefixCls}-date-picker-show`}>
+                                      <span
+                                          className={cls(
+                                              `${
+                                                  activeTabIndex === 0
+                                                      ? `${prefixCls}-date-picker-range-item-active`
+                                                      : ''
+                                              }`,
+                                              `${prefixCls}-date-picker-range-item`,
+                                          )}
+                                          onClick={() => _chooseTimeActive(0)}
+                                      >
+                                          {leftTimeString}
+                                      </span>
+                                      {renderSeparator ? (
+                                          renderSeparator()
+                                      ) : (
+                                          <span
+                                              className={`${prefixCls}-date-picker-show-separate`}
+                                          >
+                                              ~
+                                          </span>
+                                      )}
+
+                                      <span
+                                          className={cls(
+                                              `${
+                                                  activeTabIndex === 1
+                                                      ? `${prefixCls}-date-picker-range-item-active`
+                                                      : ''
+                                              }`,
+                                              `${prefixCls}-date-picker-range-item`,
+                                          )}
+                                          onClick={() => _chooseTimeActive(1)}
+                                      >
+                                          {rightTimeString}
+                                      </span>
+                                  </div>
+                              )
+                            : undefined
+                    }
+                    renderLinkedContainer={
+                        renderLinkedContainer
+                            ? () =>
+                                  renderLinkedContainer(
+                                      isEmptyValue(props.currentTs) ? undefined : currentTs,
+                                      keyOptions,
+                                  )
+                            : undefined
+                    }
+                />
+            )}
+        </ContextLayout>
+    );
+});
+/**
+ * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
+ * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 日期时间选择器
+ * @name_en DatePicker
+ * @displayName DatePicker
+ */
+export default componentWrapper(DatePicker, 'DatePicker');