@cloudbase/weda-ui 3.4.2 → 3.4.4

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

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { Portal } from '../../../common/portal';
+import './index.css';
+import { Status } from '../status';
+import Loading from '../status/loading';
+import Retry from '../status/retry';
+import Empty from '../status/empty';
+import AllEmpty from '../status/allEmpty';
+import { PAGE_SIZE, requestFatherRelatedOption, RequestOptionType, } from '../request';
+export function SelectPickerH5({ updateValue, selectedValue, options, isTurnPages, loadMore, onSearchValue, reTry, status, isShow, params, }) {
+    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(() => {
+        if (selectedValue) {
+            // 优先本地查找
+            const index = options === null || options === void 0 ? void 0 : options.findIndex((item) => item.value === selectedValue);
+            if (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);
+                            }
+                            else {
+                                // 没有找到选中值value，清空历史选中数据
+                                // eslint-disable-next-line rulesdir/no-call-upper-scope-func-in-use-memo -- 改不动了
+                                clear();
+                            }
+                        });
+                }
+                else {
+                    // eslint-disable-next-line rulesdir/no-call-upper-scope-func-in-use-memo -- 改不动了
+                    updateValue(options[index], true, false);
+                }
+            }
+            return index;
+        }
+        else {
+            return 0;
+        }
+    }, [options, selectedValue]);
+    useEffect(() => {
+        if (isShow) {
+            onSearchValue(searchValue);
+        }
+        else {
+            onSearchValue('');
+        }
+    }, [searchValue, isShow]);
+    const clear = () => {
+        setInputFocus(false);
+        setSearchValue('');
+        updateValue(undefined, true, true);
+    };
+    const contentScroll = () => {
+        if (status !== Status.LOADING || !isTurnPages) {
+            return;
+        }
+        const item = contentRef.current.children.item(0);
+        if (!item) {
+            return;
+        }
+        if (heightRef.current === 0) {
+            const length = options.length + (status === Status.FINISH ? 0 : 1);
+            heightRef.current = item.scrollHeight / length;
+        }
+        const index = Math.ceil((item.scrollTop + item.clientHeight) / heightRef.current);
+        // 过滤重复数据
+        if (indexRef.current === index) {
+            return;
+        }
+        indexRef.current = index;
+        // 到底了，加载更多
+        // -20标识提前20条数据加载，||后面条件为保底条件，防止前面触发不了
+        if (options.length >= PAGE_SIZE &&
+            ((index + 20) % PAGE_SIZE === 0 || options.length + 1 <= index) &&
+            status === Status.LOADING) {
+            loadMore();
+        }
+    };
+    return isShow ? (React.createElement(Portal, { type: "div" },
+        React.createElement("div", { className: "weda-ui-custom-picker" },
+            React.createElement("div", { className: "weda-ui-custom-backdrop", onClick: () => {
+                    setInputFocus(false);
+                    setSearchValue('');
+                    updateValue(undefined, false, true);
+                } }),
+            React.createElement("div", { className: "weda-ui-custom-picker__inner", style: inputFocus ? { height: 'calc(100vh - 96px)' } : null },
+                !inputFocus && (React.createElement("div", { className: "weda-ui-custom-picker__header" },
+                    React.createElement("div", { className: "weda-ui-custom-picker__header-cancle", onClick: clear }, "\u6E05\u7A7A"))),
+                React.createElement("div", { className: "weda-ui-custom-picker__body" },
+                    React.createElement("div", { style: { margin: inputFocus ? '16px 16px 8px 16px' : '8px 16px' }, className: `weda-ui-custom-search
+          ${inputFocus ? 'is-focused' : ''}` },
+                        React.createElement("div", { className: "weda-ui-custom-search-box ", "data-testid": "weda-ui-custom-search-box", onClick: () => {
+                                setInputFocus(true);
+                            } },
+                            inputFocus ? (React.createElement("input", { className: "weda-ui-input", ref: focusRef, value: searchValue, autoFocus: true, onChange: (e) => setSearchValue(e.target.value) })) : (
+                            // 此处主要为了兼容 iOS
+                            React.createElement("div", { className: "weda-ui-input" })),
+                            React.createElement("div", { className: `weda-ui-custom-search-box__label` },
+                                React.createElement("span", { className: "weda-ui-custom-search-box__search-icon " }),
+                                React.createElement("span", { className: "weda-ui-custom-search-box__search-placeholder" }, "\u641C\u7D22")),
+                            inputFocus && searchValue !== '' && (React.createElement("span", { className: "weda-ui-custom-search-box__dismiss-icon", onClick: () => setSearchValue('') }))),
+                        React.createElement("button", { className: "weda-ui-custom-search__btn-cancle", onClick: () => {
+                                setInputFocus(false);
+                                setSearchValue('');
+                            } }, "\u53D6\u6D88")),
+                    status === Status.ALl_EMPTY ? (React.createElement(AllEmpty, { height: inputFocus ? 'calc(100vh - 160px)' : '280px' })) : (React.createElement("div", { className: "weda-ui-custom-picker__cloumns weda-ui-custom-picker__cloumns--select ", "data-testid": "weda-ui-custom-picker__cloumns", style: {
+                            height: inputFocus ? 'calc(100vh - 160px)' : '280px',
+                        }, onScroll: contentScroll, ref: contentRef },
+                        React.createElement("ul", { className: "weda-ui-custom-picker__cloumn", style: {
+                                height: inputFocus ? 'calc(100vh - 190px)' : '250px',
+                            } }, options === null || options === void 0 ? void 0 :
+                            options.map((item, index) => {
+                                return (React.createElement("li", { key: index, 
+                                    // is-selected 选中态
+                                    // is-disabled 禁用态，该状态备用，暂时不让生效index === -1
+                                    className: `weda-ui-custom-picker__cloumn-item ${index === clickIndex && !inputFocus
+                                        ? 'is-selected'
+                                        : ''}  ${index === -1 ? 'is-disabled' : ''}`, onClick: () => {
+                                        setInputFocus(false);
+                                        setSearchValue('');
+                                        updateValue(item, true, true);
+                                    } },
+                                    React.createElement("p", null, item.label)));
+                            }),
+                            status === Status.LOADING && (React.createElement("li", { key: 'loading' },
+                                React.createElement(Loading, null))),
+                            status === Status.ERROR && (React.createElement("li", { key: 'retry' },
+                                React.createElement(Retry, { reTry: reTry }))),
+                            status === Status.EMPTY && (React.createElement("li", { key: 'empty' },
+                                React.createElement(Empty, null))))))))))) : null;
+}

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

@@ -0,0 +1,159 @@
+.weda-ui-custom-search {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin: 8px 16px;
+}
+
+.weda-ui-custom-search-box {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0px;
+  background-color: #f1f2f5;
+  border-radius: 4px;
+  height: 100%;
+  position: relative;
+  transition: all 0.5s linear;
+}
+
+.weda-ui-custom-search .weda-ui-input {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  font-size: 16px;
+  line-height: 24px;
+  background-color: inherit;
+  padding: 0 40px 0 40px;
+  caret-color: #0052d9;
+  color: rgba(0, 0, 0, 0.9);
+  border-radius: 4px;
+}
+
+.weda-ui-custom-search-box__label {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.weda-ui-custom-search-box__search-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc2NTUgMTUuMzI3OUMxMy41Mzc4IDE2LjMyMjEgMTEuOTc0MSAxNi45MTc2IDEwLjI3MTQgMTYuOTE3NkM2LjMyNDUzIDE2LjkxNzYgMy4xMjUgMTMuNzE4MSAzLjEyNSA5Ljc3MTMyQzMuMTI1IDUuODI0NTEgNi4zMjQ1MyAyLjYyNSAxMC4yNzE0IDIuNjI1QzE0LjIxODIgMi42MjUgMTcuNDE3NyA1LjgyNDUxIDE3LjQxNzcgOS43NzEzMkMxNy40MTc3IDExLjQ3NDEgMTYuODIyMSAxMy4wMzc4IDE1LjgyOCAxNC4yNjU1TDIxLjEyNSAxOS41NjI1TDIwLjA2MjYgMjAuNjI1TDE0Ljc2NTUgMTUuMzI3OVpNMTUuOTE1MiA5Ljc3MTMyQzE1LjkxNTIgNi42NTQzNCAxMy4zODg0IDQuMTI3NTIgMTAuMjcxNCA0LjEyNzUyQzcuMTU0MzUgNC4xMjc1MiA0LjYyNzUyIDYuNjU0MzQgNC42Mjc1MiA5Ljc3MTMyQzQuNjI3NTIgMTIuODg4MyA3LjE1NDM1IDE1LjQxNTEgMTAuMjcxNCAxNS40MTUxQzEzLjM4ODQgMTUuNDE1MSAxNS45MTUyIDEyLjg4ODMgMTUuOTE1MiA5Ljc3MTMyWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+Cjwvc3ZnPgo=);
+  background-repeat: no-repeat;
+}
+
+.weda-ui-custom-search-box__dismiss-icon {
+  position: absolute;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjUgMTJDMjIuNSA2LjIwMTAxIDE3Ljc5OSAxLjUgMTIgMS41QzYuMjAxMDEgMS41IDEuNSA2LjIwMTAxIDEuNSAxMkMxLjUgMTcuNzk5IDYuMjAxMDEgMjIuNSAxMiAyMi41QzE3Ljc5OSAyMi41IDIyLjUgMTcuNzk5IDIyLjUgMTJaTTguNTA2MzYgNy40MjEzMUwxMiAxMC45MzYxTDE1LjQ5MzcgNy40MjEzMUwxNi41NTc1IDguNDc4NzZMMTMuMDU3NSAxMkwxNi41NTc1IDE1LjUyMTJMMTUuNDkzNyAxNi41Nzg3TDEyIDEzLjA2MzlMOC41MDYzNyAxNi41Nzg3TDcuNDQyNTEgMTUuNTIxMkwxMC45NDI1IDEyTDcuNDQyNSA4LjQ3ODc2TDguNTA2MzYgNy40MjEzMVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+}
+
+.weda-ui-custom-search__btn-cancle {
+  flex: 0 0 auto;
+  display: none;
+  margin-left: 16px;
+  color: #0052d9;
+  background-color: transparent;
+  border: none;
+}
+
+/* 获取焦点后 */
+.weda-ui-custom-search.is-focused .weda-ui-custom-search__btn-cancle {
+  display: inline-flex;
+}
+
+.weda-ui-custom-search.is-focused .weda-ui-custom-search-box__label {
+  left: 12px;
+  transform: translateX(0);
+}
+
+.weda-ui-custom-search.is-focused
+  .weda-ui-custom-search-box__search-placeholder {
+  display: none;
+}
+
+.weda-ui-custom-picker__cloumn-item.is-current {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
+  .weda-ui-custom-picker__cloumn-item {
+  height: 48px;
+  justify-content: flex-start;
+  color: rgba(0, 0, 0, 0.9);
+  position: relative;
+}
+
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
+  .weda-ui-custom-picker__cloumn-item::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  background-color: #e7e7e7;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
+  .weda-ui-custom-picker__cloumn-item.is-selected {
+  color: #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;
+  position: absolute;
+  right: 16px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNjUwNTMgMTQuODgyM0wxOC45ODQ1IDUuNTQ4MzRMMjAuMzYzNCA2LjkyNzJMOS42NTA1MyAxNy42NEwyLjk2MTQ5IDEwLjk1MUw0LjM0MDM0IDkuNTcyMTVMOS42NTA1MyAxNC44ODIzWiIgZmlsbD0iIzAwNTJEOSIvPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+}
+
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select
+  .weda-ui-custom-picker__cloumn-item.is-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+/* 下拉选择类型 */
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select {
+  padding: 0 16px;
+  height: 280px;
+}
+
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select::before,
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select::after {
+  display: none;
+}
+
+.weda-ui-custom-picker__cloumns--select .weda-ui-custom-picker__cloumn {
+  height: 250px;
+}
+
+.form-select-pc {
+  position: relative;
+}
+
+.form-select-pc .pc-clear {
+  position: absolute;
+  right: 22px;
+  top: 25%;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzg4OCIgZD0iTTggMWE3IDcgMCAxIDAgMCAxNEE3IDcgMCAwIDAgOCAxem0zLjUzNiA5LjEyMWwtMS40MTQgMS40MTRMOCA5LjQxNGwtMi4xMjEgMi4xMjEtMS40MTQtMS40MTRMNi41ODYgOCA0LjQ2NCA1Ljg3OWwxLjQxNC0xLjQxNEw4IDYuNTg2bDIuMTIxLTIuMTIxIDEuNDE0IDEuNDE0TDkuNDE0IDhsMi4xMjIgMi4xMjF6Ii8+PC9zdmc+) !important;
+  background-repeat: no-repeat;
+}
+
+.wedatea2td-search--simple .wedatea2td-input--search {
+  caret-color: #000000;
+}

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

@@ -0,0 +1,206 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { SelectPickerH5 } from './h5';
+import { formatNeedDataFetch, PAGE_SIZE, requestEnumOption, requestFatherRelatedOption, RequestOptionType, transFormatTeaSelectKey, } from '../request';
+import SelectPickerPc from './pc';
+import { usePlatform } from '../../../../utils/platform';
+import { Status } from '../status';
+import { useDeepCompareEffect } from '@react-hookz/web';
+export function PureSelect({ params, selectedValue, updateValue, placeholder, size, disabled, isShow, }) {
+    const isRequestingRef = useRef(false);
+    const [status, setStatus] = useState(Status.ALl_EMPTY);
+    const [options, setOptions] = useState([]);
+    const [page, setPage] = useState(1);
+    const [searchOptions, setSearchOptions] = useState([]);
+    const [searchPage, setSearchPage] = useState(1);
+    const [searchValue, setSearchValue] = useState('');
+    const [searchStatus, setSearchStatus] = useState(Status.FINISH);
+    const [format, setFormat] = useState('');
+    const [isTurnPages, setIsTurnPages] = useState(false);
+    const platform = usePlatform();
+    const isSearch = useMemo(() => searchValue !== '', [searchValue]);
+    useDeepCompareEffect(() => {
+        const { format, controlledValue } = params || {
+            format: '',
+            controlledValue: [],
+        };
+        const isTurnPages = format === 'father-son' || format === 'related';
+        setFormat(format);
+        setIsTurnPages(isTurnPages);
+        // 手动配置
+        if (!formatNeedDataFetch.includes(format)) {
+            if (controlledValue.length === 0) {
+                setStatus(Status.ALl_EMPTY);
+            }
+            else {
+                setStatus(Status.FINISH);
+            }
+            setOptions(controlledValue);
+            return;
+        }
+        // 接口请求
+        if (isTurnPages) {
+            setStatus(Status.LOADING);
+            requestFatherRelatedOption(params, 1, RequestOptionType.ALL)
+                .then((value) => {
+                setOptions(value.option);
+                if (value.option.length === 0) {
+                    setStatus(platform === 'pc' ? Status.EMPTY : Status.ALl_EMPTY);
+                }
+                else {
+                    setStatus(value.isLoadMore ? Status.LOADING : Status.FINISH);
+                }
+            })
+                .catch(() => {
+                setStatus(Status.ERROR);
+            })
+                .finally(() => (isRequestingRef.current = false));
+        }
+        else if (format === 'x-enum') {
+            requestEnumOption(params)
+                .then((value) => {
+                setOptions(value);
+                if (value.length === 0) {
+                    setStatus(platform === 'pc' ? Status.EMPTY : Status.ALl_EMPTY);
+                }
+                else {
+                    setStatus(Status.FINISH);
+                }
+            })
+                .catch(() => {
+                setStatus(Status.ERROR);
+            })
+                .finally(() => (isRequestingRef.current = false));
+        }
+    }, [params]);
+    useEffect(() => {
+        if (page > 1) {
+            requestFatherRelated(page);
+        }
+    }, [page]);
+    useEffect(() => {
+        if (searchPage > 1) {
+            requestFatherRelated(searchPage, searchValue);
+        }
+    }, [searchPage]);
+    const requestFatherRelated = (pageNo, searchValue) => {
+        requestFatherRelatedOption(params, pageNo, RequestOptionType.SEARCH, searchValue)
+            .then((value) => {
+            if (isSearch) {
+                setSearchOptions((opt) => opt.concat(value.option));
+                if (pageNo === 1 && value.option.length === 0) {
+                    setSearchStatus(Status.EMPTY);
+                }
+                else {
+                    setSearchStatus(value.isLoadMore ? Status.LOADING : Status.FINISH);
+                }
+            }
+            else {
+                setOptions((opt) => opt.concat(value.option));
+                if (pageNo === 1 && value.option.length === 0) {
+                    setStatus(Status.EMPTY);
+                }
+                else {
+                    setStatus(value.isLoadMore ? Status.LOADING : Status.FINISH);
+                }
+            }
+        })
+            .catch(() => isSearch ? setSearchStatus(Status.ERROR) : setStatus(Status.ERROR))
+            .finally(() => (isRequestingRef.current = false));
+    };
+    const currentStatus = useMemo(() => {
+        return isSearch ? searchStatus : status;
+    }, [isSearch, searchStatus, status]);
+    const currentOption = useMemo(() => {
+        const option = isSearch ? searchOptions : options;
+        return platform === 'h5' ? option : transFormatTeaSelectKey(option);
+    }, [isSearch, searchOptions, options, platform]);
+    useEffect(() => {
+        // 本地搜索
+        if (!isTurnPages || options.length < PAGE_SIZE) {
+            const searchOpt = options.filter((item) => {
+                if (item.label) {
+                    return item.label.toString().includes(searchValue);
+                }
+                return false;
+            });
+            if (searchOpt.length > 0) {
+                setSearchOptions(searchOpt);
+                setSearchStatus(Status.FINISH);
+            }
+            else {
+                setSearchOptions([]);
+                setSearchStatus(Status.EMPTY);
+            }
+            return;
+        }
+        // 远程搜索
+        if (searchValue.trim().length > 0) {
+            // eslint-disable-next-line rulesdir/no-timer
+            const timer = setTimeout(() => {
+                requestFatherRelated(1, searchValue);
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+    }, [searchValue]);
+    // 加载更多
+    const loadMore = () => {
+        if (!isRequestingRef.current &&
+            isTurnPages &&
+            currentStatus !== Status.FINISH) {
+            if (isSearch) {
+                if (searchOptions.length >= PAGE_SIZE) {
+                    isRequestingRef.current = true;
+                    setSearchPage((page) => page + 1);
+                }
+            }
+            else {
+                if (options.length >= PAGE_SIZE) {
+                    isRequestingRef.current = true;
+                    setPage((page) => page + 1);
+                }
+            }
+        }
+    };
+    // 重试
+    const reTry = () => {
+        if (!isRequestingRef.current) {
+            isRequestingRef.current = true;
+            if (isSearch) {
+                setSearchStatus(Status.LOADING);
+                requestFatherRelated(searchPage, searchValue);
+            }
+            else {
+                setStatus(Status.LOADING);
+                requestFatherRelated(page);
+            }
+        }
+    };
+    const onSearchValue = (value) => {
+        setSearchPage(1);
+        setSearchStatus(Status.LOADING);
+        setSearchOptions([]);
+        setSearchValue(value);
+    };
+    /**
+     * 精确查找
+     */
+    const findData = async () => {
+        if ((params === null || params === void 0 ? void 0 : params.dataSourceName) === undefined || (params === null || params === void 0 ? void 0 : params.viewId) === undefined) {
+            return undefined;
+        }
+        return requestFatherRelatedOption(params, 1, RequestOptionType.EQUAL, selectedValue).then((value) => {
+            if (value && value.option.length > 0) {
+                if (platform === 'pc' &&
+                    options.length > 0 &&
+                    options[0].value != selectedValue) {
+                    setOptions((opt) => value.option.concat(opt));
+                }
+                return options[0].value;
+            }
+            else {
+                return undefined;
+            }
+        });
+    };
+    return platform === 'h5' ? (React.createElement(SelectPickerH5, { updateValue: updateValue, options: currentOption, loadMore: loadMore, reTry: reTry, isTurnPages: isTurnPages, status: currentStatus, onSearchValue: onSearchValue, isShow: isShow, params: params, selectedValue: selectedValue })) : (React.createElement(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 }));
+}

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

@@ -0,0 +1,113 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { useDeepCompareEffect } from '@react-hookz/web';
+import { Select, ConfigProvider, Icon } from 'tea-component';
+import Loading from '../status/loading';
+import Retry from '../status/retry';
+import { Status } from '../status';
+import Empty from '../status/empty';
+import './index.css';
+export default function SelectPickerPc({ format, selectedValue, updateValue, placeholder, size, disabled, reTry, loadMore, status, options, onSearchValue, defaultSearchValue, findData, }) {
+    const [showDelete, setShowDelete] = useState(false);
+    const [optList, setOptList] = useState(options);
+    const findDataRef = useRef(undefined);
+    useEffect(() => {
+        if (findDataRef.current && findDataRef.current.value) {
+            const opt = options.filter((item, index) => {
+                if (index === 0) {
+                    // 有回显的数据，回显数据通过findData插入在第一个，所以第一个不能过滤掉
+                    return true;
+                }
+                else {
+                    // 如果是第一个后面的数据，发现和选中项的 value 一样，则忽略，因为index === 0已经加进去了
+                    return item.value !== findDataRef.current.value;
+                }
+            });
+            setOptList(opt);
+        }
+        else {
+            setOptList(options);
+        }
+    }, [options]);
+    useDeepCompareEffect(() => {
+        if (status === Status.ALl_EMPTY) {
+            return;
+        }
+        // 没有数据
+        if (optList.length === 0) {
+            updateValue && updateValue(null);
+            return;
+        }
+        //有数据
+        if (selectedValue) {
+            const index = optList === null || optList === void 0 ? void 0 : optList.findIndex((item) => item.value === selectedValue);
+            if (index === -1) {
+                findData &&
+                    findData().then((value) => {
+                        if (value) {
+                            // 找到了
+                            findDataRef.current = value;
+                        }
+                        else {
+                            // 没找到
+                            updateValue && updateValue(null);
+                        }
+                    });
+            }
+            else {
+                // 找到了
+                updateValue(optList[index].value);
+            }
+        }
+        else {
+            // 用户自动输入 '' ， undefined , null三种状态清空
+            updateValue && updateValue(selectedValue);
+        }
+    }, [optList, selectedValue, status]);
+    const isShowBottomTips = useMemo(() => {
+        if (status === Status.LOADING) {
+            return React.createElement(Loading, null);
+        }
+        else if (status === Status.ERROR) {
+            return React.createElement(Retry, { reTry: reTry });
+        }
+        else if (status === Status.EMPTY) {
+            return React.createElement(Empty, null);
+        }
+        else {
+            return '';
+        }
+    }, [format, status, optList]);
+    return (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { "data-testid": "form-select", className: 'form-select-pc', onMouseEnter: () => {
+                setShowDelete(true);
+            }, onMouseLeave: () => {
+                setShowDelete(false);
+            } },
+            React.createElement(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: updateValue, 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('');
+                    }
+                } }),
+            selectedValue != null &&
+                selectedValue != '' &&
+                showDelete &&
+                !disabled && (React.createElement(Icon, { "data-testid": "weui-input-test-pc-clear", className: 'pc-clear', type: "dismiss", size: "s", onMouseDown: () => updateValue(null) })))));
+}