react-magic-card 0.1.22 → 0.1.24

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 +2 -1
  2. package/dist/MagicCircle/index.d.ts +1 -1
  3. package/dist/MagicCircle/index.js +2 -2
  4. package/dist/MagicStraight/index.d.ts +1 -1
  5. package/dist/MagicStraight/index.js +2 -2
  6. package/dist/common/PickImage/index.d.ts +2 -2
  7. package/dist/types.d.ts +13 -4
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -81,7 +81,8 @@ function MyComponent() {
81
81
  | animate | object in the animation property |
82
82
  | initial | object in the animation property |
83
83
  | transition | object in the transition property |
84
- | pickTransition | object in the transition property |
84
+ | pickScale | whether to turn off pickå after selection, default true |
85
+ | pickTransition | object in the tansition property |
85
86
  | pickProperty | object in the pick property |
86
87
 
87
88
  ## MagicCircle Properties
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, delay, controller, offsetIndex, reverseIndex, loading, 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, pickScale, 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, delay = 100, controller, offsetIndex = 0, reverseIndex = true, loading, 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, pickScale = true, 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);
@@ -206,7 +206,7 @@ const MagicCircle = ({ images, height, width, dynamic = true, clockwise = true,
206
206
  : initial === null || initial === void 0 ? void 0 : initial.opacity
207
207
  }, transition: transition, onClick: () => {
208
208
  setSelect(index);
209
- hasSelect && setHasPick(true);
209
+ hasSelect && pickScale && setHasPick(true);
210
210
  }, className: classImages +
211
211
  ' ' +
212
212
  (hasSelect && classImageSelect) +
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, delay, offsetIndex, reverseIndex, loading, 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, pickScale, 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, delay = 20, offsetIndex = 0, reverseIndex = true, loading, 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, pickScale = true, 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);
@@ -233,7 +233,7 @@ const MagicStraight = ({ images, height, width, vertical = true, margin = 0, sel
233
233
  opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
234
234
  }, transition: transition, onClick: () => {
235
235
  setSelect(index);
236
- hasSelect && setHasPick(true);
236
+ hasSelect && pickScale && setHasPick(true);
237
237
  }, className: classImages +
238
238
  ' ' +
239
239
  (hasSelect && classImageSelect) +
package/dist/common/PickImage/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
- import type { ScaleFilterImageProps } from '../../types';
3
- declare const PickImage: ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src, alt, width, height, zIndex, white, alpha, blur, scale, offset, transition }: ScaleFilterImageProps) => React.JSX.Element;
2
+ import type { PickImageProps } from '../../types';
3
+ declare const PickImage: ({ onClick, classPick, hasPick, hasShift, argRef, argKey, src, alt, width, height, zIndex, white, alpha, blur, scale, offset, transition }: PickImageProps) => React.JSX.Element;
4
4
  export default PickImage;
package/dist/types.d.ts CHANGED
@@ -38,7 +38,7 @@ type PickProperty = {
38
38
  scale?: number;
39
39
  offset?: number;
40
40
  };
41
- type MagicProperty = {
41
+ type CommonProperty = {
42
42
  images: ImageProperty[];
43
43
  height: number;
44
44
  width: number;
@@ -55,9 +55,18 @@ type MagicProperty = {
55
55
  animate?: AnimationProperty;
56
56
  initial?: AnimationProperty;
57
57
  transition?: TransitionProperty;
58
- pickProperty?: PickProperty;
59
- pickTransition?: TransitionProperty;
60
58
  };
59
+ type OffPick = {
60
+ pickScale?: true;
61
+ pickProperty: PickProperty;
62
+ pickTransition: TransitionProperty;
63
+ };
64
+ type OnPick = {
65
+ pickScale?: false;
66
+ pickProperty?: undefined;
67
+ pickTransition?: undefined;
68
+ };
69
+ type MagicProperty = CommonProperty & (OffPick | OnPick);
61
70
  export type MagicCircleProps = MagicProperty & {
62
71
  radius: number;
63
72
  dynamic?: boolean;
@@ -69,7 +78,7 @@ export type MagicStraightProps = MagicProperty & {
69
78
  selectOffsetX?: number;
70
79
  selectOffsetY?: number;
71
80
  };
72
- export type ScaleFilterImageProps = {
81
+ export type PickImageProps = {
73
82
  onClick: MouseEventHandler<HTMLDivElement>;
74
83
  classPick?: string;
75
84
  hasPick: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
4
4
  "description": "image gallery components with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",