Type InputProps should not require data-* attributes #36820
Description
Previous issue #36756, forgot to attach a online reproduction. Didn't find a way to re-open it, so here is the new issue with more detailed info.
What problem does this feature solve?
I found that recently antd added data-* attributes support for Input in this MR #34409. It's great, thanks for your hard work, but I think InputProps should not require data-* attributes.
- minimal example
To explain the reason, let's make a type utility to get the required props for React components.
type PickUndefinableKeys<T> = {
[K in keyof T]-?: undefined extends T[K] ? K : never;
}[keyof T];
type GetRequiredProps<Props> = Exclude<keyof Props, PickUndefinableKeys<Props>>;When we want to get the required props of antd Input, we will find out that the required props will be data-${string}:
// Here `Test` is `data-${string}`
type Test = GetRequiredProps<InputProps & React.RefAttributes<InputRef>>;That doesn't make sense, in fact, whenever/wherever we use antd Input, we are never asked to pass any data-* attributes.
- the simplified version of the code in my project
interface FieldOptions<Props = Record<string, unknown>> {
props?: Props;
// some other fields...
}
type MakeFieldOptions<Props> = Exclude<keyof Props, PickUndefinableKeys<Props>> extends never
// If all the props are optional, we can omit `props`
? FieldOptions<Props>
// Otherwise we are required to pass `props` to pass the required props
: Omit<FieldOptions, 'props'> & { props: Props };
export interface FieldInfo<Props = Record<string, unknown>> extends FieldOptions<Props> {
component: React.ComponentType<any>;
}
export function makeField<Props>(
component: React.ComponentType<Props>,
options?: MakeFieldOptions<Props>,
): FieldInfo {
return { component, ...options } as FieldInfo;
}Then the issue is
// Issue here, I have to provide an empty object, but it should allow me to omit `props`.
// If I don't provide the empty object there will be an error, can check the error in codesandbox
const field = makeField(Input, { props: {} });Online reproduction link: https://codesandbox.io/s/antd-reproduction-template-forked-ppznh3?file=/index.tsx
What does the proposed API look like?
Just change the InputProps a little bit, make one field undefinable.
export interface InputProps
extends Omit<
RcInputProps,
'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName'
> {
size?: SizeType;
disabled?: boolean;
status?: InputStatus;
bordered?: boolean;
- [key: `data-${string}`]: string;
+ [key: `data-${string}`]: string | undefined;
}