react-magic-card 0.1.13 → 0.1.15

package/README.md

@@ -70,6 +70,8 @@ function MyComponent() {
 | height           | height of the single image                                        |
 | start            | index number of the starting scale position                       |
 | controller       | controller size is add to the size of the component               |
+| offsetIndex      | add an offset to the index of the components and images           |
+| reverseIndex     | reverse index order the default true                              |
 | className        | className of the component                                        |
 | classImages      | className of the images                                           |
 | classImageSelect | className of the select image                                     |

package/dist/MagicCircle/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MagicCircleProps } from '../types';
-export declare const MagicCircle: ({ images, height, width, radius, controller, start, dynamic, clockwise, wheelDelay, animate, initial, transition, className, classImages, classImageSelect, classImageUnique, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
+export declare const MagicCircle: ({ images, height, width, dynamic, clockwise, radius, start, controller, offsetIndex, reverseIndex, wheelDelay, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;

package/dist/MagicCircle/index.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
 const PickImage_1 = __importDefault(require("../common/PickImage"));
-const MagicCircle = ({ images, height, width, radius, controller, start, dynamic = true, clockwise = true, wheelDelay, animate, initial, transition, className, classImages, classImageSelect, classImageUnique, pickProperty, pickTransition }) => {
+const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true, radius, start, controller, offsetIndex = 0, reverseIndex = true, wheelDelay = 100, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
     const [count, setCount] = (0, react_1.useState)(0);
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
@@ -147,16 +147,31 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
             });
         };
     }, []);
-    // Angle between.
+    // angle between.
     const angle = parseFloat((2 * Math.PI).toFixed(15)) / images.length;
+    // selected image.
+    const frontImage = offsetIndex + images.length + 1;
+    // keyboard controll.
+    const handleKeyPress = e => {
+        e.key === 'ArrowUp' && shiftLeft();
+        e.key === 'ArrowRight' && shiftLeft();
+        e.key === 'ArrowDown' && shiftRight();
+        e.key === 'ArrowLeft' && shiftRight();
+        e.key === 'Enter' && setHasPick(true);
+        e.key === 'Escape' && setHasPick(false);
+    };
     return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
-        react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, className: className + ' ' + styles_module_css_1.default.outer, style: {
+        react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: className + ' ' + styles_module_css_1.default.outer, style: {
+                zIndex: offsetIndex - 1,
                 width: radius * 2 + controller + 'px',
                 height: radius * 2 + controller + 'px'
             }, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
             react_1.default.createElement("div", { className: styles_module_css_1.default.inner, style: { width: radius * 2 + 'px', height: radius * 2 + 'px' } }, images.map((image, index) => {
                 const hasSelect = images[select] == images[index];
-                return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
+                const zIndex = reverseIndex
+                    ? offsetIndex + images.length - 1 - index
+                    : offsetIndex + index;
+                return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, animate: {
                         rotate: -count,
                         scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
                         rotateY: hasSelect
@@ -194,7 +209,8 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
                         (hasSelect && classImageSelect) +
                         ' ' +
                         classImageUnique +
-                        index, src: image.src, alt: image.alt, style: {
+                        zIndex, src: image.src, alt: image.alt, style: {
+                        zIndex: hasSelect ? frontImage : zIndex,
                         width: width + 'px',
                         height: height + 'px',
                         left: radius * Math.cos(index * angle) +
@@ -210,6 +226,6 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
         react_1.default.createElement(PickImage_1.default, { onClick: () => {
                 leaveControll();
                 setHasPick(false);
-            }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: div2Ref, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: images.length + 1 })));
+            }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: div2Ref, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage })));
 };
 exports.MagicCircle = MagicCircle;

package/dist/MagicStraight/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MagicStraightProps } from '../types';
-export declare const MagicStraight: ({ images, height, width, start, controller, wheelDelay, vertical, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, margin, selectOffsetX, selectOffsetY, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
+export declare const MagicStraight: ({ images, height, width, vertical, margin, selectOffsetX, selectOffsetY, start, controller, offsetIndex, reverseIndex, wheelDelay, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;

package/dist/MagicStraight/index.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const styles_module_css_1 = __importDefault(require("./styles.module.css"));
 const PickImage_1 = __importDefault(require("../common/PickImage"));
-const MagicStraight = ({ images, height, width, start, controller, wheelDelay, vertical, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, margin = 0, selectOffsetX = 0, selectOffsetY = 0, pickProperty, pickTransition }) => {
+const MagicStraight = ({ images, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, offsetIndex = 0, reverseIndex = true, wheelDelay = 20, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
     const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
     const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
     const [hasShift, setHasShift] = (0, react_1.useState)(false);
@@ -157,13 +157,25 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
             });
         };
     }, []);
-    // Average calculation.
+    // average calculation.
     let total = 0;
     for (let i = 1; i < images.length; i++)
         total += i;
     const average = total / images.length;
+    // selected image.
+    const frontImage = offsetIndex + images.length + 1;
+    // keyboard controll.
+    const handleKeyPress = e => {
+        e.key === 'ArrowLeft' && shiftLeft();
+        e.key === 'ArrowUp' && shiftLeft();
+        e.key === 'ArrowRight' && shiftRight();
+        e.key === 'ArrowDown' && shiftRight();
+        e.key === 'Enter' && setHasPick(true);
+        e.key === 'Escape' && setHasPick(false);
+    };
     return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
-        react_1.default.createElement("div", { ref: div1Ref, className: className + ' ' + styles_module_css_1.default.outer, style: {
+        react_1.default.createElement("div", { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: className + ' ' + styles_module_css_1.default.outer, style: {
+                zIndex: offsetIndex - 1,
                 width: !vertical ? height + controller + 'px' : 'fit-content',
                 height: vertical ? width + controller + 'px' : 'fit-content',
                 padding: vertical
@@ -172,8 +184,10 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
                 flexDirection: vertical ? 'column' : 'row'
             } }, images.map((image, index) => {
             const hasSelect = images[select] == images[index];
-            const reverseIndex = images.length - 1 - index;
-            return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
+            const zIndex = reverseIndex
+                ? offsetIndex + images.length - 1 - index
+                : offsetIndex + index;
+            return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, animate: {
                     y: hasSelect
                         ? vertical
                             ? (average - index) * height +
@@ -212,11 +226,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
                     ' ' +
                     classImageUnique +
                     index, src: image.src, alt: image.alt, role: "button", style: {
-                    zIndex: hasSelect
-                        ? hasPick
-                            ? 0
-                            : images.length + 1
-                        : reverseIndex,
+                    zIndex: hasSelect ? frontImage : zIndex,
                     width: width + 'px',
                     height: height + 'px',
                     margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
@@ -225,6 +235,6 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
         react_1.default.createElement(PickImage_1.default, { onClick: () => {
                 leaveControll();
                 setHasPick(false);
-            }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: div2Ref, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: images.length + 1 })));
+            }, hasPick: hasPick, classPick: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.classPick, white: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.white, alpha: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.alpha, blur: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.blur, scale: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.scale, offset: pickProperty === null || pickProperty === void 0 ? void 0 : pickProperty.offset, hasShift: hasShift, argRef: div2Ref, argKey: select, src: images[select].src, alt: images[select].alt, width: width, height: height, transition: pickTransition, zIndex: frontImage })));
 };
 exports.MagicStraight = MagicStraight;

package/dist/types.d.ts

@@ -42,8 +42,10 @@ type MagicProperty = {
     images: ImageProperty[];
     height: number;
     width: number;
-    controller: number;
     start: number;
+    controller: number;
+    offsetIndex?: number;
+    reverseIndex?: boolean;
     wheelDelay: number;
     className?: string;
     classImages?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-magic-card",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "image gallery component with framer motion",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",