refactor(Collapse): convert to TypeScript, impove docs and tests

components/collapse/__docs__/adaptor/index.tsx

@@ -2,6 +2,13 @@ import React from 'react';
 import { Collapse } from '@alifd/next';
 import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
 
+interface AdaptorProps {
+    state: string;
+    width: number;
+    data: string;
+    style: React.CSSProperties;
+}
+
 export default {
     name: 'Collapse',
     editor: () => ({
@@ -26,9 +33,9 @@ export default {
                 '*Panel Header 1\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 2\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\nPanel Header 3\n\tPeople always make mistakes, frustrated, nerve-racking, but cannot remain stagnant.\n',
         },
     }),
-    adaptor: ({ state, width, data, style = {}, ...others }) => {
+    adaptor: ({ state, width, data, style = {}, ...others }: AdaptorProps) => {
         const list = parseData(data).filter(node => NodeType.node === node.type);
-        let expandedKeys = [];
+        const expandedKeys = [] as string[];
         const children = list.map(({ state, value, children }, index) => {
             if (state === 'active') {
                 expandedKeys.push(`panel_${index}`);
@@ -38,7 +45,7 @@ export default {
                 <Collapse.Panel
                     disabled={state === 'disabled'}
                     key={`panel_${index}`}
-                    title={value}
+                    title={value as string}
                 >
                     {children && children.length > 0 ? children[0].value : ''}
                 </Collapse.Panel>

components/collapse/__docs__/demo/event/index.tsx

@@ -4,21 +4,26 @@ import { Collapse } from '@alifd/next';
 
 const Panel = Collapse.Panel;
 
-class Demo extends React.Component {
-    constructor(props, context) {
+class Demo extends React.Component<
+    unknown,
+    {
+        expandedKeys: string[];
+    }
+> {
+    constructor(props: unknown, context: any) {
         super(props, context);
         this.state = {
             expandedKeys: [],
         };
     }
 
-    onExpand(expandedKeys) {
+    onExpand(expandedKeys: string[]) {
         this.setState({
             expandedKeys,
         });
     }
 
-    onClick(key) {
+    onClick(key: any) {
         console.log('clicked', key);
     }
     render() {

components/collapse/__docs__/theme/index.tsx

@@ -1,10 +1,14 @@
+import React from 'react';
 import ReactDOM from 'react-dom';
 import '../../../demo-helper/style';
 import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
 import '../../style';
 import Collapse from '../../index';
 
-// import component
+interface i18nContent {
+    title: string;
+    content: string;
+}
 
 const Panel = Collapse.Panel;
 
@@ -19,12 +23,12 @@ const i18nMap = {
         content:
             "People always make mistakes, frustrated, nerve-racking, but cannot remain stagnant; should finish the task, even if it's life, but also to complete. Society of holy water because the river is a never-ending stream of pushing forward was able to keep clean. This means that sometimes river was washed away, causing short-term losses, but if the fear of embankments break, they managed to always blocked this torrent, it will only lead to stagnation and death.",
     },
-};
+} as { [key: string]: i18nContent };
 
-function render(i18n) {
+function render(i18n: i18nContent) {
     const title = i18n.title;
     const content = i18n.content;
-    return ReactDOM.render(
+    ReactDOM.render(
         <div className="demo-container">
             <h2>手风琴 Collapse</h2>
 
@@ -47,6 +51,7 @@ function render(i18n) {
                             {content}
                             {/* --------- this is for config platform ----------- */}
                             <div style={{ display: 'none' }}>
+                                {/* @ts-expect-error div has no type  */}
                                 <div type="arrow-right" className="next-collapse-unfold-icon" />
                             </div>
                             {/* --------- this is for config platform ----------- */}
@@ -69,7 +74,7 @@ function render(i18n) {
     );
 }
 
-window.renderDemo = function (lang) {
+(window as any).renderDemo = function (lang: string) {
     render(i18nMap[lang]);
 };
 

components/collapse/__tests__/a11y-spec.tsx

@@ -1,35 +1,20 @@
 import React from 'react';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 import Collapse from '../index';
 import '../style';
-import { unmount, testReact } from '../../util/__tests__/legacy/a11y/validate';
-
-Enzyme.configure({ adapter: new Adapter() });
+import { testReact } from '../../util/__tests__/a11y/validate';
 
 const Panel = Collapse.Panel;
 
 /* eslint-disable no-undef, react/jsx-filename-extension */
 describe('Collapse A11y', () => {
-    let wrapper;
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-        unmount();
-    });
-
     it('should not have any violations for children rendered component', async () => {
-        wrapper = await testReact(
+        await testReact(
             <Collapse>
                 <Panel title="Pannel Title">Pannel Content</Panel>
                 <Panel title="Pannel Title">Pannel Content</Panel>
                 <div>others</div>
             </Collapse>
         );
-        return wrapper;
     });
 
     it('should not have any violations for data rendered component', async () => {
@@ -45,9 +30,8 @@ describe('Collapse A11y', () => {
                     'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
             },
         ];
-        wrapper = await testReact(<Collapse dataSource={list} />, {
+        await testReact(<Collapse dataSource={list} />, {
             incomplete: true,
         });
-        return wrapper;
     });
 });