fix(collapse): change create style (#1718)

src/collapse/Collapse.tsx

@@ -5,13 +5,10 @@ import { RightFilled } from '@gio-design/icons';
 import { cloneElement } from '../utils/reactNode';
 import { CollapseProps, PanelProps } from './interface';
 import usePrefixCls from '../utils/hooks/use-prefix-cls';
-import CollapsePanel from './CollapsePanel';
+import WithRef from '../utils/withRef';
+import { WithCommonProps } from '../utils/interfaces';
 
-interface CollapseInterface extends React.FC<CollapseProps> {
-  Panel: typeof CollapsePanel;
-}
-
-export const Collapse: CollapseInterface = (props) => {
+export const Collapse = WithRef<HTMLDivElement, WithCommonProps<CollapseProps>>((props: CollapseProps) => {
   const { destoryOnHide, disabled, children, dataTestId = 'collapse' } = props;
   const prefixCls = usePrefixCls('collapse');
   const renderExpandIcon = (panelProps: PanelProps = {}) => {
@@ -38,7 +35,8 @@ export const Collapse: CollapseInterface = (props) => {
       </RcCollapse>
     </div>
   );
-};
-Collapse.Panel = CollapsePanel;
+});
+
+Collapse.displayName = 'Collapse';
 
 export default Collapse;

src/collapse/CollapsePanel.tsx

@@ -2,17 +2,16 @@ import * as React from 'react';
 import RcCollapse from 'rc-collapse';
 import classNames from 'classnames';
 
-import { CollapsePanelProps } from './interface'
+import { CollapsePanelProps } from './interface';
 
-
-const CollapsePanel: React.FC<CollapsePanelProps> = props => {
+const CollapsePanel: React.FC<CollapsePanelProps> = (props) => {
   const { prefixCls: customizePrefixCls, className = '', showArrow = true } = props;
-  const prefixCls = (customizePrefixCls);
+  const prefixCls = customizePrefixCls;
   const collapsePanelClassName = classNames(
     {
       [`${prefixCls}-no-arrow`]: !showArrow,
     },
-    className,
+    className
   );
   return <RcCollapse.Panel {...props} prefixCls={prefixCls} className={collapsePanelClassName} />;
 };

src/collapse/demos/Collapse.stories.tsx

@@ -2,14 +2,13 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
-import { MoreOutlined, EditOutlined, RightOutlined } from '@gio-design/icons'
+import { MoreOutlined, EditOutlined, RightOutlined } from '@gio-design/icons';
 import Docs from './CollapsePage';
-import Collapse from '../Collapse';
+import Collapse, { Panel } from '../index';
 import { IconButton } from '../../button';
 
 import '../style';
 
-const { Panel } = Collapse;
 export default {
   title: 'Upgraded/Collapse',
   component: Collapse,
@@ -28,20 +27,28 @@ export default {
 
 const genExtra = () => (
   <>
-    <IconButton onClick={(e) => { e.stopPropagation() }}
-      type="text">
+    <IconButton
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      type="text"
+    >
       <EditOutlined />
     </IconButton>
-    <IconButton onClick={(e) => { e.stopPropagation() }}
-      type="text">
+    <IconButton
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      type="text"
+    >
       <MoreOutlined />
     </IconButton>
   </>
 );
-const text = '哈哈哈嘿嘿嘿嘻嘻嘻'
+const text = '哈哈哈嘿嘿嘿嘻嘻嘻';
 const callback = (key: any) => {
   console.log(key);
-}
+};
 
 const Template: Story = () => (
   <div>

src/collapse/index.tsx

@@ -1,5 +1,7 @@
 import Collapse from './Collapse';
+import Panel from './CollapsePanel';
+import withSubComponent from '../utils/withSubComponent';
 
 export { CollapseProps, CollapsePanelProps } from './interface';
-
-export default Collapse
+export default withSubComponent(Collapse, { Panel });
+export { Panel };

src/collapse/interface.ts

@@ -12,6 +12,7 @@ export interface CollapseProps {
   expandIcon?: (panelProps: PanelProps) => React.ReactNode;
   disabled?: boolean;
   dataTestId?: string;
+  children: React.ReactNode;
 }
 export interface PanelProps {
   isActive?: boolean;