Skip to content

Commit

Permalink
Fix #3200 Add Generics to Dropdown, Cascadeselect, Listbox, Multisele…
Browse files Browse the repository at this point in the history 
…ct, Selectbutton (#3199)

* DataTable/TreeTable: stricter generically typed API #2523
Added Generics for Dropdown.
Generics have to be also added in:
cascadeselect.d.ts
listbox.d.ts
multiselect.d.ts
selectbutton.d.ts

because of the SelectItemOptionsType

* #2523 Add Generics to Select Button

* #2523 select button generics

* #2523 Add Generics to CascadeSelect

* #2523 add generics to List Box

* #2523 Add Multiselect Generics
  • Loading branch information
@DariusRDev
DariusRDev authored Aug 28, 2022
1 parent ef9660c commit 9c32470
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 88 deletions.
20 changes: 10 additions & 10 deletions components/lib/cascadeselect/cascadeselect.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,31 @@ import * as React from 'react';
import { CSSTransitionProps } from '../csstransition';
import { SelectItemOptionsType } from '../selectitem/selectitem';

type CascadeSelectItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
type CascadeSelectItemTemplateType<TOption> = React.ReactNode | ((option: TOption) => React.ReactNode);

type CascadeSelectAppendToType = 'self' | HTMLElement | undefined | null;

interface CascadeSelectChangeParams {
interface CascadeSelectChangeParams<TOption> {
originalEvent: React.SyntheticEvent;
value: any;
value: TOption;
}

interface CascadeSelectGroupChangeParams extends CascadeSelectChangeParams {}
interface CascadeSelectGroupChangeParams<TOption> extends CascadeSelectChangeParams<TOption> {}

export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
export interface CascadeSelectProps<TOption> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
id?: string;
inputRef?: React.Ref<HTMLInputElement>;
style?: object;
className?: string;
value?: any;
name?: string;
options?: SelectItemOptionsType;
options?: SelectItemOptionsType<TOption>;
optionLabel?: string;
optionValue?: string;
optionGroupLabel?: string;
optionGroupChildren?: string[];
placeholder?: string;
itemTemplate?: CascadeSelectItemTemplateType;
itemTemplate?: CascadeSelectItemTemplateType<TOption>;
disabled?: boolean;
dataKey?: string;
inputId?: string;
Expand All @@ -35,16 +35,16 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
appendTo?: CascadeSelectAppendToType;
transitionOptions?: CSSTransitionProps;
dropdownIcon?: string;
onChange?(e: CascadeSelectChangeParams): void;
onGroupChange?(e: CascadeSelectGroupChangeParams): void;
onChange?(e: CascadeSelectChangeParams<TOption>): void;
onGroupChange?(e: CascadeSelectGroupChangeParams<TOption>): void;
onBeforeShow?(): void;
onBeforeHide?(): void;
onShow?(): void;
onHide?(): void;
children?: React.ReactNode;
}

export declare class CascadeSelect extends React.Component<CascadeSelectProps, any> {
export declare class CascadeSelect<TOption> extends React.Component<CascadeSelectProps<TOption>, any> {
public getElement(): HTMLDivElement;
public getInput(): HTMLInputElement;
public getOverlay(): HTMLElement;
Expand Down
40 changes: 20 additions & 20 deletions components/lib/dropdown/dropdown.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,34 @@ import { CSSTransitionProps } from '../csstransition';
import { VirtualScrollerProps } from '../virtualscroller';
import { SelectItemOptionsType } from '../selectitem/selectitem';

type DropdownOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
type DropdownOptionGroupTemplateType<TOption> = React.ReactNode | ((option: TOption, index: number) => React.ReactNode);

type DropdownValueTemplateType = React.ReactNode | ((option: any, props: DropdownProps) => React.ReactNode);
type DropdownValueTemplateType<TOption> = React.ReactNode | ((option: TOption, props: DropdownProps<TOption>) => React.ReactNode);

type DropdownItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
type DropdownItemTemplateType<TOption> = React.ReactNode | ((option: TOption) => React.ReactNode);

type DropdownFilterTemplateType = React.ReactNode | ((options: DropdownFilterOptions) => React.ReactNode);

type DropdownEmptyMessageType = React.ReactNode | ((props: DropdownProps) => React.ReactNode);
type DropdownEmptyMessageType<TOption> = React.ReactNode | ((props: DropdownProps<TOption>) => React.ReactNode);

type DropdownEmptyFilterMessageType = React.ReactNode | ((props: DropdownProps) => React.ReactNode);
type DropdownEmptyFilterMessageType<TOption> = React.ReactNode | ((props: DropdownProps<TOption>) => React.ReactNode);

type DropdownOptionDisabledType = string | ((option: any) => boolean);
type DropdownOptionDisabledType<TOption> = string | ((option: TOption) => boolean);

type DropdownAppendToType = 'self' | HTMLElement | undefined | null;

interface DropdownChangeTargetOptions {
interface DropdownChangeTargetOptions<TOption> {
name: string;
id: string;
value: any;
value: TOption;
}

interface DropdownChangeParams {
interface DropdownChangeParams<TOption> {
originalEvent: React.SyntheticEvent;
value: any;
stopPropagation(): void;
preventDefault(): void;
target: DropdownChangeTargetOptions;
target: DropdownChangeTargetOptions<TOption>;
}

interface DropdownFilterParams {
Expand All @@ -44,21 +44,21 @@ interface DropdownFilterOptions {
reset?: () => void;
}

export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
export interface DropdownProps<TOption> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
id?: string;
inputRef?: React.Ref<HTMLSelectElement>;
name?: string;
value?: any;
options?: SelectItemOptionsType;
options?: SelectItemOptionsType<TOption>;
optionLabel?: string;
optionValue?: string;
optionDisabled?: DropdownOptionDisabledType;
optionDisabled?: DropdownOptionDisabledType<TOption>;
optionGroupLabel?: string;
optionGroupChildren?: string;
optionGroupTemplate?: DropdownOptionGroupTemplateType;
valueTemplate?: DropdownValueTemplateType;
optionGroupTemplate?: DropdownOptionGroupTemplateType<TOption>;
valueTemplate?: DropdownValueTemplateType<TOption>;
filterTemplate?: DropdownFilterTemplateType;
itemTemplate?: DropdownItemTemplateType;
itemTemplate?: DropdownItemTemplateType<TOption>;
style?: object;
className?: string;
virtualScrollerOptions?: VirtualScrollerProps;
Expand All @@ -68,8 +68,8 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
filterMatchMode?: string;
filterPlaceholder?: string;
filterLocale?: string;
emptyMessage?: DropdownEmptyMessageType;
emptyFilterMessage?: DropdownEmptyFilterMessageType;
emptyMessage?: DropdownEmptyMessageType<TOption>;
emptyFilterMessage?: DropdownEmptyFilterMessageType<TOption>;
editable?: boolean;
placeholder?: string;
required?: boolean;
Expand All @@ -93,7 +93,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
transitionOptions?: CSSTransitionProps;
dropdownIcon?: string;
showOnFocus?: boolean;
onChange?(e: DropdownChangeParams): void;
onChange?(e: DropdownChangeParams<TOption>): void;
onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
Expand All @@ -104,7 +104,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
children?: React.ReactNode;
}

export declare class Dropdown extends React.Component<DropdownProps, any> {
export declare class Dropdown<TOption> extends React.Component<DropdownProps<TOption>, any> {
public getElement(): HTMLDivElement;
public getInput(): HTMLInputElement;
public getFocusInput(): HTMLInputElement;
Expand Down
36 changes: 18 additions & 18 deletions components/lib/listbox/listbox.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,48 @@ import { SelectItemOptionsType } from '../selectitem/selectitem';
import TooltipOptions from '../tooltip/tooltipoptions';
import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller';

type ListBoxOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
type ListBoxOptionGroupTemplateType<TOption> = React.ReactNode | ((option: TOption, index: number) => React.ReactNode);

type ListBoxItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
type ListBoxItemTemplateType<TOption> = React.ReactNode | ((option: TOption) => React.ReactNode);

type ListBoxFilterTemplateType = React.ReactNode | ((options: ListBoxFilterOptions) => React.ReactNode);

type ListBoxOptionDisabledType = string | ((option: any) => boolean);
type ListBoxOptionDisabledType<TOption> = string | ((option: TOption) => boolean);

interface ListBoxChangeTargetOptions {
interface ListBoxChangeTargetOptions<TOption> {
name: string;
id: string;
value: any;
value: TOption;
}

interface ListBoxChangeParams {
interface ListBoxChangeParams<TOption> {
originalEvent: React.SyntheticEvent;
value: any;
value: TOption;
stopPropagation(): void;
preventDefault(): void;
target: ListBoxChangeTargetOptions;
target: ListBoxChangeTargetOptions<TOption>;
}

interface ListBoxFilterValueChangeParams {
interface ListBoxFilterValueChangeParams<TOption> {
originalEvent: React.SyntheticEvent;
value: any;
value: TOption;
}

interface ListBoxFilterOptions {
filter?: (event?: KeyboardEvent) => void;
reset?: () => void;
}

export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
export interface ListBoxProps<TOption> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
value?: any;
options?: SelectItemOptionsType;
options?: SelectItemOptionsType<TOption>;
optionLabel?: string;
optionValue?: string;
optionDisabled?: ListBoxOptionDisabledType;
optionDisabled?: ListBoxOptionDisabledType<TOption>;
optionGroupLabel?: string;
optionGroupChildren?: string;
optionGroupTemplate?: ListBoxOptionGroupTemplateType;
itemTemplate?: ListBoxItemTemplateType;
optionGroupTemplate?: ListBoxOptionGroupTemplateType<TOption>;
itemTemplate?: ListBoxItemTemplateType<TOption>;
filterTemplate?: ListBoxFilterTemplateType;
listStyle?: object;
listClassName?: string;
Expand All @@ -63,12 +63,12 @@ export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHT
tooltip?: string;
tooltipOptions?: TooltipOptions;
ariaLabelledBy?: string;
onChange?(e: ListBoxChangeParams): void;
onFilterValueChange?(e: ListBoxFilterValueChangeParams): void;
onChange?(e: ListBoxChangeParams<TOption>): void;
onFilterValueChange?(e: ListBoxFilterValueChangeParams<TOption>): void;
children?: React.ReactNode;
}

export declare class ListBox extends React.Component<ListBoxProps, any> {
export declare class ListBox<TOption> extends React.Component<ListBoxProps<TOption>, any> {
public getElement(): HTMLDivElement;
public getVirtualScroller(): VirtualScroller;
}
54 changes: 27 additions & 27 deletions components/lib/multiselect/multiselect.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import { IconType } from '../utils';
import { VirtualScrollerProps } from '../virtualscroller';
import { SelectItemOptionsType } from '../selectitem/selectitem';

type MultiSelectOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
type MultiSelectOptionGroupTemplateType<TOption> = React.ReactNode | ((option: TOption, index: number) => React.ReactNode);

type MultiSelectItemTemplateType = React.ReactNode | ((option: any) => React.ReactNode);
type MultiSelectItemTemplateType<TOption> = React.ReactNode | ((option: TOption) => React.ReactNode);

type MultiSelectSelectedItemTemplateType = React.ReactNode | ((value: any) => React.ReactNode);
type MultiSelectSelectedItemTemplateType<TOption> = React.ReactNode | ((value: TOption) => React.ReactNode);

type MultiSelectFilterTemplateType = React.ReactNode | ((options: MultiSelectFilterOptions) => React.ReactNode);

type MultiSelectEmptyFilterMessageType = React.ReactNode | ((props: MultiSelectProps) => React.ReactNode);
type MultiSelectEmptyFilterMessageType<TOption> = React.ReactNode | ((props: MultiSelectProps<TOption>) => React.ReactNode);

type MultiSelectDisplayType = 'comma' | 'chip';

Expand All @@ -22,7 +22,7 @@ interface MultiSelectHeaderCheckboxChangeParams {
checked: boolean;
}

interface MultiSelectPanelHeaderTemplateParams {
interface MultiSelectPanelHeaderTemplateParams<TOption> {
className: string;
checkboxElement: HTMLElement;
checked: boolean;
Expand All @@ -33,29 +33,29 @@ interface MultiSelectPanelHeaderTemplateParams {
closeIconClassName: string;
onCloseClick(event: React.MouseEvent<HTMLElement>): void;
element: JSX.Element;
props: MultiSelectProps;
props: MultiSelectProps<TOption>;
}

type MultiSelectPanelHeaderTemplateType = React.ReactNode | ((e: MultiSelectPanelHeaderTemplateParams) => React.ReactNode);
type MultiSelectPanelHeaderTemplateType<TOption> = React.ReactNode | ((e: MultiSelectPanelHeaderTemplateParams<TOption>) => React.ReactNode);

type MultiSelectPanelFooterTemplateType = React.ReactNode | ((props: MultiSelectProps, hide: () => void) => React.ReactNode);
type MultiSelectPanelFooterTemplateType<TOption> = React.ReactNode | ((props: MultiSelectProps<TOption>, hide: () => void) => React.ReactNode);

type MultiSelectOptionDisabledType = string | ((option: any) => boolean);
type MultiSelectOptionDisabledType<TOption> = string | ((option: TOption) => boolean);

type MultiSelectAppendToType = 'self' | HTMLElement | undefined | null;

interface MultiSelectChangeTargetOptions {
interface MultiSelectChangeTargetOptions<TOption> {
name: string;
id: string;
value: any;
value: TOption;
}

interface MultiSelectChangeParams {
interface MultiSelectChangeParams<TOption> {
originalEvent: React.SyntheticEvent;
value: any;
value: TOption;
stopPropagation(): void;
preventDefault(): void;
target: MultiSelectChangeTargetOptions;
target: MultiSelectChangeTargetOptions<TOption>;
}

interface MultiSelectFilterParams {
Expand All @@ -73,18 +73,18 @@ interface MultiSelectFilterOptions {
reset?: () => void;
}

export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
export interface MultiSelectProps<TOption> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
id?: string;
inputRef?: React.Ref<HTMLSelectElement>;
name?: string;
value?: any;
options?: SelectItemOptionsType;
options?: SelectItemOptionsType<TOption>;
optionLabel?: string;
optionValue?: string;
optionDisabled?: MultiSelectOptionDisabledType;
optionDisabled?: MultiSelectOptionDisabledType<TOption>;
optionGroupLabel?: string;
optionGroupChildren?: string;
optionGroupTemplate?: MultiSelectOptionGroupTemplateType;
optionGroupTemplate?: MultiSelectOptionGroupTemplateType<TOption>;
display?: MultiSelectDisplayType;
style?: object;
className?: string;
Expand All @@ -101,7 +101,7 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
filterMatchMode?: string;
filterPlaceholder?: string;
filterLocale?: string;
emptyFilterMessage?: MultiSelectEmptyFilterMessageType;
emptyFilterMessage?: MultiSelectEmptyFilterMessageType<TOption>;
resetFilterOnHide?: boolean;
tabIndex?: number;
dataKey?: string;
Expand All @@ -113,17 +113,17 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
selectionLimit?: number;
selectedItemsLabel?: string;
ariaLabelledBy?: string;
itemTemplate?: MultiSelectItemTemplateType;
itemTemplate?: MultiSelectItemTemplateType<TOption>;
filterTemplate?: MultiSelectFilterTemplateType;
selectedItemTemplate?: MultiSelectSelectedItemTemplateType;
panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType;
panelFooterTemplate?: MultiSelectPanelFooterTemplateType;
selectedItemTemplate?: MultiSelectSelectedItemTemplateType<TOption>;
panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType<TOption>;
panelFooterTemplate?: MultiSelectPanelFooterTemplateType<TOption>;
transitionOptions?: CSSTransitionProps;
dropdownIcon?: IconType<MultiSelectProps>;
removeIcon?: IconType<MultiSelectProps>;
dropdownIcon?: IconType<MultiSelectProps<TOption>>;
removeIcon?: IconType<MultiSelectProps<TOption>>;
showSelectAll?: boolean;
selectAll?: boolean;
onChange?(e: MultiSelectChangeParams): void;
onChange?(e: MultiSelectChangeParams<TOption>): void;
onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
onShow?(): void;
Expand All @@ -133,7 +133,7 @@ export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.Inp
children?: React.ReactNode;
}

export declare class MultiSelect extends React.Component<MultiSelectProps, any> {
export declare class MultiSelect<TOption> extends React.Component<MultiSelectProps<TOption>, any> {
public show(): void;
public hide(): void;
public getElement(): HTMLDivElement;
Expand Down
Loading

0 comments on commit 9c32470

Please sign in to comment.