Skip to content

Commit 9b1b215

Browse files
fulopdanielfulopdaniel
authored
refactor(BlockInjectButton): replace deprecated fondue components (#1261)
1 parent cae6a20 commit 9b1b215

File tree

2 files changed

+52
-72
lines changed

2 files changed

+52
-72
lines changed

‎packages/guideline-blocks-settings/src/components/BlockInjectButton/BlockInjectButton.spec.ct.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { mount } from 'cypress/react18';
77
import { BlockInjectButton } from './BlockInjectButton';
88

99
const BlockInjectButtonSelector = '[data-test-id="block-inject-button"]';
10-
const ActionMenuItemSelector = '[data-test-id="menu-item"]';
10+
const DropdownItemSelector = '[data-test-id="fondue-dropdown-subtrigger"]';
1111

1212
describe('Block Inject Button', () => {
1313
it('renders a simple block inject button', () => {
@@ -38,12 +38,12 @@ describe('Block Inject Button', () => {
3838
/>,
3939
);
4040
cy.get(BlockInjectButtonSelector).click();
41-
cy.get(ActionMenuItemSelector).should('have.length', 2);
42-
cy.get(ActionMenuItemSelector).eq(0).should('have.text', 'Upload asset').click();
41+
cy.get(DropdownItemSelector).should('have.length', 2);
42+
cy.get(DropdownItemSelector).eq(0).should('have.text', 'Upload asset').click();
4343
cy.get('@onClickonUploadClick').should('have.been.calledOnce');
4444

4545
cy.get(BlockInjectButtonSelector).click();
46-
cy.get(ActionMenuItemSelector).eq(1).should('have.text', 'Browse asset').click();
46+
cy.get(DropdownItemSelector).eq(1).should('have.text', 'Browse asset').click();
4747
cy.get('@onClickOpenAssetChooser').should('have.been.calledOnce');
4848
});
4949
});

‎packages/guideline-blocks-settings/src/components/BlockInjectButton/BlockInjectButton.tsx‎

Lines changed: 48 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
/* (c) Copyright Frontify Ltd., all rights reserved. */
22

33
import { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';
4-
import {
5-
ActionMenu,
6-
Flyout,
7-
IconArrowCircleUp20,
8-
IconExclamationMarkTriangle,
9-
IconImageStack20,
10-
MenuItemContentSize,
11-
} from '@frontify/fondue';
12-
import { LoadingCircle } from '@frontify/fondue/components';
13-
import { type DragEventHandler, type MouseEventHandler, useRef, useState } from 'react';
4+
import { IconExclamationMarkTriangle } from '@frontify/fondue';
5+
import { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';
6+
import { IconArrowCircleUp, IconImageStack } from '@frontify/fondue/icons';
7+
import { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';
148

159
import { joinClassNames } from '../../utilities/react/joinClassNames';
1610

@@ -73,6 +67,29 @@ export const BlockInjectButton = ({
7367
setMenuPosition([XInsideComponent, YInsideComponent]);
7468
};
7569

70+
const onItemClick = useCallback((callback: () => unknown) => {
71+
callback();
72+
setMenuPosition(undefined);
73+
}, []);
74+
75+
const menuItems = useMemo(() => {
76+
const items = [];
77+
if (onUploadClick) {
78+
items.push({
79+
onSelect: () => onItemClick(onUploadClick),
80+
title: 'Upload asset',
81+
icon: <IconArrowCircleUp size="20" />,
82+
});
83+
}
84+
if (onAssetChooseClick) {
85+
items.push({
86+
onSelect: () => onItemClick(onAssetChooseClick),
87+
title: 'Browse asset',
88+
icon: <IconImageStack size="20" />,
89+
});
90+
}
91+
return items;
92+
}, [onAssetChooseClick, onUploadClick, onItemClick]);
7693
return (
7794
<button
7895
ref={buttonRef}
@@ -121,7 +138,7 @@ export const BlockInjectButton = ({
121138
}
122139
onDrop={onDrop ? handleDrop : undefined}
123140
onClick={(event) => {
124-
withMenu && openMenu(event);
141+
withMenu && !menuPosition && openMenu(event);
125142
onClick?.();
126143
}}
127144
>
@@ -151,63 +168,26 @@ export const BlockInjectButton = ({
151168
top: menuPosition[1],
152169
}}
153170
>
154-
<Flyout
155-
onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}
156-
isOpen={true}
157-
fitContent
158-
hug={false}
159-
legacyFooter={false}
160-
trigger={<div />}
161-
>
162-
<ActionMenu
163-
menuBlocks={[
164-
{
165-
id: 'menu',
166-
menuItems: [
167-
...(onUploadClick
168-
? [
169-
{
170-
id: 'upload',
171-
size: MenuItemContentSize.XSmall,
172-
title: 'Upload asset',
173-
onClick: () => {
174-
onUploadClick();
175-
setMenuPosition(undefined);
176-
},
177-
178-
initialValue: true,
179-
decorator: (
180-
<div className="tw-mr-2">
181-
<IconArrowCircleUp20 />
182-
</div>
183-
),
184-
},
185-
]
186-
: []),
187-
...(onAssetChooseClick
188-
? [
189-
{
190-
id: 'asset',
191-
size: MenuItemContentSize.XSmall,
192-
title: 'Browse asset',
193-
onClick: () => {
194-
onAssetChooseClick();
195-
setMenuPosition(undefined);
196-
},
197-
initialValue: true,
198-
decorator: (
199-
<div className="tw-mr-2">
200-
<IconImageStack20 />
201-
</div>
202-
),
203-
},
204-
]
205-
: []),
206-
],
207-
},
208-
]}
209-
/>
210-
</Flyout>
171+
<Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>
172+
<Flyout.Trigger>
173+
<div />
174+
</Flyout.Trigger>
175+
<Flyout.Content triggerOffset="compact">
176+
<Dropdown.Root open>
177+
<Dropdown.Trigger>
178+
<div />
179+
</Dropdown.Trigger>
180+
<Dropdown.Content triggerOffset="compact">
181+
{menuItems.map((item) => (
182+
<Dropdown.Item key={item.title} onSelect={item.onSelect}>
183+
{item.icon}
184+
{item.title}
185+
</Dropdown.Item>
186+
))}
187+
</Dropdown.Content>
188+
</Dropdown.Root>
189+
</Flyout.Content>
190+
</Flyout.Root>
211191
</div>
212192
)}
213193
</button>

0 commit comments

Comments
 (0)