@cloudbase/weda-ui 3.5.0 → 3.5.2

package/dist/web/components/wd-date/elements/YearPicker.pc.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useState, useMemo } from 'react';
+import { Popover, ConfigProvider } from 'tea-component';
+import { useConfig } from '../../../utils/config-context';
+import classNames from '../../../utils/classnames';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { convertMoment, convertYears, convertValueToDateItem, convertDateItemToValue, } from '../../../utils/hooks/useFormLegacy';
+import { getDayNow } from '../../../utils/moment';
+import { noop } from '../../../utils/constant';
+import isEqual from '../../../utils/isObjectEqual';
+/**
+ * pc 版简易年份选择器
+ * 传参与 MonthPicker 保持一致
+ */
+export function YearPicker(props) {
+    const { value: _value, range = [], disabled, className, placeholder, format = 'YYYY', onChange = noop, id, } = props;
+    const nowYear = useMemo(() => getDayNow().year(), []);
+    const [value, setValue] = useSyncValue(_value, isEqual);
+    const [visible, setVisible] = useState(false);
+    const [page, setPage] = useState(0);
+    const { classPrefix } = useConfig();
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const year = value ? dateItem.year : nowYear;
+    const valueDisplay = useMemo(() => (value === null || value === void 0 ? void 0 : value.format(format)) || '', [value, format]);
+    const { years, yearStart, yearEnd } = useMemo(() => convertYears(year, page), [year, page]);
+    const [start, end] = useMemo(() => {
+        var _a, _b;
+        return [
+            (_a = convertMoment(range[0])) === null || _a === void 0 ? void 0 : _a.format('YYYY'),
+            (_b = convertMoment(range[1])) === null || _b === void 0 ? void 0 : _b.format('YYYY'),
+        ];
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [range[0], range[1]]);
+    // 选中年
+    const handleSelect = (v) => {
+        if (isDisabled(v))
+            return;
+        const m = convertMoment(convertDateItemToValue({ ...dateItem, year: v }));
+        setValue(m);
+        setPage(0);
+        setVisible(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(m, null);
+    };
+    // 上一年
+    const handlePre = (e) => {
+        e.stopPropagation();
+        setPage((d) => d - 1);
+    };
+    // 下一年
+    const handleNext = (e) => {
+        e.stopPropagation();
+        setPage((d) => d + 1);
+    };
+    // 回到当前
+    const handleCurrent = (e) => {
+        e.stopPropagation();
+        setPage(0);
+    };
+    // 是否禁用
+    const isDisabled = (v) => {
+        return ((start && Number(v) < Number(start)) || (end && Number(v) > Number(end)));
+    };
+    // 是否选中
+    const isSelected = (v) => value && v === year;
+    // 是否当前年
+    const isNowYear = (v) => v === nowYear;
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(Popover, { placement: "bottom-start", trigger: "click", visible: visible, onVisibleChange: (v) => !v && setVisible(v), overlay: _jsx("div", { className: `${classPrefix}-dropdown-box`, children: _jsx("div", { className: `${classPrefix}-calendar`, children: _jsxs("div", { className: `${classPrefix}-calendar__table`, children: [_jsx("div", { className: `${classPrefix}-calendar__caption`, children: _jsxs(_Fragment, { children: [yearStart, "-", yearEnd] }) }), _jsxs("div", { className: `${classPrefix}-pagination ${classPrefix}-pagination--bordernone`, children: [_jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__prebtn`, title: "\u4E0A\u4E8C\u5341\u5E74", onClick: handlePre, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-arrowleft` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__curbtn`, title: "\u5F53\u524D\u4E8C\u5341\u5E74", onClick: handleCurrent, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-cur` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__nextbtn`, title: "\u4E0B\u4E8C\u5341\u5E74", onClick: handleNext, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-arrowright` }) })] }), _jsx("div", { className: `${classPrefix}-calendar__row-group`, children: _jsx("div", { className: `${classPrefix}-calendar__type-wrap ${classPrefix}-calendar__type--year`, children: years.map((rows) => (_jsx("div", { className: `${classPrefix}-calendar__row`, children: rows.map((item) => (_jsx("div", { className: classNames(`${classPrefix}-calendar__cell`, {
+                                                [`${classPrefix}-calendar__cell--now`]: isNowYear(item),
+                                                'is-selected': isSelected(item),
+                                                'is-disabled': isDisabled(item),
+                                            }), onClick: () => handleSelect(item), children: _jsx("span", { children: item }) }, item))) }, rows.join()))) }) })] }) }) }), children: _jsx("div", { onClick: () => !disabled && setVisible(true), className: classNames(`${classPrefix}-datepicker`, className), children: _jsx("div", { className: `${classPrefix}-datepicker__input`, children: _jsx("input", { id: id, disabled: disabled, placeholder: placeholder, value: valueDisplay, autoComplete: "off" }) }) }) }) }));
+}

package/dist/web/components/wd-date/elements/interface.d.ts

@@ -0,0 +1,41 @@
+import type { DataType } from '../../../../configs/components/wd-date';
+export interface IDatePickerOptions {
+    value?: number | string | moment.Moment;
+    start?: string;
+    end?: string;
+    mode?: string;
+    onChange?: any;
+}
+export interface IDatePicker extends Omit<IDatePickerOptions, 'onChange'> {
+    onOk?: any;
+    onClose?: any;
+}
+export interface IPureDate extends DataType {
+    onChange?: (v: number) => any;
+    disabled?: boolean;
+    inputId?: string;
+}
+export interface IDate {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+    millisecond?: number;
+}
+export type IOption = {
+    value: any;
+    label?: string;
+    disabled?: boolean;
+};
+export interface IItemPicker {
+    value?: any;
+    onChange?: (value?: any) => void;
+    options?: IOption[];
+}
+export interface IWheelPicker {
+    value?: any[];
+    onChange?: (value?: any[]) => void;
+    items?: IOption[][];
+}

package/dist/web/components/wd-date/elements/interface.js

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

package/dist/web/components/wd-date/h5.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IPureDate } from './elements/interface';
+/**
+ * 日期时间 h5 端，value/onChange 是最终表单的值（number类型）
+ */
+export declare function DateH5(props: IPureDate): JSX.Element;

package/dist/web/components/wd-date/h5.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { convertMoment, useDateFormat, isDateInRange, } from '../../utils/hooks/useFormLegacy';
+import { DatePicker } from './elements/DatePicker.h5';
+/**
+ * 日期时间 h5 端，value/onChange 是最终表单的值（number类型）
+ */
+export function DateH5(props) {
+    const { placeholder, inputId, name, disabled, value, onChange, mode, start, end, } = props;
+    const [visible, setVisible] = useState(false);
+    const { classPrefix } = useConfig();
+    const inputCls = `${classPrefix}-form-select_input`;
+    const formatDisplay = useDateFormat(props);
+    const format = useDateFormat({ mode });
+    const m = useMemo(() => convertMoment(value), [value]);
+    const valueDisplay = (m === null || m === void 0 ? void 0 : m.format(formatDisplay)) || '';
+    const handleChange = (v) => {
+        var _a, _b;
+        const [inRange, title] = isDateInRange(v, start, end, format);
+        if (!inRange) {
+            (_b = (_a = window.app) === null || _a === void 0 ? void 0 : _a.showToast) === null || _b === void 0 ? void 0 : _b.call(_a, { title, icon: 'none' });
+            return;
+        }
+        setVisible(false);
+        onChange(v);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { id: inputId, className: inputCls, type: "text", name: name, placeholder: placeholder, autoComplete: "off", disabled: disabled, readOnly: true, value: valueDisplay, onClick: () => !disabled && setVisible(true) }), visible && (_jsx(DatePicker, { value: value, start: start, end: end, mode: mode, onClose: () => setVisible(false), onOk: handleChange }))] }));
+}

package/dist/web/components/wd-date/index.d.ts

@@ -0,0 +1,3 @@
+import { WdDate } from './wd-date';
+export { WdDate, type WdDateProps } from './wd-date';
+export default WdDate;

package/dist/web/components/wd-date/index.js

@@ -0,0 +1,3 @@
+import { WdDate } from './wd-date';
+export { WdDate } from './wd-date';
+export default WdDate;

package/dist/web/components/wd-date/pc.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IPureDate } from './elements/interface';
+/**
+ * 日期时间 pc 端，value/onChange 是最终表单的值（number类型）
+ */
+export declare function DatePc(props: IPureDate): JSX.Element;

package/dist/web/components/wd-date/pc.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { DatePicker, ConfigProvider } from 'tea-component';
+import { YearPicker } from './elements/YearPicker.pc';
+import { convertMoment, useDateFormat } from '../../utils/hooks/useFormLegacy';
+import { useConfig } from '../../utils/config-context';
+import moment from '../../utils/moment';
+/**
+ * 日期时间 pc 端，value/onChange 是最终表单的值（number类型）
+ */
+export function DatePc(props) {
+    // 属性
+    const { mode, start: _start, end: _end, value: _value, disabled, placeholder, onChange, inputId, clearable, } = props;
+    const { classPrefix } = useConfig();
+    const [start, end, value] = useMemo(() => [convertMoment(_start), convertMoment(_end), convertMoment(_value)], [_start, _end, _value]);
+    const format = useDateFormat(props);
+    const handleChange = (m) => {
+        const value = moment.isMoment(m) ? m.valueOf() : null;
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    const dateProps = {
+        disabled,
+        placeholder,
+        range: [start, end],
+        value,
+        onChange: handleChange,
+        id: inputId,
+        clearable,
+        format,
+    };
+    // 组件
+    let Elem = null;
+    if (mode === 'year') {
+        Elem = _jsx(YearPicker, { ...dateProps });
+    }
+    else if (mode === 'month') {
+        Elem = _jsx(DatePicker.MonthPicker, { ...dateProps });
+    }
+    else if (mode === 'datetime') {
+        Elem = _jsx(DatePicker, { ...dateProps, showTime: true });
+    }
+    else if (mode === 'datetimeMinute') {
+        Elem = _jsx(DatePicker, { ...dateProps, showTime: { format: 'HH:mm' } });
+    }
+    else {
+        Elem = _jsx(DatePicker, { ...dateProps });
+    }
+    // 返回
+    return _jsx(ConfigProvider, { classPrefix: classPrefix, children: Elem });
+}

package/dist/web/components/wd-date/wd-date.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DataType } from '../../../configs/components/wd-date';
+import type { CommonPropsType } from '../../types';
+/**
+ * 标准化：日期组件
+ */
+export declare const WdDate: React.ForwardRefExoticComponent<WdDateProps & React.RefAttributes<any>>;
+export interface WdDateProps extends CommonPropsType, DataType {
+    classRoot?: string;
+}

package/dist/web/components/wd-date/wd-date.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { WdFormItem, WdInputGroup, WdInputWrap } from '../wd-form-item';
+import { convertMoment, useDateFormat, useFormItemCommonTrait, useHandleClear, } from '../../utils/hooks/useFormLegacy';
+import { getUuid } from '../../utils/tool';
+import { DatePc } from './pc';
+import { DateH5 } from './h5';
+import { usePlatform } from '../../utils/platform';
+import { getDayEnd100, getDayStart100 } from '../../utils/moment';
+/**
+ * 标准化：日期组件
+ */
+export const WdDate = React.forwardRef(function WdDate(props, ref) {
+    const { classRoot = 'date', start: _start, end: _end, clearable = false, events, } = props;
+    const [startDefault, endDefault] = useMemo(() => [getDayStart100(), getDayEnd100()], []);
+    const [start, end] = [_start || startDefault, _end || endDefault];
+    const isH5 = usePlatform() === 'h5';
+    const inputId = useMemo(() => getUuid(), []);
+    const formValue = useMemo(() => { var _a; return (_a = convertMoment(props.value)) === null || _a === void 0 ? void 0 : _a.valueOf(); }, [props.value]); // 数字类型
+    const traitProps = { ...props, value: formValue, inputRef: ref };
+    const trait = useFormItemCommonTrait(traitProps);
+    const { value, onChange, disabled, visible } = trait;
+    const format = useDateFormat(props);
+    const readValue = useMemo(() => { var _a; return (_a = convertMoment(value)) === null || _a === void 0 ? void 0 : _a.format(format); }, [value, format]);
+    const pureChange = (v) => {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: v });
+    };
+    const clearProps = useHandleClear({
+        onChange: pureChange,
+        clearable,
+        disabled,
+        value,
+    });
+    const formItemProps = { ...props, ...trait, classRoot, inputId, readValue };
+    const inputGroupProps = { ...props, classRoot };
+    const inputWrapProps = { ...props, classRoot, ...clearProps };
+    const dateProps = {
+        ...props,
+        start,
+        end,
+        value,
+        disabled,
+        inputId,
+        onChange: pureChange,
+    };
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: isH5 ? _jsx(DateH5, { ...dateProps }) : _jsx(DatePc, { ...dateProps }) }) }) }));
+});

package/dist/web/components/wd-date-range/elements/Calendar.h5.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IDatePickerOptions } from './interface';
+/**
+ * h5端 年月日-日历选择格式
+ */
+export declare function Calendar(props: IDatePickerOptions): JSX.Element;

package/dist/web/components/wd-date-range/elements/Calendar.h5.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { useConfig } from '../../../utils/config-context';
+import { convertYearMonthToWeeks, convertDateItemToValue, getFullDay, convertValueToDateItem, getYMD, useDateValue, } from '../../../utils/hooks/useFormLegacy';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import classNames from '../../../utils/classnames';
+import equal from '../../../utils/isObjectEqual';
+import { YearMonthPicker } from './YearMonthPicker.h5';
+import { noop } from '../../../utils/constant';
+const WEEKS = ['日', '一', '二', '三', '四', '五', '六'];
+const ONE = 1;
+/**
+ * h5端 年月日-日历选择格式
+ */
+export function Calendar(props) {
+    const { start, end, onChange = noop } = props;
+    const { classPrefix } = useConfig();
+    const [showMode, setShowMode] = useState('day'); // 切换模式
+    const _value = useDateValue({ ...props, mode: 'day' });
+    const [value, setValue] = useSyncValue(_value); // 更改年月日（最终值）
+    const defaultDateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const [dateItem, setDateItem] = useSyncValue(defaultDateItem, equal); // 更改年月
+    const dateItemValue = useMemo(() => convertDateItemToValue(dateItem), [dateItem]);
+    const weeks = useMemo(() => convertYearMonthToWeeks(dateItem.year, dateItem.month, [start, end]), [dateItem.year, dateItem.month, start, end]); // 日历数组
+    const yearMonthDisplay = `${dateItem.year} 年 ${getFullDay(dateItem.month + ONE)} 月`;
+    const yearMonthCls = classNames(`${classPrefix}-custom-calendar-op__select`, {
+        'is-active': showMode === 'month',
+    });
+    const opStyle = showMode === 'month' ? { visibility: 'hidden' } : {};
+    // 切换模式
+    const handleClickMode = () => setShowMode((d) => (d === 'day' ? 'month' : 'day'));
+    // 切换月
+    const handleSelectMonth = (month) => {
+        const value = convertDateItemToValue({ ...dateItem, month });
+        const item = convertValueToDateItem(value);
+        setDateItem(item);
+    };
+    // 切换年月
+    const handleSelectYearMonth = (v) => {
+        const item = convertValueToDateItem(v);
+        setDateItem(item);
+    };
+    // 选中日期
+    const handleSelectDay = (item) => {
+        if ((item === null || item === void 0 ? void 0 : item.disabled) ||
+            convertDateItemToValue(item) === convertDateItemToValue(dateItem)) {
+            return;
+        }
+        const value = convertDateItemToValue({ ...dateItem, day: item.day });
+        setValue(value);
+        onChange(value);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${classPrefix}-custom-calendar-op`, children: [_jsx("div", { className: `${classPrefix}-custom-calendar-op__start`, children: _jsxs("span", { className: yearMonthCls, onClick: handleClickMode, children: [yearMonthDisplay, _jsx("i", { className: `${classPrefix}-icon-arrow-right` })] }) }), _jsxs("div", { className: `${classPrefix}-custom-calendar-op__end`, style: opStyle, children: [_jsx("span", { "data-testid": "pre-calendar-page", className: `${classPrefix}-icon-turn-pre`, onClick: () => handleSelectMonth(dateItem.month - ONE) }), _jsx("span", { "data-testid": "next-calendar-page", className: `${classPrefix}-icon-turn-next`, onClick: () => handleSelectMonth(dateItem.month + ONE) })] })] }), _jsxs("div", { className: `${classPrefix}-custom-picker__box${showMode === 'day' ? '' : '--month'}`, children: [showMode === 'day' && (_jsxs("div", { className: `${classPrefix}-custom-calendar`, children: [_jsx("div", { className: `${classPrefix}-custom-calendar__weeks`, children: WEEKS.map((d) => (_jsx("span", { className: `${classPrefix}-custom-calendar__weeks-item`, children: d }, d))) }), _jsx("div", { className: `${classPrefix}-custom-calendar__days`, children: weeks.map((week, index) => {
+                                    return (_jsx("div", { className: `${classPrefix}-custom-calendar__days-row`, children: week.map((item, index) => {
+                                            return (_jsx("span", { className: classNames(`${classPrefix}-custom-calendar__days-item`, {
+                                                    'is-current': getYMD(item) === getYMD(defaultDateItem),
+                                                    'no-select': item.disabled,
+                                                }), onClick: () => {
+                                                    handleSelectDay(item);
+                                                }, children: item.day }, index));
+                                        }) }, index));
+                                }) })] })), showMode === 'month' && (_jsx(YearMonthPicker, { ...props, value: dateItemValue, onChange: handleSelectYearMonth }))] })] }));
+}

package/dist/web/components/wd-date-range/elements/DatePicker.h5.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IDatePicker } from './interface';
+/**
+ * 年-月-日 时:分:秒 选择器
+ */
+export declare function DatePicker(props?: IDatePicker): JSX.Element;

package/dist/web/components/wd-date-range/elements/DatePicker.h5.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { convertMoment, useDateValue, } from '../../../utils/hooks/useFormLegacy';
+import { Portal } from '../../common/portal';
+import { noop } from '../../../utils/constant';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { Calendar } from './Calendar.h5';
+import { TimePicker } from './TimePicker.h5';
+import { YearPicker } from './YearPicker.h5';
+import { YearMonthPicker } from './YearMonthPicker.h5';
+import { useConfig } from '../../../utils/config-context';
+import { getDayNow } from '../../../utils/moment';
+/**
+ * 年-月-日 时:分:秒 选择器
+ */
+export function DatePicker(props) {
+    const { mode, onOk = noop, onClose = noop } = props;
+    const nowDate = useMemo(() => getDayNow(mode), [mode]);
+    const _value = useDateValue(props);
+    const [value, setValue] = useSyncValue(_value);
+    const [dateOrTime, setDateOrTime] = useState('date');
+    const [_key, _setKey] = useState(0); // 切换到日期时强制刷新
+    const { classPrefix } = useConfig();
+    const handleOk = () => {
+        onOk(value);
+        // onClose();
+    };
+    const handleChange = (v) => {
+        setValue(v);
+    };
+    const timeFormat = mode === 'datetimeMinute' ? 'HH:mm' : 'HH:mm:ss';
+    const m = useMemo(() => convertMoment(value), [value]) || nowDate;
+    const dateTimeDisplay = {
+        date: m === null || m === void 0 ? void 0 : m.format('YYYY-MM-DD'),
+        time: m === null || m === void 0 ? void 0 : m.format(timeFormat),
+    };
+    return (_jsx(Portal, { type: "div", children: _jsxs("div", { className: `${classPrefix}-custom-picker`, children: [_jsx("div", { className: `${classPrefix}-custom-backdrop`, onClick: onClose }), _jsxs("div", { className: `${classPrefix}-custom-picker__inner`, children: [_jsxs("div", { className: `${classPrefix}-custom-picker__header`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__header-cancle`, onClick: onClose, children: "\u53D6\u6D88" }), _jsx("div", { className: `${classPrefix}-custom-picker__header-title`, children: '开始时间' }), _jsx("div", { className: `${classPrefix}-custom-picker__header-confirm`, onClick: handleOk, children: "\u4E0B\u4E00\u6B65" })] }), _jsxs("div", { className: `${classPrefix}-custom-picker__body`, children: [['datetime', 'datetimeMinute'].includes(mode) && (_jsxs(_Fragment, { children: [_jsx("div", { className: `${classPrefix}-custom-picker__select`, children: ['date', 'time'].map((d) => (_jsx("span", { className: `${classPrefix}-custom-picker__select-item ${dateOrTime === d ? 'is-current' : ''}`, onClick: () => {
+                                                    setDateOrTime(d);
+                                                    _setKey((d) => d + 1); // eslint-disable-line @typescript-eslint/no-magic-numbers
+                                                }, children: dateTimeDisplay[d] }, d))) }), dateOrTime === 'date' && (_jsx("div", { className: `${classPrefix}-custom-picker__select-date`, children: _jsx(Calendar, { ...props, value: value, onChange: handleChange }, _key) })), dateOrTime === 'time' && (_jsx("div", { className: `${classPrefix}-custom-picker__select-time`, children: _jsx(TimePicker, { ...props, value: value, onChange: handleChange }) }))] })), mode === 'year' && (_jsx(YearPicker, { ...props, value: value, onChange: handleChange })), mode === 'month' && (_jsx(YearMonthPicker, { ...props, value: value, onChange: handleChange })), mode === 'day' && (_jsx(Calendar, { ...props, value: value, onChange: handleChange }, _key))] })] })] }) }));
+}

package/dist/web/components/wd-date-range/elements/TimePicker.h5.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IDatePickerOptions } from './interface';
+/**
+ * h5端 时分秒
+ */
+export declare function TimePicker(props: IDatePickerOptions): JSX.Element;

package/dist/web/components/wd-date-range/elements/TimePicker.h5.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { WheelPicker } from './WheelPicker';
+import { noop } from '../../../utils/constant';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { convertDateItemToValue, convertValueToDateItem, getFullDay, getYMD, getExistValue, useDateValue, } from '../../../utils/hooks/useFormLegacy';
+// 构建时分秒选项
+const getOptions = (start, end, desc = '') => 
+//eslint-disable-next-line @typescript-eslint/no-magic-numbers
+Array.from({ length: end - start + 1 }).map((d, i) => {
+    const label = `${getFullDay(start + i)}${desc}`;
+    return { value: start + i, label };
+});
+/**
+ * h5端 时分秒
+ */
+export function TimePicker(props) {
+    const { start, end, mode, onChange = noop } = props;
+    const _value = useDateValue(props);
+    const [value, setValue] = useSyncValue(_value);
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const startItem = useMemo(() => convertValueToDateItem(start), [start]);
+    const endItem = useMemo(() => convertValueToDateItem(end), [end]);
+    const [dateYMD, startYMD, endYMD] = useMemo(() => [dateItem, startItem, endItem].map((d) => getYMD(d)), [dateItem, startItem, endItem]);
+    const getMinuteOptions = (hour) => {
+        let _start = 0, _end = 59;
+        if (dateYMD === startYMD && startItem.hour === hour) {
+            _start = startItem.minute;
+        }
+        else if (dateYMD === endYMD && endItem.hour === hour) {
+            _end = endItem.minute;
+        }
+        return getOptions(_start, _end, '分');
+    };
+    const getSecondOptions = (hour, minute) => {
+        let _start = 0, _end = 59;
+        if (dateYMD === startYMD &&
+            startItem.hour === hour &&
+            startItem.minute === minute) {
+            _start = startItem.second;
+        }
+        else if (dateYMD === endYMD &&
+            endItem.hour === hour &&
+            endItem.minute === minute) {
+            _end = endItem.second;
+        }
+        return getOptions(_start, _end, '秒');
+    };
+    const hourOptions = useMemo(() => {
+        let _start = 0;
+        let _end = 23;
+        if (dateYMD === startYMD) {
+            _start = startItem.hour;
+        }
+        else if (dateYMD === endYMD) {
+            _end = endItem.hour;
+        }
+        return getOptions(_start, _end, '时');
+    }, [dateYMD, endYMD, startYMD, startItem, endItem]);
+    const [minuteOptions, setMinuteOptions] = useState(getMinuteOptions(dateItem.hour));
+    const [secondOptions, setSecondOptions] = useState(getSecondOptions(dateItem.hour, dateItem.minute));
+    const items = [hourOptions, minuteOptions];
+    if (mode !== 'datetimeMinute') {
+        items.push(secondOptions);
+    }
+    const values = [dateItem.hour, dateItem.minute, dateItem.second];
+    const handleChange = (values) => {
+        const [hour, _minute, _second] = values;
+        const minuteOptions = getMinuteOptions(hour); // 实时分
+        const minute = getExistValue(_minute, minuteOptions);
+        const secondOptions = getSecondOptions(hour, minute); // 实时秒
+        const second = getExistValue(_second, secondOptions);
+        const value = convertDateItemToValue({ ...dateItem, hour, minute, second });
+        setMinuteOptions(minuteOptions);
+        setSecondOptions(secondOptions);
+        setValue(value);
+        onChange(value);
+    };
+    return _jsx(WheelPicker, { items: items, value: values, onChange: handleChange });
+}

package/dist/web/components/wd-date-range/elements/WheelPicker.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { IWheelPicker, IItemPicker } from './interface';
+/**
+ * 多列选择器
+ */
+export declare function WheelPicker(props: IWheelPicker): JSX.Element;
+/**
+ * 单列选择器
+ */
+export declare function ItemPicker(props: IItemPicker): JSX.Element;

package/dist/web/components/wd-date-range/elements/WheelPicker.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useEffect, useRef, useMemo } from 'react';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import classNames from '../../../utils/classnames';
+import equal from '../../../utils/isObjectEqual';
+import { useConfig } from '../../../utils/config-context';
+/**
+ * 多列选择器
+ */
+export function WheelPicker(props) {
+    const { value: defaultValue = [], items = [], onChange } = props;
+    const [value, setValue] = useSyncValue(defaultValue, equal);
+    const { classPrefix } = useConfig();
+    // 联动
+    const handleChange = (val, pos) => {
+        try {
+            const newValue = value.map((d, i) => {
+                var _a, _b, _c, _d;
+                if (pos === i) {
+                    return val;
+                }
+                else {
+                    const exist = (_b = (_a = items[i]) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (id) => id.value === d);
+                    return exist ? d : (_d = (_c = items[i]) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.value;
+                }
+            });
+            setValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        catch (e) { }
+    };
+    return (_jsx("div", { className: `${classPrefix}-custom-picker__columns size-s`, children: items.map((item, i) => (_jsx(ItemPicker, { value: value[i], options: item, onChange: (v) => handleChange(v, i) }, i))) }));
+}
+/**
+ * 单列选择器
+ */
+export function ItemPicker(props) {
+    const { value, options: _options = [], onChange } = props;
+    const { classPrefix } = useConfig();
+    const options = useMemo(() => [].concat({}, {}, _options, {}, {}), [_options]);
+    const domRef = useRef();
+    const itemHeightRef = useRef(40);
+    const timedRef = useRef(null);
+    const defaultIndex = useMemo(() => {
+        const index = options.findIndex((item) => item.value === value);
+        return index;
+    }, [value, options]);
+    const [index, setIndex] = useSyncValue(defaultIndex);
+    // 初始化定位到行
+    useEffect(() => {
+        setScrollTop(defaultIndex);
+    }, [defaultIndex]);
+    // 每行高度
+    useEffect(() => {
+        if (domRef.current.scrollHeight) {
+            itemHeightRef.current = domRef.current.scrollHeight / options.length;
+        }
+    }, [options.length]);
+    // 值变化防抖
+    const changeDebounce = (index) => {
+        clearTimeout(timedRef.current);
+        // eslint-disable-next-line rulesdir/no-timer
+        timedRef.current = setTimeout(() => {
+            var _a;
+            const newValue = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.value;
+            if (value !== newValue) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
+            setScrollTop(index, 'smooth');
+        }, 300);
+    };
+    // 滚动
+    const handleScroll = () => {
+        const distance = Math.round(domRef.current.scrollTop / itemHeightRef.current);
+        const newIndex = distance + 2;
+        setIndex(newIndex);
+        changeDebounce(newIndex);
+    };
+    // 固定高度
+    const setScrollTop = (i, behavior = 'auto') => {
+        var _a, _b;
+        (_b = (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            top: itemHeightRef.current * (i - 2),
+            behavior,
+        });
+    };
+    return (_jsx("ul", { className: `${classPrefix}-custom-picker__column`, ref: domRef, onScroll: handleScroll, onTouchStart: handleScroll, children: options.map((item, i) => {
+            var _a, _b;
+            return (_jsx("li", { className: classNames(`${classPrefix}-custom-picker__column-item`, {
+                    'is-current': i === index,
+                }), children: _jsx("p", { children: (_b = (_a = item.label) !== null && _a !== void 0 ? _a : item.value) !== null && _b !== void 0 ? _b : ' ' }) }, i));
+        }) }));
+}

package/dist/web/components/wd-date-range/elements/YearMonthPicker.h5.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IDatePickerOptions } from './interface';
+/**
+ * 年月滚动选择
+ */
+export declare function YearMonthPicker(props: IDatePickerOptions): JSX.Element;