@chayns-components/swipeable-wrapper 5.0.0-beta.1000

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobit Laboratories AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+<div align="center">
+    <h1>
+        <img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
+    </h1>
+    <p>A set of beautiful React components for developing your own applications with chayns.</p>
+    <div>
+        <img src="https://img.shields.io/npm/dm/@chayns-components/typewriter.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/typewriter?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+    </div>
+</div>
+
+---
+
+## Installation
+
+First you need to install the swipeable wrapper part of the chayns-components.
+
+```bash
+# NPM
+npm install @chayns-components/swipeable-wrapper
+
+# Yarn
+yarn add @chayns-components/swipeable-wrapper
+```
+
+> **Information:** Since the components have now been implemented with the styled-components
+> library, the styles are delivered directly with the components. There is no need to load an extra
+> stylesheet anymore.
+
+## Usage
+
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _threshold = require("../../utils/threshold");
+var _SwipeableAction = _interopRequireWildcard(require("./swipeable-action/SwipeableAction"));
+var _SwipeableWrapper = require("./SwipeableWrapper.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SwipeableWrapper = ({
+  children,
+  leftActions = [],
+  rightActions = [],
+  shouldUseOpacityAnimation
+}) => {
+  const [leftThreshold, setLeftThreshold] = (0, _react.useState)((0, _threshold.calcThreshold)({
+    actionCount: leftActions.length,
+    direction: 'left',
+    width: window.innerWidth
+  }));
+  const [rightThreshold, setRightThreshold] = (0, _react.useState)((0, _threshold.calcThreshold)({
+    actionCount: rightActions.length,
+    direction: 'right',
+    width: window.innerWidth
+  }));
+  const swipeableWrapperRef = (0, _react.useRef)(null);
+  const listItemXOffset = (0, _framerMotion.useMotionValue)(0);
+  const close = (0, _react.useCallback)(() => {
+    void (0, _framerMotion.animate)(listItemXOffset, 0);
+  }, [listItemXOffset]);
+  const open = (0, _react.useCallback)(direction => {
+    switch (direction) {
+      case 'left':
+        void (0, _framerMotion.animate)(listItemXOffset, _SwipeableAction.SWIPEABLE_ACTION_WIDTH * leftActions.length);
+        break;
+      case 'right':
+        void (0, _framerMotion.animate)(listItemXOffset, -_SwipeableAction.SWIPEABLE_ACTION_WIDTH * rightActions.length);
+        break;
+      default:
+        break;
+    }
+  }, [leftActions.length, listItemXOffset, rightActions.length]);
+  (0, _react.useEffect)(() => {
+    var _swipeableWrapperRef$;
+    const width = (_swipeableWrapperRef$ = swipeableWrapperRef.current) === null || _swipeableWrapperRef$ === void 0 || (_swipeableWrapperRef$ = _swipeableWrapperRef$.parentElement) === null || _swipeableWrapperRef$ === void 0 ? void 0 : _swipeableWrapperRef$.offsetWidth;
+
+    // This check was deliberately chosen because a width of 0 is also not permitted.
+    if (width) {
+      setLeftThreshold((0, _threshold.calcThreshold)({
+        actionCount: leftActions.length,
+        direction: 'left',
+        width
+      }));
+      setRightThreshold((0, _threshold.calcThreshold)({
+        actionCount: rightActions.length,
+        direction: 'right',
+        width
+      }));
+    }
+  }, [leftActions.length, rightActions.length]);
+
+  // Close an opened menu when anything outside it is tapped
+  (0, _react.useEffect)(() => {
+    function closeCallback(event) {
+      var _swipeableWrapperRef$2;
+      const eventTarget = event.target;
+
+      // @ts-expect-error: Pretty sure that the event target is always a Node.
+      if (eventTarget && !((_swipeableWrapperRef$2 = swipeableWrapperRef.current) !== null && _swipeableWrapperRef$2 !== void 0 && _swipeableWrapperRef$2.contains(eventTarget))) {
+        close();
+      }
+    }
+    document.addEventListener('mousedown', closeCallback);
+    document.addEventListener('touchstart', closeCallback);
+    return () => {
+      document.removeEventListener('mousedown', closeCallback);
+      document.removeEventListener('touchstart', closeCallback);
+    };
+  }, [close]);
+
+  // Vibrate when the threshold is passed
+  (0, _react.useEffect)(() => listItemXOffset.onChange(newValue => {
+    const previous = listItemXOffset.getPrevious();
+    if (!previous) {
+      return;
+    }
+    const hasCrossedLeftThreshold = previous < leftThreshold && newValue >= leftThreshold || previous > leftThreshold && newValue <= leftThreshold;
+    const hasCrossedRightThreshold = previous < rightThreshold && newValue >= rightThreshold || previous > rightThreshold && newValue <= rightThreshold;
+    if (hasCrossedLeftThreshold || hasCrossedRightThreshold) {
+      void (0, _chaynsApi.vibrate)({
+        iOSFeedbackVibration: 6,
+        pattern: [150]
+      });
+    }
+  }), [leftThreshold, listItemXOffset, rightThreshold]);
+  const handlePan = (0, _react.useCallback)((_, info) => {
+    const currentXOffset = listItemXOffset.get();
+    const dampingFactor = info.offset.x > 0 && leftActions.length > 0 || info.offset.x < 0 && rightActions.length > 0 || currentXOffset > 0 && info.delta.x < 0 || currentXOffset < 0 && info.delta.x > 0 ? 1 : 0.75 / (Math.abs(info.offset.x) / 9);
+    if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {
+      listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);
+    }
+  }, [leftActions.length, listItemXOffset, rightActions.length]);
+  const handlePanEnd = (0, _react.useCallback)(() => {
+    const offset = listItemXOffset.get();
+    if (offset > leftThreshold) {
+      var _leftActions$;
+      (_leftActions$ = leftActions[0]) === null || _leftActions$ === void 0 || _leftActions$.action();
+      close();
+    } else if (offset < rightThreshold) {
+      var _rightActions;
+      (_rightActions = rightActions[rightActions.length - 1]) === null || _rightActions === void 0 || _rightActions.action();
+      close();
+    } else {
+      let state;
+      if (offset > 2) {
+        state = 'left-open';
+      } else if (offset < -2) {
+        state = 'right-open';
+      } else {
+        state = 'closed';
+      }
+
+      // eslint-disable-next-line default-case
+      switch (state) {
+        case 'left-open':
+          if (offset < _SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+            close();
+          } else {
+            open('left');
+          }
+          break;
+        case 'right-open':
+          if (offset > -_SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+            close();
+          } else {
+            open('right');
+          }
+          break;
+        case 'closed':
+          if (offset > _SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+            open('left');
+          } else if (offset < -_SwipeableAction.SWIPEABLE_ACTION_WIDTH) {
+            open('right');
+          } else {
+            close();
+          }
+      }
+    }
+  }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);
+  const leftActionElements = (0, _react.useMemo)(() => Array.from(leftActions).reverse().map((item, index) => /*#__PURE__*/_react.default.createElement(_SwipeableAction.default, {
+    activationThreshold: leftThreshold,
+    close: close,
+    index: index,
+    item: item,
+    key: item.key,
+    listItemXOffset: listItemXOffset,
+    position: "left",
+    shouldUseOpacityAnimation: shouldUseOpacityAnimation,
+    totalActionCount: leftActions.length
+  })), [close, leftActions, leftThreshold, listItemXOffset, shouldUseOpacityAnimation]);
+  const rightActionElements = (0, _react.useMemo)(() => rightActions.map((item, index) => /*#__PURE__*/_react.default.createElement(_SwipeableAction.default, {
+    activationThreshold: rightThreshold,
+    close: close,
+    index: index,
+    item: item,
+    key: item.key,
+    listItemXOffset: listItemXOffset,
+    position: "right",
+    shouldUseOpacityAnimation: shouldUseOpacityAnimation,
+    totalActionCount: rightActions.length
+  })), [rightActions, rightThreshold, close, listItemXOffset, shouldUseOpacityAnimation]);
+  return /*#__PURE__*/_react.default.createElement(_SwipeableWrapper.StyledMotionSwipeableWrapper, {
+    onPan: handlePan,
+    onPanEnd: handlePanEnd,
+    ref: swipeableWrapperRef,
+    style: {
+      x: listItemXOffset
+    }
+  }, leftActionElements, /*#__PURE__*/_react.default.createElement(_SwipeableWrapper.StyledSwipeableWrapperContent, null, children), rightActionElements);
+};
+SwipeableWrapper.displayName = 'SwipeableWrapper';
+var _default = exports.default = SwipeableWrapper;
+//# sourceMappingURL=SwipeableWrapper.js.map

package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableWrapper.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_threshold","_SwipeableAction","_SwipeableWrapper","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SwipeableWrapper","children","leftActions","rightActions","shouldUseOpacityAnimation","leftThreshold","setLeftThreshold","useState","calcThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","useRef","listItemXOffset","useMotionValue","close","useCallback","animate","open","SWIPEABLE_ACTION_WIDTH","useEffect","_swipeableWrapperRef$","current","parentElement","offsetWidth","closeCallback","event","_swipeableWrapperRef$2","eventTarget","target","contains","document","addEventListener","removeEventListener","onChange","newValue","previous","getPrevious","hasCrossedLeftThreshold","hasCrossedRightThreshold","vibrate","iOSFeedbackVibration","pattern","handlePan","_","info","currentXOffset","dampingFactor","offset","x","delta","Math","abs","handlePanEnd","_leftActions$","action","_rightActions","state","leftActionElements","useMemo","Array","from","reverse","map","item","index","createElement","activationThreshold","key","position","totalActionCount","rightActionElements","StyledMotionSwipeableWrapper","onPan","onPanEnd","ref","style","StyledSwipeableWrapperContent","displayName","_default","exports"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.tsx"],"sourcesContent":["import { vibrate } from 'chayns-api';\nimport { animate, PanInfo, useMotionValue } from 'framer-motion';\nimport React, {\n    CSSProperties,\n    FC,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calcThreshold } from '../../utils/threshold';\nimport SwipeableAction, { SWIPEABLE_ACTION_WIDTH } from './swipeable-action/SwipeableAction';\nimport {\n    StyledMotionSwipeableWrapper,\n    StyledSwipeableWrapperContent,\n} from './SwipeableWrapper.styles';\n\nexport type SwipeableActionItem = {\n    action: VoidFunction;\n    backgroundColor: CSSProperties['backgroundColor'];\n    color: CSSProperties['color'];\n    text?: ReactNode;\n    icon: ReactNode;\n    key: string;\n};\n\nexport type SwipeableWrapperProps = {\n    /**\n     * The content of the Swipeable item.\n     */\n    children: ReactNode;\n    /**\n     * The left-side actions, ordered from the left to the right.\n     */\n    leftActions?: SwipeableActionItem[];\n    /**\n     * The right-side actions, ordered from left to the right.\n     */\n    rightActions?: SwipeableActionItem[];\n    /**\n     * Whether the opacity should be animated when swiping in the actions.\n     */\n    shouldUseOpacityAnimation?: boolean;\n};\n\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n    children,\n    leftActions = [],\n    rightActions = [],\n    shouldUseOpacityAnimation,\n}) => {\n    const [leftThreshold, setLeftThreshold] = useState(\n        calcThreshold({\n            actionCount: leftActions.length,\n            direction: 'left',\n            width: window.innerWidth,\n        }),\n    );\n\n    const [rightThreshold, setRightThreshold] = useState(\n        calcThreshold({\n            actionCount: rightActions.length,\n            direction: 'right',\n            width: window.innerWidth,\n        }),\n    );\n\n    const swipeableWrapperRef = useRef<HTMLDivElement | null>(null);\n\n    const listItemXOffset = useMotionValue(0);\n\n    const close = useCallback(() => {\n        void animate(listItemXOffset, 0);\n    }, [listItemXOffset]);\n\n    const open = useCallback(\n        (direction: 'left' | 'right') => {\n            switch (direction) {\n                case 'left':\n                    void animate(listItemXOffset, SWIPEABLE_ACTION_WIDTH * leftActions.length);\n                    break;\n                case 'right':\n                    void animate(listItemXOffset, -SWIPEABLE_ACTION_WIDTH * rightActions.length);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    useEffect(() => {\n        const width = swipeableWrapperRef.current?.parentElement?.offsetWidth;\n\n        // This check was deliberately chosen because a width of 0 is also not permitted.\n        if (width) {\n            setLeftThreshold(\n                calcThreshold({\n                    actionCount: leftActions.length,\n                    direction: 'left',\n                    width,\n                }),\n            );\n\n            setRightThreshold(\n                calcThreshold({\n                    actionCount: rightActions.length,\n                    direction: 'right',\n                    width,\n                }),\n            );\n        }\n    }, [leftActions.length, rightActions.length]);\n\n    // Close an opened menu when anything outside it is tapped\n    useEffect(() => {\n        function closeCallback(event: MouseEvent | TouchEvent) {\n            const eventTarget = event.target;\n\n            // @ts-expect-error: Pretty sure that the event target is always a Node.\n            if (eventTarget && !swipeableWrapperRef.current?.contains(eventTarget)) {\n                close();\n            }\n        }\n\n        document.addEventListener('mousedown', closeCallback);\n        document.addEventListener('touchstart', closeCallback);\n\n        return () => {\n            document.removeEventListener('mousedown', closeCallback);\n            document.removeEventListener('touchstart', closeCallback);\n        };\n    }, [close]);\n\n    // Vibrate when the threshold is passed\n    useEffect(\n        () =>\n            listItemXOffset.onChange((newValue: number) => {\n                const previous = listItemXOffset.getPrevious();\n\n                if (!previous) {\n                    return;\n                }\n\n                const hasCrossedLeftThreshold =\n                    (previous < leftThreshold && newValue >= leftThreshold) ||\n                    (previous > leftThreshold && newValue <= leftThreshold);\n\n                const hasCrossedRightThreshold =\n                    (previous < rightThreshold && newValue >= rightThreshold) ||\n                    (previous > rightThreshold && newValue <= rightThreshold);\n\n                if (hasCrossedLeftThreshold || hasCrossedRightThreshold) {\n                    void vibrate({ iOSFeedbackVibration: 6, pattern: [150] });\n                }\n            }),\n        [leftThreshold, listItemXOffset, rightThreshold],\n    );\n\n    const handlePan = useCallback(\n        (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {\n            const currentXOffset = listItemXOffset.get();\n\n            const dampingFactor =\n                (info.offset.x > 0 && leftActions.length > 0) ||\n                (info.offset.x < 0 && rightActions.length > 0) ||\n                (currentXOffset > 0 && info.delta.x < 0) ||\n                (currentXOffset < 0 && info.delta.x > 0)\n                    ? 1\n                    : 0.75 / (Math.abs(info.offset.x) / 9);\n\n            if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {\n                listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);\n            }\n        },\n        [leftActions.length, listItemXOffset, rightActions.length],\n    );\n\n    const handlePanEnd = useCallback(() => {\n        const offset = listItemXOffset.get();\n\n        if (offset > leftThreshold) {\n            leftActions[0]?.action();\n            close();\n        } else if (offset < rightThreshold) {\n            rightActions[rightActions.length - 1]?.action();\n            close();\n        } else {\n            let state: 'left-open' | 'right-open' | 'closed';\n\n            if (offset > 2) {\n                state = 'left-open';\n            } else if (offset < -2) {\n                state = 'right-open';\n            } else {\n                state = 'closed';\n            }\n\n            // eslint-disable-next-line default-case\n            switch (state) {\n                case 'left-open':\n                    if (offset < SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('left');\n                    }\n                    break;\n                case 'right-open':\n                    if (offset > -SWIPEABLE_ACTION_WIDTH) {\n                        close();\n                    } else {\n                        open('right');\n                    }\n                    break;\n                case 'closed':\n                    if (offset > SWIPEABLE_ACTION_WIDTH) {\n                        open('left');\n                    } else if (offset < -SWIPEABLE_ACTION_WIDTH) {\n                        open('right');\n                    } else {\n                        close();\n                    }\n            }\n        }\n    }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);\n\n    const leftActionElements = useMemo(\n        () =>\n            Array.from(leftActions)\n                .reverse()\n                .map((item, index) => (\n                    <SwipeableAction\n                        activationThreshold={leftThreshold}\n                        close={close}\n                        index={index}\n                        item={item}\n                        key={item.key}\n                        listItemXOffset={listItemXOffset}\n                        position=\"left\"\n                        shouldUseOpacityAnimation={shouldUseOpacityAnimation}\n                        totalActionCount={leftActions.length}\n                    />\n                )),\n        [close, leftActions, leftThreshold, listItemXOffset, shouldUseOpacityAnimation],\n    );\n\n    const rightActionElements = useMemo(\n        () =>\n            rightActions.map((item, index) => (\n                <SwipeableAction\n                    activationThreshold={rightThreshold}\n                    close={close}\n                    index={index}\n                    item={item}\n                    key={item.key}\n                    listItemXOffset={listItemXOffset}\n                    position=\"right\"\n                    shouldUseOpacityAnimation={shouldUseOpacityAnimation}\n                    totalActionCount={rightActions.length}\n                />\n            )),\n        [rightActions, rightThreshold, close, listItemXOffset, shouldUseOpacityAnimation],\n    );\n\n    return (\n        <StyledMotionSwipeableWrapper\n            onPan={handlePan}\n            onPanEnd={handlePanEnd}\n            ref={swipeableWrapperRef}\n            style={{ x: listItemXOffset }}\n        >\n            {leftActionElements}\n            <StyledSwipeableWrapperContent>{children}</StyledSwipeableWrapperContent>\n            {rightActionElements}\n        </StyledMotionSwipeableWrapper>\n    );\n};\n\nSwipeableWrapper.displayName = 'SwipeableWrapper';\n\nexport default SwipeableWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSwipeableWrapperContent = exports.StyledMotionSwipeableWrapper = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMotionSwipeableWrapper = exports.StyledMotionSwipeableWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    position: relative;
+    touch-action: pan-y;
+    user-select: none;
+`;
+const StyledSwipeableWrapperContent = exports.StyledSwipeableWrapperContent = _styledComponents.default.div`
+    width: 100%;
+`;
+//# sourceMappingURL=SwipeableWrapper.styles.js.map

package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableWrapper.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionSwipeableWrapper","exports","styled","motion","div","StyledSwipeableWrapperContent"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)<FramerMotionBugFix>`\n    position: relative;\n    touch-action: pan-y;\n    user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n    width: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqB;AAClF;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAG;AACvD;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SWIPEABLE_ACTION_WIDTH = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _SwipeableAction = require("./SwipeableAction.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SWIPEABLE_ACTION_WIDTH = exports.SWIPEABLE_ACTION_WIDTH = 72;
+const SwipeableAction = ({
+  activationThreshold,
+  close,
+  index,
+  item,
+  listItemXOffset,
+  position,
+  shouldUseOpacityAnimation,
+  totalActionCount
+}) => {
+  const [pointerEvents, setPointerEvents] = _react.default.useState('none');
+  const handleButtonClick = () => {
+    item.action();
+    close();
+  };
+
+  /**
+   * By default, the action sticks to the content of the swipeable item. This
+   * makes it move outwards to reveal the inner items.
+   */
+  const actionOffset = (0, _framerMotion.useTransform)(listItemXOffset, newValue => {
+    const maxOffset = SWIPEABLE_ACTION_WIDTH * index;
+    const fractionalOffset = -newValue / totalActionCount * index;
+    switch (position) {
+      case 'left':
+        return Math.max(-maxOffset, fractionalOffset);
+      case 'right':
+        return Math.min(maxOffset, fractionalOffset);
+      default:
+        return 0;
+    }
+  });
+
+  /**
+   * Brings the item in again if past the threshold. Only relevant for
+   * outermost items.
+   */
+  const actionOverlayOffset = (0, _framerMotion.useSpring)(0, {
+    bounce: 0
+  });
+
+  /**
+   * Combines the two values above to create the correct X transform that has
+   * to be applied to the action.
+   */
+  const actionX = (0, _framerMotion.useTransform)([actionOffset, actionOverlayOffset], ([x, y]) => {
+    if (position === 'left') {
+      return Math.min((x ?? 0) + (y ?? 0), 0);
+    }
+    return Math.max((x ?? 0) + (y ?? 0), 0);
+  });
+  const opacity = (0, _framerMotion.useTransform)(listItemXOffset, x => Math.max(0, Math.min(1, Math.abs(x) / 72)));
+  (0, _framerMotion.useMotionValueEvent)(opacity, 'change', value => {
+    setPointerEvents(value < 0.5 ? 'none' : 'auto');
+  });
+
+  // Animate to the middle after passing threshold if outermost item
+  (0, _react.useEffect)(() => {
+    const isOuterMost = index === totalActionCount - 1;
+    if (!isOuterMost) return undefined;
+    return listItemXOffset.onChange(newValue => {
+      const lastValue = listItemXOffset.getPrevious();
+      if (!lastValue) {
+        return;
+      }
+
+      // eslint-disable-next-line default-case
+      switch (position) {
+        case 'left':
+          if (newValue > activationThreshold && lastValue <= activationThreshold) {
+            actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * index);
+          } else if (newValue < activationThreshold && lastValue >= activationThreshold) {
+            actionOverlayOffset.set(0);
+          }
+          break;
+        case 'right':
+          if (newValue < activationThreshold && lastValue >= activationThreshold) {
+            actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * -1 * index);
+          } else if (newValue > activationThreshold && lastValue <= activationThreshold) {
+            actionOverlayOffset.set(0);
+          }
+      }
+    });
+  }, [actionOverlayOffset, activationThreshold, index, listItemXOffset, position, totalActionCount]);
+  return /*#__PURE__*/_react.default.createElement(_SwipeableAction.StyledMotionSwipeableAction, {
+    $backgroundColor: item.backgroundColor,
+    $position: position,
+    style: {
+      x: actionX,
+      opacity: shouldUseOpacityAnimation ? opacity : 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SwipeableAction.StyledSwipeableActionButton, {
+    onClick: handleButtonClick,
+    style: {
+      pointerEvents
+    },
+    $color: item.color,
+    $width: `${SWIPEABLE_ACTION_WIDTH}px`
+  }, item.icon, item.text));
+};
+SwipeableAction.displayName = 'SwipeableAction';
+var _default = exports.default = SwipeableAction;
+//# sourceMappingURL=SwipeableAction.js.map

package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableAction.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_SwipeableAction","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SWIPEABLE_ACTION_WIDTH","exports","SwipeableAction","activationThreshold","close","index","item","listItemXOffset","position","shouldUseOpacityAnimation","totalActionCount","pointerEvents","setPointerEvents","React","useState","handleButtonClick","action","actionOffset","useTransform","newValue","maxOffset","fractionalOffset","Math","max","min","actionOverlayOffset","useSpring","bounce","actionX","x","y","opacity","abs","useMotionValueEvent","value","useEffect","isOuterMost","undefined","onChange","lastValue","getPrevious","createElement","StyledMotionSwipeableAction","$backgroundColor","backgroundColor","$position","style","StyledSwipeableActionButton","onClick","$color","color","$width","icon","text","displayName","_default"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.tsx"],"sourcesContent":["import { MotionValue, useMotionValueEvent, useSpring, useTransform } from 'framer-motion';\nimport React, { FC, useEffect } from 'react';\nimport type { SwipeableActionItem } from '../SwipeableWrapper';\nimport { StyledMotionSwipeableAction, StyledSwipeableActionButton } from './SwipeableAction.styles';\n\nexport const SWIPEABLE_ACTION_WIDTH = 72;\n\nexport type SwipeableActionProps = {\n    activationThreshold: number;\n    close: VoidFunction;\n    index: number;\n    item: SwipeableActionItem;\n    listItemXOffset: MotionValue<number>;\n    position: 'left' | 'right';\n    shouldUseOpacityAnimation?: boolean;\n    totalActionCount: number;\n};\n\nconst SwipeableAction: FC<SwipeableActionProps> = ({\n    activationThreshold,\n    close,\n    index,\n    item,\n    listItemXOffset,\n    position,\n    shouldUseOpacityAnimation,\n    totalActionCount,\n}) => {\n    const [pointerEvents, setPointerEvents] = React.useState<'auto' | 'none'>('none');\n\n    const handleButtonClick = () => {\n        item.action();\n        close();\n    };\n\n    /**\n     * By default, the action sticks to the content of the swipeable item. This\n     * makes it move outwards to reveal the inner items.\n     */\n    const actionOffset = useTransform(listItemXOffset, (newValue) => {\n        const maxOffset = SWIPEABLE_ACTION_WIDTH * index;\n        const fractionalOffset = (-newValue / totalActionCount) * index;\n\n        switch (position) {\n            case 'left':\n                return Math.max(-maxOffset, fractionalOffset);\n            case 'right':\n                return Math.min(maxOffset, fractionalOffset);\n            default:\n                return 0;\n        }\n    });\n\n    /**\n     * Brings the item in again if past the threshold. Only relevant for\n     * outermost items.\n     */\n    const actionOverlayOffset = useSpring(0, {\n        bounce: 0,\n    }) as MotionValue<number>;\n\n    /**\n     * Combines the two values above to create the correct X transform that has\n     * to be applied to the action.\n     */\n    const actionX = useTransform<number, number>([actionOffset, actionOverlayOffset], ([x, y]) => {\n        if (position === 'left') {\n            return Math.min((x ?? 0) + (y ?? 0), 0);\n        }\n\n        return Math.max((x ?? 0) + (y ?? 0), 0);\n    });\n\n    const opacity = useTransform(listItemXOffset, (x) =>\n        Math.max(0, Math.min(1, Math.abs(x) / 72)),\n    );\n\n    useMotionValueEvent(opacity, 'change', (value) => {\n        setPointerEvents(value < 0.5 ? 'none' : 'auto');\n    });\n\n    // Animate to the middle after passing threshold if outermost item\n    useEffect(() => {\n        const isOuterMost = index === totalActionCount - 1;\n\n        if (!isOuterMost) return undefined;\n\n        return listItemXOffset.onChange((newValue) => {\n            const lastValue = listItemXOffset.getPrevious();\n\n            if (!lastValue) {\n                return;\n            }\n\n            // eslint-disable-next-line default-case\n            switch (position) {\n                case 'left':\n                    if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * index);\n                    } else if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n                    break;\n                case 'right':\n                    if (newValue < activationThreshold && lastValue >= activationThreshold) {\n                        actionOverlayOffset.set(SWIPEABLE_ACTION_WIDTH * -1 * index);\n                    } else if (newValue > activationThreshold && lastValue <= activationThreshold) {\n                        actionOverlayOffset.set(0);\n                    }\n            }\n        });\n    }, [\n        actionOverlayOffset,\n        activationThreshold,\n        index,\n        listItemXOffset,\n        position,\n        totalActionCount,\n    ]);\n\n    return (\n        <StyledMotionSwipeableAction\n            $backgroundColor={item.backgroundColor}\n            $position={position}\n            style={{ x: actionX, opacity: shouldUseOpacityAnimation ? opacity : 1 }}\n        >\n            <StyledSwipeableActionButton\n                onClick={handleButtonClick}\n                style={{ pointerEvents }}\n                $color={item.color}\n                $width={`${SWIPEABLE_ACTION_WIDTH}px`}\n            >\n                {item.icon}\n                {item.text}\n            </StyledSwipeableActionButton>\n        </StyledMotionSwipeableAction>\n    );\n};\n\nSwipeableAction.displayName = 'SwipeableAction';\n\nexport default SwipeableAction;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSwipeableActionButton = exports.StyledMotionSwipeableAction = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledMotionSwipeableAction = exports.StyledMotionSwipeableAction = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${({
+  $backgroundColor
+}) => $backgroundColor};
+    display: flex;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 200vw;
+
+    ${({
+  $position
+}) => {
+  if ($position === 'left') {
+    return (0, _styledComponents.css)`
+                justify-content: flex-end;
+                right: 100%;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            justify-content: flex-start;
+            left: 100%;
+        `;
+}}
+`;
+const StyledSwipeableActionButton = exports.StyledSwipeableActionButton = _styledComponents.default.button`
+    align-items: center;
+    appearance: none;
+    background: none;
+    box-shadow: none;
+    color: ${({
+  $color
+}) => $color};
+    display: flex;
+    flex-direction: column;
+    font-size: 88%;
+    gap: 4px;
+    height: 100%;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    width: ${({
+  $width
+}) => $width};
+`;
+//# sourceMappingURL=SwipeableAction.styles.js.map

package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableAction.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionSwipeableAction","exports","styled","motion","div","$backgroundColor","$position","css","StyledSwipeableActionButton","button","$color","$width"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\ntype StyledSwipeableActionProps = {\n    $position: 'left' | 'right';\n    $backgroundColor: CSSProperties['backgroundColor'];\n};\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n    display: flex;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    width: 200vw;\n\n    ${({ $position }) => {\n        if ($position === 'left') {\n            return css`\n                justify-content: flex-end;\n                right: 100%;\n            `;\n        }\n        return css`\n            justify-content: flex-start;\n            left: 100%;\n        `;\n    }}\n`;\n\ntype StyledSwipeableActionButtonsProps = {\n    $width: CSSProperties['width'];\n    $color: CSSProperties['color'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n    align-items: center;\n    appearance: none;\n    background: none;\n    box-shadow: none;\n    color: ${({ $color }) => $color};\n    display: flex;\n    flex-direction: column;\n    font-size: 88%;\n    gap: 4px;\n    height: 100%;\n    justify-content: center;\n    margin: 0;\n    padding: 0;\n    width: ${({ $width }) => $width};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOzC,MAAMW,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAA6B;AACzF,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAU,CAAC,KAAK;EACjB,IAAIA,SAAS,KAAK,MAAM,EAAE;IACtB,OAAO,IAAAC,qBAAG;AACtB;AACA;AACA,aAAa;EACL;EACA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAOM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACO,MAAyC;AAC3F;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC,CAAC","ignoreList":[]}

package/lib/cjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SwipeableWrapper", {
+  enumerable: true,
+  get: function () {
+    return _SwipeableWrapper.default;
+  }
+});
+var _SwipeableWrapper = _interopRequireDefault(require("./components/swipeable-wrapper/SwipeableWrapper"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_SwipeableWrapper","_interopRequireDefault","require","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as SwipeableWrapper } from './components/swipeable-wrapper/SwipeableWrapper';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8F,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/cjs/utils/threshold.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calcThreshold = void 0;
+var _SwipeableAction = require("../components/swipeable-wrapper/swipeable-action/SwipeableAction");
+const calcThreshold = ({
+  actionCount,
+  direction,
+  width
+}) => Math.max(width / 2, _SwipeableAction.SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);
+exports.calcThreshold = calcThreshold;
+//# sourceMappingURL=threshold.js.map

package/lib/cjs/utils/threshold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"threshold.js","names":["_SwipeableAction","require","calcThreshold","actionCount","direction","width","Math","max","SWIPEABLE_ACTION_WIDTH","exports"],"sources":["../../../src/utils/threshold.ts"],"sourcesContent":["import { SWIPEABLE_ACTION_WIDTH } from '../components/swipeable-wrapper/swipeable-action/SwipeableAction';\n\ninterface CalcThresholdOptions {\n    actionCount: number;\n    direction: 'left' | 'right';\n    width: number;\n}\n\nexport const calcThreshold = ({ actionCount, direction, width }: CalcThresholdOptions) =>\n    Math.max(width / 2, SWIPEABLE_ACTION_WIDTH * actionCount) * (direction === 'left' ? 1 : -1);\n"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AAQO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;EAAEC;AAA4B,CAAC,KACjFC,IAAI,CAACC,GAAG,CAACF,KAAK,GAAG,CAAC,EAAEG,uCAAsB,GAAGL,WAAW,CAAC,IAAIC,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AAACK,OAAA,CAAAP,aAAA,GAAAA,aAAA","ignoreList":[]}