@chayns-components/swipeable-wrapper 5.0.0-beta.1262 → 5.0.0-beta.1274
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 +16 -3
- package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.js +16 -3
- package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.js.map +1 -1
- package/lib/types/components/swipeable-wrapper/SwipeableWrapper.d.ts +8 -0
- package/package.json +6 -6
|
@@ -16,7 +16,9 @@ const SwipeableWrapper = ({
|
|
|
16
16
|
leftActions = [],
|
|
17
17
|
rightActions = [],
|
|
18
18
|
shouldUseOpacityAnimation,
|
|
19
|
-
isDisabled = false
|
|
19
|
+
isDisabled = false,
|
|
20
|
+
onSwipeEnd,
|
|
21
|
+
onSwipeStart
|
|
20
22
|
}) => {
|
|
21
23
|
const [leftThreshold, setLeftThreshold] = (0, _react2.useState)((0, _threshold.calcThreshold)({
|
|
22
24
|
actionCount: leftActions.length,
|
|
@@ -29,6 +31,7 @@ const SwipeableWrapper = ({
|
|
|
29
31
|
width: window.innerWidth
|
|
30
32
|
}));
|
|
31
33
|
const swipeableWrapperRef = (0, _react2.useRef)(null);
|
|
34
|
+
const isSwipingRef = (0, _react2.useRef)(false);
|
|
32
35
|
const listItemXOffset = (0, _react.useMotionValue)(0);
|
|
33
36
|
const close = (0, _react2.useCallback)(() => {
|
|
34
37
|
void (0, _react.animate)(listItemXOffset, 0);
|
|
@@ -99,13 +102,23 @@ const SwipeableWrapper = ({
|
|
|
99
102
|
}
|
|
100
103
|
}), [leftThreshold, listItemXOffset, rightThreshold]);
|
|
101
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]);
|
|
116
|
+
}, [leftActions.length, listItemXOffset, onSwipeStart, rightActions.length]);
|
|
108
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,7 +164,7 @@ const SwipeableWrapper = ({
|
|
|
151
164
|
}
|
|
152
165
|
}
|
|
153
166
|
}
|
|
154
|
-
}, [close, leftActions, leftThreshold, listItemXOffset, open, rightActions, rightThreshold]);
|
|
167
|
+
}, [close, leftActions, leftThreshold, listItemXOffset, onSwipeEnd, open, rightActions, rightThreshold]);
|
|
155
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,
|
|
@@ -1 +1 @@
|
|
|
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","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","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\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n children,\n leftActions = [],\n rightActions = [],\n shouldUseOpacityAnimation,\n isDisabled = false,\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.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 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={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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,uBAAA,CAAAH,OAAA;AAUA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAF,uBAAA,CAAAH,OAAA;AACA,IAAAM,iBAAA,GAAAN,OAAA;AAGmC,SAAAG,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,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;AAkCnC,MAAMkB,gBAA2C,GAAGA,CAAC;EACjDC,QAAQ;EACRC,WAAW,GAAG,EAAE;EAChBC,YAAY,GAAG,EAAE;EACjBC,yBAAyB;EACzBC,UAAU,GAAG;AACjB,CAAC,KAAK;EACF,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,gBAAQ,EAC9C,IAAAC,wBAAa,EAAC;IACVC,WAAW,EAAER,WAAW,CAACS,MAAM;IAC/BC,SAAS,EAAE,MAAM;IACjBC,KAAK,EAAEC,MAAM,CAACC;EAClB,CAAC,CACL,CAAC;EAED,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAT,gBAAQ,EAChD,IAAAC,wBAAa,EAAC;IACVC,WAAW,EAAEP,YAAY,CAACQ,MAAM;IAChCC,SAAS,EAAE,OAAO;IAClBC,KAAK,EAAEC,MAAM,CAACC;EAClB,CAAC,CACL,CAAC;EAED,MAAMG,mBAAmB,GAAG,IAAAC,cAAM,EAAwB,IAAI,CAAC;EAE/D,MAAMC,eAAe,GAAG,IAAAC,qBAAc,EAAC,CAAC,CAAC;EAEzC,MAAMC,KAAK,GAAG,IAAAC,mBAAW,EAAC,MAAM;IAC5B,KAAK,IAAAC,cAAO,EAACJ,eAAe,EAAE,CAAC,CAAC;EACpC,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMK,IAAI,GAAG,IAAAF,mBAAW,EACnBX,SAA2B,IAAK;IAC7B,QAAQA,SAAS;MACb,KAAK,MAAM;QACP,KAAK,IAAAY,cAAO,EAACJ,eAAe,EAAEM,uCAAsB,GAAGxB,WAAW,CAACS,MAAM,CAAC;QAC1E;MACJ,KAAK,OAAO;QACR,KAAK,IAAAa,cAAO,EAACJ,eAAe,EAAE,CAACM,uCAAsB,GAAGvB,YAAY,CAACQ,MAAM,CAAC;QAC5E;MACJ;QACI;IACR;EACJ,CAAC,EACD,CAACT,WAAW,CAACS,MAAM,EAAES,eAAe,EAAEjB,YAAY,CAACQ,MAAM,CAC7D,CAAC;EAED,IAAAgB,iBAAS,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,EAAER,WAAW,CAACS,MAAM;QAC/BC,SAAS,EAAE,MAAM;QACjBC;MACJ,CAAC,CACL,CAAC;MAEDI,iBAAiB,CACb,IAAAR,wBAAa,EAAC;QACVC,WAAW,EAAEP,YAAY,CAACQ,MAAM;QAChCC,SAAS,EAAE,OAAO;QAClBC;MACJ,CAAC,CACL,CAAC;IACL;EACJ,CAAC,EAAE,CAACX,WAAW,CAACS,MAAM,EAAER,YAAY,CAACQ,MAAM,CAAC,CAAC;;EAE7C;EACA,IAAAgB,iBAAS,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,iBAAS,EACL,MACIP,eAAe,CAACqB,EAAE,CAAC,QAAQ,EAAGC,QAAgB,IAAK;IAC/C,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,mBAAW,EACzB,CAAC4B,CAAyC,EAAEC,IAAa,KAAK;IAC1D,MAAMC,cAAc,GAAGjC,eAAe,CAAC3B,GAAG,CAAC,CAAC;IAE5C,MAAM6D,aAAa,GACdF,IAAI,CAACG,MAAM,CAACC,CAAC,GAAG,CAAC,IAAItD,WAAW,CAACS,MAAM,GAAG,CAAC,IAC3CyC,IAAI,CAACG,MAAM,CAACC,CAAC,GAAG,CAAC,IAAIrD,YAAY,CAACQ,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,CAAC1B,GAAG,CAAC2D,cAAc,GAAGD,IAAI,CAACK,KAAK,CAACD,CAAC,GAAGF,aAAa,CAAC;IACtE;EACJ,CAAC,EACD,CAACpD,WAAW,CAACS,MAAM,EAAES,eAAe,EAAEjB,YAAY,CAACQ,MAAM,CAC7D,CAAC;EAED,MAAMiD,YAAY,GAAG,IAAArC,mBAAW,EAAC,MAAM;IACnC,MAAMgC,MAAM,GAAGnC,eAAe,CAAC3B,GAAG,CAAC,CAAC;IAEpC,IAAI8D,MAAM,GAAGjD,aAAa,EAAE;MAAA,IAAAuD,aAAA;MACxB,CAAAA,aAAA,GAAA3D,WAAW,CAAC,CAAC,CAAC,cAAA2D,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,GAAA5D,YAAY,CAACA,YAAY,CAACQ,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,EAAEpB,WAAW,EAAEI,aAAa,EAAEc,eAAe,EAAEK,IAAI,EAAEtB,YAAY,EAAEa,cAAc,CAAC,CAAC;EAE5F,MAAMiD,kBAAkB,GAAG,IAAAC,eAAO,EAC9B,MACIC,KAAK,CAACC,IAAI,CAAClE,WAAW,CAAC,CAClBmE,OAAO,CAAC,CAAC,CACTC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACbhG,OAAA,CAAAe,OAAA,CAAAkF,aAAA,CAAC9F,gBAAA,CAAAY,OAAe;IACZmF,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;IACfxE,yBAAyB,EAAEA,yBAA0B;IACrDyE,gBAAgB,EAAE3E,WAAW,CAACS;EAAO,CACxC,CACJ,CAAC,EACV,CAACW,KAAK,EAAEpB,WAAW,EAAEI,aAAa,EAAEc,eAAe,EAAEhB,yBAAyB,CAClF,CAAC;EAED,MAAM0E,mBAAmB,GAAG,IAAAZ,eAAO,EAC/B,MACI/D,YAAY,CAACmE,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACzBhG,OAAA,CAAAe,OAAA,CAAAkF,aAAA,CAAC9F,gBAAA,CAAAY,OAAe;IACZmF,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;IAChBxE,yBAAyB,EAAEA,yBAA0B;IACrDyE,gBAAgB,EAAE1E,YAAY,CAACQ;EAAO,CACzC,CACJ,CAAC,EACN,CAACR,YAAY,EAAEa,cAAc,EAAEM,KAAK,EAAEF,eAAe,EAAEhB,yBAAyB,CACpF,CAAC;EAED,oBACI5B,OAAA,CAAAe,OAAA,CAAAkF,aAAA,CAAC7F,iBAAA,CAAAmG,4BAA4B;IACzBC,KAAK,EAAE3E,UAAU,GAAG4E,SAAS,GAAG/B,SAAU;IAC1CgC,QAAQ,EAAE7E,UAAU,GAAG4E,SAAS,GAAGrB,YAAa;IAChDuB,GAAG,EAAEjE,mBAAoB;IACzBkE,KAAK,EAAE;MAAE5B,CAAC,EAAEpC;IAAgB;EAAE,GAE7B6C,kBAAkB,eACnBzF,OAAA,CAAAe,OAAA,CAAAkF,aAAA,CAAC7F,iBAAA,CAAAyG,6BAA6B,QAAEpF,QAAwC,CAAC,EACxE6E,mBACyB,CAAC;AAEvC,CAAC;AAED9E,gBAAgB,CAACsF,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjG,OAAA,GAEnCS,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":[]}
|
|
@@ -9,7 +9,9 @@ const SwipeableWrapper = ({
|
|
|
9
9
|
leftActions = [],
|
|
10
10
|
rightActions = [],
|
|
11
11
|
shouldUseOpacityAnimation,
|
|
12
|
-
isDisabled = false
|
|
12
|
+
isDisabled = false,
|
|
13
|
+
onSwipeEnd,
|
|
14
|
+
onSwipeStart
|
|
13
15
|
}) => {
|
|
14
16
|
const [leftThreshold, setLeftThreshold] = useState(calcThreshold({
|
|
15
17
|
actionCount: leftActions.length,
|
|
@@ -22,6 +24,7 @@ const SwipeableWrapper = ({
|
|
|
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);
|
|
@@ -90,13 +93,23 @@ const SwipeableWrapper = ({
|
|
|
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 = ({
|
|
|
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,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableWrapper.js","names":["vibrate","animate","useMotionValue","React","useCallback","useEffect","useMemo","useRef","useState","calcThreshold","SwipeableAction","SWIPEABLE_ACTION_WIDTH","StyledMotionSwipeableWrapper","StyledSwipeableWrapperContent","SwipeableWrapper","children","leftActions","rightActions","shouldUseOpacityAnimation","isDisabled","leftThreshold","setLeftThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","listItemXOffset","close","open","current","parentElement","offsetWidth","closeCallback","event","eventTarget","target","contains","document","addEventListener","removeEventListener","on","newValue","previous","getPrevious","hasCrossedLeftThreshold","hasCrossedRightThreshold","iOSFeedbackVibration","pattern","handlePan","_","info","currentXOffset","get","dampingFactor","offset","x","delta","Math","abs","set","handlePanEnd","action","state","leftActionElements","Array","from","reverse","map","item","index","createElement","activationThreshold","key","position","totalActionCount","rightActionElements","onPan","undefined","onPanEnd","ref","style","displayName"],"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\nconst SwipeableWrapper: FC<SwipeableWrapperProps> = ({\n children,\n leftActions = [],\n rightActions = [],\n shouldUseOpacityAnimation,\n isDisabled = false,\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.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 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={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":[]}
|
|
1
|
+
{"version":3,"file":"SwipeableWrapper.js","names":["vibrate","animate","useMotionValue","React","useCallback","useEffect","useMemo","useRef","useState","calcThreshold","SwipeableAction","SWIPEABLE_ACTION_WIDTH","StyledMotionSwipeableWrapper","StyledSwipeableWrapperContent","SwipeableWrapper","children","leftActions","rightActions","shouldUseOpacityAnimation","isDisabled","onSwipeEnd","onSwipeStart","leftThreshold","setLeftThreshold","actionCount","length","direction","width","window","innerWidth","rightThreshold","setRightThreshold","swipeableWrapperRef","isSwipingRef","listItemXOffset","close","open","current","parentElement","offsetWidth","closeCallback","event","eventTarget","target","contains","document","addEventListener","removeEventListener","on","newValue","previous","getPrevious","hasCrossedLeftThreshold","hasCrossedRightThreshold","iOSFeedbackVibration","pattern","handlePan","_","info","currentXOffset","get","dampingFactor","offset","x","delta","Math","abs","set","handlePanEnd","action","state","leftActionElements","Array","from","reverse","map","item","index","createElement","activationThreshold","key","position","totalActionCount","rightActionElements","onPan","undefined","onPanEnd","ref","style","displayName"],"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":[]}
|
|
@@ -28,6 +28,14 @@ export type SwipeableWrapperProps = {
|
|
|
28
28
|
* Whether the swipeable functionality is disabled
|
|
29
29
|
*/
|
|
30
30
|
isDisabled?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Callback to be executed when the swiping is started.
|
|
33
|
+
*/
|
|
34
|
+
onSwipeStart?: VoidFunction;
|
|
35
|
+
/**
|
|
36
|
+
* Callback to be executed when the swiping is ended.
|
|
37
|
+
*/
|
|
38
|
+
onSwipeEnd?: VoidFunction;
|
|
31
39
|
};
|
|
32
40
|
declare const SwipeableWrapper: FC<SwipeableWrapperProps>;
|
|
33
41
|
export default SwipeableWrapper;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/swipeable-wrapper",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1274",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -54,11 +54,11 @@
|
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@babel/cli": "^7.28.3",
|
|
57
|
-
"@babel/core": "^7.28.
|
|
57
|
+
"@babel/core": "^7.28.4",
|
|
58
58
|
"@babel/preset-env": "^7.28.3",
|
|
59
59
|
"@babel/preset-react": "^7.27.1",
|
|
60
60
|
"@babel/preset-typescript": "^7.27.1",
|
|
61
|
-
"@types/react": "^18.3.
|
|
61
|
+
"@types/react": "^18.3.26",
|
|
62
62
|
"@types/react-dom": "^18.3.7",
|
|
63
63
|
"@types/styled-components": "^5.1.34",
|
|
64
64
|
"@types/uuid": "^10.0.0",
|
|
@@ -68,10 +68,10 @@
|
|
|
68
68
|
"react": "^18.3.1",
|
|
69
69
|
"react-dom": "^18.3.1",
|
|
70
70
|
"styled-components": "^6.1.19",
|
|
71
|
-
"typescript": "^5.9.
|
|
71
|
+
"typescript": "^5.9.3"
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
74
|
+
"@chayns-components/core": "^5.0.0-beta.1274"
|
|
75
75
|
},
|
|
76
76
|
"peerDependencies": {
|
|
77
77
|
"chayns-api": ">=2.2.0",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "df995aa49c9dbc5d54b5745ee55e1c3792d4f011"
|
|
87
87
|
}
|