diff --git a/src/collapsibleActionItems/__tests__/index.test.tsx b/src/collapsibleActionItems/__tests__/index.test.tsx index 72bc71a18..7b3afe9fe 100644 --- a/src/collapsibleActionItems/__tests__/index.test.tsx +++ b/src/collapsibleActionItems/__tests__/index.test.tsx @@ -37,13 +37,13 @@ describe('test CollapsibleActionItems', () => { }} /> ); - const btns = container.querySelectorAll('.dtc-action-btn-wrapper'); + const btns = container.querySelectorAll('.dtc-collapsibleActionItems__btn'); expect(btns).toHaveLength(3); btns.forEach(testClick); }); test('should render link button when item count more than maxCount', () => { - const { container, getByTestId } = render( + const { container } = render( { dropdownProps={{ trigger: ['click'] }} /> ); - const btns = container.querySelectorAll('.dtc-action-btn-wrapper'); - const dropdownEl = getByTestId('action-dropdown-link'); + const btns = container.querySelectorAll('.dtc-collapsibleActionItems__btn'); + const icon = container.querySelectorAll('.dtc-collapsibleActionItems__icon')[0]; expect(btns).toHaveLength(1); - expect(dropdownEl).toBeInTheDocument(); + expect(icon).toBeInTheDocument(); act(() => { - fireEvent.click(dropdownEl); + fireEvent.click(icon); }); const dropdownMenuItems = container.querySelectorAll( diff --git a/src/collapsibleActionItems/index.tsx b/src/collapsibleActionItems/index.tsx index 971535350..5bb0b561e 100644 --- a/src/collapsibleActionItems/index.tsx +++ b/src/collapsibleActionItems/index.tsx @@ -1,13 +1,15 @@ import React, { ReactNode } from 'react'; import { EllipsisOutlined } from '@ant-design/icons'; import { Button, ButtonProps, Divider, Dropdown, DropDownProps, Menu } from 'antd'; +import classNames from 'classnames'; + +import './style.scss'; type ActionItem = { key: React.Key; name: ReactNode; disabled?: boolean; render?: () => ReactNode; - [propName: string]: any; }; interface ICollapsibleActionItems { @@ -18,6 +20,7 @@ interface ICollapsibleActionItems { collapseIcon?: ReactNode; // 折叠菜单图标 dropdownProps?: Partial; buttonProps?: Partial; + style?: React.CSSProperties; onItemClick?(key: React.Key): void; } @@ -30,6 +33,7 @@ const CollapsibleActionItems: React.FC = (props) => { collapseIcon = , dropdownProps, buttonProps, + style, onItemClick, } = props; const isOverMaxCount = actionItems.length > maxCount; @@ -38,7 +42,7 @@ const CollapsibleActionItems: React.FC = (props) => { if (!isCollapse) return ( !item.disabled && onItemClick?.(item.key)} > @@ -70,7 +74,7 @@ const CollapsibleActionItems: React.FC = (props) => { ) : null; return ( -
+
{displayAction.map((actionItem, index) => { const showDivider = index < actionItems.length - 1; return ( @@ -86,7 +90,7 @@ const CollapsibleActionItems: React.FC = (props) => { getPopupContainer={(triggerNode) => triggerNode.parentElement ?? document.body} {...dropdownProps} > - {collapseIcon} + {collapseIcon} )}
diff --git a/src/collapsibleActionItems/style.scss b/src/collapsibleActionItems/style.scss new file mode 100644 index 000000000..5f23de6d9 --- /dev/null +++ b/src/collapsibleActionItems/style.scss @@ -0,0 +1,7 @@ +$card_prefix: "dtc-collapsibleActionItems"; + +.#{$card_prefix} { + &__icon { + font-size: 16px; + } +}