refactor(Tab): ts & docs & test tools

alibaba-fusion · Oct 21, 2024 · 4632a46 · 4632a46
1 parent 3db4167
commit 4632a46
Show file tree

Hide file tree

Showing 23 changed files with 800 additions and 65,313 deletions.
diff --git a/components/tab/__docs__/adaptor/index.tsx b/components/tab/__docs__/adaptor/index.tsx
@@ -2,11 +2,29 @@ import React from 'react';
 import { Types, parseData } from '@alifd/adaptor-helper';
 import { Tab, Icon } from '@alifd/next';
 
+// 定义属性接口
+interface AdaptorProps {
+    shape: 'pure' | 'wrapped' | 'text' | 'capsule';
+    size: 'medium' | 'small';
+    closable: boolean;
+    overflow?: 'slide' | 'dropdown';
+    width?: number;
+    position?: 'top' | 'left' | 'right';
+    style?: React.CSSProperties;
+    data: any;
+}
+
 export default {
     name: 'Tab',
     shape: ['pure', 'wrapped', 'text', 'capsule'],
     editor: (shape = 'pure') => {
-        const props = [
+        const props: Array<{
+            name: string;
+            type: any;
+            options?: string[];
+            default: any;
+            label?: string;
+        }> = [
             {
                 name: 'size',
                 type: Types.enum,
@@ -63,9 +81,9 @@ export default {
         style = {},
         data,
         ...others
-    }) => {
+    }: AdaptorProps) => {
         const list = parseData(data, { parseContent: true });
-        const activeKey = list.findIndex(item => item.state === 'active');
+        const activeKey = list.findIndex((item: any) => item.state === 'active');
 
         return (
             <Tab
@@ -77,11 +95,12 @@ export default {
                 excessMode={overflow}
                 tabPosition={position}
             >
-                {list.map((item, index) => (
+                {list.map((item: any, index: number) => (
                     <Tab.Item
                         key={index}
-                        title={item.value.map(({ type, value }, i) =>
-                            type === 'icon' ? <Icon key={`icon_${i}`} type={value} /> : value
+                        title={item.value.map(
+                            ({ type, value }: { type: string; value: string }, i: number) =>
+                                type === 'icon' ? <Icon key={`icon_${i}`} type={value} /> : value
                         )}
                         closeable={closable}
                         disabled={item.state === 'disabled'}

diff --git a/components/tab/__docs__/demo/closable/index.tsx b/components/tab/__docs__/demo/closable/index.tsx
@@ -3,14 +3,25 @@ import ReactDOM from 'react-dom';
 import { Tab, Button, Icon } from '@alifd/next';
 
 const panes = [
-    { tab: 'Mail', key: 1, closeable: false },
-    { tab: 'Message', key: 2, closeable: true },
-    { tab: 'Setting', key: 3, closeable: true },
-    { tab: 'Unread', key: 4, closeable: true },
+    { tab: 'Mail', key: '1', closeable: false },
+    { tab: 'Message', key: '2', closeable: true },
+    { tab: 'Setting', key: '3', closeable: true },
+    { tab: 'Unread', key: '4', closeable: true },
 ];
 
-class CloseableTab extends React.Component {
-    constructor(props) {
+interface Pane {
+    tab: string;
+    key: string;
+    closeable: boolean;
+}
+
+interface CloseableTabState {
+    panes: Pane[];
+    activeKey: string;
+}
+
+class CloseableTab extends React.Component<{}, CloseableTabState> {
+    constructor(props: {}) {
         super(props);
         this.state = {
             panes: panes,
@@ -19,9 +30,9 @@ class CloseableTab extends React.Component {
     }
 
     /*eslint-disable eqeqeq */
-    remove(targetKey) {
+    remove(targetKey: string) {
         let activeKey = this.state.activeKey;
-        const panes = [];
+        const panes: Pane[] = [];
         this.state.panes.forEach(pane => {
             if (pane.key != targetKey) {
                 panes.push(pane);
@@ -34,17 +45,17 @@ class CloseableTab extends React.Component {
         this.setState({ panes, activeKey });
     }
 
-    onClose = targetKey => {
+    onClose = (targetKey: string) => {
         this.remove(targetKey);
     };
 
-    onChange = activeKey => {
+    onChange = (activeKey: string) => {
         this.setState({ activeKey });
     };
 
     addTabpane = () => {
         const panes = this.state.panes;
-        const newItem = { tab: 'new tab', key: Math.random(), closeable: true };
+        const newItem = { tab: 'new tab', key: Math.random().toString(), closeable: true };
         panes.push(newItem);
 
         this.setState({

diff --git a/components/tab/__docs__/demo/custom-tab/index.tsx b/components/tab/__docs__/demo/custom-tab/index.tsx
@@ -2,7 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Tab } from '@alifd/next';
 
-function CustomTabItem({ title, desc, img }) {
+interface Pane {
+    key: string;
+    title: string;
+    desc: string;
+    img: string;
+}
+
+function CustomTabItem({ title, desc, img }: { title: string; desc: string; img: string }) {
     return (
         <div className="custom-tab-item">
             <div className="tab-title">
@@ -14,7 +21,7 @@ function CustomTabItem({ title, desc, img }) {
     );
 }
 
-const panes = [
+const panes: Pane[] = [
     {
         key: 'e-checking',
         title: 'Alipay',
@@ -32,7 +39,7 @@ const panes = [
 ReactDOM.render(
     <Tab shape="wrapped" tabRender={(key, props) => <CustomTabItem key={key} {...props} />}>
         {panes.map(pane => (
-            <Tab.Item key={pane.key} {...pane} tabStyle={{ height: '60px' }}>
+            <Tab.Item {...pane} tabStyle={{ height: '60px' }}>
                 {pane.desc}
             </Tab.Item>
         ))}

diff --git a/components/tab/__docs__/demo/editable-tab/index.tsx b/components/tab/__docs__/demo/editable-tab/index.tsx
@@ -2,32 +2,39 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Tab, Input } from '@alifd/next';
 
-class EditableTabPane extends React.Component {
-    constructor(props) {
+interface EditableTabPaneProps {
+    defaultTitle: string;
+}
+interface EditableTabPaneState {
+    tabTitle: string;
+    editable: boolean;
+}
+class EditableTabPane extends React.Component<EditableTabPaneProps, EditableTabPaneState> {
+    constructor(props: EditableTabPaneProps) {
         super(props);
         this.state = {
             tabTitle: props.defaultTitle,
             editable: false,
         };
     }
 
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps: EditableTabPaneProps) {
         if (nextProps.defaultTitle !== this.state.tabTitle) {
             this.setState({
                 tabTitle: nextProps.defaultTitle,
             });
         }
     }
 
-    onKeyDown = e => {
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const { keyCode } = e;
         // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight
         if (keyCode > 36 && keyCode < 41) {
             e.stopPropagation();
         }
     };
 
-    onBlur = e => {
+    onBlur = (e: React.FocusEvent<HTMLInputElement>) => {
         this.setState({
             editable: false,
             tabTitle: e.target.value,
@@ -51,7 +58,7 @@ class EditableTabPane extends React.Component {
     }
 }
 
-const tabRender = (key, { title }) => (
+const tabRender = (key: string, { title }: { title: string }) => (
     <div key={key} className="editable-tab-wrapper">
         <EditableTabPane defaultTitle={title} />
     </div>

diff --git a/components/tab/__docs__/demo/excess-mode/index.tsx b/components/tab/__docs__/demo/excess-mode/index.tsx
@@ -21,7 +21,7 @@ const tabs = [
     { tab: 'More 11', key: 16 },
 ];
 
-function onClick(key) {
+function onClick(key: string) {
     console.log(key);
 }
 

diff --git a/components/tab/__docs__/demo/extra/index.tsx b/components/tab/__docs__/demo/extra/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Tab, Button } from '@alifd/next';
 
-function handleChange(key) {
+function handleChange(key: string) {
     console.log(key);
 }
 

diff --git a/components/tab/__docs__/demo/nested/index.tsx b/components/tab/__docs__/demo/nested/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Tab } from '@alifd/next';
 
-function callback(key) {
+function callback(key: string) {
     console.log(key);
 }
 

diff --git a/components/tab/__docs__/demo/position/index.tsx b/components/tab/__docs__/demo/position/index.tsx
@@ -2,13 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Tab, Radio } from '@alifd/next';
 
+type TabPosition = 'top' | 'bottom' | 'left' | 'right';
+
 const Demo = () => {
-    const [tabPosition, setTabPosition] = React.useState('top');
+    const [tabPosition, setTabPosition] = React.useState<TabPosition>('top');
 
     return (
         <div>
             Position:{' '}
-            <Radio.Group shape="button" value={tabPosition} onChange={setTabPosition}>
+            <Radio.Group
+                shape="button"
+                value={tabPosition}
+                onChange={value => setTabPosition(value as TabPosition)}
+            >
                 <Radio value="top">top</Radio>
                 <Radio value="bottom">bottom</Radio>
                 <Radio value="left">left</Radio>

diff --git a/components/tab/__docs__/demo/shape/index.tsx b/components/tab/__docs__/demo/shape/index.tsx
@@ -1,18 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Tab, Radio } from '@alifd/next';
+import { instanceOf } from 'prop-types';
 
-function onChange(key) {
+function onChange(key: string) {
     console.log(key);
 }
-
+type ShapeType = 'text' | 'pure' | 'wrapped' | 'capsule';
 const Demo = () => {
-    const [shape, setShape] = React.useState('pure');
+    const [shape, setShape] = React.useState<ShapeType>('pure');
 
     return (
         <div>
             shape:{' '}
-            <Radio.Group shape="button" value={shape} onChange={setShape}>
+            <Radio.Group
+                shape="button"
+                value={shape}
+                onChange={value => setShape(value as ShapeType)}
+            >
                 <Radio value="pure">pure</Radio>
                 <Radio value="wrapped">wrapped</Radio>
                 <Radio value="text">text</Radio>

diff --git a/components/tab/__docs__/demo/trigger-type/index.tsx b/components/tab/__docs__/demo/trigger-type/index.tsx
@@ -8,19 +8,19 @@ const tabs = [
     { tab: 'API', key: 2, content: 'This is api page' },
 ];
 
-function onChange(key) {
+function onChange(key: number | string) {
     console.log('change', key);
 }
 
-function handleClick(key) {
+function handleClick(key: number | string) {
     console.log('click', key);
 }
 
-function onMouseEnter(key, e) {
+function onMouseEnter(key: number | string, e: React.MouseEvent<HTMLElement>) {
     console.log('enter', e.target, key);
 }
 
-function onMouseLeave(key, e) {
+function onMouseLeave(key: number | string, e: React.MouseEvent<HTMLElement>) {
     console.log('leave', e.target, key);
 }
 
@@ -40,9 +40,9 @@ ReactDOM.render(
                 <Tab.Item
                     key={item.key}
                     title={item.tab}
-                    onClick={handleClick}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
+                    onClick={() => handleClick(item.key)}
+                    onMouseEnter={e => onMouseEnter(item.key, e)}
+                    onMouseLeave={e => onMouseLeave(item.key, e)}
                 >
                     {item.content}
                 </Tab.Item>