@cloudbase/weda-ui 3.5.3 → 3.6.0

package/dist/web/components/form/location/components/LocationH5/location.h5.js

@@ -11,14 +11,20 @@ import { propTypes, defaultProps } from '../../common/propsConfig';
 import { callDataSource } from '../../../../../utils/tcb';
 import { inH5IsMobile } from '../../../../../utils/platform';
 import { useConfig } from '../../../../../utils/config-context';
+import { emptyObject } from '../../../../../utils/constant';
+import { useRecycle } from '../../../../../utils/hooks/useRecycle';
+import ChooseBtn from '../ChooseBtn';
+import { WdText } from '../../../../wd-text';
+import { checkCustomLocation } from '../../common/useLocationInfo';
 import './style';
 const { useEffect, useState, useRef } = React;
 export default function LocationH5(props) {
     const { 
     // 系统属性
-    id, className, style, events, 
+    id, className, style, events = emptyObject, 
     // 组件属性
-    value, label, labelVisible, showLngLat, showMap, drag, zoom, disabled, requiredFlag, decorator, locationType, dataSource, onChange, layout, locationRange, customRange, readOnly, } = props;
+    value, label, labelVisible, showLngLat, showMap, drag, zoom, disabled, requiredFlag, decorator, locationType, dataSource, onChange, layout, locationRange, customRange, readOnly, placeholder = '选择地理位置', } = props;
+    const { recycleBack } = useRecycle(); // 回调到最外层组件
     const { classPrefix } = useConfig();
     const cls = classNames({
         'weda-ui': true,
@@ -41,11 +47,13 @@ export default function LocationH5(props) {
         poiname: '',
         latlng: { lat: 39.98410411, lng: 116.307503 },
     });
+    const [userSelectStatus, setUserSelectStatus] = useState('');
     const currentLocations = useRef();
     const customLocation = useRef();
     useEffect(() => {
         if (value || !currentLocations.current)
             return;
+        setUserSelectStatus('');
         // 重置表单时
         const { poiname, detailedAddress, latlng: { lat, lng }, } = currentLocations.current;
         let location = {
@@ -55,23 +63,8 @@ export default function LocationH5(props) {
         };
         if (locationType === 1) {
             location.locationType = 1;
-            events.change({ value: {} });
-        }
-        else if (locationType === 2) {
-            let res = {
-                value: {
-                    address: poiname,
-                    detailedAddress,
-                    geopoint: {
-                        coordinates: [lng, lat],
-                        type: 'Point',
-                    },
-                },
-            };
-            events.change && events.change(res);
         }
         setLocation(location);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value, locationType]);
     useEffect(() => {
         let loc = {
@@ -85,8 +78,6 @@ export default function LocationH5(props) {
         };
         setLocation(loc);
         // 暂不支持自定位置，初始化表单值都是{}
-        events.change({ value: {} });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [locationType]);
     useEffect(() => {
         if (checkCustomLocation(value)) {
@@ -99,6 +90,7 @@ export default function LocationH5(props) {
                 latlng: { lng: coordinates[0], lat: coordinates[1] },
             };
             customLocation.current = value;
+            setUserSelectStatus('selected');
             setLocation(loc);
         }
     }, [value]);
@@ -140,18 +132,11 @@ export default function LocationH5(props) {
                     if (checkCustomLocation(customLocation.current))
                         return;
                     setLocation(loc);
-                    if (locationType === 2) {
-                        events.change &&
-                            events.change({
-                                value: {
-                                    address: city + addr,
-                                    detailedAddress: city + addr,
-                                    geopoint: {
-                                        coordinates: [lng, lat],
-                                        type: 'Point',
-                                    },
-                                },
-                            });
+                    if (locationType === 2 && initRef.current) {
+                        // eslint-disable-next-line rulesdir/no-trigger-event-in-effect
+                        onChangeLocation(loc);
+                        initRef.current = false;
+                        recycleBack(true);
                     }
                 }, (error) => {
                     console.error('error loc', error);
@@ -181,7 +166,6 @@ export default function LocationH5(props) {
             document.body.appendChild(script);
         }
         loadScript();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [APIKEY, locationType, dataSourceStatus]);
     useEffect(() => {
         // 调用API数据源方法
@@ -218,17 +202,6 @@ export default function LocationH5(props) {
             });
         }
     }, [dataSource]);
-    const checkCustomLocation = (params) => {
-        var _a;
-        let status = true;
-        if (!(params === null || params === void 0 ? void 0 : params.address) || !(params === null || params === void 0 ? void 0 : params.detailedAddress)) {
-            status = false;
-        }
-        else if (((_a = params === null || params === void 0 ? void 0 : params.geopoint) === null || _a === void 0 ? void 0 : _a.type) != 'Point') {
-            status = false;
-        }
-        return status;
-    };
     const showToast = (message) => {
         weui.toast(message, {
             duration: 3000,
@@ -246,7 +219,9 @@ export default function LocationH5(props) {
             return showToast('获取位置信息中，请稍后重试');
         setIsSelectMapVisible(true);
     };
+    const initRef = useRef(true); // 确保只执行一次；
     const onChangeLocation = (value) => {
+        var _a;
         const { poiname, latlng, detailedAddress } = value;
         const finalValue = {
             address: poiname,
@@ -260,7 +235,8 @@ export default function LocationH5(props) {
             value: finalValue,
         };
         onChange === null || onChange === void 0 ? void 0 : onChange(finalValue);
-        events.change && events.change(res);
+        setUserSelectStatus('selected');
+        (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, res);
     };
     const getIsShowMap = () => {
         let status = showMap;
@@ -294,17 +270,17 @@ export default function LocationH5(props) {
         }
         return status;
     };
-    const LocationEl = (_jsxs("div", { className: "form-location weda-ui_form-location", "data-testid": "form-location", children: [_jsxs("div", { className: `form-location-warp location-disabled`, style: { display: layout === 'vertical' ? 'block' : 'flex' }, children: [labelVisible && (_jsxs("div", { className: "form-location-label weda-formcells__label weui-cell", children: [requiredFlag && _jsx("span", { className: "weda-formcells__flag", children: "*" }), _jsx("label", { children: label })] })), _jsxs("div", { className: "weui-cell form-location-detail", children: [!readOnly ? (_jsxs("div", { className: classNames({
+    // 无值时才出现按钮，否则直接点击值
+    const hasChooseBtn = !readOnly && userSelectStatus !== 'selected';
+    const LocationEl = (_jsxs("div", { className: "form-location weda-ui_form-location", "data-testid": "form-location", children: [_jsxs("div", { className: `form-location-warp location-disabled`, style: { display: layout === 'vertical' ? 'block' : 'flex' }, children: [labelVisible && (_jsxs("div", { className: "form-location-label weda-formcells__label weui-cell", children: [requiredFlag && _jsx("span", { className: "weda-formcells__flag", children: "*" }), _jsx("label", { children: label })] })), _jsxs("div", { className: "weui-cell form-location-detail", children: [hasChooseBtn ? (_jsx(ChooseBtn, { onClick: handleChooseLocation, label: placeholder, disabled: disabled, className: classNames({
                                     'form-location-con': true,
-                                    'location-content': true,
                                     'form-location-con_vertical': layout === 'vertical',
-                                }), children: [_jsx("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/6542e1ce1dd36a90085b2eb979801df9.png", alt: "" }), _jsx("span", { className: classNames({
-                                            'form-location-con_disabled': disabled,
-                                        }), onClick: handleChooseLocation, children: "\u9009\u62E9\u5730\u7406\u4F4D\u7F6E" })] })) : null, getIsShowAddr() && (_jsxs("div", { className: classNames({
+                                }) })) : null, !hasChooseBtn && getIsShowAddr() && (_jsxs("div", { onClick: handleChooseLocation, className: classNames({
                                     'form-location-addr': true,
                                     'form-location-addr-vertical': layout === 'vertical',
                                     [`${classPrefix}-form-read-color`]: readOnly,
-                                }), children: [_jsx("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/f9729e0b091f394110a6e12d3f4e7290.png", alt: "" }), _jsxs("div", { children: [location.poiname && (_jsx("div", { className: "form-location-addr-title", children: location.poiname })), showLngLat && (_jsx("div", { className: "form-location-addr-lat", children: location.latlng
+                                    'form-location-addr--disabled': disabled,
+                                }), children: [_jsx("div", { className: "form-location-con__icon" }), _jsxs("div", { className: "form-location-con__text", children: [location.poiname && (_jsx(WdText, { text: location.poiname, className: "form-location-addr-title wd-location__info" })), showLngLat && (_jsx("div", { className: "form-location-addr-lat", children: location.latlng
                                                     ? `${location.latlng.lat}N,${location.latlng.lng}E`
                                                     : '' }))] })] }))] })] }), getIsShowMap() && (_jsx("div", { className: "form-map-container", style: { height: '200px' }, children: _jsx(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }) })), _jsx(SelectModal, { isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, currentLocations: currentLocations.current, setLocation: setLocation, chooseLocation: onChangeLocation, APIKEY: APIKEY, locationRange: locationRange, customRange: customRange })] }));
     return renderDecorator(LocationEl, decorator)({

package/dist/web/components/form/location/components/LocationPC/Header.d.ts

@@ -1,5 +1,5 @@
 export default Header;
-declare function Header({ onClick, isEdit, info, disabled, showLngLat, locationType, dataSourceStatus, apiKeyStatus, currentLocStatus, readOnly, }: {
+declare function Header({ onClick, isEdit, info, disabled, showLngLat, locationType, dataSourceStatus, apiKeyStatus, currentLocStatus, readOnly, placeholder, }: {
     onClick: any;
     isEdit: any;
     info: any;
@@ -10,4 +10,5 @@ declare function Header({ onClick, isEdit, info, disabled, showLngLat, locationT
     apiKeyStatus: any;
     currentLocStatus: any;
     readOnly: any;
+    placeholder?: string;
 }): JSX.Element;

package/dist/web/components/form/location/components/LocationPC/Header.js

@@ -1,13 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Button } from 'tea-component';
 import classNames from '../../../../../utils/classnames';
 import { useConfig } from '../../../../../utils/config-context';
-const Header = ({ onClick, isEdit, info, disabled, showLngLat, locationType, dataSourceStatus, apiKeyStatus, currentLocStatus, readOnly, }) => {
+import ChooseBtn from '../ChooseBtn';
+import { WdText } from '../../../../wd-text';
+const Header = ({ onClick, isEdit, info, disabled, showLngLat, locationType, dataSourceStatus, apiKeyStatus, currentLocStatus, readOnly, placeholder = '选择地理位置', }) => {
     const { classPrefix } = useConfig();
     const { poiname, latlng } = info || {};
-    const buttonType = isEdit ? 'weak' : 'primary';
-    const buttonText = isEdit ? '重新定位' : '选择地理位置';
     const getIsShowAddr = () => {
         let status = true;
         // 默认显示位置 无
@@ -25,13 +24,15 @@ const Header = ({ onClick, isEdit, info, disabled, showLngLat, locationType, dat
         }
         return status;
     };
+    // 无值时才出现按钮，否则直接点击值
+    const hasChooseBtn = !readOnly && !isEdit;
     return (_jsxs("div", { className: classNames({
             'wedatea2td-justify-grid _weda-fn-map__local': true,
             'weda-fn-map__local_loc': true,
             'weda-fn-map__local_edit': isEdit,
-        }), children: [isEdit ? (_jsx(_Fragment, { children: _jsx("div", { className: "wedatea2td-justify-grid__col wedatea2td-justify-grid__col--right weda-fn-map__local_loc_btn", children: _jsx(Button, { type: buttonType, onClick: onClick, disabled: disabled, children: buttonText }) }) })) : readOnly ? null : (_jsx("div", { className: "wedatea2td-justify-grid__col wedatea2td-justify-grid__col--left weda-fn-map__local_loc_btn_left", children: _jsx(Button, { type: buttonType, onClick: onClick, disabled: disabled, children: buttonText }) })), getIsShowAddr() && (_jsxs("div", { className: classNames('wedatea2td-justify-grid__col', 'wedatea2td-justify-grid__col--left', 'weda-fn-map__local_wrap', readOnly ? `${classPrefix}-form-read-color` : ''), children: [_jsx("i", { className: "wedatea2td-icon _weda-fn-icon-local weda-fn-map__local_wrap_icon" }), _jsxs("div", { className: "weda-fn-map__local_wrap_addr", children: [poiname && (_jsx("span", { className: classNames('wedatea2td-fz-reset', 'form-location-map-pc-address'), children: poiname })), showLngLat ? (_jsx("div", { className: classNames({
+        }), children: [!hasChooseBtn && getIsShowAddr() && (_jsxs("div", { onClick: onClick, className: classNames('wedatea2td-justify-grid__col', 'wedatea2td-justify-grid__col--left', 'weda-fn-map__local_wrap', readOnly ? `${classPrefix}-form-read-color` : '', { 'weda-fn-map__local_wrap--disabled': disabled }), children: [_jsx("div", { className: "form-location-con__icon" }), _jsxs("div", { className: "weda-fn-map__local_wrap_addr form-location-con__text", children: [poiname && (_jsx(WdText, { text: poiname, className: classNames('wedatea2td-fz-reset', 'form-location-map-pc-address', 'wd-location__info') })), showLngLat ? (_jsx("div", { className: classNames({
                                     'form-location-addr-lat': true,
                                     'form-location-map-pc-latlng': true,
-                                }), children: latlng.lat ? `${latlng.lat}N,${latlng.lng}E` : '' })) : null] })] }))] }));
+                                }), children: latlng.lat ? `${latlng.lat}N,${latlng.lng}E` : '' })) : null] })] })), hasChooseBtn ? (_jsx("div", { className: "wedatea2td-justify-grid__col wedatea2td-justify-grid__col--left weda-fn-map__local_loc_btn_left", children: _jsx(ChooseBtn, { onClick: onClick, label: placeholder, disabled: disabled }) })) : null] }));
 };
 export default Header;

package/dist/web/components/form/location/components/LocationPC/index.css

@@ -22,15 +22,22 @@
   top: 0;
 }
 .weda-fn-map__local_loc_btn_left {
-  margin-bottom: 8px;
+  margin-bottom: 0px;
 }
 .weda-fn-map__local_wrap {
   display: flex;
+  cursor: pointer;
   /* margin-top: 8px; */
 }
+.weda-fn-map__local_wrap--disabled {
+  color: rgba(0, 0, 0, 0.26);
+  cursor: not-allowed;
+}
+
 .weda-fn-map__local_wrap_icon {
   width: 24px;
   height: 24px;
+  flex-shrink: 0;
 }
 .form-location-map-pc-latlng,
 .form-location-map-pc-address {
@@ -38,3 +45,20 @@
   height: 24px;
   line-height: 24px;
 }
+
+.weda-fn-map__local_wrap .form-location-con__icon {
+  height: 24px;
+  background-position: center;
+}
+
+.weda-fn-map__local_wrap--disabled .form-location-con__icon {
+  opacity: 0.4;
+}
+
+.weda-ui .form-location-con.form-location-con--pc {
+  margin-bottom: 0;
+}
+
+.weda-fn-map__local_loc.wedatea2td-justify-grid .wedatea2td-justify-grid__col {
+  font-size: inherit;
+}

package/dist/web/components/form/location/components/LocationPC/location.PC.js

@@ -12,41 +12,42 @@ import useLocationInfo from '../../common/useLocationInfo';
 import { propTypes, defaultProps } from '../../common/propsConfig';
 import { callDataSource } from '../../../../../utils/tcb';
 import Header from './Header';
+import { useRecycle } from '../../../../../utils/hooks/useRecycle';
 import './style';
-const { useState, useEffect } = React;
+const { useState, useEffect, useRef } = React;
 export default function LocationPC(props) {
     // 属性、变量
     const { 
     // 系统属性
     id, className, style, events, 
     // 组件属性
-    value, label, labelVisible, locationType, showLngLat, showMap, drag, zoom, disabled, requiredFlag, decorator, dataSource, layout, locationRange, customRange, onChange, readOnly, } = props;
+    value, label, labelVisible, locationType, showLngLat, showMap, drag, zoom, disabled, requiredFlag, decorator, dataSource, layout, locationRange, customRange, onChange, readOnly, placeholder, } = props;
     const cls = classNames({
         'weda-ui': true,
         cloudbase_standard: true,
         [className]: className,
     });
+    const { recycleBack } = useRecycle(); // 回调到最外层组件
     const [isSelectMapVisible, setIsSelectMapVisible] = useState(false);
     const [dataSourceStatus, setDataSourceStatus] = useState({
         status: false,
         message: '定位功能初始化中，请稍后重试',
     });
-    const [userSelectStatus, setUserSelectStatus] = useState('default');
+    const [userSelectStatus, setUserSelectStatus] = useState('');
     const [APIKEY, setAPIKEY] = useState('');
-    const eventsChange = (value, noaddr) => {
+    const initRef = useRef(true); // 确保只执行一次；
+    const eventsChange = (value) => {
+        if (locationType !== 2 && initRef.current)
+            return;
+        initRef.current = false;
         const { poiname, detailedAddress, latitude, longitude } = value;
-        let res = {
-            address: poiname,
+        const param = {
+            poiname,
             detailedAddress,
-            geopoint: {
-                coordinates: [longitude, latitude],
-                type: 'Point',
-            },
+            latlng: { lng: longitude, lat: latitude },
         };
-        events.change &&
-            events.change({
-                value: noaddr ? {} : res,
-            });
+        onChangeLocation(param);
+        recycleBack(true);
     };
     const { location, setLocation, apiKeyStatus, setApiKeyStatus, currentLocStatus, currentLocations, customLocation, checkCustomLocation, } = useLocationInfo({
         apiKey: APIKEY,
@@ -66,12 +67,13 @@ export default function LocationPC(props) {
             };
             customLocation.current = value;
             setLocation(loc);
+            setUserSelectStatus('selected');
         }
     }, [value]);
     useEffect(() => {
         if (value || !currentLocations.current)
             return;
-        setUserSelectStatus('default');
+        setUserSelectStatus('');
         // 重置表单时
         const { poiname, detailedAddress, latlng: { lat, lng }, } = currentLocations.current;
         let location = {
@@ -81,15 +83,6 @@ export default function LocationPC(props) {
         };
         if (locationType === 1) {
             location.locationType = 1;
-            eventsChange({}, true);
-        }
-        else if (locationType === 2) {
-            eventsChange({
-                latitude: lat,
-                longitude: lng,
-                poiname,
-                detailedAddress,
-            });
         }
         setLocation(location);
     }, [value, locationType]);
@@ -111,6 +104,7 @@ export default function LocationPC(props) {
         setIsSelectMapVisible(true);
     };
     const onChangeLocation = (value) => {
+        var _a;
         const { poiname, latlng, detailedAddress } = value;
         const finalValue = {
             address: poiname,
@@ -122,10 +116,7 @@ export default function LocationPC(props) {
         };
         onChange === null || onChange === void 0 ? void 0 : onChange(finalValue);
         setUserSelectStatus('selected');
-        events.change &&
-            events.change({
-                value: finalValue,
-            });
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: finalValue });
     };
     useEffect(() => {
         // 调用API数据源方法
@@ -183,12 +174,6 @@ export default function LocationPC(props) {
         }
         setLocation(loc);
         // 暂不支持自定位置，初始化表单值都是{}
-        eventsChange({
-            latitude: loc.latlng.lat,
-            longitude: loc.latlng.lng,
-            poiname: loc.poiname,
-            detailedAddress: loc.detailedAddress,
-        }, true);
     }, [locationType]);
     const getIsShowMap = () => {
         let status = showMap;
@@ -206,7 +191,7 @@ export default function LocationPC(props) {
         }
         return status;
     };
-    const LocationEl = (_jsxs(ConfigProvider, { classPrefix: "wedatea2td", children: [_jsxs("div", { className: classNames('_weda-fn-map', className), "data-testid": "_weda-fn-map", style: style, children: [_jsx(Header, { isEdit: userSelectStatus === 'selected', info: location, onClick: handleChooseLocation, disabled: disabled, showLngLat: showLngLat, locationType: locationType, apiKeyStatus: apiKeyStatus, currentLocStatus: currentLocStatus, dataSourceStatus: dataSourceStatus.status, readOnly: readOnly }), getIsShowMap() ? (_jsx("div", { className: classNames('form-location-map-pc'), children: _jsx(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }) })) : null] }), _jsx(SelectModal, { readOnly: readOnly, currentLocations: currentLocations.current, isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, setLocation: setLocation, APIKEY: APIKEY, chooseLocation: onChangeLocation, locationRange: locationRange, customRange: customRange })] }));
+    const LocationEl = (_jsxs(ConfigProvider, { classPrefix: "wedatea2td", children: [_jsxs("div", { className: classNames('_weda-fn-map', className), "data-testid": "_weda-fn-map", style: style, children: [_jsx(Header, { placeholder: placeholder, isEdit: userSelectStatus === 'selected', info: location, onClick: handleChooseLocation, disabled: disabled, showLngLat: showLngLat, locationType: locationType, apiKeyStatus: apiKeyStatus, currentLocStatus: currentLocStatus, dataSourceStatus: dataSourceStatus.status, readOnly: readOnly }), getIsShowMap() ? (_jsx("div", { className: classNames('form-location-map-pc'), children: _jsx(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }) })) : null] }), _jsx(SelectModal, { readOnly: readOnly, currentLocations: currentLocations.current, isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, setLocation: setLocation, APIKEY: APIKEY, chooseLocation: onChangeLocation, locationRange: locationRange, customRange: customRange })] }));
     return renderDecorator(LocationEl, decorator)({
         id,
         className: cls,

package/dist/web/components/form/select/allTimePicker/calendar.css

@@ -50,7 +50,7 @@
 }
 
 .weda-ui-custom-calendar-op__select.is-active {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
 }
 
 .weda-ui-custom-calendar-op__select.is-active .weda-ui-icon-arrow-right {
@@ -105,7 +105,7 @@
 }
 
 .weda-ui-custom-calendar__days-item.is-current {
-  background-color: #0052d9;
+  background-color: var(--wd-color-brand, #0052d9);
   color: #fff;
 }
 

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

@@ -43,13 +43,12 @@
 .weda-ui-custom-picker__header-cancle {
   flex: 0 0 auto;
   padding: 0 20px;
-  font-size: 16px;
-  color: rgba(0, 0, 0, 0.6);
   cursor: pointer;
+  font: var(--wd-typography-body-md);
 }
 
 .weda-ui-custom-picker__header-confirm {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
 }
 
 .weda-ui-custom-picker__header-title {
@@ -78,7 +77,7 @@
 }
 
 .weda-ui-custom-picker__select-item.is-current {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
 }
 
 .weda-ui-custom-picker__cloumns {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './style';
-export declare function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, params, }: {
+export declare function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, params, onSearchValueInput, }: {
     updateValue: any;
     selectedValue: any;
     options: any;
@@ -11,4 +11,5 @@ export declare function SelectPickerH5({ updateValue, selectedValue, options, is
     status: any;
     isShow: any;
     params: any;
+    onSearchValueInput: any;
 }): JSX.Element;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, useMemo } from 'react';
+import { useRef, useState } from 'react';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@react-hookz/web';
 import { Portal } from '../../../common/portal';
 import { Status } from '../status';
 import Loading from '../status/loading';
@@ -7,58 +8,62 @@ import Retry from '../status/retry';
 import Empty from '../status/empty';
 import AllEmpty from '../status/allEmpty';
 import { PAGE_SIZE, requestFatherRelatedOption, RequestOptionType, } from '../request';
+import classNames from '../../../../utils/classnames';
 import './style';
-export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, params, }) {
+export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, params, onSearchValueInput, }) {
     const focusRef = useRef();
     const contentRef = useRef();
     const heightRef = useRef(0);
     const indexRef = useRef(1);
     const [inputFocus, setInputFocus] = useState(false);
     const [searchValue, setSearchValue] = useState('');
-    const clickIndex = useMemo(() => {
+    const clickIndex = useDeepCompareMemo(() => {
         if (selectedValue) {
             // 优先本地查找
             const index = options === null || options === void 0 ? void 0 : options.findIndex((item) => item.value === selectedValue);
-            if (options.length > 0 &&
+            const needFetch = options.length > 0 &&
                 options.length <= PAGE_SIZE &&
-                searchValue === '') {
-                // 没找到接口查询，该代码只执行一次，使用options.length > PAGE_SIZE限制
-                if (index === -1) {
-                    // 本地没找到
-                    ((params === null || params === void 0 ? void 0 : params.dataSourceName) || (params === null || params === void 0 ? void 0 : params.viewId)) &&
-                        requestFatherRelatedOption(params, 1, RequestOptionType.EQUAL, selectedValue).then((value) => {
-                            if (value && value.option.length > 0) {
-                                // eslint-disable-next-line rulesdir/no-call-upper-scope-func-in-use-memo -- 改不动了
-                                updateValue(value.option[0], true, false, false);
-                            }
-                            else {
-                                // 没有找到选中值value，清空历史选中数据
-                                // eslint-disable-next-line rulesdir/no-call-upper-scope-func-in-use-memo -- 改不动了
-                                clear();
-                            }
-                        });
+                searchValue === '' &&
+                ((params === null || params === void 0 ? void 0 : params.dataSourceName) || (params === null || params === void 0 ? void 0 : params.viewId));
+            if (index === -1) {
+                if (needFetch) {
+                    requestFatherRelatedOption(params, 1, RequestOptionType.EQUAL, selectedValue).then((value) => {
+                        if (value && value.option.length > 0) {
+                            updateValue(value.option[0], true, false, false);
+                        }
+                        else {
+                            updateValue({ value: selectedValue }, true, false, false);
+                        }
+                    });
                 }
+                else {
+                    updateValue({ value: selectedValue }, true, false, false);
+                }
+            }
+            else {
+                updateValue(options[index], true, false, false);
             }
-            // eslint-disable-next-line rulesdir/no-call-upper-scope-func-in-use-memo -- 改不动了
-            updateValue(options[index], true, false, false);
             return index;
         }
         else {
-            return 0;
+            let index = -1;
+            options.some((item, i) => {
+                if (!(item === null || item === void 0 ? void 0 : item.disabled)) {
+                    index = i;
+                    return true;
+                }
+            });
+            return index;
         }
     }, [options, selectedValue]);
-    useEffect(() => {
-        if (isShow) {
-            onSearchValue(searchValue);
-        }
-        else {
-            onSearchValue('');
-        }
+    useDeepCompareEffect(() => {
+        const v = isShow ? searchValue : '';
+        onSearchValue(v);
     }, [searchValue, isShow]);
-    const clear = () => {
+    const onClose = () => {
         setInputFocus(false);
         setSearchValue('');
-        updateValue(undefined, true, true, true);
+        updateValue(null, false, 'close', false);
     };
     const contentScroll = () => {
         if (status !== Status.LOADING || !isTurnPages) {
@@ -86,16 +91,19 @@ export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPage
             loadMore();
         }
     };
-    return isShow ? (_jsx(Portal, { type: "div", disableOutsidePointerEvents: true, disableOutsideScroll: true, children: _jsxs("div", { className: "weda-ui-custom-picker", children: [_jsx("div", { className: "weda-ui-custom-backdrop", onClick: () => {
-                        setInputFocus(false);
-                        setSearchValue('');
-                        updateValue(undefined, false, true, false);
-                    } }), _jsxs("div", { className: "weda-ui-custom-picker__inner", style: inputFocus ? { height: 'calc(100vh - 96px)' } : null, children: [!inputFocus && (_jsx("div", { className: "weda-ui-custom-picker__header", children: _jsx("div", { className: "weda-ui-custom-picker__header-cancle", onClick: clear, children: "\u6E05\u7A7A" }) })), _jsxs("div", { className: "weda-ui-custom-picker__body", children: [_jsxs("div", { style: { margin: inputFocus ? '16px 16px 8px 16px' : '8px 16px' }, className: `weda-ui-custom-search
+    return isShow ? (_jsx(Portal, { type: "div", disableOutsidePointerEvents: true, disableOutsideScroll: true, children: _jsxs("div", { className: "weda-ui-custom-picker", children: [_jsx("div", { className: "weda-ui-custom-backdrop", onClick: onClose }), _jsxs("div", { className: "weda-ui-custom-picker__inner", style: inputFocus ? { height: 'calc(100vh - 96px)' } : null, children: [!inputFocus && (_jsx("div", { className: "weda-ui-custom-picker__header", children: _jsx("div", { className: "weda-ui-custom-picker__header-cancle", onClick: onClose, children: "\u53D6\u6D88" }) })), _jsxs("div", { className: "weda-ui-custom-picker__body", children: [_jsxs("div", { style: { margin: inputFocus ? '16px 16px 8px 16px' : '8px 16px' }, className: `weda-ui-custom-search
           ${inputFocus ? 'is-focused' : ''}`, children: [_jsxs("div", { className: "weda-ui-custom-search-box ", "data-testid": "weda-ui-custom-search-box", onClick: () => {
                                                 setInputFocus(true);
-                                            }, children: [inputFocus ? (_jsx("input", { className: "weda-ui-input", ref: focusRef, value: searchValue, autoFocus: true, onChange: (e) => setSearchValue(e.target.value) })) : (
+                                            }, children: [inputFocus ? (_jsx("input", { className: "weda-ui-input", ref: focusRef, value: searchValue, autoFocus: true, onChange: (e) => {
+                                                        const tValue = e.target.value.trim();
+                                                        setSearchValue(tValue);
+                                                        onSearchValueInput === null || onSearchValueInput === void 0 ? void 0 : onSearchValueInput(tValue);
+                                                    } })) : (
                                                 // 此处主要为了兼容 iOS
-                                                _jsx("div", { className: "weda-ui-input" })), _jsxs("div", { className: `weda-ui-custom-search-box__label`, children: [_jsx("span", { className: "weda-ui-custom-search-box__search-icon " }), _jsx("span", { className: "weda-ui-custom-search-box__search-placeholder", children: "\u641C\u7D22" })] }), inputFocus && searchValue !== '' && (_jsx("span", { className: "weda-ui-custom-search-box__dismiss-icon", onClick: () => setSearchValue('') }))] }), _jsx("button", { className: "weda-ui-custom-search__btn-cancle", onClick: () => {
+                                                _jsx("div", { className: "weda-ui-input" })), _jsxs("div", { className: `weda-ui-custom-search-box__label`, children: [_jsx("span", { className: "weda-ui-custom-search-box__search-icon " }), _jsx("span", { className: "weda-ui-custom-search-box__search-placeholder", children: "\u641C\u7D22" })] }), inputFocus && searchValue !== '' && (_jsx("span", { className: "weda-ui-custom-search-box__dismiss-icon", onClick: () => {
+                                                        setSearchValue('');
+                                                        onSearchValueInput === null || onSearchValueInput === void 0 ? void 0 : onSearchValueInput('');
+                                                    } }))] }), _jsx("button", { className: "weda-ui-custom-search__btn-cancle", onClick: () => {
                                                 setInputFocus(false);
                                                 setSearchValue('');
                                             }, children: "\u53D6\u6D88" })] }), status === Status.ALl_EMPTY ? (_jsx(AllEmpty, { height: inputFocus ? 'calc(100vh - 160px)' : '280px' })) : (_jsx("div", { className: "weda-ui-custom-picker__cloumns weda-ui-custom-picker__cloumns--select ", "data-testid": "weda-ui-custom-picker__cloumns", style: {
@@ -103,12 +111,15 @@ export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPage
                                     }, onScroll: contentScroll, ref: contentRef, children: _jsxs("ul", { className: "weda-ui-custom-picker__cloumn", style: {
                                             height: inputFocus ? 'calc(100vh - 190px)' : '250px',
                                         }, children: [options === null || options === void 0 ? void 0 : options.map((item, index) => {
-                                                return (_jsx("li", { 
-                                                    // is-selected 选中态
-                                                    // is-disabled 禁用态，该状态备用，暂时不让生效index === -1
-                                                    className: `weda-ui-custom-picker__cloumn-item ${index === clickIndex && !inputFocus
-                                                        ? 'is-selected'
-                                                        : ''}  ${index === -1 ? 'is-disabled' : ''}`, onClick: () => {
+                                                // is-selected 选中态
+                                                // is-disabled 禁用态，该状态备用，暂时不让生效index === -1
+                                                const itemCls = classNames('weda-ui-custom-picker__cloumn-item', {
+                                                    'is-selected': index === clickIndex && !inputFocus,
+                                                    'is-disabled': index === -1 || item.disabled,
+                                                });
+                                                return (_jsx("li", { className: itemCls, onClick: () => {
+                                                        if (item.disabled)
+                                                            return;
                                                         setInputFocus(false);
                                                         setSearchValue('');
                                                         updateValue(item, true, true, true);