feat(menu): menu-item 组件增加标题icon自定义方式 (#2488)

* feat(menu): menu-item 组件增加标题icon自定义方式 * docs: 补充 --------- Co-authored-by: huxiyang <[email protected]>
jdf2e · Aug 2, 2024 · 123595a · 123595a
1 parent 4c20ed7
commit 123595a
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 28 deletions.
diff --git a/src/packages/menu/demos/h5/demo6.tsx b/src/packages/menu/demos/h5/demo6.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Menu } from '@nutui/nutui-react'
-import { ArrowDown, Star } from '@nutui/icons-react'
+import { ArrowDown, Star, Filter } from '@nutui/icons-react'
 
 const Demo6 = () => {
   const [options] = useState([
@@ -15,7 +15,12 @@ const Demo6 = () => {
   ])
   return (
     <Menu icon={<ArrowDown />}>
-      <Menu.Item options={options} defaultValue={0} icon={<Star />} />
+      <Menu.Item
+        options={options}
+        defaultValue={0}
+        icon={<Star />}
+        titleIcon={<Filter />}
+      />
       <Menu.Item options={options1} defaultValue="a" />
     </Menu>
   )

diff --git a/src/packages/menu/demos/taro/demo6.tsx b/src/packages/menu/demos/taro/demo6.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Menu } from '@nutui/nutui-react-taro'
-import { ArrowDown, Star } from '@nutui/icons-react-taro'
+import { ArrowDown, Star, Filter } from '@nutui/icons-react-taro'
 
 const Demo6 = () => {
   const [options] = useState([
@@ -15,7 +15,12 @@ const Demo6 = () => {
   ])
   return (
     <Menu icon={<ArrowDown />}>
-      <Menu.Item options={options} defaultValue={0} icon={<Star />} />
+      <Menu.Item
+        options={options}
+        defaultValue={0}
+        icon={<Star />}
+        titleIcon={<Filter />}
+      />
       <Menu.Item options={options1} defaultValue="a" />
     </Menu>
   )

diff --git a/src/packages/menu/doc.en-US.md b/src/packages/menu/doc.en-US.md
@@ -97,6 +97,7 @@ Popup can be closed with toggle method in menu instance.
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | title | Item title | `string` | `Current selected value` |
+| titleIcon | menu item icon | `React.ReactNode` | `ArrowUp/ArrowDown` |
 | options | Options | `Array` | `-` |
 | disabled | Whether to disable dropdown item | `boolean` | `false` |
 | columns | Display how many options in one line | `number` | `1` |

diff --git a/src/packages/menu/doc.md b/src/packages/menu/doc.md
@@ -97,6 +97,7 @@ import { Menu } from '@nutui/nutui-react'
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | title | 菜单项标题 | `string` | `当前选中项文字` |
+| titleIcon | 菜单项 icon | `React.ReactNode` | `ArrowUp/ArrowDown` |
 | options | 选项数组 | `array` | `-` |
 | disabled | 是否禁用菜单 | `boolean` | `false` |
 | columns | 可以设置一行展示多少列 options | `number` | `1` |

diff --git a/src/packages/menu/doc.taro.md b/src/packages/menu/doc.taro.md
@@ -97,6 +97,7 @@ import { Menu } from '@nutui/nutui-react-taro'
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | title | 菜单项标题 | `string` | `当前选中项文字` |
+| titleIcon | 菜单项 icon | `React.ReactNode` | `ArrowUp/ArrowDown` |
 | options | 选项数组 | `array` | `-` |
 | disabled | 是否禁用菜单 | `boolean` | `false` |
 | columns | 可以设置一行展示多少列 options | `number` | `1` |

diff --git a/src/packages/menu/doc.zh-TW.md b/src/packages/menu/doc.zh-TW.md
@@ -97,6 +97,7 @@ import { Menu } from '@nutui/nutui-react'
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
 | title | 菜單項標題 | `string` | `當前選中項文字` |
+| titleIcon | 菜單項 icon | `React.ReactNode` | `ArrowUp/ArrowDown` |
 | options | 選項數組 | `array` | `-` |
 | disabled | 是否禁用菜單 | `boolean` | `false` |
 | columns | 可以設置一行展示多少列 options | `number` | `1` |

diff --git a/src/packages/menu/menu.taro.tsx b/src/packages/menu/menu.taro.tsx
@@ -120,8 +120,15 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
   const menuTitle = () => {
     return React.Children.map(children, (child, index) => {
       if (React.isValidElement(child)) {
-        const { title, options, value, defaultValue, disabled, direction } =
-          child.props
+        const {
+          title,
+          titleIcon,
+          options,
+          value,
+          defaultValue,
+          disabled,
+          direction,
+        } = child.props
         const selected = options?.filter(
           (option: OptionItem) =>
             option.value === (value !== undefined ? value : defaultValue)
@@ -133,6 +140,23 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
             return selected[0].text
           return ''
         }
+        const finallyIcon = () => {
+          if (titleIcon) return titleIcon
+          if (icon) return icon
+          return direction === 'up' ? (
+            <ArrowUp
+              className="nut-menu-title-icon"
+              width="12px"
+              height="12px"
+            />
+          ) : (
+            <ArrowDown
+              className="nut-menu-title-icon"
+              width="12px"
+              height="12px"
+            />
+          )
+        }
         return (
           <div
             className={classNames('nut-menu-title', `nut-menu-title-${index}`, {
@@ -147,12 +171,7 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
             }}
           >
             <div className="nut-menu-title-text">{finallyTitle()}</div>
-            {icon ||
-              (direction === 'up' ? (
-                <ArrowUp className="nut-menu-title-icon" size="12px" />
-              ) : (
-                <ArrowDown className="nut-menu-title-icon" size="12px" />
-              ))}
+            {finallyIcon()}
           </div>
         )
       }

diff --git a/src/packages/menu/menu.tsx b/src/packages/menu/menu.tsx
@@ -120,8 +120,15 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
   const menuTitle = () => {
     return React.Children.map(children, (child, index) => {
       if (React.isValidElement(child)) {
-        const { title, options, value, defaultValue, disabled, direction } =
-          child.props
+        const {
+          title,
+          titleIcon,
+          options,
+          value,
+          defaultValue,
+          disabled,
+          direction,
+        } = child.props
         const selected = options?.filter(
           (option: OptionItem) =>
             option.value === (value !== undefined ? value : defaultValue)
@@ -133,6 +140,23 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
             return selected[0].text
           return ''
         }
+        const finallyIcon = () => {
+          if (titleIcon) return titleIcon
+          if (icon) return icon
+          return direction === 'up' ? (
+            <ArrowUp
+              className="nut-menu-title-icon"
+              width="12px"
+              height="12px"
+            />
+          ) : (
+            <ArrowDown
+              className="nut-menu-title-icon"
+              width="12px"
+              height="12px"
+            />
+          )
+        }
         return (
           <div
             className={classNames('nut-menu-title', `nut-menu-title-${index}`, {
@@ -148,20 +172,7 @@ export const Menu: FunctionComponent<Partial<MenuProps>> & {
             }}
           >
             <div className="nut-menu-title-text">{finallyTitle()}</div>
-            {icon ||
-              (direction === 'up' ? (
-                <ArrowUp
-                  className="nut-menu-title-icon"
-                  width="12px"
-                  height="12px"
-                />
-              ) : (
-                <ArrowDown
-                  className="nut-menu-title-icon"
-                  width="12px"
-                  height="12px"
-                />
-              ))}
+            {finallyIcon()}
           </div>
         )
       }

diff --git a/src/packages/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx
@@ -24,6 +24,7 @@ export interface OptionItem {
 
 export interface MenuItemProps extends BasicComponent {
   title: React.ReactNode
+  titleIcon: React.ReactNode
   options: OptionItem[]
   disabled: boolean
   columns: number
@@ -40,6 +41,7 @@ export interface MenuItemProps extends BasicComponent {
 
 const defaultProps = {
   ...ComponentDefaults,
+  titleIcon: null,
   columns: 1,
   direction: 'down',
   icon: null,

diff --git a/src/packages/menuitem/menuitem.tsx b/src/packages/menuitem/menuitem.tsx
@@ -23,6 +23,7 @@ export interface OptionItem {
 
 export interface MenuItemProps extends BasicComponent {
   title: React.ReactNode
+  titleIcon: React.ReactNode
   options: OptionItem[]
   disabled: boolean
   columns: number
@@ -39,6 +40,7 @@ export interface MenuItemProps extends BasicComponent {
 
 const defaultProps = {
   ...ComponentDefaults,
+  titleIcon: null,
   columns: 1,
   direction: 'down',
   icon: null,