@chayns-components/swipeable-wrapper 5.0.0-beta.627 → 5.0.0-beta.628
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.styles.js +1 -1
- package/lib/cjs/components/swipeable-wrapper/SwipeableWrapper.styles.js.map +1 -1
- package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map +1 -1
- package/lib/cjs/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/SwipeableWrapper.styles.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.js.map +1 -1
- package/lib/esm/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.js.map +1 -1
- package/package.json +9 -9
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.StyledSwipeableWrapperContent = exports.StyledMotionSwipeableWrapper = void 0;
|
|
7
7
|
var _framerMotion = require("framer-motion");
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
function _interopRequireDefault(
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
const StyledMotionSwipeableWrapper = exports.StyledMotionSwipeableWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
11
11
|
position: relative;
|
|
12
12
|
touch-action: pan-y;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableWrapper.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","
|
|
1
|
+
{"version":3,"file":"SwipeableWrapper.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionSwipeableWrapper","exports","styled","motion","div","StyledSwipeableWrapperContent"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)<FramerMotionBugFix>`\n position: relative;\n touch-action: pan-y;\n user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n width: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,4BAA4B,GAAAC,OAAA,CAAAD,4BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAqB;AAClF;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACE,GAAG;AACvD;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +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 // 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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
|
|
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 // 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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableAction.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionSwipeableAction","exports","styled","motion","div","$backgroundColor","$position","css","StyledSwipeableActionButton","button","$color","$width"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\ntype StyledSwipeableActionProps = {\n $position: 'left' | 'right';\n $backgroundColor: CSSProperties['backgroundColor'];\n};\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n display: flex;\n height: 100%;\n position: absolute;\n top: 0;\n width: 200vw;\n\n ${({ $position }) => {\n if ($position === 'left') {\n return css`\n justify-content: flex-end;\n right: 100%;\n `;\n }\n return css`\n justify-content: flex-start;\n left: 100%;\n `;\n }}\n`;\n\ntype StyledSwipeableActionButtonsProps = {\n $width: CSSProperties['width'];\n $color: CSSProperties['color'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n align-items: center;\n appearance: none;\n background: none;\n box-shadow: none;\n color: ${({ $color }) => $color};\n display: flex;\n flex-direction: column;\n font-size: 88%;\n gap: 4px;\n height: 100%;\n justify-content: center;\n margin: 0;\n padding: 0;\n width: ${({ $width }) => $width};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOzC,MAAMW,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,
|
|
1
|
+
{"version":3,"file":"SwipeableAction.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionSwipeableAction","exports","styled","motion","div","$backgroundColor","$position","css","StyledSwipeableActionButton","button","$color","$width"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\ntype StyledSwipeableActionProps = {\n $position: 'left' | 'right';\n $backgroundColor: CSSProperties['backgroundColor'];\n};\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n display: flex;\n height: 100%;\n position: absolute;\n top: 0;\n width: 200vw;\n\n ${({ $position }) => {\n if ($position === 'left') {\n return css`\n justify-content: flex-end;\n right: 100%;\n `;\n }\n return css`\n justify-content: flex-start;\n left: 100%;\n `;\n }}\n`;\n\ntype StyledSwipeableActionButtonsProps = {\n $width: CSSProperties['width'];\n $color: CSSProperties['color'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n align-items: center;\n appearance: none;\n background: none;\n box-shadow: none;\n color: ${({ $color }) => $color};\n display: flex;\n flex-direction: column;\n font-size: 88%;\n gap: 4px;\n height: 100%;\n justify-content: center;\n margin: 0;\n padding: 0;\n width: ${({ $width }) => $width};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOzC,MAAMW,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAA6B;AACzF,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAU,CAAC,KAAK;EACjB,IAAIA,SAAS,KAAK,MAAM,EAAE;IACtB,OAAO,IAAAC,qBAAG;AACtB;AACA;AACA,aAAa;EACL;EACA,OAAO,IAAAA,qBAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAOM,MAAMC,2BAA2B,GAAAP,OAAA,CAAAO,2BAAA,GAAGN,yBAAM,CAACO,MAAyC;AAC3F;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC,CAAC","ignoreList":[]}
|
package/lib/cjs/index.js
CHANGED
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "SwipeableWrapper", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
var _SwipeableWrapper = _interopRequireDefault(require("./components/swipeable-wrapper/SwipeableWrapper"));
|
|
13
|
-
function _interopRequireDefault(
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_SwipeableWrapper","_interopRequireDefault","require","
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableWrapper.styles.js","names":["motion","styled","StyledMotionSwipeableWrapper","div","StyledSwipeableWrapperContent"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)<FramerMotionBugFix>`\n position: relative;\n touch-action: pan-y;\n user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n width: 100%;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,4BAA4B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,
|
|
1
|
+
{"version":3,"file":"SwipeableWrapper.styles.js","names":["motion","styled","StyledMotionSwipeableWrapper","div","StyledSwipeableWrapperContent"],"sources":["../../../../src/components/swipeable-wrapper/SwipeableWrapper.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionSwipeableWrapper = styled(motion.div)<FramerMotionBugFix>`\n position: relative;\n touch-action: pan-y;\n user-select: none;\n`;\n\nexport const StyledSwipeableWrapperContent = styled.div`\n width: 100%;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,4BAA4B,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAClF;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAG;AACvD;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableAction.js","names":["useMotionValueEvent","useSpring","useTransform","React","useEffect","StyledMotionSwipeableAction","StyledSwipeableActionButton","SWIPEABLE_ACTION_WIDTH","SwipeableAction","_ref","activationThreshold","close","index","item","listItemXOffset","position","shouldUseOpacityAnimation","totalActionCount","pointerEvents","setPointerEvents","useState","handleButtonClick","action","actionOffset","newValue","maxOffset","fractionalOffset","Math","max","min","actionOverlayOffset","bounce","actionX","_ref2","x","y","opacity","abs","value","isOuterMost","undefined","onChange","lastValue","getPrevious","set","createElement","$backgroundColor","backgroundColor","$position","style","onClick","$color","color","$width","icon","text","displayName"],"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 // 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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
|
|
1
|
+
{"version":3,"file":"SwipeableAction.js","names":["useMotionValueEvent","useSpring","useTransform","React","useEffect","StyledMotionSwipeableAction","StyledSwipeableActionButton","SWIPEABLE_ACTION_WIDTH","SwipeableAction","_ref","activationThreshold","close","index","item","listItemXOffset","position","shouldUseOpacityAnimation","totalActionCount","pointerEvents","setPointerEvents","useState","handleButtonClick","action","actionOffset","newValue","maxOffset","fractionalOffset","Math","max","min","actionOverlayOffset","bounce","actionX","_ref2","x","y","opacity","abs","value","isOuterMost","undefined","onChange","lastValue","getPrevious","set","createElement","$backgroundColor","backgroundColor","$position","style","onClick","$color","color","$width","icon","text","displayName"],"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 // 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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SwipeableAction.styles.js","names":["motion","styled","css","StyledMotionSwipeableAction","div","_ref","$backgroundColor","_ref2","$position","StyledSwipeableActionButton","button","_ref3","$color","_ref4","$width"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\ntype StyledSwipeableActionProps = {\n $position: 'left' | 'right';\n $backgroundColor: CSSProperties['backgroundColor'];\n};\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n display: flex;\n height: 100%;\n position: absolute;\n top: 0;\n width: 200vw;\n\n ${({ $position }) => {\n if ($position === 'left') {\n return css`\n justify-content: flex-end;\n right: 100%;\n `;\n }\n return css`\n justify-content: flex-start;\n left: 100%;\n `;\n }}\n`;\n\ntype StyledSwipeableActionButtonsProps = {\n $width: CSSProperties['width'];\n $color: CSSProperties['color'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n align-items: center;\n appearance: none;\n background: none;\n box-shadow: none;\n color: ${({ $color }) => $color};\n display: flex;\n flex-direction: column;\n font-size: 88%;\n gap: 4px;\n height: 100%;\n justify-content: center;\n margin: 0;\n padding: 0;\n width: ${({ $width }) => $width};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,2BAA2B,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,
|
|
1
|
+
{"version":3,"file":"SwipeableAction.styles.js","names":["motion","styled","css","StyledMotionSwipeableAction","div","_ref","$backgroundColor","_ref2","$position","StyledSwipeableActionButton","button","_ref3","$color","_ref4","$width"],"sources":["../../../../../src/components/swipeable-wrapper/swipeable-action/SwipeableAction.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\n\ntype StyledSwipeableActionProps = {\n $position: 'left' | 'right';\n $backgroundColor: CSSProperties['backgroundColor'];\n};\n\nexport const StyledMotionSwipeableAction = styled(motion.div)<StyledSwipeableActionProps>`\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n display: flex;\n height: 100%;\n position: absolute;\n top: 0;\n width: 200vw;\n\n ${({ $position }) => {\n if ($position === 'left') {\n return css`\n justify-content: flex-end;\n right: 100%;\n `;\n }\n return css`\n justify-content: flex-start;\n left: 100%;\n `;\n }}\n`;\n\ntype StyledSwipeableActionButtonsProps = {\n $width: CSSProperties['width'];\n $color: CSSProperties['color'];\n};\n\nexport const StyledSwipeableActionButton = styled.button<StyledSwipeableActionButtonsProps>`\n align-items: center;\n appearance: none;\n background: none;\n box-shadow: none;\n color: ${({ $color }) => $color};\n display: flex;\n flex-direction: column;\n font-size: 88%;\n gap: 4px;\n height: 100%;\n justify-content: center;\n margin: 0;\n padding: 0;\n width: ${({ $width }) => $width};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,2BAA2B,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACzF,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAiB,CAAC,GAAAD,IAAA;EAAA,OAAKC,gBAAgB;AAAA;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,IAAIC,SAAS,KAAK,MAAM,EAAE;IACtB,OAAON,GAAG;AACtB;AACA;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAOD,OAAO,MAAMO,2BAA2B,GAAGR,MAAM,CAACS,MAAyC;AAC3F;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC,CAAC","ignoreList":[]}
|
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.628",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -49,12 +49,12 @@
|
|
|
49
49
|
"url": "https://github.com/TobitSoftware/chayns-components/issues"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@babel/cli": "^7.24.
|
|
53
|
-
"@babel/core": "^7.24.
|
|
54
|
-
"@babel/preset-env": "^7.24.
|
|
55
|
-
"@babel/preset-react": "^7.24.
|
|
56
|
-
"@babel/preset-typescript": "^7.24.
|
|
57
|
-
"@types/react": "^18.3.
|
|
52
|
+
"@babel/cli": "^7.24.6",
|
|
53
|
+
"@babel/core": "^7.24.6",
|
|
54
|
+
"@babel/preset-env": "^7.24.6",
|
|
55
|
+
"@babel/preset-react": "^7.24.6",
|
|
56
|
+
"@babel/preset-typescript": "^7.24.6",
|
|
57
|
+
"@types/react": "^18.3.3",
|
|
58
58
|
"@types/react-dom": "^18.3.0",
|
|
59
59
|
"@types/styled-components": "^5.1.34",
|
|
60
60
|
"@types/uuid": "^9.0.8",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"typescript": "^5.4.5"
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
70
|
+
"@chayns-components/core": "^5.0.0-beta.628"
|
|
71
71
|
},
|
|
72
72
|
"peerDependencies": {
|
|
73
73
|
"chayns-api": ">=1.0.50",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"publishConfig": {
|
|
80
80
|
"access": "public"
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "a0c8273bfea3031d1e64867ba5dee628a963c97e"
|
|
83
83
|
}
|