react-magic-card 0.1.12 → 0.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +59 -49
  2. package/dist/MagicCircle/index.d.ts +1 -1
  3. package/dist/MagicCircle/index.js +22 -6
  4. package/dist/MagicStraight/index.d.ts +1 -1
  5. package/dist/MagicStraight/index.js +20 -10
  6. package/dist/types.d.ts +3 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -12,7 +12,7 @@ This is the framer motion component, that supports illust and photograph galleri
12
12
  npm install react-magic-card framer-motion
13
13
  ```
14
14
 
15
- ## Usage
15
+ ## Usage Guide
16
16
 
17
17
  ```tsx
18
18
  import { MagicCircle } from 'react-magic-card'
@@ -61,54 +61,64 @@ function MyComponent() {
61
61
  }
62
62
  ```
63
63
 
64
- | Property | Meaning |
65
- | ---------------- | ----------------------------------------------------------------------- |
66
- | images | array of images and objects containing the src and alt properties |
67
- | width | width of the single image |
68
- | height | height of the single image |
69
- | start | index number of the starting scale position |
70
- | controller | diameter plus the value of the controller is the size of the controller |
71
- | className | className of the component |
72
- | classImages | className of the images |
73
- | classImageSelect | className of the select image |
74
- | classImageUnique | className of the index number is assigned to the end |
75
- | animate | object in the animation property |
76
- | initial | object in the animation property |
77
- | transition | object in the transition property |
78
- | pickTransition | object in the transition property |
79
- | pickProperty | object in the pick property |
80
-
81
- | Only MagicCircle | Meaning |
82
- | ---------------- | --------------------------------------------------- |
83
- | radius | radius of the circle |
84
- | dynamic | dynamic or static for rotation the default true |
85
- | clockwise | direction of rotation when dynamic the default true |
86
-
87
- | Only MagicStraight | Meaning |
88
- | ------------------ | --------------------------------------- |
89
- | vertical | vertical or horizontal the default true |
90
- | margin | spacing of the between images |
91
- | selectOffsetX | X-axis position |
92
- | selectOffsetY | Y-axis position |
93
-
94
- ## Animation property
95
-
96
- - scale
97
- - opacity
98
- - rotateX
99
- - rotateY
100
- - rotateZ
101
- - selectScale
102
- - selectOpacity
103
- - selectRotateX
104
- - selectRotateY
105
- - selectRotateZ
106
-
107
- ## Transition property
108
-
109
- It Inherits framer motion transition properties other than intera.
110
-
111
- ## Pick property
64
+ ## Common Properties
65
+
66
+ | Property | Meaning |
67
+ | ---------------- | ----------------------------------------------------------------- |
68
+ | images | array of images and objects containing the src and alt properties |
69
+ | width | width of the single image |
70
+ | height | height of the single image |
71
+ | start | index number of the starting scale position |
72
+ | controller | controller size is add to the size of the component |
73
+ | offsetIndex | add an offset to the index of the components and images |
74
+ | reverseIndex | reverse index order the default true |
75
+ | className | className of the component |
76
+ | classImages | className of the images |
77
+ | classImageSelect | className of the select image |
78
+ | classImageUnique | className of the index number is assigned to the end |
79
+ | animate | object in the animation property |
80
+ | initial | object in the animation property |
81
+ | transition | object in the transition property |
82
+ | pickTransition | object in the transition property |
83
+ | pickProperty | object in the pick property |
84
+
85
+ ## MagicCircle Properties
86
+
87
+ | Property | Meaning |
88
+ | --------- | --------------------------------------------------- |
89
+ | radius | radius of the circle |
90
+ | dynamic | dynamic or static for rotation the default true |
91
+ | clockwise | direction of rotation when dynamic the default true |
92
+
93
+ ## MagicStraight Properties
94
+
95
+ | Property | Meaning |
96
+ | ------------- | --------------------------------------- |
97
+ | vertical | vertical or horizontal the default true |
98
+ | margin | spacing of the between images |
99
+ | selectOffsetX | X-axis position |
100
+ | selectOffsetY | Y-axis position |
101
+
102
+ ## Animation Properties
103
+
104
+ | Property | Meaning |
105
+ | ------------- | ------------------------------------- |
106
+ | scale | scaling of the images |
107
+ | opacity | opacity or transparency of the images |
108
+ | rotateX | X-axis rotation of the images |
109
+ | rotateY | Y-axis rotation of the images |
110
+ | rotateZ | Z-axis rotation of the images |
111
+ | selectScale | scaling of the selected image |
112
+ | selectOpacity | opacity of the selected image |
113
+ | selectRotateX | X-axis rotation of the selected image |
114
+ | selectRotateY | Y-axis rotation of the selected image |
115
+ | selectRotateZ | Z-axis rotation of the selected image |
116
+
117
+ ## Transition Properties
118
+
119
+ It is Inherits framer motion transition properties other than intera.
120
+
121
+ ## Pick Properties
112
122
 
113
123
  | Property | Meaning |
114
124
  | --------- | --------------------------------------------------------- |
package/dist/MagicCircle/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { MagicCircleProps } from '../types';
3
- 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;
3
+ 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 CHANGED
@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
31
31
  const framer_motion_1 = require("framer-motion");
32
32
  const styles_module_css_1 = __importDefault(require("./styles.module.css"));
33
33
  const PickImage_1 = __importDefault(require("../common/PickImage"));
34
- const MagicCircle = ({ images, height, width, radius, controller, start, dynamic = true, clockwise = true, wheelDelay, animate, initial, transition, className, classImages, classImageSelect, classImageUnique, pickProperty, pickTransition }) => {
34
+ 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 }) => {
35
35
  const [count, setCount] = (0, react_1.useState)(0);
36
36
  const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
37
37
  const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
@@ -147,16 +147,31 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
147
147
  });
148
148
  };
149
149
  }, []);
150
- // Angle between.
150
+ // angle between.
151
151
  const angle = parseFloat((2 * Math.PI).toFixed(15)) / images.length;
152
+ // selected image.
153
+ const frontImage = offsetIndex + images.length + 1;
154
+ // keyboard controll.
155
+ const handleKeyPress = e => {
156
+ e.key === 'ArrowUp' && shiftLeft();
157
+ e.key === 'ArrowRight' && shiftLeft();
158
+ e.key === 'ArrowDown' && shiftRight();
159
+ e.key === 'ArrowLeft' && shiftRight();
160
+ e.key === 'Enter' && setHasPick(true);
161
+ e.key === 'Escape' && setHasPick(false);
162
+ };
152
163
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
153
- react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, className: className + ' ' + styles_module_css_1.default.outer, style: {
164
+ 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: {
165
+ zIndex: offsetIndex - 1,
154
166
  width: radius * 2 + controller + 'px',
155
167
  height: radius * 2 + controller + 'px'
156
168
  }, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
157
169
  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) => {
158
170
  const hasSelect = images[select] == images[index];
159
- return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
171
+ const zIndex = reverseIndex
172
+ ? offsetIndex + images.length - 1 - index
173
+ : offsetIndex + index;
174
+ return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, animate: {
160
175
  rotate: -count,
161
176
  scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
162
177
  rotateY: hasSelect
@@ -194,7 +209,8 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
194
209
  (hasSelect && classImageSelect) +
195
210
  ' ' +
196
211
  classImageUnique +
197
- index, src: image.src, alt: image.alt, style: {
212
+ zIndex, src: image.src, alt: image.alt, style: {
213
+ zIndex: hasSelect ? frontImage : zIndex,
198
214
  width: width + 'px',
199
215
  height: height + 'px',
200
216
  left: radius * Math.cos(index * angle) +
@@ -210,6 +226,6 @@ const MagicCircle = ({ images, height, width, radius, controller, start, dynamic
210
226
  react_1.default.createElement(PickImage_1.default, { onClick: () => {
211
227
  leaveControll();
212
228
  setHasPick(false);
213
- }, 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 })));
229
+ }, 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 })));
214
230
  };
215
231
  exports.MagicCircle = MagicCircle;
package/dist/MagicStraight/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import type { MagicStraightProps } from '../types';
3
- 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;
3
+ 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 CHANGED
@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
31
31
  const framer_motion_1 = require("framer-motion");
32
32
  const styles_module_css_1 = __importDefault(require("./styles.module.css"));
33
33
  const PickImage_1 = __importDefault(require("../common/PickImage"));
34
- const MagicStraight = ({ images, height, width, start, controller, wheelDelay, vertical, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, margin = 0, selectOffsetX = 0, selectOffsetY = 0, pickProperty, pickTransition }) => {
34
+ 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 }) => {
35
35
  const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
36
36
  const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
37
37
  const [hasShift, setHasShift] = (0, react_1.useState)(false);
@@ -157,13 +157,25 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
157
157
  });
158
158
  };
159
159
  }, []);
160
- // Average calculation.
160
+ // average calculation.
161
161
  let total = 0;
162
162
  for (let i = 1; i < images.length; i++)
163
163
  total += i;
164
164
  const average = total / images.length;
165
+ // selected image.
166
+ const frontImage = offsetIndex + images.length + 1;
167
+ // keyboard controll.
168
+ const handleKeyPress = e => {
169
+ e.key === 'ArrowLeft' && shiftLeft();
170
+ e.key === 'ArrowUp' && shiftLeft();
171
+ e.key === 'ArrowRight' && shiftRight();
172
+ e.key === 'ArrowDown' && shiftRight();
173
+ e.key === 'Enter' && setHasPick(true);
174
+ e.key === 'Escape' && setHasPick(false);
175
+ };
165
176
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
166
- react_1.default.createElement("div", { ref: div1Ref, className: className + ' ' + styles_module_css_1.default.outer, style: {
177
+ react_1.default.createElement("div", { ref: div1Ref, tabIndex: offsetIndex < 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: className + ' ' + styles_module_css_1.default.outer, style: {
178
+ zIndex: offsetIndex - 1,
167
179
  width: !vertical ? height + controller + 'px' : 'fit-content',
168
180
  height: vertical ? width + controller + 'px' : 'fit-content',
169
181
  padding: vertical
@@ -172,7 +184,9 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
172
184
  flexDirection: vertical ? 'column' : 'row'
173
185
  } }, images.map((image, index) => {
174
186
  const hasSelect = images[select] == images[index];
175
- const reverseIndex = images.length - 1 - index;
187
+ const zIndex = reverseIndex
188
+ ? offsetIndex + images.length - 1 - index
189
+ : offsetIndex + index;
176
190
  return (react_1.default.createElement(framer_motion_1.m.img, { key: index, animate: {
177
191
  y: hasSelect
178
192
  ? vertical
@@ -212,11 +226,7 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
212
226
  ' ' +
213
227
  classImageUnique +
214
228
  index, src: image.src, alt: image.alt, role: "button", style: {
215
- zIndex: hasSelect
216
- ? hasPick
217
- ? 0
218
- : images.length + 1
219
- : reverseIndex,
229
+ zIndex: hasSelect ? frontImage : zIndex,
220
230
  width: width + 'px',
221
231
  height: height + 'px',
222
232
  margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
@@ -225,6 +235,6 @@ const MagicStraight = ({ images, height, width, start, controller, wheelDelay, v
225
235
  react_1.default.createElement(PickImage_1.default, { onClick: () => {
226
236
  leaveControll();
227
237
  setHasPick(false);
228
- }, 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 })));
238
+ }, 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 })));
229
239
  };
230
240
  exports.MagicStraight = MagicStraight;
package/dist/types.d.ts CHANGED
@@ -42,8 +42,10 @@ type MagicProperty = {
42
42
  images: ImageProperty[];
43
43
  height: number;
44
44
  width: number;
45
- controller: number;
46
45
  start: number;
46
+ controller: number;
47
+ offsetIndex?: number;
48
+ reverseIndex?: boolean;
47
49
  wheelDelay: number;
48
50
  className?: string;
49
51
  classImages?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.12",
3
+ "version": "0.1.14",
4
4
  "description": "image gallery component with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",