@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.2

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

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable rulesdir/no-timer */
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { forwardRef, useEffect, useState, useImperativeHandle, useCallback, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import useDebouncedCallback from '../../utils/hooks/use-debounced-callback';
+import { useTempUrl } from '../../utils/hooks/use-cloud-id-temp-url';
+import { errorHandler } from '../../utils/error';
+const MINUTE = 60;
+const DEFAULT_TIME_STR = '--:--';
+const calcTime = (num) => {
+    try {
+        let m = `${Math.floor(+num / MINUTE)}`;
+        let s = `${Math.floor(+num % MINUTE)}`;
+        if (m.length <= 1)
+            m = `0${m}`;
+        if (s.length <= 1)
+            s = `0${s}`;
+        return `${m}:${s}`;
+    }
+    catch (error) {
+        errorHandler({
+            code: 'CalcTimeError',
+            error,
+        });
+        return DEFAULT_TIME_STR;
+    }
+};
+export const WdAudio = forwardRef(function WdAudio(props, ref) {
+    const { className = '', style, id } = props;
+    const platform = usePlatform();
+    const { classPrefix } = useConfig();
+    const [currentTimeStr, setCurrentTimeStr] = useState(DEFAULT_TIME_STR);
+    const [durationStr, setDurationStr] = useState(DEFAULT_TIME_STR);
+    const [played, setPlayed] = useState(false);
+    const { data: realSrc } = useTempUrl(props.src);
+    // 响应式css api
+    const classes = {
+        [`${classPrefix}-audio`]: true,
+        [`${classPrefix}-${platform}-audio`]: true,
+    };
+    // audio实例
+    const [audioInstance, setAudioInstance] = useState(null);
+    const destroy = useCallback(() => {
+        if (!audioInstance)
+            return;
+        audioInstance.pause();
+        audioInstance.src = '';
+        audioInstance.load();
+        audioInstance.onplay = null;
+        audioInstance.onpause = null;
+        audioInstance.onseeked = null;
+        audioInstance.onerror = null;
+        audioInstance.onended = null;
+        audioInstance.ontimeupdate = null;
+        audioInstance.ondurationchange = null;
+        setCurrentTimeStr(DEFAULT_TIME_STR);
+        setDurationStr(DEFAULT_TIME_STR);
+        setAudioInstance(null);
+    }, [audioInstance, setCurrentTimeStr, setDurationStr, setAudioInstance]);
+    /**
+     * 初始化代码audio实例
+     */
+    const init = useDebouncedCallback(useCallback(async (src = realSrc, autoplay = props.autoplay, loop = props.loop, playbackRate = props.playbackRate, startTime = props.startTime) => {
+        let audio = audioInstance;
+        if (audioInstance) {
+            destroy();
+        }
+        else {
+            audio = new Audio();
+        }
+        setPlayed(false);
+        audio.load();
+        audio.src = src || '';
+        audio.autoplay = autoplay;
+        audio.autostart = autoplay;
+        audio.loop = loop;
+        audio.playbackRate = playbackRate;
+        audio.currentTime = startTime || 0;
+        audio.startTime = startTime || 0;
+        setCurrentTimeStr(calcTime(startTime || 0));
+        setAudioInstance(audio);
+    }, [
+        audioInstance,
+        destroy,
+        props.autoplay,
+        props.loop,
+        props.playbackRate,
+        realSrc,
+        props.startTime,
+    ]), 500, {
+        maxWait: 1000,
+    });
+    useEffect(() => {
+        init(realSrc, props.autoplay, props.loop, props.playbackRate, props.startTime);
+    }, [init, props.autoplay, props.loop, props.playbackRate, realSrc, props.startTime]);
+    useEffect(() => {
+        if (!(audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.src))
+            return;
+        audioInstance.onplay = () => {
+            setPlayed(true);
+            setTimeout(() => {
+                var _a;
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.play();
+            }, 0);
+        };
+        audioInstance.onpause = () => {
+            setPlayed(false);
+            setTimeout(() => {
+                var _a;
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.pause();
+            }, 0);
+        };
+        audioInstance.onseeked = () => {
+            var _a;
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.seeked({ position: audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.currentTime });
+        };
+        audioInstance.onerror = (res) => {
+            var _a;
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.error(res);
+        };
+        audioInstance.onended = () => {
+            var _a;
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.ended();
+        };
+        audioInstance.ontimeupdate = () => {
+            var _a;
+            setCurrentTimeStr(calcTime((audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.currentTime) || 0));
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.timeupdate({
+                currentTime: audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.currentTime,
+                duration: audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.duration,
+            });
+        };
+        audioInstance.ondurationchange = () => {
+            setDurationStr(calcTime((audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.duration) || 0));
+        };
+        setTimeout(() => {
+            var _a;
+            if (audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.autoplay) {
+                audioInstance.play();
+            }
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.audioReady({ audioInstance });
+        }, 1000);
+    }, [audioInstance, props.events, setPlayed]);
+    useEffect(() => {
+        return () => {
+            destroy();
+        };
+    }, [destroy]);
+    const play = useCallback(() => {
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.play();
+    }, [audioInstance]);
+    const pause = useCallback(() => {
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.pause();
+    }, [audioInstance]);
+    const stop = useCallback(() => {
+        var _a, _b;
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.load();
+        audioInstance === null || audioInstance === void 0 ? void 0 : audioInstance.pause();
+        setPlayed(false);
+        (_a = props.events) === null || _a === void 0 ? void 0 : _a.stop();
+        (_b = props.events) === null || _b === void 0 ? void 0 : _b.seeked({ position: 0 });
+    }, [audioInstance, props.events, setPlayed]);
+    const seek = useCallback(({ position } = {}) => {
+        if (!audioInstance)
+            return;
+        audioInstance.currentTime = position;
+    }, [audioInstance]);
+    const fastForward = useCallback(({ time } = {}) => {
+        if (!audioInstance)
+            return;
+        audioInstance.currentTime = Math.min(audioInstance.currentTime + time, audioInstance.duration);
+    }, [audioInstance]);
+    const backward = useCallback(({ time } = {}) => {
+        if (!audioInstance)
+            return;
+        audioInstance.currentTime = Math.max(audioInstance.currentTime - time, 0);
+    }, [audioInstance]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            audioInstance,
+            currentTimeStr,
+            durationStr,
+            played,
+            play,
+            pause,
+            stop,
+            seek,
+            destroy,
+            fastForward,
+            backward,
+            init,
+        };
+    }, [
+        audioInstance,
+        currentTimeStr,
+        durationStr,
+        played,
+        play,
+        pause,
+        stop,
+        seek,
+        destroy,
+        fastForward,
+        backward,
+        init,
+    ]);
+    return (_jsx("div", { className: classNames(classes, className), id: id, style: style, children: props.children }));
+});

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

@@ -0,0 +1,3 @@
+import { WdBubble } from './wd-bubble';
+export { WdBubble, type WdBubbleProps } from './wd-bubble';
+export default WdBubble;

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import '../style';
+export declare const WdBubble: React.ForwardRefExoticComponent<WdBubbleProps & React.RefAttributes<unknown>>;
+export interface WdBubbleProps extends CommonPropsType {
+    trigger?: 'hover' | 'click';
+    placement?: 'left-start' | 'left' | 'left-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'right-end' | 'right' | 'right-start' | 'top-end' | 'top' | 'top-start' | 'auto-end' | 'auto' | 'auto-start';
+    promptTheme?: string;
+    arrowPointAtCenter?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+    bubbleContent?: React.ReactNode;
+    bubbleChildren?: React.ReactNode;
+}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle } from 'react';
+import { Bubble, ConfigProvider } from 'tea-component';
+import classNames from '../../utils/classnames';
+import { isInIde, usePlatform } from '../../utils/platform';
+import '../style';
+const defaultCloseDelay = 200;
+export const WdBubble = forwardRef(function WdBubble({ trigger = 'hover', placement = 'top', promptTheme = 'default', arrowPointAtCenter = false, openDelay = 0, closeDelay = defaultCloseDelay, bubbleContent, bubbleChildren, events, id, style, className, }, ref) {
+    const platform = usePlatform();
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            trigger,
+            placement,
+            promptTheme,
+        };
+    }, [trigger, placement, promptTheme]);
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { className: classNames('wd-bubble', className, platform === 'h5' ? 'wd-h5-bubble' : 'wd-pc-bubble'), id: id, style: style, children: isInIde() ? (_jsx(Bubble, { content: bubbleContent && (_jsx("div", { className: 'wd-bubble-content', style: { minWidth: '140px' }, children: bubbleContent })), visible: true, children: bubbleChildren })) : (_jsx(Bubble, { content: bubbleContent, error: promptTheme === 'error', dark: promptTheme === 'dark', trigger: trigger, placement: placement, arrowPointAtCenter: arrowPointAtCenter, openDelay: Number(openDelay), closeDelay: Number(closeDelay), onVisibleChange: (visible) => {
+                    if (visible) {
+                        events === null || events === void 0 ? void 0 : events.open();
+                    }
+                    else {
+                        events === null || events === void 0 ? void 0 : events.close();
+                    }
+                }, children: _jsx("span", { className: 'wd-bubble-child', children: bubbleChildren }) })) }) }));
+});

package/dist/web/components/wd-button/convert-legacy-props.d.ts

@@ -0,0 +1,7 @@
+import type { DataType } from '../../../configs/components/wd-button';
+interface IPropsValueMap {
+    size: Record<string, DataType['size']>;
+    theme: Record<string, DataType['theme']>;
+}
+export declare const convertLegacyProps: (key: keyof IPropsValueMap, prop: any) => string;
+export {};

package/dist/web/components/wd-button/convert-legacy-props.js

@@ -0,0 +1,14 @@
+const PROPS_VALUE_MAP = {
+    size: {
+        default: 'md',
+        mini: 'sm',
+        large: 'lg',
+    },
+    theme: {
+        default: 'primary',
+        warn: 'warning',
+    },
+};
+export const convertLegacyProps = (key, prop) => {
+    return PROPS_VALUE_MAP[key][prop];
+};

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

@@ -0,0 +1,3 @@
+import { WdButton } from './wd-button';
+export { WdButton, type WdButtonProps } from './wd-button';
+export default WdButton;

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Except } from 'type-fest';
+import type { CommonPropsType, unknownFunction } from '../../types';
+import type { DataType } from '../../../configs/components/wd-button';
+import '../style';
+export declare const WdButton: React.ForwardRefExoticComponent<WdButtonProps & React.RefAttributes<unknown>>;
+export interface WdButtonProps extends CommonPropsType, Except<DataType, 'theme'> {
+    theme?: DataType['theme'] | 'wechat';
+    [handlers: `on${string}`]: unknownFunction;
+}

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useImperativeHandle } from 'react';
+import classNames from '../../utils/classnames';
+import { emptyObject } from '../../utils/constant';
+import { useConfig } from '../../utils/config-context';
+import { getParentForm } from '../../utils/widget-api';
+import { convertLegacyProps } from './convert-legacy-props';
+import { textToString, usePlatform } from '../../utils/platform';
+import { convertLegacyEnum, filterPropsWithOn } from '../../utils/tool';
+import { WD_BUTTON_THEME, WD_BUTTON_VARIANT, WD_BUTTON_SIZE, WD_BUTTON_ICON_TYPE, WD_BUTTON_ICON_POSITION, WD_BUTTON_TYPE, } from '../../../enum';
+import { WdIcon } from '../index';
+import '../style';
+export const WdButton = forwardRef(function WdButton(props, ref) {
+    const { text, size: _size = 'md', theme: _theme = 'primary', variant: _variant = 'base', iconType: _iconType = 'none', iconSource = 'inner', icon: _icon, iconSrc, iconPosition: _iconPosition = 'before', block = false, formType: _formType = 'button', disabled = false, events = emptyObject, className, style, id, loading = false, 
+    // 组件 widget 实例，后续可能会更改接口
+    $node, openType, $widget, ...restProps } = props;
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    let size = convertLegacyProps('size', _size) || _size;
+    let theme = convertLegacyProps('theme', _theme) || _theme;
+    const icon = loading ? 'td:loading' : _icon;
+    let iconType = _iconType === 'none' && loading ? 'text-with-icon' : _iconType;
+    // 枚举转换
+    theme = convertLegacyEnum(theme, WD_BUTTON_THEME);
+    size = convertLegacyEnum(size, WD_BUTTON_SIZE);
+    iconType = convertLegacyEnum(iconType, WD_BUTTON_ICON_TYPE);
+    const variant = convertLegacyEnum(_variant, WD_BUTTON_VARIANT);
+    const iconPosition = convertLegacyEnum(_iconPosition, WD_BUTTON_ICON_POSITION);
+    const formType = convertLegacyEnum(_formType, WD_BUTTON_TYPE);
+    // 样式
+    const { classPrefix } = useConfig();
+    const compClassName = `${classPrefix}-btn`;
+    // 响应式css api
+    const platformCss = `${classPrefix}-${platform}-btn`;
+    const classes = {
+        [`${classPrefix}-btn`]: true,
+        // 颜色
+        [`${compClassName}--${theme}`]: !!theme,
+        // 类型
+        [`${compClassName}--${variant}`]: !!variant,
+        // 大小
+        [`${compClassName}--${size}`]: !!size,
+        // 禁用
+        'is-disabled': disabled,
+        // 占满
+        [`${compClassName}--block`]: block,
+        // 是否是纯图标
+        [`${compClassName}--icon`]: iconType === 'icon-only',
+        [platformCss]: true,
+    };
+    // 方法
+    const onClick = (e) => {
+        var _a;
+        let parentForm;
+        switch (formType) {
+            case 'submit':
+                // 调用父级表单容器的提交
+                parentForm = getParentForm($widget);
+                if (parentForm === null || parentForm === void 0 ? void 0 : parentForm.submit) {
+                    parentForm === null || parentForm === void 0 ? void 0 : parentForm.submit();
+                    return;
+                }
+                // 老逻辑兼容
+                parentForm = getParentForm($node);
+                if (parentForm === null || parentForm === void 0 ? void 0 : parentForm.submit) {
+                    parentForm === null || parentForm === void 0 ? void 0 : parentForm.submit();
+                    return;
+                }
+                break;
+            case 'reset':
+                // 调用父级表单容器的重置
+                parentForm = getParentForm($widget);
+                if (parentForm.reset) {
+                    parentForm === null || parentForm === void 0 ? void 0 : parentForm.reset();
+                    return;
+                }
+                // 老逻辑兼容
+                parentForm = getParentForm($node);
+                if (parentForm.reset) {
+                    parentForm === null || parentForm === void 0 ? void 0 : parentForm.reset();
+                    return;
+                }
+                break;
+            default:
+                (_a = events === null || events === void 0 ? void 0 : events.tap) === null || _a === void 0 ? void 0 : _a.call(events, {}, { originEvent: e });
+        }
+    };
+    const propsStartWithOn = React.useMemo(() => {
+        return filterPropsWithOn(restProps);
+    }, [restProps]);
+    const Icon = () => {
+        // icon样式
+        const iconCls = classNames({
+            [`${classPrefix}-btn__icon`]: true,
+            [`${classPrefix}-btn__before-icon`]: iconType === 'text-with-icon' && _iconPosition === 'before',
+            [`${classPrefix}-btn__after-icon`]: iconType === 'text-with-icon' && _iconPosition === 'after',
+            [`${classPrefix}-icon--inherit`]: (style === null || style === void 0 ? void 0 : style.fontSize) && iconSource === 'inner',
+        });
+        return icon || iconSrc ? (_jsx(WdIcon, { className: iconCls, size: 'sm', name: icon, src: iconSrc, type: iconSource })) : null;
+    };
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            text,
+            theme,
+            variant,
+            size,
+            block,
+            disabled,
+            formType,
+            openType,
+        };
+    }, [text, theme, variant, size, block, disabled, formType, openType]);
+    return (_jsxs("button", { className: classNames(classes, className), disabled: disabled, type: formType, style: style, id: id, ...propsStartWithOn, onClick: onClick, children: [iconPosition === 'before' && iconType === 'text-with-icon' && _jsx(Icon, {}), iconType === 'icon-only' ? (_jsx(Icon, {})) : (_jsx("span", { className: `${classPrefix}-btn__text`, children: textToString(text) })), iconPosition === 'after' && iconType === 'text-with-icon' && _jsx(Icon, {})] }));
+});

package/dist/web/components/wd-calendar/MonthSelect.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface IMonthSelect {
+    value?: any;
+    onChange?: any;
+    readOnly?: boolean;
+}
+/**
+ * Pc端操作头
+ */
+export declare const MonthSelect: (props: IMonthSelect) => JSX.Element;

package/dist/web/components/wd-calendar/MonthSelect.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useState, useMemo } from 'react';
+import { convertValueToDateItem, getStartMoment, } from '../../utils/hooks/useFormLegacy';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import { ConfigProvider, Select } from 'tea-component';
+import { usePlatform } from '../../utils/platform';
+import { blockName } from './weeks';
+/**
+ * Pc端操作头
+ */
+export const MonthSelect = (props) => {
+    const { readOnly, onChange } = props;
+    const isH5 = usePlatform() === 'h5';
+    const valueStamp = useMemo(() => { var _a; return (_a = getStartMoment('month', props.value)) === null || _a === void 0 ? void 0 : _a.valueOf(); }, [props.value]);
+    const [value, setValue] = useSyncValue(valueStamp);
+    const { year, month } = useMemo(() => convertValueToDateItem(value), [value]);
+    const nowYear = useMemo(() => { var _a; return (_a = getStartMoment()) === null || _a === void 0 ? void 0 : _a.year(); }, []); // 当前年
+    const [min, setMin] = useState(nowYear - 100);
+    const [max, setMax] = useState(nowYear + 100);
+    const yearOptions = useMemo(() => {
+        const earlier = { text: '更早', value: '-' };
+        const later = { text: '更晚', value: '+' };
+        const opts = Array.from({ length: max - min }).map((d, i) => ({
+            text: `${i + min} 年`,
+            value: `${i + min}`,
+        }));
+        return [].concat(earlier, opts, later);
+    }, [min, max]);
+    const monthOptions = useMemo(() => Array.from({ length: 12 }).map((d, i) => ({
+        text: `${i + 1} 月`,
+        value: `${i}`,
+    })), []);
+    const handleYear = (y) => {
+        if (y === '-') {
+            setMin((d) => d - 100);
+        }
+        else if (y === '+') {
+            setMax((d) => d + 100);
+        }
+        else {
+            handleChange(y);
+        }
+    };
+    const handleChange = (y, m) => {
+        const _year = Number(y !== null && y !== void 0 ? y : year);
+        const _month = Number(m !== null && m !== void 0 ? m : month);
+        const v = new Date(_year, _month).valueOf();
+        const value = getStartMoment('month', v).valueOf();
+        setValue(value);
+        onChange(value);
+    };
+    // h5
+    if (isH5) {
+        return (_jsxs("div", { className: blockName + '__control_h5', children: [!readOnly && (_jsx("div", { className: `${blockName}_prevMonth wedatea2td-icon-arrowleft--line`, onClick: () => handleChange(null, month - 1) })), _jsxs("div", { className: `${blockName}__current-date`, children: [year, "\u5E74", month + 1, "\u6708"] }), !readOnly && (_jsx("div", { className: `${blockName}_nextMonth wedatea2td-icon-arrowright--line`, onClick: () => handleChange(null, month + 1) }))] }));
+    }
+    // pc
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { className: blockName + '__control_pc', children: readOnly ? (_jsxs("div", { className: `${blockName}__current-date`, children: [year, " \u5E74 ", month + 1, " \u6708"] })) : (_jsxs("div", { className: blockName + '__control-section', children: [_jsx("div", { className: blockName + '__control-section-cell', children: _jsx(Select, { appearance: "button", size: "auto", value: `${year}`, options: yearOptions, onChange: handleYear }) }), _jsx("div", { className: blockName + '__control-section-cell', children: _jsx(Select, { appearance: "button", size: "auto", value: `${month}`, options: monthOptions, onChange: (m) => handleChange(null, m) }) })] })) }) }));
+};

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

@@ -0,0 +1,3 @@
+import { WdClendar } from './wd-calendar';
+export { WdClendar, type WdClendarProps } from './wd-calendar';
+export default WdClendar;

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

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

package/dist/web/components/wd-calendar/style.d.ts

@@ -0,0 +1 @@
+import '../calendar/index.css';

package/dist/web/components/wd-calendar/style.js

@@ -0,0 +1 @@
+import '../calendar/index.css';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-calendar';
+import './style';
+/**
+ * 日历标准化
+ */
+export declare const WdClendar: React.ForwardRefExoticComponent<WdClendarProps & React.RefAttributes<any>>;
+export interface WdClendarProps extends CommonPropsType, DataType {
+}

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, forwardRef, useImperativeHandle, useCallback, } from 'react';
+import { usePlatform } from '../../utils/platform';
+import { setRefProp } from '../../utils/tool';
+import classNames from '../../utils/classnames';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import { convertValueToDateItem, getStartMoment, getYMD, WEEKS, convertMethodParam, } from '../../utils/hooks/useFormLegacy';
+import { MonthSelect } from './MonthSelect';
+import { convertWeeks, getConfigDataObj, blockName } from './weeks';
+import './style';
+/**
+ * 日历标准化
+ */
+export const WdClendar = forwardRef(function WdClendar(props, ref) {
+    const { initVisible = true, configData, events, id, className, style, } = props;
+    const valueStamp = useMemo(() => { var _a, _b; return (_b = (_a = getStartMoment('day', props.value)) === null || _a === void 0 ? void 0 : _a.valueOf()) !== null && _b !== void 0 ? _b : null; }, [props.value]);
+    const monthStamp = useMemo(() => { var _a, _b; return (_b = (_a = getStartMoment('month', props.initMonth)) === null || _a === void 0 ? void 0 : _a.valueOf()) !== null && _b !== void 0 ? _b : null; }, [props.initMonth]);
+    const [value, setValue] = useSyncValue(valueStamp);
+    const [monthValue, setInitMonth] = useSyncValue(monthStamp);
+    const platform = usePlatform();
+    const dateItem = useMemo(() => (value ? convertValueToDateItem(value) : {}), [value]);
+    const yearMonthItem = useMemo(() => convertValueToDateItem(monthValue), [monthValue]);
+    const cls = classNames(blockName, 'weda-ui', `${blockName}-${platform}`, className);
+    const { year: monthYear, month: monthMonth } = yearMonthItem;
+    const configDataObj = useMemo(() => getConfigDataObj(configData), [configData]);
+    const weeks = useMemo(() => convertWeeks(monthYear, monthMonth, configDataObj), [monthYear, monthMonth, configDataObj]);
+    // 含转时间戳逻辑
+    const setValueMethod = useCallback((v) => {
+        var _a;
+        const value = convertMethodParam(v);
+        const valueStamp = (_a = getStartMoment('day', value, false)) === null || _a === void 0 ? void 0 : _a.valueOf();
+        setValue(valueStamp);
+    }, [setValue]);
+    // 含转时间戳逻辑
+    const setInitMonthMethod = useCallback((v) => {
+        var _a;
+        const value = convertMethodParam(v);
+        const valueStamp = (_a = getStartMoment('month', value)) === null || _a === void 0 ? void 0 : _a.valueOf();
+        setInitMonth(valueStamp);
+    }, [setInitMonth]);
+    useImperativeHandle(ref, () => ({
+        setValue: setValueMethod,
+        setInitMonth: setInitMonthMethod,
+        configData,
+        initMonth: monthValue,
+        initVisible,
+        value,
+    }), [
+        setValueMethod,
+        setInitMonthMethod,
+        configData,
+        monthValue,
+        initVisible,
+        value,
+    ]);
+    // 选中日期
+    const handleChange = (item) => {
+        var _a, _b;
+        const { year, month, day, disabled, isPre, isNext } = item;
+        if (disabled)
+            return;
+        const v = new Date(year, month, day).valueOf();
+        const value = (_a = getStartMoment('day', v, false)) === null || _a === void 0 ? void 0 : _a.valueOf();
+        setRefProp(ref, 'value', value);
+        setValue(value);
+        events === null || events === void 0 ? void 0 : events.change({ value });
+        if (isPre || isNext) {
+            const monthValue = (_b = getStartMoment('month', v)) === null || _b === void 0 ? void 0 : _b.valueOf();
+            handleSelectMonth(monthValue);
+        }
+    };
+    // 切换年月
+    const handleSelectMonth = (v) => {
+        var _a;
+        setRefProp(ref, 'initMonth', v);
+        setInitMonth(v);
+        (_a = events.changeMonth) === null || _a === void 0 ? void 0 : _a.call(events, { value: v });
+    };
+    return (_jsxs("div", { id: id, className: cls, style: style, children: [_jsx(MonthSelect, { value: monthValue, onChange: handleSelectMonth, readOnly: !initVisible }), _jsx("div", { className: blockName + '__panel', children: _jsxs("table", { className: blockName + '__table', children: [_jsx("thead", { className: blockName + '__table-head', children: _jsx("tr", { className: blockName + '__table-head-row', children: WEEKS.map((d) => (_jsx("th", { className: blockName + '__table-head-cell', children: d }, d))) }) }), _jsx("tbody", { className: blockName + '__table-body', children: weeks.map((week, rowIndex) => (_jsx("tr", { className: blockName + '__table-body-row', children: week.map((item, cellIndex) => {
+                                    const isChecked = getYMD(item) === getYMD(dateItem);
+                                    const cellCls = classNames(`${blockName}__table-body-cell`, {
+                                        'is-checked': isChecked,
+                                        'is-disabled': item.disabled,
+                                        'is-invalid': !isChecked && (item.isNext || item.isPre),
+                                    });
+                                    return (_jsx("td", { className: cellCls, onClick: () => handleChange(item), children: _jsxs("div", { className: blockName + '__table-body-cell-value', children: [item.day, _jsx("div", { className: `${blockName}__table-body-cell-bg` }), item.marked && (_jsx("div", { style: { backgroundColor: `${item.marked}` }, className: blockName + '__table-body-cell-marked' }))] }) }, cellIndex));
+                                }) }, rowIndex))) })] }) })] }));
+});

package/dist/web/components/wd-calendar/weeks.d.ts

@@ -0,0 +1,23 @@
+type IconfigData = {
+    matchDate?: string;
+    disabled?: string | boolean;
+    marked?: string;
+    YMD?: string;
+};
+interface IconfigDataObj {
+    [key: string]: IconfigData;
+}
+export declare const blockName = "weda-calendar";
+export declare const getConfigDataObj: (configData?: IconfigData[]) => IconfigDataObj;
+export declare const convertWeeks: (year: any, month: any, configDataObj?: IconfigDataObj) => import("../../utils/hooks/useFormLegacy").IWeekItem[][] | {
+    matchDate?: string;
+    disabled?: string | boolean;
+    marked?: string | boolean;
+    YMD?: string;
+    day: any;
+    year: any;
+    month: any;
+    isPre?: boolean;
+    isNext?: boolean;
+}[][];
+export {};