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

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

@@ -0,0 +1,34 @@
+import { convertValueToDateItem, getStartMoment, convertYearMonthToWeeks, getYMD, } from '../../utils/hooks/useFormLegacy';
+export const blockName = 'weda-calendar'; // 类名前缀
+// 将配置数组转成配置对象格式，key为 年-月-日
+export const getConfigDataObj = (configData) => {
+    if (!Array.isArray(configData))
+        return;
+    const obj = {};
+    configData.forEach((item) => {
+        if (Object.prototype.toString.call(item) === '[object Object]') {
+            const disabled = [true, 'true'].includes(item.disabled) ? true : false;
+            const value = getStartMoment('day', item.matchDate, false);
+            const dateItem = value ? convertValueToDateItem(value) : {};
+            const YMD = getYMD(dateItem);
+            obj[YMD] = { ...item, disabled };
+        }
+    });
+    return obj;
+};
+// 年月转星期
+export const convertWeeks = (year, month, configDataObj) => {
+    const weeks = convertYearMonthToWeeks(year, month, null, {
+        isPreNext: true,
+        isDynamic: true,
+    });
+    if (!configDataObj || Object.keys(configDataObj).length === 0)
+        return weeks;
+    return weeks.map((row) => {
+        return row.map((item) => {
+            const YMD = getYMD(item);
+            const config = configDataObj[YMD];
+            return { ...item, ...config };
+        });
+    });
+};

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

@@ -0,0 +1,3 @@
+import { WdCanvas } from './wd-canvas';
+export { WdCanvas, type WdCanvasProps } from './wd-canvas';
+export default WdCanvas;

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-canvas';
+export declare const WdCanvas: React.ForwardRefExoticComponent<WdCanvasProps & React.RefAttributes<unknown>>;
+export interface WdCanvasProps extends CommonPropsType, DataType {
+}

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

@@ -0,0 +1,323 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useEffect, useState, useCallback, useRef, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { errorHandler } from '../../utils/error';
+import debounce from '../../utils/debounce';
+import { useDeepCompareEffect } from '@react-hookz/web';
+const LONGPRESS_TIME = 500; // 长按事件触发定时，ms
+const CLICK_TIME = 250; // 点击事件触发定时，ms
+// canvas默认宽高
+const CANVAS_DEFAULT = {
+    width: 300,
+    height: 150,
+};
+/**
+ * 兼容小程序旧版的2D画布函数
+ * @param ctx
+ * @returns
+ */
+const generateCtx2D = (ctx) => {
+    if (!ctx)
+        return ctx;
+    const setLineDash = ctx.setLineDash.bind(ctx);
+    ctx.setFillStyle = function (val) {
+        ctx.fillStyle = val;
+    };
+    ctx.setFontSize = function (val) {
+        ctx.font = `${val}px`;
+    };
+    ctx.setGlobalAlpha = function (val) {
+        ctx.globalAlpha = val;
+    };
+    ctx.setLineCap = function (val) {
+        ctx.lineCap = val;
+    };
+    ctx.setLineDash = function (pattern, offset) {
+        setLineDash(pattern);
+        ctx.lineDashOffset = offset;
+    };
+    ctx.setLineJoin = function (val) {
+        ctx.lineJoin = val;
+    };
+    ctx.setLineWidth = function (val) {
+        ctx.lineWidth = val;
+    };
+    ctx.setMiterLimit = function (val) {
+        ctx.miterLimit = val;
+    };
+    ctx.setShadow = function (offsetX, offsetY, blur, color) {
+        ctx.shadowOffsetX = offsetX;
+        ctx.shadowOffsetY = offsetY;
+        ctx.shadowBlur = blur;
+        ctx.shadowColor = color;
+    };
+    ctx.setStrokeStyle = function (val) {
+        ctx.strokeStyle = val;
+    };
+    ctx.setTextAlign = function (val) {
+        ctx.textAlign = val;
+    };
+    ctx.setTextBaseline = function (val) {
+        ctx.textBaseline = val;
+    };
+    ctx.draw = () => { };
+    return ctx;
+};
+const generateCtxWebgl = (ctx) => {
+    return ctx;
+};
+export const WdCanvas = forwardRef(function WdCanvas(props, ref) {
+    var _a;
+    const { className = '', style, id } = props;
+    const platform = usePlatform();
+    // canvas实例
+    const [canvasInstance, setCanvasInstance] = useState(null);
+    // canvas上下文
+    const [canvasCtx, setCanvasCtx] = useState(null);
+    // 长按事件触发定时器
+    const longTapTimer = useRef(null);
+    // 是否已经出发长按事件，如果触发则pc端不触发点击事件
+    const hasEmitLongTap = useRef(false);
+    // 点击事件触发定时器
+    const clickTimer = useRef(null);
+    // canvas ready timer
+    const readyTimer = useRef(null);
+    // canvas的实际宽高
+    const [canvasStyle, setCanvasStyle] = useState(CANVAS_DEFAULT);
+    // 样式
+    const { classPrefix } = useConfig();
+    // 响应式css api
+    const classes = {
+        [`${classPrefix}-canvas`]: true,
+        [`${classPrefix}-${platform}-canvas`]: true,
+    };
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            canvasInstance,
+            canvasCtx,
+            type: props.type,
+            disableScroll: props.disableScroll,
+            code: props.code,
+        };
+    }, [canvasInstance, canvasCtx, props.type, props.disableScroll, props.code]);
+    /**
+     * 处理h5和pc端端长按事件
+     */
+    const dealLongTap = useCallback((e) => {
+        (longTapTimer === null || longTapTimer === void 0 ? void 0 : longTapTimer.current) && clearTimeout(longTapTimer.current);
+        hasEmitLongTap.current = false;
+        // eslint-disable-next-line rulesdir/no-timer
+        longTapTimer.current = setTimeout(() => {
+            var _a, _b;
+            hasEmitLongTap.current = true;
+            Object.defineProperty(e, 'type', {
+                writable: false,
+                value: 'longtap',
+            });
+            (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.longtap) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+        }, LONGPRESS_TIME);
+    }, [longTapTimer, props.events]);
+    /**
+     * pc端点击事件
+     */
+    const click = useCallback((e) => {
+        // 延迟触发click，因为dblclick事件触发同时会触发click
+        (clickTimer === null || clickTimer === void 0 ? void 0 : clickTimer.current) && clearTimeout(clickTimer.current);
+        // eslint-disable-next-line rulesdir/no-timer
+        clickTimer.current = setTimeout(() => {
+            var _a, _b;
+            if (hasEmitLongTap) {
+                hasEmitLongTap.current = false;
+                return;
+            }
+            (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+        }, CLICK_TIME);
+    }, [clickTimer, hasEmitLongTap, props.events]);
+    /**
+     * pc端双击事件
+     */
+    const dblclick = useCallback((e) => {
+        var _a, _b;
+        (clickTimer === null || clickTimer === void 0 ? void 0 : clickTimer.current) && clearTimeout(clickTimer.current);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.dblclick) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [clickTimer, props.events]);
+    /**
+     * 多端异常事件
+     */
+    const error = useCallback((e) => {
+        var _a, _b;
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [props.events]);
+    /**
+     * 移动端触摸开始事件
+     */
+    const touchStart = useCallback((e) => {
+        var _a, _b;
+        dealLongTap(e);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.touchstart) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [dealLongTap, props.events]);
+    /**
+     * 移动端触摸结束事件
+     */
+    const touchEnd = useCallback((e) => {
+        var _a, _b;
+        (longTapTimer === null || longTapTimer === void 0 ? void 0 : longTapTimer.current) && clearTimeout(longTapTimer.current);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.touchend) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [longTapTimer, props.events]);
+    /**
+     * 移动端触摸移动事件
+     */
+    const touchMove = useCallback((e) => {
+        var _a, _b;
+        (longTapTimer === null || longTapTimer === void 0 ? void 0 : longTapTimer.current) && clearTimeout(longTapTimer.current);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.touchmove) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [longTapTimer, props.events]);
+    /**
+     * pc端鼠标按下事件
+     */
+    const mouseDown = useCallback((e) => {
+        var _a, _b;
+        dealLongTap(e);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.mousedown) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [dealLongTap, props.events]);
+    /**
+     * pc端鼠标抬起事件
+     */
+    const mouseUp = useCallback((e) => {
+        var _a, _b;
+        (longTapTimer === null || longTapTimer === void 0 ? void 0 : longTapTimer.current) && clearTimeout(longTapTimer.current);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.mouseup) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [longTapTimer, props.events]);
+    /**
+     * pc端鼠标移动事件
+     */
+    const mouseMove = useCallback((e) => {
+        var _a, _b;
+        (longTapTimer === null || longTapTimer === void 0 ? void 0 : longTapTimer.current) && clearTimeout(longTapTimer.current);
+        (_b = (_a = props.events) === null || _a === void 0 ? void 0 : _a.mousemove) === null || _b === void 0 ? void 0 : _b.call(_a, { e });
+    }, [longTapTimer, props.events]);
+    /**
+     * 处理事件监听
+     */
+    const dealEventListener = useCallback((canvas, type = 'add') => {
+        canvas = canvas || canvasInstance;
+        if (!canvas)
+            return;
+        const func = {
+            add: canvas.addEventListener.bind(canvas),
+            remove: canvas.removeEventListener.bind(canvas),
+        }[type];
+        if (!func)
+            return;
+        func('error', error);
+        if (platform === 'h5') {
+            func('touchstart', touchStart);
+            func('touchend', touchEnd);
+            func('touchmove', touchMove);
+        }
+        else {
+            func('click', click);
+            func('dblclick', dblclick);
+            func('mousedown', mouseDown);
+            func('mouseup', mouseUp);
+            func('mousemove', mouseMove);
+        }
+    }, [
+        canvasInstance,
+        click,
+        dblclick,
+        error,
+        mouseDown,
+        mouseMove,
+        mouseUp,
+        platform,
+        touchEnd,
+        touchMove,
+        touchStart,
+    ]);
+    /**
+     * 根据初始化代码绘制canvas
+     */
+    const canvasInit = debounce(async (init, canvasCtx, canvasInstance, canvasStyle) => {
+        var _a;
+        try {
+            // 执行初始化函数前恢复默认宽高，清空画布
+            canvasInstance.width = canvasStyle.width;
+            canvasInstance.height = canvasStyle.height;
+            await (init === null || init === void 0 ? void 0 : init(canvasCtx, canvasInstance));
+            (_a = props.events) === null || _a === void 0 ? void 0 : _a.canvasReady({ canvasInstance, canvasCtx });
+        }
+        catch (error) {
+            errorHandler({
+                code: 'CanvasInitError',
+                error,
+                id: props.id,
+            });
+        }
+    }, LONGPRESS_TIME);
+    /**
+     * 初始化canvas基本信息
+     */
+    useDeepCompareEffect(() => {
+        var _a, _b;
+        dealEventListener(null, 'remove');
+        const c = document.getElementById(props.id);
+        if (c) {
+            dealEventListener(c);
+            c.width =
+                typeof c.offsetWidth !== 'number'
+                    ? CANVAS_DEFAULT.width
+                    : c.offsetWidth;
+            c.height =
+                typeof c.offsetHeight !== 'number'
+                    ? CANVAS_DEFAULT.height
+                    : c.offsetHeight;
+            c.getCanvasRectInfo = () => c.getBoundingClientRect();
+            // 缓存配置的宽高
+            setCanvasStyle({ width: c.width, height: c.height });
+            const type = props.type || '2d';
+            const ctx = c.getContext(type);
+            const ctxRes = ((_b = (_a = {
+                '2d': generateCtx2D,
+                webgl: generateCtxWebgl,
+            })[type]) === null || _b === void 0 ? void 0 : _b.call(_a, ctx)) || {};
+            setCanvasInstance(c);
+            setCanvasCtx(ctxRes);
+        }
+        else {
+            setCanvasInstance(null);
+            setCanvasCtx(null);
+        }
+    }, [props.type, props.id, props.style, setCanvasInstance, setCanvasCtx]);
+    /**
+     * 相关属性变化后重新执行初始化函数
+     */
+    useEffect(() => {
+        var _a, _b;
+        readyTimer.current && clearTimeout(readyTimer.current);
+        if (!canvasCtx || !canvasInstance)
+            return;
+        // 如果初始化代码不是函数，则直接执行canvasReady
+        if (typeof ((_a = props.code) === null || _a === void 0 ? void 0 : _a.init) !== 'function') {
+            // eslint-disable-next-line rulesdir/no-timer
+            readyTimer.current = setTimeout(() => {
+                var _a;
+                (_a = props.events) === null || _a === void 0 ? void 0 : _a.canvasReady({ canvasInstance, canvasCtx });
+            }, LONGPRESS_TIME);
+            return;
+        }
+        // 等待canvas准备好再触发canvasReady
+        canvasInit((_b = props.code) === null || _b === void 0 ? void 0 : _b.init, canvasCtx, canvasInstance, canvasStyle);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [canvasInstance, canvasCtx, canvasStyle, props.events, (_a = props.code) === null || _a === void 0 ? void 0 : _a.init]);
+    useEffect(() => {
+        return () => {
+            dealEventListener(canvasInstance, 'remove');
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsxs(_Fragment, { children: [props.type === '2d' && (_jsx("canvas", { className: classNames(classes, className), id: id, style: style })), props.type !== '2d' && (_jsx("canvas", { className: classNames(classes, className), id: id, style: style }))] }));
+});

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

@@ -0,0 +1,3 @@
+import { WdCard } from './wd-card';
+export { WdCard, type WdCardProps } from './wd-card';
+export default WdCard;

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-card';
+export interface WdCardProps extends CommonPropsType, DataType {
+}
+export declare const WdCard: React.ForwardRefExoticComponent<WdCardProps & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useState, } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+export const WdCard = forwardRef(function WdCard({ showHeader = true, showContent = true, showFooter = false, showDivider = true, headerSlot, contentSlot, footerSlot, events, style, className, }, ref) {
+    // 样式
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const [contentState, setContentState] = useState(showContent ? 'show' : 'hide');
+    /**
+     * 控制内容面板显示与隐藏，只针对于折叠模式下有效
+     */
+    const dealContentState = useCallback(({ state } = {}) => {
+        var _a, _b;
+        const stateInner = state || (contentState === 'show' ? 'hide' : 'show');
+        if (stateInner === contentState)
+            return;
+        setContentState(stateInner);
+        if (stateInner === 'show') {
+            (_a = events === null || events === void 0 ? void 0 : events.contentShow) === null || _a === void 0 ? void 0 : _a.call(events);
+        }
+        else {
+            (_b = events === null || events === void 0 ? void 0 : events.contentHide) === null || _b === void 0 ? void 0 : _b.call(events);
+        }
+    }, [contentState, events]);
+    useImperativeHandle(ref, () => {
+        return {
+            showHeader,
+            showContent,
+            showFooter,
+            showDivider,
+            contentState,
+            dealContentState,
+        };
+    }, [
+        showHeader,
+        showContent,
+        showFooter,
+        showDivider,
+        contentState,
+        dealContentState,
+    ]);
+    return (_jsxs("div", { className: `${isH5 ? `${classPrefix}-h5-card-root` : `${classPrefix}-pc-card-root`} ${classPrefix}-card-root ${showDivider ? classPrefix + '-card--bordered' : ''} ${contentState !== 'show' ? classPrefix + '-card--collapse-active' : ''} ${className}`, "data-testid": "wd-card-test", onClick: (e) => events.tap({}, { originEvent: e }), style: style, children: [showHeader ? (_jsx("div", { className: `${classPrefix}-card__header`, "data-testid": "wd-card-header-test", children: headerSlot })) : null, _jsx("div", { className: `${classPrefix}-card__body ${!showFooter ? 'is-footer' : ''} ${contentState !== 'show' ? 'hide' : ''}`, "data-testid": "wd-card-body-test", children: contentSlot }), showFooter ? (_jsx("div", { className: `${classPrefix}-card__footer`, "data-testid": "wd-card-footer-test", children: footerSlot })) : null] }));
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { WdCascaderProps } from './interface';
+/**
+ * 级联选择-标准化
+ */
+export declare const WdCascader: React.ForwardRefExoticComponent<WdCascaderProps & React.RefAttributes<any>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CascaderH5(props: any): JSX.Element;

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { Modal } from '../wd-date/elements/Modal.h5';
+import { noop } from '../../utils/constant';
+import { WdTabs } from '../wd-tabs';
+import { WdIcon } from '../wd-icon';
+import classNames from '../../utils/classnames';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { getSelectedOptions, transformTabData, setSelectedValue, initTabData, initListOptions, } from './utils';
+const placeholderItem = {
+    label: '请选择',
+    value: '__placeholderItem',
+    selected: true,
+};
+const SingleCascaderView = ({ tabData, listOptions, style, handleTabClick, handleListOptionsClick, }) => {
+    const { classPrefix } = useConfig();
+    return (_jsxs(_Fragment, { children: [_jsx(WdTabs, { isMultipleSlot: false, selectedIndex: 0, tabsDatas: tabData, events: {
+                    change: ({ value }) => {
+                        handleTabClick(value);
+                    },
+                    tap: () => { },
+                }, direction: 'horizontal' }), _jsx("ul", { className: `${classPrefix}-cascader-h5-view-list`, style: style, children: listOptions.map((i) => {
+                    return (_jsxs("li", { className: classNames({
+                            [`${classPrefix}-cascader-h5-view-list__menu`]: true,
+                            'is-selected': i.selected,
+                            'is-disabled': i.disabled,
+                        }), onClick: () => {
+                            handleListOptionsClick(i);
+                        }, children: [_jsx("span", { className: `${classPrefix}-cascader-h5-view-list__menu__text`, children: i === null || i === void 0 ? void 0 : i.label }), i.selected && _jsx(WdIcon, { name: 'td:check', size: 'md' })] }, i.value));
+                }) })] }));
+};
+export function CascaderH5(props) {
+    const { placeholder, inputId, name, disabled, value: _value, onChange = noop, data: _data, readValue, searchable = false, } = props;
+    const [visible, setVisible] = useState(false);
+    const { classPrefix } = useConfig();
+    const inputCls = `${classPrefix}-form-select_input`;
+    const focusRef = useRef();
+    const [inputFocus, setInputFocus] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const data = useMemo(() => {
+        return transformTabData(_data);
+    }, [_data]);
+    const [tabData, setTabData] = useState(initTabData(data, _value, placeholderItem));
+    const [listOptions, setListOptions] = useState(initListOptions(data, _value));
+    const pickerValueRef = useRef({ data, value: _value }); // 弹窗中临时值
+    const handleOk = () => {
+        const value = tabData
+            .map((item) => item.value)
+            .filter((i) => i !== '__placeholderItem');
+        const options = value.map((i) => getSelectedOptions(_data, i));
+        onChange(value, { options });
+        setVisible(false);
+    };
+    const handleClick = () => {
+        if (disabled)
+            return;
+        setVisible(true);
+    };
+    // 搜索框
+    // TODO: 暂时不支持搜索
+    const renderSearch = () => {
+        return (_jsxs("div", { style: { margin: inputFocus ? '16px 16px 8px 16px' : '8px 16px' }, className: `${classPrefix}-custom-search
+  ${inputFocus ? 'is-focused' : ''}`, children: [_jsxs("div", { className: `${classPrefix}-custom-search-box `, "data-testid": `${classPrefix}-custom-search-box`, onClick: () => {
+                        setInputFocus(true);
+                    }, children: [inputFocus ? (_jsx("input", { className: `${classPrefix}-input`, ref: focusRef, value: searchValue, autoFocus: true, onChange: (e) => {
+                                const tValue = e.target.value.trim();
+                                setSearchValue(tValue);
+                            } })) : (
+                        // 此处主要为了兼容 iOS
+                        _jsx("div", { className: `${classPrefix}-input` })), _jsxs("div", { className: `${classPrefix}-custom-search-box__label`, children: [_jsx("span", { className: `${classPrefix}-custom-search-box__search-icon` }), _jsx("span", { className: `${classPrefix}-custom-search-box__search-placeholder`, children: "\u641C\u7D22" })] }), inputFocus && searchValue !== '' && (_jsx("span", { className: `${classPrefix}-custom-search-box__dismiss-icon`, onClick: () => {
+                                setSearchValue('');
+                            } }))] }), _jsx("button", { className: `${classPrefix}-custom-search__btn-cancle`, onClick: () => {
+                        setInputFocus(false);
+                        setSearchValue('');
+                    }, children: "\u53D6\u6D88" })] }));
+    };
+    // tab 展示值
+    const updateTabData = (newTabData, activeItem) => {
+        var _a, _b;
+        let _activeItem = activeItem;
+        // 当前选中值是否存在子选项
+        const hasChildItem = (_b = (_a = newTabData[newTabData.length - 1]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length;
+        let tabData = [...newTabData];
+        if (hasChildItem) {
+            _activeItem = placeholderItem;
+            tabData = [...tabData, placeholderItem];
+        }
+        const _tabData = setSelectedValue(tabData, _activeItem.value);
+        setTabData(_tabData);
+    };
+    // 点击列表选项
+    const handleListOptionsClick = (item) => {
+        if (item.disabled)
+            return;
+        if (item.children) {
+            setListOptions([...item.children]);
+        }
+        else {
+            const _listOptions = setSelectedValue(listOptions, item.value);
+            setListOptions(_listOptions);
+        }
+        // 更新tab数据
+        const newTabData = [...tabData.filter((i) => (i === null || i === void 0 ? void 0 : i.level) < item.level), item];
+        updateTabData(newTabData, item);
+    };
+    // 点击tab项，更新列表选项
+    const handleTabClick = (value) => {
+        var _a;
+        const selectedIndex = tabData.findIndex((i) => i.value === value);
+        const selectedItem = tabData[selectedIndex];
+        updateTabData(tabData, selectedItem);
+        let listOptions = selectedItem.level === 0
+            ? data
+            : (_a = tabData.find((i) => i.level === selectedIndex - 1)) === null || _a === void 0 ? void 0 : _a.children;
+        listOptions = setSelectedValue(listOptions, value);
+        setListOptions(listOptions);
+    };
+    useEffect(() => {
+        if (!isObjectEqual(pickerValueRef.current.value, _value) ||
+            !isObjectEqual(pickerValueRef.current.data, data)) {
+            pickerValueRef.current = { value: _value, data };
+            setTabData(initTabData(data, _value, placeholderItem));
+            setListOptions(initListOptions(data, _value));
+        }
+    }, [_value, data]);
+    return (_jsxs(_Fragment, { children: [_jsx("input", { id: inputId, className: inputCls, type: "text", name: name, placeholder: placeholder, autoComplete: "off", disabled: disabled, readOnly: true, value: readValue, onClick: handleClick }), _jsxs(Modal, { visible: visible, onClose: () => {
+                    setVisible(false);
+                    setTabData(initTabData(data, _value, placeholderItem));
+                    setListOptions(initListOptions(data, _value));
+                }, onOk: handleOk, header: inputFocus, className: `${classPrefix}-cascader-modal`, children: [searchable && renderSearch(), _jsx("div", { className: `${classPrefix}-custom-view-content`, children: _jsx(SingleCascaderView, { tabData: tabData, listOptions: listOptions, style: inputFocus
+                                ? { height: 'calc(100vh - 196px)' }
+                                : { height: '260px' }, handleTabClick: handleTabClick, handleListOptionsClick: handleListOptionsClick }) })] })] }));
+}