fixes #3200 Add Generics to Dropdown, Listbox, Multiselect and Select…

…button (#3212) * #3200 Fresh Branch with changes * add Generic as any in Cascadeselect * #3200 revert copy error
primefaces · Sep 15, 2022 · da22a22 · da22a22
1 parent 58c1a1e
commit da22a22
Show file tree

Hide file tree

Showing 6 changed files with 237 additions and 111 deletions.
diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -20,7 +20,7 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
     className?: string;
     value?: any;
     name?: string;
-    options?: SelectItemOptionsType;
+    options?: SelectItemOptionsType<any>;
     optionLabel?: string;
     optionValue?: string;
     optionGroupLabel?: string;

diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
@@ -1,37 +1,59 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
+import { NestedKeyOf, SelectItemOptionsType } from '../selectitem/selectitem';
+import TooltipOptions from '../tooltip/tooltipoptions';
 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 {
+type DropdownValue<TOption, TValue, TGroupLabel, TGroupChildren> = TGroupLabel extends undefined
+    ? TValue extends undefined
+        ? TOption extends { value: any }
+            ? TOption['value']
+            : TOption
+        : TValue extends keyof TOption
+        ? TOption[TValue]
+        : any
+    : TGroupChildren extends keyof TOption
+    ? TValue extends undefined
+        ? TOption[TGroupChildren] extends { value: any }[]
+            ? TOption[TGroupChildren][0]['value']
+            : TOption[TGroupChildren] extends any[]
+            ? TOption[TGroupChildren][0]
+            : any
+        : TOption[TGroupChildren] extends any[]
+        ? TValue extends keyof TOption[TGroupChildren][0]
+            ? TOption[TGroupChildren][0][TValue]
+            : any
+        : any
+    : any;
+
+interface DropdownChangeTargetOptions<TOption> {
     name: string;
     id: string;
-    value: any;
+    value: TOption;
 }
 
-interface DropdownChangeParams {
+interface DropdownChangeParams<TOption, TValue, TGroupLabel, TGroupChildren> {
     originalEvent: React.SyntheticEvent;
-    value: any;
+    value: DropdownValue<TOption, TValue, TGroupLabel, TGroupChildren>;
     stopPropagation(): void;
     preventDefault(): void;
-    target: DropdownChangeTargetOptions;
+    target: DropdownChangeTargetOptions<TOption>;
 }
 
 interface DropdownFilterParams {
@@ -44,21 +66,21 @@ interface DropdownFilterOptions {
     reset?: () => void;
 }
 
-export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+export interface DropdownProps<TOption, TValue = undefined, TGroupLabel = undefined, TGroupChildren = undefined> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'value' | 'onChange' | 'ref'> {
     id?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
     name?: string;
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
-    optionDisabled?: DropdownOptionDisabledType;
-    optionGroupLabel?: string;
-    optionGroupChildren?: string;
-    optionGroupTemplate?: DropdownOptionGroupTemplateType;
-    valueTemplate?: DropdownValueTemplateType;
+    value?: string | number | DropdownValue<TOption, TValue, TGroupLabel, TGroupChildren> | undefined;
+    options?: SelectItemOptionsType<TOption>;
+    optionLabel?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    optionValue?: TValue | Omit<TValue, string>;
+    optionDisabled?: DropdownOptionDisabledType<TOption>;
+    optionGroupLabel?: TGroupLabel | Omit<NestedKeyOf<TGroupLabel>, string>;
+    optionGroupChildren?: TGroupChildren | Omit<NestedKeyOf<TGroupChildren>, string>;
+    optionGroupTemplate?: DropdownOptionGroupTemplateType<TOption>;
+    valueTemplate?: DropdownValueTemplateType<TOption>;
     filterTemplate?: DropdownFilterTemplateType;
-    itemTemplate?: DropdownItemTemplateType;
+    itemTemplate?: DropdownItemTemplateType<TOption>;
     style?: object;
     className?: string;
     virtualScrollerOptions?: VirtualScrollerProps;
@@ -68,8 +90,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;
@@ -93,7 +115,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
     transitionOptions?: CSSTransitionProps;
     dropdownIcon?: string;
     showOnFocus?: boolean;
-    onChange?(e: DropdownChangeParams): void;
+    onChange?(e: DropdownChangeParams<TOption, TValue, TGroupLabel, TGroupChildren>): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
     onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
@@ -104,7 +126,12 @@ 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,
+    TValue extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupLabel extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupChildren extends NestedKeyOf<TOption> | undefined = undefined
+> extends React.Component<DropdownProps<TOption, TValue, TGroupLabel, TGroupChildren>, any> {
     public getElement(): HTMLDivElement;
     public getInput(): HTMLInputElement;
     public getFocusInput(): HTMLInputElement;

diff --git a/components/lib/listbox/listbox.d.ts b/components/lib/listbox/listbox.d.ts
@@ -1,57 +1,102 @@
 import * as React from 'react';
-import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { NestedKeyOf, 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 {
+type ListBoxValueType<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren> = TMultiple extends undefined
+    ? TGroupLabel extends undefined
+        ? TValue extends undefined
+            ? TOption extends { value: any }
+                ? TOption['value']
+                : TOption
+            : TValue extends keyof TOption
+            ? TOption[TValue]
+            : any
+        : TGroupChildren extends keyof TOption
+        ? TValue extends undefined
+            ? TOption[TGroupChildren] extends { value: any }[]
+                ? TOption[TGroupChildren][0]['value']
+                : TOption[TGroupChildren] extends any[]
+                ? TOption[TGroupChildren][0]
+                : any
+            : TOption[TGroupChildren] extends any[]
+            ? TValue extends keyof TOption[TGroupChildren][0]
+                ? TOption[TGroupChildren][0][TValue]
+                : any
+            : any
+        : any
+    : TGroupLabel extends undefined
+    ? TValue extends undefined
+        ? TOption extends { value: any }
+            ? TOption['value'][]
+            : TOption[]
+        : TValue extends keyof TOption
+        ? TOption[TValue][]
+        : any[]
+    : TGroupChildren extends keyof TOption
+    ? TValue extends undefined
+        ? TOption[TGroupChildren] extends { value: any }[]
+            ? TOption[TGroupChildren][0]['value'][]
+            : TOption[TGroupChildren] extends any[]
+            ? TOption[TGroupChildren][0]
+            : any[]
+        : TOption[TGroupChildren] extends any[]
+        ? TValue extends keyof TOption[TGroupChildren][0]
+            ? TOption[TGroupChildren][0][TValue][]
+            : any[]
+        : any[]
+    : any[];
+
+interface ListBoxChangeTargetOptions<TOption> {
     name: string;
     id: string;
-    value: any;
+    value: TOption;
 }
 
-interface ListBoxChangeParams {
+interface ListBoxChangeParams<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren> {
     originalEvent: React.SyntheticEvent;
-    value: any;
+    value: ListBoxValueType<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren>;
     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'> {
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
-    optionDisabled?: ListBoxOptionDisabledType;
-    optionGroupLabel?: string;
-    optionGroupChildren?: string;
-    optionGroupTemplate?: ListBoxOptionGroupTemplateType;
-    itemTemplate?: ListBoxItemTemplateType;
+export interface ListBoxProps<TOption, TValue = undefined, TMultiple = undefined, TGroupLabel = undefined, TGroupChildren = undefined>
+    extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'multiple' | 'value' | 'onChange' | 'ref'> {
+    value?: ReadonlyArray<string> | ListBoxValueType<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren>;
+    options?: SelectItemOptionsType<TOption>;
+    optionLabel?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    optionValue?: TValue | Omit<TValue, string>;
+    optionDisabled?: ListBoxOptionDisabledType<TOption>;
+    optionGroupLabel?: TGroupLabel | Omit<NestedKeyOf<TGroupLabel>, string>;
+    optionGroupChildren?: TGroupChildren | Omit<NestedKeyOf<TGroupChildren>, string>;
+    optionGroupTemplate?: ListBoxOptionGroupTemplateType<TOption>;
+    itemTemplate?: ListBoxItemTemplateType<TOption>;
     filterTemplate?: ListBoxFilterTemplateType;
     listStyle?: object;
     listClassName?: string;
     virtualScrollerOptions?: VirtualScrollerProps;
     disabled?: boolean;
-    dataKey?: string;
-    multiple?: boolean;
+    dataKey?: NestedKeyOf<TOption> | Omit<NestedKeyOf<TOption>, string>;
+    multiple?: TMultiple;
     metaKeySelection?: boolean;
     filter?: boolean;
     filterBy?: string;
@@ -63,12 +108,18 @@ 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, TValue, TMultiple, TGroupLabel, TGroupChildren>): void;
+    onFilterValueChange?(e: ListBoxFilterValueChangeParams<TOption>): void;
     children?: React.ReactNode;
 }
 
-export declare class ListBox extends React.Component<ListBoxProps, any> {
+export declare class ListBox<
+    TOption,
+    TValue extends NestedKeyOf<TOption> | undefined = undefined,
+    TMultiple = undefined,
+    TGroupLabel extends NestedKeyOf<TOption> | undefined = undefined,
+    TGroupChildren extends NestedKeyOf<TOption> | undefined = undefined
+> extends React.Component<ListBoxProps<TOption, TValue, TMultiple, TGroupLabel, TGroupChildren>, any> {
     public getElement(): HTMLDivElement;
     public getVirtualScroller(): VirtualScroller;
 }