From d32a1fe2746f7d3eb434defa75f17b283533c426 Mon Sep 17 00:00:00 2001 From: Dave Date: Sat, 19 Nov 2022 16:56:23 +0800 Subject: [PATCH] fix(types): external module type error (CompoundedComponent) (#38666) * fix(types): external module type error (CompoundedComponent) * refactor(types): rename and replace internal CompoundedComponent type --- components/alert/index.tsx | 6 +++--- components/anchor/index.tsx | 6 +++--- components/badge/index.tsx | 4 ++-- components/breadcrumb/Breadcrumb.tsx | 6 +++--- components/button/button.tsx | 7 ++++--- components/checkbox/index.tsx | 7 ++++--- components/input/index.tsx | 7 ++++--- components/layout/index.tsx | 6 +++--- components/mentions/index.tsx | 7 ++++--- components/menu/index.tsx | 7 ++++--- components/radio/index.tsx | 8 +++++--- components/skeleton/Skeleton.tsx | 4 ++-- components/space/index.tsx | 4 ++-- components/steps/index.tsx | 6 +++--- components/switch/index.tsx | 7 ++++--- components/table/Table.tsx | 6 +++--- components/timeline/Timeline.tsx | 6 +++--- components/tree-select/index.tsx | 6 +++--- components/upload/index.tsx | 6 +++--- 19 files changed, 62 insertions(+), 54 deletions(-) diff --git a/components/alert/index.tsx b/components/alert/index.tsx index e253eb145fe8..308ef32709c3 100644 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -91,11 +91,11 @@ const CloseIcon: React.FC = (props) => { ) : null; }; -interface AlertInterface extends React.FC { +type CompoundedComponent = React.FC & { ErrorBoundary: typeof ErrorBoundary; -} +}; -const Alert: AlertInterface = ({ +const Alert: CompoundedComponent = ({ description, prefixCls: customizePrefixCls, message, diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index bf76a8bd48b9..8fa68a45ec9b 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -6,11 +6,11 @@ export type { AnchorLinkProps } from './AnchorLink'; type InternalAnchorType = typeof InternalAnchor; -interface AnchorInterface extends InternalAnchorType { +type CompoundedComponent = InternalAnchorType & { Link: typeof AnchorLink; -} +}; -const Anchor = InternalAnchor as AnchorInterface; +const Anchor = InternalAnchor as CompoundedComponent; Anchor.Link = AnchorLink; export default Anchor; diff --git a/components/badge/index.tsx b/components/badge/index.tsx index c54e2055b999..9bae21b51dd5 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -13,9 +13,9 @@ import { isPresetColor } from './utils'; export type { ScrollNumberProps } from './ScrollNumber'; -interface CompoundedComponent extends React.FC { +type CompoundedComponent = React.FC & { Ribbon: typeof Ribbon; -} +}; export interface BadgeProps { /** Number to show in badge */ diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index d3399a91d3a4..e34bd1e6b462 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -69,12 +69,12 @@ const addChildPath = (paths: string[], childPath: string, params: any) => { return originalPaths; }; -interface BreadcrumbInterface extends React.FC { +type CompoundedComponent = React.FC & { Item: typeof BreadcrumbItem; Separator: typeof BreadcrumbSeparator; -} +}; -const Breadcrumb: BreadcrumbInterface = ({ +const Breadcrumb: CompoundedComponent = ({ prefixCls: customizePrefixCls, separator = '/', style, diff --git a/components/button/button.tsx b/components/button/button.tsx index 6e9a02faf1fd..c8936c87d408 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -131,12 +131,13 @@ export type NativeButtonProps = { export type ButtonProps = Partial; -interface CompoundedComponent - extends React.ForwardRefExoticComponent> { +type CompoundedComponent = React.ForwardRefExoticComponent< + ButtonProps & React.RefAttributes +> & { Group: typeof Group; /** @internal */ __ANT_BUTTON: boolean; -} +}; type Loading = number | boolean; diff --git a/components/checkbox/index.tsx b/components/checkbox/index.tsx index 955e1b382eb6..1b55677fe777 100644 --- a/components/checkbox/index.tsx +++ b/components/checkbox/index.tsx @@ -6,12 +6,13 @@ import Group from './Group'; export type { CheckboxChangeEvent, CheckboxProps } from './Checkbox'; export type { CheckboxGroupProps, CheckboxOptionType } from './Group'; -interface CompoundedComponent - extends React.ForwardRefExoticComponent> { +type CompoundedComponent = React.ForwardRefExoticComponent< + CheckboxProps & React.RefAttributes +> & { Group: typeof Group; /** @internal */ __ANT_CHECKBOX: boolean; -} +}; const Checkbox = InternalCheckbox as CompoundedComponent; diff --git a/components/input/index.tsx b/components/input/index.tsx index 7a601197f9fa..f4d742eec21e 100644 --- a/components/input/index.tsx +++ b/components/input/index.tsx @@ -12,13 +12,14 @@ export type { PasswordProps } from './Password'; export type { SearchProps } from './Search'; export type { TextAreaProps } from './TextArea'; -interface CompoundedComponent - extends React.ForwardRefExoticComponent> { +type CompoundedComponent = React.ForwardRefExoticComponent< + InputProps & React.RefAttributes +> & { Group: typeof Group; Search: typeof Search; TextArea: typeof TextArea; Password: typeof Password; -} +}; const Input = InternalInput as CompoundedComponent; diff --git a/components/layout/index.tsx b/components/layout/index.tsx index e31a3f98cc99..1cd8a7a70e3c 100644 --- a/components/layout/index.tsx +++ b/components/layout/index.tsx @@ -6,14 +6,14 @@ export type { SiderProps } from './Sider'; type InternalLayoutType = typeof InternalLayout; -interface LayoutType extends InternalLayoutType { +type CompoundedComponent = InternalLayoutType & { Header: typeof Header; Footer: typeof Footer; Content: typeof Content; Sider: typeof Sider; -} +}; -const Layout = InternalLayout as LayoutType; +const Layout = InternalLayout as CompoundedComponent; Layout.Header = Header; Layout.Footer = Footer; diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index 12ee925d1db2..82c17264a3ec 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -53,12 +53,13 @@ interface MentionsEntity { value: string; } -interface CompoundedComponent - extends React.ForwardRefExoticComponent> { +type CompoundedComponent = React.ForwardRefExoticComponent< + MentionProps & React.RefAttributes +> & { Option: typeof Option; _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel; getMentions: (value: string, config?: MentionsConfig) => MentionsEntity[]; -} +}; const InternalMentions: React.ForwardRefRenderFunction = ( { diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 134746fba750..3381d96fa57b 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -19,13 +19,14 @@ export type MenuRef = { focus: (options?: FocusOptions) => void; }; -interface CompoundedComponent - extends React.ForwardRefExoticComponent> { +type CompoundedComponent = React.ForwardRefExoticComponent< + MenuProps & React.RefAttributes +> & { Divider: typeof MenuDivider; Item: typeof Item; SubMenu: typeof SubMenu; ItemGroup: typeof ItemGroup; -} +}; const Menu = forwardRef((props, ref) => { const menuRef = useRef(null); diff --git a/components/radio/index.tsx b/components/radio/index.tsx index 4bd53ad6361f..bae4f15edeac 100644 --- a/components/radio/index.tsx +++ b/components/radio/index.tsx @@ -14,13 +14,15 @@ export { RadioProps, } from './interface'; export { Button, Group }; -interface CompoundedComponent - extends React.ForwardRefExoticComponent> { + +type CompoundedComponent = React.ForwardRefExoticComponent< + RadioProps & React.RefAttributes +> & { Group: typeof Group; Button: typeof Button; /** @internal */ __ANT_RADIO: boolean; -} +}; const Radio = InternalRadio as CompoundedComponent; Radio.Button = Button; diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx index 89e6a8196b5e..cd3acf4486ca 100644 --- a/components/skeleton/Skeleton.tsx +++ b/components/skeleton/Skeleton.tsx @@ -77,13 +77,13 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton return basicProps; } -interface CompoundedComponent { +type CompoundedComponent = { Button: typeof SkeletonButton; Avatar: typeof SkeletonAvatar; Input: typeof SkeletonInput; Image: typeof SkeletonImage; Node: typeof SkeletonNode; -} +}; const Skeleton: React.FC & CompoundedComponent = (props) => { const { diff --git a/components/space/index.tsx b/components/space/index.tsx index e739a65454cf..ec81d877854e 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -151,9 +151,9 @@ const Space: React.FC = (props) => { ); }; -interface CompoundedComponent extends React.FC { +type CompoundedComponent = React.FC & { Compact: typeof Compact; -} +}; const CompoundedSpace = Space as CompoundedComponent; CompoundedSpace.Compact = Compact; diff --git a/components/steps/index.tsx b/components/steps/index.tsx index 8d1fddcaa3a2..b854662e7635 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -47,11 +47,11 @@ export interface StepsProps { items?: StepProps[]; } -interface StepsType extends React.FC { +type CompoundedComponent = React.FC & { Step: typeof RcSteps.Step; -} +}; -const Steps: StepsType = (props) => { +const Steps: CompoundedComponent = (props) => { const { percent, size, diff --git a/components/switch/index.tsx b/components/switch/index.tsx index c6b4d789228c..4db89dc91fa4 100755 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -37,11 +37,12 @@ export interface SwitchProps { id?: string; } -interface CompoundedComponent - extends React.ForwardRefExoticComponent> { +type CompoundedComponent = React.ForwardRefExoticComponent< + SwitchProps & React.RefAttributes +> & { /** @internal */ __ANT_SWITCH: boolean; -} +}; const Switch = React.forwardRef( ( diff --git a/components/table/Table.tsx b/components/table/Table.tsx index a83805c616bc..bf579dd7a3f5 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -554,7 +554,7 @@ const ForwardTable = React.forwardRef(InternalTable) as { +type CompoundedComponent = React.FC & { Item: React.FC; -} +}; -const Timeline: TimelineType = (props) => { +const Timeline: CompoundedComponent = (props) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); const { prefixCls: customizePrefixCls, diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 9563ff17acfb..e1df7a9979ad 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -256,15 +256,15 @@ const TreeSelectRef = React.forwardRef(InternalTreeSelect) as < type InternalTreeSelectType = typeof TreeSelectRef; -interface TreeSelectInterface extends InternalTreeSelectType { +type CompoundedComponent = InternalTreeSelectType & { TreeNode: typeof TreeNode; SHOW_ALL: typeof SHOW_ALL; SHOW_PARENT: typeof SHOW_PARENT; SHOW_CHILD: typeof SHOW_CHILD; _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel; -} +}; -const TreeSelect = TreeSelectRef as TreeSelectInterface; +const TreeSelect = TreeSelectRef as CompoundedComponent; // We don't care debug panel /* istanbul ignore next */ diff --git a/components/upload/index.tsx b/components/upload/index.tsx index 67c46049f74b..98a5a8b20095 100644 --- a/components/upload/index.tsx +++ b/components/upload/index.tsx @@ -12,15 +12,15 @@ export type { } from './interface'; type InternalUploadType = typeof InternalUpload; -interface UploadInterface extends InternalUploadType { +type CompoundedComponent = InternalUploadType & { ( props: React.PropsWithChildren> & React.RefAttributes, ): React.ReactElement; Dragger: typeof Dragger; LIST_IGNORE: string; -} +}; -const Upload = InternalUpload as UploadInterface; +const Upload = InternalUpload as CompoundedComponent; Upload.Dragger = Dragger; Upload.LIST_IGNORE = LIST_IGNORE;