diff --git a/src/dropdown-menu/DropdownItem.tsx b/src/dropdown-menu/DropdownItem.tsx index a7f0ef797..52f469928 100644 --- a/src/dropdown-menu/DropdownItem.tsx +++ b/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 = (props) => { onReset, footer, keys, + icon, } = useDefaultProps(props, dropdownItemDefaultProps); const { classPrefix } = useConfig(); const dropdownMenuClass = usePrefixClass('dropdown-menu'); @@ -106,6 +110,33 @@ const DropdownItem: React.FC = (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
{parseTNode(selectedIcon)}
; + } + + return direction === 'down' ? ( + + ) : ( + + ); + }; + return ( <>
= (props) => { }} >
{labelText}
- {direction === 'down' ? ( - - ) : ( - - )} + {renderIcon()}
{isActived ? (
; const product = { value: 'all', @@ -47,6 +50,7 @@ export default function DirectionDemo() { setProductValue(value)} /> setSorterValue(value)} /> diff --git a/src/dropdown-menu/defaultProps.ts b/src/dropdown-menu/defaultProps.ts index 4c3fe8a9c..9a38702f7 100644 --- a/src/dropdown-menu/defaultProps.ts +++ b/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, diff --git a/src/dropdown-menu/dropdown-menu.en-US.md b/src/dropdown-menu/dropdown-menu.en-US.md index 8c5fd5e5c..1136946d4 100644 --- a/src/dropdown-menu/dropdown-menu.en-US.md +++ b/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` `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` `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;`。[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;`。[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`
| N -onConfirm | Function | | Typescript:`(value: DropdownValue) => void`
| N -onReset | Function | | Typescript:`(value: DropdownValue) => void`
| N +value | String / Number / Array | undefined | Typescript: `DropdownValue ` `type DropdownValue = string \| number \| Array;`。[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;`。[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`
| N +onConfirm | Function | | Typescript: `(value: DropdownValue) => void`
| N +onReset | Function | | Typescript: `(value: DropdownValue) => void`
| N ### CSS Variables diff --git a/src/dropdown-menu/dropdown-menu.md b/src/dropdown-menu/dropdown-menu.md index aabb1abaa..e18baa04b 100644 --- a/src/dropdown-menu/dropdown-menu.md +++ b/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 diff --git a/src/dropdown-menu/type.ts b/src/dropdown-menu/type.ts index 3dd9ac38e..59bf2dbca 100644 --- a/src/dropdown-menu/type.ts +++ b/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` 中对应的字段别名 */ diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index e24e7ea71..20b98386d 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -52223,20 +52223,30 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/direction.tsx 1 > 全部产品
- - - + + + + + +
csr test src/dropdown-menu/_example/index.tsx 1`] = > 全部产品
- - - + + + + + +
ssr test src/drawer/_example/title.tsx 1`] = `" ssr test src/dropdown-menu/_example/customized.tsx 1`] = `"
三列多选
"`; -exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `"
全部产品
默认排序
"`; +exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `"
全部产品
默认排序
"`; exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/disabled.tsx 1`] = `"
禁用菜单
禁用菜单
"`; -exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `"

DropdownMenu 下拉菜单

菜单呈现数个并列的选项类目,用于整个页面的内容筛选,由菜单面板和菜单选项组成。

01 组件类型

单选下拉菜单

全部产品
默认排序

分栏下拉菜单

单列多选
双列多选
三列多选

向上展开

全部产品
默认排序

02 组件状态

禁用状态

禁用菜单
禁用菜单

插槽样式

三列多选
"`; +exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `"

DropdownMenu 下拉菜单

菜单呈现数个并列的选项类目,用于整个页面的内容筛选,由菜单面板和菜单选项组成。

01 组件类型

单选下拉菜单

全部产品
默认排序

分栏下拉菜单

单列多选
双列多选
三列多选

向上展开

全部产品
默认排序

02 组件状态

禁用状态

禁用菜单
禁用菜单

插槽样式

三列多选
"`; exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/multiple.tsx 1`] = `"
单列多选
双列多选
三列多选
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index ae183ebb1..bac529d77 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -212,11 +212,11 @@ exports[`ssr snapshot test > ssr test src/drawer/_example/title.tsx 1`] = `" ssr test src/dropdown-menu/_example/customized.tsx 1`] = `"
三列多选
"`; -exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `"
全部产品
默认排序
"`; +exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `"
全部产品
默认排序
"`; exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/disabled.tsx 1`] = `"
禁用菜单
禁用菜单
"`; -exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `"

DropdownMenu 下拉菜单

菜单呈现数个并列的选项类目,用于整个页面的内容筛选,由菜单面板和菜单选项组成。

01 组件类型

单选下拉菜单

全部产品
默认排序

分栏下拉菜单

单列多选
双列多选
三列多选

向上展开

全部产品
默认排序

02 组件状态

禁用状态

禁用菜单
禁用菜单

插槽样式

三列多选
"`; +exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `"

DropdownMenu 下拉菜单

菜单呈现数个并列的选项类目,用于整个页面的内容筛选,由菜单面板和菜单选项组成。

01 组件类型

单选下拉菜单

全部产品
默认排序

分栏下拉菜单

单列多选
双列多选
三列多选

向上展开

全部产品
默认排序

02 组件状态

禁用状态

禁用菜单
禁用菜单

插槽样式

三列多选
"`; exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/multiple.tsx 1`] = `"
单列多选
双列多选
三列多选
"`;