improve type definition

[435352980]

declare module "react-dropdown-select" {
  import React, { KeyboardEvent, CSSProperties, ChangeEvent } from "react";

  export interface SetStateFnArgs<T> {
    dropdown?: boolean;
    values?: T[];
    search?: string;
    selectBounds?: DOMRect | {};
    cursor?: number | null;
    activeCursorItem?: any;
  }

  export interface SelectState<T> {
    dropdown: boolean;
    values: T[];
    search: string;
    selectBounds: object;
    cursor: number;
  }

  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 SelectRenderer<T> {
    props: SelectProps<T>;
    state: SelectState<T>;
    methods: SelectMethods<T>;
  }

  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 SelectItemRenderer<T> {
    item: T;
    itemIndex?: number;
    props: SelectProps<T>;
    state: SelectState<T>;
    methods: SelectMethods<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 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;
}

[sanusart]

Hey, thanks, why not pull request?
Looks nice but a few questions:

• What is JSX.Element I don't see it imported.
• Why DropDownProps and DropDownState are there but not used?
• Was it tested in real editor?

Thank you.

[435352980]

You are wright :)
I forget to delete DropDownState and some optional declaration, also missing backspaceDelete prop.
I use JSX.Element to suitable some function component width parameter type The Link

About DropDownProps

react-dropdown-select/src/components/Dropdown.js

Lines 78 to 108 in cee760c

	const DropDown = styled.div`
	position: absolute;
	${({ selectBounds, dropdownGap, dropdownPosition }) =>
	dropdownPosition === 'top'
	? `bottom: ${selectBounds.height + 2 + dropdownGap}px`
	: `top: ${selectBounds.height + 2 + dropdownGap}px`};
	${({ selectBounds, dropdownGap, portal }) =>
	portal
	? `
	position: fixed;
	top: ${selectBounds.bottom + dropdownGap}px;
	left: ${selectBounds.left - 1}px;`
	: 'left: -1px;'};
	border: 1px solid #ccc;
	width: ${({ selectBounds }) => selectBounds.width}px;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 0 10px 0 ${() => hexToRGBA('#000000', 0.2)};
	max-height: ${({ dropdownHeight }) => dropdownHeight};
	overflow: auto;
	z-index: 9;
	:focus {
	outline: none;
	}
	}
	`;

About Test

All types in types.d.ts

[435352980]

Sorry, I'm a new user of GitHub. I don't know how to use pull request correctly.

[sanusart]

No problem at all. I just don't understand where JSX is imported from?

…

On Thu, Feb 27, 2020, 9:45 AM 435352980 ***@***.***> wrote: Sorry, I'm a new user of GitHub. I don't know how to use pull request correctly. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#76?email_source=notifications&email_token=AACBLRSDHDFVY5UKJAFBYXDRE5VS3A5CNFSM4K37GMH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENDJWKY#issuecomment-591829803>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACBLRQSKIXUX3WHAUGYDLTRE5VS3ANCNFSM4K37GMHQ> .

[435352980]

It's a global type in @types/react

[sanusart]

Cool, did not knew that. Thanks.

[sanusart]

Thank you! Published v4.1.1

Regarding PRs. Every time you clone a repository, make changes and try to commit them. Github will create a fork in your account and will suggest you to open a pool request.