score:0

i kind of figured it out myself, but still not be able to add default values in the encapsulated component:

import { propswithchildren, reactnode } from 'react';
import { selectprops } from 'antd/es/select';
export type valueabletype = number | string;

export type modetype = 'multiple' | 'single';

export type defaultresourcetype = record<string, valueabletype>;

export type resourceselectkeys = 'resources' | 'mode';

export interface baseresourceselectprops<
  rt extends defaultresourcetype = defaultresourcetype,
  lk extends keyof rt = 'name',
  vt = valueabletype
> extends selectprops<vt> {
  /** resource list used to render options */
  resources?: rt[];
  /** the default key to render label */
  labelkey?: lk;
  /** custom option renderer */
  renderoption?: (resource: rt) => reactnode;
  /** custom label renderer */
  renderlabel?: (resource: rt) => reactnode;
}

export type resourceselectwithmodeprops<
  rt extends defaultresourcetype = defaultresourcetype,
  vt = valueabletype,
  lk extends keyof rt = 'name',
  oks extends resourceselectkeys = never
> =
  | ({
      mode: 'multiple';
    } & omit<baseresourceselectprops<rt, lk, vt[]>, oks>)
  | ({
      mode?: never;
    } & omit<baseresourceselectprops<rt, lk, vt>, oks>);

export type resourceselectprops<
  rt extends defaultresourcetype = defaultresourcetype,
  vk extends keyof rt = 'id',
  lk extends keyof rt = 'name',
  oks extends resourceselectkeys = never
> =
  | ({
      valuekey?: never;
    } & resourceselectwithmodeprops<rt, rt['id'], lk, oks>)
  | ({
      valuekey: vk;
    } & resourceselectwithmodeprops<rt, rt[vk], lk, oks>)
  | ({
      valuekey?: vk[];
    } & resourceselectwithmodeprops<rt, pick<rt, vk>, lk, oks>);

code like this still not working:


export const countries = [
  { name: 'afghanistan', code: 'af' },
  { name: 'åland islands', code: 'ax' },
  { name: 'albania', code: 'al' },
];
type country = typeof countries[number];

/**
 * countryselect
 */
export const countryselect: fc<resourceselectprops<country, 'code'>> = (
  props
) => {
  return (
    <resourceselect
      placeholder="country"
      resources={countries}
      {...props}
      valuekey={props.valuekey || 'code'}
    />
  );
};

enter image description here


Related Query

More Query from same tag