@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.
- package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.js +40 -27
- package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.js.map +1 -1
- package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.styles.js +2 -2
- package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.styles.js.map +1 -1
- package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.js +12 -13
- package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map +1 -1
- package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js +3 -4
- package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.js +26 -13
- package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.styles.js +1 -1
- package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.styles.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.js +12 -14
- package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js +13 -23
- package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map +1 -1
- package/lib/esm/index.js.map +1 -1
- package/lib/esm/utils/threshold.js +5 -8
- package/lib/esm/utils/threshold.js.map +1 -1
- package/lib/types/components/swipeable-wrapper/SwipeableWrapper.d.ts +12 -0
- package/lib/types/components/swipeable-wrapper/SwipeableWrapper.styles.d.ts +2 -265
- package/lib/types/components/swipeable-wrapper/swipeable-action/SwipeableAction.d.ts +1 -1
- package/lib/types/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.d.ts +2 -263
- package/lib/types/index.d.ts +1 -0
- 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
|
|
9
|
-
var
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
|
|
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,
|
|
39
|
+
const open = (0, _react2.useCallback)(direction => {
|
|
37
40
|
switch (direction) {
|
|
38
41
|
case 'left':
|
|
39
|
-
void (0,
|
|
42
|
+
void (0, _react.animate)(listItemXOffset, _SwipeableAction.SWIPEABLE_ACTION_WIDTH * leftActions.length);
|
|
40
43
|
break;
|
|
41
44
|
case 'right':
|
|
42
|
-
void (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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__*/
|
|
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__*/
|
|
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":"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","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
|
|
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)(
|
|
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":["
|
|
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
|
|
8
|
-
var
|
|
7
|
+
var _react = require("motion/react");
|
|
8
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _SwipeableAction = require("./SwipeableAction.styles");
|
|
10
|
-
function
|
|
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] =
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
65
|
-
(0,
|
|
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,
|
|
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__*/
|
|
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__*/
|
|
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
|
|
7
|
+
var _react = require("motion/react");
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
-
function
|
|
10
|
-
|
|
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":["
|
|
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":[]}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -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 '
|
|
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 =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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.
|
|
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
|