Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #3302: Multiselect add overlayVisible property #3708

Merged
merged 3 commits into from
Nov 27, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions api-generator/components/multiselect.js
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,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.'
}
];

Expand Down
24 changes: 24 additions & 0 deletions components/doc/multiselect/apidoc.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,12 @@ export function ApiDoc(props) {
<td>null</td>
<td>Inline style of the overlay panel element.</td>
</tr>
<tr>
<td>overlayVisible</td>
<td>boolean</td>
<td>false</td>
<td>Specifies the visibility of the overlay panel.</td>
</tr>
<tr>
<td>scrollHeight</td>
<td>string</td>
Expand Down Expand Up @@ -207,6 +213,12 @@ export function ApiDoc(props) {
<td>null</td>
<td>Function that gets the option and returns the content for it.</td>
</tr>
<tr>
<td>itemClassName</td>
<td>string</td>
<td>bull</td>
<td>Style class of the items.</td>
</tr>
<tr>
<td>filterTemplate</td>
<td>any</td>
Expand Down Expand Up @@ -319,6 +331,18 @@ export function ApiDoc(props) {
<td>false</td>
<td>Whether all data is selected.</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>Render the items panel inline.</td>
</tr>
<tr>
<td>flex</td>
<td>boolean</td>
<td>false</td>
<td>Use flex layout for the items panel.</td>
</tr>
</tbody>
</table>
</div>
Expand Down
7 changes: 7 additions & 0 deletions components/lib/multiselect/MultiSelect.js
Original file line number Diff line number Diff line change
Expand Up @@ -538,6 +538,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();
Expand Down Expand Up @@ -696,6 +702,7 @@ MultiSelect.defaultProps = {
optionLabel: null,
optionValue: null,
options: null,
overlayVisible: false,
panelClassName: null,
panelFooterTemplate: null,
panelHeaderTemplate: null,
Expand Down
91 changes: 46 additions & 45 deletions components/lib/multiselect/multiselect.d.ts
100755 → 100644
Original file line number Diff line number Diff line change
@@ -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);

Expand Down Expand Up @@ -74,67 +74,68 @@ interface MultiSelectFilterOptions {
}

export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
appendTo?: MultiSelectAppendToType;
ariaLabelledBy?: string;
children?: React.ReactNode;
className?: string;
dataKey?: string;
disabled?: boolean;
display?: MultiSelectDisplayType;
dropdownIcon?: IconType<MultiSelectProps>;
emptyFilterMessage?: MultiSelectEmptyFilterMessageType;
filter?: boolean;
filterBy?: string;
filterLocale?: string;
filterMatchMode?: string;
filterPlaceholder?: string;
filterTemplate?: MultiSelectFilterTemplateType;
fixedPlaceholder?: boolean;
flex?: boolean;
id?: string;
inline?: boolean;
inputId?: string;
inputRef?: React.Ref<HTMLSelectElement>;
itemClassName?: string;
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;
melloware marked this conversation as resolved.
Show resolved Hide resolved
inline?: boolean;
flex?: boolean;
style?: React.CSSProperties;
className?: string;
itemClassName?: 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<MultiSelectProps>;
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<MultiSelectProps>;
removeIcon?: IconType<MultiSelectProps>;
showSelectAll?: boolean;
selectAll?: boolean;
useOptionAsValue?: boolean;
value?: any;
virtualScrollerOptions?: VirtualScrollerProps;
onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
onChange?(e: MultiSelectChangeParams): void;
onFilter?(e: MultiSelectFilterParams): void;
onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
onBlur?(event: React.FocusEvent<HTMLInputElement>): 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<MultiSelectProps, any> {
Expand Down