chore(Nav): improve by codereivew

alibaba-fusion · Apr 9, 2024 · d40e007 · d40e007
1 parent 2073475
commit d40e007
Show file tree

Hide file tree

Showing 23 changed files with 241 additions and 262 deletions.
diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts
@@ -258,7 +258,7 @@ export interface MenuProps extends HTMLAttributesWeak, CommonProps {
     /**
      * 初始选中菜单项的 key 值
      */
-    defaultSelectedKeys?: string | Array<any>;
+    defaultSelectedKeys?: string | Array<any> | null;
 
     /**
      * 选中或取消选中菜单项触发的回调函数

diff --git a/components/nav/__docs__/adaptor/createContents.tsx b/components/nav/__docs__/adaptor/createContents.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Nav } from '@alifd/next';
+import { createMenuItem } from './createMenuItem';
+import type { DataSourceOption } from './types';
+
+export function createContents(array: DataSourceOption[] = []) {
+    return array.map(item => {
+        if (item.type === 'group' && item.children && item.children.length > 0) {
+            return (
+                <Nav.Group key={item.key} label={item.value}>
+                    {item.children.map(it => createMenuItem(it))}
+                </Nav.Group>
+            );
+        }
+
+        if (item.type === 'divider') {
+            return <Nav.Divider key={item.key} />;
+        }
+
+        return createMenuItem(item);
+    });
+}
diff --git a/components/nav/__docs__/adaptor/createMenuItem.tsx b/components/nav/__docs__/adaptor/createMenuItem.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Nav } from '@alifd/next';
+import { ContentType } from '@alifd/adaptor-helper';
+import { createContents } from './createContents';
+import type { DataSourceOption } from './types';
+
+export function createMenuItem(item: DataSourceOption) {
+    const { value } =
+        ((Array.isArray(item.value) && item.value) || []).find(
+            item => item && typeof item === 'object' && item.type === ContentType.icon
+        ) || {};
+    if (item.children && item.children.length > 0) {
+        return (
+            // TODO SubNav 并不支持 disabled 属性 （disabled={item.state === 'disabled'}）
+            <Nav.SubNav
+                key={item.key}
+                icon={value}
+                label={
+                    Array.isArray(item.value)
+                        ? item.value
+                              .filter(({ type }) => type === ContentType.text)
+                              .map(({ value }) => value)
+                              .join('')
+                        : ''
+                }
+            >
+                {createContents(item.children)}
+            </Nav.SubNav>
+        );
+    }
+
+    return (
+        <Nav.Item
+            key={item.key}
+            icon={value}
+            className={item.state === 'hover' ? 'next-focused' : ''}
+            disabled={item.state === 'disabled'}
+            children={(Array.isArray(item.value) ? item.value : ([] as Record<string, any>[])).map(
+                ({ type, value }) => (type === 'icon' ? null : value)
+            )}
+        />
+    );
+}
diff --git a/components/nav/__docs__/adaptor/index.tsx b/components/nav/__docs__/adaptor/index.tsx
@@ -1,21 +1,9 @@
-/* eslint-disable */
 import React from 'react';
-import { Types, parseData, ContentType } from '@alifd/adaptor-helper';
+import { Types, parseData } from '@alifd/adaptor-helper';
 import { Nav } from '@alifd/next';
-import { NavProps } from '@alifd/next/es/nav';
-
-type ValueType<T> = T extends keyof typeof ContentType
-    ? { type: keyof typeof ContentType; value: string }[]
-    : boolean;
-
-interface DataSourceOption {
-    type: 'node' | 'comment' | 'divider' | 'group' | ContentType.icon | ContentType.text;
-    key?: string;
-    value?: ValueType<DataSourceOption['type']>;
-    children?: DataSourceOption[];
-    state?: 'active' | 'hover' | 'disabled';
-    level?: number;
-}
+import type { NavProps } from '@alifd/next/es/nav';
+import { createContents } from './createContents';
+import type { DataSourceOption } from './types';
 
 const createDataSource = (
     list: DataSourceOption[],
@@ -32,11 +20,9 @@ const createDataSource = (
     let index = 0;
 
     list.forEach(item => {
+        const key = `${prefix || level}-${index++}`;
         switch (item.type) {
-            // eslint-disable-next-line no-case-declarations
             case 'node':
-                const key = `${prefix || level}-${index++}`;
-
                 if (item.children && item.children.length > 0) {
                     item.children = createDataSource(item.children, keys, level + 1, key);
                 }
@@ -108,62 +94,6 @@ const createDataSource = (
     return array;
 };
 
-const createMenuItem = (item: DataSourceOption) => {
-    const { value } =
-        ((Array.isArray(item.value) && item.value) || []).find(
-            item => item && typeof item === 'object' && item.type === ContentType.icon
-        ) || {};
-    if (item.children && item.children.length > 0) {
-        return (
-            // TODO SubNav 并不支持 disabled 属性 （disabled={item.state === 'disabled'}）
-            <Nav.SubNav
-                key={item.key}
-                icon={value}
-                label={
-                    Array.isArray(item.value)
-                        ? item.value
-                              .filter(({ type }) => type === ContentType.text)
-                              .map(({ value }) => value)
-                              .join('')
-                        : ''
-                }
-            >
-                {createContents(item.children)}
-            </Nav.SubNav>
-        );
-    }
-
-    return (
-        <Nav.Item
-            key={item.key}
-            icon={value}
-            className={item.state === 'hover' ? 'next-focused' : ''}
-            disabled={item.state === 'disabled'}
-            children={(Array.isArray(item.value) ? item.value : ([] as Record<string, any>[])).map(
-                ({ type, value }, index) => (type === 'icon' ? null : value)
-            )}
-        />
-    );
-};
-
-function createContents(array: DataSourceOption[] = []) {
-    return array.map(item => {
-        if (item.type === 'group' && item.children && item.children.length > 0) {
-            return (
-                <Nav.Group key={item.key} label={item.value}>
-                    {item.children.map(it => createMenuItem(it))}
-                </Nav.Group>
-            );
-        }
-
-        if (item.type === 'divider') {
-            return <Nav.Divider key={item.key} />;
-        }
-
-        return createMenuItem(item);
-    });
-}
-
 export default {
     name: 'Nav',
     shape: [
@@ -238,7 +168,7 @@ export default {
         level: 'normal' | 'primary' | 'secondary' | 'line';
         [key: string]: any;
     }) => {
-        const list = parseData(data, { parseContent: true }) as unknown as DataSourceOption[];
+        const list = parseData(data, { parseContent: true }) as DataSourceOption[];
         const keys = { selected: [], expanded: [] };
         const dataSource = createDataSource(list, keys);
 

diff --git a/components/nav/__docs__/adaptor/types.ts b/components/nav/__docs__/adaptor/types.ts
@@ -0,0 +1,20 @@
+import type { ContentType } from '@alifd/adaptor-helper';
+
+type ValueType<T> = T extends keyof typeof ContentType
+    ? { type: keyof typeof ContentType; value: string }[]
+    : boolean;
+
+export interface DataSourceOption {
+    type:
+        | 'node'
+        | 'comment'
+        | 'divider'
+        | 'group'
+        | typeof ContentType.icon
+        | typeof ContentType.text;
+    key?: string;
+    value?: ValueType<DataSourceOption['type']>;
+    children?: DataSourceOption[];
+    state?: 'active' | 'hover' | 'disabled';
+    level?: number;
+}
diff --git a/components/nav/__docs__/demo/custom/index.tsx b/components/nav/__docs__/demo/custom/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Nav, Radio } from '@alifd/next';
-import { NavProps } from '@alifd/next/es/nav';
+import type { NavProps } from '@alifd/next/es/nav';
 
 type AppState = Pick<NavProps, 'type' | 'mode' | 'direction' | 'activeDirection' | 'triggerType'>;
 

diff --git a/components/nav/__docs__/demo/fixed/index.tsx b/components/nav/__docs__/demo/fixed/index.tsx
@@ -1,13 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-const header = <span className="fusion">FUSION</span>;
-const footer = (
-    <a className="login-in" href="javascript:;">
-        Login in
-    </a>
-);
-
 ReactDOM.render(
     <div>
         请查看{' '}

diff --git a/components/nav/__docs__/demo/icon-only/index.tsx b/components/nav/__docs__/demo/icon-only/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Nav, Radio } from '@alifd/next';
-import { NavProps } from '@alifd/next/es/nav';
+import type { NavProps } from '@alifd/next/es/nav';
 
 type AppState = Pick<
     NavProps,

diff --git a/components/nav/__docs__/demo/open-mode/index.tsx b/components/nav/__docs__/demo/open-mode/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Nav, Radio } from '@alifd/next';
-import { NavProps } from '@alifd/next/es/nav';
+import type { NavProps } from '@alifd/next/es/nav';
 
 type AppState = Pick<NavProps, 'openMode'>;
 

diff --git a/components/nav/__docs__/demo/popup-align/index.tsx b/components/nav/__docs__/demo/popup-align/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Nav, Radio } from '@alifd/next';
-import { NavProps } from '@alifd/next/es/nav';
+import type { NavProps } from '@alifd/next/es/nav';
 
 type AppState = Pick<NavProps, 'popupAlign'>;
 const { Item, SubNav } = Nav;

diff --git a/components/nav/__docs__/demo/vertical-smart/index.tsx b/components/nav/__docs__/demo/vertical-smart/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Nav, Switch, Radio } from '@alifd/next';
-import { NavProps } from '@alifd/next/es/nav';
+import type { NavProps } from '@alifd/next/es/nav';
 
 const { Item, SubNav } = Nav;
 

diff --git a/components/nav/__docs__/demo/vertical/index.tsx b/components/nav/__docs__/demo/vertical/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Nav, Radio } from '@alifd/next';
-import { NavProps } from '@alifd/next/es/nav';
+import type { NavProps } from '@alifd/next/es/nav';
+import type { GroupProps } from '@alifd/next/es/radio';
 
 type AppState = Pick<NavProps, 'type'>;
 const { Item, SubNav } = Nav;
@@ -11,11 +12,11 @@ class App extends React.Component {
         type: 'normal',
     };
 
-    changeType(type: AppState['type']) {
+    changeType: GroupProps['onChange'] = type => {
         this.setState({
             type,
         });
-    }
+    };
 
     render() {
         const { type } = this.state;
@@ -27,7 +28,7 @@ class App extends React.Component {
                         shape="button"
                         size="medium"
                         value={type}
-                        onChange={this.changeType.bind(this)}
+                        onChange={this.changeType}
                     >
                         <Radio value="normal">type="normal"</Radio>
                         <Radio value="primary">type="primary"</Radio>