select

select copied to clipboard

thanks for your good hook

would you want to add a typescript definition to it or convert it to typescript fro base?

I would be happy to do that with a PR

You can add types in Definitely Typed and I will link to them here. I don’t have any plans to include types in this repo directly.

Tanner Linsley On Dec 10, 2019, 6:28 AM -0700, MHA15 [email protected], wrote:

thanks for your good hook would you want to add a typescript definition to it or convert it to typescript fro base? I would be happy to do that with a PR — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

Hey, I started the work on creating TypeScript types, but they are unfinished and not 100% accurate so I'd rather not push them to "Definitely Typed", but in the meantime people can use them if they want and hopefully even improve upon them.

All you have to do is create a file named something like "use-select.d.ts" and put it into a folder where TypeScript can find it, e.g. "src/typings/".

declare module 'use-select' {
  import { MutableRefObject } from 'react';

  type UseSelectOption<T> = {
    value: T;
    label: any;
  };

  type UseSelectOptions<T> = Array<UseSelectOption<T>>;

  // FIXME: While the type correctly always require "onChange", not providing "multi" results in the
  // type requesting "onChange" without any paramters which is wrong!
  type UseSelectMultiOptions<T> =
    | { multi?: never; onChange: (newValue: T) => void }
    | { multi: false; onChange: (newValue: T) => void }
    | { multi: true; onChange: (value: T[], newValue: T) => void };

  export type UseSelectState<T, V extends HTMLElement | null> = {
    // State
    visibleOptions: UseSelectOptions<T>;
    selectedOption: UseSelectOptions<T>;
    highlightedOption: UseSelectOptions<T>;
    searchValue: string;
    isOpen: boolean;

    // Actions
    highlightIndex: (index: number) => void;
    selectOption: (option: UseSelectOption<T>) => void;
    removeValue: (index: number) => void;
    setOpen: (isOpen: boolean) => void;
    setSearch: (searchValue: string) => void;
    getInputProps: (userProps?: any) => any; // FIXME: What is the type for these props?
    getOptionProps: (userProps?: any) => any; // FIXME: What is the type for these props?
    optionsRef: MutableRefObject<V>;
  };

  export type UseSelectOptionsArgument<T, V extends HTMLElement | null> = {
    create?: boolean;
    duplicates?: boolean;
    options: UseSelectOptions<T>;
    value: T;
    scrollToIndex?: (optionIndex: number) => void;
    shiftAmount?: number;
    filterFn?: (options: UseSelectOptions<T>, searchValue: string) => UseSelectOptions<T>;
    getCreateLabel?: (searchValue: string) => string;
    optionsRef: MutableRefObject<V>;
    stateReducer?: (
      oldState: UseSelectState<T, V>,
      newState: UseSelectState<T, V>,
      action: any // FIXME: Get the type of the actions
    ) => void;
  } & UseSelectMultiOptions<T>;

  export default function useSelect<T, V extends HTMLElement | null>(
    options: UseSelectOptionsArgument<T, V>
  ): UseSelectState<T, V>;
}