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'}
/>
);
};
Source: stackoverflow.com
Related Query
- Typescript React component with function overload and generic params
- How to test with jest and typescript with types a basic react function component
- How to create a generic arrow function with react and typescript
- React - useRef with TypeScript and functional component
- Typescript with React - use HOC on a generic component class
- How to use jest.spyOn with React function component using Typescript
- Mock React useRef or a function inside a functional component with enzyme and jest?
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- Testing debounced function in React component with Jest and Enzyme
- _this.store.getState is not a function when testing react component with enzyme and mocha
- Connecting a component with OwnProps using react redux and typescript in the .NET Core 2.0 reactredux template project
- Generic React TypeScript component with 'as' prop (able to render any valid dom node)
- Creating reusable Button Component with React and Typescript with not assignable type error
- Is it possible to type a React function component with TypeScript without using arrow functions?
- Typescript React stateless function with generic parameter/return types
- Pass component props in Private Route with Typescript and React
- React expose component function and getting data with ComponentDidMount
- React Router difference between component with and without function
- TypeScript compiler error with React Stateless Function component
- React function component prop default with TypeScript
- Render React component with onClick and execute props function
- Generic React Component with TypeScript
- React Function to Component and Setting State with Function Return
- React with TypeScript - Authorization and component visibility depending on user claims
- React typescript Promise with webservice and depending another function in loop
- How To Unit Test React Component With react-intl, react-router-dom v4 and TypeScript
- Testing component function in React with Enzyme and Jest
- How to implement a generic arrow function as interface property in Typescript with React JSX
- Creating Generic React Function Component With Type That Ensures Presence of a Property
- How to use Facebook Javascript SDK to login and force re-authentication with React Web and Typescript inside of a component
More Query from same tag
- React Formik Field onChange event handle
- Converting AbstractComponent in TypeScript when using ForwardRef
- Multi level props in react
- Change Value of Nested Array Dynamically
- React functional component - how do I pass refs back to parent when component returns an array of elements?
- how to add data to an object in js (react)
- How to render component from React Route to a different div than root
- What could be causing redux state load delay?
- Jest encountered an unexpected token
- How do I change the style property of my array-bars in componentDidMount()?
- How to put a javascript function inside a React Class based component?
- React Redux - Methods on store objects
- Storybook monorepo with Material UI fails to share theme across repos
- Displaying time data on horizontal calendar
- Object destructuring in the function parameters in react
- How can I render an element when I clicked the function in ReactJS
- Total is displaying NaN in Cart
- Passing correct properties to popup notification
- How to deploy a React SSR application to Heroku?
- Getting error No 'Access-Control-Allow-Origin' header is present on the requested resource
- Set state of object property
- Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>
- loading while fetching firestore data
- How to communicate between two components in Reactjs
- Throwing error RangeError: Invalid time value while setting custom date to DatePicker of react-datepicker
- React Hooks Question: opening a modular modal
- Push the Checkbox Value and Name in Array in React JS
- How can sub paths be defined by omitting the parent path with React-Router-Dom?
- Error serializing `.remarkBody` returned from `getStaticProps` . Reason: `undefined` cannot be serialized as JSON
- React TypeScript callback reading undefined when using setState, but it will log the value