Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(PopoutWrapper): fix scroll blocked #6265

Merged
merged 4 commits into from
Dec 13, 2023
Merged

fix(PopoutWrapper): fix scroll blocked #6265

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b14ef68
fix(PopoutWrapper): fix scroll blocked
inomdzhon Dec 12, 2023
0c517af
docs(migration_v6): add info about PopoutWrapper
inomdzhon Dec 12, 2023
b6c112b
review(PopoutWrapper): add docs
inomdzhon Dec 12, 2023
8671d00
review(PopoutWrapper): fix docs typos
inomdzhon Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 14 additions & 31 deletions packages/vkui/src/components/PopoutWrapper/PopoutWrapper.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,26 @@
import * as React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { render } from '@testing-library/react';
import { baselineComponent, fakeTimers, runAllTimers } from '../../testing/utils';
import { PopoutWrapper } from './PopoutWrapper';
import styles from './PopoutWrapper.module.css';

// TODO: Warning: An update to PopoutWrapper inside a test was not wrapped in act(...)

describe('PopoutWrapper', () => {
describe(PopoutWrapper, () => {
baselineComponent(PopoutWrapper);

describe('prevents touchmove', () => {
it('while mounted', () => {
render(<PopoutWrapper />);
const e = new TouchEvent('touchmove');
const preventDefault = jest.spyOn(e, 'preventDefault');
fireEvent(window, e);
expect(preventDefault).toBeCalled();
});
it('clears after unmount', () => {
const h = render(<PopoutWrapper />);
h.unmount();
const e = new TouchEvent('touchmove');
const preventDefault = jest.spyOn(e, 'preventDefault');
fireEvent(window, e);
expect(preventDefault).not.toBeCalled();
});
});

describe('gets opened', () => {
const isOpened = () => !!document.querySelector('.vkuiPopoutWrapper--opened');
describe('opened state', () => {
fakeTimers();
it('immediately if no mask', () => {
render(<PopoutWrapper hasMask={false} />);
expect(isOpened()).toBe(true);

it('should be opened immediately if no mask', () => {
const result = render(<PopoutWrapper data-testid="popout-wrapper" hasMask={false} />);
expect(result.getByTestId('popout-wrapper')).toHaveClass(styles['PopoutWrapper--opened']);
});
it('after animation if mask', () => {
render(<PopoutWrapper hasMask />);
expect(isOpened()).toBe(false);

it('should be opened after animation if has mask', () => {
const result = render(<PopoutWrapper data-testid="popout-wrapper" hasMask />);
const locator = result.getByTestId('popout-wrapper');
expect(locator).not.toHaveClass(styles['PopoutWrapper--opened']);
runAllTimers();
expect(isOpened()).toBe(true);
expect(locator).toHaveClass(styles['PopoutWrapper--opened']);
});
});
});
7 changes: 0 additions & 7 deletions packages/vkui/src/components/PopoutWrapper/PopoutWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import * as React from 'react';
import { classNames } from '@vkontakte/vkjs';
import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
import { usePlatform } from '../../hooks/usePlatform';
import { useTimeout } from '../../hooks/useTimeout';
import { useDOM } from '../../lib/dom';
import { HTMLAttributesWithRootRef } from '../../types';
import { RootComponent } from '../RootComponent/RootComponent';
import styles from './PopoutWrapper.module.css';
Expand Down Expand Up @@ -54,11 +52,6 @@ export const PopoutWrapper = ({
!opened && animationFinishFallback.set();
}, [animationFinishFallback, opened]);

const { window } = useDOM();
useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {
passive: false,
});

return (
<RootComponent
{...restProps}
Expand Down
6 changes: 6 additions & 0 deletions styleguide/pages/migration_v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -559,6 +559,12 @@ npx @vkontakte/vkui-codemods --help

<br/>

### [`PopoutWrapper`](#/PopoutWrapper)

- Теперь, при использовании компонента напрямую, необходимо самостоятельно импортировать и вызывать `useScrollLock()` (см. [issue #4314](https://github.com/VKCOM/VKUI/issues/4314)).

<br/>

### [`PullToRefresh`](#/PullToRefresh)

- До этого `runTapticImpactOccurred()` вызывался внутри компонента после вызова обработчика `onRefresh`.
Expand Down
Loading