@giteeteam/apps-team-components 1.11.16-alpha.2 → 1.11.17

package/dist/components/common/user-field/UserAvatar.d.ts

@@ -5,7 +5,6 @@ interface UserAvatarProps {
         avatar?: {
             url?: string;
         };
-        bosKey?: string;
         username?: string;
         name?: string;
         nickname?: string;

package/dist/components/common/user-field/UserAvatar.js

@@ -1,22 +1,11 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { ClassNames } from '@emotion/react';
-import useCurrentWorkspace from '../../../lib/hooks/useCurrentWorkspace.js';
 import { getNameBadge, getBackgroundColor } from '../utils.js';
 import { avatarItemStyle, avatarStyle, defaultAvatarStyle } from './style/index.js';
 
 const UserAvatar = React__default.memo(({ user, className }) => {
-    const { workspaceKey } = useCurrentWorkspace();
-    const avatarUrl = useMemo(() => {
-        var _a, _b, _c, _d;
-        const url = (_a = user === null || user === void 0 ? void 0 : user.avatar) === null || _a === void 0 ? void 0 : _a.url;
-        if (url)
-            return url;
-        const bosKey = (_d = (_c = (_b = user === null || user === void 0 ? void 0 : user.bosKey) === null || _b === void 0 ? void 0 : _b.trim) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : user === null || user === void 0 ? void 0 : user.bosKey;
-        if (!workspaceKey || !bosKey)
-            return undefined;
-        return `/api/one/${workspaceKey}/rest/v1/companies/${workspaceKey}/users/logo/picture?url=${encodeURIComponent(bosKey)}`;
-    }, [user, workspaceKey]);
+    const avatarUrl = useMemo(() => { var _a; return (_a = user === null || user === void 0 ? void 0 : user.avatar) === null || _a === void 0 ? void 0 : _a.url; }, [user]);
     const displayName = useMemo(() => (user === null || user === void 0 ? void 0 : user.name) || (user === null || user === void 0 ? void 0 : user.nickname) || (user === null || user === void 0 ? void 0 : user.username), [user]);
     const userBadge = useMemo(() => getNameBadge(displayName), [displayName]);
     return (jsx(ClassNames, { children: ({ cx, css }) => {

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

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { Overlay } from 'react-overlays';
 import { DownOutlined } from '@ant-design/icons';
 import { ClassNames } from '@emotion/react';
 import { Checkbox, Divider, Spin, Select, Col } from 'antd';
 import debug from 'debug';
+import { useAtomValue } from 'jotai';
 import { isNil, isObject, noop, isPlainObject, xorWith } from 'lodash-es';
 import { emptyIconWrapper } from '../../../style/global.js';
 import useSWR from 'swr';
@@ -20,13 +21,23 @@ import { getRealValueByIqlTo } from '../../filters/filter-search/utils.js';
 import { REMOTE_DATA_QUOTE_FIELD_TYPE } from '../../../lib/constants/field.js';
 import { BASE_FIELD_WIDTH, FIELD_CONTAINERS_PAGE, CURRENT_WORKSPACE, FIELD_TYPE_KEY_MAPPINGS } from '../../../lib/global.js';
 import useAntdConfig from '../../../lib/hooks/useAntdConfig.js';
+import { useDropdownOptionsFetching } from '../../../lib/hooks/useFetchDropdownOptionsStore.js';
 import useI18n from '../../../lib/hooks/useI18n.js';
+import { dropDownOptionsState, createDropDownOptionsStoreKey } from '../../../lib/store/dropDownOptionsStore.js';
 import { API_KEY } from '../../../lib/swr/constants.js';
 import useViewClass from '../hooks/useViewClass.js';
 import { EMPTY_OPTIONS, useCommonProps } from './hook.js';
 import { dropdownSelectDisabled, onlyWorkspaceStyle, onlyWorkspaceDividerStyle, dropdownSelectStyle, optionDisplayWrapClass, dropdownSelectOptionClass, disabledClass, workspaceClass, dropdownStyle, hiddenHoverClass, displayWrapClass, cellWrapperStyle, valueOptionContentClass, valueOptionClass, valueOptionIconClass, valueOptionLabelClass, hoverIconClass } from './style.js';
 
 const loggers = debug('dropdown:BaseField');
+const mergeStoreOptions = (baseOptions, storeOptions) => {
+    if (!(storeOptions === null || storeOptions === void 0 ? void 0 : storeOptions.length))
+        return baseOptions || [];
+    const base = baseOptions || [];
+    const existingValues = new Set(base.map(o => o.value));
+    const additional = storeOptions.filter(o => !existingValues.has(o.value));
+    return additional.length ? [...base, ...additional] : base;
+};
 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));
@@ -83,6 +94,9 @@ const Dropdown = props => {
                 ? propsValue
                 : options;
     }, [dataQuoteInit, options, propsValue, userData === null || userData === void 0 ? void 0 : userData.display, value]);
+    const dropDownOptionsMap = useAtomValue(dropDownOptionsState);
+    const storeOptions = dropDownOptionsMap[createDropDownOptionsStoreKey(objectId)];
+    const isDropdownOptionsFetching = useDropdownOptionsFetching();
     const _options = useMemo(() => ((options === null || options === void 0 ? void 0 : options.length) > 0 ? options : finallyOptions) || [], [finallyOptions, options]);
     async function fetcher() {
         return await fetchOptions('');
@@ -181,6 +195,7 @@ const Dropdown = props => {
         var _a;
         loggers('loadMoreRef', loadMoreRef.current);
         if (canAsyncFetchOption &&
+            !isDropdownOptionsFetching &&
             Array.isArray(value) &&
             optionLoadedRef.current === true &&
             loadMoreRef.current === false &&
@@ -203,11 +218,12 @@ const Dropdown = props => {
                     const options = cacheSelectOptions(typeof dataQuoteInit === 'function'
                         ? dataQuoteInit(appendOptions, value, userData === null || userData === void 0 ? void 0 : userData.display)
                         : appendOptions);
-                    setOptions(options);
+                    const mergedOptions = mergeStoreOptions(options, storeOptions);
+                    setOptions(mergedOptions);
                     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) => {
+                        const index = mergedOptions === null || mergedOptions === void 0 ? void 0 : mergedOptions.findIndex((o) => {
                             return o.value === value;
                         });
                         if (index !== -1 || value === 'NULL' || value === CURRENT_WORKSPACE) {
@@ -261,6 +277,8 @@ const Dropdown = props => {
         cachedOptionsRef,
         setLoading,
         setOptions,
+        storeOptions,
+        isDropdownOptionsFetching,
     ]);
     useEffect(() => {
         onOptionsChange && onOptionsChange(options);
@@ -283,7 +301,8 @@ const Dropdown = props => {
     const showValue = useCallback(({ cx, css }) => {
         var _a, _b, _c, _d;
         let showValue = null;
-        const _options = isCascaded ? _propsOptions : noClickEditing ? finallyOptions : options;
+        const _baseOptions = isCascaded ? _propsOptions : noClickEditing ? finallyOptions : options;
+        const _options = mergeStoreOptions(_baseOptions, storeOptions);
         const _optionsMap = {};
         if (Array.isArray(_options)) {
             _options.forEach(item => {
@@ -300,7 +319,7 @@ const Dropdown = props => {
                     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, ","] });
+                    return (jsxs(React__default.Fragment, { children: [content, index === value.length - 1 ? '' : ','] }, `${String(item)}-${index}`));
                 });
             }
         }
@@ -316,7 +335,7 @@ const Dropdown = props => {
             }
         }
         return showValue;
-    }, [isCascaded, _propsOptions, noClickEditing, finallyOptions, options, isMultiple, value, screenMode]);
+    }, [isCascaded, _propsOptions, noClickEditing, finallyOptions, options, isMultiple, value, screenMode, storeOptions]);
     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)) {
@@ -565,10 +584,11 @@ const Dropdown = props => {
         selectValue,
         t,
     ]);
+    const mergedValueOptions = useMemo(() => mergeStoreOptions(valueOptions, storeOptions), [valueOptions, storeOptions]);
     return (jsx(ClassNames, { children: ({ cx, css }) => {
             const cxShowValue = showValue({ cx, css });
             return (jsx(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: jsxs("div", { css: css(cellWrapperStyle), 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 => {
+                            (cxShowValue ? (!valueDisplayWrap ? (isView && isMultiple ? (jsx(Expand, { readonly: readonly, editing: editing, expandType: EXPAND_TYPE_ENUM.TAG, children: mergedValueOptions.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: mergedValueOptions.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) })] }) }));
         } }));

package/dist/index.d.ts

@@ -48,3 +48,4 @@ export { TableCell } from './components/table-components';
 export { getAllReadComponents, getStandardEditComponents, getStandardReadComponents, } from './components/table-components/utils';
 export { LibraryProvider } from './lib/contexts';
 export { useDataQuoteStore } from './lib/hooks/useDataQuoteStore';
+export { useDropdownOptionsFetching, useFetchDropdownOptionsStore } from './lib/hooks/useFetchDropdownOptionsStore';

package/dist/index.js

@@ -48,3 +48,4 @@ export { TableCell } from './components/table-components/index.js';
 export { getAllReadComponents, getStandardEditComponents, getStandardReadComponents } from './components/table-components/utils.js';
 export { LibraryProvider } from './lib/contexts/index.js';
 export { useDataQuoteStore } from './lib/hooks/useDataQuoteStore.js';
+export { useDropdownOptionsFetching, useFetchDropdownOptionsStore } from './lib/hooks/useFetchDropdownOptionsStore.js';

package/dist/lib/hooks/useFetchDropdownOptionsStore.d.ts

@@ -0,0 +1,13 @@
+interface CustomField {
+    key: string;
+    name: string;
+    objectId: string;
+    fieldType: Record<string, any>;
+}
+interface DataSourceItem {
+    values?: Record<string, any>;
+    [key: string]: any;
+}
+export declare const useDropdownOptionsFetching: () => boolean;
+export declare const useFetchDropdownOptionsStore: (dataSource?: DataSourceItem[], customFields?: CustomField[], workspaceId?: string) => void;
+export {};

package/dist/lib/hooks/useFetchDropdownOptionsStore.js

@@ -0,0 +1,114 @@
+import { useRef, useCallback, useMemo, useEffect } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import useFetch from '../fetch.js';
+import { FIELD_TYPE_KEY_MAPPINGS } from '../global.js';
+import { dropDownOptionsFetchingState, dropDownOptionsState, createDropDownOptionsStoreKey } from '../store/dropDownOptionsStore.js';
+
+const mergeDropDownOptions = (currentOptions, newOptions) => {
+    const seen = new Map();
+    for (const option of currentOptions) {
+        if (option)
+            seen.set(option.value, option);
+    }
+    for (const option of newOptions) {
+        if (option && !seen.has(option.value)) {
+            seen.set(option.value, option);
+        }
+    }
+    return Array.from(seen.values());
+};
+const getRequestCacheKey = (storeKey, workspaceId) => {
+    return `${workspaceId || 'default'}:${storeKey}`;
+};
+const useDropdownOptionsFetching = () => {
+    return useAtomValue(dropDownOptionsFetchingState);
+};
+const useFetchDropdownOptionsStore = (dataSource, customFields, workspaceId) => {
+    const fetch = useFetch();
+    const setDropDownOptionsMap = useSetAtom(dropDownOptionsState);
+    const setFetching = useSetAtom(dropDownOptionsFetchingState);
+    const activeRequestCountRef = useRef(0);
+    const fetchedValuesRef = useRef({});
+    const pendingRequestRef = useRef({});
+    const prevWorkspaceIdRef = useRef(workspaceId);
+    const updateFetchingState = useCallback((delta) => {
+        activeRequestCountRef.current += delta;
+        setFetching(activeRequestCountRef.current > 0);
+    }, [setFetching]);
+    const dropdownFields = useMemo(() => {
+        if (!(customFields === null || customFields === void 0 ? void 0 : customFields.length))
+            return [];
+        return customFields.filter(field => { var _a; return ((_a = field.fieldType) === null || _a === void 0 ? void 0 : _a.key) === FIELD_TYPE_KEY_MAPPINGS.Dropdown; });
+    }, [customFields]);
+    useEffect(() => {
+        if (prevWorkspaceIdRef.current !== workspaceId) {
+            fetchedValuesRef.current = {};
+            pendingRequestRef.current = {};
+            prevWorkspaceIdRef.current = workspaceId;
+        }
+        if (!dropdownFields.length || !(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length))
+            return;
+        const fetchFieldOptions = async (field) => {
+            var _a;
+            const storeKey = createDropDownOptionsStoreKey(field.objectId);
+            if (!storeKey)
+                return;
+            const requestCacheKey = getRequestCacheKey(storeKey, workspaceId);
+            const values = new Set();
+            for (const item of dataSource) {
+                const fieldValues = (_a = item.values) === null || _a === void 0 ? void 0 : _a[field.key];
+                if (Array.isArray(fieldValues)) {
+                    fieldValues.forEach(v => {
+                        if (v != null)
+                            values.add(String(v));
+                    });
+                }
+            }
+            if (!values.size)
+                return;
+            const fetchedValues = fetchedValuesRef.current[requestCacheKey] || new Set();
+            fetchedValuesRef.current[requestCacheKey] = fetchedValues;
+            const missingValues = Array.from(values).filter(v => !fetchedValues.has(v));
+            if (!missingValues.length)
+                return;
+            const requestSignature = JSON.stringify(missingValues.slice().sort());
+            if (pendingRequestRef.current[requestCacheKey] === requestSignature) {
+                return;
+            }
+            pendingRequestRef.current[requestCacheKey] = requestSignature;
+            updateFetchingState(1);
+            try {
+                const { data } = await fetch.get(`/dropdown/data/${field.objectId}`, {
+                    params: { propsValue: JSON.stringify(missingValues), workspaceId },
+                });
+                const options = (data === null || data === void 0 ? void 0 : data.data) || [];
+                missingValues.forEach(v => fetchedValues.add(v));
+                if (!options.length)
+                    return;
+                setDropDownOptionsMap(prev => {
+                    const currentOptions = prev[storeKey] || [];
+                    const mergedOptions = mergeDropDownOptions(currentOptions, options);
+                    if (mergedOptions.length === currentOptions.length) {
+                        return prev;
+                    }
+                    return {
+                        ...prev,
+                        [storeKey]: mergedOptions,
+                    };
+                });
+            }
+            catch (e) {
+                console.error('fetchDropdownData_error', e);
+            }
+            finally {
+                updateFetchingState(-1);
+                if (pendingRequestRef.current[requestCacheKey] === requestSignature) {
+                    delete pendingRequestRef.current[requestCacheKey];
+                }
+            }
+        };
+        Promise.allSettled(dropdownFields.map(field => fetchFieldOptions(field)));
+    }, [dropdownFields, dataSource, fetch, setDropDownOptionsMap, workspaceId, updateFetchingState]);
+};
+
+export { useDropdownOptionsFetching, useFetchDropdownOptionsStore };

package/dist/lib/store/dropDownOptionsStore.d.ts

@@ -0,0 +1,21 @@
+export interface DropDownOptionItem {
+    label: React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    enable?: boolean;
+    icon?: string;
+    archived?: boolean;
+    name?: string;
+    key?: string;
+    itemType?: any;
+    values?: {
+        [propName: string]: any;
+    };
+}
+export declare const dropDownOptionsState: import("jotai").PrimitiveAtom<Record<string, DropDownOptionItem[]>> & {
+    init: Record<string, DropDownOptionItem[]>;
+};
+export declare const dropDownOptionsFetchingState: import("jotai").PrimitiveAtom<boolean> & {
+    init: boolean;
+};
+export declare const createDropDownOptionsStoreKey: (fieldId?: string) => string;

package/dist/lib/store/dropDownOptionsStore.js

@@ -0,0 +1,9 @@
+import { atom } from 'jotai';
+
+const dropDownOptionsState = atom({});
+const dropDownOptionsFetchingState = atom(false);
+const createDropDownOptionsStoreKey = (fieldId) => {
+    return fieldId || '';
+};
+
+export { createDropDownOptionsStoreKey, dropDownOptionsFetchingState, dropDownOptionsState };

package/dist/lib/useUser.d.ts

@@ -13,6 +13,5 @@ export type UserValueOption = {
     deleted: boolean;
     enabled: boolean;
     email?: string;
-    bosKey?: string | null;
 };
 export declare const userDataFormat: (user: UserValue) => UserValueOption;

package/dist/lib/useUser.js

@@ -22,7 +22,7 @@ const generateUserDisplayName = (user, onlyNickname = false) => {
     return (user === null || user === void 0 ? void 0 : user.nickname) ? `${user === null || user === void 0 ? void 0 : user.nickname}${displaySuffix}` : user === null || user === void 0 ? void 0 : user.username;
 };
 const userDataFormat = (user) => {
-    var _a, _b;
+    var _a;
     return ({
         label: generateUserDisplayName(user),
         value: (_a = user.objectId) !== null && _a !== void 0 ? _a : user.value,
@@ -31,7 +31,6 @@ const userDataFormat = (user) => {
         deleted: user.deleted,
         enabled: user.enabled,
         email: user.email,
-        bosKey: (_b = user.bosKey) !== null && _b !== void 0 ? _b : null,
     });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giteeteam/apps-team-components",
-  "version": "1.11.16-alpha.2",
+  "version": "1.11.17",
   "description": "Gitee team components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",