-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding multi selects on mobile view with long press (#1470)
* using long press * dragg preview problems * typos * events almost ready * resets * long press options * long press updates * formats * dark mode colors * added hover with breakpoints * lingui extract * Apply suggestions from code review Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * curly spacing * borders * clicks proper placement * reverted linting * removed preview on mobile Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com>
- Loading branch information
4 people
authored
Sep 3, 2021
1 parent
161d0cd
commit 8625789
Showing
11 changed files
with
158 additions
and
70 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
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,5 +1,6 @@ | ||
| import { useOnClickOutside } from "./useOnClickOutside" | ||
| import { useMediaQuery } from "./useMediaQuery" | ||
| import { useDoubleClick } from "./useDoubleClick" | ||
| import { useLongPress, LongPressEvents } from "./useLongPress" | ||
|
|
||
| export { useOnClickOutside, useMediaQuery, useDoubleClick } | ||
| export { useOnClickOutside, useMediaQuery, useDoubleClick, useLongPress, LongPressEvents } |
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,66 @@ | ||
| import { useCallback, useRef, useState } from "react" | ||
|
|
||
| export interface LongPressEvents { | ||
| onMouseDown: (e: React.MouseEvent) => void | ||
| onTouchStart: (e: React.TouchEvent) => void | ||
| onMouseUp: (e: React.MouseEvent) => void | ||
| onMouseLeave: (e: React.MouseEvent) => void | ||
| onTouchEnd: (e: React.TouchEvent) => void | ||
| } | ||
|
|
||
| export const useLongPress = ( | ||
| onLongPress: ((e?: React.MouseEvent) => void) | null, | ||
| onClick: ((e?: React.MouseEvent) => void) | null, | ||
| delay = 300 | ||
| ): LongPressEvents => { | ||
| const [longPressTriggered, setLongPressTriggered] = useState(false) | ||
| const timeout: any = useRef() | ||
| const target: any = useRef() | ||
|
|
||
| const start = useCallback( | ||
| (event: any) => { | ||
| if (event.target) { | ||
| event.target.addEventListener("touchend", preventDefault, { | ||
| passive: false | ||
| }) | ||
| target.current = event.target | ||
| } | ||
| timeout.current = setTimeout(() => { | ||
| onLongPress && onLongPress(event) | ||
| setLongPressTriggered(true) | ||
| }, delay) | ||
|
|
||
| }, [onLongPress, delay] | ||
| ) | ||
|
|
||
| const clear = useCallback( | ||
| (shouldTriggerClick = true) => { | ||
| timeout.current && clearTimeout(timeout.current) | ||
| shouldTriggerClick && !longPressTriggered && onClick && onClick() | ||
| setLongPressTriggered(false) | ||
| if (target.current) { | ||
| target.current.removeEventListener("touchend", preventDefault) | ||
| } | ||
| }, [onClick, longPressTriggered] | ||
| ) | ||
|
|
||
| return { | ||
| onMouseDown: (e: React.MouseEvent) => start(e), | ||
| onTouchStart: (e: React.TouchEvent) => start(e), | ||
| onMouseUp: (e: React.MouseEvent) => clear(e), | ||
| onMouseLeave: () => clear(false), | ||
| onTouchEnd: (e: React.TouchEvent) => clear(e) | ||
| } | ||
| } | ||
|
|
||
| const isTouchEvent = (event: any) => { | ||
| return "touches" in event | ||
| } | ||
|
|
||
| const preventDefault = (event: any) => { | ||
| if (!isTouchEvent(event)) return | ||
|
|
||
| if (event.touches.length < 2 && event.preventDefault) { | ||
| event.preventDefault() | ||
| } | ||
| } |
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
Oops, something went wrong.