@appbuckets/react-ui-smart-components/SelectBuilder/SelectBuilder.types.d.ts

UI Extended Components that work with @appbuckets/react-client and @appbuckets/react-ui

import * as React from 'react';
import MultiSelect from '@appbuckets/react-ui/MultiSelect';
import Select from '@appbuckets/react-ui/Select';
import type { SelectOption, SelectProps } from '@appbuckets/react-ui/Select';
import type {
  ClientRequestConfig,
  ClientRequestParams,
} from '@appbuckets/react-app-client';
declare type Selector = typeof MultiSelect | typeof Select;
declare type DemandedProps =
  | 'Selector'
  | 'displayName'
  | 'getOptionLabel'
  | 'getOptionValue'
  | 'noOptionsMessage'
  | 'placeholder';
declare type PlainOrBuilder<T, OptionType, ValueType, Props, HookResult> =
  | T
  | ((
      props: Omit<
        SelectBuilderConfig<OptionType, ValueType, Props, HookResult>,
        DemandedProps
      >
    ) => T);
export interface SelectBuilderConfig<
  OptionType extends SelectOption,
  ValueType,
  Props,
  HookResult
> extends StrictSelectorProps<OptionType, ValueType, Props, HookResult> {
  /** Selector Default Props */
  defaultProps?: PlainOrBuilder<
    Partial<SelectorProps<OptionType, ValueType, Props, HookResult>>,
    OptionType,
    ValueType,
    Props,
    HookResult
  >;
  /** Set the Component displayName */
  displayName: string;
  /** Resolves option data to a string to be displayed as the label by components */
  getOptionLabel: (option: OptionType) => string;
  /** Resolves option data to a string to compare options and specify value attributes */
  getOptionValue: (option: OptionType) => string | number;
  /** No Options Message */
  noOptionsMessage?: (data: { inputValue: string }) => string | null;
  /** Override Component Props */
  overrideProps?: PlainOrBuilder<
    Partial<SelectorProps<OptionType, ValueType, Props, HookResult>>,
    OptionType,
    ValueType,
    Props,
    HookResult
  >;
  /** Default placeholder */
  placeholder?: string;
  /** Request Configuration */
  request?: PlainOrBuilder<
    ClientRequestParams & ClientRequestConfig,
    OptionType,
    ValueType,
    Props,
    HookResult
  >;
  /** Hook function to execute */
  useHook?: () => HookResult;
  /** Set the Component to Use as Selector */
  Selector: Selector;
}
export declare type SelectorComponent<
  OptionType extends SelectOption,
  ValueType,
  Props,
  HookResult
> = React.FunctionComponent<
  SelectorProps<OptionType, ValueType, Props, HookResult>
>;
export declare type SelectorProps<
  OptionType extends SelectOption,
  ValueType,
  Props,
  HookResult
> = Props &
  StrictSelectorProps<OptionType, ValueType, Props, HookResult> &
  Omit<
    SelectProps<OptionType, ValueType, ValueType extends any[] ? [] : null>,
    'options'
  >;
export declare type SelectorOptions<
  OptionType extends SelectOption,
  ValueType,
  Props,
  HookResult
> =
  | OptionType[]
  | ((
      props: SelectorProps<OptionType, ValueType, Props, HookResult>,
      hookResult: HookResult
    ) => OptionType[]);
interface StrictSelectorProps<
  OptionType extends SelectOption,
  ValueType,
  Props,
  HookResult
> {
  /** Filter data */
  filter?: (data: OptionType, index: number, array: OptionType[]) => boolean;
  /** Manual set selector option */
  options?: SelectorOptions<OptionType, ValueType, Props, HookResult>;
  /** Override Request Configuration */
  requestConfig?: ClientRequestConfig;
  /** Reload Data on Menu Open */
  reloadDataOnMenuOpen?: boolean;
  /** Override the Selector to Use */
  Selector?: Selector;
  /** Sort options */
  sort?: (keyof OptionType | string)[];
}
export {};