Skip to content

Commit bbcd4f0

Browse files
zhangminggeekzhangminggeek
committed
feat(menu): menu-item 组件增加标题icon自定义方式
1 parent 96eb279 commit bbcd4f0

File tree

8 files changed

+74
-28
lines changed

8 files changed

+74
-28
lines changed

‎src/packages/menu/demos/h5/demo6.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react'
22
import { Menu } from '@nutui/nutui-react'
3-
import { ArrowDown, Star } from '@nutui/icons-react'
3+
import { ArrowDown, Star, Filter } from '@nutui/icons-react'
44

55
const Demo6 = () => {
66
const [options] = useState([
@@ -15,7 +15,12 @@ const Demo6 = () => {
1515
])
1616
return (
1717
<Menu icon={<ArrowDown />}>
18-
<Menu.Item options={options} defaultValue={0} icon={<Star />} />
18+
<Menu.Item
19+
options={options}
20+
defaultValue={0}
21+
icon={<Star />}
22+
titleIcon={<Filter />}
23+
/>
1924
<Menu.Item options={options1} defaultValue="a" />
2025
</Menu>
2126
)

‎src/packages/menu/demos/taro/demo6.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react'
22
import { Menu } from '@nutui/nutui-react-taro'
3-
import { ArrowDown, Star } from '@nutui/icons-react-taro'
3+
import { ArrowDown, Star, Filter } from '@nutui/icons-react-taro'
44

55
const Demo6 = () => {
66
const [options] = useState([
@@ -15,7 +15,12 @@ const Demo6 = () => {
1515
])
1616
return (
1717
<Menu icon={<ArrowDown />}>
18-
<Menu.Item options={options} defaultValue={0} icon={<Star />} />
18+
<Menu.Item
19+
options={options}
20+
defaultValue={0}
21+
icon={<Star />}
22+
titleIcon={<Filter />}
23+
/>
1924
<Menu.Item options={options1} defaultValue="a" />
2025
</Menu>
2126
)

‎src/packages/menu/doc.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ import { Menu } from '@nutui/nutui-react'
9797
| 属性 | 说明 | 类型 | 默认值 |
9898
| --- | --- | --- | --- |
9999
| title | 菜单项标题 | `string` | `当前选中项文字` |
100+
| titleIcon | 菜单项 icon | `React.ReactNode` | `ArrowUp/ArrowDown` |
100101
| options | 选项数组 | `array` | `-` |
101102
| disabled | 是否禁用菜单 | `boolean` | `false` |
102103
| columns | 可以设置一行展示多少列 options | `number` | `1` |

‎src/packages/menu/doc.taro.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ import { Menu } from '@nutui/nutui-react-taro'
9797
| 属性 | 说明 | 类型 | 默认值 |
9898
| --- | --- | --- | --- |
9999
| title | 菜单项标题 | `string` | `当前选中项文字` |
100+
| titleIcon | 菜单项 icon | `React.ReactNode` | `ArrowUp/ArrowDown` |
100101
| options | 选项数组 | `array` | `-` |
101102
| disabled | 是否禁用菜单 | `boolean` | `false` |
102103
| columns | 可以设置一行展示多少列 options | `number` | `1` |

‎src/packages/menu/menu.taro.tsx‎

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,15 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
120120
const menuTitle = () => {
121121
return React.Children.map(children, (child, index) => {
122122
if (React.isValidElement(child)) {
123-
const { title, options, value, defaultValue, disabled, direction } =
124-
child.props
123+
const {
124+
title,
125+
titleIcon,
126+
options,
127+
value,
128+
defaultValue,
129+
disabled,
130+
direction,
131+
} = child.props
125132
const selected = options?.filter(
126133
(option: OptionItem) =>
127134
option.value === (value !== undefined ? value : defaultValue)
@@ -133,6 +140,23 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
133140
return selected[0].text
134141
return ''
135142
}
143+
const finallyIcon = () => {
144+
if (titleIcon) return titleIcon
145+
if (icon) return icon
146+
return direction === 'up' ? (
147+
<ArrowUp
148+
className="nut-menu-title-icon"
149+
width="12px"
150+
height="12px"
151+
/>
152+
) : (
153+
<ArrowDown
154+
className="nut-menu-title-icon"
155+
width="12px"
156+
height="12px"
157+
/>
158+
)
159+
}
136160
return (
137161
<div
138162
className={classNames('nut-menu-title', `nut-menu-title-${index}`, {
@@ -147,12 +171,7 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
147171
}}
148172
>
149173
<div className="nut-menu-title-text">{finallyTitle()}</div>
150-
{icon ||
151-
(direction === 'up' ? (
152-
<ArrowUp className="nut-menu-title-icon" size="12px" />
153-
) : (
154-
<ArrowDown className="nut-menu-title-icon" size="12px" />
155-
))}
174+
{finallyIcon()}
156175
</div>
157176
)
158177
}

‎src/packages/menu/menu.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,15 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
120120
const menuTitle = () => {
121121
return React.Children.map(children, (child, index) => {
122122
if (React.isValidElement(child)) {
123-
const { title, options, value, defaultValue, disabled, direction } =
124-
child.props
123+
const {
124+
title,
125+
titleIcon,
126+
options,
127+
value,
128+
defaultValue,
129+
disabled,
130+
direction,
131+
} = child.props
125132
const selected = options?.filter(
126133
(option: OptionItem) =>
127134
option.value === (value !== undefined ? value : defaultValue)
@@ -133,6 +140,23 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
133140
return selected[0].text
134141
return ''
135142
}
143+
const finallyIcon = () => {
144+
if (titleIcon) return titleIcon
145+
if (icon) return icon
146+
return direction === 'up' ? (
147+
<ArrowUp
148+
className="nut-menu-title-icon"
149+
width="12px"
150+
height="12px"
151+
/>
152+
) : (
153+
<ArrowDown
154+
className="nut-menu-title-icon"
155+
width="12px"
156+
height="12px"
157+
/>
158+
)
159+
}
136160
return (
137161
<div
138162
className={classNames('nut-menu-title', `nut-menu-title-${index}`, {
@@ -148,20 +172,7 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
148172
}}
149173
>
150174
<div className="nut-menu-title-text">{finallyTitle()}</div>
151-
{icon ||
152-
(direction === 'up' ? (
153-
<ArrowUp
154-
className="nut-menu-title-icon"
155-
width="12px"
156-
height="12px"
157-
/>
158-
) : (
159-
<ArrowDown
160-
className="nut-menu-title-icon"
161-
width="12px"
162-
height="12px"
163-
/>
164-
))}
175+
{finallyIcon()}
165176
</div>
166177
)
167178
}

‎src/packages/menuitem/menuitem.taro.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export interface OptionItem {
2424

2525
export interface MenuItemProps extends BasicComponent {
2626
title: React.ReactNode
27+
titleIcon: React.ReactNode
2728
options: OptionItem[]
2829
disabled: boolean
2930
columns: number
@@ -40,6 +41,7 @@ export interface MenuItemProps extends BasicComponent {
4041

4142
const defaultProps = {
4243
...ComponentDefaults,
44+
titleIcon: null,
4345
columns: 1,
4446
direction: 'down',
4547
icon: null,

‎src/packages/menuitem/menuitem.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export interface OptionItem {
2323

2424
export interface MenuItemProps extends BasicComponent {
2525
title: React.ReactNode
26+
titleIcon: React.ReactNode
2627
options: OptionItem[]
2728
disabled: boolean
2829
columns: number
@@ -39,6 +40,7 @@ export interface MenuItemProps extends BasicComponent {
3940

4041
const defaultProps = {
4142
...ComponentDefaults,
43+
titleIcon: null,
4244
columns: 1,
4345
direction: 'down',
4446
icon: null,

0 commit comments

Comments
 (0)