refactor(Drawer): Document optimization & Upgrade testing tools and o…

…ptimize use cases fix(Overlay): solve problems caused by numerical floating, close alibaba-fusion#4740 chore(*): Release-1.27.5-beta.1 fix(*): rollback alibaba-fusion#4746 and fix textarea clear spec chore(*): Release-1.27.5 fix(Drawer): not to change package-lock.json Update stale.yml chore(BuildTool): 支持指定主题包调试`run start --theme xxx` chore(DatePicker): fix theme demo margin, close alibaba-fusion#3627 chore(Shell): fix spell error "palceholder -> placeholder", close alibaba-fusion#3564 docs(Field): improve document description of parseName, close alibaba-fusion#3453 chore(Pagination): improve document of pageSizeSelector, fix pageJump runtime error, close alibaba-fusion#3306 docs(Calendar2): remove legacy api, close alibaba-fusion#3100 fix(Table): fix merging cell width in locked columns, close alibaba-fusion#4716 (alibaba-fusion#4752) * fix(Table): 修复合并单元格的锁列滑动问题 * fix(Table): should support for merging cells in locked columns, close alibaba-fusion#4716 * fix(Table): 修复测试用例 chore(*): update lock fix(Shell): phone shell should hidden when collapsed, close alibaba-fusion#3886 (alibaba-fusion#4766) Co-authored-by: lancely <[email protected]> refactor(Timeline): rename timeline file to ts refactor(Timeline): ts & doc improvement refactor(Timeline): test improve refactor(Timeline): fix cr comments fix(Upload): should hide trigger when limit is reached for Upload.Dragger, close alibaba-fusion#3951 (alibaba-fusion#4761) Co-authored-by: lancely <[email protected]> feat(DatePicker): improve focus logic, close alibaba-fusion#3998 (alibaba-fusion#4769) * feat(DatePicker): interactive optimization of date selection box close alibaba-fusion#3998 * feat(DatePicker): improve focus logic --------- Co-authored-by: WB01081293 <[email protected]> Co-authored-by: 珵之 <[email protected]> refactor(Field): rename to ts refactor(Field): convert to TypeScript, impove docs and tests refactor(Field): convert to TypeScript, impove docs and tests chore(Field): improve for codereview chore(Field): fix dependency version feat(TreeSelect): support useDetailValue, close alibaba-fusion#3531 (alibaba-fusion#4771) * feat(TreeSelect): support useDetailValue, close alibaba-fusion#3531 * chore(TreeSelect): improve useDetailValue tc and demos by codereview * test(TreeSelect): add control mode spec for useDetailValue refactor(Collapse): rename to ts refactor(Collapse): convert to TypeScript, impove docs and tests refactor(Collapse): imporve docs and types chore(Collapse): improve by codereview chore(Collapse): remove useless propTypes comments chore(*): Release-1.27.6 fix(Collapse): hotfix panel className missing chore(*): Release-1.27.7 chore(Divider): adjust ts types chore(Divider): adjust ts & docs & test
luolin-ck · Mar 21, 2024 · 5de61b1 · 5de61b1
1 parent 905878d
commit 5de61b1
Show file tree

Hide file tree

Showing 20 changed files with 711 additions and 499 deletions.
diff --git a/components/drawer/__docs__/demo/basic/index.tsx b/components/drawer/__docs__/demo/basic/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button, Drawer } from '@alifd/next';
+import type { DrawerProps } from '@alifd/next/lib/drawer';
 
 class Demo extends React.Component {
     state = {
@@ -13,7 +14,7 @@ class Demo extends React.Component {
         });
     };
 
-    onClose = (reason, e) => {
+    onClose: DrawerProps['onClose'] = (reason, e) => {
         console.log('onClose: ', reason, e);
         this.setState({
             visible: false,

diff --git a/components/drawer/__docs__/demo/placement/index.tsx b/components/drawer/__docs__/demo/placement/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Radio, Button, Drawer } from '@alifd/next';
+import type { RadioProps } from '@alifd/next/lib/radio';
 
 class Demo extends React.Component {
     state = {
@@ -14,13 +15,13 @@ class Demo extends React.Component {
         });
     };
 
-    onClose = reason => {
+    onClose = () => {
         this.setState({
             visible: false,
         });
     };
 
-    onPlacementChange = dir => {
+    onPlacementChange: RadioProps['onChange'] = dir => {
         this.setState({
             placement: dir,
         });
@@ -44,7 +45,7 @@ class Demo extends React.Component {
                     v2
                     title="标题"
                     visible={this.state.visible}
-                    placement={this.state.placement}
+                    placement={this.state.placement as 'right' | 'bottom' | 'left' | 'top'}
                     onClose={this.onClose}
                 >
                     Start your business here by searching a popular product

diff --git a/components/drawer/__docs__/demo/quick/index.tsx b/components/drawer/__docs__/demo/quick/index.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button, Drawer } from '@alifd/next';
+import type { QuickShowRet } from '@alifd/next/lib/drawer';
 
-let instance = null;
+let instance: QuickShowRet | null = null;
 const show = () => {
+    instance && instance.hide();
     instance = Drawer.show({
         title: 'quick',
         hasMask: false,

diff --git a/components/drawer/__docs__/demo/select/index.tsx b/components/drawer/__docs__/demo/select/index.tsx
@@ -1,17 +1,26 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Radio, Drawer, Select } from '@alifd/next';
+import type { SelectProps } from '@alifd/next/lib/select';
+import type { RadioProps } from '@alifd/next/lib/radio';
+
+interface onToggleHighlightItemProps {
+    deep: number;
+    value: string;
+    label: string;
+}
 
 const Option = Select.Option;
 
-const onChange = function (value) {
+const onChange: SelectProps['onChange'] = value => {
     console.log(value);
 };
-const onBlur = function (e) {
+
+const onBlur: SelectProps['onBlur'] = e => {
     console.log(/onblur/, e);
 };
 
-const onToggleHighlightItem = function (item, type) {
+const onToggleHighlightItem = (item: onToggleHighlightItemProps, type: 'up' | 'down') => {
     console.log(item, type);
 };
 
@@ -20,7 +29,7 @@ class Demo extends React.Component {
         placement: 'right',
     };
 
-    onPlacementChange = dir => {
+    onPlacementChange: RadioProps['onChange'] = dir => {
         this.setState({
             placement: dir,
         });

diff --git a/components/drawer/__docs__/demo/size/index.tsx b/components/drawer/__docs__/demo/size/index.tsx
@@ -9,7 +9,7 @@ const Demo = () => {
 
     return (
         <div>
-            <Button type="primary" onClick={setVisible}>
+            <Button type="primary" onClick={() => setVisible(true)}>
                 {' '}
                 fixed 700{' '}
             </Button>
@@ -23,7 +23,7 @@ const Demo = () => {
             >
                 Start your business here by searching a popular product
             </Drawer>
-            <Button type="primary" onClick={setVisible2} style={{ marginLeft: 8 }}>
+            <Button type="primary" onClick={() => setVisible2(true)} style={{ marginLeft: 8 }}>
                 {' '}
                 auto width
             </Button>

diff --git a/components/drawer/__docs__/index.en-us.md b/components/drawer/__docs__/index.en-us.md
diff --git a/components/drawer/__docs__/index.md b/components/drawer/__docs__/index.md
diff --git a/components/drawer/__docs__/theme/index.tsx b/components/drawer/__docs__/theme/index.tsx
@@ -2,12 +2,26 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import '../../../demo-helper/style';
 import '../../style';
-import { Demo, DemoGroup, initDemo } from '../../../demo-helper';
+import {
+    Demo,
+    DemoGroup,
+    initDemo,
+    type DemoFunctionDefineForArray,
+    type DemoFunctionDefineForObject,
+} from '../../../demo-helper';
 import Drawer from '../../index';
 
 import zhCN from '../../../locale/zh-cn';
 import enUS from '../../../locale/en-us';
 
+interface FunctionProps {
+    lang: string;
+    i18n: {
+        title: string;
+        content: string;
+    };
+}
+
 const i18nMaps = {
     'en-us': {
         title: 'Title Here',
@@ -20,7 +34,7 @@ const i18nMaps = {
     },
 };
 
-class FunctionDemo extends Component {
+class FunctionDemo extends Component<FunctionProps> {
     state = {
         demoFunction: {
             hasTitle: {
@@ -75,13 +89,15 @@ class FunctionDemo extends Component {
             },
         },
     };
-    onFunctionChange = demoFunction => {
+    onFunctionChange = (
+        demoFunction: Record<string, DemoFunctionDefineForObject> | DemoFunctionDefineForArray[]
+    ) => {
         this.setState({
             demoFunction,
         });
     };
 
-    renderMask(hasMask, content) {
+    renderMask(hasMask: boolean, content: object | null | undefined) {
         return hasMask ? (
             <div
                 className="next-overlay-wrapper opened"
@@ -96,14 +112,17 @@ class FunctionDemo extends Component {
     }
 
     render() {
-        // eslint-disable-next-line
         const { lang, i18n } = this.props;
         const locale = (lang === 'en-us' ? enUS : zhCN).Drawer;
         const hasTitle = this.state.demoFunction.hasTitle.value === 'true';
         const hasCloseIcon = this.state.demoFunction.hasCloseIcon.value === 'true';
 
-        const placement = this.state.demoFunction.placement.value;
-        const style = {
+        const placement = this.state.demoFunction.placement.value as
+            | 'top'
+            | 'bottom'
+            | 'left'
+            | 'right';
+        const style: React.CSSProperties = {
             position: 'absolute',
             top: placement === 'bottom' ? 'auto' : 0,
             [placement]: 0,
@@ -138,7 +157,7 @@ class FunctionDemo extends Component {
 }
 
 const render = (lang = 'en-us') => {
-    const i18n = i18nMaps[lang];
+    const i18n = i18nMaps[lang as keyof typeof i18nMaps];
     ReactDOM.render(<FunctionDemo lang={lang} i18n={i18n} />, document.getElementById('container'));
 };
 

diff --git a/components/drawer/__tests__/a11y-spec.tsx b/components/drawer/__tests__/a11y-spec.tsx
@@ -1,32 +1,12 @@
 import React from 'react';
-import Enzyme, { mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import assert from 'power-assert';
 import Drawer from '../index';
+import { testReact } from '../../util/__tests__/a11y/validate';
 import '../style';
-import { test, unmount } from '../../util/__tests__/legacy/a11y/validate';
-import { roleType, isHeading, isButton } from '../../util/__tests__/legacy/a11y/checks';
-
-/* eslint-disable react/jsx-filename-extension */
-/* global describe it afterEach */
-
-Enzyme.configure({ adapter: new Adapter() });
 
 describe('Drawer A11y', () => {
     describe('Basic', () => {
-        let wrapper;
-
-        afterEach(() => {
-            if (wrapper && wrapper.unmount) {
-                wrapper.unmount();
-                wrapper = null;
-            }
-            unmount();
-        });
-
         it('should not have any violations', async () => {
-            wrapper = await mount(<Drawer visible />);
-            return test('.next-overlay-wrapper');
+            await testReact(<Drawer visible />);
         });
     });
 });