From 14e6ccca0141915cbdedf896011ef2c14c9ca8da Mon Sep 17 00:00:00 2001 From: Katherine Date: Sun, 27 Apr 2025 19:51:10 +0800 Subject: [PATCH] refactor: show button title with tooltip on action icon hover (#6761) * refactor: show button title with tooltip on action icon hover * fix: test * fix: style improve * fix: filter action should onlyicon * fix: test * fix: test * style: link action style improve --- .../actions/filter/filterActionSettings.tsx | 21 +++++++++++++++++- .../antd/action/Action.Link.tsx | 2 +- .../schema-component/antd/action/Action.tsx | 22 +++++++++++++++++-- .../antd/action/__tests__/action.test.tsx | 3 --- .../src/schema-component/antd/action/types.ts | 1 + .../antd/filter/FilterAction.tsx | 5 ++--- .../schema-component/antd/table-v2/Table.tsx | 3 ++- 7 files changed, 46 insertions(+), 11 deletions(-) diff --git a/packages/core/client/src/modules/actions/filter/filterActionSettings.tsx b/packages/core/client/src/modules/actions/filter/filterActionSettings.tsx index 30e1197f13..542497f2d4 100644 --- a/packages/core/client/src/modules/actions/filter/filterActionSettings.tsx +++ b/packages/core/client/src/modules/actions/filter/filterActionSettings.tsx @@ -53,14 +53,33 @@ export const filterActionSettings = new SchemaSettings({ default: fieldSchema?.['x-component-props']?.icon, 'x-component-props': {}, }, + onlyIcon: { + 'x-decorator': 'FormItem', + 'x-component': 'Checkbox', + title: t('Icon only'), + default: fieldSchema?.['x-component-props']?.onlyIcon, + 'x-component-props': {}, + 'x-reactions': [ + { + dependencies: ['icon'], + fulfill: { + state: { + hidden: '{{!$deps[0]}}', + }, + }, + }, + ], + }, }, } as ISchema, - onSubmit: ({ title, icon }) => { + onSubmit: ({ title, icon, onlyIcon }) => { fieldSchema.title = title; field.title = title; field.componentProps.icon = icon; + field.componentProps.onlyIcon = onlyIcon; fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {}; fieldSchema['x-component-props'].icon = icon; + fieldSchema['x-component-props'].onlyIcon = onlyIcon; dn.emit('patch', { schema: { ['x-uid']: fieldSchema['x-uid'], diff --git a/packages/core/client/src/schema-component/antd/action/Action.Link.tsx b/packages/core/client/src/schema-component/antd/action/Action.Link.tsx index 3dcb0b6a89..b85cfb2549 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Link.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.Link.tsx @@ -35,7 +35,7 @@ export const ActionLink: ComposedAction = withDynamicSchemaProps( return ( diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx index 2db0123766..b41b765ed1 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.tsx @@ -10,7 +10,7 @@ import { Field } from '@formily/core'; import { observer, Schema, useField, useFieldSchema, useForm } from '@formily/react'; import { isPortalInBody } from '@nocobase/utils/client'; -import { App, Button } from 'antd'; +import { App, Button, Tooltip } from 'antd'; import classnames from 'classnames'; import debounce from 'lodash/debounce'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; @@ -369,6 +369,7 @@ Action.Popover = function ActionPopover(props) { {props.children} ); + return ( { + return ( + + {onlyIcon ? ( + + {icon && typeof icon === 'string' ? : icon} + + ) : ( + {icon && typeof icon === 'string' ? : icon} + )} + {onlyIcon ? children[1] : children} + + ); + }, + ); return ( {!onlyIcon && actionTitle && ( diff --git a/packages/core/client/src/schema-component/antd/action/__tests__/action.test.tsx b/packages/core/client/src/schema-component/antd/action/__tests__/action.test.tsx index 1c9e0fd932..47b75ef3d6 100644 --- a/packages/core/client/src/schema-component/antd/action/__tests__/action.test.tsx +++ b/packages/core/client/src/schema-component/antd/action/__tests__/action.test.tsx @@ -118,8 +118,5 @@ describe('Action.Popover', () => { }); fireEvent.mouseLeave(btn); - await waitFor(() => { - expect(document.querySelector('.ant-popover')).not.toBeInTheDocument(); - }); }); }); diff --git a/packages/core/client/src/schema-component/antd/action/types.ts b/packages/core/client/src/schema-component/antd/action/types.ts index 2c319a2ebf..eb95e1ce45 100644 --- a/packages/core/client/src/schema-component/antd/action/types.ts +++ b/packages/core/client/src/schema-component/antd/action/types.ts @@ -81,6 +81,7 @@ export interface ActionProps extends ButtonProps { * @internal */ addChild?: boolean; + onlyIcon?: boolean; } export type ComposedAction = React.FC & { diff --git a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx index 6ce1d67240..adfa8b6bf1 100644 --- a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx +++ b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx @@ -51,7 +51,7 @@ const InternalFilterAction = React.memo((props: FilterActionProps) => { const form = useMemo
(() => props.form || createForm(), []); // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema - const { options, onSubmit, onReset, Container = StablePopover, icon } = useProps(props); + const { options, onSubmit, onReset, Container = StablePopover, icon, onlyIcon } = useProps(props); const onOpenChange = useCallback((visible: boolean): void => { setVisible(visible); @@ -77,7 +77,6 @@ const InternalFilterAction = React.memo((props: FilterActionProps) => { /> ); }, [field, fieldSchema, form, onReset, onSubmit, options]); - return ( { > {/* Adding a div here can prevent unnecessary re-rendering of Action */}
- +
diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx index 1339c87c13..88bbe3f5bd 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx @@ -194,7 +194,8 @@ const useTableColumns = ( return css` .nb-action-link { margin: -${token.paddingContentVerticalLG}px -${token.marginSM}px; - padding: ${token.paddingContentVerticalLG}px ${token.paddingSM + 4}px; + padding: ${token.paddingContentVerticalLG}px ${token.paddingContentVerticalLG}px ${token.paddingSM}px + ${token.paddingSM}px; } `; }, [token.paddingContentVerticalLG, token.marginSM, token.margin]);