react-magic-card 1.0.0 → 1.0.2
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
CHANGED
|
@@ -20,26 +20,18 @@ import { MagicCircle } from 'react-magic-card'
|
|
|
20
20
|
function MyComponent() {
|
|
21
21
|
const images = [
|
|
22
22
|
{
|
|
23
|
-
src: '/
|
|
24
|
-
alt: '
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
src: '/2.jpeg',
|
|
28
|
-
alt: '2image'
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
src: '/3.jpeg',
|
|
32
|
-
alt: '3image'
|
|
23
|
+
src: '/src.jpeg',
|
|
24
|
+
alt: 'alt'
|
|
33
25
|
}
|
|
34
26
|
]
|
|
35
27
|
|
|
36
28
|
return (
|
|
37
29
|
<MagicCircle
|
|
38
30
|
images={images}
|
|
39
|
-
width={
|
|
40
|
-
height={
|
|
31
|
+
width={100}
|
|
32
|
+
height={100}
|
|
41
33
|
radius={100}
|
|
42
|
-
controller={
|
|
34
|
+
controller={100}
|
|
43
35
|
start={1}
|
|
44
36
|
delay={100}
|
|
45
37
|
/>
|
|
@@ -49,32 +41,32 @@ function MyComponent() {
|
|
|
49
41
|
|
|
50
42
|
## Common Properties
|
|
51
43
|
|
|
52
|
-
| Property
|
|
53
|
-
|
|
|
54
|
-
| images
|
|
55
|
-
| width
|
|
56
|
-
| height
|
|
57
|
-
| start
|
|
58
|
-
| controller
|
|
59
|
-
| delay
|
|
60
|
-
| offsetIndex
|
|
61
|
-
| reverseIndex
|
|
62
|
-
| className
|
|
63
|
-
| classImages
|
|
64
|
-
| classImageSelect
|
|
65
|
-
| classImageUnique
|
|
66
|
-
| animate
|
|
67
|
-
| initial
|
|
68
|
-
| transition
|
|
69
|
-
| pickTransition
|
|
70
|
-
| pickProperty
|
|
44
|
+
| Property | Meaning |
|
|
45
|
+
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
46
|
+
| images (required) | array of images and objects containing the src and alt properties |
|
|
47
|
+
| width (required) | width of the single image |
|
|
48
|
+
| height (required) | height of the single image |
|
|
49
|
+
| start (required) | index number of the array of starting scale position,An error is issued if a number outside the range of the array is entered |
|
|
50
|
+
| controller (required) | controller size is add to the size of the component |
|
|
51
|
+
| delay | delay of the animation firing interval |
|
|
52
|
+
| offsetIndex | add an offset to the index of the components and images |
|
|
53
|
+
| reverseIndex | reverse index order the default true |
|
|
54
|
+
| className | className of the component |
|
|
55
|
+
| classImages | className of the images |
|
|
56
|
+
| classImageSelect | className of the select image |
|
|
57
|
+
| classImageUnique | className of the index number is assigned to the end |
|
|
58
|
+
| animate | object in the animation property |
|
|
59
|
+
| initial | object in the animation property |
|
|
60
|
+
| transition | object in the transition property |
|
|
61
|
+
| pickTransition | object in the transition property |
|
|
62
|
+
| pickProperty | object in the pick property |
|
|
71
63
|
|
|
72
64
|
## MagicCircle Properties
|
|
73
65
|
|
|
74
|
-
| Property
|
|
75
|
-
|
|
|
76
|
-
| radius
|
|
77
|
-
| dynamic
|
|
66
|
+
| Property | Meaning |
|
|
67
|
+
| ----------------- | ----------------------------------------------- |
|
|
68
|
+
| radius (required) | radius of the circle |
|
|
69
|
+
| dynamic | dynamic or static for rotation the default true |
|
|
78
70
|
|
|
79
71
|
## MagicStraight Properties
|
|
80
72
|
|
|
@@ -250,7 +250,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
|
|
|
250
250
|
const angle = parseFloat((2 * Math.PI).toFixed(15)) / images.length;
|
|
251
251
|
// selected image.
|
|
252
252
|
const frontImage = offsetIndex + images.length + 1;
|
|
253
|
-
// keyboard
|
|
253
|
+
// keyboard control.
|
|
254
254
|
const handleKeyPress = e => {
|
|
255
255
|
e.key === 'ArrowUp' && shiftLeft();
|
|
256
256
|
e.key === 'ArrowRight' && shiftLeft();
|
|
@@ -310,7 +310,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
|
|
|
310
310
|
: initial === null || initial === void 0 ? void 0 : initial.opacity
|
|
311
311
|
}, transition: transition, onClick: () => {
|
|
312
312
|
setSelect(index);
|
|
313
|
-
hasSelect && pickScale && setHasPick(true);
|
|
313
|
+
hasSelect && pickScale && !isDragging && setHasPick(true);
|
|
314
314
|
}, style: {
|
|
315
315
|
zIndex: hasSelect ? frontImage : zIndex,
|
|
316
316
|
width: width + 'px',
|
|
@@ -199,7 +199,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
|
|
|
199
199
|
const average = total / images.length;
|
|
200
200
|
// selected image.
|
|
201
201
|
const frontImage = offsetIndex + images.length + 1;
|
|
202
|
-
// keyboard
|
|
202
|
+
// keyboard control.
|
|
203
203
|
const handleKeyPress = e => {
|
|
204
204
|
e.key === 'ArrowLeft' && shiftLeft();
|
|
205
205
|
e.key === 'ArrowUp' && shiftLeft();
|
|
@@ -273,7 +273,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
|
|
|
273
273
|
opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
|
|
274
274
|
}, transition: transition, onClick: () => {
|
|
275
275
|
setSelect(index);
|
|
276
|
-
hasSelect && pickScale && setHasPick(true);
|
|
276
|
+
hasSelect && pickScale && !isDragging && setHasPick(true);
|
|
277
277
|
}, style: {
|
|
278
278
|
zIndex: hasSelect ? frontImage : zIndex,
|
|
279
279
|
width: width + 'px',
|
|
@@ -18,7 +18,7 @@ const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src,
|
|
|
18
18
|
opacity: hasPick ? 1 : 0,
|
|
19
19
|
pointerEvents: hasPick ? 'auto' : 'none'
|
|
20
20
|
}, style: { backdropFilter: backdropFilter, background: background }, transition: transition },
|
|
21
|
-
react_1.default.createElement(framer_motion_1.m.img, { key: argKey, className: classPick, src: src, alt: alt, width: width, height: height, draggable: false, animate: {
|
|
21
|
+
react_1.default.createElement(framer_motion_1.m.img, { key: argKey, className: classPick + ' ' + styles_module_css_1.default.no_select, src: src, alt: alt, width: width, height: height, draggable: false, animate: {
|
|
22
22
|
zIndex: zIndex + 1,
|
|
23
23
|
scale: scale,
|
|
24
24
|
opacity: hasPick ? 1 : 0,
|