@cloudbase/weda-ui 3.5.3 → 3.6.0

package/dist/web/components/form/select/dropdown-select/index.css

@@ -25,7 +25,7 @@
   line-height: 24px;
   background-color: inherit;
   padding: 0 40px 0 40px;
-  caret-color: #0052d9;
+  caret-color: var(--wd-color-brand, #0052d9);
   color: rgba(0, 0, 0, 0.9);
   border-radius: 4px;
 }
@@ -62,7 +62,7 @@
   flex: 0 0 auto;
   display: none;
   margin-left: 16px;
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
   background-color: transparent;
   border: none;
 }
@@ -107,19 +107,21 @@
 
 .weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
   .weda-ui-custom-picker__cloumn-item.is-selected {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
 }
 
 .weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
   .weda-ui-custom-picker__cloumn-item.is-selected::after {
   content: '';
-  width: 24px;
-  height: 24px;
   display: block;
+  width: 8px;
+  height: 16px;
+  border-color: var(--wd-color-brand, #0052d9);
+  border-style: solid;
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg);
   position: absolute;
-  right: 16px;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNjUwNTMgMTQuODgyM0wxOC45ODQ1IDUuNTQ4MzRMMjAuMzYzNCA2LjkyNzJMOS42NTA1MyAxNy42NEwyLjk2MTQ5IDEwLjk1MUw0LjM0MDM0IDkuNTcyMTVMOS42NTA1MyAxNC44ODIzWiIgZmlsbD0iIzAwNTJEOSIvPgo8L3N2Zz4K);
-  background-repeat: no-repeat;
+  right: 10px;
 }
 
 .weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select

package/dist/web/components/form/select/dropdown-select/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, }: {
+export declare function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, onSearchValueInput, ignoreCase, }: {
     params: any;
     selectedValue: any;
     updateValue: any;
@@ -7,4 +7,6 @@ export declare function PureSelect({ params, selectedValue, updateValue, placeho
     size: any;
     disabled: any;
     isShow: any;
+    onSearchValueInput: any;
+    ignoreCase?: boolean;
 }): JSX.Element;

package/dist/web/components/form/select/dropdown-select/index.js

@@ -7,7 +7,8 @@ import { usePlatform } from '../../../../utils/platform';
 import { Status } from '../status';
 import { isFormatNeedFetch, isSingleForeignFormat } from '../formats-util';
 import { useDebouncedEffect, useDeepCompareEffect } from '@react-hookz/web';
-export function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, }) {
+import { useRecycle } from '../../../../utils/hooks/useRecycle';
+export function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, onSearchValueInput, ignoreCase = true, }) {
     const isRequestingRef = useRef(false);
     const [status, setStatus] = useState(Status.ALl_EMPTY);
     const [options, setOptions] = useState([]);
@@ -20,6 +21,7 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
     const [isTurnPages, setIsTurnPages] = useState(false);
     const platform = usePlatform();
     const isSearch = useMemo(() => searchValue !== '', [searchValue]);
+    const { recycleBack } = useRecycle();
     useDeepCompareEffect(() => {
         const { format, controlledValue } = params || {
             format: '',
@@ -84,6 +86,9 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
             requestFatherRelated(searchPage, searchValue);
         }
     }, [searchPage]);
+    useEffect(() => {
+        recycleBack === null || recycleBack === void 0 ? void 0 : recycleBack(options);
+    }, [options]);
     const requestFatherRelated = (pageNo, searchValue) => {
         requestFatherRelatedOption(params, pageNo, RequestOptionType.SEARCH, searchValue)
             .then((value) => {
@@ -132,6 +137,11 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
         if (!isTurnPages || options.length < PAGE_SIZE) {
             const searchOpt = options.filter((item) => {
                 if (item.label) {
+                    if (ignoreCase) {
+                        return String(item.label)
+                            .toLowerCase()
+                            .includes(searchValue.toLowerCase());
+                    }
                     return item.label.toString().includes(searchValue);
                 }
                 return false;
@@ -157,7 +167,7 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
     };
     useDebouncedEffect(() => {
         handleSearch();
-    }, [searchValue], 300);
+    }, [searchValue, options], 300);
     // 加载更多
     const loadMore = () => {
         if (!isRequestingRef.current &&
@@ -191,14 +201,13 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
             }
         }
     };
-    const onSearchValue = (value) => {
+    const onSearchValue = (v) => {
+        if (v === searchValue)
+            return;
         setSearchPage(1);
         setSearchStatus(Status.LOADING);
         setSearchOptions([]);
-        setSearchValue(value);
-        if (value == searchValue) {
-            handleSearch();
-        }
+        setSearchValue(v);
     };
     /**
      * 精确查找
@@ -221,5 +230,5 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
             }
         });
     };
-    return platform === 'h5' ? (_jsx(SelectPickerH5, { updateValue: updateValue, options: currentOption, loadMore: loadMore, reTry: reTry, isTurnPages: isTurnPages, status: currentStatus, onSearchValue: onSearchValue, isShow: isShow, params: params, selectedValue: selectedValue })) : (_jsx(SelectPickerPc, { placeholder: placeholder, size: size, selectedValue: selectedValue, disabled: disabled, updateValue: updateValue, reTry: reTry, loadMore: loadMore, format: format, status: currentStatus, options: currentOption, onSearchValue: onSearchValue, defaultSearchValue: '', findData: findData }));
+    return platform === 'h5' ? (_jsx(SelectPickerH5, { updateValue: updateValue, options: currentOption, loadMore: loadMore, reTry: reTry, isTurnPages: isTurnPages, status: currentStatus, onSearchValue: onSearchValue, isShow: isShow, params: params, selectedValue: selectedValue, onSearchValueInput: onSearchValueInput })) : (_jsx(SelectPickerPc, { placeholder: placeholder, size: size, selectedValue: selectedValue, disabled: disabled, updateValue: updateValue, reTry: reTry, loadMore: loadMore, format: format, status: currentStatus, options: currentOption, onSearchValue: onSearchValue, defaultSearchValue: '', findData: findData, onSearchValueInput: onSearchValueInput }));
 }

package/dist/web/components/form/select/dropdown-select/pc.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './style';
-export default function SelectPickerPc({ format, selectedValue, updateValue, placeholder, size, disabled, reTry, loadMore, status, options, onSearchValue, defaultSearchValue, findData, }: {
+export default function SelectPickerPc({ format, selectedValue, updateValue: _updateValue, placeholder, size, disabled, reTry, loadMore, status, options, onSearchValue, defaultSearchValue, findData, onSearchValueInput, }: {
     format: any;
     selectedValue: any;
     updateValue: any;
@@ -14,4 +14,5 @@ export default function SelectPickerPc({ format, selectedValue, updateValue, pla
     onSearchValue: any;
     defaultSearchValue: any;
     findData: any;
+    onSearchValueInput: any;
 }): JSX.Element;

package/dist/web/components/form/select/dropdown-select/pc.js

@@ -1,16 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useState, useRef } from 'react';
+import { useEffect, useMemo, useState, useRef, useCallback, } from 'react';
 import { useDeepCompareEffect } from '@react-hookz/web';
 import { Select, ConfigProvider } from 'tea-component';
 import Loading from '../status/loading';
 import Retry from '../status/retry';
 import { Status } from '../status';
 import Empty from '../status/empty';
+import { WdFormItemReadOnly } from '../../../wd-form-item';
+import lodashGet from 'lodash.get';
 import './style';
-export default function SelectPickerPc({ format, selectedValue, updateValue, placeholder, size, disabled, reTry, loadMore, status, options, onSearchValue, defaultSearchValue, findData, }) {
+export default function SelectPickerPc({ format, selectedValue, updateValue: _updateValue, placeholder, size, disabled, reTry, loadMore, status, options, onSearchValue, defaultSearchValue, findData, onSearchValueInput, }) {
     const [showDelete, setShowDelete] = useState(false);
     const [optList, setOptList] = useState(options);
+    const [readValue, setReadValue] = useState('');
     const findDataRef = useRef(undefined);
+    const previousValueRef = useRef(selectedValue);
+    const updateValue = useCallback((v, trigger = false) => {
+        const option = Array.isArray(optList)
+            ? optList.find((item) => item.value === v)
+            : null;
+        const text = lodashGet(option, 'text', v);
+        setReadValue(text);
+        if (previousValueRef.current != v) {
+            _updateValue === null || _updateValue === void 0 ? void 0 : _updateValue(v, trigger);
+            previousValueRef.current = v;
+        }
+    }, [_updateValue, optList]);
     useEffect(() => {
         if (findDataRef.current && findDataRef.current.value) {
             const opt = options.filter((item, index) => {
@@ -33,35 +48,26 @@ export default function SelectPickerPc({ format, selectedValue, updateValue, pla
         if (status === Status.ALl_EMPTY) {
             return;
         }
-        // 没有数据
-        if (optList.length === 0) {
-            updateValue && updateValue(null, false);
-            return;
-        }
-        //有数据
-        if (selectedValue) {
-            const index = optList === null || optList === void 0 ? void 0 : optList.findIndex((item) => item.value === selectedValue);
+        if (selectedValue && Array.isArray(optList) && optList.length > 0) {
+            const index = optList.findIndex((item) => item.value === selectedValue);
             if (index === -1) {
-                findData &&
-                    findData().then((value) => {
-                        if (value) {
-                            // 找到了
-                            findDataRef.current = value;
-                        }
-                        else {
-                            // 没找到
-                            updateValue && updateValue(null, false);
-                        }
-                    });
+                findData === null || findData === void 0 ? void 0 : findData().then((value) => {
+                    if (value) {
+                        findDataRef.current = value;
+                    }
+                    else {
+                        updateValue(selectedValue, false);
+                    }
+                });
             }
             else {
-                // 找到了
-                updateValue(optList[index].value, false);
+                const value = optList[index].value;
+                updateValue(value, false);
             }
         }
         else {
             // 用户自动输入 '' ， undefined , null三种状态清空
-            updateValue && updateValue(selectedValue, false);
+            updateValue(selectedValue, false);
         }
     }, [optList, selectedValue, status]);
     const isShowBottomTips = useMemo(() => {
@@ -78,31 +84,32 @@ export default function SelectPickerPc({ format, selectedValue, updateValue, pla
             return '';
         }
     }, [format, status, optList]);
-    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { "data-testid": "form-select", className: 'form-select-pc', onMouseEnter: () => {
-                setShowDelete(true);
-            }, onMouseLeave: () => {
-                setShowDelete(false);
-            }, children: _jsx(Select, { searchable: true, matchButtonWidth: true, defaultSearchValue: defaultSearchValue, placeholder: placeholder, appearance: 'button', size: size, tips: "", disabled: disabled, autoClearSearchValue: true, options: optList, value: selectedValue, bottomTips: isShowBottomTips, onChange: (value) => updateValue(value, true), onScrollBottom: loadMore, onOpen: () => {
-                    onSearchValue('');
-                }, onSearch: (value, context) => {
-                    const tValue = value.trim();
-                    if (context.event.type === 'click') {
-                        if (tValue !== '') {
-                            // 手动点击搜索
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(WdFormItemReadOnly, { readValue: readValue, children: _jsx("div", { "data-testid": "form-select", className: 'form-select-pc', onMouseEnter: () => {
+                    setShowDelete(true);
+                }, onMouseLeave: () => {
+                    setShowDelete(false);
+                }, children: _jsx(Select, { searchable: true, matchButtonWidth: true, defaultSearchValue: defaultSearchValue, placeholder: placeholder, appearance: 'button', size: size, tips: "", disabled: disabled, autoClearSearchValue: true, options: optList, value: selectedValue, bottomTips: isShowBottomTips, onChange: (value) => updateValue(value, true), onScrollBottom: loadMore, onOpen: () => {
+                        onSearchValue('');
+                    }, onSearch: (value, context) => {
+                        const tValue = value.trim();
+                        if (context.event.type === 'click') {
+                            if (tValue !== '') {
+                                // 手动点击搜索
+                                onSearchValue(tValue);
+                            }
+                            else {
+                                // 清空
+                                onSearchValue('');
+                            }
+                        }
+                        else if (tValue !== '') {
+                            // 动态输入搜索
                             onSearchValue(tValue);
                         }
                         else {
-                            // 清空
+                            // 逐个删除
                             onSearchValue('');
                         }
-                    }
-                    else if (tValue !== '') {
-                        // 动态输入搜索
-                        onSearchValue(tValue);
-                    }
-                    else {
-                        // 逐个删除
-                        onSearchValue('');
-                    }
-                }, clearable: showDelete && !disabled }) }) }));
+                        onSearchValueInput === null || onSearchValueInput === void 0 ? void 0 : onSearchValueInput(tValue);
+                    }, clearable: showDelete && !disabled }) }) }) }));
 }

package/dist/web/components/form/select/dropdown-select/ui.d.ts

@@ -8,6 +8,8 @@ interface IPureSelectProps extends Pick<SelectProps, 'size' | 'disabled' | 'valu
     className?: string;
     params: IUseoptionsParams;
     readOnly?: boolean;
+    onSearchValueInput?: (value: string) => void;
+    ignoreCase?: boolean;
 }
 export declare function PureSelectPc(props: IPureSelectProps): JSX.Element;
 export declare function PureSelectH5(props: IPureSelectProps): JSX.Element;

package/dist/web/components/form/select/dropdown-select/ui.js

@@ -1,28 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import classNames from '../../../../utils/classnames';
 import { noop } from '../../../../utils/constant';
 import { useSyncValue } from '../../../../utils/hooks/useSyncValue';
 import { PureSelect } from './index';
-const transformValue = (value) => {
-    return value ? value : null;
-};
+import { isNil } from '../../../../utils/lodash';
+import { WdFormItemReadOnly } from '../../../wd-form-item';
+import lodashGet from 'lodash.get';
 export function PureSelectPc(props) {
-    const { size, onChange = noop, value, placeholder, params, disabled } = props;
+    const { size, onChange = noop, value, placeholder, params, disabled, onSearchValueInput, ignoreCase, } = props;
     const previousValueRef = useRef();
-    return (_jsx(PureSelect, { isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, updateValue: (value, triggerEvent) => {
-            if (previousValueRef.current != transformValue(value)) {
+    return (_jsx(PureSelect, { ignoreCase: ignoreCase, isShow: false, params: params, placeholder: placeholder, size: size, selectedValue: value, disabled: disabled, onSearchValueInput: onSearchValueInput, updateValue: (value, triggerEvent) => {
+            if (previousValueRef.current !== value) {
                 onChange(value, triggerEvent);
                 previousValueRef.current = value;
             }
         } }));
 }
 export function PureSelectH5(props) {
-    const { placeholder, name, disabled, onChange = noop, layout, className, params, } = props;
+    const { placeholder, name, disabled, onChange = noop, layout, className, params, onSearchValueInput, ignoreCase, } = props;
     const [value, setValue] = useSyncValue(props.value);
     const [currentLabel, setCurrentLabel] = useState('');
     const [isShow, setIsShow] = useState(false);
-    const previousValueRef = useRef();
+    const previousValueRef = useRef(value);
+    useEffect(() => {
+        if (isNil(props.value)) {
+            setValue('');
+            setCurrentLabel('');
+            previousValueRef.current = null;
+        }
+    }, [props.value]);
     const subCls = classNames({
         'weui-cell': true,
         'weui-cell_active': true,
@@ -30,27 +37,23 @@ export function PureSelectH5(props) {
         'weui-flex__item': layout !== 'vertical',
         'weui-cell_disabled': disabled,
     }, className);
-    // 选择回调
     const onChooseCallback = (option, isUpdate, dismiss, triggerEvent) => {
         if (dismiss) {
             setIsShow(false);
         }
-        if (isUpdate && previousValueRef.current != transformValue(option === null || option === void 0 ? void 0 : option.value)) {
-            if (!option || Object.keys(option).length === 0) {
-                setValue('');
-                onChange('', triggerEvent);
-                setCurrentLabel('');
-            }
-            else {
-                setValue(option.value);
-                onChange(option.value, triggerEvent);
-                setCurrentLabel(option.label);
-            }
-            previousValueRef.current = option === null || option === void 0 ? void 0 : option.value;
+        if (dismiss === 'close')
+            return;
+        const newValue = lodashGet(option, 'value', null);
+        const text = lodashGet(option, 'label', newValue);
+        setCurrentLabel(text);
+        if (isUpdate && previousValueRef.current != newValue) {
+            setValue(newValue);
+            onChange(newValue, triggerEvent);
+            previousValueRef.current = newValue;
         }
     };
     const onClick = () => {
         setIsShow(true);
     };
-    return (_jsxs("div", { children: [_jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", onClick: disabled ? null : onClick, children: [_jsx("input", { className: "weui-input", type: "select", name: name, placeholder: placeholder, value: currentLabel, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }), _jsx("span", { className: 'weui-input-arrow' })] }) }), _jsx(PureSelect, { params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, placeholder: undefined })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(WdFormItemReadOnly, { readValue: currentLabel, children: _jsx("div", { className: subCls, children: _jsxs("div", { className: "weui-cell__bd weui-flex select-picker", onClick: disabled ? null : onClick, children: [_jsx("input", { className: "weui-input", type: "select", name: name, placeholder: placeholder, value: currentLabel, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }), _jsx("span", { className: 'weui-input-arrow' })] }) }) }), _jsx(PureSelect, { ignoreCase: ignoreCase, params: params, updateValue: onChooseCallback, selectedValue: value, isShow: isShow, size: undefined, disabled: undefined, onSearchValueInput: onSearchValueInput, placeholder: undefined })] }));
 }

package/dist/web/components/form/select/h5.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PropsType } from './index';
-export default function Select({ events, name, placeholder, layout, mode, dateMode, disabled, range, where, primaryField, enumName, dataSourceName, viewId, format, defaultValue, startDate, endDate, defaultDate, startTime, endTime, defaultTime, defaultRegion, defaultMutiRegion, separator, regionType, clearable, onChange, readOnly, }: PropsType): JSX.Element;
+export default function Select({ events, name, placeholder, layout, mode, dateMode, disabled, range, where, primaryField, enumName, dataSourceName, viewId, format, defaultValue, startDate, endDate, defaultDate, startTime, endTime, defaultTime, defaultRegion, defaultMutiRegion, separator, regionType, clearable, onChange, onSearchValueInput, readOnly, ignoreCase, }: PropsType): JSX.Element;
 export declare function decodeIsoDatetime(isoStringOrTimesnap: any, type: any, dateMode?: string): any;
 /**
  * 根据时间模式，构造 new Date()的传参格式单个日期和时间组件值

package/dist/web/components/form/select/h5.js

@@ -14,6 +14,7 @@ import { getIOSNotNaNDate, isTime } from './allTimePicker/dataUtils';
 import { isSingleForeignFormat } from './formats-util';
 import { WdIcon } from '../../wd-icon';
 import { useConfig } from '../../../utils/config-context';
+import { WdFormItemReadOnly } from '../../wd-form-item';
 export default function Select({ 
 // 系统属性
 events = emptyObject, 
@@ -26,8 +27,8 @@ startDate, endDate, defaultDate,
 // time mode
 startTime, endTime, defaultTime, 
 // region mode
-defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onChange, readOnly, }) {
-    var _a, _b;
+defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onChange, onSearchValueInput, readOnly, ignoreCase, }) {
+    var _a;
     const { classPrefix } = useConfig();
     const [date, setDate] = React.useState(decodeIsoDatetime(defaultDate, 'date', dateMode));
     const [time, setTime] = React.useState(decodeIsoDatetime(defaultTime, 'time'));
@@ -85,34 +86,12 @@ defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onCh
         'weda-picker--date': hasClearMode,
         'is-hover': hasClearMode && clearable && (date || time),
     });
-    //实现初始值触发change事件
-    const defaultMutiRegionChange = function (treeValue, defaultMutiRegion) {
-        var _a;
-        const defaultValue = defaultMutiRegion
-            ? defaultMutiRegion.split(',')
-            : null;
-        const changeValue = [];
-        if (Array.isArray(defaultValue) && defaultValue.length > 0) {
-            defaultValue.forEach((element) => {
-                treeValue.map((item) => {
-                    if ((item === null || item === void 0 ? void 0 : item.Value) == element) {
-                        changeValue.push({
-                            value: item === null || item === void 0 ? void 0 : item.Value,
-                            code: item === null || item === void 0 ? void 0 : item.Code,
-                        });
-                    }
-                });
-            });
-            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: defaultMutiRegion, result: changeValue });
-        }
-    };
     React.useEffect(() => {
         if (mode == 'region' || mode == 'mutiRegion') {
             if (regionData.length < 1) {
                 getAreaCode().then((value) => {
                     var _a;
                     if (((_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0) > 0) {
-                        defaultMutiRegionChange(value, defaultMutiRegion);
                         setRegionData(value);
                         const tree = getRegionTree(value, regionType, mode);
                         setRegionTree(tree);
@@ -218,15 +197,6 @@ defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onCh
             (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
         }
     };
-    // 默认日期设置表单事件，否则无法提交默认数据
-    React.useEffect(() => {
-        var _a;
-        if (isTime(defaultDate)) {
-            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, {
-                value: new Date(getIOSNotNaNDate(defaultDate)).getTime(),
-            });
-        }
-    }, [defaultDate]);
     const onTimeClick = function () {
         const options = {
             className: 'weda-ui weda-picker',
@@ -340,6 +310,7 @@ defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onCh
             mutiRegion: mutiRegion,
         };
     }, [range, selectedValue, date, time, region, separator, mutiRegion]);
+    const readValue = (_a = result[mode]) !== null && _a !== void 0 ? _a : '';
     const subCls = classNames({
         'weui-cell': true,
         'weui-cell_active': true,
@@ -368,23 +339,23 @@ defaultRegion, defaultMutiRegion, separator, regionType, clearable = false, onCh
         };
     }
     if (mode === 'selector') {
-        return (_jsx(PureSelectH5, { className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value, triggerEvent = false) => {
+        return (_jsx(PureSelectH5, { ignoreCase: ignoreCase, className: "weda-ui weda-picker", name: name, value: selectedValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, params: params, onChange: (value, triggerEvent = false) => {
                 var _a;
                 setSelectedValue(value);
                 onChange === null || onChange === void 0 ? void 0 : onChange(value);
                 if (triggerEvent) {
                     (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
                 }
-            } }));
+            }, onSearchValueInput: onSearchValueInput }));
     }
-    return readOnly ? (_jsx("div", { className: classNames('weui-cell', `${classPrefix}-form-read-color`), children: (_a = result[mode]) !== null && _a !== void 0 ? _a : '' })) : (_jsx("div", { className: subCls, children: _jsxs("div", { className: `weui-cell__bd weui-flex ${clearCls}`, children: [_jsx("input", { onClick: onClick, className: "weui-input", type: "select", name: name, placeholder: placeholder, value: (_b = result[mode]) !== null && _b !== void 0 ? _b : '', disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }), hasClearMode && (_jsx(WdIcon, { name: "td:close-circle-filled", onClick: (e) => {
-                        var _a;
-                        e.stopPropagation();
-                        setDate(null);
-                        setTime(null);
-                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
-                        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: null });
-                    } }))] }) }));
+    return (_jsx(WdFormItemReadOnly, { readValue: readValue, children: readOnly ? (_jsx("div", { className: classNames('weui-cell', `${classPrefix}-form-read-color`), children: readValue })) : (_jsx("div", { className: subCls, children: _jsxs("div", { className: `weui-cell__bd weui-flex ${clearCls}`, children: [_jsx("input", { onClick: onClick, className: "weui-input", type: "select", name: name, placeholder: placeholder, value: readValue, disabled: disabled, autoComplete: 'off', readOnly: true, "data-testid": "form-item-select" }), hasClearMode && (_jsx(WdIcon, { name: "td:close-circle-filled", onClick: (e) => {
+                            var _a;
+                            e.stopPropagation();
+                            setDate(null);
+                            setTime(null);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                            (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: null });
+                        } }))] }) })) }));
 }
 export function decodeIsoDatetime(isoStringOrTimesnap, type, dateMode = 'day') {
     if (isoStringOrTimesnap == null) {

package/dist/web/components/form/select/index.css

@@ -52,3 +52,29 @@
 .weda-picker--date.is-hover .t-icon-close-circle-filled {
   display: block;
 }
+
+/* 下拉单选 theme */
+:root
+  .wedatea2td-dropdown-box
+  .wedatea2td-search--icon-front
+  .wedatea2td-input--search:focus,
+:root
+  .wedatea2td-dropdown-box
+  .wedatea2td-search--simple
+  .wedatea2td-input--search:focus {
+  border-color: var(--wd-color-brand, #0052d9);
+}
+:root
+  .weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
+  .weda-ui-custom-picker__cloumn-item.is-selected,
+:root .weda-ui-custom-search__btn-cancle,
+:root .weda-ui-custom-picker__loading-icon,
+:root .weda-ui-custom-picker__status--loading {
+  color: var(--wd-color-brand, #0052d9);
+}
+:root .is-expanded .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
+  border-color: var(--wd-color-brand, #0052d9);
+}
+:root .wedatea2td-list--option > li:hover {
+  background-color: var(--wd-color-brand-light, #f3f3f3);
+}

package/dist/web/components/form/select/index.d.ts

@@ -9,7 +9,7 @@ declare const Select: React.NamedExoticComponent<PropsType>;
 export default Select;
 export interface PropsType extends CommonFormPropsType {
     size: 's' | 'm' | 'l' | 'full';
-    placeholder: string;
+    placeholder?: string;
     mode: 'selector' | 'date' | 'time' | 'datetime' | 'region' | 'mutiRegion';
     dateMode?: 'day' | 'month' | 'year' | 'datetime';
     range?: any[];
@@ -50,10 +50,12 @@ export interface PropsType extends CommonFormPropsType {
     regionTree?: any[];
     defaultMutiRegion?: string;
     onChange?: (v: any) => void;
+    onSearchValueInput?: (v: unknown) => void;
     params?: IUseoptionsParams;
     isTurnPages?: boolean;
     clearable?: boolean;
     readOnly?: boolean;
+    ignoreCase?: boolean;
 }
 export declare const defaultProps: {
     events: {};
@@ -66,9 +68,6 @@ export declare const defaultProps: {
     mode: string;
     disabled: boolean;
     requiredFlag: boolean;
-    range: {
-        name: string;
-        value: string;
-    }[];
+    range: any[];
     separator: string;
 };

package/dist/web/components/form/select/index.js

@@ -17,6 +17,7 @@ import { useLoopRenderDetect } from '../../common/use-loop-render-detect';
 import { PureSelectPc } from './dropdown-select/ui';
 import { isSingleForeignFormat } from './formats-util';
 import { useConfig } from '../../../utils/config-context';
+import { WdFormItemReadOnly } from '../../wd-form-item';
 // @ts-ignore TODO: fix 与plugin构建阶段效果不同
 export const moment = (typeof _moment === 'function' ? _moment : _moment.default);
 const Select = React.memo(function Select(props) {
@@ -64,15 +65,12 @@ export const defaultProps = {
     disabled: false,
     requiredFlag: false,
     // selector mode
-    range: [
-        { name: '选项1', value: '1' },
-        { name: '选项2', value: '2' },
-    ],
+    range: [],
     // region mode
     separator: ',',
 };
 // const button = <Button type="icon" icon="more" />;
-function SelectPc({ name, where, dataSourceName, viewId, format, primaryField, enumName, defaultValue, placeholder = '请选择', mode = 'selector', dateMode = 'day', events = emptyObject, disabled = false, range = defaultProps.range, startDate, endDate, defaultDate, defaultTime, startTime, endTime, defaultRegion, defaultMutiRegion, regionType, separator = defaultProps.separator, size = defaultProps.size, clearable = false, onChange, readOnly, }) {
+function SelectPc({ name, where, dataSourceName, viewId, format, primaryField, enumName, defaultValue, placeholder = '请选择', mode = 'selector', dateMode = 'day', events = emptyObject, disabled = false, range = defaultProps.range, startDate, endDate, defaultDate, defaultTime, startTime, endTime, defaultRegion, defaultMutiRegion, regionType, separator = defaultProps.separator, size = defaultProps.size, clearable = false, onChange, onSearchValueInput, readOnly, ignoreCase, }) {
     const { classPrefix } = useConfig();
     // 两次默认值不同, 需要刷新
     const prevDefaultRef = React.useRef();
@@ -189,14 +187,14 @@ function SelectPc({ name, where, dataSourceName, viewId, format, primaryField, e
     const createDropdown = () => {
         switch (mode) {
             case 'selector':
-                return (_jsx(PureSelectPc, { button: '', name: name, params: params, disabled: disabled, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent = false) => {
+                return (_jsx(PureSelectPc, { ignoreCase: ignoreCase, button: '', name: name, params: params, disabled: disabled, placeholder: placeholder, size: size, value: selectedValue, onChange: (value, triggerEvent = false) => {
                         var _a;
-                        onChange && onChange(value);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(value);
                         if (triggerEvent) {
                             (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value });
                         }
                         setSelectedValue(value);
-                    } }));
+                    }, onSearchValueInput: onSearchValueInput }));
             case 'date': {
                 const start = startDate ? decodeIsoDatetime(startDate, 'date') : null;
                 const end = endDate ? decodeIsoDatetime(endDate, 'date') : null;
@@ -249,7 +247,7 @@ function SelectPc({ name, where, dataSourceName, viewId, format, primaryField, e
             case 'region':
                 return readOnly ? (_jsx("div", { className: `${classPrefix}-select__disabled`, children: region })) : (_jsx(Cascader, { clearable: true, searchable: true, type: "menu", disabled: disabled, data: regionTree, multiple: false, onChange: onDataChange, className: sizeClassName, overlayClassName: "select-region-pc", valueRender: (options) => options.map(({ label, value }, index) => (_jsxs(React.Fragment, { children: [index !== 0 && `${separator}`, label || value] }, `${value}-${index}`))), placeholder: placeholder, value: region }));
             case 'mutiRegion':
-                return readOnly ? (_jsx("div", { className: `${classPrefix}-select__disabled`, children: mutiRegion })) : (_jsx(Cascader, { clearable: true, searchable: true, className: sizeClassName, overlayClassName: "select-region-pc", type: "menu", disabled: disabled, data: regionTree, multiple: false, onChange: onDataChange, valueRender: (options) => options.map(({ label, value }, index) => (_jsxs(React.Fragment, { children: [index !== 0 && ',', label || value] }, `${value}-${index}`))), value: mutiRegion, placeholder: placeholder }));
+                return (_jsx(WdFormItemReadOnly, { readValue: mutiRegion, children: readOnly ? (_jsx("div", { className: `${classPrefix}-select__disabled`, children: mutiRegion })) : (_jsx(Cascader, { clearable: true, searchable: true, className: sizeClassName, overlayClassName: "select-region-pc", type: "menu", disabled: disabled, data: regionTree, multiple: false, onChange: onDataChange, valueRender: (options) => options.map(({ label, value }, index) => (_jsxs(React.Fragment, { children: [index !== 0 && ',', label || value] }, `${value}-${index}`))), value: mutiRegion, placeholder: placeholder })) }));
         }
     };
     const dropdown = createDropdown();

package/dist/web/components/form/select/request.js

@@ -106,7 +106,7 @@ export const requestEnumOption = async (params) => {
 export const transFormatTeaSelectKey = (options) => {
     return options.map((item) => {
         return {
-            value: item.value,
+            ...item,
             text: item.label,
         };
     });