-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Cell): add auto scroll for draggable mode (#5833)
* tech: extend e2e test infra - Импортиурем файл с утилитами - Добавляем запуск для конткретных движков * feat(Cell): add auto scroll for draggable mode * fix(review): reword checkIfElementIsInsideYEdgesOfViewport args * fix(review): refactor useDraggable * chore: add tests * chore: add comments with references * refactor: revert now() moving to lib/date * review: mv condition for icon to var * review: extend dom.test.ts
- Loading branch information
Showing
30 changed files
with
1,293 additions
and
277 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,45 @@ | ||
| require('@testing-library/jest-dom'); | ||
|
|
||
| // Не реализован в JSDOM. | ||
| // https://jestjs.io/docs/manual-mocks | ||
| global.DOMRect = class DOMRect { | ||
| top = 0; | ||
| right = 0; | ||
| bottom = 0; | ||
| left = 0; | ||
| width = 0; | ||
| height = 0; | ||
| constructor(x = 0, y = 0, width = 0, height = 0) { | ||
| this.x = x; | ||
| this.y = y; | ||
| this.top = y; | ||
| this.right = x + width; | ||
| this.bottom = y + height; | ||
| this.left = x; | ||
| this.width = width; | ||
| this.height = height; | ||
| } | ||
| static fromRect(other) { | ||
| return new DOMRect(other?.x, other?.y, other?.width, other?.height); | ||
| } | ||
| toJSON() { | ||
| const { x, y, top, right, bottom, left, width, height } = this; | ||
| return JSON.stringify({ x, y, top, right, bottom, left, width, height }); | ||
| } | ||
| }; | ||
|
|
||
| // Не реализован в JSDOM. | ||
| // Объявление скопировано из документации https://jestjs.io/docs/manual-mocks | ||
| Object.defineProperty(global, 'matchMedia', { | ||
| writable: true, | ||
| value: jest.fn().mockImplementation((query) => ({ | ||
| matches: false, | ||
| media: query, | ||
| onchange: null, | ||
| addListener: jest.fn(), // устарело | ||
| removeListener: jest.fn(), // устарело | ||
| addEventListener: jest.fn(), | ||
| removeEventListener: jest.fn(), | ||
| dispatchEvent: jest.fn(), | ||
| })), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
packages/vkui/src/components/Cell/CellDragger/CellDragger.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,11 @@ | ||
| /* stylelint-disable @project-tools/stylelint-atomic, selector-max-universal */ | ||
| .CellDragger { | ||
| cursor: ns-resize; | ||
| color: var(--vkui--color_icon_secondary); | ||
| user-select: none; | ||
| touch-action: manipulation; | ||
| } | ||
|
|
||
| .CellDragger__icon { | ||
| pointer-events: none; | ||
| } |
47 changes: 30 additions & 17 deletions
47
packages/vkui/src/components/Cell/CellDragger/CellDragger.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,56 @@ | ||
| import * as React from 'react'; | ||
| import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons'; | ||
| import { classNames } from '@vkontakte/vkjs'; | ||
| import { | ||
| type DraggableProps, | ||
| UseDraggableProps, | ||
| useDraggableWithDomApi, | ||
| } from '../../../hooks/useDraggableWithDomApi'; | ||
| import { usePlatform } from '../../../hooks/usePlatform'; | ||
| import { Platform } from '../../../lib/platform'; | ||
| import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect'; | ||
| import { HTMLAttributesWithRootRef } from '../../../types'; | ||
| import { Touch } from '../../Touch/Touch'; | ||
| import { DraggableProps } from '../useDraggable'; | ||
| import styles from './CellDragger.module.css'; | ||
|
|
||
| type CellDraggerProps = DraggableProps & | ||
| Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps>; | ||
| interface CellDraggerProps | ||
| extends UseDraggableProps, | ||
| Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps> { | ||
| disabled?: boolean; | ||
| onDragStateChange?(dragging: boolean): void; | ||
| } | ||
|
|
||
| export const CellDragger = ({ | ||
| onDragStart, | ||
| onDragMove, | ||
| onDragEnd, | ||
| onClick, | ||
| elRef, | ||
| disabled, | ||
| className, | ||
| onDragStateChange, | ||
| onDragFinish, | ||
| ...restProps | ||
| }: CellDraggerProps) => { | ||
| const platform = usePlatform(); | ||
| const Icon = platform === Platform.IOS ? Icon24ReorderIos : Icon24Reorder; | ||
|
|
||
| const handleClick = (event: React.MouseEvent<HTMLElement>) => { | ||
| event.preventDefault(); | ||
| if (onClick) { | ||
| onClick(event); | ||
| const { dragging, onDragStart, onDragMove, onDragEnd } = useDraggableWithDomApi({ | ||
| elRef, | ||
| onDragFinish, | ||
| }); | ||
|
|
||
| useIsomorphicLayoutEffect(() => { | ||
| if (onDragStateChange) { | ||
| onDragStateChange(dragging); | ||
| } | ||
| }; | ||
| }, [dragging, onDragStateChange]); | ||
|
|
||
| return ( | ||
| <Touch | ||
| className={classNames(styles['CellDragger'], className)} | ||
| onStart={onDragStart} | ||
| onMoveY={onDragMove} | ||
| onEnd={onDragEnd} | ||
| onClick={handleClick} | ||
| onStart={disabled ? undefined : onDragStart} | ||
| onMoveY={disabled ? undefined : onDragMove} | ||
| onEnd={disabled ? undefined : onDragEnd} | ||
| {...restProps} | ||
| > | ||
| {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />} | ||
| <Icon className={styles['CellDragger__icon']} /> | ||
| </Touch> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export const DEFAULT_DRAGGABLE_LABEL = 'Перенести ячейку'; |
Oops, something went wrong.