@chayns-components/swipeable-wrapper 5.0.0-beta.997 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.js +40 -27
  2. package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.js.map +1 -1
  3. package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.styles.js +2 -2
  4. package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.styles.js.map +1 -1
  5. package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.js +12 -13
  6. package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map +1 -1
  7. package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js +3 -4
  8. package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map +1 -1
  9. package/lib/cjs/index.js.map +1 -1
  10. package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.js +26 -13
  11. package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.js.map +1 -1
  12. package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.styles.js +1 -1
  13. package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.styles.js.map +1 -1
  14. package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.js +12 -14
  15. package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map +1 -1
  16. package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js +13 -23
  17. package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map +1 -1
  18. package/lib/esm/index.js.map +1 -1
  19. package/lib/esm/utils/threshold.js +5 -8
  20. package/lib/esm/utils/threshold.js.map +1 -1
  21. package/lib/types/components/swipeable-wrapper/SwipeableWrapper.d.ts +12 -0
  22. package/lib/types/components/swipeable-wrapper/SwipeableWrapper.styles.d.ts +2 -265
  23. package/lib/types/components/swipeable-wrapper/swipeable-action/SwipeableAction.d.ts +1 -1
  24. package/lib/types/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.d.ts +2 -263
  25. package/lib/types/index.d.ts +1 -0
  26. package/package.json +20 -18
@@ -5,47 +5,50 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var _chaynsApi = require("chayns-api");
8
- var _framerMotion = require("framer-motion");
9
- var _react = _interopRequireWildcard(require("react"));
8
+ var _react = require("motion/react");
9
+ var _react2 = _interopRequireWildcard(require("react"));
10
10
  var _threshold = require("../../utils/threshold");
11
11
  var _SwipeableAction = _interopRequireWildcard(require("./swipeable-action/SwipeableAction"));
12
12
  var _SwipeableWrapper = require("./SwipeableWrapper.styles");
13
- 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); }
14
- 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; }
13
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
15
14
  const SwipeableWrapper = ({
16
15
  children,
17
16
  leftActions = [],
18
17
  rightActions = [],
19
- shouldUseOpacityAnimation
18
+ shouldUseOpacityAnimation,
19
+ isDisabled = false,
20
+ onSwipeEnd,
21
+ onSwipeStart
20
22
  }) => {
21
- const [leftThreshold, setLeftThreshold] = (0, _react.useState)((0, _threshold.calcThreshold)({
23
+ const [leftThreshold, setLeftThreshold] = (0, _react2.useState)((0, _threshold.calcThreshold)({
22
24
  actionCount: leftActions.length,
23
25
  direction: 'left',
24
26
  width: window.innerWidth
25
27
  }));
26
- const [rightThreshold, setRightThreshold] = (0, _react.useState)((0, _threshold.calcThreshold)({
28
+ const [rightThreshold, setRightThreshold] = (0, _react2.useState)((0, _threshold.calcThreshold)({
27
29
  actionCount: rightActions.length,
28
30
  direction: 'right',
29
31
  width: window.innerWidth
30
32
  }));
31
- const swipeableWrapperRef = (0, _react.useRef)(null);
32
- const listItemXOffset = (0, _framerMotion.useMotionValue)(0);
33
- const close = (0, _react.useCallback)(() => {
34
- void (0, _framerMotion.animate)(listItemXOffset, 0);
33
+ const swipeableWrapperRef = (0, _react2.useRef)(null);
34
+ const isSwipingRef = (0, _react2.useRef)(false);
35
+ const listItemXOffset = (0, _react.useMotionValue)(0);
36
+ const close = (0, _react2.useCallback)(() => {
37
+ void (0, _react.animate)(listItemXOffset, 0);
35
38
  }, [listItemXOffset]);
36
- const open = (0, _react.useCallback)(direction => {
39
+ const open = (0, _react2.useCallback)(direction => {
37
40
  switch (direction) {
38
41
  case 'left':
39
- void (0, _framerMotion.animate)(listItemXOffset, _SwipeableAction.SWIPEABLE_ACTION_WIDTH * leftActions.length);
42
+ void (0, _react.animate)(listItemXOffset, _SwipeableAction.SWIPEABLE_ACTION_WIDTH * leftActions.length);
40
43
  break;
41
44
  case 'right':
42
- void (0, _framerMotion.animate)(listItemXOffset, -_SwipeableAction.SWIPEABLE_ACTION_WIDTH * rightActions.length);
45
+ void (0, _react.animate)(listItemXOffset, -_SwipeableAction.SWIPEABLE_ACTION_WIDTH * rightActions.length);
43
46
  break;
44
47
  default:
45
48
  break;
46
49
  }
47
50
  }, [leftActions.length, listItemXOffset, rightActions.length]);
48
- (0, _react.useEffect)(() => {
51
+ (0, _react2.useEffect)(() => {
49
52
  var _swipeableWrapperRef$;
50
53
  const width = (_swipeableWrapperRef$ = swipeableWrapperRef.current) === null || _swipeableWrapperRef$ === void 0 || (_swipeableWrapperRef$ = _swipeableWrapperRef$.parentElement) === null || _swipeableWrapperRef$ === void 0 ? void 0 : _swipeableWrapperRef$.offsetWidth;
51
54
 
@@ -65,7 +68,7 @@ const SwipeableWrapper = ({
65
68
  }, [leftActions.length, rightActions.length]);
66
69
 
67
70
  // Close an opened menu when anything outside it is tapped
68
- (0, _react.useEffect)(() => {
71
+ (0, _react2.useEffect)(() => {
69
72
  function closeCallback(event) {
70
73
  var _swipeableWrapperRef$2;
71
74
  const eventTarget = event.target;
@@ -84,7 +87,7 @@ const SwipeableWrapper = ({
84
87
  }, [close]);
85
88
 
86
89
  // Vibrate when the threshold is passed
87
- (0, _react.useEffect)(() => listItemXOffset.onChange(newValue => {
90
+ (0, _react2.useEffect)(() => listItemXOffset.on('change', newValue => {
88
91
  const previous = listItemXOffset.getPrevious();
89
92
  if (!previous) {
90
93
  return;
@@ -98,14 +101,24 @@ const SwipeableWrapper = ({
98
101
  });
99
102
  }
100
103
  }), [leftThreshold, listItemXOffset, rightThreshold]);
101
- const handlePan = (0, _react.useCallback)((_, info) => {
104
+ const handlePan = (0, _react2.useCallback)((_, info) => {
105
+ if (!isSwipingRef.current) {
106
+ isSwipingRef.current = true;
107
+ if (typeof onSwipeStart === 'function') {
108
+ onSwipeStart();
109
+ }
110
+ }
102
111
  const currentXOffset = listItemXOffset.get();
103
112
  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);
104
113
  if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {
105
114
  listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);
106
115
  }
107
- }, [leftActions.length, listItemXOffset, rightActions.length]);
108
- const handlePanEnd = (0, _react.useCallback)(() => {
116
+ }, [leftActions.length, listItemXOffset, onSwipeStart, rightActions.length]);
117
+ const handlePanEnd = (0, _react2.useCallback)(() => {
118
+ if (typeof onSwipeEnd === 'function') {
119
+ onSwipeEnd();
120
+ }
121
+ isSwipingRef.current = false;
109
122
  const offset = listItemXOffset.get();
110
123
  if (offset > leftThreshold) {
111
124
  var _leftActions$;
@@ -151,8 +164,8 @@ const SwipeableWrapper = ({
151
164
  }
152
165
  }
153
166
  }
154
- }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);
155
- const leftActionElements = (0, _react.useMemo)(() => Array.from(leftActions).reverse().map((item, index) => /*#__PURE__*/_react.default.createElement(_SwipeableAction.default, {
167
+ }, [close, leftActions, leftThreshold, listItemXOffset, onSwipeEnd, open, rightActions, rightThreshold]);
168
+ const leftActionElements = (0, _react2.useMemo)(() => Array.from(leftActions).reverse().map((item, index) => /*#__PURE__*/_react2.default.createElement(_SwipeableAction.default, {
156
169
  activationThreshold: leftThreshold,
157
170
  close: close,
158
171
  index: index,
@@ -163,7 +176,7 @@ const SwipeableWrapper = ({
163
176
  shouldUseOpacityAnimation: shouldUseOpacityAnimation,
164
177
  totalActionCount: leftActions.length
165
178
  })), [close, leftActions, leftThreshold, listItemXOffset, shouldUseOpacityAnimation]);
166
- const rightActionElements = (0, _react.useMemo)(() => rightActions.map((item, index) => /*#__PURE__*/_react.default.createElement(_SwipeableAction.default, {
179
+ const rightActionElements = (0, _react2.useMemo)(() => rightActions.map((item, index) => /*#__PURE__*/_react2.default.createElement(_SwipeableAction.default, {
167
180
  activationThreshold: rightThreshold,
168
181
  close: close,
169
182
  index: index,
@@ -174,14 +187,14 @@ const SwipeableWrapper = ({
174
187
  shouldUseOpacityAnimation: shouldUseOpacityAnimation,
175
188
  totalActionCount: rightActions.length
176
189
  })), [rightActions, rightThreshold, close, listItemXOffset, shouldUseOpacityAnimation]);
177
- return /*#__PURE__*/_react.default.createElement(_SwipeableWrapper.StyledMotionSwipeableWrapper, {
178
- onPan: handlePan,
179
- onPanEnd: handlePanEnd,
190
+ return /*#__PURE__*/_react2.default.createElement(_SwipeableWrapper.StyledMotionSwipeableWrapper, {
191
+ onPan: isDisabled ? undefined : handlePan,
192
+ onPanEnd: isDisabled ? undefined : handlePanEnd,
180
193
  ref: swipeableWrapperRef,
181
194
  style: {
182
195
  x: listItemXOffset
183
196
  }
184
- }, leftActionElements, /*#__PURE__*/_react.default.createElement(_SwipeableWrapper.StyledSwipeableWrapperContent, null, children), rightActionElements);
197
+ }, leftActionElements, /*#__PURE__*/_react2.default.createElement(_SwipeableWrapper.StyledSwipeableWrapperContent, null, children), rightActionElements);
185
198
  };
186
199
  SwipeableWrapper.displayName = 'SwipeableWrapper';
187
200
  var _default = exports.default = SwipeableWrapper;
@@ -1 +1 @@
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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AAUA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAF,uBAAA,CAAAH,OAAA;AACA,IAAAM,iBAAA,GAAAN,OAAA;AAGmC,SAAAO,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,SAAAL,wBAAAK,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;AA8BnC,MAAMW,gBAA2C,GAAGA,CAAC;EACjDC,QAAQ;EACRC,WAAW,GAAG,EAAE;EAChBC,YAAY,GAAG,EAAE;EACjBC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAC9C,IAAAC,wBAAa,EAAC;IACVC,WAAW,EAAEP,WAAW,CAACQ,MAAM;IAC/BC,SAAS,EAAE,MAAM;IACjBC,KAAK,EAAEC,MAAM,CAACC;EAClB,CAAC,CACL,CAAC;EAED,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAT,eAAQ,EAChD,IAAAC,wBAAa,EAAC;IACVC,WAAW,EAAEN,YAAY,CAACO,MAAM;IAChCC,SAAS,EAAE,OAAO;IAClBC,KAAK,EAAEC,MAAM,CAACC;EAClB,CAAC,CACL,CAAC;EAED,MAAMG,mBAAmB,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EAE/D,MAAMC,eAAe,GAAG,IAAAC,4BAAc,EAAC,CAAC,CAAC;EAEzC,MAAMC,KAAK,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC5B,KAAK,IAAAC,qBAAO,EAACJ,eAAe,EAAE,CAAC,CAAC;EACpC,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMK,IAAI,GAAG,IAAAF,kBAAW,EACnBX,SAA2B,IAAK;IAC7B,QAAQA,SAAS;MACb,KAAK,MAAM;QACP,KAAK,IAAAY,qBAAO,EAACJ,eAAe,EAAEM,uCAAsB,GAAGvB,WAAW,CAACQ,MAAM,CAAC;QAC1E;MACJ,KAAK,OAAO;QACR,KAAK,IAAAa,qBAAO,EAACJ,eAAe,EAAE,CAACM,uCAAsB,GAAGtB,YAAY,CAACO,MAAM,CAAC;QAC5E;MACJ;QACI;IACR;EACJ,CAAC,EACD,CAACR,WAAW,CAACQ,MAAM,EAAES,eAAe,EAAEhB,YAAY,CAACO,MAAM,CAC7D,CAAC;EAED,IAAAgB,gBAAS,EAAC,MAAM;IAAA,IAAAC,qBAAA;IACZ,MAAMf,KAAK,IAAAe,qBAAA,GAAGV,mBAAmB,CAACW,OAAO,cAAAD,qBAAA,gBAAAA,qBAAA,GAA3BA,qBAAA,CAA6BE,aAAa,cAAAF,qBAAA,uBAA1CA,qBAAA,CAA4CG,WAAW;;IAErE;IACA,IAAIlB,KAAK,EAAE;MACPN,gBAAgB,CACZ,IAAAE,wBAAa,EAAC;QACVC,WAAW,EAAEP,WAAW,CAACQ,MAAM;QAC/BC,SAAS,EAAE,MAAM;QACjBC;MACJ,CAAC,CACL,CAAC;MAEDI,iBAAiB,CACb,IAAAR,wBAAa,EAAC;QACVC,WAAW,EAAEN,YAAY,CAACO,MAAM;QAChCC,SAAS,EAAE,OAAO;QAClBC;MACJ,CAAC,CACL,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,WAAW,CAACQ,MAAM,EAAEP,YAAY,CAACO,MAAM,CAAC,CAAC;;EAE7C;EACA,IAAAgB,gBAAS,EAAC,MAAM;IACZ,SAASK,aAAaA,CAACC,KAA8B,EAAE;MAAA,IAAAC,sBAAA;MACnD,MAAMC,WAAW,GAAGF,KAAK,CAACG,MAAM;;MAEhC;MACA,IAAID,WAAW,IAAI,GAAAD,sBAAA,GAAChB,mBAAmB,CAACW,OAAO,cAAAK,sBAAA,eAA3BA,sBAAA,CAA6BG,QAAQ,CAACF,WAAW,CAAC,GAAE;QACpEb,KAAK,CAAC,CAAC;MACX;IACJ;IAEAgB,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEP,aAAa,CAAC;IACrDM,QAAQ,CAACC,gBAAgB,CAAC,YAAY,EAAEP,aAAa,CAAC;IAEtD,OAAO,MAAM;MACTM,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAER,aAAa,CAAC;MACxDM,QAAQ,CAACE,mBAAmB,CAAC,YAAY,EAAER,aAAa,CAAC;IAC7D,CAAC;EACL,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;;EAEX;EACA,IAAAK,gBAAS,EACL,MACIP,eAAe,CAACqB,QAAQ,CAAEC,QAAgB,IAAK;IAC3C,MAAMC,QAAQ,GAAGvB,eAAe,CAACwB,WAAW,CAAC,CAAC;IAE9C,IAAI,CAACD,QAAQ,EAAE;MACX;IACJ;IAEA,MAAME,uBAAuB,GACxBF,QAAQ,GAAGrC,aAAa,IAAIoC,QAAQ,IAAIpC,aAAa,IACrDqC,QAAQ,GAAGrC,aAAa,IAAIoC,QAAQ,IAAIpC,aAAc;IAE3D,MAAMwC,wBAAwB,GACzBH,QAAQ,GAAG3B,cAAc,IAAI0B,QAAQ,IAAI1B,cAAc,IACvD2B,QAAQ,GAAG3B,cAAc,IAAI0B,QAAQ,IAAI1B,cAAe;IAE7D,IAAI6B,uBAAuB,IAAIC,wBAAwB,EAAE;MACrD,KAAK,IAAAC,kBAAO,EAAC;QAAEC,oBAAoB,EAAE,CAAC;QAAEC,OAAO,EAAE,CAAC,GAAG;MAAE,CAAC,CAAC;IAC7D;EACJ,CAAC,CAAC,EACN,CAAC3C,aAAa,EAAEc,eAAe,EAAEJ,cAAc,CACnD,CAAC;EAED,MAAMkC,SAAS,GAAG,IAAA3B,kBAAW,EACzB,CAAC4B,CAAyC,EAAEC,IAAa,KAAK;IAC1D,MAAMC,cAAc,GAAGjC,eAAe,CAAC/B,GAAG,CAAC,CAAC;IAE5C,MAAMiE,aAAa,GACdF,IAAI,CAACG,MAAM,CAACC,CAAC,GAAG,CAAC,IAAIrD,WAAW,CAACQ,MAAM,GAAG,CAAC,IAC3CyC,IAAI,CAACG,MAAM,CAACC,CAAC,GAAG,CAAC,IAAIpD,YAAY,CAACO,MAAM,GAAG,CAAE,IAC7C0C,cAAc,GAAG,CAAC,IAAID,IAAI,CAACK,KAAK,CAACD,CAAC,GAAG,CAAE,IACvCH,cAAc,GAAG,CAAC,IAAID,IAAI,CAACK,KAAK,CAACD,CAAC,GAAG,CAAE,GAClC,CAAC,GACD,IAAI,IAAIE,IAAI,CAACC,GAAG,CAACP,IAAI,CAACG,MAAM,CAACC,CAAC,CAAC,GAAG,CAAC,CAAC;IAE9C,IAAIE,IAAI,CAACC,GAAG,CAACP,IAAI,CAACG,MAAM,CAACC,CAAC,CAAC,GAAG,EAAE,IAAIH,cAAc,GAAG,CAAC,EAAE;MACpDjC,eAAe,CAACpB,GAAG,CAACqD,cAAc,GAAGD,IAAI,CAACK,KAAK,CAACD,CAAC,GAAGF,aAAa,CAAC;IACtE;EACJ,CAAC,EACD,CAACnD,WAAW,CAACQ,MAAM,EAAES,eAAe,EAAEhB,YAAY,CAACO,MAAM,CAC7D,CAAC;EAED,MAAMiD,YAAY,GAAG,IAAArC,kBAAW,EAAC,MAAM;IACnC,MAAMgC,MAAM,GAAGnC,eAAe,CAAC/B,GAAG,CAAC,CAAC;IAEpC,IAAIkE,MAAM,GAAGjD,aAAa,EAAE;MAAA,IAAAuD,aAAA;MACxB,CAAAA,aAAA,GAAA1D,WAAW,CAAC,CAAC,CAAC,cAAA0D,aAAA,eAAdA,aAAA,CAAgBC,MAAM,CAAC,CAAC;MACxBxC,KAAK,CAAC,CAAC;IACX,CAAC,MAAM,IAAIiC,MAAM,GAAGvC,cAAc,EAAE;MAAA,IAAA+C,aAAA;MAChC,CAAAA,aAAA,GAAA3D,YAAY,CAACA,YAAY,CAACO,MAAM,GAAG,CAAC,CAAC,cAAAoD,aAAA,eAArCA,aAAA,CAAuCD,MAAM,CAAC,CAAC;MAC/CxC,KAAK,CAAC,CAAC;IACX,CAAC,MAAM;MACH,IAAI0C,KAA4C;MAEhD,IAAIT,MAAM,GAAG,CAAC,EAAE;QACZS,KAAK,GAAG,WAAW;MACvB,CAAC,MAAM,IAAIT,MAAM,GAAG,CAAC,CAAC,EAAE;QACpBS,KAAK,GAAG,YAAY;MACxB,CAAC,MAAM;QACHA,KAAK,GAAG,QAAQ;MACpB;;MAEA;MACA,QAAQA,KAAK;QACT,KAAK,WAAW;UACZ,IAAIT,MAAM,GAAG7B,uCAAsB,EAAE;YACjCJ,KAAK,CAAC,CAAC;UACX,CAAC,MAAM;YACHG,IAAI,CAAC,MAAM,CAAC;UAChB;UACA;QACJ,KAAK,YAAY;UACb,IAAI8B,MAAM,GAAG,CAAC7B,uCAAsB,EAAE;YAClCJ,KAAK,CAAC,CAAC;UACX,CAAC,MAAM;YACHG,IAAI,CAAC,OAAO,CAAC;UACjB;UACA;QACJ,KAAK,QAAQ;UACT,IAAI8B,MAAM,GAAG7B,uCAAsB,EAAE;YACjCD,IAAI,CAAC,MAAM,CAAC;UAChB,CAAC,MAAM,IAAI8B,MAAM,GAAG,CAAC7B,uCAAsB,EAAE;YACzCD,IAAI,CAAC,OAAO,CAAC;UACjB,CAAC,MAAM;YACHH,KAAK,CAAC,CAAC;UACX;MACR;IACJ;EACJ,CAAC,EAAE,CAACA,KAAK,EAAEnB,WAAW,EAAEG,aAAa,EAAEc,eAAe,EAAEK,IAAI,EAAErB,YAAY,EAAEY,cAAc,CAAC,CAAC;EAE5F,MAAMiD,kBAAkB,GAAG,IAAAC,cAAO,EAC9B,MACIC,KAAK,CAACC,IAAI,CAACjE,WAAW,CAAC,CAClBkE,OAAO,CAAC,CAAC,CACTC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACbhG,MAAA,CAAAW,OAAA,CAAAsF,aAAA,CAAC9F,gBAAA,CAAAQ,OAAe;IACZuF,mBAAmB,EAAEpE,aAAc;IACnCgB,KAAK,EAAEA,KAAM;IACbkD,KAAK,EAAEA,KAAM;IACbD,IAAI,EAAEA,IAAK;IACXI,GAAG,EAAEJ,IAAI,CAACI,GAAI;IACdvD,eAAe,EAAEA,eAAgB;IACjCwD,QAAQ,EAAC,MAAM;IACfvE,yBAAyB,EAAEA,yBAA0B;IACrDwE,gBAAgB,EAAE1E,WAAW,CAACQ;EAAO,CACxC,CACJ,CAAC,EACV,CAACW,KAAK,EAAEnB,WAAW,EAAEG,aAAa,EAAEc,eAAe,EAAEf,yBAAyB,CAClF,CAAC;EAED,MAAMyE,mBAAmB,GAAG,IAAAZ,cAAO,EAC/B,MACI9D,YAAY,CAACkE,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACzBhG,MAAA,CAAAW,OAAA,CAAAsF,aAAA,CAAC9F,gBAAA,CAAAQ,OAAe;IACZuF,mBAAmB,EAAE1D,cAAe;IACpCM,KAAK,EAAEA,KAAM;IACbkD,KAAK,EAAEA,KAAM;IACbD,IAAI,EAAEA,IAAK;IACXI,GAAG,EAAEJ,IAAI,CAACI,GAAI;IACdvD,eAAe,EAAEA,eAAgB;IACjCwD,QAAQ,EAAC,OAAO;IAChBvE,yBAAyB,EAAEA,yBAA0B;IACrDwE,gBAAgB,EAAEzE,YAAY,CAACO;EAAO,CACzC,CACJ,CAAC,EACN,CAACP,YAAY,EAAEY,cAAc,EAAEM,KAAK,EAAEF,eAAe,EAAEf,yBAAyB,CACpF,CAAC;EAED,oBACI7B,MAAA,CAAAW,OAAA,CAAAsF,aAAA,CAAC7F,iBAAA,CAAAmG,4BAA4B;IACzBC,KAAK,EAAE9B,SAAU;IACjB+B,QAAQ,EAAErB,YAAa;IACvBsB,GAAG,EAAEhE,mBAAoB;IACzBiE,KAAK,EAAE;MAAE3B,CAAC,EAAEpC;IAAgB;EAAE,GAE7B6C,kBAAkB,eACnBzF,MAAA,CAAAW,OAAA,CAAAsF,aAAA,CAAC7F,iBAAA,CAAAwG,6BAA6B,QAAElF,QAAwC,CAAC,EACxE4E,mBACyB,CAAC;AAEvC,CAAC;AAED7E,gBAAgB,CAACoF,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApG,OAAA,GAEnCc,gBAAgB","ignoreList":[]}
1
+ {"version":3,"file":"SwipeableWrapper.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_threshold","_SwipeableAction","_SwipeableWrapper","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SwipeableWrapper","children","leftActions","rightActions","shouldUseOpacityAnimation","isDisabled","onSwipeEnd","onSwipeStart","leftThreshold","setLeftThreshold","useState","calcThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","useRef","isSwipingRef","listItemXOffset","useMotionValue","close","useCallback","animate","open","SWIPEABLE_ACTION_WIDTH","useEffect","_swipeableWrapperRef$","current","parentElement","offsetWidth","closeCallback","event","_swipeableWrapperRef$2","eventTarget","target","contains","document","addEventListener","removeEventListener","on","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","undefined","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 'motion/react';\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 * Whether the swipeable functionality is disabled\n */\n isDisabled?: boolean;\n /**\n * Callback to be executed when the swiping is started.\n */\n onSwipeStart?: VoidFunction;\n /**\n * Callback to be executed when the swiping is ended.\n */\n onSwipeEnd?: VoidFunction;\n};\n\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n children,\n leftActions = [],\n rightActions = [],\n shouldUseOpacityAnimation,\n isDisabled = false,\n onSwipeEnd,\n onSwipeStart,\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 const isSwipingRef = useRef(false);\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.on('change', (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 if (!isSwipingRef.current) {\n isSwipingRef.current = true;\n\n if (typeof onSwipeStart === 'function') {\n onSwipeStart();\n }\n }\n\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, onSwipeStart, rightActions.length],\n );\n\n const handlePanEnd = useCallback(() => {\n if (typeof onSwipeEnd === 'function') {\n onSwipeEnd();\n }\n\n isSwipingRef.current = false;\n\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 }, [\n close,\n leftActions,\n leftThreshold,\n listItemXOffset,\n onSwipeEnd,\n open,\n rightActions,\n rightThreshold,\n ]);\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={isDisabled ? undefined : handlePan}\n onPanEnd={isDisabled ? undefined : 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":[]}
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.StyledSwipeableWrapperContent = exports.StyledMotionSwipeableWrapper = void 0;
7
- var _framerMotion = require("framer-motion");
7
+ var _react = require("motion/react");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
- const StyledMotionSwipeableWrapper = exports.StyledMotionSwipeableWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
10
+ const StyledMotionSwipeableWrapper = exports.StyledMotionSwipeableWrapper = (0, _styledComponents.default)(_react.motion.div)`
11
11
  position: relative;
12
12
  touch-action: pan-y;
13
13
  user-select: none;
@@ -1 +1 @@
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":[]}
1
+ {"version":3,"file":"SwipeableWrapper.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionSwipeableWrapper","exports","styled","motion","div","StyledSwipeableWrapperContent"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)`\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":";;;;;;AAAA,IAAAA,MAAA,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,aAAM,CAACC,GAAG,CAAC;AAC9D;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAG;AACvD;AACA,CAAC","ignoreList":[]}
@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = exports.SWIPEABLE_ACTION_WIDTH = void 0;
7
- var _framerMotion = require("framer-motion");
8
- var _react = _interopRequireWildcard(require("react"));
7
+ var _react = require("motion/react");
8
+ var _react2 = _interopRequireWildcard(require("react"));
9
9
  var _SwipeableAction = require("./SwipeableAction.styles");
10
- 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); }
11
- 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; }
10
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
12
11
  const SWIPEABLE_ACTION_WIDTH = exports.SWIPEABLE_ACTION_WIDTH = 72;
13
12
  const SwipeableAction = ({
14
13
  activationThreshold,
@@ -20,7 +19,7 @@ const SwipeableAction = ({
20
19
  shouldUseOpacityAnimation,
21
20
  totalActionCount
22
21
  }) => {
23
- const [pointerEvents, setPointerEvents] = _react.default.useState('none');
22
+ const [pointerEvents, setPointerEvents] = _react2.default.useState('none');
24
23
  const handleButtonClick = () => {
25
24
  item.action();
26
25
  close();
@@ -30,7 +29,7 @@ const SwipeableAction = ({
30
29
  * By default, the action sticks to the content of the swipeable item. This
31
30
  * makes it move outwards to reveal the inner items.
32
31
  */
33
- const actionOffset = (0, _framerMotion.useTransform)(listItemXOffset, newValue => {
32
+ const actionOffset = (0, _react.useTransform)(listItemXOffset, newValue => {
34
33
  const maxOffset = SWIPEABLE_ACTION_WIDTH * index;
35
34
  const fractionalOffset = -newValue / totalActionCount * index;
36
35
  switch (position) {
@@ -47,7 +46,7 @@ const SwipeableAction = ({
47
46
  * Brings the item in again if past the threshold. Only relevant for
48
47
  * outermost items.
49
48
  */
50
- const actionOverlayOffset = (0, _framerMotion.useSpring)(0, {
49
+ const actionOverlayOffset = (0, _react.useSpring)(0, {
51
50
  bounce: 0
52
51
  });
53
52
 
@@ -55,19 +54,19 @@ const SwipeableAction = ({
55
54
  * Combines the two values above to create the correct X transform that has
56
55
  * to be applied to the action.
57
56
  */
58
- const actionX = (0, _framerMotion.useTransform)([actionOffset, actionOverlayOffset], ([x, y]) => {
57
+ const actionX = (0, _react.useTransform)([actionOffset, actionOverlayOffset], ([x, y]) => {
59
58
  if (position === 'left') {
60
59
  return Math.min((x ?? 0) + (y ?? 0), 0);
61
60
  }
62
61
  return Math.max((x ?? 0) + (y ?? 0), 0);
63
62
  });
64
- const opacity = (0, _framerMotion.useTransform)(listItemXOffset, x => Math.max(0, Math.min(1, Math.abs(x) / 72)));
65
- (0, _framerMotion.useMotionValueEvent)(opacity, 'change', value => {
63
+ const opacity = (0, _react.useTransform)(listItemXOffset, x => Math.max(0, Math.min(1, Math.abs(x) / 72)));
64
+ (0, _react.useMotionValueEvent)(opacity, 'change', value => {
66
65
  setPointerEvents(value < 0.5 ? 'none' : 'auto');
67
66
  });
68
67
 
69
68
  // Animate to the middle after passing threshold if outermost item
70
- (0, _react.useEffect)(() => {
69
+ (0, _react2.useEffect)(() => {
71
70
  const isOuterMost = index === totalActionCount - 1;
72
71
  if (!isOuterMost) return undefined;
73
72
  return listItemXOffset.onChange(newValue => {
@@ -94,14 +93,14 @@ const SwipeableAction = ({
94
93
  }
95
94
  });
96
95
  }, [actionOverlayOffset, activationThreshold, index, listItemXOffset, position, totalActionCount]);
97
- return /*#__PURE__*/_react.default.createElement(_SwipeableAction.StyledMotionSwipeableAction, {
96
+ return /*#__PURE__*/_react2.default.createElement(_SwipeableAction.StyledMotionSwipeableAction, {
98
97
  $backgroundColor: item.backgroundColor,
99
98
  $position: position,
100
99
  style: {
101
100
  x: actionX,
102
101
  opacity: shouldUseOpacityAnimation ? opacity : 1
103
102
  }
104
- }, /*#__PURE__*/_react.default.createElement(_SwipeableAction.StyledSwipeableActionButton, {
103
+ }, /*#__PURE__*/_react2.default.createElement(_SwipeableAction.StyledSwipeableActionButton, {
105
104
  onClick: handleButtonClick,
106
105
  style: {
107
106
  pointerEvents
@@ -1 +1 @@
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":[]}
1
+ {"version":3,"file":"SwipeableAction.js","names":["_react","require","_react2","_interopRequireWildcard","_SwipeableAction","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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 'motion/react';\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":[]}
@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.StyledSwipeableActionButton = exports.StyledMotionSwipeableAction = void 0;
7
- var _framerMotion = require("framer-motion");
7
+ var _react = require("motion/react");
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
- 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); }
10
- 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; }
11
- const StyledMotionSwipeableAction = exports.StyledMotionSwipeableAction = (0, _styledComponents.default)(_framerMotion.motion.div)`
9
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
10
+ const StyledMotionSwipeableAction = exports.StyledMotionSwipeableAction = (0, _styledComponents.default)(_react.motion.div)`
12
11
  background-color: ${({
13
12
  $backgroundColor
14
13
  }) => $backgroundColor};
@@ -1 +1 @@
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":[]}
1
+ {"version":3,"file":"SwipeableAction.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","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 'motion/react';\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,MAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOzC,MAAMkB,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,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":[]}
@@ -1 +1 @@
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":[]}
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\nexport type { SwipeableActionItem } 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":[]}
@@ -1,16 +1,18 @@
1
1
  import { vibrate } from 'chayns-api';
2
- import { animate, useMotionValue } from 'framer-motion';
2
+ import { animate, useMotionValue } from 'motion/react';
3
3
  import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
4
  import { calcThreshold } from '../../utils/threshold';
5
5
  import SwipeableAction, { SWIPEABLE_ACTION_WIDTH } from './swipeable-action/SwipeableAction';
6
6
  import { StyledMotionSwipeableWrapper, StyledSwipeableWrapperContent } from './SwipeableWrapper.styles';
7
- const SwipeableWrapper = _ref => {
8
- let {
9
- children,
10
- leftActions = [],
11
- rightActions = [],
12
- shouldUseOpacityAnimation
13
- } = _ref;
7
+ const SwipeableWrapper = ({
8
+ children,
9
+ leftActions = [],
10
+ rightActions = [],
11
+ shouldUseOpacityAnimation,
12
+ isDisabled = false,
13
+ onSwipeEnd,
14
+ onSwipeStart
15
+ }) => {
14
16
  const [leftThreshold, setLeftThreshold] = useState(calcThreshold({
15
17
  actionCount: leftActions.length,
16
18
  direction: 'left',
@@ -22,6 +24,7 @@ const SwipeableWrapper = _ref => {
22
24
  width: window.innerWidth
23
25
  }));
24
26
  const swipeableWrapperRef = useRef(null);
27
+ const isSwipingRef = useRef(false);
25
28
  const listItemXOffset = useMotionValue(0);
26
29
  const close = useCallback(() => {
27
30
  void animate(listItemXOffset, 0);
@@ -75,7 +78,7 @@ const SwipeableWrapper = _ref => {
75
78
  }, [close]);
76
79
 
77
80
  // Vibrate when the threshold is passed
78
- useEffect(() => listItemXOffset.onChange(newValue => {
81
+ useEffect(() => listItemXOffset.on('change', newValue => {
79
82
  const previous = listItemXOffset.getPrevious();
80
83
  if (!previous) {
81
84
  return;
@@ -90,13 +93,23 @@ const SwipeableWrapper = _ref => {
90
93
  }
91
94
  }), [leftThreshold, listItemXOffset, rightThreshold]);
92
95
  const handlePan = useCallback((_, info) => {
96
+ if (!isSwipingRef.current) {
97
+ isSwipingRef.current = true;
98
+ if (typeof onSwipeStart === 'function') {
99
+ onSwipeStart();
100
+ }
101
+ }
93
102
  const currentXOffset = listItemXOffset.get();
94
103
  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);
95
104
  if (Math.abs(info.offset.x) > 30 || currentXOffset > 0) {
96
105
  listItemXOffset.set(currentXOffset + info.delta.x * dampingFactor);
97
106
  }
98
- }, [leftActions.length, listItemXOffset, rightActions.length]);
107
+ }, [leftActions.length, listItemXOffset, onSwipeStart, rightActions.length]);
99
108
  const handlePanEnd = useCallback(() => {
109
+ if (typeof onSwipeEnd === 'function') {
110
+ onSwipeEnd();
111
+ }
112
+ isSwipingRef.current = false;
100
113
  const offset = listItemXOffset.get();
101
114
  if (offset > leftThreshold) {
102
115
  leftActions[0]?.action();
@@ -140,7 +153,7 @@ const SwipeableWrapper = _ref => {
140
153
  }
141
154
  }
142
155
  }
143
- }, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);
156
+ }, [close, leftActions, leftThreshold, listItemXOffset, onSwipeEnd, open, rightActions, rightThreshold]);
144
157
  const leftActionElements = useMemo(() => Array.from(leftActions).reverse().map((item, index) => /*#__PURE__*/React.createElement(SwipeableAction, {
145
158
  activationThreshold: leftThreshold,
146
159
  close: close,
@@ -164,8 +177,8 @@ const SwipeableWrapper = _ref => {
164
177
  totalActionCount: rightActions.length
165
178
  })), [rightActions, rightThreshold, close, listItemXOffset, shouldUseOpacityAnimation]);
166
179
  return /*#__PURE__*/React.createElement(StyledMotionSwipeableWrapper, {
167
- onPan: handlePan,
168
- onPanEnd: handlePanEnd,
180
+ onPan: isDisabled ? undefined : handlePan,
181
+ onPanEnd: isDisabled ? undefined : handlePanEnd,
169
182
  ref: swipeableWrapperRef,
170
183
  style: {
171
184
  x: listItemXOffset