From 95840a379e99a0370dc694688d85b151f95a4630 Mon Sep 17 00:00:00 2001 From: Leto Date: Thu, 18 May 2023 12:05:51 +0800 Subject: [PATCH 1/7] chore(dashboard): add rc-select --- dashboard/package.json | 1 + yarn.lock | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/dashboard/package.json b/dashboard/package.json index d2c0abd29..d860b5b4e 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -38,6 +38,7 @@ "monaco-editor": "0.36.0", "performant-array-to-tree": "1.11.0", "popmotion": "^11.0.3", + "rc-select": "14.1.0", "rc-tree-select": "5.5.5", "reactflow": "^11.5.3" }, diff --git a/yarn.lock b/yarn.lock index bbd32c9f9..ce770f4b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10683,6 +10683,19 @@ rc-resize-observer@^1.0.0: rc-util "^5.15.0" resize-observer-polyfill "^1.5.1" +rc-select@14.1.0: + version "14.1.0" + resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.1.0.tgz#151c8ce0c81b6200e47094a6e6f7e497bc7ff866" + integrity sha512-mt/Etb4wxrrm4+0AkpjF3S3HVxQpcIABVsvIEAGfxoMoFW5ly0GaPulIjNUduzdT11t5QqPU2HRsOrn2dSUE7Q== + dependencies: + "@babel/runtime" "^7.10.1" + classnames "2.x" + rc-motion "^2.0.1" + rc-overflow "^1.0.0" + rc-trigger "^5.0.4" + rc-util "^5.16.1" + rc-virtual-list "^3.2.0" + rc-select@~14.1.0: version "14.1.16" resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.1.16.tgz#0cc4b5a1fc551a2db7c96bc1ece0896317ecdd47" From 586e8f84268ec1094725a84ffb5748db483974bf Mon Sep 17 00:00:00 2001 From: Leto Date: Thu, 18 May 2023 12:21:36 +0800 Subject: [PATCH 2/7] feat(dashboard): use rc-select for filter-multi-select --- .../{render.tsx => render/index.tsx} | 25 +--- .../render/widget.styles.ts | 140 ++++++++++++++++++ .../filter-multi-select/render/widget.tsx | 113 ++++++++++++++ 3 files changed, 257 insertions(+), 21 deletions(-) rename dashboard/src/filter/filter-multi-select/{render.tsx => render/index.tsx} (55%) create mode 100644 dashboard/src/filter/filter-multi-select/render/widget.styles.ts create mode 100644 dashboard/src/filter/filter-multi-select/render/widget.tsx diff --git a/dashboard/src/filter/filter-multi-select/render.tsx b/dashboard/src/filter/filter-multi-select/render/index.tsx similarity index 55% rename from dashboard/src/filter/filter-multi-select/render.tsx rename to dashboard/src/filter/filter-multi-select/render/index.tsx index 2057468a8..7e6fe6a57 100644 --- a/dashboard/src/filter/filter-multi-select/render.tsx +++ b/dashboard/src/filter/filter-multi-select/render/index.tsx @@ -1,9 +1,8 @@ -import { MultiSelect } from '@mantine/core'; import { observer } from 'mobx-react-lite'; import { useContentModelContext } from '~/contexts'; -import { FilterModelInstance } from '../../model'; -import { IFilterConfig_MultiSelect } from '../../model/filters/filter/multi-select'; -import { FilterSelectItem } from '../select-item'; +import { FilterModelInstance } from '../../../model'; +import { IFilterConfig_MultiSelect } from '../../../model/filters/filter/multi-select'; +import { MultiSelectWidget } from './widget'; interface IFilterMultiSelect extends Omit { config: IFilterConfig_MultiSelect; @@ -20,22 +19,6 @@ export const FilterMultiSelect = observer(({ label, config, value, onChange }: I const minWidth = config.min_width ? config.min_width : '200px'; const disabled = usingRemoteOptions ? loading : false; return ( - + ); }); diff --git a/dashboard/src/filter/filter-multi-select/render/widget.styles.ts b/dashboard/src/filter/filter-multi-select/render/widget.styles.ts new file mode 100644 index 000000000..0fe05ea23 --- /dev/null +++ b/dashboard/src/filter/filter-multi-select/render/widget.styles.ts @@ -0,0 +1,140 @@ +import { createStyles, MantineNumberSize } from '@mantine/core'; + +export interface MultiSelectWidgetStylesParams { + radius?: MantineNumberSize; +} + +export default createStyles((theme, { radius = 4 }: MultiSelectWidgetStylesParams) => ({ + root: { + borderRadius: theme.fn.radius(radius), + display: 'flex', + flexWrap: 'nowrap', + border: '1px solid #ced4da', + paddingLeft: '0px', + paddingRight: '30px', // for the clear icon + backgroundColor: '#fff', + transition: 'border-color 100ms ease', + borderColor: '#e9ecef', + '&.rc-select.rc-select-open': { + borderColor: '#228be6 !important', + '.rc-select-selection-overflow-item-rest': { + display: 'none', + }, + '.rc-select-selection-overflow-item-suffix': { + display: 'block', + }, + }, + '.rc-select-selector': { + height: 'auto', + lineHeight: 1.55, + paddingLeft: '12px', + resize: 'none', + boxSizing: 'border-box', + fontSize: '14px', + width: '100%', + color: '#000', + display: 'block', + textAlign: 'left', + minHeight: '36px', + cursor: 'pointer', + flexGrow: 1, + }, + '.rc-select-selection-search-mirror': { + display: 'none', + }, + '.rc-select-selection-search': { + flexGrow: 1, + width: 'auto !important', + }, + '.rc-select-selection-overflow': { + display: 'flex', + minHeight: '34px', + alignItems: 'center', + flexWrap: 'nowrap', + marginLeft: 'calc(-10px / 2)', + boxSizing: 'border-box', + }, + '.rc-select-selection-overflow-item': { + display: 'flex', + alignItems: 'center', + backgroundColor: '#f1f3f5', + color: '#495057', + height: '24px', + paddingLeft: '12px', + paddingRight: '12px', + fontWeight: 500, + fontSize: '12px', + borderRadius: '4px', + cursor: 'default', + userSelect: 'none', + maxWidth: 'calc(100% - 20px)', + margin: 'calc(10px / 2 - 2px) calc(10px / 2)', + }, + '.rc-select-selection-overflow-item-rest': { + cursor: 'pointer', + }, + '.rc-select-selection-overflow-item-suffix': { + display: 'none', + backgroundColor: 'transparent', + width: '100%', + maxWidth: '100%', + height: '28px', + margin: 0, + paddingLeft: 0, + paddingRight: 0, + }, + input: { + flex: 1, + minWidth: '60px', + backgroundColor: 'transparent', + border: 0, + outline: 0, + fontSize: '14px', + padding: 0, + marginLeft: 0, + // appearance: 'none', + color: 'inherit', + height: '28px', + lineHeight: '32px', + cursor: 'pointer', + width: '100%', + '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': + { + display: 'none', + }, + }, + '.rc-select-clear': { + marginRight: '-24px', + alignSelf: 'center', + cursor: 'pointer', + }, + '&.rc-select-disabled': { + backgroundColor: 'rgb(241, 243, 245)', + color: 'rgb(144, 146, 150)', + opacity: 0.6, + '&, .rc-select-selector, input': { + cursor: 'not-allowed', + }, + }, + }, + label: { fontSize: theme.fontSizes.sm, fontWeight: 500, color: '#212529' }, + + dropdown: { + fontSize: theme.fontSizes.xs, + zIndex: 300, + paddingTop: '6px', + '&.rc-select-dropdown-slide-up-leave-active': { + display: 'none', + }, + '.rc-select-list, .rc-select-empty': { + backgroundColor: '#fff', + border: '1px solid #e9ecef', + padding: 0, + boxShadow: '0 1px 3px rgb(0 0 0 / 5%), rgb(0 0 0 / 5%) 0px 10px 15px -5px, rgb(0 0 0 / 4%) 0px 7px 7px -5px', + borderRadius: '4px', + }, + '.rc-select-empty': { + padding: '8px 12px', + }, + }, +})); diff --git a/dashboard/src/filter/filter-multi-select/render/widget.tsx b/dashboard/src/filter/filter-multi-select/render/widget.tsx new file mode 100644 index 000000000..d0ef2105d --- /dev/null +++ b/dashboard/src/filter/filter-multi-select/render/widget.tsx @@ -0,0 +1,113 @@ +import { + Badge, + CloseButton, + DefaultProps, + Group, + MantineNumberSize, + Selectors, + Stack, + Text, + Tooltip, +} from '@mantine/core'; +import Select, { Option } from 'rc-select'; +import { useState } from 'react'; +import useStyles, { MultiSelectWidgetStylesParams } from './widget.styles'; + +export type TSelectOption = { + label: string; + value: string; + description: string; +}; + +import { forwardRef } from 'react'; + +interface ItemProps extends React.ComponentPropsWithoutRef<'div'> { + label: string; + description: string; +} + +export const MultiSelectOptionItem = forwardRef( + ({ label, description, ...others }: ItemProps, ref) => ( + + ), +); + +type StylesNames = Selectors; + +interface IProps extends DefaultProps { + radius?: MantineNumberSize; + style?: Record; + label: string; + value: string[]; + onChange: (v: string[]) => void; + options: TSelectOption[]; + disabled: boolean; +} + +export const MultiSelectWidget = ({ + disabled, + // styling props + classNames, + styles, + unstyled, + radius, + style, + // data props + label, + value, + onChange, + options, +}: IProps) => { + const { classes, cx } = useStyles({ radius }, { name: 'MultiSelectWidget', classNames, styles, unstyled }); + const [showTooltip, setShowTooltip] = useState(value?.length > 0); + const handleDropdownVisibleChange = (visible: boolean) => { + setShowTooltip(visible); + }; + const tooltipVisible = showTooltip && value?.length > 0; + return ( + + + {label} + {tooltipVisible && ( + + {value.length} + + )} + + + + ); +}; From ddd8a6fbbbfe380e0ba35554f37598a02a73d135 Mon Sep 17 00:00:00 2001 From: Leto Date: Thu, 18 May 2023 12:55:46 +0800 Subject: [PATCH 3/7] style(dashboard): styling options of filter-multi-select-widget --- .../filter-multi-select/render/index.tsx | 11 +- .../render/widget.styles.ts | 159 +++++++++++------- .../filter-multi-select/render/widget.tsx | 57 +++---- 3 files changed, 128 insertions(+), 99 deletions(-) diff --git a/dashboard/src/filter/filter-multi-select/render/index.tsx b/dashboard/src/filter/filter-multi-select/render/index.tsx index 7e6fe6a57..b406d41f2 100644 --- a/dashboard/src/filter/filter-multi-select/render/index.tsx +++ b/dashboard/src/filter/filter-multi-select/render/index.tsx @@ -16,9 +16,16 @@ export const FilterMultiSelect = observer(({ label, config, value, onChange }: I const { state } = model.getDataStuffByID(config.options_query_id); const loading = state === 'loading'; - const minWidth = config.min_width ? config.min_width : '200px'; + const width = config.min_width ? config.min_width : '200px'; const disabled = usingRemoteOptions ? loading : false; return ( - + ); }); diff --git a/dashboard/src/filter/filter-multi-select/render/widget.styles.ts b/dashboard/src/filter/filter-multi-select/render/widget.styles.ts index 0fe05ea23..a05135c33 100644 --- a/dashboard/src/filter/filter-multi-select/render/widget.styles.ts +++ b/dashboard/src/filter/filter-multi-select/render/widget.styles.ts @@ -2,9 +2,10 @@ import { createStyles, MantineNumberSize } from '@mantine/core'; export interface MultiSelectWidgetStylesParams { radius?: MantineNumberSize; + width: string; } -export default createStyles((theme, { radius = 4 }: MultiSelectWidgetStylesParams) => ({ +export default createStyles((theme, { radius = 4, width }: MultiSelectWidgetStylesParams) => ({ root: { borderRadius: theme.fn.radius(radius), display: 'flex', @@ -15,6 +16,7 @@ export default createStyles((theme, { radius = 4 }: MultiSelectWidgetStylesParam backgroundColor: '#fff', transition: 'border-color 100ms ease', borderColor: '#e9ecef', + width, '&.rc-select.rc-select-open': { borderColor: '#228be6 !important', '.rc-select-selection-overflow-item-rest': { @@ -40,69 +42,69 @@ export default createStyles((theme, { radius = 4 }: MultiSelectWidgetStylesParam flexGrow: 1, }, '.rc-select-selection-search-mirror': { - display: 'none', - }, - '.rc-select-selection-search': { - flexGrow: 1, - width: 'auto !important', - }, - '.rc-select-selection-overflow': { - display: 'flex', - minHeight: '34px', - alignItems: 'center', - flexWrap: 'nowrap', - marginLeft: 'calc(-10px / 2)', - boxSizing: 'border-box', - }, - '.rc-select-selection-overflow-item': { - display: 'flex', - alignItems: 'center', - backgroundColor: '#f1f3f5', - color: '#495057', - height: '24px', - paddingLeft: '12px', - paddingRight: '12px', - fontWeight: 500, - fontSize: '12px', - borderRadius: '4px', - cursor: 'default', - userSelect: 'none', - maxWidth: 'calc(100% - 20px)', - margin: 'calc(10px / 2 - 2px) calc(10px / 2)', - }, - '.rc-select-selection-overflow-item-rest': { - cursor: 'pointer', - }, - '.rc-select-selection-overflow-item-suffix': { - display: 'none', - backgroundColor: 'transparent', - width: '100%', - maxWidth: '100%', - height: '28px', - margin: 0, - paddingLeft: 0, - paddingRight: 0, - }, - input: { - flex: 1, - minWidth: '60px', - backgroundColor: 'transparent', - border: 0, - outline: 0, - fontSize: '14px', - padding: 0, - marginLeft: 0, - // appearance: 'none', - color: 'inherit', - height: '28px', - lineHeight: '32px', - cursor: 'pointer', - width: '100%', - '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': - { - display: 'none', - }, + // display: 'none', }, + // '.rc-select-selection-search': { + // flexGrow: 1, + // width: 'auto !important', + // }, + // '.rc-select-selection-overflow': { + // display: 'flex', + // minHeight: '34px', + // alignItems: 'center', + // flexWrap: 'nowrap', + // marginLeft: 'calc(-10px / 2)', + // boxSizing: 'border-box', + // }, + // '.rc-select-selection-overflow-item': { + // display: 'flex', + // alignItems: 'center', + // backgroundColor: '#f1f3f5', + // color: '#495057', + // height: '24px', + // paddingLeft: '12px', + // paddingRight: '12px', + // fontWeight: 500, + // fontSize: '12px', + // borderRadius: '4px', + // cursor: 'default', + // userSelect: 'none', + // maxWidth: 'calc(100% - 20px)', + // margin: 'calc(10px / 2 - 2px) calc(10px / 2)', + // }, + // '.rc-select-selection-overflow-item-rest': { + // cursor: 'pointer', + // }, + // '.rc-select-selection-overflow-item-suffix': { + // display: 'none', + // backgroundColor: 'transparent', + // width: '100%', + // maxWidth: '100%', + // height: '28px', + // margin: 0, + // paddingLeft: 0, + // paddingRight: 0, + // }, + // input: { + // flex: 1, + // minWidth: '60px', + // backgroundColor: 'transparent', + // border: 0, + // outline: 0, + // fontSize: '14px', + // padding: 0, + // marginLeft: 0, + // // appearance: 'none', + // color: 'inherit', + // height: '28px', + // lineHeight: '32px', + // cursor: 'pointer', + // width: '100%', + // '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': + // { + // display: 'none', + // }, + // }, '.rc-select-clear': { marginRight: '-24px', alignSelf: 'center', @@ -126,7 +128,7 @@ export default createStyles((theme, { radius = 4 }: MultiSelectWidgetStylesParam '&.rc-select-dropdown-slide-up-leave-active': { display: 'none', }, - '.rc-select-list, .rc-select-empty': { + '.rc-virtual-list, .rc-select-empty': { backgroundColor: '#fff', border: '1px solid #e9ecef', padding: 0, @@ -136,5 +138,34 @@ export default createStyles((theme, { radius = 4 }: MultiSelectWidgetStylesParam '.rc-select-empty': { padding: '8px 12px', }, + '.rc-select-item-option': { + boxSizing: 'border-box', + textAlign: 'left', + width: '100%', + padding: '8px 12px 8px 2px', + cursor: 'pointer', + fontSize: '14px', + color: '#000', + borderRadius: '4px', + display: 'flex', + flexWrap: 'nowrap', + overflow: 'hidden', + '&:hover': { + backgroundColor: '#f1f3f5', + }, + flexDirection: 'row-reverse', + '.rc-select-item-option-state': { + flexGrow: 0, + flexShrink: 0, + width: '30px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + '.rc-select-item-option-content': { + flexGrow: 1, + }, + }, }, })); diff --git a/dashboard/src/filter/filter-multi-select/render/widget.tsx b/dashboard/src/filter/filter-multi-select/render/widget.tsx index d0ef2105d..927d75095 100644 --- a/dashboard/src/filter/filter-multi-select/render/widget.tsx +++ b/dashboard/src/filter/filter-multi-select/render/widget.tsx @@ -19,30 +19,6 @@ export type TSelectOption = { description: string; }; -import { forwardRef } from 'react'; - -interface ItemProps extends React.ComponentPropsWithoutRef<'div'> { - label: string; - description: string; -} - -export const MultiSelectOptionItem = forwardRef( - ({ label, description, ...others }: ItemProps, ref) => ( - - ), -); - type StylesNames = Selectors; interface IProps extends DefaultProps { @@ -53,6 +29,7 @@ interface IProps extends DefaultProps void; options: TSelectOption[]; disabled: boolean; + width: string; } export const MultiSelectWidget = ({ @@ -68,8 +45,9 @@ export const MultiSelectWidget = ({ value, onChange, options, + width, }: IProps) => { - const { classes, cx } = useStyles({ radius }, { name: 'MultiSelectWidget', classNames, styles, unstyled }); + const { classes, cx } = useStyles({ radius, width }, { name: 'MultiSelectWidget', classNames, styles, unstyled }); const [showTooltip, setShowTooltip] = useState(value?.length > 0); const handleDropdownVisibleChange = (visible: boolean) => { setShowTooltip(visible); @@ -91,21 +69,34 @@ export const MultiSelectWidget = ({ className={cx(classes.root, 'check-select')} dropdownClassName={cx(classes.dropdown, '')} onDropdownVisibleChange={handleDropdownVisibleChange} - transitionName="rc-tree-select-dropdown-slide-up" - choiceTransitionName="rc-tree-select-selection__choice-zoom" + transitionName="rc-select-dropdown-slide-up" + choiceTransitionName="rc-select-selection__choice-zoom" style={style} clearIcon={() => } - maxTagTextLength={10} value={value} onChange={onChange} onSelect={console.log} - maxTagCount={0} - maxTagPlaceholder={(valueList) => { - return `${valueList.length} selected`; - }} + open + // maxTagCount={1} + // maxTagTextLength={10} + // maxTagPlaceholder={(valueList) => { + // console.log({ valueList }); + // return `${valueList.length} selected`; + // }} > {options.map((o) => ( - + ))} From 4bcbbb347bdff3015319c4a6a20aa32665b70091 Mon Sep 17 00:00:00 2001 From: Leto Date: Thu, 18 May 2023 13:11:21 +0800 Subject: [PATCH 4/7] style(dashboard): input style of filter-multi-select-widget --- .../render/widget.styles.ts | 140 +++++++++--------- .../filter-multi-select/render/widget.tsx | 11 +- 2 files changed, 73 insertions(+), 78 deletions(-) diff --git a/dashboard/src/filter/filter-multi-select/render/widget.styles.ts b/dashboard/src/filter/filter-multi-select/render/widget.styles.ts index a05135c33..d714af68e 100644 --- a/dashboard/src/filter/filter-multi-select/render/widget.styles.ts +++ b/dashboard/src/filter/filter-multi-select/render/widget.styles.ts @@ -42,69 +42,69 @@ export default createStyles((theme, { radius = 4, width }: MultiSelectWidgetStyl flexGrow: 1, }, '.rc-select-selection-search-mirror': { - // display: 'none', + display: 'none', + }, + '.rc-select-selection-search': { + flexGrow: 1, + width: 'auto !important', + }, + '.rc-select-selection-overflow': { + display: 'flex', + minHeight: '34px', + alignItems: 'center', + flexWrap: 'nowrap', + marginLeft: 'calc(-10px / 2)', + boxSizing: 'border-box', + }, + '.rc-select-selection-overflow-item': { + display: 'flex', + alignItems: 'center', + backgroundColor: '#f1f3f5', + color: '#495057', + height: '24px', + paddingLeft: '12px', + paddingRight: '12px', + fontWeight: 500, + fontSize: '12px', + borderRadius: '4px', + cursor: 'default', + userSelect: 'none', + maxWidth: 'calc(100% - 20px)', + margin: 'calc(10px / 2 - 2px) calc(10px / 2)', + }, + '.rc-select-selection-overflow-item-rest': { + cursor: 'pointer', + }, + '.rc-select-selection-overflow-item-suffix': { + display: 'none', + backgroundColor: 'transparent', + width: '100%', + maxWidth: '100%', + height: '28px', + margin: 0, + paddingLeft: 0, + paddingRight: 0, + }, + input: { + flex: 1, + minWidth: '60px', + backgroundColor: 'transparent', + border: 0, + outline: 0, + fontSize: '14px', + padding: 0, + marginLeft: 0, + // appearance: 'none', + color: 'inherit', + height: '28px', + lineHeight: '32px', + cursor: 'pointer', + width: '100%', + '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': + { + display: 'none', + }, }, - // '.rc-select-selection-search': { - // flexGrow: 1, - // width: 'auto !important', - // }, - // '.rc-select-selection-overflow': { - // display: 'flex', - // minHeight: '34px', - // alignItems: 'center', - // flexWrap: 'nowrap', - // marginLeft: 'calc(-10px / 2)', - // boxSizing: 'border-box', - // }, - // '.rc-select-selection-overflow-item': { - // display: 'flex', - // alignItems: 'center', - // backgroundColor: '#f1f3f5', - // color: '#495057', - // height: '24px', - // paddingLeft: '12px', - // paddingRight: '12px', - // fontWeight: 500, - // fontSize: '12px', - // borderRadius: '4px', - // cursor: 'default', - // userSelect: 'none', - // maxWidth: 'calc(100% - 20px)', - // margin: 'calc(10px / 2 - 2px) calc(10px / 2)', - // }, - // '.rc-select-selection-overflow-item-rest': { - // cursor: 'pointer', - // }, - // '.rc-select-selection-overflow-item-suffix': { - // display: 'none', - // backgroundColor: 'transparent', - // width: '100%', - // maxWidth: '100%', - // height: '28px', - // margin: 0, - // paddingLeft: 0, - // paddingRight: 0, - // }, - // input: { - // flex: 1, - // minWidth: '60px', - // backgroundColor: 'transparent', - // border: 0, - // outline: 0, - // fontSize: '14px', - // padding: 0, - // marginLeft: 0, - // // appearance: 'none', - // color: 'inherit', - // height: '28px', - // lineHeight: '32px', - // cursor: 'pointer', - // width: '100%', - // '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': - // { - // display: 'none', - // }, - // }, '.rc-select-clear': { marginRight: '-24px', alignSelf: 'center', @@ -124,18 +124,16 @@ export default createStyles((theme, { radius = 4, width }: MultiSelectWidgetStyl dropdown: { fontSize: theme.fontSizes.xs, zIndex: 300, - paddingTop: '6px', + backgroundColor: '#fff', + border: '1px solid #e9ecef', + marginTop: 6, + padding: 0, + boxShadow: '0 1px 3px rgb(0 0 0 / 5%), rgb(0 0 0 / 5%) 0px 10px 15px -5px, rgb(0 0 0 / 4%) 0px 7px 7px -5px', + borderRadius: '4px', '&.rc-select-dropdown-slide-up-leave-active': { display: 'none', }, - '.rc-virtual-list, .rc-select-empty': { - backgroundColor: '#fff', - border: '1px solid #e9ecef', - padding: 0, - boxShadow: '0 1px 3px rgb(0 0 0 / 5%), rgb(0 0 0 / 5%) 0px 10px 15px -5px, rgb(0 0 0 / 4%) 0px 7px 7px -5px', - borderRadius: '4px', - }, - '.rc-select-empty': { + '.rc-select-item-empty': { padding: '8px 12px', }, '.rc-select-item-option': { diff --git a/dashboard/src/filter/filter-multi-select/render/widget.tsx b/dashboard/src/filter/filter-multi-select/render/widget.tsx index 927d75095..c2703ca5a 100644 --- a/dashboard/src/filter/filter-multi-select/render/widget.tsx +++ b/dashboard/src/filter/filter-multi-select/render/widget.tsx @@ -76,13 +76,10 @@ export const MultiSelectWidget = ({ value={value} onChange={onChange} onSelect={console.log} - open - // maxTagCount={1} - // maxTagTextLength={10} - // maxTagPlaceholder={(valueList) => { - // console.log({ valueList }); - // return `${valueList.length} selected`; - // }} + mode="multiple" + maxTagCount={0} + maxTagTextLength={10} + maxTagPlaceholder={(valueList) => `${valueList.length} selected`} > {options.map((o) => (