From 2543eafd19741ccd3ecd0ae9850db8d559a98fa7 Mon Sep 17 00:00:00 2001 From: melloware Date: Fri, 25 Nov 2022 12:53:58 -0500 Subject: [PATCH 1/2] Fix #3302: Multiselect add overlayVisible property --- api-generator/components/multiselect.js | 6 ++ components/doc/multiselect/apidoc.js | 6 ++ components/lib/multiselect/MultiSelect.js | 7 ++ components/lib/multiselect/multiselect.d.ts | 85 +++++++++++---------- 4 files changed, 62 insertions(+), 42 deletions(-) diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js index f8eb6130e2..49563000fd 100644 --- a/api-generator/components/multiselect.js +++ b/api-generator/components/multiselect.js @@ -286,6 +286,12 @@ const MultiSelectProps = [ type: 'boolean', default: 'false', description: 'Defaults to the option itself as the value of an option. Overrides the optionValue prop.' + }, + { + name: 'overlayVisible', + type: 'boolean', + default: 'false', + description: 'Specifies the visibility of the overlay panel.' } ]; diff --git a/components/doc/multiselect/apidoc.js b/components/doc/multiselect/apidoc.js index 028285e5c2..40499db948 100644 --- a/components/doc/multiselect/apidoc.js +++ b/components/doc/multiselect/apidoc.js @@ -99,6 +99,12 @@ export function ApiDoc(props) { null Inline style of the overlay panel element. + + overlayVisible + boolean + false + Specifies the visibility of the overlay panel. + scrollHeight string diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index a63524bbae..b7b6e29577 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -534,6 +534,12 @@ export const MultiSelect = React.memo( ObjectUtils.combinedRefs(inputRef, props.inputRef); }, [inputRef, props.inputRef]); + React.useEffect(() => { + setTimeout(() => { + props.overlayVisible ? show() : hide(); + }, 100); + }, [props.overlayVisible]); + useUpdateEffect(() => { if (overlayVisibleState && hasFilter) { alignOverlay(); @@ -685,6 +691,7 @@ MultiSelect.defaultProps = { optionLabel: null, optionValue: null, options: null, + overlayVisible: false, panelClassName: null, panelFooterTemplate: null, panelHeaderTemplate: null, diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts index e9c58d3707..2e04d997e9 100755 --- a/components/lib/multiselect/multiselect.d.ts +++ b/components/lib/multiselect/multiselect.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; -import TooltipOptions from '../tooltip/tooltipoptions'; import { CSSTransitionProps } from '../csstransition'; +import { SelectItemOptionsType } from '../selectitem/selectitem'; +import TooltipOptions from '../tooltip/tooltipoptions'; import { IconType } from '../utils'; import { VirtualScrollerProps } from '../virtualscroller'; -import { SelectItemOptionsType } from '../selectitem/selectitem'; type MultiSelectOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode); @@ -74,64 +74,65 @@ interface MultiSelectFilterOptions { } export interface MultiSelectProps extends Omit, HTMLDivElement>, 'onChange' | 'ref'> { + appendTo?: MultiSelectAppendToType; + ariaLabelledBy?: string; + children?: React.ReactNode; + className?: string; + dataKey?: string; + disabled?: boolean; + display?: MultiSelectDisplayType; + dropdownIcon?: IconType; + emptyFilterMessage?: MultiSelectEmptyFilterMessageType; + filter?: boolean; + filterBy?: string; + filterLocale?: string; + filterMatchMode?: string; + filterPlaceholder?: string; + filterTemplate?: MultiSelectFilterTemplateType; + fixedPlaceholder?: boolean; id?: string; + inputId?: string; inputRef?: React.Ref; + itemTemplate?: MultiSelectItemTemplateType; + maxSelectedLabels?: number; name?: string; - value?: any; - options?: SelectItemOptionsType; - optionLabel?: string; - optionValue?: string; optionDisabled?: MultiSelectOptionDisabledType; - optionGroupLabel?: string; optionGroupChildren?: string; + optionGroupLabel?: string; optionGroupTemplate?: MultiSelectOptionGroupTemplateType; - display?: MultiSelectDisplayType; - style?: React.CSSProperties; - className?: string; + optionLabel?: string; + optionValue?: string; + options?: SelectItemOptionsType; + overlayVisible?: boolean; panelClassName?: string; + panelFooterTemplate?: MultiSelectPanelFooterTemplateType; + panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType; panelStyle?: React.CSSProperties; - virtualScrollerOptions?: VirtualScrollerProps; - scrollHeight?: string; placeholder?: string; - fixedPlaceholder?: boolean; - disabled?: boolean; - showClear?: boolean; - filter?: boolean; - filterBy?: string; - filterMatchMode?: string; - filterPlaceholder?: string; - filterLocale?: string; - emptyFilterMessage?: MultiSelectEmptyFilterMessageType; + removeIcon?: IconType; resetFilterOnHide?: boolean; + scrollHeight?: string; + selectAll?: boolean; + selectedItemTemplate?: MultiSelectSelectedItemTemplateType; + selectedItemsLabel?: string; + selectionLimit?: number; + showClear?: boolean; + showSelectAll?: boolean; + style?: React.CSSProperties; tabIndex?: number; - dataKey?: string; - inputId?: string; - appendTo?: MultiSelectAppendToType; tooltip?: string; tooltipOptions?: TooltipOptions; - maxSelectedLabels?: number; - selectionLimit?: number; - selectedItemsLabel?: string; - ariaLabelledBy?: string; - itemTemplate?: MultiSelectItemTemplateType; - filterTemplate?: MultiSelectFilterTemplateType; - selectedItemTemplate?: MultiSelectSelectedItemTemplateType; - panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType; - panelFooterTemplate?: MultiSelectPanelFooterTemplateType; transitionOptions?: CSSTransitionProps; - dropdownIcon?: IconType; - removeIcon?: IconType; - showSelectAll?: boolean; - selectAll?: boolean; + useOptionAsValue?: boolean; + value?: any; + virtualScrollerOptions?: VirtualScrollerProps; + onBlur?(event: React.FocusEvent): void; onChange?(e: MultiSelectChangeParams): void; + onFilter?(e: MultiSelectFilterParams): void; onFocus?(event: React.FocusEvent): void; - onBlur?(event: React.FocusEvent): void; - onShow?(): void; onHide?(): void; - onFilter?(e: MultiSelectFilterParams): void; onSelectAll?(e: MultiSelectAllParams): void; - children?: React.ReactNode; - useOptionAsValue?: boolean; + onShow?(): void; } export declare class MultiSelect extends React.Component { From 29a8d0d0c3ad23a0bbf8f7af4cd99d5918b79ec8 Mon Sep 17 00:00:00 2001 From: melloware Date: Sat, 26 Nov 2022 13:43:02 -0500 Subject: [PATCH 2/2] Fix #3302: Multiselect add overlayVisible property --- components/doc/multiselect/apidoc.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/components/doc/multiselect/apidoc.js b/components/doc/multiselect/apidoc.js index 40499db948..c2c48b50d2 100644 --- a/components/doc/multiselect/apidoc.js +++ b/components/doc/multiselect/apidoc.js @@ -213,6 +213,12 @@ export function ApiDoc(props) { null Function that gets the option and returns the content for it. + + itemClassName + string + bull + Style class of the items. + filterTemplate any @@ -325,6 +331,18 @@ export function ApiDoc(props) { false Whether all data is selected. + + inline + boolean + false + Render the items panel inline. + + + flex + boolean + false + Use flex layout for the items panel. +