chore(Divider): adjust ts & docs & test

components/divider/__docs__/adaptor/index.tsx

@@ -30,7 +30,7 @@ export default {
             },
         ],
     }),
-    adaptor: ({ orientation, direction, dashed, text, ...others }) => {
+    adaptor: ({ orientation, direction, dashed, text, ...others }: any) => {
         return (
             <Divider
                 dashed={dashed}

components/divider/__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 zhCN from '../../../locale/zh-cn';
 import enUS from '../../../locale/en-us';
@@ -29,15 +29,21 @@ const i18nMap = {
     },
 };
 
-class RenderDivider extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            demoFunction: {},
-        };
-    }
-
-    onFunctionChange = demoFunction => {
+type I18nMap = Record<string, string>;
+interface RenderDividerProps {
+    i18nMap: I18nMap;
+}
+interface DemoFunction {
+    [index: string]: DemoFunctionDefineForObject;
+}
+interface RenderDividerState {
+    demoFunction: DemoFunction;
+}
+class RenderDivider extends React.Component<RenderDividerProps, RenderDividerState> {
+    state = {
+        demoFunction: {},
+    };
+    onFunctionChange = (demoFunction: DemoFunction) => {
         this.setState({ demoFunction });
     };
 
@@ -152,7 +158,7 @@ class RenderDivider 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">

components/divider/__tests__/a11y-spec.tsx

@@ -1,41 +1,22 @@
 import React from 'react';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
 import Divider 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('Divider A11y', () => {
-    let wrapper;
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-        unmount();
-    });
-
     it('should render', async () => {
-        wrapper = await testReact(<Divider />);
-        return wrapper;
+        await testReact(<Divider />);
     });
 
     it('should render dashed', async () => {
-        wrapper = await testReact(<Divider dashed />);
-        return wrapper;
+        await testReact(<Divider dashed />);
     });
 
     it('should render ver', async () => {
-        wrapper = await testReact(<Divider direction="ver" />);
-        return wrapper;
+        await testReact(<Divider direction="ver" />);
     });
 
     it('should render orientation', async () => {
-        wrapper = await testReact(<Divider orientation="left">Left Text</Divider>);
-        return wrapper;
+        await testReact(<Divider orientation="left">Left Text</Divider>);
     });
 });

components/divider/__tests__/index-spec.tsx

@@ -1,69 +1,21 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import assert from 'power-assert';
 import Divider from '../index';
 import '../style';
 
-Enzyme.configure({ adapter: new Adapter() });
-
-const render = element => {
-    let inc;
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    ReactDOM.render(element, container, function () {
-        inc = this;
-    });
-    return {
-        setProps: props => {
-            const clonedElement = React.cloneElement(element, props);
-            ReactDOM.render(clonedElement, container);
-        },
-        unmount: () => {
-            ReactDOM.unmountComponentAtNode(container);
-            document.body.removeChild(container);
-        },
-        instance: () => {
-            return inc;
-        },
-        find: selector => {
-            return container.querySelectorAll(selector);
-        },
-    };
-};
-
 describe('Divider', () => {
-    let wrapper;
-
-    beforeEach(() => {
-        const overlay = document.querySelectorAll('.next-overlay-wrapper');
-        overlay.forEach(dom => {
-            document.body.removeChild(dom);
-        });
-    });
-
-    afterEach(() => {
-        if (wrapper) {
-            wrapper.unmount();
-            wrapper = null;
-        }
-    });
-
     it('should render', () => {
-        wrapper = render(<Divider />);
-        assert(document.querySelector('.next-divider'));
+        cy.mount(<Divider />);
+        cy.get('.next-divider');
     });
 
     it('should render dashed', () => {
-        wrapper = render(<Divider dashed />);
-        assert(document.querySelector('.next-divider-dashed'));
+        cy.mount(<Divider dashed />);
+        cy.get('.next-divider-dashed');
     });
 
     it('should render text right', () => {
-        wrapper = render(<Divider orientation="right">Right Text</Divider>);
-
-        assert(document.querySelector('.next-divider-with-text-right'));
-        assert(document.querySelector('.next-divider-inner-text').innerHTML === 'Right Text');
+        cy.mount(<Divider orientation="right">Right Text</Divider>);
+        cy.get('.next-divider-with-text-right');
+        cy.get('.next-divider-inner-text').contains('Right Text');
     });
 });

components/divider/index.tsx

@@ -2,28 +2,20 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
-import ConfigProvider from '../config-provider';
 import { obj } from '../util';
+import type { DividerProps } from './types';
+import ConfigProvider from '../config-provider';
 
 /**
  * Divider
  */
-class Divider extends Component {
+class Divider extends Component<DividerProps> {
     static propTypes = {
         prefix: PropTypes.string,
         children: PropTypes.any,
         className: PropTypes.string,
-        /**
-         * 是否为虚线
-         */
         dashed: PropTypes.bool,
-        /**
-         * 线是水平还是垂直类型
-         */
         direction: PropTypes.oneOf(['hoz', 'ver']),
-        /**
-         * 分割线标题的位置
-         */
         orientation: PropTypes.oneOf(['left', 'right', 'center']),
     };
 
@@ -56,4 +48,5 @@ class Divider extends Component {
     }
 }
 
+export type { DividerProps };
 export default ConfigProvider.config(polyfill(Divider));

components/divider/mobile/index.tsx

@@ -1,6 +1,3 @@
-import { Divider as MeetDivider } from '@alifd/meet-react';
-import NextDivider from '../index';
-
-const Divider = MeetDivider ? MeetDivider : NextDivider;
+import { Divider } from '@alifd/meet-react';
 
 export default Divider;

components/divider/types.ts

@@ -1,21 +1,25 @@
-/// <reference types="react" />
-
 import React from 'react';
 import { CommonProps } from '../util';
-
+/**
+ * @api Divider
+ */
 export interface DividerProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
     /**
      * 是否为虚线
+     * @en Is it a dashed line
+     * @defaultValue false
      */
     dashed?: boolean;
     /**
      * 线是水平还是垂直类型
+     * @en Is the line of horizontal or vertical type
+     * @defaultValue 'hoz'
      */
     direction?: 'hoz' | 'ver';
     /**
      * 分割线标题的位置
+     * @en The position of the divider title
+     * @defaultValue 'center'
      */
     orientation?: 'left' | 'right' | 'center';
 }
-
-export default class Divider extends React.Component<DividerProps, any> {}