react-magic-card 0.1.17 → 0.1.19

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 (8) hide show
  1. package/README.md +14 -13
  2. package/dist/MagicCircle/index.d.ts +1 -1
  3. package/dist/MagicCircle/index.js +3 -3
  4. package/dist/MagicStraight/index.d.ts +1 -1
  5. package/dist/MagicStraight/index.js +11 -7
  6. package/dist/common/PickImage/index.js +2 -4
  7. package/dist/types.d.ts +1 -1
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -15,23 +15,23 @@ npm install react-magic-card framer-motion
15
15
  ## Usage Guide
16
16
 
17
17
  ```tsx
18
- import { MagicCircle } from "react-magic-card";
18
+ import { MagicCircle } from 'react-magic-card'
19
19
 
20
20
  function MyComponent() {
21
21
  const images = [
22
22
  {
23
- src: "/1.jpeg",
24
- alt: "1image",
23
+ src: '/1.jpeg',
24
+ alt: '1image'
25
25
  },
26
26
  {
27
- src: "/2.jpeg",
28
- alt: "2image",
27
+ src: '/2.jpeg',
28
+ alt: '2image'
29
29
  },
30
30
  {
31
- src: "/3.jpeg",
32
- alt: "3image",
33
- },
34
- ];
31
+ src: '/3.jpeg',
32
+ alt: '3image'
33
+ }
34
+ ]
35
35
 
36
36
  return (
37
37
  <MagicCircle
@@ -51,13 +51,13 @@ function MyComponent() {
51
51
  selectScale: 1.6,
52
52
  selectRotateX: 40,
53
53
  selectRotateY: 40,
54
- selectRotateZ: -10,
54
+ selectRotateZ: -10
55
55
  }}
56
56
  transition={{ duration: 0.2 }}
57
57
  pickTransition={{ duration: 0.2 }}
58
58
  pickProperty={{ white: true }}
59
59
  />
60
- );
60
+ )
61
61
  }
62
62
  ```
63
63
 
@@ -68,8 +68,9 @@ function MyComponent() {
68
68
  | images | array of images and objects containing the src and alt properties |
69
69
  | width | width of the single image |
70
70
  | height | height of the single image |
71
- | start | index number of the starting scale position |
71
+ | start | index number of the array of starting scale position |
72
72
  | controller | controller size is add to the size of the component |
73
+ | delay | delay of the animation firing interval |
73
74
  | offsetIndex | add an offset to the index of the components and images |
74
75
  | reverseIndex | reverse index order the default true |
75
76
  | className | className of the component |
@@ -118,7 +119,7 @@ function MyComponent() {
118
119
 
119
120
  It is Inherits framer motion transition object other than intera.
120
121
 
121
- ## Pick Object
122
+ ## PickProperty Object
122
123
 
123
124
  | Property | Meaning |
124
125
  | --------- | --------------------------------------------------------- |
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, dynamic, clockwise, radius, start, controller, offsetIndex, reverseIndex, wheelDelay, 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, 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, dynamic = true, clockwise = true, radius, start, controller, offsetIndex = 0, reverseIndex = true, wheelDelay = 100, 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, 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);
@@ -90,7 +90,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
90
90
  const elms = [elm1Div, elm2Div];
91
91
  const timeId = setTimeout(() => {
92
92
  setHasDelayed(true);
93
- }, wheelDelay);
93
+ }, delay);
94
94
  // Add handle event when component mount and deps update.
95
95
  elms.forEach(elm => {
96
96
  if (!elm || !hasDelayed)
@@ -110,7 +110,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
110
110
  });
111
111
  clearTimeout(timeId);
112
112
  };
113
- }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
113
+ }, [handleTouchMove, handleWheel, hasDelayed, delay]);
114
114
  // Functions of the area controller.
115
115
  // entry ref area.
116
116
  const enterControll = (e) => {
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, vertical, margin, selectOffsetX, selectOffsetY, start, controller, offsetIndex, reverseIndex, wheelDelay, 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, 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, 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 }) => {
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 }) => {
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);
@@ -100,7 +100,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
100
100
  const elms = [elm1Div, elm2Div];
101
101
  const timeId = setTimeout(() => {
102
102
  setHasDelayed(true);
103
- }, wheelDelay);
103
+ }, delay);
104
104
  // Add handle event when component mount and deps update.
105
105
  elms.forEach(elm => {
106
106
  if (!elm || !hasDelayed)
@@ -120,7 +120,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
120
120
  });
121
121
  clearTimeout(timeId);
122
122
  };
123
- }, [handleTouchMove, handleWheel, hasDelayed, wheelDelay]);
123
+ }, [handleTouchMove, handleWheel, hasDelayed, delay]);
124
124
  // Functions of the area controller.
125
125
  // entry ref area.
126
126
  const enterControll = (e) => {
@@ -176,11 +176,15 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
176
176
  return (react_1.default.createElement(framer_motion_1.LazyMotion, { features: framer_motion_1.domAnimation },
177
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
178
  zIndex: offsetIndex - 1,
179
- width: !vertical ? height + controller + 'px' : 'fit-content',
180
- height: vertical ? width + controller + 'px' : 'fit-content',
179
+ width: !vertical
180
+ ? images.length * (width + margin * 2) + 'px'
181
+ : 'fit-content',
182
+ height: vertical
183
+ ? images.length * (height + margin * 2) + 'px'
184
+ : 'fit-content',
181
185
  padding: vertical
182
- ? controller + 'px' + ' ' + controller / 2 + 'px'
183
- : controller / 2 + 'px' + ' ' + controller + 'px',
186
+ ? controller + 'px ' + controller / 2 + 'px'
187
+ : controller / 2 + 'px ' + controller + 'px',
184
188
  flexDirection: vertical ? 'column' : 'row'
185
189
  } }, images.map((image, index) => {
186
190
  const hasSelect = images[select] == images[index];
package/dist/common/PickImage/index.js CHANGED
@@ -16,10 +16,8 @@ const PickImage = ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src,
16
16
  return (react_1.default.createElement(framer_motion_1.m.div, { role: "button", onClick: onClick, ref: argRef, className: styles_module_css_1.default.full_size, animate: {
17
17
  zIndex: zIndex,
18
18
  opacity: hasPick ? 1 : 0,
19
- pointerEvents: hasPick ? 'auto' : 'none',
20
- backdropFilter: backdropFilter,
21
- background: background
22
- }, transition: transition },
19
+ pointerEvents: hasPick ? 'auto' : 'none'
20
+ }, style: { backdropFilter: backdropFilter, background: background }, transition: transition },
23
21
  react_1.default.createElement(framer_motion_1.m.img, { className: classPick, onClick: e => e.stopPropagation(), key: argKey, src: src, alt: alt, width: width, height: height, animate: {
24
22
  zIndex: zIndex + 1,
25
23
  scale: scale,
package/dist/types.d.ts CHANGED
@@ -44,9 +44,9 @@ type MagicProperty = {
44
44
  width: number;
45
45
  start: number;
46
46
  controller: number;
47
+ delay: number;
47
48
  offsetIndex?: number;
48
49
  reverseIndex?: boolean;
49
- wheelDelay: number;
50
50
  className?: string;
51
51
  classImages?: string;
52
52
  classImageSelect?: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.17",
4
- "description": "image gallery component with framer motion",
3
+ "version": "0.1.19",
4
+ "description": "image gallery components with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
7
7
  "repository": {