@os-design/use-long-press 1.0.0

package/LICENCE.md

@@ -0,0 +1 @@
+Copyright (c) 2019-present, Ilya Ordin, all rights reserved

package/README.md

@@ -0,0 +1,15 @@
+# @os-design/use-long-press [![NPM version](https://img.shields.io/npm/v/@os-design/use-long-press)](https://yarnpkg.com/package/@os-design/use-long-press) [![BundlePhobia](https://img.shields.io/bundlephobia/minzip/@os-design/use-long-press)](https://bundlephobia.com/result?p=@os-design/use-long-press)
+
+Sets the listener that will be called whenever the long press event occurs. It only works on touch devices.
+
+## Installation
+
+Install the package using the following command:
+
+```
+yarn add @os-design/use-long-press
+```
+
+---
+
+See all the features in the [Storybook](https://os-team.gitlab.io/libs/os-design/).

package/dist/cjs/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _usePreventDefaultEvent = _interopRequireDefault(require("@os-design/use-prevent-default-event"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useLongPress = function useLongPress(callback) {
+  var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
+  var callbackRef = (0, _react.useRef)(callback);
+  var msRef = (0, _react.useRef)(ms);
+  var timeout = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      pressed = _useState2[0],
+      setPressed = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    callbackRef.current = callback;
+  }, [callback]);
+  (0, _react.useEffect)(function () {
+    msRef.current = ms;
+  }, [ms]);
+  var stopTimeout = (0, _react.useCallback)(function () {
+    if (!timeout.current) return;
+    clearTimeout(timeout.current);
+  }, []); // Stop the timeout if the component was unmounted
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      return stopTimeout();
+    };
+  }, [stopTimeout]); // Disable the context menu
+
+  (0, _usePreventDefaultEvent["default"])(document, 'contextmenu', pressed);
+  var onTouchStart = (0, _react.useCallback)(function (e) {
+    setPressed(true);
+    timeout.current = setTimeout(function () {
+      return callbackRef.current(e);
+    }, msRef.current);
+  }, []);
+  var onTouchMove = (0, _react.useCallback)(function () {
+    return stopTimeout();
+  }, [stopTimeout]);
+  var onTouchEnd = (0, _react.useCallback)(function () {
+    setPressed(false);
+    stopTimeout();
+  }, [stopTimeout]);
+  return {
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd
+  };
+};
+
+var _default = useLongPress;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":["useLongPress","callback","ms","callbackRef","msRef","timeout","pressed","setPressed","current","stopTimeout","clearTimeout","document","onTouchStart","e","setTimeout","onTouchMove","onTouchEnd"],"mappings":";;;;;;;AAAA;;AAOA;;;;;;;;;;;;;;;;AAQA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CACnBC,QADmB,EAGG;AAAA,MADtBC,EACsB,uEADjB,GACiB;AACtB,MAAMC,WAAW,GAAG,mBAAOF,QAAP,CAApB;AACA,MAAMG,KAAK,GAAG,mBAAOF,EAAP,CAAd;AACA,MAAMG,OAAO,GAAG,oBAAhB;;AACA,kBAA8B,qBAAS,KAAT,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AAEA,wBAAU,YAAM;AACdJ,IAAAA,WAAW,CAACK,OAAZ,GAAsBP,QAAtB;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,wBAAU,YAAM;AACdG,IAAAA,KAAK,CAACI,OAAN,GAAgBN,EAAhB;AACD,GAFD,EAEG,CAACA,EAAD,CAFH;AAIA,MAAMO,WAAW,GAAG,wBAAY,YAAM;AACpC,QAAI,CAACJ,OAAO,CAACG,OAAb,EAAsB;AACtBE,IAAAA,YAAY,CAACL,OAAO,CAACG,OAAT,CAAZ;AACD,GAHmB,EAGjB,EAHiB,CAApB,CAdsB,CAmBtB;;AACA,wBAAU;AAAA,WAAM;AAAA,aAAMC,WAAW,EAAjB;AAAA,KAAN;AAAA,GAAV,EAAqC,CAACA,WAAD,CAArC,EApBsB,CAsBtB;;AACA,0CAAuBE,QAAvB,EAAiC,aAAjC,EAAgDL,OAAhD;AAEA,MAAMM,YAAY,GAAG,wBAA+B,UAACC,CAAD,EAAO;AACzDN,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAF,IAAAA,OAAO,CAACG,OAAR,GAAkBM,UAAU,CAAC;AAAA,aAAMX,WAAW,CAACK,OAAZ,CAAoBK,CAApB,CAAN;AAAA,KAAD,EAA+BT,KAAK,CAACI,OAArC,CAA5B;AACD,GAHoB,EAGlB,EAHkB,CAArB;AAKA,MAAMO,WAAW,GAAG,wBAAY;AAAA,WAAMN,WAAW,EAAjB;AAAA,GAAZ,EAAiC,CAACA,WAAD,CAAjC,CAApB;AAEA,MAAMO,UAAU,GAAG,wBAAY,YAAM;AACnCT,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAE,IAAAA,WAAW;AACZ,GAHkB,EAGhB,CAACA,WAAD,CAHgB,CAAnB;AAKA,SAAO;AAAEG,IAAAA,YAAY,EAAZA,YAAF;AAAgBG,IAAAA,WAAW,EAAXA,WAAhB;AAA6BC,IAAAA,UAAU,EAAVA;AAA7B,GAAP;AACD,CAzCD;;eA2CehB,Y","sourcesContent":["import {\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\n\nexport interface LongPressHandlers {\n  onTouchStart: TouchEventHandler;\n  onTouchMove: () => void;\n  onTouchEnd: () => void;\n}\n\nconst useLongPress = (\n  callback: TouchEventHandler,\n  ms = 500\n): LongPressHandlers => {\n  const callbackRef = useRef(callback);\n  const msRef = useRef(ms);\n  const timeout = useRef<NodeJS.Timeout>();\n  const [pressed, setPressed] = useState(false);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  useEffect(() => {\n    msRef.current = ms;\n  }, [ms]);\n\n  const stopTimeout = useCallback(() => {\n    if (!timeout.current) return;\n    clearTimeout(timeout.current);\n  }, []);\n\n  // Stop the timeout if the component was unmounted\n  useEffect(() => () => stopTimeout(), [stopTimeout]);\n\n  // Disable the context menu\n  usePreventDefaultEvent(document, 'contextmenu', pressed);\n\n  const onTouchStart = useCallback<TouchEventHandler>((e) => {\n    setPressed(true);\n    timeout.current = setTimeout(() => callbackRef.current(e), msRef.current);\n  }, []);\n\n  const onTouchMove = useCallback(() => stopTimeout(), [stopTimeout]);\n\n  const onTouchEnd = useCallback(() => {\n    setPressed(false);\n    stopTimeout();\n  }, [stopTimeout]);\n\n  return { onTouchStart, onTouchMove, onTouchEnd };\n};\n\nexport default useLongPress;\n"],"file":"index.js"}

package/dist/esm/index.js

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import usePreventDefaultEvent from '@os-design/use-prevent-default-event';
+
+const useLongPress = (callback, ms = 500) => {
+  const callbackRef = useRef(callback);
+  const msRef = useRef(ms);
+  const timeout = useRef();
+  const [pressed, setPressed] = useState(false);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    msRef.current = ms;
+  }, [ms]);
+  const stopTimeout = useCallback(() => {
+    if (!timeout.current) return;
+    clearTimeout(timeout.current);
+  }, []); // Stop the timeout if the component was unmounted
+
+  useEffect(() => () => stopTimeout(), [stopTimeout]); // Disable the context menu
+
+  usePreventDefaultEvent(document, 'contextmenu', pressed);
+  const onTouchStart = useCallback(e => {
+    setPressed(true);
+    timeout.current = setTimeout(() => callbackRef.current(e), msRef.current);
+  }, []);
+  const onTouchMove = useCallback(() => stopTimeout(), [stopTimeout]);
+  const onTouchEnd = useCallback(() => {
+    setPressed(false);
+    stopTimeout();
+  }, [stopTimeout]);
+  return {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd
+  };
+};
+
+export default useLongPress;
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts"],"names":["useCallback","useEffect","useRef","useState","usePreventDefaultEvent","useLongPress","callback","ms","callbackRef","msRef","timeout","pressed","setPressed","current","stopTimeout","clearTimeout","document","onTouchStart","e","setTimeout","onTouchMove","onTouchEnd"],"mappings":"AAAA,SAEEA,WAFF,EAGEC,SAHF,EAIEC,MAJF,EAKEC,QALF,QAMO,OANP;AAOA,OAAOC,sBAAP,MAAmC,sCAAnC;;AAQA,MAAMC,YAAY,GAAG,CACnBC,QADmB,EAEnBC,EAAE,GAAG,GAFc,KAGG;AACtB,QAAMC,WAAW,GAAGN,MAAM,CAACI,QAAD,CAA1B;AACA,QAAMG,KAAK,GAAGP,MAAM,CAACK,EAAD,CAApB;AACA,QAAMG,OAAO,GAAGR,MAAM,EAAtB;AACA,QAAM,CAACS,OAAD,EAAUC,UAAV,IAAwBT,QAAQ,CAAC,KAAD,CAAtC;AAEAF,EAAAA,SAAS,CAAC,MAAM;AACdO,IAAAA,WAAW,CAACK,OAAZ,GAAsBP,QAAtB;AACD,GAFQ,EAEN,CAACA,QAAD,CAFM,CAAT;AAIAL,EAAAA,SAAS,CAAC,MAAM;AACdQ,IAAAA,KAAK,CAACI,OAAN,GAAgBN,EAAhB;AACD,GAFQ,EAEN,CAACA,EAAD,CAFM,CAAT;AAIA,QAAMO,WAAW,GAAGd,WAAW,CAAC,MAAM;AACpC,QAAI,CAACU,OAAO,CAACG,OAAb,EAAsB;AACtBE,IAAAA,YAAY,CAACL,OAAO,CAACG,OAAT,CAAZ;AACD,GAH8B,EAG5B,EAH4B,CAA/B,CAdsB,CAmBtB;;AACAZ,EAAAA,SAAS,CAAC,MAAM,MAAMa,WAAW,EAAxB,EAA4B,CAACA,WAAD,CAA5B,CAAT,CApBsB,CAsBtB;;AACAV,EAAAA,sBAAsB,CAACY,QAAD,EAAW,aAAX,EAA0BL,OAA1B,CAAtB;AAEA,QAAMM,YAAY,GAAGjB,WAAW,CAAqBkB,CAAD,IAAO;AACzDN,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAF,IAAAA,OAAO,CAACG,OAAR,GAAkBM,UAAU,CAAC,MAAMX,WAAW,CAACK,OAAZ,CAAoBK,CAApB,CAAP,EAA+BT,KAAK,CAACI,OAArC,CAA5B;AACD,GAH+B,EAG7B,EAH6B,CAAhC;AAKA,QAAMO,WAAW,GAAGpB,WAAW,CAAC,MAAMc,WAAW,EAAlB,EAAsB,CAACA,WAAD,CAAtB,CAA/B;AAEA,QAAMO,UAAU,GAAGrB,WAAW,CAAC,MAAM;AACnCY,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAE,IAAAA,WAAW;AACZ,GAH6B,EAG3B,CAACA,WAAD,CAH2B,CAA9B;AAKA,SAAO;AAAEG,IAAAA,YAAF;AAAgBG,IAAAA,WAAhB;AAA6BC,IAAAA;AAA7B,GAAP;AACD,CAzCD;;AA2CA,eAAehB,YAAf","sourcesContent":["import {\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport usePreventDefaultEvent from '@os-design/use-prevent-default-event';\n\nexport interface LongPressHandlers {\n  onTouchStart: TouchEventHandler;\n  onTouchMove: () => void;\n  onTouchEnd: () => void;\n}\n\nconst useLongPress = (\n  callback: TouchEventHandler,\n  ms = 500\n): LongPressHandlers => {\n  const callbackRef = useRef(callback);\n  const msRef = useRef(ms);\n  const timeout = useRef<NodeJS.Timeout>();\n  const [pressed, setPressed] = useState(false);\n\n  useEffect(() => {\n    callbackRef.current = callback;\n  }, [callback]);\n\n  useEffect(() => {\n    msRef.current = ms;\n  }, [ms]);\n\n  const stopTimeout = useCallback(() => {\n    if (!timeout.current) return;\n    clearTimeout(timeout.current);\n  }, []);\n\n  // Stop the timeout if the component was unmounted\n  useEffect(() => () => stopTimeout(), [stopTimeout]);\n\n  // Disable the context menu\n  usePreventDefaultEvent(document, 'contextmenu', pressed);\n\n  const onTouchStart = useCallback<TouchEventHandler>((e) => {\n    setPressed(true);\n    timeout.current = setTimeout(() => callbackRef.current(e), msRef.current);\n  }, []);\n\n  const onTouchMove = useCallback(() => stopTimeout(), [stopTimeout]);\n\n  const onTouchEnd = useCallback(() => {\n    setPressed(false);\n    stopTimeout();\n  }, [stopTimeout]);\n\n  return { onTouchStart, onTouchMove, onTouchEnd };\n};\n\nexport default useLongPress;\n"],"file":"index.js"}

package/dist/types/index.d.ts

@@ -0,0 +1,9 @@
+import { TouchEventHandler } from 'react';
+export interface LongPressHandlers {
+    onTouchStart: TouchEventHandler;
+    onTouchMove: () => void;
+    onTouchEnd: () => void;
+}
+declare const useLongPress: (callback: TouchEventHandler, ms?: number) => LongPressHandlers;
+export default useLongPress;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,aACN,iBAAiB,kBAE1B,iBAsCF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@os-design/use-long-press",
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "repository": "git@gitlab.com:os-team/libs/os-design.git",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build": "yarn clean && npm-run-all build:*",
+    "ncu": "ncu -u"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@os-design/use-prevent-default-event": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "gitHead": "4f41a962d4c0afb57d65e8c3e104215794d3c6a7"
+}