@cloudbase/weda-ui 0.2.16 → 0.2.21-alpha.1

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+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 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' });
+    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 = useCallback(() => 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);
+        if (isWheelChange) {
+            setValue(v);
+            onChange(v);
+        }
+    };
+    // 选中日期
+    const handleSelectDay = (item) => {
+        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`, {
+                                                    '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,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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';
+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';
+/**
+ * 年-月-日 时:分:秒 选择器
+ */
+export function DatePicker(props) {
+    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 = {
+        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 = () => {
+        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 ${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, 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/Modal.h5.d.ts

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

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

@@ -0,0 +1,16 @@
+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';
+import classNames from '../../../utils/classnames';
+/**
+ * H5端 模态框
+ */
+export function Modal(props) {
+    const { onOk = noop, onClose = noop, visible, children, className, header, okButtonVisible = true, popupContainer, } = props;
+    const { classPrefix } = useConfig();
+    if (!visible)
+        return null;
+    const renderHeader = () => header ? (header) : (_jsxs("div", { className: `${classPrefix}-custom-picker__header`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__header-cancle`, onClick: onClose, children: "\u53D6\u6D88" }), okButtonVisible && (_jsx("div", { className: `${classPrefix}-custom-picker__header-confirm`, onClick: onOk, children: "\u786E\u5B9A" }))] }));
+    return (_jsx(Portal, { type: "div", portalContainer: popupContainer, children: _jsxs("div", { className: classNames(`${classPrefix}-custom-picker`, className), children: [_jsx("div", { className: `${classPrefix}-custom-backdrop`, onClick: onClose }), _jsxs("div", { className: `${classPrefix}-custom-picker__inner`, children: [renderHeader(), _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,100 @@
+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';
+import { errorHandler } from '../../../utils/error';
+/**
+ * 多列选择器
+ */
+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 (error) {
+            errorHandler({
+                code: 'WheelPickerError',
+                error,
+            });
+        }
+    };
+    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,17 @@
+/// <reference types="react" />
+import { type MonthPickerProps } from 'tea-component';
+import { type IDatePickerOptions } from './interface';
+/**
+ * 年份选择器 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

@@ -0,0 +1,83 @@
+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, getStartMoment, } from '../../../utils/hooks/useFormLegacy';
+import { noop, emptyArray } from '../../../utils/constant';
+import isEqual from '../../../utils/isObjectEqual';
+import { useDeepCompareMemo } from '@react-hookz/web';
+/**
+ * 年份选择器 pc
+ */
+export function YearPicker(props) {
+    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 { classPrefix } = useConfig();
+    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);
+        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 handleCurrent = (e) => {
+        e.stopPropagation();
+        setPage(0);
+    };
+    // 下一年
+    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) => {
+        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" })] }) }) }) }));
+}