@cloudbase/weda-ui 3.5.3 → 3.6.0

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

@@ -12,8 +12,17 @@ import fromEntries from 'object.fromentries';
 import { callWedaApi } from '../../utils/tcb';
 import destr from 'destr';
 import { useSize } from '../../utils/hooks/useFormLegacy';
+import debounce from '../../utils/debounce';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+import { useDelayEvents } from '../../utils/hooks/use-delay-events';
+import { useSelected } from '../../utils/hooks/use-selected';
+import { isObjHasProp, isObj } from '../../utils/tool';
 export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, inputRef) {
-    const { range: propRange, direction, events = emptyObject, format = '', enumName = '', label, } = props;
+    const { range, direction, events = emptyObject, format = '', enumName = '', label, layout, } = props;
+    const propRange = React.useMemo(() => {
+        const list = Array.isArray(range) ? range : [];
+        return list.filter((item) => isObjHasProp(item, 'value'));
+    }, [range]);
     const [innerHandle, setInnerHandle] = React.useState({}); // hook里挂出的属性
     const [readValue, setReadValue] = React.useState('-'); // 只读的显示
     const size = useSize(props);
@@ -26,10 +35,11 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
         classList.push(`${classPrefix}-checkbox-group--inline  `);
     /** 兼容从 Form 获取属性，必须引入，自动挂载组件方法 */
     const traitProps = { ...props, inputRef, setInnerHandle };
-    const { value: defaultValue, onChange: outerOnChange, disabled, readOnly, validateErrorMsg, validateState, visible, name, value, required, layout, } = useFormInputTrait(traitProps);
+    const { value: defaultValue, onChange: outerOnChange, disabled, readOnly, validateErrorMsg, validateState, visible, name, value, required, } = useFormInputTrait(traitProps);
     const [options, setOptions] = React.useState(format === 'x-enum' ? [] : propRange);
     const [enumOptions, setEnumOptions] = React.useState([]);
     const [checkedItemValue, setCheckedItemValue] = React.useState(fromEntries(options.map(({ value, checked }) => [value, !!checked])));
+    const delayEvents = useDelayEvents(events);
     /**
      * 在ios h5端, label和input的绑定不生效
      * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
@@ -45,7 +55,7 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
                 .filter(([, checked]) => checked)
                 .map(([value]) => value);
             outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value);
-            events === null || events === void 0 ? void 0 : events.change({ value }, { originEvent: e });
+            delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.change({ value }, { originEvent: e });
         }
     };
     React.useEffect(() => {
@@ -63,18 +73,26 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
             setReadValue('-');
         }
     }, [options, readOnly]);
+    // 加上选中
+    const getOptions = (options, value) => {
+        if (!Array.isArray(options))
+            return [];
+        if (!Array.isArray(value))
+            return options;
+        const opts = options.map((item) => {
+            const checked = value.find((val) => `${val}` === `${item.value}`);
+            return {
+                ...item,
+                value: item.value,
+                label: item.label,
+                checked: !!checked,
+            };
+        });
+        return opts;
+    };
     React.useEffect(() => {
         if (format !== 'x-enum') {
-            const opts = propRange &&
-                propRange.map((item) => {
-                    const checked = defaultValue &&
-                        defaultValue.find((val) => `${val}` === `${item.value}`);
-                    return {
-                        value: item.value,
-                        label: item.label,
-                        checked: !!checked,
-                    };
-                });
+            const opts = getOptions(propRange, defaultValue);
             setOptions(opts);
         }
     }, [propRange, defaultValue, format]);
@@ -85,16 +103,13 @@ 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, () => ({
+    const oriOptions = React.useMemo(() => removeChecked(options), [options]);
+    const { selectedItem, selectedLabel } = useSelected({
+        range: oriOptions,
+        value: defaultValue,
+        multiple: true,
+    });
+    useSetWidgetApi(() => ({
         ...innerHandle,
         name,
         value,
@@ -103,7 +118,8 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
         visible,
         disabled,
         readOnly,
-        selectedLabel: getSelectedLabel(options),
+        item: selectedItem,
+        selectedLabel,
     }), [
         innerHandle,
         name,
@@ -113,9 +129,10 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
         visible,
         disabled,
         readOnly,
-        options,
-    ]);
-    const fetchData = async (param) => {
+        selectedItem,
+        selectedLabel,
+    ], inputRef);
+    const fetchData = debounce(async (param) => {
         var _a, _b, _c;
         const data = await callWedaApi({
             action: 'DescribeGeneralOptionsDetailList',
@@ -131,43 +148,32 @@ export const WdCheckboxList = React.forwardRef(function WdCheckboxList(props, in
             };
         });
         setEnumOptions(enumOption);
-        const opt = enumOption &&
-            enumOption.map((item) => {
-                const checked = defaultValue &&
-                    defaultValue.find((val) => `${val}` === `${item.value}`);
-                return {
-                    value: item.value,
-                    label: item.label,
-                    checked: !!checked,
-                };
-            });
-        setOptions(opt);
-    };
+        const opts = getOptions(enumOption, defaultValue);
+        setOptions(opts);
+    }, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    500);
     React.useEffect(() => {
         if (format === 'x-enum') {
-            const opt = enumOptions &&
-                enumOptions.map((item) => {
-                    const checked = defaultValue &&
-                        defaultValue.find((val) => `${val}` === `${item.value}`);
-                    return {
-                        value: item.value,
-                        label: item.label,
-                        checked: !!checked,
-                    };
-                });
+            const opt = getOptions(enumOptions, defaultValue);
             setOptions(opt);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValue, format]);
+    }, [defaultValue, format, enumOptions]);
     const labelSize = () => {
         if (['h5'].includes(platform) ||
-            (['horizontal', ''].includes(layout) &&
+            (['horizontal', '', undefined].includes(layout) &&
                 ['vertical'].includes(direction))) {
             return 'xs';
         }
         return size;
     };
     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 }));
+                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 || Item.disabled, getChangeHandler: getChangeHandler, checkedItemValue: checkedItemValue }));
             }) }) })));
 });
+function removeChecked(list) {
+    const options = (Array.isArray(list) ? list : []).filter((item) => isObj(item));
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const newList = options.map(({ checked, ...rest }) => rest);
+    return newList;
+}

package/dist/web/components/wd-config-provider/wd-config-context.js

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from '../../utils/global-context';
 export const DEFAULT_CLASS_PREFIX = typeof WD_CLASS_PREFIX !== 'undefined' ? WD_CLASS_PREFIX : 'wd';
 export const WdConfigContext = createContext({
     classPrefix: DEFAULT_CLASS_PREFIX,
-});
+}, 'WdConfigContext');

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

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

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
+import React, { useState, useMemo, useImperativeHandle, useCallback, } 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';
@@ -12,8 +12,8 @@ const ONE = 1;
 /**
  * h5端 年月日-日历选择格式
  */
-export function Calendar(props) {
-    const { start, end, onChange = noop } = props;
+export const Calendar = React.forwardRef(function Calendar(props, ref) {
+    const { start, end, onChange = noop, isWheelChange } = props;
     const { classPrefix } = useConfig();
     const [showMode, setShowMode] = useState('day'); // 切换模式
     const _value = useDateValue({ ...props, mode: 'day' });
@@ -28,7 +28,7 @@ export function Calendar(props) {
     });
     const opStyle = showMode === 'month' ? { visibility: 'hidden' } : {};
     // 切换模式
-    const handleClickMode = () => setShowMode((d) => (d === 'day' ? 'month' : 'day'));
+    const handleClickMode = useCallback(() => setShowMode((d) => (d === 'day' ? 'month' : 'day')), []);
     // 切换月
     const handleSelectMonth = (month) => {
         const value = convertDateItemToValue({ ...dateItem, month });
@@ -39,16 +39,24 @@ export function Calendar(props) {
     const handleSelectYearMonth = (v) => {
         const item = convertValueToDateItem(v);
         setDateItem(item);
+        if (isWheelChange) {
+            setValue(v);
+            onChange(v);
+        }
     };
     // 选中日期
     const handleSelectDay = (item) => {
-        if ((item === null || item === void 0 ? void 0 : item.disabled) || getYMD(item) === getYMD(dateItem)) {
+        if (item === null || item === void 0 ? void 0 : item.disabled) {
             return;
         }
         const value = convertDateItemToValue({ ...dateItem, day: item.day });
         setValue(value);
         onChange(value);
     };
+    useImperativeHandle(ref, () => ({ showMode, handleClickMode }), [
+        showMode,
+        handleClickMode,
+    ]);
     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`, {
@@ -59,4 +67,4 @@ export function Calendar(props) {
                                                 }, children: item.day }, index));
                                         }) }, index));
                                 }) })] })), showMode === 'month' && (_jsx(YearMonthPicker, { ...props, value: dateItemValue, onChange: handleSelectYearMonth }))] })] }));
-}
+});

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

@@ -1,6 +1,6 @@
 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 { useState, useMemo, useRef } from 'react';
+import { convertMoment, useDateValue, getStartMoment, } from '../../../utils/hooks/useFormLegacy';
 import { Portal } from '../../common/portal';
 import { noop } from '../../../utils/constant';
 import { useSyncValue } from '../../../utils/hooks/useSyncValue';
@@ -9,18 +9,18 @@ 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 { mode, onOk = noop, onClose = noop, okText = '确定', cancelText = '取消', maskClosable = true, className, } = props;
+    const nowDate = useMemo(() => getStartMoment(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 calendarRef = useRef({});
     const timeFormat = mode === 'datetimeMinute' ? 'HH:mm' : 'HH:mm:ss';
     const m = useMemo(() => convertMoment(value), [value]) || nowDate;
     const dateTimeDisplay = {
@@ -28,13 +28,22 @@ export function DatePicker(props) {
         time: m === null || m === void 0 ? void 0 : m.format(timeFormat),
     };
     const handleOk = () => {
+        if (mode === 'day' &&
+            calendarRef.current.showMode === 'month' &&
+            calendarRef.current.handleClickMode) {
+            calendarRef.current.handleClickMode();
+            return;
+        }
         onOk(value);
     };
+    const handleClose = () => {
+        onClose(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: () => {
+    return (_jsx(Portal, { type: "div", children: _jsxs("div", { className: `${classPrefix}-custom-picker ${className}`, children: [_jsx("div", { className: `${classPrefix}-custom-backdrop`, onClick: () => maskClosable && handleClose() }), _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: handleClose, children: cancelText }), _jsx("div", { className: `${classPrefix}-custom-picker__header-confirm`, onClick: handleOk, children: okText })] }), _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 ${classPrefix}-custom-picker__select-item-${d}  ${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))] })] })] }) }));
+                                                }, children: dateTimeDisplay[d] }, d))) }), dateOrTime === 'date' && (_jsx("div", { className: `${classPrefix}-custom-picker__select-date`, children: _jsx(Calendar, { ...props, isWheelChange: true, 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, isWheelChange: true, value: value, onChange: handleChange, ref: calendarRef }, _key))] })] })] }) }));
 }

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

@@ -1,9 +1,17 @@
 /// <reference types="react" />
-import { MonthPickerProps } from 'tea-component';
+import { type MonthPickerProps } from 'tea-component';
+import { type IDatePickerOptions } from './interface';
 /**
- * pc 版简易年份选择器
- * 传参与 MonthPicker 保持一致
+ * 年份选择器 pc
  */
 export declare function YearPicker(props: MonthPickerProps & {
     id?: string;
 }): JSX.Element;
+/**
+ * 单个年选择面板 pc
+ */
+export declare function YearPanel(props: IDatePickerOptions & {
+    row?: number;
+    col?: number;
+    selectedYears?: number[];
+}): JSX.Element;

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

@@ -5,70 +5,79 @@ 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 { convertMoment, convertYears, convertValueToDateItem, convertDateItemToValue, getStartMoment, } from '../../../utils/hooks/useFormLegacy';
+import { noop, emptyArray } from '../../../utils/constant';
 import isEqual from '../../../utils/isObjectEqual';
+import { useDeepCompareMemo } from '@react-hookz/web';
 /**
- * pc 版简易年份选择器
- * 传参与 MonthPicker 保持一致
+ * 年份选择器 pc
  */
 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 { range = emptyArray, disabled, className, placeholder, format = 'YYYY', onChange = noop, id, } = props;
+    const [value, setValue] = useSyncValue(props.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 }));
+    const valueDisplay = useMemo(() => { var _a; return ((_a = convertMoment(value)) === null || _a === void 0 ? void 0 : _a.format(format)) || ''; }, [value, format]);
+    // 更改年
+    const handleChange = (v) => {
+        const m = convertMoment(v);
         setValue(m);
-        setPage(0);
         setVisible(false);
         onChange === null || onChange === void 0 ? void 0 : onChange(m, null);
     };
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(Popover, { placement: "bottom-start", trigger: "click", visible: visible, onVisibleChange: (v) => !v && setVisible(v), overlayClassName: `${classPrefix}-dropdown--picker`, overlay: _jsx("div", { className: `${classPrefix}-dropdown-box `, children: _jsx("div", { className: `${classPrefix}-calendar`, children: _jsx(YearPanel, { value: value, onChange: handleChange, start: range[0], end: range[1] }) }) }), children: _jsx("div", { onClick: () => !disabled && setVisible(true), className: `${classPrefix}-datepicker ${className}`, children: _jsx("div", { className: `${classPrefix}-datepicker__input`, children: _jsx("input", { id: id, disabled: disabled, placeholder: placeholder, value: valueDisplay, autoComplete: "off" }) }) }) }) }));
+}
+/**
+ * 单个年选择面板 pc
+ */
+export function YearPanel(props) {
+    const { value, onChange = noop, row = 5, col = 4, selectedYears = [], } = props;
+    const { classPrefix } = useConfig();
+    const [page, setPage] = useState(0);
+    const count = row * col;
+    const nowYear = useMemo(() => getStartMoment().year(), []); // 当年
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]); // 输入值年
+    const year = value ? dateItem.year : nowYear;
+    const { years, yearStart, yearEnd } = useMemo(() => convertYears(year, page, row, col), [year, page, row, col]);
+    const [start, end] = useDeepCompareMemo(() => {
+        var _a, _b;
+        return [
+            (_a = convertMoment(props.start)) === null || _a === void 0 ? void 0 : _a.format('YYYY'),
+            (_b = convertMoment(props.end)) === null || _b === void 0 ? void 0 : _b.format('YYYY'),
+        ];
+    }, [props.start, props.end]);
     // 上一年
     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 handleNext = (e) => {
+        e.stopPropagation();
+        setPage((d) => d + 1);
     };
+    // 是否禁用
+    const isDisabled = (v) => (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" }) }) }) }) }));
+    const isSelected = (v) => {
+        return (value && v === year) || selectedYears.find((d) => d == v);
+    };
+    // 选中年，传值 number 类型
+    const handleSelect = (v) => {
+        if (isDisabled(v))
+            return;
+        const m = convertDateItemToValue({ ...dateItem, year: v });
+        setPage(0);
+        onChange === null || onChange === void 0 ? void 0 : onChange(m);
+    };
+    return (_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: `上 ${count} 年`, onClick: handlePre, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-arrowleft` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__curbtn`, title: `当前 ${count} 年`, onClick: handleCurrent, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-cur` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__nextbtn`, title: `下 ${count} 年`, 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((d) => (_jsx("div", { className: classNames(`${classPrefix}-calendar__cell`, {
+                                [`${classPrefix}-calendar__cell--now`]: d === nowYear,
+                                'is-selected': isSelected(d),
+                                'is-disabled': isDisabled(d),
+                            }), onClick: () => handleSelect(d), children: _jsx("span", { children: d }) }, d))) }, rows.join()))) }) })] }));
 }

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { RangePickerProps } from 'tea-component';
+/**
+ * 年范围选择器 pc
+ */
+export declare function YearRangePicker(props: RangePickerProps): JSX.Element;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useState } from 'react';
+import { Popover, ConfigProvider } from 'tea-component';
+import { useConfig } from '../../../utils/config-context';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { convertMoment, convertValueToDateItem, } from '../../../utils/hooks/useFormLegacy';
+import { convertDateRangeToString, convertStartEndValue, } from '../../../utils/date';
+import { noop, emptyArray } from '../../../utils/constant';
+import isEqual from '../../../utils/isObjectEqual';
+import { YearPanel } from './YearPicker.pc';
+import { useDeepCompareMemo } from '@react-hookz/web';
+/**
+ * 年范围选择器 pc
+ */
+export function YearRangePicker(props) {
+    const { range = emptyArray, disabled, className = '', format = 'YYYY', onChange = noop, placeholder = emptyArray, overlayClassName, separator = '~', } = props;
+    const [value, setValue] = useSyncValue(props.value, isEqual);
+    const [visible, setVisible] = useState(false);
+    const [step, setStep] = useState(0);
+    const { classPrefix } = useConfig();
+    const valueDisplay = useDeepCompareMemo(() => convertDateRangeToString(value, format) || ['', ''], [value, format]);
+    const placeholders = useDeepCompareMemo(() => Array.isArray(placeholder) ? placeholder : [placeholder, placeholder], [placeholder]);
+    // 更改年
+    const handleChange = (v) => {
+        const stepTemp = step + 1;
+        const m = convertMoment(v);
+        let temp = [];
+        if (stepTemp === 1) {
+            temp = [m, null];
+        }
+        else if (stepTemp === 2) {
+            temp = convertStartEndValue([value === null || value === void 0 ? void 0 : value[0], m], true);
+            setVisible(false);
+            onChange === null || onChange === void 0 ? void 0 : onChange(temp, null);
+        }
+        setValue(temp);
+        setStep(stepTemp);
+    };
+    // 打开弹窗
+    const handleVisible = (v) => {
+        if (step === 1) {
+            setValue(props.value);
+        }
+        setVisible(v);
+        setStep(0);
+    };
+    // 选中的年份
+    const selectedYears = []
+        .concat(value)
+        .filter((d) => convertMoment(d))
+        .map((d) => { var _a; return (_a = convertValueToDateItem(d)) === null || _a === void 0 ? void 0 : _a.year; });
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(Popover, { placement: "bottom-start", trigger: "click", visible: visible, onVisibleChange: handleVisible, overlayClassName: overlayClassName, overlay: _jsx("div", { className: `${classPrefix}-dropdown-box `, children: _jsx("div", { className: `${classPrefix}-calendar ${classPrefix}-calendar--date-range`, children: _jsx("div", { className: `${classPrefix}-calendar__body`, children: _jsx(YearPanel, { value: value === null || value === void 0 ? void 0 : value[0], onChange: handleChange, start: range[0], end: range[1], col: 8, selectedYears: selectedYears }) }) }) }), children: _jsx("div", { onClick: () => !disabled && setVisible(true), className: `${classPrefix}-datepicker ${className}`, children: _jsxs("div", { className: `${classPrefix}-datepicker__input wd-datepicker__input--range`, children: [_jsx("input", { disabled: disabled, placeholder: placeholders[0], value: step !== 1 ? valueDisplay[0] : '', autoComplete: "off" }), _jsx("span", { children: separator }), _jsx("input", { disabled: disabled, placeholder: placeholders[1], value: step !== 1 ? valueDisplay[1] : '', autoComplete: "off" })] }) }) }) }));
+}

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

@@ -1,14 +1,20 @@
+/// <reference types="react" />
 import type { DataType } from '../../../../configs/components/wd-date';
+type IDateValue = number | string | moment.Moment;
 export interface IDatePickerOptions {
-    value?: number | string | moment.Moment;
-    start?: string;
-    end?: string;
+    value?: IDateValue;
+    start?: IDateValue;
+    end?: IDateValue;
     mode?: string;
     onChange?: any;
 }
 export interface IDatePicker extends Omit<IDatePickerOptions, 'onChange'> {
+    className?: string;
     onOk?: any;
     onClose?: any;
+    cancelText?: React.ReactNode;
+    okText?: React.ReactNode;
+    maskClosable?: boolean;
 }
 export interface IPureDate extends DataType {
     onChange?: (v: number) => any;
@@ -39,3 +45,4 @@ export interface IWheelPicker {
     onChange?: (value?: any[]) => void;
     items?: IOption[][];
 }
+export {};

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

@@ -18,6 +18,7 @@ export function DatePc(props) {
         const value = moment.isMoment(m) ? m.valueOf() : null;
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
+    const pickerOverlay = `${classPrefix}-dropdown--picker `;
     const dateProps = {
         disabled,
         placeholder,
@@ -34,16 +35,16 @@ export function DatePc(props) {
         Elem = _jsx(YearPicker, { ...dateProps });
     }
     else if (mode === 'month') {
-        Elem = _jsx(DatePicker.MonthPicker, { ...dateProps });
+        Elem = (_jsx(DatePicker.MonthPicker, { overlayClassName: pickerOverlay, ...dateProps }));
     }
     else if (mode === 'datetime') {
-        Elem = _jsx(DatePicker, { ...dateProps, showTime: true });
+        Elem = (_jsx(DatePicker, { overlayClassName: pickerOverlay, ...dateProps, showTime: true }));
     }
     else if (mode === 'datetimeMinute') {
-        Elem = _jsx(DatePicker, { ...dateProps, showTime: { format: 'HH:mm' } });
+        Elem = (_jsx(DatePicker, { overlayClassName: pickerOverlay, ...dateProps, showTime: { format: 'HH:mm' } }));
     }
     else {
-        Elem = _jsx(DatePicker, { ...dateProps });
+        Elem = _jsx(DatePicker, { ...dateProps, overlayClassName: pickerOverlay });
     }
     // 返回
     return _jsx(ConfigProvider, { classPrefix: classPrefix, children: Elem });

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import '../form/select/moment-locale';
 import type { DataType } from '../../../configs/components/wd-date';
 import type { CommonPropsType } from '../../types';
 /**