refactor(Shell): Upgrade tests and docs, convert to TypeScript

alibaba-fusion · Oct 9, 2024 · a512263 · a512263
1 parent 2c3be74
commit a512263
Show file tree

Hide file tree

Showing 17 changed files with 857 additions and 547 deletions.
diff --git a/components/shell/__docs__/adaptor/index.tsx b/components/shell/__docs__/adaptor/index.tsx
@@ -1,11 +1,24 @@
 import React from 'react';
 import { Types } from '@alifd/adaptor-helper';
-import { Shell, Icon } from '@alifd/next';
+import { Shell, Icon, Nav, Search } from '@alifd/next';
+
+interface AdaptorProps {
+    level: 'light' | 'dark' | 'brand';
+    device: 'desktop' | 'tablet' | 'phone';
+    branding?: boolean;
+    actions: boolean;
+    localNav: boolean;
+    appbar: boolean;
+    footer: boolean;
+    tooldock: boolean;
+    ancillary: boolean;
+    navigation: 'ver' | 'hoz';
+}
 
 export default {
     name: 'Shell',
     shape: ['normal'],
-    editor: shape => {
+    editor: (shape: string) => {
         return {
             props: [
                 {
@@ -86,8 +99,7 @@ export default {
         tooldock,
         ancillary,
         navigation,
-        ...others
-    }) => {
+    }: AdaptorProps) => {
         let logoStyle = {},
             shellStyle = {};
 
@@ -188,12 +200,12 @@ export default {
                         </Nav>
                     </Shell.LocalNavigation>
                 ) : null}
-                {appbar ? <Shell.AppBar></Shell.AppBar> : null}
+                {appbar ? <Shell.AppBar /> : null}
                 <Shell.Content>
                     <div style={{ minHeight: 1200, background: '#fff' }}></div>
                 </Shell.Content>
 
-                {ancillary ? <Shell.Ancillary></Shell.Ancillary> : null}
+                {ancillary ? <Shell.Ancillary /> : null}
                 {tooldock ? (
                     <Shell.ToolDock>
                         <Shell.ToolDockItem>

diff --git a/components/shell/__docs__/demo/basic/index.tsx b/components/shell/__docs__/demo/basic/index.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Search, Icon, Nav, Shell } from '@alifd/next';
-
-const { SubNav, Item, Group, Divider } = Nav;
+import { Search, Icon, Shell } from '@alifd/next';
 
 class App extends React.Component {
     render() {

diff --git a/components/shell/__docs__/demo/complicated/index.tsx b/components/shell/__docs__/demo/complicated/index.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Search, Icon, Nav, Shell, Radio } from '@alifd/next';
 
-const { SubNav, Item, Group, Divider } = Nav;
+const { Item } = Nav;
+type deviceType = 'tablet' | 'desktop' | 'phone';
 
 class App extends React.Component {
-    state = {
+    state: { device: deviceType; navcollapse: boolean } = {
         device: 'desktop',
+        navcollapse: false,
     };
-    onChange = device => {
+    onChange = (device: deviceType) => {
         this.setState({
             device,
         });
@@ -20,8 +22,8 @@ class App extends React.Component {
         });
     };
 
-    onCollapseChange = (visible, e) => {
-        console.log('onCollapseChange:', visible, e);
+    onCollapseChange = (visible: boolean) => {
+        console.log('onCollapseChange:', visible);
 
         this.setState({
             navcollapse: visible,
@@ -124,7 +126,7 @@ class App extends React.Component {
                         <span>@ 2019 Alibaba Piecework 版权所有</span>
                     </Shell.Footer>
 
-                    <Shell.Ancillary></Shell.Ancillary>
+                    <Shell.Ancillary />
 
                     <Shell.ToolDock>
                         <Shell.ToolDockItem>

diff --git a/components/shell/__docs__/demo/header-global-local/index.tsx b/components/shell/__docs__/demo/header-global-local/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Menu, Search, Nav, Shell, Radio } from '@alifd/next';
+import { Search, Nav, Shell, Radio } from '@alifd/next';
 
-const { SubNav, Item, Group, Divider } = Nav;
+const { Item } = Nav;
+type deviceType = 'tablet' | 'desktop' | 'phone';
 
 class App extends React.Component {
-    state = {
+    state: { device: deviceType } = {
         device: 'desktop',
     };
-    onChange = device => {
+    onChange = (device: deviceType) => {
         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 { Menu, Search, Nav, Shell, Radio } from '@alifd/next';
+import { Search, Nav, Shell, Radio } from '@alifd/next';
 
-const { SubNav, Item, Group, Divider } = Nav;
+type deviceType = 'tablet' | 'desktop' | 'phone';
 
 class App extends React.Component {
-    state = {
+    state: { device: deviceType } = {
         device: 'desktop',
     };
-    onChange = device => {
+    onChange = (device: deviceType) => {
         this.setState({
             device,
         });

diff --git a/components/shell/__docs__/index.en-us.md b/components/shell/__docs__/index.en-us.md
@@ -15,13 +15,13 @@ Shell is the infrastructure framework of the whole application. It embodies the
 
 ### 何时使用
 
-- Shell should be configured according to the actual business requirements.
-- The same application uses a unified Shell framework to avoid confusion.
+-   Shell should be configured according to the actual business requirements.
+-   The same application uses a unified Shell framework to avoid confusion.
 
-````jsx
+```jsx
 <Shell>
     <Shell.Branding />
-    <Shell.Navigation/>
+    <Shell.Navigation />
     <Shell.Action />
 
     <Shell.MultiTask />
@@ -36,47 +36,49 @@ Shell is the infrastructure framework of the whole application. It embodies the
         <Shell.ToolDockItem />
     </Shell.ToolDock>
 </Shell>
-````
+```
 
 `<Shell.Content />` uses css-grid, others are `display: flex`
 
 ## API
 
 ### Shell
-| Param                | Description  | Type              | Default Value      |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| device             | Preset screen width, tt determines whether `Navigation` `LocalNavigation` `Ancillary`take space or not<br><br>**option**:<br>'phone', 'tablet', 'desktop'     | Enum         |  desktop    |
-| type             | type of Shell <br><br>**可选值**:<br>'light', 'dark', 'brand'     | Enum         |  light    |
-| fixedHeader   | fixed header or not. Doesn't work under IE11    | Boolean         | false     |
 
+| 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         |          |
 
 ### Shell.Navigation
-It will tell his children whether it's collapse or not by `isCollapse` via Context.
 
-| Param                | Description  | Type              | Default Value      |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| collapse   | collapse or not  | Boolean         | false     |
-| direction  | header or asider<br><br>**option**:<br>'hoz', 'ver'    | Enum         |  hoz    |
-| align      | Arrangement of Navigation when direction is hoz<br><br>**option**:<br>'left', 'right', 'center'   | Enum        |  right  |
-| onCollapseChange   | this will be triggered when collapse changed by inner icon   | Function        | () => {}   |
-| trigger   | trigger of Shell.Navigation, it placed on top and left of the page, you can set `null` to remove it    | ReactNode         |      |
-| fixed   | fixed or not, only worked when Shell fixedHeader is true   | Boolean         | false     |
+| Param            | Description                                                                                       | Type                          | Default Value | Required |
+| ---------------- | ------------------------------------------------------------------------------------------------- | ----------------------------- | ------------- | -------- |
+| direction        | Header or asider                                                                                  | 'hoz' \| 'ver'                | 'hoz'         |          |
+| collapse         | Collapse or not                                                                                   | boolean                       | false         |          |
+| align            | Arrangement of Navigation when direction is hoz                                                   | 'left' \| 'right' \| 'center' | 'right'       |          |
+| onCollapseChange | This will be triggered when collapse changed by inner icon                                        | (collapse?: boolean) => void  | func.noop     |          |
+| trigger          | Trigger of Shell.Navigation, it placed on top and left of the page, you can set null to remove it | ReactNode                     | -             |          |
+| fixed            | Fixed or not, only worked when Shell fixedHeader is true                                          | boolean                       | false         |          |
 
 ### Shell.LocalNavigation
-| Param                | Description  | Type              | Default Value      |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| collapse   | collapse or not    | Boolean         | false     |
-| onCollapseChange   | this will be triggered when collapse changed by inner icon   | Function        | () => {}   |
+
+| Param            | Description                                                | Type                         | Default Value | Required |
+| ---------------- | ---------------------------------------------------------- | ---------------------------- | ------------- | -------- |
+| collapse         | Collapse or not                                            | boolean                      | false         |          |
+| onCollapseChange | This will be triggered when collapse changed by inner icon | (collapse?: boolean) => void | func.noop     |          |
 
 ### Shell.ToolDock
-| Param                | Description  | Type              | Default Value      |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| collapse   | collapse or not   | Boolean         | false     |
-| onCollapseChange   | this will be triggered when collapse changed by inner icon   | Function        | () => {}   |
-| fixed   | fixed or not, only worked when Shell fixedHeader is true   | Boolean         | false     |
+
+| Param            | Description                                                | Type                         | Default Value | Required |
+| ---------------- | ---------------------------------------------------------- | ---------------------------- | ------------- | -------- |
+| collapse         | Collapse or not                                            | boolean                      | false         |          |
+| onCollapseChange | This will be triggered when collapse changed by inner icon | (collapse?: boolean) => void | func.noop     |          |
+| fixed            | Fixed or not, only worked when Shell fixedHeader is true   | boolean                      | false         |          |
 
 ### Shell.Ancillary
-| Param                | Description  | Type              | Default Value      |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| collapse   | collapse or not   | Boolean         | false     |
-| onCollapseChange   | this will be triggered when collapse changed by inner icon   | Function        | () => {}   |
+
+| Param            | Description                                                | Type                         | Default Value | Required |
+| ---------------- | ---------------------------------------------------------- | ---------------------------- | ------------- | -------- |
+| collapse         | Collapse or not                                            | boolean                      | false         |          |
+| onCollapseChange | This will be triggered when collapse changed by inner icon | (collapse?: boolean) => void | func.noop     |          |
diff --git a/components/shell/__docs__/index.md b/components/shell/__docs__/index.md
@@ -10,66 +10,68 @@
 框架组件，仅支持IE10+。
 
 ## 何时使用
-- Shell 是整个应用的基础结构框架。
-- 它体现应用的结构形式和承载应用的基本能力，让用户可以在同一套框架下完成自己所有的操作。
+
+-   Shell 是整个应用的基础结构框架。
+-   它体现应用的结构形式和承载应用的基本能力，让用户可以在同一套框架下完成自己所有的操作。
 
 ## 如何使用
 
-- Shell 应该根据业务实际诉求的复杂度进行配置；
-- 同一个应用统一使用一套 Shell 框架，避免出现混乱问题。
+-   Shell 应该根据业务实际诉求的复杂度进行配置；
+-   同一个应用统一使用一套 Shell 框架，避免出现混乱问题。
 
 ## API
 
 ### Shell
-| 参数                  | 说明          | 类型              | 默认值              |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| device             | 预设屏幕宽度，会影响`Navigation` `LocalNavigation` `Ancillary`等是否占据空间<br><br>**可选值**:<br>'phone', 'tablet', 'desktop'     | Enum         |  desktop    |
-| type             | 样式类型，分浅色主题、深色主题、主题色主题<br><br>**可选值**:<br>'light', 'dark', 'brand'     | Enum         |  light    |
-| fixedHeader   | 是否固定Header，采用sticky布局，不支持 IE11    | Boolean         | false     |
 
-### Shell.Navigation
-向子组件透传 isCollapse 的Context，表示当前是否处于折叠状态
+| 参数        | 说明                                                                   | 类型                             | 默认值    | 是否必填 |
+| ----------- | ---------------------------------------------------------------------- | -------------------------------- | --------- | -------- |
+| device      | 预设屏幕宽度，会影响Navigation LocalNavigation Ancillary等是否占据空间 | 'tablet' \| 'desktop' \| 'phone' | 'desktop' |          |
+| type        | 样式类型，分浅色主题、深色主题、主题色主题                             | 'light' \| 'dark' \| 'brand'     | 'light'   |          |
+| fixedHeader | 是否固定Header，采用sticky布局，不支持 IE11                            | boolean                          | false     |          |
 
-| 参数                  | 说明          | 类型              | 默认值              |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| direction  | 方向<br><br>**可选值**:<br>'hoz', 'ver'    | Enum         |  hoz    |
-| collapse   | 是否折叠(折叠成只有icon状态)   | Boolean         | false     |
-| align   | 横向模式下，导航排布的位置<br><br>**可选值**:<br>'left', 'right', 'center'   | Enum        |  right  |
-| onCollapseChange   | 默认按钮触发的展开收起状态   | Function        | () => {}   |
-| trigger   | 菜单展开、收起的触发元素，默认在左上角，不想要可以设置 `null` 来去掉    | ReactNode         |      |
-| fixed   | 是否固定，且需要在在 Shell fixedHeader时生效    | Boolean         | false     |
+### Shell.Navigation
 
+| 参数             | 说明                                                               | 类型                          | 默认值    | 是否必填 |
+| ---------------- | ------------------------------------------------------------------ | ----------------------------- | --------- | -------- |
+| direction        | 方向                                                               | 'hoz' \| 'ver'                | 'hoz'     |          |
+| collapse         | 是否折叠(折叠成只有icon状态)                                       | boolean                       | false     |          |
+| align            | 横向模式下，导航排布的位置                                         | 'left' \| 'right' \| 'center' | 'right'   |          |
+| onCollapseChange | 默认按钮触发的展开收起状态                                         | (collapse?: boolean) => void  | func.noop |          |
+| trigger          | 菜单展开、收起的触发元素，默认在左上角，不想要可以设置 null 来去掉 | ReactNode                     | -         |          |
+| fixed            | 是否固定，且需要在在 Shell fixedHeader时生效                       | boolean                       | false     |          |
 
 ### Shell.LocalNavigation
-| 参数                  | 说明          | 类型              | 默认值              |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| collapse   | 是否折叠（完全收起）    | Boolean         | false     |
-| onCollapseChange   | 默认按钮触发的展开收起状态   | Function        | () => {}   |
+
+| 参数             | 说明                       | 类型                         | 默认值    | 是否必填 |
+| ---------------- | -------------------------- | ---------------------------- | --------- | -------- |
+| collapse         | 是否折叠（完全收起）       | boolean                      | false     |          |
+| onCollapseChange | 默认按钮触发的展开收起状态 | (collapse?: boolean) => void | func.noop |          |
 
 ### Shell.ToolDock
-| 参数                  | 说明          | 类型              | 默认值              |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| collapse   | 是否折叠（完全收起）   | Boolean         | false     |
-| onCollapseChange   | 默认按钮触发的展开收起状态   | Function        | () => {}   |
-| fixed   | 是否固定，且需要在在 Shell fixedHeader时生效    | Boolean         | false     |
+
+| 参数             | 说明                                         | 类型                         | 默认值    | 是否必填 |
+| ---------------- | -------------------------------------------- | ---------------------------- | --------- | -------- |
+| collapse         | 是否折叠（完全收起）                         | boolean                      | false     |          |
+| onCollapseChange | 默认按钮触发的展开收起状态                   | (collapse?: boolean) => void | func.noop |          |
+| fixed            | 是否固定，且需要在在 Shell fixedHeader时生效 | boolean                      | false     |          |
 
 ### Shell.Ancillary
-| 参数                  | 说明          | 类型              | 默认值              |
-| -------------------- | ------------ | ----------------- | ------------------ |
-| collapse   | 是否折叠（完全收起）   | Boolean         | false     |
-| onCollapseChange   | 默认按钮触发的展开收起状态   | Function        | () => {}   |
 
+| 参数             | 说明                       | 类型                         | 默认值    | 是否必填 |
+| ---------------- | -------------------------- | ---------------------------- | --------- | -------- |
+| collapse         | 是否折叠（完全收起）       | boolean                      | false     |          |
+| onCollapseChange | 默认按钮触发的展开收起状态 | (collapse?: boolean) => void | func.noop |          |
 
 ## FAQ
 
-
 ### 有侧边栏的情况下，如何去掉左上角的side bar 展开、收起触发器？
+
 设置 `<Shell.Navigation trigger={null}/>`
 
-````jsx
+```jsx
 <Shell>
     <Shell.Branding />
-    <Shell.Navigation/>
+    <Shell.Navigation />
     <Shell.Action />
 
     <Shell.MultiTask />
@@ -84,6 +86,6 @@
         <Shell.ToolDockItem />
     </Shell.ToolDock>
 </Shell>
-````
+```
 
-其中 `<Shell.Content />` 采用Grid布局， 其他均为 Flex布局。
+其中 `<Shell.Content />` 采用Grid布局， 其他均为 Flex布局。