Skip to content

Commit 69b5dab

Browse files
EldarMuhamethanovEldarMuhamethanov
committed
fix(ActionSheet): remove click-outside reason
1 parent 5a3e39e commit 69b5dab

File tree

6 files changed

+16
-47
lines changed

6 files changed

+16
-47
lines changed

‎packages/vkui/src/components/ActionSheet/ActionSheet.test.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -220,9 +220,11 @@ describe(ActionSheet, () => {
220220
const onClosed = vi.fn();
221221
const result = render(<ActionSheetDesktop onClose={onClose} onClosed={onClosed} />);
222222
await waitForFloatingPosition();
223-
await userEvent.click(document.body);
223+
await userEvent.click(
224+
result.container.querySelector<HTMLElement>(`.${popoutWrapperStyles.overlay}`)!,
225+
);
224226
await waitCSSKeyframesAnimation(result.getByRole('dialog'), { runOnlyPendingTimers: true });
225-
expect(onClose).toHaveBeenCalledExactlyOnceWith('click-outside');
227+
expect(onClose).toHaveBeenCalledExactlyOnceWith('click-overlay');
226228
expect(onClosed).toHaveBeenCalledExactlyOnceWith({ closedBy: 'other' });
227229
});
228230

@@ -572,21 +574,6 @@ describe(ActionSheet, () => {
572574
});
573575
});
574576

575-
describe('click-outside (menu mode only)', () => {
576-
it('menu', async () => {
577-
const onClose = vi.fn();
578-
const onClosed = vi.fn();
579-
const result = render(<ActionSheetMenu onClose={onClose} onClosed={onClosed} />);
580-
await waitForFloatingPosition();
581-
582-
await userEvent.click(document.body);
583-
584-
await waitCSSKeyframesAnimation(result.getByRole('dialog'), { runOnlyPendingTimers: true });
585-
expect(onClose).toHaveBeenCalledExactlyOnceWith('click-outside');
586-
expect(onClosed).toHaveBeenCalledExactlyOnceWith({ closedBy: 'other' });
587-
});
588-
});
589-
590577
describe('keydown-item (Enter key)', () => {
591578
it.each([
592579
['desktop', ActionSheetDesktop],

‎packages/vkui/src/components/ActionSheet/ActionSheet.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ import { AppRootPortal } from '../AppRoot/AppRootPortal';
1313
import { useScrollLock } from '../AppRoot/ScrollContext';
1414
import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
1515
import { Footnote } from '../Typography/Footnote/Footnote';
16-
import { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';
16+
import {
17+
ActionSheetContext,
18+
type ActionSheetContextType,
19+
type ItemClickHandler,
20+
} from './ActionSheetContext';
1721
import { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';
1822
import { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';
1923
import { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';
@@ -24,7 +28,6 @@ export type ActionSheetOnCloseReason =
2428
| 'click-action-item'
2529
| 'click-cancel-item'
2630
| 'click-overlay'
27-
| 'click-outside'
2831
| 'keydown-item'
2932
| 'escape-key';
3033

@@ -172,8 +175,8 @@ export const ActionSheet = ({
172175
},
173176
[onClose],
174177
);
175-
const contextValue = React.useMemo(
176-
() => ({ onItemClick, mode, onClose }),
178+
const contextValue = React.useMemo<ActionSheetContextType>(
179+
() => ({ onItemClick, mode, onClose: (reason) => onClose(reason, 'other') }),
177180
[mode, onClose, onItemClick],
178181
);
179182

‎packages/vkui/src/components/ActionSheet/ActionSheetContext.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { type ActionSheetOnClosedReason, type ActionSheetOnCloseReason } from './ActionSheet';
2+
import { type ActionSheetOnCloseReason } from './ActionSheet';
33

44
export type ActionType<T> = (event: React.MouseEvent<T>) => void;
55

@@ -32,10 +32,7 @@ export type ActionSheetContextType<T extends Element = Element> = {
3232
/**
3333
* Обработчик закрытия `ActionSheet`.
3434
*/
35-
onClose?: (
36-
onCloseReason: ActionSheetOnCloseReason,
37-
onClosedReason: ActionSheetOnClosedReason,
38-
) => void;
35+
onClose?: (onCloseReason: ActionSheetOnCloseReason) => void;
3936
/**
4037
* Режим отображения `ActionSheet`.
4138
*/

‎packages/vkui/src/components/ActionSheet/ActionSheetDropdownMenu.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as React from 'react';
44
import { classNames } from '@vkontakte/vkjs';
55
import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
66
import { usePlatform } from '../../hooks/usePlatform';
7-
import { useDOM } from '../../lib/dom';
87
import { isRefObject } from '../../lib/isRefObject';
98
import { stopPropagation } from '../../lib/utils';
109
import { warnOnce } from '../../lib/warnOnce';
@@ -34,7 +33,6 @@ export const ActionSheetDropdownMenu = ({
3433
onClick,
3534
...restProps
3635
}: SharedDropdownProps): React.ReactNode => {
37-
const { document } = useDOM();
3836
const platform = usePlatform();
3937
const { sizeY } = useAdaptivityWithJSMediaQueries();
4038
const elementRef = React.useRef<HTMLDivElement | null>(null);
@@ -51,22 +49,6 @@ export const ActionSheetDropdownMenu = ({
5149
}
5250
}, [toggleRef]);
5351

54-
React.useEffect(() => {
55-
const listener = (e: MouseEvent) => {
56-
const dropdownElement = elementRef?.current;
57-
if (dropdownElement && !dropdownElement.contains(e.target as Node)) {
58-
onCloseProp?.();
59-
onActionSheetClose?.('click-outside', 'other');
60-
}
61-
};
62-
63-
setTimeout(() => {
64-
document!.body.addEventListener('click', listener);
65-
});
66-
67-
return () => document!.body.removeEventListener('click', listener);
68-
}, [document, onActionSheetClose, onCloseProp]);
69-
7052
const targetRef = React.useMemo(() => {
7153
if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {
7254
return toggleRef;
@@ -77,7 +59,7 @@ export const ActionSheetDropdownMenu = ({
7759

7860
const onClose = React.useCallback(() => {
7961
onCloseProp?.();
80-
onActionSheetClose?.('escape-key', 'other');
62+
onActionSheetClose?.('escape-key');
8163
}, [onActionSheetClose, onCloseProp]);
8264

8365
const handleClick = allowClickPropagation

‎packages/vkui/src/components/ActionSheet/ActionSheetDropdownSheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const ActionSheetDropdownSheet = ({
3434

3535
const onClose = React.useCallback(() => {
3636
onCloseProp?.();
37-
onActionSheetClose?.('escape-key', 'other');
37+
onActionSheetClose?.('escape-key');
3838
}, [onActionSheetClose, onCloseProp]);
3939

4040
const handleClick = allowClickPropagation

‎packages/vkui/src/components/ActionSheetItem/ActionSheetItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ export const ActionSheetItem = ({
166166
const onKeyDown: React.KeyboardEventHandler<HTMLElement> = React.useCallback(
167167
(event) => {
168168
if (pressedKey(event) === Keys.ENTER) {
169-
onActionSheetClose?.('keydown-item', 'other');
169+
onActionSheetClose?.('keydown-item');
170170
}
171171
},
172172
[onActionSheetClose],

0 commit comments

Comments
 (0)