@cloudbase/weda-ui 3.4.16 → 3.5.1

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable max-lines */
+import { forwardRef, useImperativeHandle, useEffect, useState, useCallback, } from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+let timer = null;
+const MAKS_SHOW_TIME = 200;
+const ESC_KEYBORD_NUM = 27;
+export const WdModal = forwardRef(function WdModal(props, ref) {
+    const { className = '', style, id } = props;
+    const platform = usePlatform();
+    // 弹窗主体内容显示控制
+    const [isBdShow, setIsBdShow] = useState(true);
+    // 弹窗遮罩层显示控制
+    const [isMaskShow, setIsMaskShow] = useState(false);
+    // 弹窗遮罩层预显示控制，为了动画
+    const [maskPreToShow, setMaskPreToShow] = useState(false);
+    const [positionInner, setPositionInner] = useState(platform === 'pc' ? 'center' : props.position);
+    const [openInfo, setOpenInfo] = useState(null);
+    const [closeInfo, setCloseInfo] = useState(null);
+    // 样式
+    const { classPrefix } = useConfig();
+    // 响应式css api
+    const classes = {
+        [`${classPrefix}-modal`]: true,
+        [`${classPrefix}-modal-center`]: positionInner === 'center',
+        [`${classPrefix}-${platform}-modal`]: true,
+    };
+    useEffect(() => {
+        dealShow(props.defaultShow);
+    }, [props.defaultShow]);
+    useEffect(() => {
+        setPositionInner(platform === 'pc' ? 'center' : props.position);
+    }, [platform, props.position]);
+    /**
+     * 控制弹窗打开/关闭
+     * @param {Boolean} isOpen
+     */
+    const dealShow = (isOpen) => {
+        setIsBdShow(isOpen);
+        setIsMaskShow(!isOpen);
+        if (isOpen) {
+            setMaskPreToShow(true);
+        }
+        else {
+            // 延迟控制遮罩层消失，为了动画效果
+            timer && clearTimeout(timer);
+            // eslint-disable-next-line rulesdir/no-timer
+            timer = setTimeout(() => {
+                setMaskPreToShow(false);
+            }, MAKS_SHOW_TIME);
+        }
+    };
+    /**
+     * 关闭弹窗
+     */
+    const close = useCallback((params) => {
+        var _a;
+        dealShow(false);
+        setCloseInfo((params === null || params === void 0 ? void 0 : params.info) || params);
+        (_a = props.events) === null || _a === void 0 ? void 0 : _a.close(params);
+    }, [props.events]);
+    /**
+     * 开启弹窗
+     */
+    const open = useCallback((params) => {
+        var _a;
+        dealShow(true);
+        setOpenInfo((params === null || params === void 0 ? void 0 : params.info) || params);
+        (_a = props.events) === null || _a === void 0 ? void 0 : _a.open(params);
+    }, [props.events]);
+    /**
+     * 按下ESC判断是否关闭弹窗
+     */
+    const escKeyDown = useCallback((e) => {
+        if (e.keyCode !== ESC_KEYBORD_NUM)
+            return;
+        close();
+    }, [close]);
+    useEffect(() => {
+        if (platform === 'pc' && props.closeType.includes('esc')) {
+            window === null || window === void 0 ? void 0 : window.removeEventListener('keydown', escKeyDown);
+            window === null || window === void 0 ? void 0 : window.addEventListener('keydown', escKeyDown);
+        }
+        return () => {
+            window === null || window === void 0 ? void 0 : window.removeEventListener('keydown', escKeyDown);
+        };
+    }, [escKeyDown, platform, props.closeType]);
+    // Widget API，挂载组件只读属性和组件方法
+    useImperativeHandle(ref, () => {
+        return {
+            close,
+            open,
+            modalState: isBdShow ? 'open' : 'close',
+            openInfo,
+            closeInfo,
+        };
+    }, [close, open, isBdShow, openInfo, closeInfo]);
+    const renderNode = () => {
+        const modalMaskClasses = {
+            [`${classPrefix}-modal-mask`]: true,
+            [`${classPrefix}-modal-mask__fadein`]: true,
+            [`${classPrefix}-modal-mask__fadeout`]: isMaskShow,
+            [`${classPrefix}-modal-mask__hide`]: !props.defaultMaskShow,
+        };
+        const modalBdClasses = {
+            [`${classPrefix}-modal-bd`]: true,
+            [`${classPrefix}-modal-bd__toggle`]: isBdShow,
+            [`${classPrefix}-modal-bd__box`]: !props.defaultMaskShow && positionInner === 'center',
+        };
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames(modalMaskClasses), onClick: () => {
+                        if (props.closeType.includes('mask')) {
+                            close();
+                        }
+                    } }), _jsx("div", { className: `${classPrefix}-modal-content`, children: _jsxs("div", { style: {
+                            width: {
+                                center_h5: 'calc(100% - 4.57rem)',
+                                bottom_h5: '100%',
+                                center_pc: !(style === null || style === void 0 ? void 0 : style.width) ? '680px' : 'auto',
+                            }[`${positionInner}_${platform}`],
+                            ...style,
+                        }, className: classNames(modalBdClasses), children: [_jsx("div", { className: `${classPrefix}-modal-bd__hd`, children: props.headerSlot }), _jsx("div", { className: `${classPrefix}-modal-bd__main`, children: props.contentSlot }), _jsx("div", { className: `${classPrefix}-modal-bd__ft`, children: props.footerSlot })] }) })] }));
+    };
+    return (_jsx("div", { id: id, className: classNames(classes, className), style: { display: (style === null || style === void 0 ? void 0 : style.display) || 'block' }, "data-testid": "wd-modal-test", children: maskPreToShow && renderNode() }));
+});

package/dist/web/components/wd-official-account/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import './style';
+export type PropsType = CommonPropsType;
+export default function WdOfficialAccount(props: PropsType): JSX.Element;

package/dist/web/components/wd-official-account/index.js

@@ -11,7 +11,7 @@ import { WdButton } from '../../components/wd-button';
 // @ts-ignore忽略ts交验
 // eslint-disable-next-line rulesdir/no-phantom-deps,import/no-unresolved
 import { autorun } from 'mobx';
-import './index.css';
+import './style';
 export default function WdOfficialAccount(props) {
     var _a, _b;
     const { className, id, style } = props;

package/dist/web/components/wd-official-account/style.d.ts

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

package/dist/web/components/wd-official-account/style.js

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

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

@@ -0,0 +1,3 @@
+import { WdRadio } from './wd-radio';
+export { WdRadio, type WdRadioProps } from './wd-radio';
+export default WdRadio;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-radio';
+export declare const WdRadio: ({ index, option, name, size, disabled, checkedItemValue, getChangeHandler, }: WdRadioProps) => JSX.Element;
+export interface WdRadioProps extends CommonPropsType, DataType {
+    option?: object;
+    index?: number;
+    checkedItemValue?: string;
+    getChangeHandler?: (val: any) => any;
+    disabled?: boolean;
+}

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import classNames from '../../utils/classnames';
 import { useConfig } from '../../utils/config-context';
 import getLocalCounter from '../../utils/getLocalCounter';
-export const WdRadio = ({ index, option, name, size, disabled, readOnly, checkedItemValue, getChangeHandler, }) => {
+export const WdRadio = ({ index, option, name, size, disabled, checkedItemValue, getChangeHandler, }) => {
     const { classPrefix } = useConfig();
     const { label, value: optionValue } = option;
     // 类名
@@ -26,5 +26,5 @@ export const WdRadio = ({ index, option, name, size, disabled, readOnly, checked
     const _id = `radio-${hashcode}-${index}`;
     const _name = `radio-${hashcode}-${name}`;
     const NUMBER_1 = 1;
-    return (_jsxs("label", { className: `${classPrefix}-radio-wrap ${classNames(classList)} ${`${checkedItemValue}` === `${optionValue}` ? 'is-checked' : ''} ${disabled || readOnly ? 'is-disabled' : ''} ${'radio' + (index + NUMBER_1)}`, onClick: getChangeHandler(optionValue), children: [_jsx("input", { className: `${classPrefix}-radio-input `, id: _id, name: _name, type: "radio", value: optionValue, disabled: disabled || readOnly, checked: `${checkedItemValue}` === `${optionValue}`, onChange: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }), _jsx("span", { className: `${classPrefix}-radio-inner ` }), label && _jsx("span", { className: `${classPrefix}-radio-label`, children: label })] }));
+    return (_jsxs("label", { className: `${classPrefix}-radio-wrap ${classNames(classList)} ${`${checkedItemValue}` === `${optionValue}` ? 'is-checked' : ''} ${disabled ? 'is-disabled' : ''} ${'radio' + (index + NUMBER_1)}`, onClick: getChangeHandler(optionValue), children: [_jsx("input", { className: `${classPrefix}-radio-input `, id: _id, name: _name, type: "radio", value: optionValue, disabled: disabled, checked: `${checkedItemValue}` === `${optionValue}`, onChange: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation() }), _jsx("span", { className: `${classPrefix}-radio-inner ` }), label && _jsx("span", { className: `${classPrefix}-radio-label`, children: label })] }));
 };

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

@@ -0,0 +1,3 @@
+import { WdRadioList } from './wd-radio-list';
+export { WdRadioList, type WdRadioListProps } from './wd-radio-list';
+export default WdRadioList;

package/dist/web/components/wd-radio-list/wd-radio-list.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-radio';
+export declare const WdRadioList: React.ForwardRefExoticComponent<WdRadioListProps & React.RefAttributes<any>>;
+export interface WdRadioListProps extends CommonPropsType, DataType {
+    onChange?: (val: any) => void;
+}

package/dist/web/components/wd-radio-list/wd-radio-list.js

@@ -12,6 +12,7 @@ import { useFormInputTrait } from '../form-input-hooks';
 import { callWedaApi } from '../../utils/tcb';
 import destr from 'destr';
 export const WdRadioList = React.forwardRef(function WdRadioList(props, inputRef) {
+    var _a;
     const { range, direction, events = emptyObject, format = '', enumName = '', label, } = props;
     const size = useSize(props);
     const [innerHandle, setInnerHandle] = React.useState({}); // hook里挂出的属性
@@ -65,8 +66,23 @@ export const WdRadioList = React.forwardRef(function WdRadioList(props, inputRef
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    React.useImperativeHandle(inputRef, () => ({
-        ...innerHandle,
+    React.useImperativeHandle(inputRef, () => {
+        var _a;
+        return ({
+            ...innerHandle,
+            name,
+            value,
+            label,
+            required,
+            visible,
+            disabled,
+            readOnly,
+            selectedLabel: (Array.isArray(options) &&
+                ((_a = options === null || options === void 0 ? void 0 : options.find((option) => `${option.value}` === `${value}`)) === null || _a === void 0 ? void 0 : _a.label)) ||
+                '',
+        });
+    }, [
+        innerHandle,
         name,
         value,
         label,
@@ -74,7 +90,8 @@ export const WdRadioList = React.forwardRef(function WdRadioList(props, inputRef
         visible,
         disabled,
         readOnly,
-    }), [innerHandle, name, value, label, required, visible, disabled, readOnly]);
+        options,
+    ]);
     const fetchData = async (param) => {
         var _a, _b, _c;
         const data = await callWedaApi({
@@ -98,7 +115,11 @@ export const WdRadioList = React.forwardRef(function WdRadioList(props, inputRef
         }
         return size;
     };
-    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-radio-group", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: defaultValue, disabled: disabled, classRoot: 'radio', size: labelSize(), layout: layout, children: _jsx("div", { className: classNames(classList), children: options === null || options === void 0 ? void 0 : options.map((Item, Index) => {
-                return (_createElement(WdRadio, { ...props, key: Index, index: Index, size: ['h5'].includes(platform) ? 'lg' : props === null || props === void 0 ? void 0 : props.size, option: Item, disabled: disabled, readOnly: readOnly, getChangeHandler: getChangeHandler, checkedItemValue: checkedItemValue }));
-            }) }) })));
+    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-radio-group", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: (readOnly &&
+            Array.isArray(options) &&
+            ((_a = options === null || options === void 0 ? void 0 : options.find((option) => `${option.value}` === `${value}`)) === null || _a === void 0 ? void 0 : _a.label)) ||
+            '-', disabled: disabled, readOnly: readOnly, classRoot: 'radio', size: labelSize(), layout: layout, children: _jsx("div", { className: classNames(classList), children: Array.isArray(options) &&
+                (options === null || options === void 0 ? void 0 : options.map((Item, Index) => {
+                    return (_createElement(WdRadio, { ...props, key: Index, index: Index, size: ['h5'].includes(platform) ? 'lg' : props === null || props === void 0 ? void 0 : props.size, option: Item, disabled: disabled, getChangeHandler: getChangeHandler, checkedItemValue: checkedItemValue }));
+                })) }) })));
 });

package/dist/web/components/wd-region-select/h5.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function SelectPickerH5({ isShow, close }: {
+    isShow?: boolean;
+    close: any;
+}): JSX.Element;

package/dist/web/components/wd-region-select/h5.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Portal } from '../common/portal';
+import { useConfig } from '../../utils/config-context';
+import { WdIcon } from '../index';
+// import StatusContent from '../statusContent';
+const mockOptionData = [
+    { label: '北京市', key: 0 },
+    { label: '天津市', key: 1 },
+    { label: '河北省', key: 2 },
+    { label: '陕西省', key: 3 },
+    { label: '山西省', key: 5 },
+];
+// const clickIndex = 1;
+export function SelectPickerH5({ isShow = true, close }) {
+    const [selectIndex, setSelectIndex] = useState(0);
+    const { classPrefix } = useConfig();
+    // 滑动监听参数
+    const optionRef = useRef();
+    return isShow ? (_jsx(Portal, { type: "div", children: _jsxs("div", { className: `${classPrefix}-custom-picker`, children: [_jsx("div", { className: `${classPrefix}-custom-backdrop`, onClick: () => {
+                        close();
+                    } }), _jsxs("div", { className: `${classPrefix}-custom-picker__inner`, children: [_jsxs("div", { className: `${classPrefix}-custom-picker__header`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__header-cancle` }), _jsx("div", { className: `${classPrefix}-custom-picker__header-title` }), _jsx("div", { className: `${classPrefix}-custom-picker__header-confirm`, children: _jsx(WdIcon, { name: "td:close", size: "md" }) })] }), _jsxs("div", { className: `${classPrefix}-custom-picker__body`, children: [_jsxs("div", { className: `${classPrefix}-custom-picker__region-box`, children: [_jsx("span", { className: `${classPrefix}-custom-picker__region-item`, children: "\u897F\u5B89\u5E02" }), _jsx("span", { className: `${classPrefix}-custom-picker__region-item`, children: "\u9AD8\u65B0\u533A" }), _jsx("span", { className: `${classPrefix}-custom-picker__region-item ${classPrefix}-custom-picker__region-select`, children: "\u8BF7\u9009\u62E9" })] }), _jsx("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--select`, ref: optionRef, children: _jsx("ul", { className: `${classPrefix}-custom-picker__column`, children: mockOptionData.map((item, index) => {
+                                            return (_jsx("li", { className: `${classPrefix}-custom-picker__column-item ${(item === null || item === void 0 ? void 0 : item.key) === selectIndex ? 'is-selected' : ''} `, onClick: () => {
+                                                    setSelectIndex(item === null || item === void 0 ? void 0 : item.key);
+                                                }, children: _jsx("p", { children: item.label }) }, index));
+                                        }) }) })] })] })] }) })) : null;
+}

package/dist/web/components/wd-region-select/index.d.ts

@@ -0,0 +1,3 @@
+import { WdRegion } from './wd-region';
+export { WdRegion, type WdSelectProps } from './wd-region';
+export default WdRegion;

package/dist/web/components/wd-region-select/index.js

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

package/dist/web/components/wd-region-select/wd-region.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+export declare const WdRegion: ({ options }: {
+    options: any;
+}) => JSX.Element;
+export interface WdSelectProps extends CommonPropsType {
+    defaultValue?: string;
+    size?: string;
+    options?: any;
+    layout?: string;
+}

package/dist/web/components/wd-region-select/wd-region.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { WdInputWrap, WdIcon } from '../index';
+import { WdFormItem } from '../wd-form-item';
+import { usePlatform } from '../../utils/platform';
+import { SelectPickerH5 } from './h5';
+import { Cascader, ConfigProvider } from 'tea-component';
+const FormItemMockData = {
+    classRoot: 'member',
+    labelVisible: true,
+    label: '地区选择',
+    testId: 'form-upload-file',
+    borderedPc: true,
+    borderedH5: true,
+    layout: 'horizontal',
+    // layout: 'vertical',
+};
+const mockData = [
+    {
+        label: '北京市',
+        value: 'bj',
+        children: [
+            { label: '朝阳区', value: 'cy' },
+            { label: '海淀区', value: 'hd' },
+        ],
+    },
+    {
+        label: '上海市',
+        value: 'sh',
+        children: [
+            { label: '徐汇区', value: 'xh' },
+            { label: '黄埔区', value: 'hp' },
+        ],
+    },
+    {
+        label: '广东省',
+        value: 'gd',
+        children: [
+            {
+                label: '深圳市',
+                value: 'sz',
+                children: [
+                    { label: '南山区', value: 'ns' },
+                    { label: '宝安区', value: 'ba' },
+                    { label: '福田区', value: 'ft', disabled: true },
+                ],
+            },
+        ],
+    },
+];
+export const WdRegion = ({ options }) => {
+    const { classPrefix } = useConfig();
+    const optionsData = options || mockData;
+    const compClassName = `${classPrefix}-form-region-wrap `;
+    const platform = usePlatform();
+    const isH5 = platform === 'h5'; // 响应式判定
+    const [visible, setVisible] = React.useState(false);
+    // 类名
+    const classList = [compClassName];
+    // switch (size) {
+    //   case 'sm':
+    //     classList.push(`size-height-sm size-width-sm size-font-sm `);
+    //     optionClassList.push(`size-width-sm `);
+    //     break;
+    //   case 'md':
+    //     classList.push(`size-height-md size-width-md size-font-md `);
+    //     optionClassList.push(`size-width-md `);
+    //     break;
+    //   case 'lg':
+    //     classList.push(`size-height-lg size-width-lg size-font-lg `);
+    //     optionClassList.push(`size-width-lg `);
+    //     break;
+    //   default:
+    //     classList.push(`size-height-md size-width-md size-font-md `);
+    //     classList.push(`size-width-md `);
+    // }
+    return (_jsxs(WdFormItem, { ...FormItemMockData, children: [_jsx(WdInputWrap, { className: classNames(...classList), 
+                // 移入改变after图标为【清空】icon即可<WdIcon name="td:close-circle-filled" />
+                after: _jsx(WdIcon, { name: "td:chevron-down" }), children: isH5 ? (_jsx("input", { type: "text", className: `${classPrefix}-form-region__input`, readOnly: true, placeholder: "\u8BF7\u9009\u62E9", value: '广东省 / 深圳市 / 南山区', onClick: () => {
+                        setVisible(true);
+                    } })) : (_jsx(ConfigProvider, { classPrefix: "wd", children: _jsx(Cascader, { clearable: true, type: "menu", data: optionsData, multiple: false }) })) }), _jsx(SelectPickerH5, { isShow: visible, close: () => {
+                    setVisible(false);
+                } })] }));
+};

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

@@ -0,0 +1,3 @@
+import { WdRetry } from './wd-retry';
+export { WdRetry, type WdRetryProps } from './wd-retry';
+export default WdRetry;

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+export declare const WdRetry: () => JSX.Element;
+export interface WdRetryProps extends CommonPropsType {
+    text?: string;
+}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig } from '../../utils/config-context';
+export const WdRetry = () => {
+    const { classPrefix } = useConfig();
+    return (_jsxs("div", { className: `${classPrefix}-retry ${classPrefix}-retry--center`, children: [_jsx("div", { className: `${classPrefix}-retry__text`, children: "\u52A0\u8F7D\u5931\u8D25" }), _jsx("div", { className: `${classPrefix}-retry__try`, children: "\u91CD\u8BD5" })] }));
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function SelectPickerH5({ isShow, close }: {
+    isShow?: boolean;
+    close: any;
+}): JSX.Element;

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

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Portal } from '../common/portal';
+import { useConfig } from '../../utils/config-context';
+import { WdIcon } from '../index';
+// import StatusContent from '../statusContent';
+const mockBasicsOptionData = [
+    { label: ' ' },
+    { label: ' ' },
+    { label: '选项1', key: 0 },
+    { label: '选项2', key: 1 },
+    { label: '选项3', key: 2 },
+    { label: ' ' },
+    { label: ' ' },
+];
+const mockOptionData = [
+    { label: '选项1', key: 0 },
+    { label: '选项2', key: 1 },
+    { label: '选项3', key: 2 },
+    { label: '选项4', key: 3 },
+    { label: '选项5(已禁用)', key: 4 },
+    { label: '选项6', key: 5 },
+];
+const type = 'radio'; // 基础下拉：basics 单选下拉radio 多选下拉 checkbox
+// const clickIndex = 1;
+export function SelectPickerH5({ isShow = true, close }) {
+    const [inputFocus, setInputFocus] = useState(false);
+    const [selectIndex, setSelectIndex] = useState(0);
+    const { classPrefix } = useConfig();
+    // 滑动监听参数
+    const optionRef = useRef();
+    const heightRef = useRef(Number('40'));
+    const optionScroll = () => {
+        // setOptionCheck(dateRef.current.children.item(0));
+        const index = Math.round(optionRef.current.children.item(0).scrollTop / heightRef.current);
+        setSelectIndex(index);
+    };
+    return isShow ? (_jsx(Portal, { type: "div", children: _jsxs("div", { className: `${classPrefix}-custom-picker`, children: [_jsx("div", { className: `${classPrefix}-custom-backdrop`, onClick: () => {
+                        close();
+                    } }), _jsxs("div", { className: `${classPrefix}-custom-picker__inner`, style: inputFocus ? { height: 'calc(100vh - 96px)' } : null, children: [['basics'].includes(type) ||
+                            (['checkbox'].includes(type) && !inputFocus) ? (_jsxs("div", { className: `${classPrefix}-custom-picker__header`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__header-cancle`, children: "\u53D6\u6D88" }), _jsx("div", { className: `${classPrefix}-custom-picker__header-title` }), _jsx("div", { className: `${classPrefix}-custom-picker__header-confirm`, children: "\u786E\u8BA4" })] })) : !inputFocus ? (_jsxs("div", { className: `${classPrefix}-custom-picker__header`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__header-cancle` }), _jsx("div", { className: `${classPrefix}-custom-picker__header-title` }), _jsx("div", { className: `${classPrefix}-custom-picker__header-confirm`, children: _jsx(WdIcon, { name: "td:close", size: "md" }) })] })) : (''), _jsxs("div", { className: `${classPrefix}-custom-picker__body`, children: [![type].includes('basics') && (_jsxs("div", { style: {
+                                        margin: inputFocus ? '16px 16px 8px 16px' : '0 16px 16px',
+                                    }, className: `${classPrefix}-custom-search
+          ${inputFocus ? 'is-focused' : ''}`, children: [_jsxs("div", { className: `${classPrefix}-custom-search-box`, onClick: () => {
+                                                setInputFocus(true);
+                                            }, children: [inputFocus ? (_jsx("input", { className: `${classPrefix}-input`, autoFocus: true })) : (
+                                                // 此处主要为了兼容 iOS
+                                                _jsx("div", { className: `${classPrefix}-input` })), _jsxs("div", { className: `${classPrefix}-custom-search-box__label`, children: [_jsx(WdIcon, { className: `${classPrefix}-custom-search-box__search-icon`, name: "td:search", size: "sm" }), _jsx("span", { className: `${classPrefix}-custom-search-box__search-placeholder`, children: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9" })] }), _jsx(WdIcon, { className: `${classPrefix}-custom-search-box__dismiss-icon`, name: "td:close-circle-filled", size: "sm" })] }), _jsx("button", { className: `${classPrefix}-custom-search__btn-cancle`, onClick: () => {
+                                                setInputFocus(false);
+                                                // setSearchValue('');
+                                            }, children: "\u53D6\u6D88" })] })), [type].includes('basics') && (_jsxs("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--basics `, style: {
+                                        height: inputFocus ? 'calc(100vh - 160px)' : '200px',
+                                    }, ref: optionRef, children: [_jsx("ul", { className: `${classPrefix}-custom-picker__column `, onScroll: () => {
+                                                optionScroll();
+                                            }, children: mockBasicsOptionData.map((item, index) => {
+                                                return (_jsx("li", { className: `${classPrefix}-custom-picker__column-item is-basics ${(item === null || item === void 0 ? void 0 : item.key) == selectIndex ? 'is-current' : ''}`, children: _jsx("p", { children: item.label }) }, index));
+                                            }) }), _jsx("div", { className: `${classPrefix}-custom-picker__column-mask-top` }), _jsx("div", { className: `${classPrefix}-custom-picker__column-mask-bottom` })] })), [type].includes('radio') && (_jsx("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--select`, style: {
+                                        height: inputFocus ? 'calc(100vh - 210px)' : '310px',
+                                    }, ref: optionRef, children: _jsx("ul", { className: `${classPrefix}-custom-picker__column`, style: {
+                                            height: inputFocus ? 'calc(100vh - 240px)' : '280px',
+                                        }, children: mockOptionData.map((item, index) => {
+                                            return (_jsx("li", { className: `${classPrefix}-custom-picker__column-item ${(item === null || item === void 0 ? void 0 : item.key) === selectIndex ? 'is-selected' : ''} ${index === Number('4') ? 'is-disabled' : ''}`, onClick: () => {
+                                                    setSelectIndex(item === null || item === void 0 ? void 0 : item.key);
+                                                }, children: _jsx("p", { children: item.label }) }, index));
+                                        }) }) })), [type].includes('checkbox') && (_jsx("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--select`, style: {
+                                        height: inputFocus ? 'calc(100vh - 210px)' : '310px',
+                                    }, ref: optionRef, children: _jsx("ul", { className: `${classPrefix}-custom-picker__column`, style: {
+                                            height: inputFocus ? 'calc(100vh - 240px)' : '280px',
+                                        }, children: mockOptionData.map((item, index) => {
+                                            return (_jsx("li", { className: `${classPrefix}-custom-picker__column-item ${classPrefix}-custom-picker__column-item-multiple ${(item === null || item === void 0 ? void 0 : item.key) === selectIndex ? 'is-selected' : ''} `, onClick: () => {
+                                                    setSelectIndex(item === null || item === void 0 ? void 0 : item.key);
+                                                }, children: _jsx("p", { className: `${classPrefix}-custom-picker__column-item-text-multiple`, children: item.label }) }, index));
+                                        }) }) }))] })] })] }) })) : null;
+}

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

@@ -0,0 +1,3 @@
+import { WdSelect } from './wd-select';
+export { WdSelect, type WdSelectProps } from './wd-select';
+export default WdSelect;

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

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

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+export declare const WdSelect: ({ size, options }: {
+    size: any;
+    options: any;
+}) => JSX.Element;
+export interface WdSelectProps extends CommonPropsType {
+    defaultValue?: string;
+    size?: string;
+    options?: any;
+    layout?: string;
+}

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { WdInputWrap, WdIcon } from '../index';
+import StatusContent from '../statusContent';
+import { usePlatform } from '../../utils/platform';
+import { SelectPickerH5 } from './h5';
+import { WdFormItem } from '../wd-form-item';
+// import { WdRetry } from '../wd-retry/index';
+import { Popover } from 'tea-component';
+const LoadingStatus = false; // 是否加载中
+const searchShow = true;
+const mockData = [
+    { label: '全选', value: '1', isAll: true },
+    { label: '选中禁用状态', value: '1', checked: true },
+    { label: '选中状态', value: '2', checked: true },
+    { label: '未选中状态', value: '3' },
+    { label: '未选中状态', value: '4' },
+    { label: '未选中状态', value: '5' },
+    { label: '选中状态', value: '6', checked: true },
+    { label: '未选中状态', value: '7' },
+];
+const FormItemMockData = {
+    classRoot: 'member',
+    labelVisible: true,
+    label: '下拉选择',
+    testId: 'form-upload-file',
+    borderedPc: true,
+    borderedH5: true,
+    layout: 'horizontal',
+    // layout: 'vertical',
+};
+export const WdSelect = ({ size, options }) => {
+    const { classPrefix } = useConfig();
+    const [visible, setVisible] = React.useState(false);
+    const optionsData = options || mockData;
+    const compClassName = `${classPrefix}-form-select-wrap `;
+    const platform = usePlatform();
+    const isH5 = platform === 'h5'; // 响应式判定
+    // 类名
+    const classList = [compClassName];
+    const optionClassList = [''];
+    switch (size) {
+        case 'sm':
+            classList.push(`size-height-sm size-width-sm size-font-sm `);
+            optionClassList.push(`size-width-sm `);
+            break;
+        case 'md':
+            classList.push(`size-height-md size-width-md size-font-md `);
+            optionClassList.push(`size-width-md `);
+            break;
+        case 'lg':
+            classList.push(`size-height-lg size-width-lg size-font-lg `);
+            optionClassList.push(`size-width-lg `);
+            break;
+        default:
+            classList.push(`size-height-md size-width-md size-font-md `);
+            optionClassList.push(`size-width-md `);
+    }
+    return (_jsx(_Fragment, { children: _jsx(WdFormItem, { ...FormItemMockData, children: isH5 ? (_jsxs("div", { children: [_jsx(WdInputWrap, { className: classNames(...classList), 
+                        // 移入改变after图标为【清空】icon即可<WdIcon name="td:close-circle-filled" />
+                        after: _jsx(WdIcon, { name: "td:chevron-right", size: "sm" }), onClick: () => {
+                            setVisible(true);
+                        }, children: _jsxs("div", { className: `${classPrefix}-form-select__tag-group `, children: [_jsxs("div", { className: `${classPrefix}-form-select__tag-item `, children: [_jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsxs("div", { className: `${classPrefix}-form-select__tag-item `, children: [_jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsxs("div", { className: `${classPrefix}-form-select__tag-item `, children: [_jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsx("div", { className: `${classPrefix}-form-select__tag-item `, children: _jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "+4" }) })] }) }), _jsx(SelectPickerH5, { isShow: visible, close: () => {
+                            setVisible(false);
+                        } })] })) : (_jsx(Popover, { visible: visible, onVisibleChange: (visible) => setVisible(visible), placement: "bottom-start", trigger: "click", overlayClassName: `${classPrefix}-select-option `, overlay: _jsxs("div", { className: `${classPrefix}-form-select-option-wrap ${classNames(optionClassList)}`, children: [searchShow && (_jsx("div", { className: `${classPrefix}-form-select-search-box`, children: _jsx(WdInputWrap, { className: `${classPrefix}-form-input-wrap--no-border`, after: _jsx(WdIcon, { name: "td:search" }), children: _jsx("input", { type: "text", placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9" }) }) })), _jsx("div", { className: `${classPrefix}-form-select-option`, children: !(optionsData === null || optionsData === void 0 ? void 0 : optionsData.length) ? (_jsx("div", { className: `${classPrefix}-form-select-option-loading-box`, children: LoadingStatus ? (_jsx(StatusContent, { emptyText: '数据加载中,请稍候...', component: "table", icon: "loading" })) : (
+                                // <StatusContent
+                                //   emptyText={
+                                //     <p>
+                                //       数据加载失败,
+                                //       <span className={`${classPrefix}-empty-retry-text`}>
+                                //         请重试
+                                //       </span>
+                                //     </p>
+                                //   }
+                                //   component="table"
+                                //   icon="error"
+                                // />
+                                // 无搜索内容
+                                _jsx(StatusContent, { emptyText: "\u65E0\u641C\u7D22\u5185\u5BB9", component: "table", icon: "empty" })) })) : (optionsData === null || optionsData === void 0 ? void 0 : optionsData.map((item, index) => {
+                                return (_jsx("div", { className: `${classPrefix}-form-select-option-item
+                  ${(item === null || item === void 0 ? void 0 : item.checked) ? 'is-checked' : ''}`, children: _jsx("span", { className: `${classPrefix}-form-select-option-item__label`, children: (item === null || item === void 0 ? void 0 : item.label) || '' }) }, index));
+                            })) })] }), children: _jsx(WdInputWrap, { className: classNames(...classList), 
+                    // 移入改变after图标为【清空】icon即可<WdIcon name="td:close-circle-filled" />
+                    after: _jsx(WdIcon, { name: "td:chevron-down" }), children: _jsx("input", { type: "text", className: `${classPrefix}-form-select_input`, readOnly: true, placeholder: "\u8BF7\u9009\u62E9" }) }) })) }) }));
+};