Need non-sealed ForwardRefExoticComponent.
leerenbo opened this issue · 1 comments
Is your feature request related to a problem? Please describe.
When writing the wrapper for antd's radio component, there is a ForwardRefExoticComponent that contains other react components define and interface inheritance is required. It is impossible to inherit sealed ForwardRefExoticComponent.
Describe the solution you'd like
"module": "es/index.js",
in package.json.
Module only have default export from ./radio as Radio, so I can't wrap separately.
index.js
...
export { default as Radio } from './radio';
export type { RadioChangeEvent, RadioGroupProps, RadioProps } from './radio';
...
Default export extends from CompoundedComponent, which has Intersection Types InternalRadio & { Group: typeof Group; Button: typeof Button; };
InternalRadio is a React.ForwardRefExoticComponent.
/radio/index.d.ts
import Group from './group';
import InternalRadio from './radio';
import Button from './radioButton';
export type { RadioChangeEvent, RadioChangeEventTarget, RadioGroupButtonStyle, RadioGroupContextProps, RadioGroupOptionType, RadioGroupProps, RadioProps, RadioRef, } from './interface';
export { Button, Group };
type CompoundedComponent = typeof InternalRadio & {
Group: typeof Group;
Button: typeof Button;
};
declare const Radio: CompoundedComponent;
export default Radio;
/radio/radio.d.ts
import * as React from 'react';
import type { RadioProps, RadioRef } from './interface';
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<RadioRef>>;
export default Radio;
TS use example
import React from 'react';
import { Flex, Radio } from 'antd';
const App: React.FC = () => (
<Flex vertical gap="middle">
<Radio.Group defaultValue="a" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b">Shanghai</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
<Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b" disabled>
Shanghai
</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</Flex>
);
export default App;
Describe alternatives you've considered
I need define Group and Button in Radio.
Extension properties are not allowed to be used in external interfaces.
So non-sealed ForwardRefExoticComponent is need for this antd ui-lib.
Additional context
https://ant-design.antgroup.com/components/radio
https://github.com/ant-design/ant-design/blob/master/components/radio/index.tsx
React 19 is coming.
ForwardRefExoticComponent
will be removed as redundant.
Please use FC
in external declarations instead .