react-swipe-action 0.0.1

package/README.md

@@ -0,0 +1,37 @@
+# React swipe action [![npm](https://img.shields.io/npm/v/react-swipe-action.svg)](https://www.npmjs.com/package/react-swipe-action) ![npm type definitions](https://img.shields.io/npm/types/react-swipe-action.svg)
+
+## Installation
+
+```bash
+npm install react-swipe-action
+```
+
+## How to use
+
+```jsx
+import { SwipeAction } from 'react-swipe-action'
+import 'react-swipe-action/dist/index.css'
+
+const App = () => {
+	return (
+		<SwipeAction
+			main={(handle) => <button onClick={() => { alert('Click') }} style={{ position: 'relative' }}>
+				Button
+				{handle}
+			</button>}
+			endAction={{
+				content: (
+					<button
+						type="button"
+						onClick={() => { alert('Right action') }}
+					>
+						Right action
+					</button>
+				),
+				onLongSwipe: () => { alert('Right action') },
+				background: <div style={{ backgroundColor: 'red' }} />,
+			}}
+		/>
+	)
+}
+```

package/dist/SwipeAction.d.ts

@@ -0,0 +1,26 @@
+import type { FunctionComponent, ReactNode, RefObject } from 'react';
+type OnLongSwipe = () => void;
+type Content = ReactNode;
+type Action = {
+    background?: ReactNode;
+    content?: Content;
+    onLongSwipe?: OnLongSwipe;
+} & ({
+    content: Content;
+} | {
+    onLongSwipe: OnLongSwipe;
+});
+type SwipeActionProps = {
+    main: (handle: ReactNode) => ReactNode;
+    startAction?: Action;
+    endAction?: Action;
+};
+export declare const SwipeAction: FunctionComponent<SwipeActionProps>;
+type Position = 'start' | 'end';
+declare const Action: FunctionComponent<{
+    position: Position;
+    content: ReactNode;
+    background: ReactNode;
+    contentRef: RefObject<HTMLDivElement>;
+}>;
+export {};

package/dist/SwipeAction.js

@@ -0,0 +1,82 @@
+"use client";
+import { __assign } from './_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useMemo } from 'react';
+import { useDrag } from 'react-use-drag';
+import styles from './SwipeAction.module.css.js';
+
+var SwipeAction = function (_a) {
+    var startAction = _a.startAction, endAction = _a.endAction, main = _a.main;
+    var _b = useState(0), position = _b[0], setPosition = _b[1];
+    var _c = useState(0), positionOffset = _c[0], setPositionOffset = _c[1];
+    var _d = useState(false), isSwiping = _d[0], setIsSwiping = _d[1];
+    var onRelativePositionChange = useCallback(function (x) {
+        if (Math.abs(x) > 5) {
+            setIsSwiping(true);
+        }
+        setPositionOffset(x);
+    }, []);
+    var onEnd = useCallback(function (x) {
+        if (x === 0) {
+            setIsSwiping(false);
+        }
+        else {
+            setPosition(function (position) {
+                var _a, _b, _c, _d;
+                var newPosition = position + x;
+                var mainWidth = (_b = (_a = mainRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+                var handleContent = function (ref, position, onLongSwipe) {
+                    var _a;
+                    var contentWidth = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+                    var positionSign = position === 'start' ? 1 : -1;
+                    var normalizedSwipePosition = positionSign * newPosition;
+                    if (onLongSwipe &&
+                        contentWidth !== undefined &&
+                        normalizedSwipePosition >
+                            Math.max(mainWidth / 4, contentWidth) * 1.6) {
+                        onLongSwipe();
+                        return positionSign * mainWidth;
+                    }
+                    if (contentWidth !== 0 &&
+                        contentWidth !== undefined &&
+                        normalizedSwipePosition > contentWidth * 0.7) {
+                        return positionSign * contentWidth;
+                    }
+                    if (Math.sign(newPosition) === positionSign) {
+                        setTimeout(function () {
+                            setIsSwiping(false);
+                        }, 200); // Delay to ignore immediate click
+                        return 0;
+                    }
+                };
+                return ((_d = (_c = handleContent(startActionContentRef, 'start', startAction === null || startAction === void 0 ? void 0 : startAction.onLongSwipe)) !== null && _c !== void 0 ? _c : handleContent(endActionContentRef, 'end', endAction === null || endAction === void 0 ? void 0 : endAction.onLongSwipe)) !== null && _d !== void 0 ? _d : newPosition);
+            });
+        }
+        setPositionOffset(0);
+    }, [startAction === null || startAction === void 0 ? void 0 : startAction.onLongSwipe, endAction === null || endAction === void 0 ? void 0 : endAction.onLongSwipe]);
+    var elementProps = useDrag({
+        onRelativePositionChange: onRelativePositionChange,
+        onEnd: onEnd,
+    }).elementProps;
+    var mainRef = useRef(null);
+    var startActionContentRef = useRef(null);
+    var endActionContentRef = useRef(null);
+    var x = useMemo(function () {
+        return Math.max(endAction ? Number.NEGATIVE_INFINITY : 0, Math.min(startAction ? Number.POSITIVE_INFINITY : 0, position + positionOffset));
+    }, [position, positionOffset, startAction, endAction]);
+    return (jsxs("div", { className: styles.wrapper, children: [startAction && x > 0 && (jsx(Action, { position: "start", content: startAction.content, background: startAction.background, contentRef: startActionContentRef })), endAction && x < 0 && (jsx(Action, { position: "end", content: endAction.content, background: endAction.background, contentRef: endActionContentRef })), jsx("div", { className: styles.main, ref: mainRef, style: {
+                    '--x': "".concat(x, "px"),
+                }, children: main(jsx("div", __assign({ className: styles.handle }, elementProps, { onClick: function (event) {
+                        if (isSwiping) {
+                            event.stopPropagation();
+                        }
+                    } }))) })] }));
+};
+var Action = function (_a) {
+    var content = _a.content, background = _a.background, position = _a.position, contentRef = _a.contentRef;
+    // @TODO: allow focus by tab key before visible
+    return (jsxs("div", { className: "".concat(styles.action, " ").concat(styles["is_position_".concat(position)]), children: [jsx("div", { className: styles.action_background, children: background }), jsx("div", { className: styles.action_content, ref: contentRef, children: content })] }));
+};
+
+export { SwipeAction };
+//# sourceMappingURL=SwipeAction.js.map

package/dist/SwipeAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeAction.js","sources":["../src/SwipeAction.tsx"],"sourcesContent":["'use client'\n\nimport type {\n\tCSSProperties,\n\tFunctionComponent,\n\tReactNode,\n\tRefObject,\n} from 'react'\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport { useDrag } from 'react-use-drag'\nimport styles from './SwipeAction.module.css'\n\n// @TODO: add inertia\n// @TODO: animate snapping\n// @TODO: add threshold - maybe to react-use-drag\n\ntype OnLongSwipe = () => void\ntype Content = ReactNode\n\ntype Action = {\n\tbackground?: ReactNode\n\tcontent?: Content\n\tonLongSwipe?: OnLongSwipe\n} & (\n\t\t| {\n\t\t\tcontent: Content\n\t\t}\n\t\t| {\n\t\t\tonLongSwipe: OnLongSwipe\n\t\t}\n\t)\n\ntype SwipeActionProps = {\n\tmain: (handle: ReactNode) => ReactNode\n\tstartAction?: Action\n\tendAction?: Action\n}\n\nexport const SwipeAction: FunctionComponent<SwipeActionProps> = ({\n\tstartAction,\n\tendAction,\n\tmain,\n}) => {\n\tconst [position, setPosition] = useState(0)\n\tconst [positionOffset, setPositionOffset] = useState(0)\n\tconst [isSwiping, setIsSwiping] = useState(false)\n\tconst onRelativePositionChange = useCallback((x: number) => {\n\t\tif (Math.abs(x) > 5) {\n\t\t\tsetIsSwiping(true)\n\t\t}\n\t\tsetPositionOffset(x)\n\t}, [])\n\tconst onEnd = useCallback(\n\t\t(x: number) => {\n\t\t\tif (x === 0) {\n\t\t\t\tsetIsSwiping(false)\n\t\t\t} else {\n\t\t\t\tsetPosition((position) => {\n\t\t\t\t\tconst newPosition = position + x\n\t\t\t\t\tconst mainWidth = mainRef.current?.offsetWidth ?? 0\n\n\t\t\t\t\tconst handleContent = (\n\t\t\t\t\t\tref: RefObject<HTMLDivElement>,\n\t\t\t\t\t\tposition: Position,\n\t\t\t\t\t\tonLongSwipe: undefined | OnLongSwipe,\n\t\t\t\t\t) => {\n\t\t\t\t\t\tconst contentWidth = ref.current?.offsetWidth\n\t\t\t\t\t\tconst positionSign = position === 'start' ? 1 : -1\n\t\t\t\t\t\tconst normalizedSwipePosition = positionSign * newPosition\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tonLongSwipe &&\n\t\t\t\t\t\t\tcontentWidth !== undefined &&\n\t\t\t\t\t\t\tnormalizedSwipePosition >\n\t\t\t\t\t\t\tMath.max(mainWidth / 4, contentWidth) * 1.6\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonLongSwipe()\n\t\t\t\t\t\t\treturn positionSign * mainWidth\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tcontentWidth !== 0 &&\n\t\t\t\t\t\t\tcontentWidth !== undefined &&\n\t\t\t\t\t\t\tnormalizedSwipePosition > contentWidth * 0.7\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\treturn positionSign * contentWidth\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (Math.sign(newPosition) === positionSign) {\n\t\t\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\t\t\tsetIsSwiping(false)\n\t\t\t\t\t\t\t}, 200) // Delay to ignore immediate click\n\t\t\t\t\t\t\treturn 0\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\thandleContent(\n\t\t\t\t\t\t\tstartActionContentRef,\n\t\t\t\t\t\t\t'start',\n\t\t\t\t\t\t\tstartAction?.onLongSwipe,\n\t\t\t\t\t\t) ??\n\t\t\t\t\t\thandleContent(endActionContentRef, 'end', endAction?.onLongSwipe) ??\n\t\t\t\t\t\tnewPosition\n\t\t\t\t\t)\n\t\t\t\t})\n\t\t\t}\n\t\t\tsetPositionOffset(0)\n\t\t},\n\t\t[startAction?.onLongSwipe, endAction?.onLongSwipe],\n\t)\n\tconst { elementProps } = useDrag({\n\t\tonRelativePositionChange,\n\t\tonEnd,\n\t})\n\tconst mainRef = useRef<HTMLDivElement>(null)\n\tconst startActionContentRef = useRef<HTMLDivElement>(null)\n\tconst endActionContentRef = useRef<HTMLDivElement>(null)\n\n\tconst x = useMemo(\n\t\t() =>\n\t\t\tMath.max(\n\t\t\t\tendAction ? Number.NEGATIVE_INFINITY : 0,\n\t\t\t\tMath.min(\n\t\t\t\t\tstartAction ? Number.POSITIVE_INFINITY : 0,\n\t\t\t\t\tposition + positionOffset,\n\t\t\t\t),\n\t\t\t),\n\t\t[position, positionOffset, startAction, endAction],\n\t)\n\n\treturn (\n\t\t<div className={styles.wrapper}>\n\t\t\t{startAction && x > 0 && (\n\t\t\t\t<Action\n\t\t\t\t\tposition=\"start\"\n\t\t\t\t\tcontent={startAction.content}\n\t\t\t\t\tbackground={startAction.background}\n\t\t\t\t\tcontentRef={startActionContentRef}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{endAction && x < 0 && (\n\t\t\t\t<Action\n\t\t\t\t\tposition=\"end\"\n\t\t\t\t\tcontent={endAction.content}\n\t\t\t\t\tbackground={endAction.background}\n\t\t\t\t\tcontentRef={endActionContentRef}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={styles.main}\n\t\t\t\tref={mainRef}\n\t\t\t\tstyle={\n\t\t\t\t\t{\n\t\t\t\t\t\t'--x': `${x}px`,\n\t\t\t\t\t} as CSSProperties\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{main(\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={styles.handle}\n\t\t\t\t\t\t{...elementProps}\n\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\tif (isSwiping) {\n\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ntype Position = 'start' | 'end'\n\nconst Action: FunctionComponent<{\n\tposition: Position\n\tcontent: ReactNode\n\tbackground: ReactNode\n\tcontentRef: RefObject<HTMLDivElement>\n}> = ({ content, background, position, contentRef }) => {\n\t// @TODO: allow focus by tab key before visible\n\treturn (\n\t\t<div className={`${styles.action} ${styles[`is_position_${position}`]}`}>\n\t\t\t<div className={styles.action_background}>{background}</div>\n\t\t\t<div className={styles.action_content} ref={contentRef}>\n\t\t\t\t{content}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"names":[],"mappings":";;;;;;;AAsCO;AACN;;;;AAOA;;;;;;AAMA;AAEE;;;;;;AAIE;;AAGA;;;AAMC;AACA;AACA;AAEC;;AAEA;AAEA;;;;AAKA;AACA;;;;AAKA;;AAEA;AACA;;AAEF;AAEA;AASD;;;AAGF;;AAIA;AACA;AACA;AACD;AACA;AACA;;AAIE;;AAUF;;AAwBsB;;;;AAWjB;AAMN;AAIA;;;AAOC;AAQD;;"}

package/dist/SwipeAction.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"wrapper":"SwipeAction-module_wrapper__mMOfu","main":"SwipeAction-module_main__IyTI6","action":"SwipeAction-module_action__vnzRV","is_position_start":"SwipeAction-module_is_position_start__225Dj","is_position_end":"SwipeAction-module_is_position_end__I5n3C","action_content":"SwipeAction-module_action_content__9InP7","action_background":"SwipeAction-module_action_background__7lqwm","handle":"SwipeAction-module_handle__kuDx1"};
+
+export { styles as default };
+//# sourceMappingURL=SwipeAction.module.css.js.map

package/dist/SwipeAction.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeAction.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/SwipeAction.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+import './SwipeAction.stories.css';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const All: Story;

package/dist/_virtual/_tslib.js

@@ -0,0 +1,35 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __assign };
+//# sourceMappingURL=_tslib.js.map

package/dist/_virtual/_tslib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_tslib.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.css

@@ -0,0 +1,41 @@
+.SwipeAction-module_wrapper__mMOfu {
+	isolation: isolate;
+	position: relative;
+}
+
+.SwipeAction-module_main__IyTI6 {
+	position: relative;
+	translate: var(--x, 0) 0;
+}
+
+.SwipeAction-module_action__vnzRV {
+	display: flex;
+	position: absolute;
+	inset: 0;
+	align-items: stretch;
+}
+
+.SwipeAction-module_action__vnzRV.SwipeAction-module_is_position_start__225Dj {
+	justify-content: flex-start;
+}
+
+.SwipeAction-module_action__vnzRV.SwipeAction-module_is_position_end__I5n3C {
+	justify-content: flex-end;
+}
+
+.SwipeAction-module_action_content__9InP7 {
+	display: grid;
+}
+
+.SwipeAction-module_action_background__7lqwm {
+	position: absolute;
+	inset: 0;
+	display: grid;
+	z-index: -1;
+}
+
+.SwipeAction-module_handle__kuDx1 {
+	position: absolute;
+	inset: 0;
+	touch-action: pan-y;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './SwipeAction';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { SwipeAction } from './SwipeAction.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,65 @@
+{
+	"name": "react-swipe-action",
+	"version": "0.0.1",
+	"description": "",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"start": "rollup -c -w",
+		"build": "rollup -c",
+		"prepare": "npm run build",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/FilipChalupa/react-swipe-action.git"
+	},
+	"keywords": [
+		"typescript",
+		"react",
+		"swipe"
+	],
+	"author": {
+		"name": "Filip Chalupa",
+		"email": "chalupa.filip@gmail.com",
+		"url": "https://www.npmjs.com/~onset"
+	},
+	"license": "ISC",
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^25.0.7",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@storybook/addon-essentials": "^7.6.16",
+		"@storybook/addon-interactions": "^7.6.16",
+		"@storybook/addon-links": "^7.6.16",
+		"@storybook/addon-onboarding": "^1.0.11",
+		"@storybook/blocks": "^7.6.16",
+		"@storybook/react": "^7.6.16",
+		"@storybook/react-vite": "^7.6.16",
+		"@storybook/test": "^7.6.16",
+		"@types/react": "^18.2.57",
+		"@types/react-dom": "^18.2.19",
+		"prettier": "^3.0.3",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"rollup": "^4.2.0",
+		"rollup-plugin-delete": "^2.0.0",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-preserve-directives": "^0.3.1",
+		"rollup-plugin-typescript2": "^0.36.0",
+		"storybook": "^7.6.16",
+		"typescript": "^5.3.3",
+		"typescript-plugin-css-modules": "^5.0.2"
+	},
+	"peerDependencies": {
+		"react": "17 || 18 || 19"
+	},
+	"files": [
+		"/dist/"
+	],
+	"dependencies": {
+		"react-use-drag": "^0.3.2"
+	}
+}