Skip to content

Commit

Permalink
feat(nav): add nav component (#383)
Browse files Browse the repository at this point in the history 
* feat(nav): add nav component
---------

Co-authored-by: junan <junan.wang@ucloud.cn>
Co-authored-by: whilefor <469676693@qq.com>
  • Loading branch information
@nasnan @whilefor
3 people committed Dec 21, 2023
1 parent f3de653 commit 0fa2583
Show file tree
Hide file tree
Showing 22 changed files with 7,359 additions and 0 deletions.
7 changes: 7 additions & 0 deletions .recodo/data/Nav.doc.json
View file
@@ -0,0 +1,7 @@
{
"Nav": {
"path": "Nav/Nav.md",
"name": "Nav",
"info": "### 说明\n\n这是 Nav 基础导航\n\n### 演示\n\n#### 只有一级目录\n\n```js {\"codepath\": \"one-level.jsx\"}\n```\n\n#### 一/二级目录 + 切换应用 + 分类标题 + 路由跳转\n\n```js {\"codepath\": \"all-comp.jsx\"}\n```\n\n#### 受控模式\n\n```js {\"codepath\": \"default-open-keys.jsx\"}\n```\n\n#### 垂直展开 + 路由跳转\n\nmode 为 vertical 的垂直展开模式，labelType 为 small 的小标题还是向下展开，其余正常大小的标题垂直展开\n\n结合 react-router 使用时可以用 subMenuItemRender 和 menuItemRender 方法\n\n```js {\"codepath\": \"vertical.jsx\"}\n```\n\n#### 折叠目录\n\n折叠目录时，labelType 为 small 的小标题与正常标题显示相同，如果没有 Icon，会显示标题的第一个字\n\n```js {\"codepath\": \"collapsed.jsx\"}\n```\n\n#### ItemType\n\ntype ItemType = MenuItemType | SubMenuType\n\n##### MenuItemType\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | -------- | ------------------- | ------ |\n| icon | 菜单图标 | React.ReactNode | |\n| title | 标题 | string | |\n| labelType | 标题类型 | 'normal' ｜ 'small' | normal |\n| key | 唯一标识 | string | |\n\n##### SubMenuType\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --------- | -------- | ------------------- | ------ |\n| icon | 菜单图标 | React.ReactNode | |\n| title | 标题 | string | |\n| labelType | 标题类型 | 'normal' ｜ 'small' | normal |\n| key | 唯一标识 | string | |\n| children | 子菜单项 | ItemType[] | |\n"
}
}
205 changes: 205 additions & 0 deletions .recodo/data/Nav.info.json
View file
@@ -0,0 +1,205 @@
{
"Nav": {
"path": "Nav/Nav.tsx",
"name": "Nav",
"info": {
"description": "",
"displayName": "Nav",
"methods": [],
"props": {
"mode": {
"required": false,
"tsType": {
"name": "union",
"raw": "'vertical' | 'inline'",
"elements": [
{ "name": "literal", "value": "'vertical'" },
{ "name": "literal", "value": "'inline'" }
]
},
"description": { "description": "菜单类型，垂直或内嵌，默认内嵌", "tags": [] },
"defaultValue": { "value": "'inline'", "computed": false }
},
"items": {
"required": false,
"tsType": { "name": "Array", "elements": [{ "name": "ItemType" }], "raw": "ItemType[]" },
"description": { "description": "菜单项", "tags": [] }
},
"inlineCollapsed": {
"required": false,
"tsType": { "name": "boolean" },
"description": { "description": "inline 时菜单是否收起状态", "tags": [] }
},
"inlineIndent": {
"required": false,
"tsType": { "name": "number" },
"description": { "description": "每一级缩进量", "tags": [] },
"defaultValue": { "value": "32", "computed": false }
},
"defaultOpenKeys": {
"required": false,
"tsType": { "name": "Array", "elements": [{ "name": "string" }], "raw": "string[]" },
"description": { "description": "初始展开的 SubMenu 菜单项 key 数组", "tags": [] }
},
"defaultSelectedKeys": {
"required": false,
"tsType": { "name": "Array", "elements": [{ "name": "string" }], "raw": "string[]" },
"description": { "description": "初始选中的菜单项 key 数组", "tags": [] }
},
"onOpenChange": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(openKeys: string[]) => void",
"signature": {
"arguments": [
{
"name": "openKeys",
"type": { "name": "Array", "elements": [{ "name": "string" }], "raw": "string[]" }
}
],
"return": { "name": "void" }
}
},
"description": { "description": "SubMenu 展开/关闭的回调", "tags": [] }
},
"subMenuItemRender": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(itemProps: SubMenuProps, dom: JSX.Element) => JSX.Element",
"signature": {
"arguments": [
{ "name": "itemProps", "type": { "name": "SubMenuProps" } },
{ "name": "dom", "type": { "name": "JSX.Element" } }
],
"return": { "name": "JSX.Element" }
}
},
"description": { "description": "自定义 SubMenu render，可以获取 items 参数传入的数据", "tags": [] }
},
"menuItemRender": {
"required": false,
"tsType": {
"name": "signature",
"type": "function",
"raw": "(itemProps: NavItemProps, dom: JSX.Element) => JSX.Element",
"signature": {
"arguments": [
{ "name": "itemProps", "type": { "name": "NavItemProps" } },
{ "name": "dom", "type": { "name": "JSX.Element" } }
],
"return": { "name": "JSX.Element" }
}
},
"description": {
"description": "自定义 MenuItem render，可以获取 items 参数传入的数据",
"tags": []
}
}
},
"composes": ["Omit"]
}
},
"NavItem": {
"path": "Nav/NavItem.tsx",
"name": "NavItem",
"info": {
"description": "",
"displayName": "NavItem",
"methods": [
{ "name": "renderItemChildren", "docblock": null, "modifiers": [], "params": [], "returns": null },
{
"name": "renderIcon",
"docblock": null,
"modifiers": [],
"params": [
{ "name": "icon", "type": { "name": "ReactReactElement", "raw": "React.ReactElement" } }
],
"returns": null
},
{
"name": "renderItem",
"docblock": null,
"modifiers": [],
"params": [
{ "name": "contextProps", "type": { "name": "NavContextProps", "alias": "NavContextProps" } }
],
"returns": null
},
{
"name": "renderPopverMenu",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "items",
"type": {
"name": "Array",
"elements": [{ "name": "unknown" }],
"raw": "(ItemType | ItemType[])[]"
}
},
{
"name": "subMenuItemRender",
"optional": true,
"type": {
"name": "signature",
"type": "function",
"raw": "(itemProps: SubMenuProps, dom: JSX.Element) => React.ReactNode",
"signature": {
"arguments": [
{ "name": "itemProps", "type": { "name": "SubMenuProps" } },
{ "name": "dom", "type": { "name": "JSX.Element" } }
],
"return": { "name": "ReactReactNode", "raw": "React.ReactNode" }
}
}
},
{
"name": "menuItemRender",
"optional": true,
"type": {
"name": "signature",
"type": "function",
"raw": "(itemProps: NavItemProps, dom: JSX.Element) => React.ReactNode",
"signature": {
"arguments": [
{ "name": "itemProps", "type": { "name": "NavItemProps" } },
{ "name": "dom", "type": { "name": "JSX.Element" } }
],
"return": { "name": "ReactReactNode", "raw": "React.ReactNode" }
}
}
}
],
"returns": null
},
{
"name": "renderVerticalItem",
"docblock": null,
"modifiers": [],
"params": [
{
"name": "{\n inlineCollapsed,\n selectedKeys,\n subMenuItemRender,\n menuItemRender\n}: Partial<NavContextProps>",
"type": {
"name": "Partial",
"elements": [{ "name": "NavContextProps" }],
"raw": "Partial<NavContextProps>",
"alias": "Partial"
}
}
],
"returns": null
}
]
}
},
"SubMenu": {
"path": "Nav/SubMenu.tsx",
"name": "SubMenu",
"info": { "description": "", "displayName": "SubMenu", "methods": [] }
}
}
2 changes: 2 additions & 0 deletions .recodo/data/index.js
View file
Expand Up @@ -26,6 +26,7 @@ const infoMap = {
Pagination: require('./Pagination.info.json'),
NumberInput: require('./NumberInput.info.json'),
Notice: require('./Notice.info.json'),
Nav: require('./Nav.info.json'),
Modal: require('./Modal.info.json'),
Message: require('./Message.info.json'),
Menu: require('./Menu.info.json'),
Expand Down Expand Up @@ -84,6 +85,7 @@ const docMap = {
Pagination: require('./Pagination.doc.json'),
NumberInput: require('./NumberInput.doc.json'),
Notice: require('./Notice.doc.json'),
Nav: require('./Nav.doc.json'),
Modal: require('./Modal.doc.json'),
Message: require('./Message.doc.json'),
Menu: require('./Menu.doc.json'),
Expand Down
4 changes: 4 additions & 0 deletions .styleguide/components.js
View file
Expand Up @@ -121,6 +121,10 @@ module.exports = [
},
{
name: 'EditableList'
},
{
name: 'Nav',
components: ['Nav']
}
]
},
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Expand Up @@ -73,6 +73,7 @@
"rc-animate": "2",
"rc-dialog": "7.7.0",
"rc-form": "2.4.12",
"rc-menu": "^9.11.1",
"rc-progress": "^3.4.2",
"rc-slider": "8.6.13",
"rc-util": "4.21.1",
Expand Down
59 changes: 59 additions & 0 deletions src/components/Nav/Nav.md
View file
@@ -0,0 +1,59 @@
### 说明

这是 Nav 基础导航

### 演示

#### 只有一级目录

```js {"codepath": "one-level.jsx"}
```

#### 一/二级目录 + 切换应用 + 分类标题 + 路由跳转

```js {"codepath": "all-comp.jsx"}
```

#### 受控模式

```js {"codepath": "default-open-keys.jsx"}
```

#### 垂直展开 + 路由跳转

mode 为 vertical 的垂直展开模式，labelType 为 small 的小标题还是向下展开，其余正常大小的标题垂直展开

结合 react-router 使用时可以用 subMenuItemRender 和 menuItemRender 方法

```js {"codepath": "vertical.jsx"}
```

#### 折叠目录

折叠目录时，labelType 为 small 的小标题与正常标题显示相同，如果没有 Icon，会显示标题的第一个字

```js {"codepath": "collapsed.jsx"}
```

#### ItemType

type ItemType = MenuItemType | SubMenuType

##### MenuItemType

| 参数 | 说明 | 类型 | 默认值 |
| --------- | -------- | ------------------- | ------ |
| icon | 菜单图标 | React.ReactNode | |
| title | 标题 | string | |
| labelType | 标题类型 | 'normal' ｜ 'small' | normal |
| key | 唯一标识 | string | |

##### SubMenuType

| 参数 | 说明 | 类型 | 默认值 |
| --------- | -------- | ------------------- | ------ |
| icon | 菜单图标 | React.ReactNode | |
| title | 标题 | string | |
| labelType | 标题类型 | 'normal' ｜ 'small' | normal |
| key | 唯一标识 | string | |
| children | 子菜单项 | ItemType[] | |

0 comments on commit 0fa2583

Please sign in to comment.