FIX (types): types improvement by @435352980 closes #76

types.d.ts

@@ -1,114 +1,157 @@
-import React, { SyntheticEvent, KeyboardEvent } from 'react';
+declare module 'react-dropdown-select' {
+  import React, { KeyboardEvent, CSSProperties, ChangeEvent } from 'react';
 
-export interface IState {
-  dropdown: boolean;
-  values: object;
-  search: string;
-  selectBounds: object;
-  cursor: number;
-}
+  export interface SetStateFnArgs<T> {
+    dropdown?: boolean;
+    values?: T[];
+    search?: string;
+    selectBounds?: DOMRect | {};
+    cursor?: number | null;
+    activeCursorItem?: any;
+  }
 
-export interface IMethods {
-  removeItem: (event: SyntheticEvent | null, item: IItemRenderer['item'], close: boolean) => void;
-  dropDown: (action: string, event: SyntheticEvent | null) => void;
-  addItem: (item: IItemRenderer['item']) => void;
-  setSearch: (event: SyntheticEvent) => void;
-  getInputSize: () => number;
-  toggleSelectAll: () => void;
-  clearAll: () => void;
-  selectAll: (items?: IItemRenderer['item'][]) => void;
-  searchResults: () => void;
-  getSelectRef: () => React.RefObject;
-  isSelected: (item: IItemRenderer['item']) => boolean;
-  getSelectBounds: () => ClientRect;
-  areAllSelected: () => boolean;
-  handleKeyDown: (event: KeyboardEvent) => void;
-  activeCursorItem: () => void;
-  createNew: (item: IItemRenderer['item']) => void;
-  sortBy: () => ISelectProps['options'];
-  safeString: (input: string) => string;
-}
+  export interface SelectState<T> {
+    dropdown: boolean;
+    values: T[];
+    search: string;
+    selectBounds: object;
+    cursor: number;
+  }
 
-export interface IRenderer<T extends object = object> {
-  props?: ISelectProps<T>;
-  state?: IState;
-  methods?: IMethods;
-}
+  export interface SelectMethods<T> {
+    removeItem: (
+      event: React.MouseEvent<HTMLElement, MouseEvent> | null,
+      item: T,
+      close: boolean
+    ) => void;
+    dropDown: (action: string, event?: React.MouseEvent<HTMLElement, MouseEvent> | null) => void;
+    addItem: (item: T) => void;
+    setSearch: (event: ChangeEvent<HTMLInputElement>) => void;
+    getInputSize: () => number;
+    toggleSelectAll: () => void;
+    clearAll: () => void;
+    selectAll: (items?: T[]) => void;
+    searchResults: () => T[];
+    getSelectRef: () => HTMLDivElement;
+    isSelected: (item: T) => boolean;
+    getSelectBounds: () => {} | DOMRect;
+    areAllSelected: () => boolean;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    activeCursorItem: (activeCursorItem: any) => void;
+    createNew: (searchText: string) => void;
+    sortBy: () => T[];
+    safeString: (input: string) => string;
+  }
 
-export interface IKeyDown<T extends object = object> {
-	event: KeyboardEvent;
-	props?: ISelectProps<T>;
-	state?: IState;
-	methods?: IMethods;
-	setState?: () => void;
-}
+  export interface SelectRenderer<T> {
+    props: SelectProps<T>;
+    state: SelectState<T>;
+    methods: SelectMethods<T>;
+  }
 
-export interface IItemRenderer<T extends object = object> {
-  item?: T;
-  itemIndex?: number;
-  props?: ISelectProps<T>;
-  state?: IState;
-  methods?: IMethods;
-}
+  export interface SelectKeyDown<T> {
+    event: KeyboardEvent;
+    props: SelectProps<T>;
+    state: SelectState<T>;
+    methods: SelectMethods<T>;
+    setState: (
+      setter: ((args: SetStateFnArgs<T>) => SetStateFnArgs<T>) | SetStateFnArgs<T>
+    ) => void;
+  }
 
-export interface ISelectProps<T extends object = object> {
-	className?: string;
-  addPlaceholder?: string;
-  placeholder?: string;
-  values: T[];
-  options: T[];
-  multi?: boolean;
-  disabled?: boolean;
-  searchBy?: string;
-  sortBy?: string;
-  clearable?: boolean;
-  searchable?: boolean;
-  dropdownHandle?: boolean;
-  separator?: boolean;
-  keepOpen?: undefined;
-  noDataLabel?: string;
-  createNewLabel?: string;
-  disabledLabel?: string;
-  dropdownGap?: number;
-  closeOnScroll?: boolean;
-  debounceDelay?: number;
-  labelField?: string;
-  valueField?: string;
-  color?: string;
-  keepSelectedInList?: boolean;
-  closeOnSelect?: boolean;
-  clearOnBlur?: boolean;
-  clearOnSelect?: boolean;
-  dropdownPosition?: string;
-  dropdownHeight?: string;
-  autoFocus?: boolean;
-  portal?: HTMLElement;
-  create?: boolean;
-  direction?: 'ltr' | 'rtl';
-  name?: string;
-	required?: boolean,
-	pattern?: string,
-  onChange: (value: any) => void;
-  onDropdownOpen?: () => void;
-  onDropdownClose?: () => void;
-  onClearAll?: () => void;
-  onSelectAll?: () => void;
-  onCreateNew?: () => void;
-	searchFn?: ({ props, state, methods }: IRenderer<T>) => T[];
-	handleKeyDownFn?: ({ event, props, state, methods, setState }: IKeyDown<T>) => void;
-  clearRenderer?: ({ props, state, methods }: IRenderer<T>) => void;
-  contentRenderer?: ({ props, state, methods }: IRenderer<T>) => void;
-  dropdownRenderer?: ({ props, state, methods }: IRenderer<T>) => void;
-  dropdownHandleRenderer?: ({ props, state, methods }: IRenderer<T>) => void;
-  inputRenderer?: ({ props, state, methods }: IRenderer<T>) => void;
-  itemRenderer?: ({ item, itemIndex, props, state, methods }: IItemRenderer<T>) => void;
-  loadingRenderer?: ({ props }: IItemRenderer<T>) => void;
-  noDataRenderer?: ({ props, state, methods }: IRenderer<T>) => void;
-  optionRenderer?: ({ item, props, state, methods }: IItemRenderer<T>) => void;
-  separatorRenderer?: ({ props, state, methods }: IRenderer<T>) => void;
-	additionalProps?: T;
-}
+  export interface SelectItemRenderer<T> {
+    item: T;
+    itemIndex?: number;
+    props: SelectProps<T>;
+    state: SelectState<T>;
+    methods: SelectMethods<T>;
+  }
 
-declare const Select: React.SFC<ISelectProps<T extends object ? T : {}>>;
+  export interface SelectProps<T> {
+    backspaceDelete?: boolean;
+    className?: string;
+    addPlaceholder?: string;
+    placeholder?: string;
+    loading?: boolean;
+    style?: CSSProperties;
+    values: T[];
+    options: T[];
+    multi?: boolean;
+    disabled?: boolean;
+    searchBy?: string;
+    sortBy?: string;
+    clearable?: boolean;
+    searchable?: boolean;
+    dropdownHandle?: boolean;
+    separator?: boolean;
+    keepOpen?: undefined;
+    noDataLabel?: string;
+    createNewLabel?: string;
+    disabledLabel?: string;
+    dropdownGap?: number;
+    closeOnScroll?: boolean;
+    debounceDelay?: number;
+    labelField?: string;
+    valueField?: string;
+    color?: string;
+    keepSelectedInList?: boolean;
+    closeOnSelect?: boolean;
+    clearOnBlur?: boolean;
+    clearOnSelect?: boolean;
+    dropdownPosition?: 'top' | 'bottom' | 'auto';
+    dropdownHeight?: string;
+    autoFocus?: boolean;
+    portal?: HTMLElement;
+    create?: boolean;
+    direction?: 'ltr' | 'rtl';
+    name?: string;
+    required?: boolean;
+    pattern?: string;
+    onChange: (value: T[]) => void;
+    onDropdownOpen?: () => void;
+    onDropdownClose?: () => void;
+    onClearAll?: () => void;
+    onSelectAll?: () => void;
+    onCreateNew?: (item: T) => void;
+    searchFn?: ({ props, state, methods }: SelectRenderer<T>) => T[];
+    handleKeyDownFn?: ({ event, props, state, methods, setState }: SelectKeyDown<T>) => void;
+    clearRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
+    contentRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
+    dropdownRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
+    dropdownHandleRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
+    inputRenderer?: ({
+      props,
+      state,
+      methods,
+      inputRef
+    }: SelectRenderer<T> & {
+      inputRef: React.RefObject<HTMLInputElement>;
+    }) => JSX.Element;
+    itemRenderer?: ({
+      item,
+      itemIndex,
+      props,
+      state,
+      methods
+    }: SelectItemRenderer<T>) => JSX.Element;
+    loadingRenderer?: ({ props }: SelectItemRenderer<T>) => JSX.Element;
+    noDataRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
+    optionRenderer?: ({ item, props, state, methods }: SelectItemRenderer<T>) => JSX.Element;
+    separatorRenderer?: ({ props, state, methods }: SelectRenderer<T>) => JSX.Element;
+    additionalProps?: React.HTMLAttributes<HTMLDivElement>;
+    wrapperClassName?: string;
+  }
 
-export default Select;
+  export interface DropDownProps {
+    selectBounds: DOMRect;
+    dropdownGap: number;
+    portal: HTMLElement;
+    dropdownHeight: string;
+    dropdownPosition: 'auto' | 'top' | 'bottom';
+  }
+
+  const Select: <T extends object | string = {}>(
+    props: React.PropsWithRef<SelectProps<T>>
+  ) => JSX.Element;
+  export default Select;
+}