feat(DropdownItem): support icon prop

src/dropdown-menu/DropdownItem.tsx

@@ -3,7 +3,10 @@ import cx from 'classnames';
 import uniqueId from 'lodash-es/uniqueId';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { CaretDownSmallIcon, CaretUpSmallIcon } from 'tdesign-icons-react';
-import { Button, Checkbox, Popup, RadioGroup } from 'tdesign-mobile-react';
+import Button from '../button';
+import Checkbox from '../checkbox';
+import Popup from '../popup';
+import { RadioGroup } from '../radio';
 import useDefault from '../_util/useDefault';
 import parseTNode from '../_util/parseTNode';
 import CheckboxGroup from '../checkbox/CheckboxGroup';
@@ -37,6 +40,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
     onReset,
     footer,
     keys,
+    icon,
   } = useDefaultProps<DropdownItemProps>(props, dropdownItemDefaultProps);
   const { classPrefix } = useConfig();
   const dropdownMenuClass = usePrefixClass('dropdown-menu');
@@ -106,6 +110,33 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
 
   const attach = useCallback(() => itemRef.current || document.body, []);
 
+  const renderIcon = () => {
+    const iconClass = cx(`${dropdownMenuClass}__icon`, {
+      [`${dropdownMenuClass}__icon--active`]: isActived,
+    });
+
+    // 使用自定义图标
+    if (icon) {
+      const isArray = Array.isArray(icon);
+      const isTwoIcons = isArray && icon.length === 2;
+
+      let selectedIcon: DropdownItemProps['icon'];
+      if (isTwoIcons) {
+        selectedIcon = isActived ? icon[0] : icon[1];
+      } else {
+        selectedIcon = isArray ? icon[0] : icon;
+      }
+
+      return <div className={iconClass}>{parseTNode(selectedIcon)}</div>;
+    }
+
+    return direction === 'down' ? (
+      <CaretDownSmallIcon className={iconClass} />
+    ) : (
+      <CaretUpSmallIcon className={iconClass} />
+    );
+  };
+
   return (
     <>
       <div
@@ -125,19 +156,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
         }}
       >
         <div className={`${dropdownMenuClass}__title`}>{labelText}</div>
-        {direction === 'down' ? (
-          <CaretDownSmallIcon
-            className={cx(`${dropdownMenuClass}__icon`, {
-              [`${dropdownMenuClass}__icon--active`]: isActived,
-            })}
-          />
-        ) : (
-          <CaretUpSmallIcon
-            className={cx(`${dropdownMenuClass}__icon`, {
-              [`${dropdownMenuClass}__icon--active`]: isActived,
-            })}
-          />
-        )}
+        {renderIcon()}
       </div>
       {isActived ? (
         <div

src/dropdown-menu/_example/direction.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { DropdownItem, DropdownMenu } from 'tdesign-mobile-react';
+import { ChevronDownIcon } from 'tdesign-icons-react';
+
+const icons = <ChevronDownIcon size="24px" />;
 
 const product = {
   value: 'all',
@@ -47,6 +50,7 @@ export default function DirectionDemo() {
       <DropdownItem
         options={product.options}
         value={productValue}
+        icon={icons}
         onChange={(value: string) => setProductValue(value)}
       />
       <DropdownItem options={sorter.options} value={sorterValue} onChange={(value: string) => setSorterValue(value)} />

src/dropdown-menu/defaultProps.ts

@@ -14,6 +14,7 @@ export const dropdownMenuDefaultProps: TdDropdownMenuProps = {
 
 export const dropdownItemDefaultProps: TdDropdownItemProps = {
   disabled: false,
+  icon: undefined,
   multiple: false,
   options: [],
   optionsColumns: 1,

src/dropdown-menu/dropdown-menu.en-US.md

@@ -7,7 +7,7 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
-style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
 closeOnClickOverlay | Boolean | true | \- | N
 direction | String | down | options: down/up | N
 duration | String / Number | 200 | \- | N
@@ -20,20 +20,21 @@ zIndex | Number | 11600 | \- | N
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
-style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
 disabled | Boolean | false | \- | N
-footer | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+footer | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TNode | undefined | Typescript: `TNode \| TNode[] \| undefined`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 label | String | - | \- | N
 multiple | Boolean | false | \- | N
-options | Array | [] | Typescript：`Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
+options | Array | [] | Typescript: `Array<DropdownOption>` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
 optionsColumns | String / Number | 1 | \- | N
 placement | String | left | options: left/right | N
-value | String / Number / Array | undefined | Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
-defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript：`DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
-onChange | Function |  | Typescript：`(value: DropdownValue) => void`<br/> | N
-onConfirm | Function |  | Typescript：`(value: DropdownValue) => void`<br/> | N
-onReset | Function |  | Typescript：`(value: DropdownValue) => void`<br/> | N
+value | String / Number / Array | undefined | Typescript: `DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
+defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript: `DropdownValue ` `type DropdownValue = string \| number \| Array<DropdownValue>;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dropdown-menu/type.ts) | N
+onChange | Function |  | Typescript: `(value: DropdownValue) => void`<br/> | N
+onConfirm | Function |  | Typescript: `(value: DropdownValue) => void`<br/> | N
+onReset | Function |  | Typescript: `(value: DropdownValue) => void`<br/> | N
 
 ### CSS Variables
 

src/dropdown-menu/dropdown-menu.md

@@ -23,6 +23,7 @@ className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 disabled | Boolean | false | 是否禁用操作项 | N
 footer | TElement | - | 底部。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+icon | TNode | undefined | 自定义菜单子项图标，值为 `undefined` 表示使用默认图标。[面板打开时的图标，面板关闭时的图标]。TS 类型：`TNode \| TNode[] \| undefined`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 label | String | - | 标题 | N
 multiple | Boolean | false | 是否多选 | N

src/dropdown-menu/type.ts

@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TElement, KeysType } from '../common';
+import { TNode, TElement, KeysType } from '../common';
 
 export interface TdDropdownMenuProps {
   /**
@@ -44,6 +44,10 @@ export interface TdDropdownItemProps {
    * 底部
    */
   footer?: TElement;
+  /**
+   * 自定义菜单子项图标，值为 `undefined` 表示使用默认图标。[面板打开时的图标，面板关闭时的图标]
+   */
+  icon?: TNode | TNode[] | undefined;
   /**
    * 用来定义 value / label / disabled 在 `options` 中对应的字段别名
    */