react-magic-card 1.0.2 → 1.0.4
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 +19 -19
- package/dist/MagicCircle/index.d.ts +1 -1
- package/dist/MagicCircle/index.js +11 -6
- package/dist/MagicStraight/index.d.ts +1 -1
- package/dist/MagicStraight/index.js +4 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -41,25 +41,25 @@ function MyComponent() {
|
|
|
41
41
|
|
|
42
42
|
## Common Properties
|
|
43
43
|
|
|
44
|
-
| Property | Meaning
|
|
45
|
-
| --------------------- |
|
|
46
|
-
| images (required) | array of images and objects containing the src and alt properties
|
|
47
|
-
|
|
|
48
|
-
|
|
|
49
|
-
|
|
|
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
|
|
44
|
+
| Property | Meaning |
|
|
45
|
+
| --------------------- | ----------------------------------------------------------------- |
|
|
46
|
+
| images (required) | array of images and objects containing the src and alt properties |
|
|
47
|
+
| start (required) | index number of the array of start scale position |
|
|
48
|
+
| width (required) | width of the single image |
|
|
49
|
+
| height (required) | height of the single image |
|
|
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 |
|
|
63
63
|
|
|
64
64
|
## MagicCircle Properties
|
|
65
65
|
|
|
@@ -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, scrollDirection, radius,
|
|
3
|
+
export declare const MagicCircle: ({ images, start, height, width, dynamic, scrollDirection, radius, delay, controller, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicCircleProps) => React.JSX.Element;
|
|
@@ -31,13 +31,17 @@ 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, scrollDirection = true, radius,
|
|
34
|
+
const MagicCircle = ({ images, start, height, width, dynamic = true, scrollDirection = true, radius, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
|
|
35
|
+
// array out of range adjusting.
|
|
36
|
+
start = Math.max(0, start);
|
|
37
|
+
start = Math.min(start, images.length - 1);
|
|
35
38
|
const [count, setCount] = (0, react_1.useState)(0);
|
|
36
39
|
const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
|
|
37
40
|
const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
|
|
38
41
|
const [initialX, setInitialX] = (0, react_1.useState)(0);
|
|
39
42
|
const [initialY, setInitialY] = (0, react_1.useState)(0);
|
|
40
43
|
const [isDragging, setIsDragging] = (0, react_1.useState)(false);
|
|
44
|
+
const [hasMove, setHasMove] = (0, react_1.useState)(false);
|
|
41
45
|
const [hasShift, setHasShift] = (0, react_1.useState)(false);
|
|
42
46
|
const [hasDelayed, setHasDelayed] = (0, react_1.useState)(true);
|
|
43
47
|
const [select, setSelect] = (0, react_1.useState)(start);
|
|
@@ -119,10 +123,12 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
|
|
|
119
123
|
setTouchStartY(deltaY);
|
|
120
124
|
}, [shiftLeft, shiftRight, touchStartX, touchStartY]);
|
|
121
125
|
const handleMouseDown = (0, react_1.useCallback)((e) => {
|
|
126
|
+
if (hasPick)
|
|
127
|
+
return;
|
|
122
128
|
setIsDragging(true);
|
|
123
129
|
setInitialX(e.clientX);
|
|
124
130
|
setInitialY(e.clientY);
|
|
125
|
-
}, []);
|
|
131
|
+
}, [hasPick]);
|
|
126
132
|
const handleMouseMove = (0, react_1.useCallback)((e) => {
|
|
127
133
|
if (isDragging) {
|
|
128
134
|
const outer = refOuter.current;
|
|
@@ -163,10 +169,12 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
|
|
|
163
169
|
}
|
|
164
170
|
setInitialX(e.clientX);
|
|
165
171
|
setInitialY(e.clientY);
|
|
172
|
+
setHasMove(true);
|
|
166
173
|
}
|
|
167
174
|
}, [initialX, initialY, isDragging, shiftLeft, shiftRight]);
|
|
168
175
|
const handleMouseUp = (0, react_1.useCallback)(() => {
|
|
169
176
|
setIsDragging(false);
|
|
177
|
+
setHasMove(false);
|
|
170
178
|
}, []);
|
|
171
179
|
// Main functional, exit function if ref and hasDelayed does not exist.
|
|
172
180
|
(0, react_1.useEffect)(() => {
|
|
@@ -308,10 +316,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, scrollDirection =
|
|
|
308
316
|
opacity: hasSelect
|
|
309
317
|
? initial === null || initial === void 0 ? void 0 : initial.selectOpacity
|
|
310
318
|
: initial === null || initial === void 0 ? void 0 : initial.opacity
|
|
311
|
-
}, transition: transition, onClick: () => {
|
|
312
|
-
setSelect(index);
|
|
313
|
-
hasSelect && pickScale && !isDragging && setHasPick(true);
|
|
314
|
-
}, style: {
|
|
319
|
+
}, transition: transition, onMouseDown: () => setSelect(index), onClick: () => hasSelect && pickScale && !hasMove && setHasPick(true), style: {
|
|
315
320
|
zIndex: hasSelect ? frontImage : zIndex,
|
|
316
321
|
width: width + 'px',
|
|
317
322
|
height: height + 'px',
|
|
@@ -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,
|
|
3
|
+
export declare const MagicStraight: ({ images, start, height, width, vertical, margin, selectOffsetX, selectOffsetY, controller, delay, offsetIndex, reverseIndex, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale, pickProperty, pickTransition }: MagicStraightProps) => React.JSX.Element;
|
|
@@ -31,7 +31,10 @@ 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,
|
|
34
|
+
const MagicStraight = ({ images, start, height, width, vertical = true, margin = 0, selectOffsetX = 0, selectOffsetY = 0, controller, delay = 20, offsetIndex = 0, reverseIndex = true, loading, className, classImages, classImageSelect, classImageUnique, animate, initial, transition, pickScale = true, pickProperty, pickTransition }) => {
|
|
35
|
+
// array out of range adjusting.
|
|
36
|
+
start = Math.max(0, start);
|
|
37
|
+
start = Math.min(start, images.length - 1);
|
|
35
38
|
const [touchStartY, setTouchStartY] = (0, react_1.useState)(0);
|
|
36
39
|
const [touchStartX, setTouchStartX] = (0, react_1.useState)(0);
|
|
37
40
|
const [initialX, setInitialX] = (0, react_1.useState)(0);
|
package/dist/types.d.ts
CHANGED