refactor(Shell): fix comment issue

alibaba-fusion · Sep 30, 2024 · 5c162a4 · 5c162a4
1 parent 372ead5
commit 5c162a4
Show file tree

Hide file tree

Showing 13 changed files with 247 additions and 350 deletions.
diff --git a/components/shell/__docs__/demo/complicated/index.tsx b/components/shell/__docs__/demo/complicated/index.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Search, Icon, Nav, Shell, Radio } from '@alifd/next';
+import type { ShellProps } from '@alifd/next/types/shell';
+import type { GroupProps } from '@alifd/next/types/radio';
 
 const { Item } = Nav;
-type deviceType = 'tablet' | 'desktop' | 'phone';
 
 class App extends React.Component {
-    state: { device: deviceType; navcollapse: boolean } = {
+    state: { device: ShellProps['device']; navcollapse: boolean } = {
         device: 'desktop',
         navcollapse: false,
     };
-    onChange = (device: deviceType) => {
+    onChange: GroupProps['onChange'] = device => {
         this.setState({
             device,
         });

diff --git a/components/shell/__docs__/demo/header-global-local/index.tsx b/components/shell/__docs__/demo/header-global-local/index.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Search, Nav, Shell, Radio } from '@alifd/next';
+import type { ShellProps } from '@alifd/next/types/shell';
+import type { GroupProps } from '@alifd/next/types/radio';
 
 const { Item } = Nav;
-type deviceType = 'tablet' | 'desktop' | 'phone';
 
 class App extends React.Component {
-    state: { device: deviceType } = {
+    state: { device: ShellProps['device'] } = {
         device: 'desktop',
     };
-    onChange = (device: deviceType) => {
+    onChange: GroupProps['onChange'] = device => {
         this.setState({
             device,
         });

diff --git a/components/shell/__docs__/demo/header-global/index.tsx b/components/shell/__docs__/demo/header-global/index.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Search, Nav, Shell, Radio } from '@alifd/next';
-
-type deviceType = 'tablet' | 'desktop' | 'phone';
+import type { ShellProps } from '@alifd/next/types/shell';
+import type { GroupProps } from '@alifd/next/types/radio';
 
 class App extends React.Component {
-    state: { device: deviceType } = {
+    state: { device: ShellProps['device'] } = {
         device: 'desktop',
     };
-    onChange = (device: deviceType) => {
+    onChange: GroupProps['onChange'] = device => {
         this.setState({
             device,
         });

diff --git a/components/shell/__docs__/index.en-us.md b/components/shell/__docs__/index.en-us.md
@@ -44,11 +44,11 @@ Shell is the infrastructure framework of the whole application. It embodies the
 
 ### Shell
 
-| Param       | Description                                                                                      | Type                             | Default Value | Required |
-| ----------- | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------- | -------- |
-| device      | Preset screen width, tt determines whether Navigation LocalNavigation Ancillarytake space or not | 'tablet' \| 'desktop' \| 'phone' | 'desktop'     |          |
-| type        | Type of Shell                                                                                    | 'light' \| 'dark' \| 'brand'     | 'light'       |          |
-| fixedHeader | Fixed header or not. Doesn't work under IE11                                                     | boolean                          | false         |          |
+| Param       | Description                                                                                                | Type                             | Default Value | Required |
+| ----------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------- | -------- |
+| device      | Preset screen width, which determines whether `Navigation` `LocalNavigation` `Ancillary` take space or not | 'tablet' \| 'desktop' \| 'phone' | 'desktop'     |          |
+| type        | Type of Shell                                                                                              | 'light' \| 'dark' \| 'brand'     | 'light'       |          |
+| fixedHeader | Fixed header or not. Doesn't work under IE11                                                               | boolean                          | false         |          |
 
 ### Shell.Navigation
 

diff --git a/components/shell/__docs__/index.md b/components/shell/__docs__/index.md
@@ -23,11 +23,11 @@
 
 ### Shell
 
-| 参数        | 说明                                                                   | 类型                             | 默认值    | 是否必填 |
-| ----------- | ---------------------------------------------------------------------- | -------------------------------- | --------- | -------- |
-| device      | 预设屏幕宽度，会影响Navigation LocalNavigation Ancillary等是否占据空间 | 'tablet' \| 'desktop' \| 'phone' | 'desktop' |          |
-| type        | 样式类型，分浅色主题、深色主题、主题色主题                             | 'light' \| 'dark' \| 'brand'     | 'light'   |          |
-| fixedHeader | 是否固定Header，采用sticky布局，不支持 IE11                            | boolean                          | false     |          |
+| 参数        | 说明                                                                             | 类型                             | 默认值    | 是否必填 |
+| ----------- | -------------------------------------------------------------------------------- | -------------------------------- | --------- | -------- |
+| device      | 预设屏幕宽度，会影响 `Navigation`、`LocalNavigation`、`Ancillary` 等是否占据空间 | 'tablet' \| 'desktop' \| 'phone' | 'desktop' |          |
+| type        | 样式类型，分浅色主题、深色主题、主题色主题                                       | 'light' \| 'dark' \| 'brand'     | 'light'   |          |
+| fixedHeader | 是否固定Header，采用sticky布局，不支持 IE11                                      | boolean                          | false     |          |
 
 ### Shell.Navigation
 
@@ -49,11 +49,11 @@
 
 ### Shell.ToolDock
 
-| 参数             | 说明                                         | 类型                         | 默认值    | 是否必填 |
-| ---------------- | -------------------------------------------- | ---------------------------- | --------- | -------- |
-| collapse         | 是否折叠（完全收起）                         | boolean                      | false     |          |
-| onCollapseChange | 默认按钮触发的展开收起状态                   | (collapse?: boolean) => void | func.noop |          |
-| fixed            | 是否固定，且需要在在 Shell fixedHeader时生效 | boolean                      | false     |          |
+| 参数             | 说明                                          | 类型                         | 默认值    | 是否必填 |
+| ---------------- | --------------------------------------------- | ---------------------------- | --------- | -------- |
+| collapse         | 是否折叠（完全收起）                          | boolean                      | false     |          |
+| onCollapseChange | 默认按钮触发的展开收起状态                    | (collapse?: boolean) => void | func.noop |          |
+| fixed            | 是否固定，且需要在在 Shell fixedHeader 时生效 | boolean                      | false     |          |
 
 ### Shell.Ancillary
 

diff --git a/components/shell/__docs__/theme/index.tsx b/components/shell/__docs__/theme/index.tsx
@@ -89,11 +89,9 @@ interface FunctionDemoProps {
 }
 
 interface FunctionDemoState {
-    // demoFunction: DemoProps['demoFunction']
     demoFunction: ShellThemeProps['demoFunction'];
 }
 
-/* eslint-disable */
 const i18nMap = {
     'zh-cn': {
         shell: '布局框架',
@@ -110,28 +108,23 @@ const i18nMap = {
 };
 class RenderShell extends React.Component<ShellThemeProps> {
     render() {
-        const { type, i18n, demoFunction } = this.props;
+        const { type, demoFunction } = this.props;
         const device = demoFunction.device.value;
         const globalDir = demoFunction.navigation.value;
-        let globalNavType = demoFunction.navigationType.value,
-            //     localNavType = demoFunction.localNavType.value,
-            // globalHozNavType = 'normal',
-            localNavType: 'normal' | 'primary' | 'secondary' | 'line' = 'normal',
-            logoStyle = {},
+        const globalNavType = demoFunction.navigationType.value,
+            localNavType = demoFunction.localNavType?.value || 'normal';
+        let logoStyle = {},
             shellStyle = {};
 
         switch (type) {
             case 'light':
                 logoStyle = { width: 32, height: 32, background: '#000', opacity: '0.04' };
-                // globalHozNavType = 'normal';
                 break;
             case 'dark':
                 logoStyle = { width: 32, height: 32, background: '#FFF', opacity: '0.2' };
-                // globalHozNavType = globalDir === 'hoz' ? 'primary' : 'normal';
                 break;
             case 'brand':
                 logoStyle = { width: 32, height: 32, background: '#000', opacity: '0.04' };
-                // globalHozNavType = globalDir === 'hoz' ? 'secondary' : 'normal';
                 break;
             default:
                 break;
@@ -226,16 +219,12 @@ class RenderShell extends React.Component<ShellThemeProps> {
                                 </Nav>
                             </Shell.LocalNavigation>
                         ) : null}
-                        {demoFunction.appbar.value === 'true' ? (
-                            <Shell.AppBar></Shell.AppBar>
-                        ) : null}
+                        {demoFunction.appbar.value === 'true' ? <Shell.AppBar /> : null}
                         <Shell.Content>
                             <div style={{ minHeight: 1200, background: '#fff' }}></div>
                         </Shell.Content>
 
-                        {demoFunction.ancillary.value === 'true' ? (
-                            <Shell.Ancillary></Shell.Ancillary>
-                        ) : null}
+                        {demoFunction.ancillary.value === 'true' ? <Shell.Ancillary /> : null}
                         {demoFunction.tooldock.value === 'true' ? (
                             <Shell.ToolDock>
                                 <Shell.ToolDockItem>
@@ -377,23 +366,28 @@ class FunctionDemo extends React.Component<FunctionDemoProps, FunctionDemoState>
                         },
                     ],
                 },
-                // 'localNavType': {
-                //     label: 'Local Nav Type',
-                //     value: 'normal',
-                //     enum: [{
-                //         label: 'normal',
-                //         value: 'normal'
-                //     }, {
-                //         label: 'primary',
-                //         value: 'primary'
-                //     }, {
-                //         label: 'secondary',
-                //         value: 'secondary'
-                //     }, {
-                //         label: 'line',
-                //         value: 'line'
-                //     }]
-                // },
+                localNavType: {
+                    label: 'Local Nav Type',
+                    value: 'normal',
+                    enum: [
+                        {
+                            label: 'normal',
+                            value: 'normal',
+                        },
+                        {
+                            label: 'primary',
+                            value: 'primary',
+                        },
+                        {
+                            label: 'secondary',
+                            value: 'secondary',
+                        },
+                        {
+                            label: 'line',
+                            value: 'line',
+                        },
+                    ],
+                },
                 appbar: {
                     label: 'Appbar',
                     value: 'false',
@@ -477,7 +471,7 @@ class FunctionDemo extends React.Component<FunctionDemoProps, FunctionDemoState>
 }
 
 function render(i18n: FunctionDemoProps['locale'], lang: string) {
-    return ReactDOM.render(
+    ReactDOM.render(
         // @ts-expect-error ConfigProvider 不存在 lang 属性
         <ConfigProvider lang={lang === 'en-us' ? enUS : zhCN}>
             <div className="demo-container">

diff --git a/components/shell/__tests__/a11y-spec.tsx b/components/shell/__tests__/a11y-spec.tsx
@@ -6,7 +6,6 @@ import '../../search/style';
 import './index.scss';
 import { testReact } from '../../util/__tests__/a11y/validate';
 
-/* eslint-disable no-undef, react/jsx-filename-extension */
 describe('Shell A11y', () => {
     it('should not have any violations', async () => {
         await testReact(