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

alibaba-fusion · Jan 9, 2024 · bfb9b2a · bfb9b2a
1 parent f526bf0
commit bfb9b2a
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 114 deletions.
diff --git a/components/list/__docs__/demo/basic/index.tsx b/components/list/__docs__/demo/basic/index.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { List, Avatar } from '@alifd/next';
+import { Avatar, List } from '@alifd/next';
 
-const data = [
+interface DataItem {
+    title: string;
+    img: string;
+    money: string;
+}
+
+const data: DataItem[] = [
     {
         title: 'A Title',
         img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
@@ -31,7 +37,7 @@ ReactDOM.render(
             size="small"
             header={<div>Notifications</div>}
             dataSource={data}
-            renderItem={(item, i) => (
+            renderItem={(item: DataItem, i) => (
                 <List.Item
                     key={i}
                     extra={item.money}

diff --git a/components/list/__docs__/demo/complex/index.tsx b/components/list/__docs__/demo/complex/index.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { List, Avatar, Box, Button, Divider } from '@alifd/next';
+import { List, Box, Button, Divider } from '@alifd/next';
 
-const data = [
+interface DataItem {
+    title: string;
+    img: string;
+    description: string;
+    author: string;
+}
+const data: DataItem[] = [
     {
         title: '构建一套产品化设计系统',
         description:
@@ -55,7 +61,7 @@ const actions = (
 ReactDOM.render(
     <List
         dataSource={data}
-        renderItem={(item, i) => (
+        renderItem={(item: DataItem, i) => (
             <List.Item
                 key={i}
                 extra={actions}

diff --git a/components/list/__docs__/demo/custom-loading/index.tsx b/components/list/__docs__/demo/custom-loading/index.tsx
@@ -1,8 +1,13 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { List, Avatar, Button, Loading, Icon, Switch } from '@alifd/next';
+import { List, Avatar, Loading, Icon, Switch } from '@alifd/next';
 
-const data = [
+interface DataItem {
+    title: string;
+    img: string;
+    money: string;
+}
+const data: DataItem[] = [
     {
         title: 'A Title',
         img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
@@ -31,7 +36,7 @@ const indicator = (
     </div>
 );
 
-const CustomLoading = props => <Loading indicator={indicator} {...props} />;
+const CustomLoading = (props: any) => <Loading indicator={indicator} {...props} />;
 
 const App = () => {
     const [loading, setLoading] = useState(false);
@@ -48,7 +53,7 @@ const App = () => {
                 loadingComponent={CustomLoading}
                 header={<div>Notifications</div>}
                 dataSource={data}
-                renderItem={(item, i) => (
+                renderItem={(item: DataItem, i) => (
                     <List.Item
                         key={i}
                         extra={item.money}

diff --git a/components/list/__docs__/demo/empty/index.tsx b/components/list/__docs__/demo/empty/index.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { List, Avatar, Button } from '@alifd/next';
+import { List, Avatar } from '@alifd/next';
+
+interface DataItem {
+    title: string;
+    img: string;
+    money: string;
+}
 
 ReactDOM.render(
     <div style={{ width: 288 }}>
@@ -18,7 +24,7 @@ ReactDOM.render(
             }
             header={<div>Notifications</div>}
             dataSource={[]}
-            renderItem={(item, i) => (
+            renderItem={(item: DataItem, i) => (
                 <List.Item
                     key={i}
                     extra={item.money}

diff --git a/components/list/__docs__/demo/loading/index.tsx b/components/list/__docs__/demo/loading/index.tsx
@@ -2,7 +2,12 @@ import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { List, Avatar, Button } from '@alifd/next';
 
-const data = [
+interface DataItem {
+    title: string;
+    img: string;
+    money: string;
+}
+const data: DataItem[] = [
     {
         title: 'A Title',
         img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
@@ -36,7 +41,7 @@ const App = () => {
                 loading={loading}
                 header={<div>Notifications</div>}
                 dataSource={data}
-                renderItem={(item, i) => (
+                renderItem={(item: DataItem, i) => (
                     <List.Item
                         key={i}
                         extra={item.money}

diff --git a/components/list/__docs__/theme/index.tsx b/components/list/__docs__/theme/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import '../../../demo-helper/style';
-import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
+import { Demo, DemoFunctionDefineForObject, DemoGroup, initDemo } from '../../../demo-helper';
 import ConfigProvider from '../../../config-provider';
 import Box from '../../../box';
 import Button from '../../../button';
@@ -29,15 +29,30 @@ const i18nMap = {
     },
 };
 
-class RenderList extends React.Component {
-    constructor(props) {
+interface DemoFunction {
+    [index: string]: DemoFunctionDefineForObject;
+}
+
+type I18nMap = Record<string, string>;
+
+interface RenderProps {
+    i18nMap: I18nMap;
+}
+
+class RenderList extends React.Component<
+    RenderProps,
+    {
+        demoFunction: DemoFunction;
+    }
+> {
+    constructor(props: any) {
         super(props);
         this.state = {
             demoFunction: {},
         };
     }
 
-    onFunctionChange = demoFunction => {
+    onFunctionChange = (demoFunction: DemoFunction) => {
         this.setState({ demoFunction });
     };
 
@@ -255,7 +270,7 @@ class RenderList extends React.Component {
     }
 }
 
-function render(i18nMap, lang) {
+function render(i18nMap: I18nMap, lang: string) {
     ReactDOM.render(
         <ConfigProvider locale={lang === 'en-us' ? enUS : zhCN}>
             <div className="demo-container">

diff --git a/components/list/__tests__/a11y-spec.tsx b/components/list/__tests__/a11y-spec.tsx
@@ -1,26 +1,10 @@
 import React from 'react';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 import List from '../index';
 import '../style';
-import { unmount, testReact } from '../../util/__tests__/legacy/a11y/validate';
+import { testReact } from '../../util/__tests__/a11y/validate';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-/* eslint-disable no-undef, react/jsx-filename-extension */
 describe('List A11y', () => {
-    let wrapper;
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-        unmount();
-    });
-
     it('should render', async () => {
-        wrapper = await testReact(<List />);
-        return wrapper;
+        await testReact(<List />);
     });
 });
diff --git a/components/list/__tests__/index-spec.tsx b/components/list/__tests__/index-spec.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import assert from 'power-assert';
 import List from '../index';
 import Icon from '../../icon';
 import Loading from '../../loading';
 import '../style';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-const data = [
+interface DataItem {
+    title: string;
+    img: string;
+    money: string;
+}
+const data: DataItem[] = [
     {
         title: 'A Title',
         img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
@@ -33,15 +33,8 @@ const data = [
 ];
 /*eslint-disable*/
 describe('List', () => {
-    let wrapper;
-
-    afterEach(() => {
-        wrapper.unmount();
-        wrapper = null;
-    });
-
     it('should render', () => {
-        wrapper = mount(
+        cy.mount(
             <List size="small" header={<div>Notifications</div>}>
                 <List.Item extra={'$20'} title="Title">
                     List Item 1
@@ -61,13 +54,13 @@ describe('List', () => {
             </List>
         );
 
-        assert(wrapper.find('.next-list-item').length === 5);
-        assert(wrapper.find('.next-list-header').length > 0);
-        assert(wrapper.find('.next-list-small').length > 0);
+        cy.get('.next-list-item').should('have.length', 5);
+        cy.get('.next-list-header');
+        cy.get('.next-list-small');
     });
 
     it('should RTL render', () => {
-        wrapper = mount(
+        cy.mount(
             <List rtl footer={<div>footer</div>}>
                 <List.Item media={'$20'} description="List Item 1" />
                 <List.Item media={'$20'} description="List Item 2" />
@@ -76,41 +69,38 @@ describe('List', () => {
                 <List.Item media={'$20'} description="List Item 5" />
             </List>
         );
-
-        assert(wrapper.find('[dir]').length === 1);
+        cy.get('[dir]').should('have.length', 1);
     });
 
     it('should support datasource & renderItem', () => {
-        wrapper = mount(
+        cy.mount(
             <List
                 size="small"
                 dataSource={data}
-                renderItem={item => (
+                renderItem={(item: DataItem) => (
                     <List.Item extra={item.money} title={item.title}>
                         List Item 1
                     </List.Item>
                 )}
             />
         );
-
-        assert(wrapper.find('.next-list-item').length === 4);
+        cy.get('.next-list-item').should('have.length', 4);
     });
 
     it('should support loading', () => {
-        wrapper = mount(
+        cy.mount(
             <List
                 size="small"
                 loading
                 dataSource={data}
-                renderItem={item => (
+                renderItem={(item: DataItem) => (
                     <List.Item extra={item.money} title={item.title}>
                         List Item 1
                     </List.Item>
                 )}
             />
         );
-
-        assert(wrapper.find('.next-list-loading'));
+        cy.get('.next-list-loading');
     });
 
     it('should support loadingComponent', () => {
@@ -120,38 +110,32 @@ describe('List', () => {
             </div>
         );
 
-        const CustomLoading = props => <Loading indicator={indicator} {...props} />;
+        const CustomLoading = (props: any) => <Loading indicator={indicator} {...props} />;
 
-        wrapper = mount(
+        cy.mount(
             <List
                 size="small"
                 loading
                 dataSource={data}
                 loadingComponent={CustomLoading}
-                renderItem={item => (
+                renderItem={(item: DataItem) => (
                     <List.Item extra={item.money} title={item.title}>
                         List Item 1
                     </List.Item>
                 )}
             />
         );
-
-        assert(wrapper.find('.next-icon-loading'));
+        cy.get('.next-list-loading');
     });
 
     it('should support emptyContent', () => {
-        wrapper = mount(<List size="small" header={<div>Notifications</div>} />);
-
-        assert(wrapper.find('.next-list-empty').length);
+        cy.mount(<List size="small" header={<div>Notifications</div>} />);
+        cy.get('.next-list-empty');
 
-        wrapper.setProps({
-            dataSource: [],
-        });
-        assert(wrapper.find('.next-list-empty').length);
+        cy.mount(<List dataSource={[]} />);
+        cy.get('.next-list-empty');
 
-        wrapper.setProps({
-            dataSource: null,
-        });
-        assert(wrapper.find('.next-list-empty').length);
+        cy.mount(<List dataSource={undefined} />);
+        cy.get('.next-list-empty');
     });
 });
diff --git a/components/list/item.tsx b/components/list/item.tsx
@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
 import ConfigProvider from '../config-provider';
+import { ListItemProps } from './types';
 
 /**
  * List.Item
  */
-class ListItem extends Component {
+class ListItem extends Component<ListItemProps> {
     static propTypes = {
         prefix: PropTypes.string,
         /**