@cloudbase/weda-ui 3.5.0 → 3.5.2

package/dist/web/components/wd-checkbox-list/checkboxList.js

@@ -15,6 +15,7 @@ import { useSize } from '../../utils/hooks/useFormLegacy';
 export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, inputRef) {
     const { range: propRange, direction, events = emptyObject, format = '', enumName = '', label, } = props;
     const [innerHandle, setInnerHandle] = React.useState({}); // hook里挂出的属性
+    const [readValue, setReadValue] = React.useState('-'); // 只读的显示
     const size = useSize(props);
     const platform = usePlatform();
     const { classPrefix } = useConfig();
@@ -43,13 +44,25 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
             const value = Object.entries(newMap)
                 .filter(([, checked]) => checked)
                 .map(([value]) => value);
-            events === null || events === void 0 ? void 0 : events.change({ value }, { originEvent: e });
             outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value);
+            events === null || events === void 0 ? void 0 : events.change({ value }, { originEvent: e });
         }
     };
     React.useEffect(() => {
         setCheckedItemValue(fromEntries(options.map(({ value, checked }) => [value, !!checked])));
-    }, [options]);
+        const tempLabel = [];
+        options.forEach(({ label, checked }) => {
+            if (checked) {
+                tempLabel.push(label);
+            }
+        });
+        if (readOnly && tempLabel.length > 0) {
+            setReadValue(tempLabel.join('，'));
+        }
+        else {
+            setReadValue('-');
+        }
+    }, [options, readOnly]);
     React.useEffect(() => {
         if (format !== 'x-enum') {
             const opts = propRange &&
@@ -72,6 +85,15 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    const getSelectedLabel = (options) => {
+        const tempLabel = [];
+        options.forEach(({ label, checked }) => {
+            if (checked) {
+                tempLabel.push(label);
+            }
+        });
+        return tempLabel;
+    };
     React.useImperativeHandle(inputRef, () => ({
         ...innerHandle,
         name,
@@ -81,7 +103,18 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
         visible,
         disabled,
         readOnly,
-    }), [innerHandle, name, value, label, required, visible, disabled, readOnly]);
+        selectedLabel: getSelectedLabel(options),
+    }), [
+        innerHandle,
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        options,
+    ]);
     const fetchData = async (param) => {
         var _a, _b, _c;
         const data = await callWedaApi({
@@ -134,7 +167,7 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
         }
         return size;
     };
-    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-checkbox-list", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: defaultValue, disabled: disabled, classRoot: 'checkbox', size: labelSize(), layout: layout, children: _jsx("div", { className: classNames(classList), children: options === null || options === void 0 ? void 0 : options.map((Item, index) => {
-                return (_createElement(WdCheckbox, { ...props, size: ['h5'].includes(platform) ? 'lg' : props === null || props === void 0 ? void 0 : props.size, key: index, index: index, option: Item, disabled: disabled, readOnly: readOnly, getChangeHandler: getChangeHandler, checkedItemValue: checkedItemValue }));
+    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-checkbox-list", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: readValue, disabled: disabled, readOnly: readOnly, classRoot: 'checkbox', size: labelSize(), layout: layout, children: _jsx("div", { className: classNames(classList), children: options === null || options === void 0 ? void 0 : options.map((Item, index) => {
+                return (_createElement(WdCheckbox, { ...props, size: ['h5'].includes(platform) ? 'lg' : props === null || props === void 0 ? void 0 : props.size, key: index, index: index, option: Item, disabled: disabled, getChangeHandler: getChangeHandler, checkedItemValue: checkedItemValue }));
             }) }) })));
 });

package/dist/web/components/wd-checkbox-list/index.d.ts

@@ -0,0 +1,3 @@
+import { WdCheckboxList } from './checkboxList';
+export { WdCheckboxList, type WdCheckboxListProps } from './checkboxList';
+export default WdCheckboxList;

package/dist/web/components/wd-config-provider/index.d.ts

@@ -0,0 +1 @@
+export { ConfigProvider, type ConfigProviderProps } from './wd-config-provider';

package/dist/web/components/wd-config-provider/wd-config-context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const DEFAULT_CLASS_PREFIX: string;
+export interface Config {
+    /**
+     * 组件类名前缀
+     *
+     * @default "wd"
+     */
+    classPrefix?: string;
+}
+export declare const WdConfigContext: import("react").Context<Config>;

package/dist/web/components/wd-config-provider/wd-config-provider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Config } from './wd-config-context';
+export interface ConfigProviderProps extends Config {
+    children: React.ReactNode;
+}
+export declare function ConfigProvider({ children, ...configProps }: ConfigProviderProps): JSX.Element;

package/dist/web/components/wd-date/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/elements/Calendar.h5.js

@@ -0,0 +1,62 @@
+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) || getYMD(item) === getYMD(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/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/elements/DatePicker.h5.js

@@ -0,0 +1,40 @@
+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 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),
+    };
+    const handleOk = () => {
+        onOk(value);
+    };
+    const handleChange = (v) => {
+        setValue(v);
+    };
+    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-confirm`, onClick: handleOk, children: "\u786E\u5B9A" })] }), _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/elements/Modal.h5.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface IModal {
+    visible?: boolean;
+    onOk?: any;
+    onClose?: any;
+    children?: any;
+}
+/**
+ * H5端 模态框
+ */
+export declare function Modal(props?: IModal): JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Portal } from '../../common/portal';
+import { noop } from '../../../utils/constant';
+import { useConfig } from '../../../utils/config-context';
+/**
+ * H5端 模态框
+ */
+export function Modal(props) {
+    const { onOk = noop, onClose = noop, visible, children } = props;
+    const { classPrefix } = useConfig();
+    if (!visible)
+        return null;
+    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-confirm`, onClick: onOk, children: "\u786E\u5B9A" })] }), _jsx("div", { className: `${classPrefix}-custom-picker__body`, children: children })] })] }) }));
+}

package/dist/web/components/wd-date/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/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;
+        }
+        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;
+        }
+        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;
+        }
+        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/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/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/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;

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useMemo, useState } from 'react';
+import { WheelPicker } from './WheelPicker';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { getFullDay, convertValueToDateItem, convertMoment, convertDateItemToValue, getExistValue, useDateValue, } from '../../../utils/hooks/useFormLegacy';
+import { noop } from '../../../utils/constant';
+/**
+ * 年月滚动选择
+ */
+export function YearMonthPicker(props) {
+    var _a, _b, _c, _d;
+    const { start, end, onChange = noop } = props;
+    const _value = useDateValue({ ...props, mode: 'month' });
+    const [value, setValue] = useSyncValue(_value);
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const range = useMemo(() => [convertMoment(start), convertMoment(end)], [start, end]);
+    const [startY, endY] = [(_a = range[0]) === null || _a === void 0 ? void 0 : _a.year(), (_b = range[1]) === null || _b === void 0 ? void 0 : _b.year()];
+    const [startYM, endYM] = [(_c = range[0]) === null || _c === void 0 ? void 0 : _c.month(), (_d = range[1]) === null || _d === void 0 ? void 0 : _d.month()];
+    const yearOptions = useMemo(() => {
+        if (!startY || !endY)
+            return [];
+        return Array.from({ length: endY - startY + 1 }).map((d, i) => ({
+            value: startY + i,
+            label: `${startY + i}年`,
+        }));
+    }, [startY, endY]);
+    const getMonthOptions = (year) => {
+        if (!startY || !endY)
+            return [];
+        let _start = 0;
+        let _end = 11;
+        if (year === startY) {
+            _start = startYM;
+        }
+        if (year === endY) {
+            _end = endYM;
+        }
+        return Array.from({ length: _end - _start + 1 }).map((d, i) => {
+            const label = `${getFullDay(_start + i + 1)}月`;
+            return { value: _start + i, label };
+        });
+    };
+    const [monthOptions, setMonthOptions] = useState(getMonthOptions(dateItem.year));
+    const pickerItems = [yearOptions, monthOptions];
+    const pickerValue = [dateItem.year, dateItem.month];
+    const handleChange = (values) => {
+        const [_year, _month] = values;
+        const year = getExistValue(_year, yearOptions);
+        const monthOptions = getMonthOptions(year); // 月份实时变化
+        const month = getExistValue(_month, monthOptions);
+        const value = convertDateItemToValue({ ...dateItem, year, month });
+        setMonthOptions(monthOptions);
+        setValue(value);
+        onChange(value);
+    };
+    return (_jsx(WheelPicker, { items: pickerItems, value: pickerValue, onChange: handleChange }));
+}

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

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

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { WheelPicker } from './WheelPicker';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { convertValueToDateItem, convertMoment, convertDateItemToValue, getExistValue, useDateValue, } from '../../../utils/hooks/useFormLegacy';
+import { noop } from '../../../utils/constant';
+/**
+ * 年滚动选择
+ */
+export function YearPicker(props) {
+    var _a, _b;
+    const { start, end, onChange = noop } = props;
+    const _value = useDateValue({ ...props, mode: 'year' });
+    const [value, setValue] = useSyncValue(_value);
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const range = useMemo(() => [convertMoment(start), convertMoment(end)], [start, end]);
+    const [startY, endY] = [(_a = range[0]) === null || _a === void 0 ? void 0 : _a.year(), (_b = range[1]) === null || _b === void 0 ? void 0 : _b.year()];
+    const yearOptions = useMemo(() => {
+        if (!startY || !endY)
+            return [];
+        //eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        return Array.from({ length: endY - startY + 1 }).map((d, i) => ({
+            value: startY + i,
+            label: `${startY + i}年`,
+        }));
+    }, [startY, endY]);
+    const pickerItems = [yearOptions];
+    const pickerValue = [dateItem.year];
+    const handleChange = (values) => {
+        const [_year] = values;
+        const year = getExistValue(_year, yearOptions);
+        const value = convertDateItemToValue({ ...dateItem, year });
+        setValue(value);
+        onChange(value);
+    };
+    return (_jsx(WheelPicker, { items: pickerItems, value: pickerValue, onChange: handleChange }));
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MonthPickerProps } from 'tea-component';
+/**
+ * pc 版简易年份选择器
+ * 传参与 MonthPicker 保持一致
+ */
+export declare function YearPicker(props: MonthPickerProps & {
+    id?: string;
+}): JSX.Element;