CODEWITHSUNDEEP
reactjstypescriptreact-select
pmiranda
pmiranda

Reputation: 8450

React-select typescript upgrade 3 to 4

With version 3 I had some code like this:

export const selectCustomStyles: StylesConfig = {
  control: (base) => ({
    ...base,
    background: 'white',
  }),
  option: (provided, state) => ({
    ...provided,
    color: 'white',
  })
};

export const selectCustomTheme = (theme: Theme): Theme => {
  return {
    ...theme,
    colors: {
      ...theme.colors,
      primary: '#185135',
    }
  };
};

And my Selects works ok, like this one:

import Select, { NamedProps } from 'react-select';
import { selectCustomStyles, selectCustomTheme } from '../../utils';
// Agent is some interface different than { value: string, label: string }    

type SelectAgentProps = NamedProps<Agent>

const SelectAgent: React.FC<SelectAgentProps> = ({ ...rest }) => {
  return (
      <Select
        styles={selectCustomStyles}
        theme={selectCustomTheme}
        {...rest}
        getOptionLabel={(agent) => agent.name}
        getOptionValue={(agent) => agent.code}
      />
  );
};

export default SelectAgent;

But now with the version 4, I had to pass 2 generics to StylesConfig type, like this:

StylesConfig<MyOptionType, IsMulti>

I'm trying to define thos types with:

export type MyOptionType = {
  [key: string]: string | undefined;
}

type IsMulti = false;

But I'm getting this error:

No overload matches this call.
  Overload 1 of 2, '(props: (StateProps<Props<Agent, false, GroupTypeBase<Agent>>> &     import("/home/paulo/Documents/afex/afex-connect-web/node_modules/@types/react-    select/src/stateManager").Props<...> & import("/home/paulo/Documents/afex/afex-connect-    web/node_modules/@types/react-select/src/Select").Props<...>) | Readonly<...>): StateManager<...>', gave the     following error.
    Type 'Partial<Styles<MyOptionType, false, GroupTypeBase<MyOptionType>>>' is not assignable to type     'Partial<Styles<Agent, false, GroupTypeBase<Agent>>>'.
      Types of property 'clearIndicator' are incompatible.
        Type '((base: CSSObject, props: IndicatorProps<MyOptionType, false, GroupTypeBase<MyOptionType>>) =>     CSSObject) | undefined' is not assignable to type '((base: CSSObject, props: IndicatorProps<Agent, false,     GroupTypeBase<Agent>>) => CSSObject) | undefined'.
  Overload 2 of 2, '(props: StateProps<Props<Agent, false, GroupTypeBase<Agent>>> &     import("/home/paulo/Documents/afex/afex-connect-web/node_modules/@types/react-    select/src/stateManager").Props<...> & import("/home/paulo/Documents/afex/afex-connect-    web/node_modules/@types/react-select/src/Select").Props<...>, context: any): StateManager<...>', gave the     following error.
    Type 'Partial<Styles<MyOptionType, false, GroupTypeBase<MyOptionType>>>' is not assignable to type     'Partial<Styles<Agent, false, GroupTypeBase<Agent>>>'.  TS2769

  11 |       <Select
  12 |         className='dropDownSelectAgent'
> 13 |         styles={selectCustomStyles}
     |         ^
  14 |         theme={selectCustomTheme}
  15 |         {...rest}
  16 |         getOptionLabel={(agent) => agent.name}

Any idea why?

Upvotes: 4

Views: 2715

Answers (1)

Marc Dworkin
Marc Dworkin

Reputation: 91

i've gotten it to work by following the instructions here except using CSSObject instead of CSSProperties

import { CSSObject } from '@emotion/serialize';
import Select, { StylesConfig } from 'react-select';

type MyOptionType = {
  label: string;
  value: string;
};

const options: MyOptionType[] = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const customControlStyles: CSSObject = {
  color: "white",
  borderColor: "pink"
};

type IsMulti = false;

const selectStyle: StylesConfig<MyOptionType, IsMulti> = {
  control: (provided, state) => {
    return {
      ...provided,
      ...customControlStyles
    };
  }
};

Upvotes: 2

Related Questions