mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-21 07:32:02 +00:00
switch to using use-long-press library
This commit is contained in:
parent
7e0c22ec2a
commit
dfbfeb43cc
4 changed files with 22 additions and 18 deletions
17
package-lock.json
generated
17
package-lock.json
generated
|
|
@ -37,7 +37,8 @@
|
||||||
"react-is": "18.2.0",
|
"react-is": "18.2.0",
|
||||||
"spatial-navigation-polyfill": "https://github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
|
"spatial-navigation-polyfill": "https://github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
|
||||||
"stremio-translations": "https://github.com/Stremio/stremio-translations.git#92675658de92113c5888cf5e57003e468e8b8c9c",
|
"stremio-translations": "https://github.com/Stremio/stremio-translations.git#92675658de92113c5888cf5e57003e468e8b8c9c",
|
||||||
"url": "0.11.0"
|
"url": "0.11.0",
|
||||||
|
"use-long-press": "^3.1.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "7.16.0",
|
"@babel/core": "7.16.0",
|
||||||
|
|
@ -13664,6 +13665,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
|
||||||
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
|
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/use-long-press": {
|
||||||
|
"version": "3.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.5.tgz",
|
||||||
|
"integrity": "sha512-bnwk2SlvLLpeJPkNYSGkc59q5YNV9V/fLDkSOAF2p7Xt0zw3iYHEmgEGkNYkK7zEIEyRFi5CczKsT7MN99UzVQ==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/use-sidecar": {
|
"node_modules/use-sidecar": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
||||||
|
|
@ -25104,6 +25113,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"use-long-press": {
|
||||||
|
"version": "3.1.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.5.tgz",
|
||||||
|
"integrity": "sha512-bnwk2SlvLLpeJPkNYSGkc59q5YNV9V/fLDkSOAF2p7Xt0zw3iYHEmgEGkNYkK7zEIEyRFi5CczKsT7MN99UzVQ==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
"use-sidecar": {
|
"use-sidecar": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,8 @@
|
||||||
"react-is": "18.2.0",
|
"react-is": "18.2.0",
|
||||||
"spatial-navigation-polyfill": "https://github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
|
"spatial-navigation-polyfill": "https://github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
|
||||||
"stremio-translations": "https://github.com/Stremio/stremio-translations.git#92675658de92113c5888cf5e57003e468e8b8c9c",
|
"stremio-translations": "https://github.com/Stremio/stremio-translations.git#92675658de92113c5888cf5e57003e468e8b8c9c",
|
||||||
"url": "0.11.0"
|
"url": "0.11.0",
|
||||||
|
"use-long-press": "^3.1.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "7.16.0",
|
"@babel/core": "7.16.0",
|
||||||
|
|
|
||||||
|
|
@ -4,20 +4,10 @@ const React = require('react');
|
||||||
const PropTypes = require('prop-types');
|
const PropTypes = require('prop-types');
|
||||||
const classnames = require('classnames');
|
const classnames = require('classnames');
|
||||||
const styles = require('./styles');
|
const styles = require('./styles');
|
||||||
|
const { useLongPress } = require('use-long-press');
|
||||||
|
|
||||||
const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, ...props }, ref) => {
|
const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, ...props }, ref) => {
|
||||||
const longPressTimeout = React.useRef(null);
|
const longPress = useLongPress(onLongPress);
|
||||||
const onTouchStart = React.useCallback((event) => {
|
|
||||||
longPressTimeout.current = setTimeout(function () {
|
|
||||||
clearTimeout(longPressTimeout.current);
|
|
||||||
if (typeof onLongPress === 'function') {
|
|
||||||
onLongPress(event);
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
}, [onLongPress]);
|
|
||||||
const onTouchEnd = React.useCallback(() => {
|
|
||||||
clearTimeout(longPressTimeout.current);
|
|
||||||
}, []);
|
|
||||||
const onKeyDown = React.useCallback((event) => {
|
const onKeyDown = React.useCallback((event) => {
|
||||||
if (typeof props.onKeyDown === 'function') {
|
if (typeof props.onKeyDown === 'function') {
|
||||||
props.onKeyDown(event);
|
props.onKeyDown(event);
|
||||||
|
|
@ -49,8 +39,7 @@ const Button = React.forwardRef(({ className, href, disabled, children, onLongPr
|
||||||
href,
|
href,
|
||||||
onKeyDown,
|
onKeyDown,
|
||||||
onMouseDown,
|
onMouseDown,
|
||||||
onTouchStart,
|
...longPress()
|
||||||
onTouchEnd,
|
|
||||||
},
|
},
|
||||||
children
|
children
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -31,8 +31,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
|
||||||
}
|
}
|
||||||
}, [toggleMenu]);
|
}, [toggleMenu]);
|
||||||
const popupLabelOnLongPress = React.useCallback((event) => {
|
const popupLabelOnLongPress = React.useCallback((event) => {
|
||||||
if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) {
|
if (!event.nativeEvent.togglePopupPrevented) {
|
||||||
if (event.cancelable) event.preventDefault();
|
|
||||||
toggleMenu();
|
toggleMenu();
|
||||||
}
|
}
|
||||||
}, [toggleMenu]);
|
}, [toggleMenu]);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue