@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/count-down/type.d.ts

@@ -0,0 +1,112 @@
+import { ReactNode } from 'react';
+export interface TimeDataType {
+    /**
+     * 天数
+     * @en Days
+     */
+    days: number;
+    /**
+     * 小时
+     * @en Hour
+     * */
+    hours: number;
+    /**
+     * 分钟
+     * @en minute
+     * */
+    minutes: number;
+    /**
+     * 秒数
+     * @en second
+     * */
+    seconds: number;
+    /**
+     * 毫秒
+     * @en millisecond
+     * */
+    milliseconds: number;
+}
+export interface CountDownProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 倒计时时长，单位毫秒
+     * @en Countdown time in milliseconds
+     * @default 0
+     */
+    time?: number | TimeDataType;
+    /**
+     * 自定义格式
+     * D:天数 DD:天数（个位数补0）
+     * H:小时 HH:小时（个位数补0）
+     * m:分钟 mm:分钟（个位数补0）
+     * s:秒数 ss:秒数（个位数补0）
+     * S:毫秒（1 位）SS:毫秒（2 位）SSS:毫秒（3 位）
+     * @en Custom format
+     * D: Days DD: Days (1 digit with 0)
+     * H: Hours HH: Hours (1 digit with 0)
+     * m: Minutes mm: Minutes (1 digit with 0)
+     * s: Seconds ss: Seconds (1 digit with 0)
+     * S: Milliseconds (1 digit) SS: Milliseconds (2 digits) SSS: Milliseconds (3 digits)
+     *
+     * @default HH:mm:ss
+     */
+    format?: string;
+    /**
+     * 是否自动开始倒计时
+     * @en Whether to automatically start the countdown
+     * @default true
+     */
+    autoStart?: boolean;
+    /**
+     * 是否开启毫秒级渲染
+     * @en Whether to enable millisecond rendering
+     * @default false
+     */
+    millisecond?: boolean;
+    /**
+     * 倒计时结束时触发
+     * @en Callback when the countdown ends
+     */
+    onFinish?: () => void;
+    /**
+     * 倒计时变化时触发
+     * @en Callback when the countdown changes
+     */
+    onChange?: (val: TimeDataType, ts: number) => void;
+    /**
+     * 自定义内容
+     * @en Custom content
+     */
+    renderChild?: (val: TimeDataType) => ReactNode;
+}
+export interface CountDownRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 开始
+     * @en Start
+     */
+    start: () => void;
+    /**
+     * 暂停
+     * @en Pause
+     */
+    pause: () => void;
+    /**
+     * 重置
+     * @en Reset
+     * */
+    reset: () => void;
+}

package/esnext/count-down/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/count-down/util.d.ts

@@ -0,0 +1,8 @@
+import { TimeDataType } from './index';
+export declare function parseTime(time: number): TimeDataType;
+export declare function unParseTime(time: TimeDataType): number;
+export declare const inBrowser: boolean;
+export declare function cancelRaf(id: number): void;
+export declare function raf(fn: FrameRequestCallback): number;
+export declare function padZero(num: number | string, targetLength?: number): string;
+export declare function parseFormat(formatArg: string, currentTime: TimeDataType): string;

package/esnext/count-down/util.js

@@ -0,0 +1,106 @@
+// 定义秒，分，小时，天的转化常量
+// @en Define conversion constants for seconds, minutes, hours, days
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+// 把毫秒解析成TimeDataType格式
+// @en Parse milliseconds into TimeDataType format
+export function parseTime(time) {
+    const days = Math.floor(time / DAY);
+    const hours = Math.floor((time % DAY) / HOUR);
+    const minutes = Math.floor((time % HOUR) / MINUTE);
+    const seconds = Math.floor((time % MINUTE) / SECOND);
+    const milliseconds = Math.floor(time % SECOND);
+    return {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds,
+    };
+}
+// 把TimeDataType解析成毫秒
+// @en Parse TimeDataType into milliseconds
+export function unParseTime(time) {
+    const { days = 0, hours = 0, minutes = 0, seconds = 0, milliseconds = 0 } = time;
+    return days * DAY + hours * HOUR + minutes * MINUTE + seconds * SECOND + milliseconds;
+}
+// 判断是否在浏览器中运行
+// @en Determine if it is running in the browser
+export const inBrowser = typeof window !== 'undefined';
+// 判断根元素
+// @en Determine the root element
+const root = inBrowser ? window : global;
+// 根据id清除对应的animationFrame
+// @en Clear the corresponding animationFrame according to the id
+export function cancelRaf(id) {
+    const cancelAnimationFrame = root.cancelAnimationFrame || root.clearTimeout;
+    cancelAnimationFrame.call(root, id);
+}
+// 计算现在时间
+// @en Calculate the current time
+let prev = Date.now();
+// requestAnimationFrame不存在时用setTimeout代替，得出id
+// @en When requestAnimationFrame does not exist, use setTimeout instead to get the id
+function rafPolyfill(fn) {
+    const curr = Date.now();
+    const ms = Math.max(0, 16 - (curr - prev));
+    const id = setTimeout(fn, ms);
+    prev = curr + ms;
+    return id;
+}
+// 得到animationFrame的id
+// @en Get the id of animationFrame
+export function raf(fn) {
+    const requestAnimationFrame = root.requestAnimationFrame || rafPolyfill;
+    return requestAnimationFrame.call(root, fn);
+}
+// 补0成需要的格式
+// @en Fill 0 into the required format
+export function padZero(num, targetLength = 2) {
+    let str = `${num}`;
+    while (str.length < targetLength) {
+        str = `0${str}`;
+    }
+    return str;
+}
+// 根据传入的格式解析时间成特定格式
+// @en Parse the time into a specific format according to the inputing format
+export function parseFormat(formatArg, currentTime) {
+    const { days } = currentTime;
+    let format = formatArg;
+    let { hours, minutes, seconds, milliseconds } = currentTime;
+    if (format.includes('D')) {
+        format = format.replace('DD', padZero(days)).replace('D', `${days}`);
+    }
+    else {
+        hours += days * 24;
+    }
+    if (format.includes('H')) {
+        format = format.replace('HH', padZero(hours)).replace('H', `${hours}`);
+    }
+    else {
+        minutes += hours * 60;
+    }
+    if (format.includes('m')) {
+        format = format.replace('mm', padZero(minutes)).replace('m', `${minutes}`);
+    }
+    else {
+        seconds += minutes * 60;
+    }
+    if (format.includes('s')) {
+        format = format.replace('ss', padZero(seconds)).replace('s', `${seconds}`);
+    }
+    else {
+        milliseconds += seconds * 1000;
+    }
+    if (format.includes('S')) {
+        const ms = padZero(milliseconds, 3);
+        format = format
+            .replace(/S{3}/, ms)
+            .replace(/S{2}/, ms.slice(0, 2))
+            .replace(/S{1}/, ms.charAt(0));
+    }
+    return format;
+}

package/esnext/date-picker/helper.d.ts

@@ -0,0 +1,5 @@
+import { ItemType, IDateObj } from './type';
+export declare function convertTsToDateObj(ts: number, utc?: boolean): IDateObj;
+export declare function convertObjToTs(obj: IDateObj | undefined, defaultTs: number, utc?: boolean): number;
+export declare function oneOf<T>(value: T, validList: T[]): boolean;
+export declare function judgeObj(dateObj1: IDateObj, dateObj2: IDateObj, keys?: ItemType[]): boolean;

package/esnext/date-picker/helper.js

@@ -0,0 +1,38 @@
+import { DateWithUTC } from '@arco-design/mobile-utils';
+export function convertTsToDateObj(ts, utc) {
+    const date = new DateWithUTC(ts, utc);
+    return {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        date: date.getDate(),
+        hour: date.getHours(),
+        minute: date.getMinutes(),
+        second: date.getSeconds(),
+    };
+}
+export function convertObjToTs(obj = {}, defaultTs, utc) {
+    const date = new DateWithUTC(defaultTs, utc);
+    const defaultDate = date.getDate();
+    !isNaN(obj.year) && date.setFullYear(obj.year);
+    // bugfix: setMonth后如果日期超限则会自动顺延到下月，此时返回月份就不准了，因此先设置date为1再设置month
+    // @en bugfix: After setMonth, if the date exceeds the limit, it will be automatically extended to the next month. At this time, the return month is not allowed, so first set date to 1 and then set month
+    if (!isNaN(obj.month)) {
+        date.setDate(1);
+        date.setMonth(obj.month - 1);
+    }
+    // date的值可能被修改，需要被还原
+    // @en The value of date may be modified and needs to be restored
+    date.setDate(isNaN(obj.date) ? defaultDate : obj.date);
+    !isNaN(obj.hour) && date.setHours(obj.hour);
+    !isNaN(obj.minute) && date.setMinutes(obj.minute);
+    !isNaN(obj.second) && date.setSeconds(obj.second);
+    return date.getTime();
+}
+export function oneOf(value, validList) {
+    return validList.indexOf(value) !== -1;
+}
+// 查看两个obj中的keys里的各个值是否都一致
+// @en Check whether the values in the keys in the two obj are consistent
+export function judgeObj(dateObj1, dateObj2, keys = []) {
+    return !keys.some(key => dateObj1[key] !== dateObj2[key]);
+}

package/esnext/date-picker/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { DatePickerProps } from './type';
+export * from './type';
+export declare const YEAR: number;
+export interface DatePickerRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+declare const _default: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePickerRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 日期时间选择器，基于`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 _default;

package/esnext/date-picker/index.js

@@ -0,0 +1,217 @@
+import React, { useEffect, useRef, useState, useMemo, forwardRef, useImperativeHandle, } from 'react';
+import { cls, componentWrapper, formatDateNumber } from '@arco-design/mobile-utils';
+import Picker from '../picker';
+import { ContextLayout } from '../context-provider';
+import { convertTsToDateObj, oneOf, judgeObj, convertObjToTs } from './helper';
+export * from './type';
+const allTypes = ['year', 'month', 'date', 'hour', 'minute', 'second'];
+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();
+const DatePicker = forwardRef((props, ref) => {
+    const { currentTs: userSetCurrentTs = initDate, className = '', visible = false, onOk, onChange, onValueChange, mode = 'datetime', typeArr = [], minTs = initMinDate, maxTs = initMaxDate, formatter = defaultFormatter, valueFilter = () => true, columnsProcessor, touchToStop, useUTC = false, renderLinkedContainer, ...otherProps } = props;
+    const currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+    const [data, setData] = useState([[]]);
+    const [value, setValue] = useState([]);
+    const currentDateObjRef = useRef(_convertTsToDateObj(currentTs));
+    const minDateObjRef = useRef(_convertTsToDateObj(minTs));
+    const maxDateObjRef = useRef(_convertTsToDateObj(maxTs));
+    const keyOptions = useMemo(() => _getKeyOptions(), [mode, typeArr]);
+    const pickerRef = useRef(null);
+    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 _getSelectValue(columns) {
+        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 = {};
+        // 当前时间对象
+        // @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 = [];
+            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 = [];
+        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, nowDateObj) {
+        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, defaultTs) {
+        return convertObjToTs(obj, defaultTs, useUTC);
+    }
+    function _convertTsToDateObj(ts) {
+        return convertTsToDateObj(ts, useUTC);
+    }
+    function _handlePickerChange(values, index) {
+        const type = keyOptions[index];
+        const nowDateObj = {};
+        values.forEach((i, keyIndex) => {
+            nowDateObj[keyOptions[keyIndex]] = i;
+        });
+        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;
+                }
+            });
+            const val = _getSelectValue(columns);
+            setData(columns);
+            setValue(val);
+        }
+        if (onValueChange) {
+            onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
+        }
+    }
+    function _handlePickerConfirm(values) {
+        const nowDateObj = {};
+        values.forEach((index, keyIndex) => {
+            nowDateObj[keyOptions[keyIndex]] = index;
+        });
+        const newTs = _convertObjToTs(nowDateObj, currentTs);
+        if (onOk) {
+            onOk(newTs, nowDateObj);
+        }
+        if (onChange) {
+            onChange(newTs, nowDateObj);
+        }
+    }
+    function _getKeyOptions() {
+        if (typeArr && typeArr.length) {
+            return typeArr;
+        }
+        let options = [];
+        switch (mode) {
+            case 'date':
+                options = allTypes.slice(0, 3);
+                break;
+            case 'time':
+                options = allTypes.slice(3);
+                break;
+            default:
+                options = allTypes;
+        }
+        return options;
+    }
+    useEffect(() => {
+        minDateObjRef.current = _convertTsToDateObj(minTs);
+        currentDateObjRef.current = _convertTsToDateObj(currentTs);
+        maxDateObjRef.current = _convertTsToDateObj(maxTs);
+        _initData();
+    }, [currentTs, minTs, maxTs, useUTC]);
+    useEffect(() => {
+        if (visible) {
+            currentDateObjRef.current = _convertTsToDateObj(currentTs);
+            _initData();
+        }
+    }, [visible]);
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Picker, Object.assign({}, otherProps, { ref: pickerRef, visible: visible, className: cls(className, `${prefixCls}-date-picker`), cascade: false, data: data, value: value, onPickerChange: _handlePickerChange, onOk: _handlePickerConfirm, touchToStop: touchToStop, renderLinkedContainer: renderLinkedContainer
+            ? () => renderLinkedContainer(currentTs, keyOptions)
+            : undefined })))));
+});
+/**
+ * 日期时间选择器，基于`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');