From 4bf3b8027fdec947c6dc11bdac5de44e06ab5cfe Mon Sep 17 00:00:00 2001 From: sasha Date: Fri, 28 Feb 2020 21:16:27 +0200 Subject: [PATCH] FIX (types): types improvement by @435352980 closes #76 --- types.d.ts | 255 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 149 insertions(+), 106 deletions(-) diff --git a/types.d.ts b/types.d.ts index dc9b2bd3..709f9bb5 100644 --- a/types.d.ts +++ b/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 { + 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 { + dropdown: boolean; + values: T[]; + search: string; + selectBounds: object; + cursor: number; + } -export interface IRenderer { - props?: ISelectProps; - state?: IState; - methods?: IMethods; -} + export interface SelectMethods { + removeItem: ( + event: React.MouseEvent | null, + item: T, + close: boolean + ) => void; + dropDown: (action: string, event?: React.MouseEvent | null) => void; + addItem: (item: T) => void; + setSearch: (event: ChangeEvent) => 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 { - event: KeyboardEvent; - props?: ISelectProps; - state?: IState; - methods?: IMethods; - setState?: () => void; -} + export interface SelectRenderer { + props: SelectProps; + state: SelectState; + methods: SelectMethods; + } -export interface IItemRenderer { - item?: T; - itemIndex?: number; - props?: ISelectProps; - state?: IState; - methods?: IMethods; -} + export interface SelectKeyDown { + event: KeyboardEvent; + props: SelectProps; + state: SelectState; + methods: SelectMethods; + setState: ( + setter: ((args: SetStateFnArgs) => SetStateFnArgs) | SetStateFnArgs + ) => void; + } -export interface ISelectProps { - 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[]; - handleKeyDownFn?: ({ event, props, state, methods, setState }: IKeyDown) => void; - clearRenderer?: ({ props, state, methods }: IRenderer) => void; - contentRenderer?: ({ props, state, methods }: IRenderer) => void; - dropdownRenderer?: ({ props, state, methods }: IRenderer) => void; - dropdownHandleRenderer?: ({ props, state, methods }: IRenderer) => void; - inputRenderer?: ({ props, state, methods }: IRenderer) => void; - itemRenderer?: ({ item, itemIndex, props, state, methods }: IItemRenderer) => void; - loadingRenderer?: ({ props }: IItemRenderer) => void; - noDataRenderer?: ({ props, state, methods }: IRenderer) => void; - optionRenderer?: ({ item, props, state, methods }: IItemRenderer) => void; - separatorRenderer?: ({ props, state, methods }: IRenderer) => void; - additionalProps?: T; -} + export interface SelectItemRenderer { + item: T; + itemIndex?: number; + props: SelectProps; + state: SelectState; + methods: SelectMethods; + } -declare const Select: React.SFC>; + export interface SelectProps { + 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[]; + handleKeyDownFn?: ({ event, props, state, methods, setState }: SelectKeyDown) => void; + clearRenderer?: ({ props, state, methods }: SelectRenderer) => JSX.Element; + contentRenderer?: ({ props, state, methods }: SelectRenderer) => JSX.Element; + dropdownRenderer?: ({ props, state, methods }: SelectRenderer) => JSX.Element; + dropdownHandleRenderer?: ({ props, state, methods }: SelectRenderer) => JSX.Element; + inputRenderer?: ({ + props, + state, + methods, + inputRef + }: SelectRenderer & { + inputRef: React.RefObject; + }) => JSX.Element; + itemRenderer?: ({ + item, + itemIndex, + props, + state, + methods + }: SelectItemRenderer) => JSX.Element; + loadingRenderer?: ({ props }: SelectItemRenderer) => JSX.Element; + noDataRenderer?: ({ props, state, methods }: SelectRenderer) => JSX.Element; + optionRenderer?: ({ item, props, state, methods }: SelectItemRenderer) => JSX.Element; + separatorRenderer?: ({ props, state, methods }: SelectRenderer) => JSX.Element; + additionalProps?: React.HTMLAttributes; + wrapperClassName?: string; + } -export default Select; + export interface DropDownProps { + selectBounds: DOMRect; + dropdownGap: number; + portal: HTMLElement; + dropdownHeight: string; + dropdownPosition: 'auto' | 'top' | 'bottom'; + } + + const Select: ( + props: React.PropsWithRef> + ) => JSX.Element; + export default Select; +}