react-magic-card 0.1.20 → 0.1.22
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/README.md +1 -0
- package/dist/MagicCircle/index.d.ts +1 -1
- package/dist/MagicCircle/index.js +70 -67
- package/dist/MagicStraight/index.d.ts +1 -1
- package/dist/MagicStraight/index.js +77 -64
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -73,6 +73,7 @@ function MyComponent() {
|
|
|
73
73
|
| delay | delay of the animation firing interval |
|
|
74
74
|
| offsetIndex | add an offset to the index of the components and images |
|
|
75
75
|
| reverseIndex | reverse index order the default true |
|
|
76
|
+
| loading | loading option of the eager or lazy the default auto |
|
|
76
77
|
| className | className of the component |
|
|
77
78
|
| classImages | className of the images |
|
|
78
79
|
| classImageSelect | className of the select image |
|
|
@@ -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, dynamic, clockwise, radius, start, delay, controller, offsetIndex, reverseIndex, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
|
|
3
|
+
export declare const MagicCircle: ({ images, height, width, dynamic, clockwise, radius, start, delay, controller, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
|
|
@@ -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, dynamic = true, clockwise = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
|
|
34
|
+
const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true, radius, start, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, 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);
|
|
@@ -161,71 +161,74 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
|
|
|
161
161
|
e.key === 'Escape' && setHasPick(false);
|
|
162
162
|
};
|
|
163
163
|
return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
|
|
164
|
-
react_1.default.createElement(
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
?
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
164
|
+
react_1.default.createElement("div", { className: className },
|
|
165
|
+
react_1.default.createElement(framer_motion_1.m.div, { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: styles_module_css_1.default.outer, style: {
|
|
166
|
+
zIndex: offsetIndex - 1,
|
|
167
|
+
width: radius * 2 + controller + 'px',
|
|
168
|
+
height: radius * 2 + controller + 'px'
|
|
169
|
+
}, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
|
|
170
|
+
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) => {
|
|
171
|
+
const hasSelect = images[select] == images[index];
|
|
172
|
+
const zIndex = reverseIndex
|
|
173
|
+
? offsetIndex + images.length - 1 - index
|
|
174
|
+
: offsetIndex + index;
|
|
175
|
+
return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
|
|
176
|
+
rotate: -count,
|
|
177
|
+
scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
|
|
178
|
+
rotateY: hasSelect
|
|
179
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
|
|
180
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateY,
|
|
181
|
+
rotateX: hasSelect
|
|
182
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateX
|
|
183
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateX,
|
|
184
|
+
rotateZ: hasSelect
|
|
185
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
|
|
186
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateZ,
|
|
187
|
+
opacity: hasSelect
|
|
188
|
+
? hasPick
|
|
189
|
+
? 0
|
|
190
|
+
: animate === null || animate === void 0 ? void 0 : animate.selectOpacity
|
|
191
|
+
: animate === null || animate === void 0 ? void 0 : animate.opacity
|
|
192
|
+
}, initial: {
|
|
193
|
+
rotate: -count,
|
|
194
|
+
scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
|
|
195
|
+
rotateY: hasSelect
|
|
196
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
|
|
197
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateY,
|
|
198
|
+
rotateX: hasSelect
|
|
199
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateX
|
|
200
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateX,
|
|
201
|
+
rotateZ: hasSelect
|
|
202
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ
|
|
203
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateZ,
|
|
204
|
+
opacity: hasSelect
|
|
205
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectOpacity
|
|
206
|
+
: initial === null || initial === void 0 ? void 0 : initial.opacity
|
|
207
|
+
}, transition: transition, onClick: () => {
|
|
208
|
+
setSelect(index);
|
|
209
|
+
hasSelect && setHasPick(true);
|
|
210
|
+
}, className: classImages +
|
|
211
|
+
' ' +
|
|
212
|
+
(hasSelect && classImageSelect) +
|
|
213
|
+
' ' +
|
|
214
|
+
classImageUnique +
|
|
215
|
+
zIndex, src: image.src, alt: image.alt, style: {
|
|
216
|
+
zIndex: hasSelect ? frontImage : zIndex,
|
|
217
|
+
width: width + 'px',
|
|
218
|
+
height: height + 'px',
|
|
219
|
+
left: radius * Math.cos(index * angle) +
|
|
220
|
+
radius -
|
|
221
|
+
width / 2 +
|
|
222
|
+
'px',
|
|
223
|
+
top: radius * Math.sin(index * angle) +
|
|
224
|
+
radius -
|
|
225
|
+
height / 2 +
|
|
226
|
+
'px'
|
|
227
|
+
} }));
|
|
228
|
+
}))),
|
|
229
|
+
react_1.default.createElement(PickImage_1.default, { onClick: () => {
|
|
230
|
+
leaveControll();
|
|
231
|
+
setHasPick(false);
|
|
232
|
+
}, 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 }))));
|
|
230
233
|
};
|
|
231
234
|
exports.MagicCircle = MagicCircle;
|
|
@@ -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, vertical, margin, selectOffsetX, selectOffsetY, start, controller, delay, offsetIndex, reverseIndex, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
|
|
3
|
+
export declare const MagicStraight: ({ images, height, width, vertical, margin, selectOffsetX, selectOffsetY, start, controller, delay, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
|
|
@@ -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, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, delay = 20, offsetIndex = 0, reverseIndex = true, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickProperty, pickTransition }) => {
|
|
34
|
+
const MagicStraight = ({ images, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, start, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, 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);
|
|
@@ -174,68 +174,81 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
|
|
|
174
174
|
e.key === 'Escape' && setHasPick(false);
|
|
175
175
|
};
|
|
176
176
|
return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
|
|
177
|
-
react_1.default.createElement("div", {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
?
|
|
195
|
-
(average - index) *
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
?
|
|
202
|
-
(average - index) *
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
? 0
|
|
213
|
-
: animate === null || animate === void 0 ? void 0 : animate.
|
|
214
|
-
:
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
177
|
+
react_1.default.createElement("div", { className: className },
|
|
178
|
+
react_1.default.createElement("div", { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: styles_module_css_1.default.outer, style: {
|
|
179
|
+
zIndex: offsetIndex - 1,
|
|
180
|
+
width: !vertical
|
|
181
|
+
? images.length * (width + margin * 2) + controller + 'px'
|
|
182
|
+
: width + controller,
|
|
183
|
+
height: vertical
|
|
184
|
+
? images.length * (height + margin * 2) + controller + 'px'
|
|
185
|
+
: height + controller,
|
|
186
|
+
flexDirection: vertical ? 'column' : 'row'
|
|
187
|
+
} }, images.map((image, index) => {
|
|
188
|
+
const hasSelect = images[select] == images[index];
|
|
189
|
+
const zIndex = reverseIndex
|
|
190
|
+
? offsetIndex + images.length - 1 - index
|
|
191
|
+
: offsetIndex + index;
|
|
192
|
+
return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
|
|
193
|
+
y: hasSelect
|
|
194
|
+
? vertical
|
|
195
|
+
? (average - index) * height +
|
|
196
|
+
(average - index) * (margin * 2) +
|
|
197
|
+
selectOffsetY
|
|
198
|
+
: selectOffsetY
|
|
199
|
+
: 0,
|
|
200
|
+
x: hasSelect
|
|
201
|
+
? !vertical
|
|
202
|
+
? (average - index) * width +
|
|
203
|
+
(average - index) * (margin * 2) +
|
|
204
|
+
selectOffsetX
|
|
205
|
+
: selectOffsetX
|
|
206
|
+
: 0,
|
|
207
|
+
scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
|
|
208
|
+
rotateY: hasSelect
|
|
209
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
|
|
210
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateY,
|
|
211
|
+
rotateX: hasSelect
|
|
212
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateX
|
|
213
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateX,
|
|
214
|
+
rotateZ: hasSelect
|
|
215
|
+
? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
|
|
216
|
+
: animate === null || animate === void 0 ? void 0 : animate.rotateZ,
|
|
217
|
+
opacity: hasSelect
|
|
218
|
+
? hasPick
|
|
219
|
+
? 0
|
|
220
|
+
: animate === null || animate === void 0 ? void 0 : animate.selectOpacity
|
|
221
|
+
: animate === null || animate === void 0 ? void 0 : animate.opacity
|
|
222
|
+
}, initial: {
|
|
223
|
+
scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
|
|
224
|
+
rotateY: hasSelect
|
|
225
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
|
|
226
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateY,
|
|
227
|
+
rotateX: hasSelect
|
|
228
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateX
|
|
229
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateX,
|
|
230
|
+
rotateZ: hasSelect
|
|
231
|
+
? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ
|
|
232
|
+
: initial === null || initial === void 0 ? void 0 : initial.rotateZ,
|
|
233
|
+
opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
|
|
234
|
+
}, transition: transition, onClick: () => {
|
|
235
|
+
setSelect(index);
|
|
236
|
+
hasSelect && setHasPick(true);
|
|
237
|
+
}, className: classImages +
|
|
238
|
+
' ' +
|
|
239
|
+
(hasSelect && classImageSelect) +
|
|
240
|
+
' ' +
|
|
241
|
+
classImageUnique +
|
|
242
|
+
index, src: image.src, alt: image.alt, role: "button", style: {
|
|
243
|
+
zIndex: hasSelect ? frontImage : zIndex,
|
|
244
|
+
width: width + 'px',
|
|
245
|
+
height: height + 'px',
|
|
246
|
+
margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
|
|
247
|
+
} }));
|
|
248
|
+
})),
|
|
249
|
+
react_1.default.createElement(PickImage_1.default, { onClick: () => {
|
|
250
|
+
leaveControll();
|
|
251
|
+
setHasPick(false);
|
|
252
|
+
}, 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 }))));
|
|
240
253
|
};
|
|
241
254
|
exports.MagicStraight = MagicStraight;
|
package/dist/types.d.ts
CHANGED