@giteeteam/apps-team-components 1.2.2-alpha.4 → 1.3.0-alpha.1

package/dist/components/fields/dropdown/BaseField.js

@@ -1,4 +1,565 @@
-import { isObject } from 'lodash-es';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Overlay } from 'react-overlays';
+import { DownOutlined } from '@ant-design/icons';
+import { ClassNames } from '@emotion/react';
+import { Checkbox, Col, Divider, Select as AntSelect, Spin } from 'antd';
+import debug from 'debug';
+import { isNil, isObject, isPlainObject, noop, xorWith } from 'lodash-es';
+import { emptyIconWrapper } from 'style/global';
+import useSWR from 'swr';
+import EmptyField from 'components/common/EmptyField';
+import Expand, { EXPAND_TYPE_ENUM } from 'components/common/expand-component';
+import ItemIcon from 'components/common/item-icon/ItemIcon';
+import BaseOverflowTooltip from 'components/common/overflow-tooltip/BaseOverflowTooltip';
+import OverflowTooltip from 'components/common/overflow-tooltip/OverflowTooltip';
+import { defaultFilterOptions, getPopupContainerFun } from 'components/common/utils';
+import EmptyIcon from 'components/default-empty-icon';
+import { getFieldWidthStyle } from 'components/fields/base-component/utils';
+import { getRealValueByIqlTo } from 'components/filters/filter-search/utils';
+import { REMOTE_DATA_QUOTE_FIELD_TYPE } from 'lib/constants/field';
+import { BASE_FIELD_WIDTH, CURRENT_WORKSPACE, FIELD_CONTAINERS_PAGE, FIELD_TYPE_KEY_MAPPINGS } from 'lib/global';
+import useAntdConfig from 'lib/hooks/useAntdConfig';
+import useI18n from 'lib/hooks/useI18n';
+import { API_KEY } from 'lib/swr/constants';
+import useViewClass from '../hooks/useViewClass';
+import { EMPTY_OPTIONS, useCommonProps } from './hook';
+import { disabledClass, displayWrapClass, dropdownSelectDisabled, dropdownSelectOptionClass, dropdownSelectStyle, dropdownStyle, hiddenHoverClass, hoverIconClass, onlyWorkspaceDividerStyle, onlyWorkspaceStyle, optionDisplayWrapClass, valueOptionClass, valueOptionContentClass, valueOptionIconClass, valueOptionLabelClass, workspaceClass, } from './style';
+const loggers = debug('dropdown:BaseField');
+export const isNilFilter = function (value) {
+    var _a;
+    return (_a = value === null || value === void 0 ? void 0 : value.filter) === null || _a === void 0 ? void 0 : _a.call(value, val => !isNil(val));
+};
 export const handleValue = function (value) {
     return isObject(value) ? value === null || value === void 0 ? void 0 : value.value : value;
 };
+export const getFormattedLabel = ({ label, style = {} } = {}) => {
+    return _jsx("span", { style: { borderRadius: 2, color: style === null || style === void 0 ? void 0 : style.color, background: style === null || style === void 0 ? void 0 : style.background }, children: label });
+};
+const Dropdown = props => {
+    const { onSelect = noop, onBlur, onChange = noop, labelWidth = BASE_FIELD_WIDTH, labelAlign, readonly: propsReadonly = false, options: _propsOptions = EMPTY_OPTIONS, editMode = false, apply, mode, hiddenLabel, allowClear = true, useChange = false, objectId, getPopupContainer, dataQuoteInit, userData, workspace, valueDisplayWrap, optionDisplayWrap, onOptionsChange, page, disabledSwr, onlyValue, screenMode, displayValueHidden = false, disabledLineThrough = false, displayWorkspace = false, isShowOnlyWorkspace = false, fieldTypeKey, iqlKey = 'value', fetchOnFocus, isCascaded, clickFetch, iqlToNeedMore = false, ...defaultProps } = props;
+    const { t } = useI18n();
+    const { antPrefix } = useAntdConfig();
+    const { propsValue, onSearchChange: handleSearch, options, onlyWorkspace, setOnlyWorkspace: onChangeCurrent, loading, _setValue, setLoading, setOptions, propsOptions, cachedOptionsRef, needFetchDataSource, fetchOptions, fetchValues, canAsyncFetchOption, cacheSelectOptions, value, } = useCommonProps(props);
+    const isClickFetch = useMemo(() => {
+        var _a;
+        return page && page !== FIELD_CONTAINERS_PAGE.FILTER && clickFetch && ((_a = propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) === null || _a === void 0 ? void 0 : _a.label);
+    }, [clickFetch, page, propsValue]);
+    const [editing, setEditing] = useState(false);
+    const [readonly, setReadonly] = useState(false);
+    const [open, setOpen] = useState(false);
+    const valueRef = useRef([]);
+    const containerRef = useRef(null);
+    const targetRef = useRef(null);
+    const [isClicked, setClicked] = useState(false);
+    const optionLoadedRef = useRef(false);
+    const loadMoreRef = useRef(false);
+    useEffect(() => {
+        if (needFetchDataSource) {
+            if (screenMode !== 'create' && screenMode) {
+                setReadonly((userData === null || userData === void 0 ? void 0 : userData.readonly) || propsReadonly);
+            }
+            else {
+                setReadonly(propsReadonly);
+            }
+        }
+        else {
+            setReadonly(propsReadonly);
+        }
+    }, [propsReadonly, userData === null || userData === void 0 ? void 0 : userData.readonly, needFetchDataSource, screenMode]);
+    const { isView, viewClassNames } = useViewClass({ screenMode, readonly, editing });
+    const shouldSWRFetch = useMemo(() => {
+        return apply === 'cell';
+    }, [apply]);
+    const hasClickFetch = useMemo(() => { var _a; return isClickFetch && !isClicked && ((propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) ? (_a = propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) === null || _a === void 0 ? void 0 : _a.label : true); }, [isClickFetch, isClicked, propsValue]);
+    const noClickEditing = useMemo(() => isClickFetch && !editing && !(options === null || options === void 0 ? void 0 : options.length), [editing, isClickFetch, options === null || options === void 0 ? void 0 : options.length]);
+    const finallyOptions = useMemo(() => {
+        var _a, _b;
+        return typeof dataQuoteInit === 'function'
+            ? dataQuoteInit(((_a = propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) === null || _a === void 0 ? void 0 : _a.label) && !(options === null || options === void 0 ? void 0 : options.length) ? propsValue : options, value, userData === null || userData === void 0 ? void 0 : userData.display)
+            : ((_b = propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) === null || _b === void 0 ? void 0 : _b.label)
+                ? propsValue
+                : options;
+    }, [dataQuoteInit, options, propsValue, userData === null || userData === void 0 ? void 0 : userData.display, value]);
+    const _options = useMemo(() => ((options === null || options === void 0 ? void 0 : options.length) > 0 ? options : finallyOptions) || [], [finallyOptions, options]);
+    async function fetcher() {
+        return await fetchOptions('');
+    }
+    const { data = [], isValidating = false } = useSWR(!disabledSwr && shouldSWRFetch && canAsyncFetchOption
+        ? `${API_KEY.GET_BASE_FIELD_OPTIONS}_${objectId + workspace}_${onlyWorkspace}`
+        : null, fetcher);
+    const opts = useMemo(() => data, [data]);
+    const isMultiple = useMemo(() => mode === 'multiple', [mode]);
+    const setValue = useCallback(value => {
+        valueRef.current = value;
+        _setValue(value);
+    }, [_setValue]);
+    useEffect(() => {
+        if (canAsyncFetchOption) {
+            cachedOptionsRef.current = [];
+            setOptions([]);
+            optionLoadedRef.current = false;
+        }
+    }, [canAsyncFetchOption, workspace, onlyWorkspace, props.itemId, props.expression, cachedOptionsRef, setOptions]);
+    const handleSelectFocus = useCallback(() => {
+        setTimeout(() => {
+            if (!readonly && !editMode) {
+                targetRef.current && targetRef.current.focus();
+                if (!open) {
+                    setOpen(true);
+                }
+            }
+        });
+    }, [editMode, readonly, open]);
+    useEffect(() => {
+        if (!canAsyncFetchOption && Array.isArray(propsOptions)) {
+            setOptions(propsOptions || []);
+        }
+        if (!optionLoadedRef.current && canAsyncFetchOption && !isValidating) {
+            if (!shouldSWRFetch && (!fetchOnFocus || (props === null || props === void 0 ? void 0 : props.searchComponent))) {
+                if (!(isClickFetch && !isClicked)) {
+                    optionLoadedRef.current = true;
+                    fetchOptions('')
+                        .then(options => {
+                        var _a;
+                        let optionsInit = options;
+                        if (REMOTE_DATA_QUOTE_FIELD_TYPE.includes(fieldTypeKey)) {
+                            optionsInit = (_a = cacheSelectOptions(options)) === null || _a === void 0 ? void 0 : _a.map(opt => {
+                                const newOption = options.find(ele => ele.value === opt.value);
+                                return {
+                                    ...opt,
+                                    values: newOption === null || newOption === void 0 ? void 0 : newOption.values,
+                                };
+                            });
+                        }
+                        setOptions(cacheSelectOptions(optionsInit));
+                        setLoading(false);
+                        if (noClickEditing) {
+                            setEditing(true);
+                            handleSelectFocus();
+                        }
+                    })
+                        .finally(() => {
+                        setLoading(false);
+                    });
+                }
+                else {
+                    cacheSelectOptions(finallyOptions);
+                }
+            }
+            else {
+                setOptions(cacheSelectOptions(opts));
+                optionLoadedRef.current = true;
+                setLoading(false);
+            }
+        }
+    }, [
+        cacheSelectOptions,
+        fetchOptions,
+        fetchValues,
+        canAsyncFetchOption,
+        propsOptions,
+        options,
+        opts,
+        shouldSWRFetch,
+        isValidating,
+        hasClickFetch,
+        handleSelectFocus,
+        finallyOptions,
+        noClickEditing,
+        isClickFetch,
+        isClicked,
+        fetchOnFocus,
+        props === null || props === void 0 ? void 0 : props.searchComponent,
+        fieldTypeKey,
+        setOptions,
+        setLoading,
+    ]);
+    useEffect(() => {
+        var _a;
+        loggers('loadMoreRef', loadMoreRef.current);
+        if (canAsyncFetchOption &&
+            Array.isArray(value) &&
+            optionLoadedRef.current === true &&
+            loadMoreRef.current === false &&
+            (!value.some(item => item === null || item === void 0 ? void 0 : item.iqlTo) || iqlToNeedMore)) {
+            let isNotExistedKeys = [];
+            const v = value[0];
+            if (isPlainObject(v)) {
+                isNotExistedKeys = value
+                    .filter(val => val && (val === null || val === void 0 ? void 0 : val.value) !== CURRENT_WORKSPACE && cachedOptionsRef.current.every(opt => opt.value !== val.value))
+                    .map(val => val === null || val === void 0 ? void 0 : val.value)
+                    .filter(data => data !== undefined);
+            }
+            else {
+                isNotExistedKeys = value.filter(val => val && cachedOptionsRef.current.every(opt => opt.value !== val));
+            }
+            if (isNotExistedKeys.length) {
+                setLoading(true);
+                loadMoreRef.current = true;
+                fetchValues(isNotExistedKeys === null || isNotExistedKeys === void 0 ? void 0 : isNotExistedKeys.filter(Boolean), fieldTypeKey).then(appendOptions => {
+                    const options = cacheSelectOptions(typeof dataQuoteInit === 'function'
+                        ? dataQuoteInit(appendOptions, value, userData === null || userData === void 0 ? void 0 : userData.display)
+                        : appendOptions);
+                    setOptions(options);
+                    setLoading(false);
+                    const res = valueRef.current.filter(val => {
+                        const value = typeof val === 'object' ? val.value : val;
+                        const index = options === null || options === void 0 ? void 0 : options.findIndex((o) => {
+                            return o.value === value;
+                        });
+                        if (index !== -1 || value === 'NULL' || value === CURRENT_WORKSPACE) {
+                            return val;
+                        }
+                        else if (displayValueHidden && value !== 'NULL') {
+                            setOptions(cacheSelectOptions([{ value, label: t('global.haveDelete'), disabled: true }]));
+                            return val;
+                        }
+                    });
+                    setValue(res || []);
+                });
+            }
+        }
+        if (!loadMoreRef.current && value.some(item => item === null || item === void 0 ? void 0 : item.iqlTo)) {
+            loggers('canAsyncFetchOption', canAsyncFetchOption);
+            const isSet = canAsyncFetchOption ? optionLoadedRef.current : value.some(item => item === null || item === void 0 ? void 0 : item.iqlTo) && (options === null || options === void 0 ? void 0 : options.length);
+            loggers('isSet', isSet);
+            if (isSet) {
+                const _value = (_a = getRealValueByIqlTo(value, options, iqlKey)) === null || _a === void 0 ? void 0 : _a.map(item => {
+                    if ((item === null || item === void 0 ? void 0 : item.value) === CURRENT_WORKSPACE) {
+                        return {
+                            label: `${t('pages.fields.workspace.default.currentWorkspace')}(currentWorkspace)`,
+                            value: CURRENT_WORKSPACE,
+                        };
+                    }
+                    return item;
+                });
+                loggers('_value', _value);
+                loadMoreRef.current = true;
+                setTimeout(() => {
+                    setValue(_value);
+                }, 0);
+            }
+        }
+    }, [
+        t,
+        value,
+        fetchValues,
+        cacheSelectOptions,
+        canAsyncFetchOption,
+        opts,
+        userData === null || userData === void 0 ? void 0 : userData.display,
+        dataQuoteInit,
+        displayValueHidden,
+        options,
+        iqlKey,
+        setValue,
+        fieldTypeKey,
+        iqlToNeedMore,
+        cachedOptionsRef,
+        setLoading,
+        setOptions,
+    ]);
+    useEffect(() => {
+        onOptionsChange && onOptionsChange(options);
+    }, [onOptionsChange, options]);
+    const handleFetchOptions = useCallback(() => {
+        optionLoadedRef.current = true;
+        setLoading(true);
+        fetchOptions('').then(options => {
+            setOptions(cacheSelectOptions(options));
+            setLoading(false);
+        });
+    }, [cacheSelectOptions, fetchOptions, setLoading, setOptions]);
+    useEffect(() => {
+        loadMoreRef.current = false;
+        const _propsValue = isClickFetch && Array.isArray(propsValue)
+            ? propsValue === null || propsValue === void 0 ? void 0 : propsValue.map(item => (item === null || item === void 0 ? void 0 : item.value) || (item === null || item === void 0 ? void 0 : item.objectId) || item)
+            : propsValue;
+        setValue(Array.isArray(_propsValue) ? _propsValue : []);
+    }, [isClickFetch, propsValue, setValue]);
+    const showValue = useCallback(({ cx, css }) => {
+        var _a, _b, _c, _d;
+        let showValue = null;
+        const _options = isCascaded ? _propsOptions : noClickEditing ? finallyOptions : options;
+        const _optionsMap = {};
+        if (Array.isArray(_options)) {
+            _options.forEach(item => {
+                _optionsMap[item.label] = item;
+            });
+        }
+        if (isMultiple) {
+            if ((Array.isArray(_options) && _options.length >= 1 && value && Array.isArray(value) && value.length) ||
+                (noClickEditing && Array.isArray(finallyOptions) && finallyOptions.length > 0)) {
+                const valueArr = value
+                    .map(item => { var _a; return (item === null || item === void 0 ? void 0 : item.label) || ((_a = _options.find(opt => opt.value === handleValue(item))) === null || _a === void 0 ? void 0 : _a.label); })
+                    .filter(Boolean);
+                if (!(valueArr === null || valueArr === void 0 ? void 0 : valueArr.length))
+                    return null;
+                showValue = valueArr.map((item, index) => {
+                    const content = _optionsMap[item] ? getFormattedLabel(_optionsMap[item]) : item;
+                    return index === value.length - 1 ? content : _jsxs(_Fragment, { children: [content, ","] });
+                });
+            }
+        }
+        else {
+            if ((Array.isArray(_options) && _options.length >= 1 && value && Array.isArray(value) && value.length) ||
+                (noClickEditing && Array.isArray(finallyOptions) && finallyOptions.length > 0)) {
+                const val = value === null || value === void 0 ? void 0 : value[0];
+                const opt = _options.filter(item => item.value === handleValue(val));
+                const label = ((_a = opt[0]) === null || _a === void 0 ? void 0 : _a.label) || handleValue(val);
+                if (opt.length >= 1) {
+                    showValue = (_jsx("span", { className: cx({ [css(dropdownSelectDisabled)]: ((_b = opt[0]) === null || _b === void 0 ? void 0 : _b.disabled) || !opt.length }), children: ((_c = opt[0]) === null || _c === void 0 ? void 0 : _c.icon) ? (_jsx(ItemIcon, { icon: (_d = opt[0]) === null || _d === void 0 ? void 0 : _d.icon, label: label })) : !screenMode && _optionsMap[label] ? (getFormattedLabel(_optionsMap[label])) : (label) }));
+                }
+            }
+        }
+        return showValue;
+    }, [isCascaded, _propsOptions, noClickEditing, finallyOptions, options, isMultiple, value, screenMode]);
+    const valueOptions = useMemo(() => {
+        if ((Array.isArray(options) && (options === null || options === void 0 ? void 0 : options.length) >= 1 && value && Array.isArray(value)) ||
+            (noClickEditing && Array.isArray(_options) && _options.length > 0)) {
+            return value
+                .map(val => {
+                return _options === null || _options === void 0 ? void 0 : _options.find(opt => (opt === null || opt === void 0 ? void 0 : opt.value) === handleValue(val));
+            })
+                .filter(Boolean);
+        }
+        return [];
+    }, [options, value, noClickEditing, _options]);
+    const selectValue = useMemo(() => {
+        if (value === undefined) {
+            return undefined;
+        }
+        if (isMultiple) {
+            if (Array.isArray(value)) {
+                return isNilFilter(value.map(handleValue));
+            }
+            return isNil(value) ? [] : [value];
+        }
+        if (Array.isArray(value)) {
+            if ((value.length && (optionLoadedRef.current || !canAsyncFetchOption)) ||
+                (Array.isArray(_options) && _options.length > 0)) {
+                const v = value[0];
+                if (isPlainObject(v)) {
+                    if (_options.some(option => option.value === v.value)) {
+                        return onlyValue ? v.value : (v === null || v === void 0 ? void 0 : v.value) || v;
+                    }
+                }
+                else {
+                    if (_options.some(option => option.value === v))
+                        return (v === null || v === void 0 ? void 0 : v.value) || v;
+                }
+            }
+            return undefined;
+        }
+    }, [value, canAsyncFetchOption, _options, onlyValue, isMultiple]);
+    const handleClick = useCallback(() => {
+        if (!hasClickFetch) {
+            setEditing(true);
+            handleSelectFocus();
+        }
+        if (shouldSWRFetch && disabledSwr) {
+            handleFetchOptions();
+        }
+        hasClickFetch && setClicked(true);
+    }, [hasClickFetch, shouldSWRFetch, disabledSwr, handleSelectFocus, handleFetchOptions]);
+    const handleSelect = useCallback((val, option) => {
+        if (isMultiple) {
+            onSelect && onSelect([val], option);
+        }
+        else {
+            onSelect && onSelect([val], option);
+        }
+    }, [onSelect, isMultiple]);
+    const handleChange = useCallback((val, option) => {
+        var _a;
+        setTimeout(() => {
+            var _a;
+            (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+        const value = isMultiple ? val : val ? [val] : [];
+        setValue(value);
+        if (propsValue === undefined && !value.length) {
+            return;
+        }
+        if (useChange) {
+            if (isMultiple) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(value, option === null || option === void 0 ? void 0 : option.map(item => {
+                    var _a;
+                    return ({
+                        ...item,
+                        label: (_a = options === null || options === void 0 ? void 0 : options.find(ops => ops.value === item.value)) === null || _a === void 0 ? void 0 : _a.label,
+                    });
+                }));
+            }
+            else {
+                const targetValue = Array.isArray(value) ? value[0] : value;
+                onChange === null || onChange === void 0 ? void 0 : onChange(value, {
+                    ...option,
+                    label: (_a = options === null || options === void 0 ? void 0 : options.find(ops => ops.value === targetValue)) === null || _a === void 0 ? void 0 : _a.label,
+                });
+            }
+        }
+    }, [propsValue, setValue, useChange, onChange, options, isMultiple]);
+    const handleClear = useCallback(() => {
+        setValue([]);
+        onChange && onChange([], options);
+    }, [onChange, options, setValue]);
+    const handleFocus = useCallback(() => {
+        if (fetchOnFocus) {
+            optionLoadedRef.current = true;
+            fetchOptions('').then(options => {
+                setOptions(cacheSelectOptions(options));
+                setLoading(false);
+            });
+        }
+        else if (!(options === null || options === void 0 ? void 0 : options.length) && !canAsyncFetchOption) {
+            setValue([]);
+        }
+    }, [
+        fetchOnFocus,
+        options === null || options === void 0 ? void 0 : options.length,
+        canAsyncFetchOption,
+        fetchOptions,
+        setOptions,
+        cacheSelectOptions,
+        setLoading,
+        setValue,
+    ]);
+    const handleBlur = useCallback(e => {
+        var _a;
+        if (open) {
+            return;
+        }
+        if (!editMode) {
+            setEditing(false);
+        }
+        if (canAsyncFetchOption) {
+            setOptions(cachedOptionsRef.current);
+        }
+        if (propsValue === undefined && !value.length) {
+            return;
+        }
+        if (!useChange) {
+            if (isClickFetch && ((_a = propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) === null || _a === void 0 ? void 0 : _a.label)) {
+                const needChange = value.length !== propsValue.length ||
+                    xorWith(propsValue, value, (oldV, newV) => isPlainObject(oldV) ? oldV.value === newV : newV.value === oldV).length > 0;
+                needChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value, options));
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange(value, options);
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }, [
+        open,
+        editMode,
+        canAsyncFetchOption,
+        propsValue,
+        value,
+        useChange,
+        onBlur,
+        setOptions,
+        cachedOptionsRef,
+        isClickFetch,
+        onChange,
+        options,
+    ]);
+    useEffect(() => {
+        if (mode !== 'multiple' && (propsValue === null || propsValue === void 0 ? void 0 : propsValue.length)) {
+            if (apply === 'cell') {
+                if (propsValue[0].archived === 'true') {
+                    setReadonly(true);
+                }
+            }
+            else {
+                const valueFirst = propsValue[0];
+                const result = options === null || options === void 0 ? void 0 : options.find(opt => opt.value === (isObject(valueFirst) ? valueFirst.value : valueFirst));
+                if (result === null || result === void 0 ? void 0 : result.archived) {
+                    setReadonly(true);
+                }
+            }
+        }
+    }, [options, propsValue, mode, apply]);
+    const filterOptionProp = useMemo(() => (canAsyncFetchOption ? false : defaultFilterOptions), [canAsyncFetchOption]);
+    useEffect(() => {
+        if (open) {
+            handleClick();
+        }
+    }, [onlyWorkspace]);
+    const onDropdownVisibleChange = useCallback(open => {
+        setOpen(open);
+        if (!isMultiple && !open) {
+            setTimeout(() => {
+                var _a;
+                (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            });
+        }
+    }, [isMultiple]);
+    const dropdownRender = useCallback(({ cx, css }) => {
+        return menu => {
+            if (!isShowOnlyWorkspace)
+                return menu;
+            const message = t('pages.fields.default.onlyWorkspace', {
+                name: props.onlyWorkspaceTip || t(`pages.fields.fieldName.${fieldTypeKey}`),
+            });
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: cx(css(onlyWorkspaceStyle)), children: _jsx(Checkbox, { checked: onlyWorkspace, onChange: onChangeCurrent, onClick: e => {
+                                e.stopPropagation();
+                            }, children: _jsx(BaseOverflowTooltip, { title: message, children: message }) }) }), _jsx(Divider, { className: cx(css(onlyWorkspaceDividerStyle)) }), menu] }));
+        };
+    }, [fieldTypeKey, isShowOnlyWorkspace, onChangeCurrent, onlyWorkspace, props.onlyWorkspaceTip, t]);
+    const notFoundContentMemo = useMemo(() => {
+        return loading && canAsyncFetchOption ? (_jsx(Spin, { size: "small" })) : (_jsx(ClassNames, { children: ({ css, cx }) => (_jsx("div", { className: cx(css(emptyIconWrapper)), children: _jsx(EmptyIcon, { noMargin: true }) })) }));
+    }, [canAsyncFetchOption, loading]);
+    const style = getFieldWidthStyle(labelWidth, labelAlign, hiddenLabel, apply);
+    const hiddenHover = readonly || editMode || editing || apply === 'cell' || isView;
+    const overlayRender = useMemo(() => {
+        return (_jsx(ClassNames, { children: ({ cx, css }) => {
+                const cxDropdownRender = dropdownRender({ cx, css });
+                return (_jsx("div", { className: 'field-value-overlay', children: _jsx(AntSelect, { getPopupContainer: triggerNode => getPopupContainerFun(getPopupContainer, triggerNode, apply, page), filterOption: filterOptionProp, ...defaultProps, className: cx('field-value-overlay-component', disabledLineThrough || displayValueHidden ? css(dropdownSelectStyle(antPrefix)) : '', {
+                            [optionDisplayWrapClass]: optionDisplayWrap,
+                        }), mode: mode, ref: targetRef, value: selectValue, showSearch: true, maxTagCount: optionDisplayWrap || isView ? null : 'responsive', onSelect: handleSelect, onClear: handleClear, onBlur: handleBlur, open: open, onDropdownVisibleChange: onDropdownVisibleChange, onFocus: handleFocus, onChange: handleChange, allowClear: allowClear, onSearch: handleSearch, defaultOpen: !editMode, listItemHeight: 32, listHeight: 200, optionLabelProp: fieldTypeKey === FIELD_TYPE_KEY_MAPPINGS.Version ? 'label' : 'children', notFoundContent: notFoundContentMemo, dropdownRender: cxDropdownRender, children: _options.map(item => {
+                            var _a, _b, _c;
+                            return (_jsxs(AntSelect.Option, { value: item.value, label: item.label, disabled: item.disabled, values: item.values, children: [_jsx("span", { className: cx({ [dropdownSelectOptionClass]: disabledLineThrough || displayValueHidden }, { [disabledClass]: item === null || item === void 0 ? void 0 : item.disabled }), children: _jsxs(BaseOverflowTooltip, { title: (_a = item === null || item === void 0 ? void 0 : item.label) === null || _a === void 0 ? void 0 : _a.toString(), className: "custom-overflow", children: [_jsx(ItemIcon, { icon: item.icon, label: item.label }), fieldTypeKey === FIELD_TYPE_KEY_MAPPINGS.Version && item.archived && (_jsxs("span", { children: ["(", t('workspaceArchived.archived'), ")"] }))] }) }), displayWorkspace ? (_jsx("div", { className: cx(workspaceClass), children: _jsx(BaseOverflowTooltip, { title: (_b = item === null || item === void 0 ? void 0 : item.workspace) === null || _b === void 0 ? void 0 : _b.name, children: (_c = item === null || item === void 0 ? void 0 : item.workspace) === null || _c === void 0 ? void 0 : _c.name }) })) : null] }, item.value));
+                        }) }) }));
+            } }));
+    }, [
+        _options,
+        allowClear,
+        antPrefix,
+        apply,
+        defaultProps,
+        disabledLineThrough,
+        displayValueHidden,
+        displayWorkspace,
+        dropdownRender,
+        editMode,
+        fieldTypeKey,
+        filterOptionProp,
+        getPopupContainer,
+        handleBlur,
+        handleChange,
+        handleClear,
+        handleFocus,
+        handleSearch,
+        handleSelect,
+        isView,
+        mode,
+        notFoundContentMemo,
+        onDropdownVisibleChange,
+        open,
+        optionDisplayWrap,
+        page,
+        selectValue,
+        t,
+    ]);
+    return (_jsx(ClassNames, { children: ({ cx, css }) => {
+            const cxShowValue = showValue({ cx, css });
+            return (_jsxs(Col, { style: style, ref: containerRef, className: cx(css(dropdownStyle(antPrefix)), 'field-value', viewClassNames, { [hiddenHoverClass]: hiddenHover }, { [displayWrapClass]: valueDisplayWrap }, { [css(dropdownSelectStyle(antPrefix))]: disabledLineThrough || displayValueHidden }), onClick: handleClick, children: [(readonly || (!editMode && !editing)) &&
+                        (cxShowValue ? (!valueDisplayWrap ? (isView && isMultiple ? (_jsx(Expand, { readonly: readonly, editing: editing, expandType: EXPAND_TYPE_ENUM.TAG, children: valueOptions.map(item => (_jsx("span", { className: "field-common-view-tag", children: _jsx(BaseOverflowTooltip, { title: item.label, children: item.label }) }, item.value))) })) : (_jsx(OverflowTooltip, { title: cxShowValue, children: cxShowValue }))) : (_jsx("div", { className: cx(valueOptionContentClass), children: valueOptions.map(ele => {
+                                return (_jsxs("div", { className: cx(valueOptionClass), title: ele.label, children: [_jsx(ItemIcon, { className: cx(valueOptionIconClass), icon: ele.icon }), _jsx("span", { className: cx(valueOptionLabelClass), children: ele.label })] }, ele.value));
+                            }) }))) : (_jsx(EmptyField, { readonly: readonly }))), !readonly && (editMode || editing) && containerRef && (_jsx(Overlay, { show: true, rootClose: true, container: containerRef, target: containerRef, onHide: noop, children: () => overlayRender })), _jsx(DownOutlined, { className: cx(hoverIconClass) })] }));
+        } }));
+};
+Dropdown.displayName = 'DropdownBaseField';
+export default Dropdown;

package/dist/components/fields/dropdown/Cell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseDropdownProps } from './hook';
+declare const DropdownCell: React.FC<BaseDropdownProps>;
+export default DropdownCell;

package/dist/components/fields/dropdown/Cell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import BaseField from './BaseField';
+const DropdownCell = props => {
+    return _jsx(BaseField, { ...props, apply: "cell" });
+};
+export default DropdownCell;

package/dist/components/fields/dropdown/ReadView.js

@@ -58,7 +58,22 @@ const DropdownReadView = memo(props => {
             return optionsMap[label] ? getFormattedLabel(optionsMap[label]) : label;
         }
     }, [mode, options, optionsMap, value]);
-    return (_jsx(_Fragment, { children: showValue ? (_jsx(SimpleOverflowToolTip, { title: showValue, children: showValue })) : (_jsx(EmptyField, { readonly: readonly })) }));
+    const showValueTitle = useMemo(() => {
+        var _a;
+        if (!(value === null || value === void 0 ? void 0 : value.length))
+            return '';
+        if ((_a = value[0]) === null || _a === void 0 ? void 0 : _a.label) {
+            return value.map(item => item.label).join(',');
+        }
+        if (!(options === null || options === void 0 ? void 0 : options.length))
+            return '';
+        const result = value
+            .map(item => { var _a; return (item === null || item === void 0 ? void 0 : item.label) || ((_a = options.find(opt => opt.value === handleValue(item))) === null || _a === void 0 ? void 0 : _a.label); })
+            .filter(Boolean)
+            .join(',');
+        return result;
+    }, [options, value]);
+    return showValue ? (_jsx(SimpleOverflowToolTip, { title: showValueTitle, children: showValue })) : (_jsx(EmptyField, { readonly: readonly }));
 });
 DropdownReadView.displayName = 'DropdownReadView';
 export default DropdownReadView;

package/dist/components/fields/dropdown/data.d.ts

@@ -0,0 +1,9 @@
+interface FetchDropdownParams {
+    fieldId: string;
+    keyword?: string;
+    workspaceId?: string;
+    page?: string;
+    propsValue?: string;
+}
+export declare const useFetchDropdown: () => (data: FetchDropdownParams) => Promise<any>;
+export {};

package/dist/components/fields/dropdown/data.js

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import useFetch from 'lib/fetch';
+import { throttleFetch } from 'lib/throttleFetch';
+export const useFetchDropdown = () => {
+    const fetch = useFetch();
+    const fetchDropdownData = useCallback(({ keyword, workspaceId, page, fieldId, propsValue }) => {
+        return throttleFetch({ keyword, workspaceId, page, fieldId }, async () => {
+            try {
+                const { data } = await fetch.get(`/dropdown/data/${fieldId}`, {
+                    params: {
+                        keyword,
+                        workspaceId,
+                        page,
+                        propsValue,
+                    },
+                });
+                return data === null || data === void 0 ? void 0 : data.data;
+            }
+            catch (e) {
+                console.error('fetchDropdownData_error', e);
+                return [];
+            }
+        });
+    }, [fetch]);
+    return fetchDropdownData;
+};