types#DropdownOption TypeScript Examples

export function AddressSelect({ placeholder = 'Select address', ...props }: Props) {
  const { keyring } = useApi();
  const { myContracts } = useDatabase();

  const options = useMemo((): GroupBase<DropdownOption<string>>[] => {
    return [
      {
        label: 'My Accounts',
        options: createAccountOptions(keyring?.getPairs()),
      },
      ...(myContracts?.owned && myContracts.owned.length > 0
        ? [
            {
              label: 'Uploaded Contracts',
              options: (myContracts?.owned || []).map(({ name, address }) => ({
                label: name,
                value: address,
              })),
            },
          ]
        : []),
    ];
  }, [keyring, myContracts?.owned]);

  return <Select options={options} placeholder={placeholder} {...props} />;
}

function isGroupedOptions<T>(
  options: ReactSelectProps<DropdownOption<T>, false>['options']
): options is GroupBase<DropdownOption<T>>[] {
  try {
    return !!options && (options as GroupBase<DropdownOption<T>>[])[0].options !== undefined;
  } catch (e) {
    return false;
  }
}

function Option({ label, value }: DropdownOption<string>) {
  return <Account className="p-1.5" name={label} value={value} />;
}

function Control<T>(props: ControlProps<DropdownOption<T>, false>) {
  return <components.Control {...props} className={classes(props.className, 'min-h-0')} />;
}

function Input<T>(props: InputProps<DropdownOption<T>, false>) {
  return (
    <components.Input
      {...props}
      inputClassName="dark:text-white outline-none border-none shadow-none focus:ring-transparent"
    />
  );
}

export function Dropdown<T>({
  className = '',
  components = {},
  formatOptionLabel,
  isDisabled = false,
  isSearchable = false,
  onChange: _onChange,
  options = [],
  placeholder,
  value: _value,
}: DropdownProps<T>) {
  const onChange = useCallback(
    (option: DropdownOption<T> | null): void => {
      option && _onChange(option.value);
    },
    [_onChange]
  );

  const value = useMemo(() => {
    if (isGroupedOptions(options)) {
      return options
        .reduce((result: DropdownOption<T>[], { options }) => [...result, ...options], [])
        .find(({ value }) => value === _value);
    }

    return (options as DropdownOption<T>[]).find(({ value }) => value === _value);
  }, [options, _value]);

  return (
    <Select
      className={classes('dropdown', className)}
      classNamePrefix="dropdown"
      components={{ Control, DropdownIndicator, Input, Option, ...components }}
      formatOptionLabel={formatOptionLabel}
      isDisabled={isDisabled}
      isSearchable={isSearchable}
      onChange={onChange}
      options={options}
      placeholder={placeholder}
      styles={{
        dropdownIndicator: provided => ({ ...provided, padding: '0.25rem' }),
        input: provided => ({ ...provided, color: 'unset' }),
        option: () => ({}),
      }}
      value={value}
    />
  );
}

export function createConstructorOptions(data?: AbiConstructor[]): DropdownOption<number>[] {
  return (data || []).map((constructor, index) => ({
    label: <MessageSignature message={constructor} />,
    value: index,
  }));
}

export function createMessageOptions(data?: AbiMessage[]): DropdownOption<AbiMessage>[] {
  return (data || []).map(message => ({
    label: <MessageSignature message={message} />,
    value: message,
  }));
}

export function createAccountOptions(data: Partial<KeyringPair>[]): DropdownOption<string>[] {
  return data.map(pair => ({
    label: pair.meta?.name as string,
    value: pair.address || '',
  }));
}

export function createContractOptions(data: ContractDocument[]): DropdownOption<string>[] {
  return data.map(({ name, address }) => ({
    label: name,
    value: address,
  }));
}

function Option<T>({ children, ...props }: OptionProps<DropdownOption<T>, false>) {
  return (
    <components.Option {...props}>
      <span>{children}</span>
      {props.isSelected && <CheckIcon className="selected" />}
    </components.Option>
  );
}

function DropdownIndicator<T>(props: DropdownIndicatorProps<DropdownOption<T>, false>) {
  return (
    <components.DropdownIndicator {...props}>
      <ChevronDownIcon />
    </components.DropdownIndicator>
  );
}