@cloudbase/weda-ui 3.10.3 → 3.11.1

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

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useState, useImperativeHandle, useMemo, useEffect, useCallback, } from 'react';
+import { LoadingTip } from 'tea-component';
+import { SelectUI as Select } from '../select/selectUI';
+import { WdIcon } from '../../wd-icon';
+import { getTableColumns } from '../../wd-table/components/FieldRender';
+import { useAuthFields } from '../../wd-table/hooks/useAuthFields';
+import { usePlatform } from '../../../utils/platform';
+import { DataSource } from '../../../utils/datasource';
+import { EnumHoc } from '../../../utils/hooks/EnumHoc';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { requestEnumOption } from '../../form/select/request';
+import { convertWhere } from '../../../utils/getModelParams';
+import { useChooseList } from '../../wd-table/hooks/useChooseList';
+const OptionText = ({ mode, option, selectFields, authFields, onChange, onRelationOptionJump, enableRelationOptionJump, }) => {
+    const platform = usePlatform();
+    const columns = useMemo(() => {
+        return getTableColumns({
+            fields: authFields,
+            columnSets: selectFields.map((i) => {
+                var _a, _b;
+                return ({
+                    header: (_a = authFields.find((j) => j.name === i)) === null || _a === void 0 ? void 0 : _a.title,
+                    key: (_b = authFields.find((j) => j.name === i)) === null || _b === void 0 ? void 0 : _b.name,
+                });
+            }),
+            isH5: false,
+            supportManyRelated: true,
+            slots: null,
+            fixedEnd: null,
+            fixedFront: null,
+            showRelationWithTag: false,
+        });
+    }, [authFields, selectFields]);
+    return (_jsxs("div", { className: "wd-relation-select-option-wrap", onClick: (e) => {
+            if (platform === 'pc' && mode !== 'multiple') {
+                e.stopPropagation();
+                e.preventDefault();
+                onChange === null || onChange === void 0 ? void 0 : onChange(option === null || option === void 0 ? void 0 : option.value);
+            }
+        }, children: [_jsxs("div", { className: "wd-relation-select-header", children: [_jsx("p", { className: "wd-relation-select-header-text", children: (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.value) }), enableRelationOptionJump && (_jsx("span", { onClick: () => {
+                            onRelationOptionJump({ item: option });
+                        }, children: _jsx(WdIcon, { name: "td:jump", size: "s", type: "inner" }) }))] }), _jsxs("div", { className: "wd-relation-select-option-group", children: [_jsx("div", { className: "wd-relation-select-option-header", children: columns.map((i) => (_jsx("div", { className: "wd-relation-select-option-text", style: { width: columns.length > 1 ? i.width : 'auto' }, children: i.header }, i.key))) }), _jsx("div", { className: "wd-relation-select-option-content", children: columns.map((i) => (_jsx("div", { className: "wd-relation-select-option-text", style: { width: columns.length > 1 ? i.width : 'auto' }, children: i.render(option === null || option === void 0 ? void 0 : option.extra) }, i.key))) })] })] }));
+};
+// 每次请求数据个数
+const defaultSize = 50;
+const defaultPage = 1;
+export function RelationSelect(props) {
+    const { placeholder, size, disabled, onChange, value, onSearch, addRelationButton, childRef, dataSourceName, selectFields, selectFieldType, primaryField, setRefreshStatus, mode, onRelationOptionJump, enableRelationOptionJump, } = props;
+    const { authFields } = useAuthFields({
+        dbName: dataSourceName,
+        dbFieldNames: [],
+        isNewData: true,
+        isModel: true,
+        columnSetsKey: [],
+        connectorMethod: '',
+        isNoDataSourceBind: false,
+        isExpression: false,
+        isApis: false,
+    });
+    // 是否具备展示自定义字段的条件
+    const isRelationSelectOption = selectFieldType === 'custom' && (selectFields === null || selectFields === void 0 ? void 0 : selectFields.length) && (authFields === null || authFields === void 0 ? void 0 : authFields.length);
+    const dataSourceAPI = useMemo(() => new DataSource(dataSourceName), [dataSourceName]); // datasource 方法-模型
+    const whereList = convertWhere(props);
+    const [query, setQuery] = useSyncValue({
+        pageNo: defaultPage,
+        pageSize: defaultSize,
+        where: whereList,
+    }, isObjectEqual);
+    const { result: options, total, isValidating: isLoading, empty, getRelationOptions, } = useChooseList({
+        dataSourceAPI,
+        childDbName: dataSourceName,
+        queryParams: query,
+        primaryColumn: primaryField,
+        value,
+    });
+    // 下拉选项数据
+    const customOptions = useMemo(() => {
+        return isRelationSelectOption
+            ? options === null || options === void 0 ? void 0 : options.map((i) => ({
+                ...i,
+                text: (_jsx(OptionText, { mode: mode, option: i, selectFields: selectFields, authFields: authFields, onChange: onChange, onRelationOptionJump: onRelationOptionJump, enableRelationOptionJump: enableRelationOptionJump })),
+            }))
+            : options;
+    }, [
+        authFields,
+        enableRelationOptionJump,
+        isRelationSelectOption,
+        mode,
+        onChange,
+        onRelationOptionJump,
+        options,
+        selectFields,
+    ]);
+    const searchOptionListWithWhere = useCallback((where = whereList) => {
+        empty();
+        setQuery({ ...query, pageNo: defaultPage, where });
+    }, [empty, query, setQuery, whereList]);
+    useImperativeHandle(childRef, () => {
+        return {
+            refresh: async () => {
+                setRefreshStatus(true);
+                if (query.pageNo === defaultPage) {
+                    await getRelationOptions();
+                }
+                else {
+                    searchOptionListWithWhere();
+                }
+                // eslint-disable-next-line rulesdir/no-timer
+                const timer = setTimeout(() => {
+                    setRefreshStatus(false);
+                    clearTimeout(timer);
+                }, 500);
+            },
+        };
+    }, [
+        getRelationOptions,
+        query.pageNo,
+        searchOptionListWithWhere,
+        setRefreshStatus,
+    ]);
+    const searchHandle = (keyword) => {
+        let where = whereList;
+        if (keyword === null || keyword === void 0 ? void 0 : keyword.length) {
+            // 筛选面板的查询条件与数据过滤的查询条件是且的关系
+            where = {
+                $and: [
+                    ...whereList,
+                    { $and: [{ [primaryField]: { $search: keyword } }] },
+                ],
+            };
+        }
+        searchOptionListWithWhere(where);
+        onSearch(keyword);
+    };
+    return (_jsx(EnumHoc, { fields: authFields, children: _jsx(Select, { ...props, overlayClassName: isRelationSelectOption ? 'wd-relation-select-overlay' : '', searchable: true, matchButtonWidth: true, placeholder: placeholder, appearance: 'button', size: size, disabled: disabled, autoClearSearchValue: true, options: customOptions, value: value, onChange: onChange, onSearch: searchHandle, tips: isLoading ? '' : undefined, bottomTips: isLoading ? _jsx(LoadingTip, {}) : undefined, onScrollBottom: () => {
+                if (!isLoading && customOptions.length < total) {
+                    setQuery((query) => ({
+                        ...query,
+                        pageNo: query.pageNo + defaultPage,
+                    }));
+                }
+            }, onOpen: () => {
+                searchOptionListWithWhere();
+            }, footer: addRelationButton, mode: mode }) }));
+}
+export function EnumSelect(props) {
+    const { placeholder, size, disabled, onChange, value, onSearch, addRelationButton, childRef, dataSourceName, enumName, primaryField, format, viewId, where, setRefreshStatus, mode, } = props;
+    const [enumOption, setEnumOption] = useState([]);
+    const [isLoading, setLoading] = useState(false);
+    // 获取枚举字段类型的下拉选项
+    const getEnumOption = useCallback(async () => {
+        const params = {
+            format,
+            dataSourceName,
+            viewId,
+            where,
+            primaryField,
+            enumName,
+        };
+        setLoading(true);
+        const options = await requestEnumOption(params);
+        setEnumOption(options);
+        setLoading(false);
+    }, [dataSourceName, enumName, format, primaryField, viewId, where]);
+    useEffect(() => {
+        getEnumOption();
+    }, [getEnumOption]);
+    useImperativeHandle(childRef, () => {
+        return {
+            refresh: async () => {
+                setRefreshStatus(true);
+                await getEnumOption();
+                // eslint-disable-next-line rulesdir/no-timer
+                const timer = setTimeout(() => {
+                    setRefreshStatus(false);
+                    clearTimeout(timer);
+                }, 500);
+            },
+        };
+    }, [getEnumOption, setRefreshStatus]);
+    const searchHandle = (keyword) => {
+        onSearch(keyword);
+    };
+    return (_jsx(Select, { ...props, mode: mode, searchable: true, matchButtonWidth: true, placeholder: placeholder, appearance: 'button', size: size, disabled: disabled, autoClearSearchValue: true, options: enumOption, value: value, onChange: onChange, onSearch: searchHandle, footer: addRelationButton, bottomTips: isLoading ? _jsx(LoadingTip, {}) : undefined }));
+}
+export function CustomSelect(props) {
+    const { format, addRelationButtonText, enableAddRelationButton, events } = props;
+    const isEnumType = format === 'x-enum';
+    const [refreshStatus, setRefreshStatus] = useState(false);
+    const listWidth = 700;
+    const addRelationButton = enableAddRelationButton && (_jsxs("span", { className: "wd-add-relation-button-wrap", onClick: () => {
+            var _a;
+            (_a = events === null || events === void 0 ? void 0 : events.onAddRelationButtonClick) === null || _a === void 0 ? void 0 : _a.call(events);
+        }, children: [_jsx(WdIcon, { size: 'xs', name: 'td:add-circle' }), addRelationButtonText] }));
+    if (refreshStatus) {
+        return _jsx(LoadingTip, {});
+    }
+    return isEnumType ? (_jsx(EnumSelect, { ...props, addRelationButton: addRelationButton, setRefreshStatus: setRefreshStatus, listWidth: listWidth })) : (_jsx(RelationSelect, { ...props, addRelationButton: addRelationButton, setRefreshStatus: setRefreshStatus, listWidth: listWidth, searchPlaceholder: '搜索主列' }));
+}

package/dist/web/components/wd-select/{relationalSetting.js → relationSelect/relationalSetting.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import WdIcon from '../wd-icon';
-import { useConfig } from '../../utils/config-context';
-import { useSize } from '../../utils/hooks/useFormLegacy';
-import classNames from '../../utils/classnames';
+import WdIcon from '../../wd-icon';
+import { useConfig } from '../../../utils/config-context';
+import { useSize } from '../../../utils/hooks/useFormLegacy';
+import classNames from '../../../utils/classnames';
 export const RelationalSetting = ({ refresh, setting, size: _size, enableRelationalSetting, enableRelationalRefresh, }) => {
     const { classPrefix } = useConfig();
     const size = useSize({ size: _size });

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfigProvider } from 'tea-component';
+import { CustomSelect } from '../relationSelect/relationSelect';
+import { SelectUI as Select } from './selectUI';
+export function SelectCom(props) {
+    const { isRelation } = props;
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: isRelation ? _jsx(CustomSelect, { ...props }) : _jsx(Select, { ...props }) }));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import '../style';
+export declare function SelectUI(props: any): JSX.Element;

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

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { Select, SelectMultiple, List } from 'tea-component';
+import { WdFormItemReadOnly } from '../../wd-form-item';
+import { Modal } from '../../wd-date/elements/Modal.h5';
+import classNames from '../../../utils/classnames';
+import { useConfig } from '../../../utils/config-context';
+import { usePlatform } from '../../../utils/platform';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import AllEmpty from '../../form/select/status/allEmpty';
+import '../style';
+const OptionList = ({ options, inputFocus, currentSelected, optionClick, bottomTips, onScrollBottom, }) => {
+    return (_jsxs(List, { className: "weda-ui-custom-picker__cloumn", style: {
+            height: inputFocus ? 'calc(100vh - 190px)' : '250px',
+        }, onScrollBottom: onScrollBottom, children: [options === null || options === void 0 ? void 0 : options.map((item, index) => {
+                // is-selected 选中态
+                // is-disabled 禁用态，该状态备用，暂时不让生效index === -1
+                const itemCls = classNames('weda-ui-custom-picker__cloumn-item', {
+                    'is-selected': currentSelected.find((i) => i.value === item.value),
+                    'is-disabled': item.disabled,
+                });
+                return (_jsx(List.Item, { className: itemCls, onClick: () => optionClick(item), children: _jsx("p", { className: 'weda-ui-custom-picker__cloumn-item-text', children: item.text || item.label }) }, index));
+            }), bottomTips && (_jsx(List.Item, { children: _jsx("div", { className: "weda-ui-custom-picker__status weda-ui-custom-picker__status--empty", children: bottomTips }) }))] }));
+};
+const getSelectedItem = (options = [], value) => {
+    if (!value) {
+        return [];
+    }
+    const selectedVal = Array.isArray(value) ? value : [value];
+    return options === null || options === void 0 ? void 0 : options.filter((i) => selectedVal.find((j) => j === i.value));
+};
+function SelectH5(props) {
+    const { placeholder, name, disabled, footer, options, value, onChange, overlayClassName, searchable, bottomTips, onSearch, onOpen, onScrollBottom, mode, readValue, popupContainer, searchPlaceholder, } = props;
+    const isMultiple = mode === 'multiple';
+    const customPickerCls = classNames('weda-ui-custom-picker__cloumns', {
+        'weda-ui-custom-picker__cloumns--select-multiple': isMultiple,
+        'weda-ui-custom-picker__cloumns--select': !isMultiple,
+        [`${overlayClassName}`]: true,
+    });
+    const [visible, setVisible] = useState(false);
+    const { classPrefix } = useConfig();
+    const inputCls = `${classPrefix}-form-select_input`;
+    const focusRef = useRef();
+    // 聚焦在搜索框
+    const [inputFocus, setInputFocus] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [isSearch, setIsSearch] = useState(false);
+    const [currentSelected, setCurrentSelected] = useSyncValue(getSelectedItem(options, value), isObjectEqual);
+    const getOptionList = () => {
+        return options.filter((i) => String(i === null || i === void 0 ? void 0 : i.label).toLowerCase().includes(searchValue.toLowerCase()));
+    };
+    // 前端查询
+    const customOptions = isSearch ? getOptionList() : options;
+    const handleZhStart = () => {
+        // 判断是否输入中文,则停止搜索
+        setIsSearch(false);
+    };
+    const handleZhEnd = (e) => {
+        setIsSearch(true);
+        handleSearch(e);
+    };
+    const handleSearch = (e) => {
+        const tValue = e.target.value.trim();
+        setSearchValue(tValue);
+        if (isSearch) {
+            onSearch(tValue);
+        }
+    };
+    // 搜索框
+    const renderSearch = () => {
+        return (_jsxs("div", { style: { margin: inputFocus ? '16px 16px 8px 16px' : '8px 16px' }, className: `${classPrefix}-custom-search
+  ${inputFocus ? 'is-focused' : ''}`, children: [_jsxs("div", { className: `${classPrefix}-custom-search-box `, "data-testid": `${classPrefix}-custom-search-box`, onClick: () => {
+                        setInputFocus(true);
+                    }, children: [inputFocus ? (_jsx("input", { className: `${classPrefix}-input`, ref: focusRef, value: searchValue, autoFocus: true, onChange: handleSearch, onCompositionStart: handleZhStart, onCompositionEnd: handleZhEnd, placeholder: searchPlaceholder })) : (
+                        // 此处主要为了兼容 iOS
+                        _jsx("div", { className: `${classPrefix}-input` })), _jsxs("div", { className: `${classPrefix}-custom-search-box__label`, children: [_jsx("span", { className: `${classPrefix}-custom-search-box__search-icon` }), _jsx("span", { className: `${classPrefix}-custom-search-box__search-placeholder`, children: searchPlaceholder })] }), inputFocus && searchValue !== '' && (_jsx("span", { className: `${classPrefix}-custom-search-box__dismiss-icon`, onClick: () => {
+                                getInitOptions();
+                            } }))] }), _jsx("button", { className: `${classPrefix}-custom-search__btn-cancle`, onClick: () => {
+                        setInputFocus(false);
+                        getInitOptions();
+                    }, children: "\u53D6\u6D88" })] }));
+    };
+    const getInitOptions = () => {
+        setSearchValue('');
+        setIsSearch(true);
+        setCurrentSelected([]);
+        if (onOpen) {
+            onOpen();
+        }
+    };
+    const handleClick = () => {
+        if (disabled)
+            return;
+        setVisible(true);
+        getInitOptions();
+    };
+    const handleOk = () => {
+        const selectedVal = currentSelected === null || currentSelected === void 0 ? void 0 : currentSelected.map((i) => i.value);
+        onChange(isMultiple ? selectedVal : selectedVal[0]);
+        setVisible(false);
+    };
+    // 处理当前选中值
+    const dealSelectedItem = (item) => {
+        const index = currentSelected.findIndex((v) => v.value === item.value);
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        if (index > -1) {
+            return [
+                ...currentSelected.slice(0, index),
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                ...currentSelected.slice(index + 1),
+            ];
+        }
+        return [...currentSelected, item];
+    };
+    const optionClick = (item) => {
+        if (item.disabled)
+            return;
+        setInputFocus(false);
+        if (!isMultiple) {
+            // 单选直接关弹窗
+            onChange(item.value);
+            setVisible(false);
+            setCurrentSelected([item]);
+        }
+        else {
+            setCurrentSelected(dealSelectedItem(item));
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("input", { "data-testid": "form-item-select", className: inputCls, type: "text", name: name, placeholder: placeholder, autoComplete: "off", disabled: disabled, readOnly: true, value: readValue, onClick: handleClick }), _jsxs(Modal, { visible: visible, onClose: () => {
+                    if (inputFocus) {
+                        // 聚焦在搜索框
+                        setInputFocus(false);
+                        getInitOptions();
+                    }
+                    else {
+                        setVisible(false);
+                    }
+                }, onOk: handleOk, header: inputFocus, className: `${classPrefix}-cascader-modal`, okButtonVisible: isMultiple, popupContainer: popupContainer, children: [searchable && renderSearch(), _jsx("div", { className: `${classPrefix}-custom-view-content`, children: !bottomTips && !customOptions.length ? (_jsx(AllEmpty, { height: inputFocus ? 'calc(100vh - 160px)' : '280px' })) : (_jsxs("div", { children: [_jsx("div", { className: customPickerCls, "data-testid": "weda-ui-custom-picker__cloumns", style: {
+                                        height: inputFocus ? 'calc(100vh - 160px)' : '280px',
+                                    }, children: _jsx(OptionList, { onScrollBottom: onScrollBottom, options: customOptions, inputFocus: inputFocus, currentSelected: currentSelected, optionClick: optionClick, bottomTips: bottomTips }) }), footer] })) })] })] }));
+}
+export function SelectUI(props) {
+    const { placeholder, size, disabled, onChange, onSearch, searchable, options, value, footer, overlayClassName, onOpen, onScrollBottom, tips, bottomTips, mode, format, readOnly, setAllOption, listHeight, listWidth, popupContainer, searchPlaceholder = '搜索选项', } = props;
+    const platform = usePlatform();
+    const [currentOption] = useSyncValue(options.map(({ label, value }) => ({ label, value })), isObjectEqual);
+    // 更新option，从而更新最新的选项值
+    useEffect(() => {
+        if (setAllOption) {
+            setAllOption(currentOption);
+        }
+    }, [currentOption, setAllOption]);
+    const isMultiple = mode === 'multiple';
+    const readValue = useMemo(() => {
+        var _a, _b;
+        const selectedItem = getSelectedItem(options, value);
+        if (isMultiple) {
+            return selectedItem
+                .map((i) => (i === null || i === void 0 ? void 0 : i.label) || i.value)
+                .join(',');
+        }
+        else {
+            return ((_a = selectedItem[0]) === null || _a === void 0 ? void 0 : _a.label) || ((_b = selectedItem[0]) === null || _b === void 0 ? void 0 : _b.value) || '';
+        }
+    }, [isMultiple, options, value]);
+    const render = () => {
+        if (platform === 'h5') {
+            return (_jsx(SelectH5, { ...props, readValue: readValue, searchPlaceholder: searchPlaceholder }));
+        }
+        else if (mode === 'multiple') {
+            return (_jsx(SelectMultiple, { popupContainer: popupContainer, button: (selectedItem) => {
+                    if (!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.length)) {
+                        return _jsx("div", { className: "wedatea2td-text-weak", children: placeholder });
+                    }
+                    return selectedItem
+                        .map((i) => (i === null || i === void 0 ? void 0 : i.label) || i.value)
+                        .join(',');
+                }, staging: false, overlayClassName: `${overlayClassName} multiple`, searchable: searchable, matchButtonWidth: true, placeholder: placeholder, searchPlaceholder: searchPlaceholder, appearance: 'button', size: size, disabled: disabled, autoClearSearchValue: true, options: options === null || options === void 0 ? void 0 : options.map((i) => ({ ...i, text: i.text || i.label })), value: Array.isArray(value) ? value : [], onChange: onChange, onSearch: onSearch, footer: footer, onOpen: onOpen, onScrollBottom: onScrollBottom, bottomTips: bottomTips, tips: tips, listHeight: listHeight, listWidth: listWidth }));
+        }
+        else {
+            return (_jsx(Select, { popupContainer: popupContainer, button: (selectedItem) => {
+                    if (!selectedItem) {
+                        return _jsx("div", { className: "wedatea2td-text-weak", children: placeholder });
+                    }
+                    return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value);
+                }, overlayClassName: overlayClassName, searchable: searchable, matchButtonWidth: true, placeholder: placeholder, searchPlaceholder: searchPlaceholder, appearance: 'button', size: size, disabled: disabled, autoClearSearchValue: true, options: options === null || options === void 0 ? void 0 : options.map((i) => ({ ...i, text: i.text || i.label })), value: value, onChange: onChange, onSearch: onSearch, footer: footer, onOpen: onOpen, onScrollBottom: onScrollBottom, bottomTips: bottomTips, tips: tips, listHeight: listHeight, listWidth: listWidth }));
+        }
+    };
+    return (_jsx(WdFormItemReadOnly, { after: props.after, before: props.before, onRelationTagClick: props.onRelationTagClick, readBeforeAfter: true, readOnly: readOnly, readValue: readValue, format: format, value: value, version: 'wd', children: _jsx("div", { "data-testid": isMultiple ? 'form-item-select-multiple-pc' : 'form-select', className: isMultiple ? 'form-select-multiple-pc' : 'form-select-pc', children: render() }) }));
+}

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

@@ -1 +1,3 @@
+import '../form/select/dropdown-select/index.css';
+import '../style';
 import './wd-select.css';

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

@@ -1 +1,3 @@
+import '../form/select/dropdown-select/index.css';
+import '../style';
 import './wd-select.css';

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

@@ -93,6 +93,7 @@
   margin-right: 20px;
   color: var(--wd-color-brand, #0052d9);
   cursor: pointer;
+  white-space: pre-wrap;
 }
 .wd-add-relation-button-wrap .wd-icon {
   margin-right: 5px;
@@ -111,3 +112,85 @@
   width: 100%;
   padding-right: calc(var(--wd-size-icon-md));
 }
+
+/* pc 端 关联下拉样式 */
+.wd-relation-select-header {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin: 5px 0;
+}
+.wd-relation-select-header span {
+  display: flex;
+}
+.wd-relation-select-header-text {
+  font-size: 16px;
+}
+.wd-relation-select-header .wd-icon {
+  color: var(--wd-color-brand, #0052d9);
+}
+.wd-relation-select-option-wrap .wd-tag-item {
+  max-width: 100%;
+}
+
+.wd-relation-select-option-wrap .wd-text-overflow {
+  /*将对象作为弹性伸缩盒子模型显示*/
+  display: -webkit-box;
+  overflow: hidden;
+  /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
+  -webkit-line-clamp: 1;
+  /*设置或检索伸缩盒对象的子元素的排列方式*/
+  -webkit-box-orient: vertical;
+}
+.wd-relation-select-option-wrap {
+  padding: 6px 8px;
+}
+.wd-relation-select-option-header,
+.wd-relation-select-option-content {
+  display: flex;
+  color: var(--wd-color-text-secondary, rgba(0, 0, 0, 60%));
+  font-size: 14px;
+}
+.wd-relation-select-option-text {
+  margin-right: 5px;
+}
+.wd-relation-select-option-text .wd-text-overflow {
+  text-overflow: ellipsis;
+  display: block;
+  white-space: nowrap;
+}
+.wd-relation-select-overlay
+  .wedatea2td-dropdown-box
+  .wedatea2td-list--option
+  > li {
+  width: auto !important;
+  min-width: 100%;
+  padding: 0;
+}
+.wd-relation-select-overlay
+  .wedatea2td-dropdown-box
+  .wedatea2td-list--option
+  .wedatea2td-list__status {
+  padding: 6px 8px;
+}
+/* h5端关联下拉样式 */
+.weda-ui-custom-picker__cloumns.weda-ui-custom-picker__cloumns--select.wd-relation-select-overlay
+  .weda-ui-custom-picker__cloumn-item {
+  height: auto;
+}
+.wd-relation-select-overlay .weda-ui-custom-picker__cloumn-item-text {
+  margin: 0;
+}
+.weda-ui-custom-picker__cloumns.wd-relation-select-overlay {
+  overflow: auto;
+}
+.weda-ui-custom-picker__cloumns.wd-relation-select-overlay
+  .weda-ui-custom-picker__cloumn {
+  width: auto;
+  min-width: 100%;
+}
+.weda-ui-custom-picker__cloumns.wd-relation-select-overlay
+  .weda-ui-custom-picker__cloumn-item.is-selected {
+  background-color: var(--wd-color-brand-light, #ecf2fe);
+  border-radius: 3px;
+}

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

@@ -2,7 +2,6 @@ import React from 'react';
 import type { CommonPropsType } from '../../types';
 import type { DataType } from '../../../configs/components/wd-select';
 import { AttachContainer } from 'tea-component/lib/_util/get-overlay-root';
-import './style';
 /**
  * 下拉单选-标准化
  */

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

@@ -3,22 +3,21 @@ import React, { forwardRef, useState, useCallback, useRef } from 'react';
 import { useHandleClear, useFixedIcon, SELECT_ICON_H5, SELECT_ICON_PC, } from '../../utils/hooks/useFormLegacy';
 import { useFormInputTrait } from '../../components/form-input-hooks';
 import { WdFormItem, WdInputGroup, WdInputWrap } from '../wd-form-item';
-import Select from '../form/select';
 import { isFormatWithRelation } from '../form/select/formats-util';
 import { emptyObject } from '../../utils/constant';
-import { RecycleProvider } from '../../utils/hooks/useRecycle';
 import { useSelected } from '../../utils/hooks/use-selected';
 import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web';
 import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 import { useDelayEvents } from '../../utils/hooks/use-delay-events';
 import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
-import { RelationalSetting } from './relationalSetting';
-import './style';
+import { RelationalSetting } from './relationSelect/relationalSetting';
+import { SelectCom as Select } from './select';
 /**
  * 下拉单选-标准化
  */
 export const WdSelect = forwardRef(function WsSelect(props, ref) {
-    const { classRoot = 'select', clearable = X_RUNTIME_DEFAULT.clearable, placeholder, range, format, tipBlock = X_RUNTIME_DEFAULT.tipBlock, where = X_RUNTIME_DEFAULT.where, enumName, primaryField, viewId, dataSourceName, events = emptyObject, ignoreCase = X_RUNTIME_DEFAULT.ignoreCase, staticSearchable = X_RUNTIME_DEFAULT.staticSearchable, enableRelationalSetting = X_RUNTIME_DEFAULT.enableRelationalSetting, enableRelationalRefresh = X_RUNTIME_DEFAULT.enableRelationalRefresh, addRelationButtonText = X_RUNTIME_DEFAULT.addRelationButtonText, enableAddRelationButton = X_RUNTIME_DEFAULT.enableAddRelationButton, popupContainer, } = props;
+    const { classRoot = 'select', clearable = X_RUNTIME_DEFAULT.clearable, placeholder, range, format, tipBlock = X_RUNTIME_DEFAULT.tipBlock, where = X_RUNTIME_DEFAULT.where, enumName, primaryField, viewId, dataSourceName, events = emptyObject, ignoreCase = X_RUNTIME_DEFAULT.ignoreCase, staticSearchable = X_RUNTIME_DEFAULT.staticSearchable, enableRelationalSetting = X_RUNTIME_DEFAULT.enableRelationalSetting, enableRelationalRefresh = X_RUNTIME_DEFAULT.enableRelationalRefresh, addRelationButtonText = X_RUNTIME_DEFAULT.addRelationButtonText, enableAddRelationButton = X_RUNTIME_DEFAULT.enableAddRelationButton, enableRelationOptionJump = X_RUNTIME_DEFAULT.enableRelationOptionJump, popupContainer, selectFields: customFields = [], // 自定义展示字段
+    selectFieldType = 'primary', } = props;
     const childRef = useRef(null);
     const [options, setOptions] = useState([]);
     const [innerHandle, setInnerHandle] = useState({});
@@ -41,6 +40,11 @@ export const WdSelect = forwardRef(function WsSelect(props, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(v);
         (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.change) === null || _a === void 0 ? void 0 : _a.call(delayEvents, { value: v });
     }, [onChange, delayEvents]);
+    const handleChange = (v) => {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+        (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.change) === null || _a === void 0 ? void 0 : _a.call(delayEvents, { value: v });
+    };
     const clearProps = useHandleClear({
         onChange: onClearChange,
         clearable,
@@ -86,7 +90,10 @@ export const WdSelect = forwardRef(function WsSelect(props, ref) {
     }), [innerHandle, selectedLabel, selectFields, selectedItem, value], ref);
     const eventsRef = useSyncedRef(delayEvents);
     const debouncedTriggerSearchEvent = useDebouncedCallback((value) => {
-        eventsRef.current.search({ value });
+        var _a, _b;
+        if (typeof ((_a = eventsRef.current) === null || _a === void 0 ? void 0 : _a.search) === 'function') {
+            (_b = eventsRef.current) === null || _b === void 0 ? void 0 : _b.search({ value });
+        }
     }, [eventsRef], 
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     300);
@@ -95,8 +102,11 @@ export const WdSelect = forwardRef(function WsSelect(props, ref) {
     }, [debouncedTriggerSearchEvent]);
     if (!visible)
         return null;
-    return (_jsx(WdFormItem, { ...formItemProps, children: _jsxs(_Fragment, { children: [_jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: _jsx(RecycleProvider, { readOnly: readOnly, recycleBack: setOptions, format: format, portalContainer: popupContainer, onRelationTagClick: (item) => {
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsxs(_Fragment, { children: [_jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: _jsx(Select, { ...props, setAllOption: setOptions, onRelationTagClick: (item) => {
                                 var _a;
                                 (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.onRelationTagClick) === null || _a === void 0 ? void 0 : _a.call(delayEvents, item);
-                            }, children: _jsx(Select, { addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, childRef: childRef, events: delayEvents, labelVisible: false, defaultValue: value, enumName: enumName, format: format, placeholder: placeholder, primaryField: primaryField, range: range, size: "full", tipBlock: tipBlock, viewId: viewId, where: where, dataSourceName: dataSourceName, readOnly: readOnly, disabled: disabled, mode: "selector", decorator: null, ignoreCase: ignoreCase, staticSearchable: staticSearchable, onChange: onChange, onSearchValueInput: onSearchValueInput, popupContainer: popupContainer }) }) }) }), layout === 'horizontal' && LabelAdornment] }) }));
+                            }, enableRelationOptionJump: enableRelationOptionJump, onRelationOptionJump: (item) => {
+                                var _a;
+                                (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.onRelationOptionJump) === null || _a === void 0 ? void 0 : _a.call(delayEvents, item);
+                            }, selectFieldType: selectFieldType, selectFields: customFields, isRelation: isRelation, addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, childRef: childRef, events: delayEvents, labelVisible: false, value: value, enumName: enumName, format: format, placeholder: placeholder, primaryField: primaryField, options: range, size: "full", tipBlock: tipBlock, viewId: viewId, where: where, dataSourceName: dataSourceName, readOnly: readOnly, disabled: disabled, mode: "selector", decorator: null, ignoreCase: ignoreCase, staticSearchable: staticSearchable, onChange: handleChange, onSearch: onSearchValueInput, popupContainer: popupContainer, searchable: true }) }) }), layout === 'horizontal' && LabelAdornment] }) }));
 });

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

@@ -1 +1,3 @@
+import '../form/selectMultiple/dropdown-select/index.css';
+import '../style';
 import './wd-select-multiple.css';

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

@@ -1 +1,3 @@
+import '../form/selectMultiple/dropdown-select/index.css';
+import '../style';
 import './wd-select-multiple.css';