refactor(types): rename and replace internal CompoundedComponent type

components/alert/index.tsx

@@ -61,7 +61,7 @@ interface IconNodeProps {
   description: AlertProps['description'];
 }
 
-const IconNode: React.FC<IconNodeProps> = props => {
+const IconNode: React.FC<IconNodeProps> = (props) => {
   const { icon, prefixCls, type } = props;
   const iconType = iconMapFilled[type!] || null;
   if (icon) {
@@ -82,7 +82,7 @@ interface CloseIconProps {
   handleClose: AlertProps['onClose'];
 }
 
-const CloseIcon: React.FC<CloseIconProps> = props => {
+const CloseIcon: React.FC<CloseIconProps> = (props) => {
   const { isClosable, closeText, prefixCls, closeIcon, handleClose } = props;
   return isClosable ? (
     <button type="button" onClick={handleClose} className={`${prefixCls}-close-icon`} tabIndex={0}>
@@ -91,11 +91,11 @@ const CloseIcon: React.FC<CloseIconProps> = props => {
   ) : null;
 };
 
-interface AlertInterface extends React.FC<AlertProps> {
+type CompoundedComponent = React.FC<AlertProps> & {
   ErrorBoundary: typeof ErrorBoundary;
-}
+};
 
-const Alert: AlertInterface = ({
+const Alert: CompoundedComponent = ({
   description,
   prefixCls: customizePrefixCls,
   message,
@@ -162,7 +162,7 @@ const Alert: AlertInterface = ({
       motionName={`${prefixCls}-motion`}
       motionAppear={false}
       motionEnter={false}
-      onLeaveStart={node => ({
+      onLeaveStart={(node) => ({
         maxHeight: node.offsetHeight,
       })}
       onLeaveEnd={afterClose}

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;

components/breadcrumb/Breadcrumb.tsx

@@ -69,12 +69,12 @@ const addChildPath = (paths: string[], childPath: string, params: any) => {
   return originalPaths;
 };
 
-interface BreadcrumbInterface extends React.FC<BreadcrumbProps> {
+type CompoundedComponent = React.FC<BreadcrumbProps> & {
   Item: typeof BreadcrumbItem;
   Separator: typeof BreadcrumbSeparator;
-}
+};
 
-const Breadcrumb: BreadcrumbInterface = ({
+const Breadcrumb: CompoundedComponent = ({
   prefixCls: customizePrefixCls,
   separator = '/',
   style,

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;

components/steps/index.tsx

@@ -47,11 +47,11 @@ export interface StepsProps {
   items?: StepProps[];
 }
 
-interface StepsType extends React.FC<StepsProps> {
+type CompoundedComponent = React.FC<StepsProps> & {
   Step: typeof RcSteps.Step;
-}
+};
 
-const Steps: StepsType = (props) => {
+const Steps: CompoundedComponent = (props) => {
   const {
     percent,
     size,

components/table/Table.tsx

@@ -165,7 +165,7 @@ function InternalTable<RecordType extends object = any>(
     const matched = new Set(Object.keys(screens).filter((m: Breakpoint) => screens[m]));
 
     return baseColumns.filter(
-      c => !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
+      (c) => !c.responsive || c.responsive.some((r: Breakpoint) => matched.has(r)),
     );
   }, [baseColumns, screens]);
 
@@ -193,7 +193,7 @@ function InternalTable<RecordType extends object = any>(
   const { childrenColumnName = 'children' } = mergedExpandable;
 
   const expandType = React.useMemo<ExpandType>(() => {
-    if (rawData.some(item => (item as any)?.[childrenColumnName])) {
+    if (rawData.some((item) => (item as any)?.[childrenColumnName])) {
       return 'nest';
     }
 
@@ -329,7 +329,7 @@ function InternalTable<RecordType extends object = any>(
   // ============================ Column ============================
   const columnTitleProps = React.useMemo<ColumnTitleProps<RecordType>>(() => {
     const mergedFilters: Record<string, FilterValue> = {};
-    Object.keys(filters).forEach(filterKey => {
+    Object.keys(filters).forEach((filterKey) => {
       if (filters[filterKey] !== null) {
         mergedFilters[filterKey] = filters[filterKey]!;
       }
@@ -476,9 +476,9 @@ function InternalTable<RecordType extends object = any>(
     const defaultPosition = direction === 'rtl' ? 'left' : 'right';
     const { position } = mergedPagination;
     if (position !== null && Array.isArray(position)) {
-      const topPos = position.find(p => p.includes('top'));
-      const bottomPos = position.find(p => p.includes('bottom'));
-      const isDisable = position.every(p => `${p}` === 'none');
+      const topPos = position.find((p) => p.includes('top'));
+      const bottomPos = position.find((p) => p.includes('bottom'));
+      const isDisable = position.every((p) => `${p}` === 'none');
       if (!topPos && !bottomPos && !isDisable) {
         bottomPaginationNode = renderPagination(defaultPosition);
       }
@@ -554,7 +554,7 @@ const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends obje
 
 type InternalTableType = typeof ForwardTable;
 
-interface TableInterface extends InternalTableType {
+type CompoundedComponent = InternalTableType & {
   SELECTION_COLUMN: typeof SELECTION_COLUMN;
   EXPAND_COLUMN: typeof RcTable.EXPAND_COLUMN;
   SELECTION_ALL: 'SELECT_ALL';
@@ -563,9 +563,9 @@ interface TableInterface extends InternalTableType {
   Column: typeof Column;
   ColumnGroup: typeof ColumnGroup;
   Summary: typeof Summary;
-}
+};
 
-const Table = ForwardTable as TableInterface;
+const Table = ForwardTable as CompoundedComponent;
 
 Table.SELECTION_COLUMN = SELECTION_COLUMN;
 Table.EXPAND_COLUMN = RcTable.EXPAND_COLUMN;

components/timeline/Timeline.tsx

@@ -22,11 +22,11 @@ export interface TimelineProps {
   children?: React.ReactNode;
 }
 
-interface TimelineType extends React.FC<TimelineProps> {
+type CompoundedComponent = React.FC<TimelineProps> & {
   Item: React.FC<TimelineItemProps>;
-}
+};
 
-const Timeline: TimelineType = (props) => {
+const Timeline: CompoundedComponent = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,

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 */

components/upload/index.tsx

@@ -12,15 +12,15 @@ export type {
 } from './interface';
 
 type InternalUploadType = typeof InternalUpload;
-interface UploadInterface<T = any> extends InternalUploadType {
+type CompoundedComponent<T = any> = InternalUploadType & {
   <U extends T>(
     props: React.PropsWithChildren<UploadProps<U>> & React.RefAttributes<any>,
   ): 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;