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

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;
+};

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

@@ -0,0 +1,103 @@
+/// <reference types="react" />
+import { SelectProps } from 'antd';
+import { Item, ItemType, PointerObject } from 'lib/types/models';
+import { FieldProps, IScreenLabelProps } from '../base-component/types';
+import { IParams } from '../hooks/useParamsAdapter';
+interface optionType {
+    key: string;
+    value: string;
+    disabled: undefined | boolean;
+    children: {
+        props: selectValue;
+    };
+}
+export interface selectValue {
+    label: React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+    enable?: boolean;
+    icon?: string;
+    itemType?: PointerObject | ItemType;
+    archived?: boolean;
+    values?: {
+        [propName: string]: any;
+    };
+}
+export type BaseDropdownProps = SelectProps<any> & FieldProps & {
+    value?: string[] | number[] | Array<IParams>;
+    options?: selectValue[];
+    placeholder?: string;
+    onChange?: (e: any, option?: optionType | optionType[] | string) => void;
+    onSelect?: (e: any, option: any) => void;
+    onOptionsChange?: (options: any[]) => void;
+    onBlur?: (e: any) => void;
+    onClear?: () => void;
+    fetchOptions?: (keywords: string) => Promise<selectValue[]>;
+    fetchValues?: (values: string[], key: string) => Promise<selectValue[]>;
+    debounceTimeout?: number;
+    useChange?: boolean;
+    expression?: string;
+    iql?: string;
+    display?: string;
+    objectId?: string;
+    dataQuoteInit?: (dates: Item[] | selectValue[], value: string[], display?: string) => selectValue[];
+    workspace?: string;
+    label?: string;
+    valueDisplayWrap?: boolean;
+    optionDisplayWrap?: boolean;
+    disabledSwr?: boolean;
+    onlyValue?: boolean;
+    isGroup?: boolean;
+    fetchChange?: (value?: boolean) => void;
+    displayValueHidden?: boolean;
+    disabledLineThrough?: boolean;
+    displayWorkspace?: boolean;
+    onlyWorkspace?: boolean;
+    setOnlyWorkspace?: (e: boolean) => void;
+    isShowOnlyWorkspace?: boolean;
+    fieldTypeKey?: string;
+    iqlKey?: string;
+    detailKey?: string;
+    fetchOnFocus?: boolean;
+    isCascaded?: boolean;
+    cascadeCustomData?: selectValue[];
+    onlyWorkspaceTip?: string;
+    hasCurrentWorkspace?: boolean;
+    clickFetch?: boolean;
+    iqlToNeedMore?: boolean;
+    itemId?: string;
+    workspaceId?: string;
+    dataSource?: string;
+    userData?: Record<string, any>;
+    page?: string;
+    labelWidth?: number;
+    labelAlign?: IScreenLabelProps;
+    editMode?: boolean;
+    apply?: string;
+    hiddenLabel?: boolean;
+    screenMode?: string;
+    searchComponent?: boolean;
+};
+export declare const EMPTY_OPTIONS: any[];
+export declare const useCommonProps: (props: BaseDropdownProps) => {
+    propsValue: any;
+    fetchChange: (value?: boolean) => void;
+    onSearchChange: any;
+    options: any[];
+    onlyWorkspace: boolean;
+    setOnlyWorkspace: (e: any) => void;
+    detailKey: string;
+    loading: boolean;
+    _setValue: import("react").Dispatch<import("react").SetStateAction<any[]>>;
+    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setOptions: import("react").Dispatch<import("react").SetStateAction<any[]>>;
+    propsOptions: any[];
+    cachedOptionsRef: import("react").MutableRefObject<selectValue[]>;
+    needFetchDataSource: boolean;
+    fetchOptions: (keyword?: string) => Promise<any>;
+    fetchValues: (value: string[], key: string) => Promise<any>;
+    canAsyncFetchOption: boolean;
+    cacheSelectOptions: (opts: selectValue[]) => selectValue[];
+    value: any[];
+};
+export {};

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

@@ -0,0 +1,152 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { debounce, uniqWith } from 'lodash-es';
+import { getArrayValue } from 'lib/array';
+import { REMOTE_DATA_QUOTE_FIELD_TYPE } from 'lib/constants/field';
+import { FIELD_TYPE_KEY_MAPPINGS } from 'lib/global';
+import { useFetchDropdown } from './data';
+const useGenerateFetchFunction = ({ workspaceId, page, fieldId, propsValue, needFetchDataSource, defaultFetchValues, defaultFetchOptions, }) => {
+    const fetchDropdownData = useFetchDropdown();
+    const fetchOptions = useMemo(() => {
+        if (!needFetchDataSource) {
+            return defaultFetchOptions;
+        }
+        else {
+            return async (keyword) => await fetchDropdownData({
+                fieldId,
+                keyword: keyword ? keyword : undefined,
+                workspaceId,
+                page,
+                propsValue,
+            });
+        }
+    }, [defaultFetchOptions, fetchDropdownData, fieldId, needFetchDataSource, page, propsValue, workspaceId]);
+    const fetchValues = useMemo(() => {
+        if (!needFetchDataSource) {
+            return defaultFetchValues;
+        }
+        else {
+            return async (value) => await fetchDropdownData({
+                fieldId,
+                workspaceId,
+                page,
+                propsValue: JSON.stringify(value),
+            });
+        }
+    }, [defaultFetchValues, fetchDropdownData, fieldId, needFetchDataSource, page, workspaceId]);
+    return {
+        fetchOptions,
+        fetchValues,
+    };
+};
+export const EMPTY_OPTIONS = [];
+export const useCommonProps = (props) => {
+    var _a;
+    const { value: propsValue, options: _propsOptions = EMPTY_OPTIONS, fetchValues: _fetchValues, fetchOptions: _fetchOptions, debounceTimeout = 600, objectId, userData, workspace, page, fetchChange, onlyWorkspace, setOnlyWorkspace, fieldTypeKey, detailKey, isCascaded, cascadeCustomData, workspaceId, dataSource, } = props;
+    const [loading, setLoading] = useState(true);
+    const [value, _setValue] = useState([]);
+    const propsOptions = useMemo(() => {
+        return isCascaded ? cascadeCustomData : _propsOptions;
+    }, [_propsOptions, isCascaded, cascadeCustomData]);
+    const [options, setOptions] = useState(propsOptions || []);
+    const cachedOptionsRef = useRef([]);
+    const needFetchDataSource = !!(userData === null || userData === void 0 ? void 0 : userData.source) || !!dataSource;
+    const { fetchOptions, fetchValues } = useGenerateFetchFunction({
+        workspaceId: workspaceId || workspace,
+        page,
+        fieldId: objectId,
+        propsValue: Array.isArray(propsValue) ? ((_a = propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) === null || _a === void 0 ? void 0 : _a.value) || (propsValue === null || propsValue === void 0 ? void 0 : propsValue[0]) : propsValue,
+        needFetchDataSource,
+        defaultFetchOptions: _fetchOptions,
+        defaultFetchValues: _fetchValues,
+    });
+    const canAsyncFetchOption = useMemo(() => typeof fetchValues === 'function' && typeof fetchOptions === 'function', [fetchOptions, fetchValues]);
+    const cacheSelectOptions = useCallback((opts) => {
+        var _a;
+        const optsInit = opts === null || opts === void 0 ? void 0 : opts.map(ele => {
+            var _a;
+            if (ele === null || ele === void 0 ? void 0 : ele.itemType) {
+                return {
+                    ...ele,
+                    icon: (_a = ele.itemType) === null || _a === void 0 ? void 0 : _a.icon,
+                };
+            }
+            return ele;
+        });
+        if (Array.isArray(cachedOptionsRef.current) && Array.isArray(optsInit)) {
+            let cachedOptionsRefCopy = cachedOptionsRef.current;
+            if (REMOTE_DATA_QUOTE_FIELD_TYPE.includes(fieldTypeKey)) {
+                cachedOptionsRefCopy = (_a = cachedOptionsRef.current) === null || _a === void 0 ? void 0 : _a.map(opt => {
+                    const currentOpt = optsInit.find(ele => ele.value === opt.value);
+                    return {
+                        ...opt,
+                        values: currentOpt === null || currentOpt === void 0 ? void 0 : currentOpt.values,
+                    };
+                });
+            }
+            const cachedOptions = cachedOptionsRefCopy.concat(optsInit);
+            let cachedOptionsFilter = cachedOptions;
+            if ([FIELD_TYPE_KEY_MAPPINGS.Version, FIELD_TYPE_KEY_MAPPINGS.Team, FIELD_TYPE_KEY_MAPPINGS.Sprint].includes(fieldTypeKey)) {
+                cachedOptionsFilter = cachedOptions.map(ele => {
+                    const versionWithArchived = optsInit === null || optsInit === void 0 ? void 0 : optsInit.find(opt => {
+                        return opt.value === ele.value;
+                    });
+                    return versionWithArchived ? Object.assign(ele, versionWithArchived) : ele;
+                });
+            }
+            cachedOptionsRef.current = uniqWith(cachedOptionsFilter, (a, b) => a.value === b.value);
+        }
+        return cachedOptionsRef.current;
+    }, [fieldTypeKey]);
+    const handleSearch = useMemo(() => {
+        if (!canAsyncFetchOption) {
+            return undefined;
+        }
+        const searchFunc = _keyword => {
+            const keyword = _keyword === null || _keyword === void 0 ? void 0 : _keyword.trim();
+            if (!keyword) {
+                setOptions(cachedOptionsRef.current);
+            }
+            else {
+                setLoading(true);
+                fetchOptions(keyword).then(opts => {
+                    setLoading(false);
+                    cacheSelectOptions(opts);
+                    const _value = getArrayValue(value);
+                    const noExistValues = _value.filter(v => opts.every(item => item.value !== v));
+                    if (noExistValues.length) {
+                        opts = noExistValues
+                            .map(v => { var _a; return (_a = cachedOptionsRef.current) === null || _a === void 0 ? void 0 : _a.find(item => item.value === v); })
+                            .filter(Boolean)
+                            .concat(opts);
+                    }
+                    setOptions(opts);
+                });
+            }
+        };
+        return debounce(searchFunc, debounceTimeout);
+    }, [fetchOptions, canAsyncFetchOption, debounceTimeout, cacheSelectOptions, value]);
+    const onChangeCurrent = useCallback(e => {
+        setOnlyWorkspace(e.target.checked);
+    }, [setOnlyWorkspace]);
+    return {
+        propsValue,
+        fetchChange: fetchChange,
+        onSearchChange: handleSearch,
+        options,
+        onlyWorkspace,
+        setOnlyWorkspace: onChangeCurrent,
+        detailKey,
+        loading,
+        _setValue,
+        setLoading,
+        setOptions,
+        propsOptions,
+        cachedOptionsRef,
+        needFetchDataSource,
+        fetchOptions,
+        fetchValues,
+        canAsyncFetchOption,
+        cacheSelectOptions,
+        value,
+    };
+};

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

@@ -0,0 +1,16 @@
+export declare const dropdownSelectDisabled = "\n  text-decoration: line-through;\n";
+export declare const onlyWorkspaceStyle = "\n  padding: 5px 12px;\n";
+export declare const onlyWorkspaceDividerStyle = "\n  &:not(.add-weights) {\n    margin: 4px 0;\n  }\n";
+export declare const hiddenHoverClass: string;
+export declare const displayWrapClass: string;
+export declare const valueOptionClass: string;
+export declare const valueOptionContentClass: string;
+export declare const valueOptionIconClass: string;
+export declare const valueOptionLabelClass: string;
+export declare const workspaceClass: string;
+export declare const hoverIconClass: string;
+export declare const optionDisplayWrapClass: string;
+export declare const dropdownStyle: (antPrefix: string) => string;
+export declare const dropdownSelectOptionClass: string;
+export declare const disabledClass: string;
+export declare const dropdownSelectStyle: (antPrefix: string) => string;

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

@@ -0,0 +1,90 @@
+import { randomClassName } from 'style/common';
+import { hoverIconStyle, hoverStyle } from 'components/common/style/mixin';
+export const dropdownSelectDisabled = `
+  text-decoration: line-through;
+`;
+export const onlyWorkspaceStyle = `
+  padding: 5px 12px;
+`;
+export const onlyWorkspaceDividerStyle = `
+  &:not(.add-weights) {
+    margin: 4px 0;
+  }
+`;
+export const hiddenHoverClass = randomClassName('hidden-hover');
+export const displayWrapClass = randomClassName('display-wrap');
+export const valueOptionClass = randomClassName('value-option');
+export const valueOptionContentClass = randomClassName('value-option-content');
+export const valueOptionIconClass = randomClassName('value-option-icon');
+export const valueOptionLabelClass = randomClassName('value-option-label');
+export const workspaceClass = randomClassName('workspace');
+export const hoverIconClass = randomClassName('hover-icon');
+export const optionDisplayWrapClass = randomClassName('option-display-wrap');
+export const dropdownStyle = (antPrefix) => `
+  width: 100%;
+
+  &:not(.${hiddenHoverClass}) &:not(.${displayWrapClass}) :hover {
+    ${hoverStyle}
+
+    .${hoverIconClass} {
+      display: inline-block;
+    }
+  }
+
+  .${hoverIconClass} {
+    ${hoverIconStyle}
+  }
+
+  .${antPrefix}-select {
+    width: 100%;
+  }
+
+  .${antPrefix}-select-selection-item) {
+    .${workspaceClass} {
+      display: none;
+    }
+  }
+
+  .${valueOptionClass} {
+    margin-bottom: 8px;
+  }
+
+  .${valueOptionContentClass} {
+    width: 100%;
+    padding-top: 6px;
+
+    .${valueOptionIconClass} {
+      position: absolute;
+      margin-top: 3px;
+    }
+
+    .${valueOptionLabelClass} {
+      display: inline-block;
+      width: ~'calc(100% - 22px)';
+      margin-left: 22px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .${optionDisplayWrapClass} {
+    .${antPrefix}-select-selection-overflow {
+      display: block;
+      .${antPrefix}-select-selection-overflow-item {
+        width: fit-content;
+      }
+    }
+  }
+`;
+export const dropdownSelectOptionClass = randomClassName('dropdown-select-option');
+export const disabledClass = randomClassName('disabled');
+export const dropdownSelectStyle = (antPrefix) => `
+  .${dropdownSelectOptionClass}.${disabledClass} {
+    text-decoration: line-through;
+  }
+
+  .${antPrefix}-select-selection-item-content {
+    text-decoration: line-through;   
+  }
+`;

package/dist/components/fields/hooks/useViewClass.d.ts

@@ -0,0 +1,11 @@
+interface IViewClass {
+    screenMode: string;
+    editing: boolean;
+    readonly: boolean;
+}
+interface IViewClassResult {
+    viewClassNames: Record<string, boolean>;
+    isView: boolean;
+}
+declare const useViewClass: ({ screenMode, editing, readonly }: IViewClass) => IViewClassResult;
+export default useViewClass;

package/dist/components/fields/hooks/useViewClass.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { SCREEN_TYPE } from 'lib/global';
+const useViewClass = ({ screenMode, editing, readonly }) => {
+    const isView = useMemo(() => {
+        return screenMode === SCREEN_TYPE.View;
+    }, [screenMode]);
+    const viewClassNames = useMemo(() => {
+        return {
+            'field-value-view': isView && !editing,
+            'field-value-readonly': readonly,
+        };
+    }, [isView, editing, readonly]);
+    return {
+        viewClassNames,
+        isView,
+    };
+};
+export default useViewClass;

package/dist/components/fields/hyper-link/style/index.js

@@ -1,18 +1,18 @@
 import { blue6 } from '../../../../style/common';
-export const hyperLinkListStyle = `
-  display: flex;
-  width: 100%;
+export const hyperLinkListStyle = `
+  display: flex;
+  width: 100%;
 `;
-export const hyperLinkItemStyle = `
-  ${hyperLinkListStyle} & {
-    overflow: hidden;
-    color: @blue-6;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    -webkit-line-clamp: 1;
-  }
+export const hyperLinkItemStyle = `
+  ${hyperLinkListStyle} & {
+    overflow: hidden;
+    color: @blue-6;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-line-clamp: 1;
+  }
 `;
-export const hyperLinkTipItem = `
-  display: block;
-  color: ${blue6};
+export const hyperLinkTipItem = `
+  display: block;
+  color: ${blue6};
 `;

package/dist/components/fields/item-type/ItemTypeIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const NoItemTypeIconUrl = "/icons/NoItemType.svg";
+export declare const useNoItemTypeIcon: () => string;
+export declare const ItemTypeIcon: ({ icon, name, className, }: {
+    icon?: string;
+    name?: string;
+    className?: string;
+}) => React.ReactElement;
+export default ItemTypeIcon;

package/dist/components/fields/item-type/ItemTypeIcon.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ClassNames } from '@emotion/react';
+import { Tooltip } from 'antd';
+import { CustomIconFont } from 'icons/index';
+import useI18n from 'lib/hooks/useI18n';
+import { isBase64Img, usePolyFillIcon } from 'lib/icons/utils';
+import { usePatchIconUrl } from 'lib/path';
+import { nameItemTypeImg } from './style';
+export const NoItemTypeIconUrl = '/icons/NoItemType.svg';
+export const useNoItemTypeIcon = () => {
+    const patchIconUrl = usePatchIconUrl();
+    return patchIconUrl(NoItemTypeIconUrl);
+};
+export const ItemTypeIcon = ({ icon, name, className, }) => {
+    const { t } = useI18n();
+    const [title, setTitle] = useState(name);
+    const [isURL, _icon] = usePolyFillIcon(icon);
+    const patchIconUrl = usePatchIconUrl();
+    const NoItemTypeIcon = useMemo(() => patchIconUrl(NoItemTypeIconUrl), [patchIconUrl]);
+    return (_jsx(Tooltip, { title: title, children: _jsx(ClassNames, { children: ({ cx, css }) => {
+                var _a;
+                return isURL ? (_jsx("img", { src: (_a = patchIconUrl(icon)) !== null && _a !== void 0 ? _a : NoItemTypeIcon, onError: e => {
+                        const target = e.target;
+                        icon
+                            ? setTitle(t('pages.fields.default.getImageError'))
+                            : setTitle(t('pages.fields.default.noItemType'));
+                        target.onerror = null;
+                        target.src = NoItemTypeIcon;
+                    }, className: cx(css(nameItemTypeImg), className) })) : isBase64Img(icon) ? (_jsx("img", { src: icon, className: cx(css(nameItemTypeImg), className) })) : (_jsx(CustomIconFont, { type: _icon, className: cx(css(nameItemTypeImg), className) }));
+            } }) }));
+};
+export default ItemTypeIcon;

package/dist/components/fields/item-type/style/index.d.ts

@@ -0,0 +1 @@
+export declare const nameItemTypeImg = "\n  width: 16px;\n  height: 16px;\n  margin-right: 8px;\n  font-size: 16px;\n";

package/dist/components/fields/item-type/style/index.js

@@ -0,0 +1,6 @@
+export const nameItemTypeImg = `
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  font-size: 16px;
+`;

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

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import EmptyField from '../../common/EmptyField';
 import SimpleOverflowToolTip from '../../common/overflow-tooltip/SimpleOverflowToolTip';
 const KeyReadView = memo(({ value }) => {
-    return _jsx(_Fragment, { children: value ? _jsx(SimpleOverflowToolTip, { title: value, children: value }) : _jsx(EmptyField, { readonly: true }) });
+    return value ? _jsx(SimpleOverflowToolTip, { title: value, children: value }) : _jsx(EmptyField, { readonly: true });
 });
 KeyReadView.displayName = 'KeyReadView';
 export default KeyReadView;

package/dist/components/fields/long-text/style/index.js

@@ -1,6 +1,6 @@
-export const whiteSpacePreStyle = `
-  padding-top: 5px;
-  padding-bottom: 5px;
-  word-break: break-all;
-  white-space: pre-wrap;
+export const whiteSpacePreStyle = `
+  padding-top: 5px;
+  padding-bottom: 5px;
+  word-break: break-all;
+  white-space: pre-wrap;
 `;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { memo, useCallback, useMemo } from 'react';
 import { CaretDownOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
-import { DottedCircleIcon, HollowCircleIcon } from '../../../icons';
+import { DottedCircleIcon, HollowCircleIcon } from 'icons/index';
 import useAntdConfig from '../../../lib/hooks/useAntdConfig';
 import useI18n from '../../../lib/hooks/useI18n';
 import EmptyField from '../../common/EmptyField';

package/dist/components/fields/priority/style/index.js

@@ -1,58 +1,58 @@
 import { fieldLabelColor } from '../../../../style/common';
-export const cellBoxStyle = (antPrefix) => `
-  display: flex;
-  align-items: center;
-  line-height: unset;
-
-  .${antPrefix}-dropdown-menu-title-content {
-    display: flex;
-    align-items: center;
-    max-width: 150px;
-
-    .anticon {
-      flex-shrink: 0;
-    }
-
-    & > span {
-      white-space: pre-line;
-    }
-  }
+export const cellBoxStyle = (antPrefix) => `
+  display: flex;
+  align-items: center;
+  line-height: unset;
+
+  .${antPrefix}-dropdown-menu-title-content {
+    display: flex;
+    align-items: center;
+    max-width: 150px;
+
+    .anticon {
+      flex-shrink: 0;
+    }
+
+    & > span {
+      white-space: pre-line;
+    }
+  }
 `;
-export const headerCellStyle = `
-  max-width: 120px;
-  height: 24px;
-  padding: 0 8px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 24px;
-  color: #213053;
-  text-align: center;
-  background-color: #f5f6f8;
-  border-radius: 4px;
+export const headerCellStyle = `
+  max-width: 120px;
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #213053;
+  text-align: center;
+  background-color: #f5f6f8;
+  border-radius: 4px;
 `;
-export const emptyTextStyle = `
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+export const emptyTextStyle = `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
 `;
-export const colorIconStyle = `
-  margin-right: 5px;
-  font-size: 12px;
+export const colorIconStyle = `
+  margin-right: 5px;
+  font-size: 12px;
 `;
-export const emptyStyle = `
-   color: ${fieldLabelColor};
+export const emptyStyle = `
+   color: ${fieldLabelColor};
 `;
-export const emptyIconStyle = `
-  margin-right: 5px;
-  font-size: 12px!important;
-  width: 12px!important;
-  margin-left: 0!important;
+export const emptyIconStyle = `
+  margin-right: 5px;
+  font-size: 12px!important;
+  width: 12px!important;
+  margin-left: 0!important;
 `;
-export const downIconStyle = `
-  margin-left: 2px;
-
-  svg {
-    vertical-align: inherit;
-  }
+export const downIconStyle = `
+  margin-left: 2px;
+
+  svg {
+    vertical-align: inherit;
+  }
 `;