fix: action button transparency causing setting display issue on hover (#6529)

* fix: button transparency causing setting display issue on hover

* fix: button transparency causing setting display issue on hover
This commit is contained in:
Katherine 2025-03-22 23:11:52 +08:00 committed by GitHub
parent 85e3019e44
commit 437e9dba52
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 24 deletions

View File

@ -582,6 +582,7 @@ const RenderButtonInner = observer(
} }
const actionTitle = title || field?.title; const actionTitle = title || field?.title;
const { opacity, ...restButtonStyle } = buttonStyle;
return ( return (
<SortableItem <SortableItem
@ -591,15 +592,19 @@ const RenderButtonInner = observer(
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
// @ts-ignore // @ts-ignore
loading={field?.data?.loading || loading} loading={field?.data?.loading || loading}
icon={typeof icon === 'string' ? <Icon type={icon} /> : icon} icon={typeof icon === 'string' ? <Icon style={{ opacity }} type={icon} /> : icon}
disabled={disabled} disabled={disabled}
style={buttonStyle} style={restButtonStyle}
onClick={process.env.__E2E__ ? handleButtonClick : debouncedClick} // E2E 中的点击操作都是很快的,如果加上 debounce 会导致 E2E 测试失败 onClick={process.env.__E2E__ ? handleButtonClick : debouncedClick} // E2E 中的点击操作都是很快的,如果加上 debounce 会导致 E2E 测试失败
component={tarComponent || Button} component={tarComponent || Button}
className={classnames(componentCls, hashId, className, 'nb-action')} className={classnames(componentCls, hashId, className, 'nb-action')}
type={type === 'danger' ? undefined : type} type={type === 'danger' ? undefined : type}
> >
{actionTitle && <span className={icon ? 'nb-action-title' : null}>{actionTitle}</span>} {actionTitle && (
<span className={icon ? 'nb-action-title' : null} style={{ opacity }}>
{actionTitle}
</span>
)}
<Designer {...designerProps} /> <Designer {...designerProps} />
</SortableItem> </SortableItem>
); );

View File

@ -267,11 +267,6 @@ function FinallyButton({
}) { }) {
const { getCollection } = useCollectionManager_deprecated(); const { getCollection } = useCollectionManager_deprecated();
const aclCtx = useACLActionParamsContext(); const aclCtx = useACLActionParamsContext();
const buttonStyle = useMemo(() => {
return {
opacity: designable && (field?.data?.hidden || !aclCtx) && 0.1,
};
}, [designable, field?.data?.hidden]);
if (inheritsCollections?.length > 0) { if (inheritsCollections?.length > 0) {
if (!linkageFromForm) { if (!linkageFromForm) {
@ -281,7 +276,6 @@ function FinallyButton({
danger={props.danger} danger={props.danger}
type={componentType} type={componentType}
icon={<DownOutlined />} icon={<DownOutlined />}
style={{ ...props?.style, ...buttonStyle }}
buttonsRender={([leftButton, rightButton]) => [ buttonsRender={([leftButton, rightButton]) => [
React.cloneElement(leftButton as React.ReactElement<any, string>, { React.cloneElement(leftButton as React.ReactElement<any, string>, {
style: props?.style, style: props?.style,
@ -302,13 +296,7 @@ function FinallyButton({
) : ( ) : (
<Dropdown menu={menu}> <Dropdown menu={menu}>
{ {
<Button <Button aria-label={props['aria-label']} icon={icon} type={componentType} danger={props.danger}>
aria-label={props['aria-label']}
icon={icon}
type={componentType}
danger={props.danger}
style={{ ...props?.style, ...buttonStyle }}
>
{props.children} <DownOutlined /> {props.children} <DownOutlined />
</Button> </Button>
} }
@ -333,7 +321,6 @@ function FinallyButton({
style={{ style={{
display: !designable && field?.data?.hidden && 'none', display: !designable && field?.data?.hidden && 'none',
opacity: designable && field?.data?.hidden && 0.1, opacity: designable && field?.data?.hidden && 0.1,
...buttonStyle,
}} }}
> >
{props.children} {props.children}
@ -355,7 +342,7 @@ function FinallyButton({
...props?.style, ...props?.style,
display: !designable && field?.data?.hidden && 'none', display: !designable && field?.data?.hidden && 'none',
opacity: designable && field?.data?.hidden && 0.1, opacity: designable && field?.data?.hidden && 0.1,
...buttonStyle, height: '100%',
}} }}
> >
{props.children} {props.children}

View File

@ -112,11 +112,7 @@ export const DuplicateAction = observer(
}), }),
) )
: record[collection.filterTargetKey] || id; : record[collection.filterTargetKey] || id;
const buttonStyle = useMemo(() => {
return {
opacity: designable && (field?.data?.hidden || !aclCtx) && 0.1,
};
}, [designable, field?.data?.hidden]);
const template = { const template = {
key: 'duplicate', key: 'duplicate',
dataId, dataId,
@ -198,7 +194,6 @@ export const DuplicateAction = observer(
opacity: designable && field?.data?.hidden && 0.1, opacity: designable && field?.data?.hidden && 0.1,
cursor: loading ? 'not-allowed' : 'pointer', cursor: loading ? 'not-allowed' : 'pointer',
position: 'relative', position: 'relative',
...buttonStyle,
}} }}
onClick={handelDuplicate} onClick={handelDuplicate}
> >