react-magic-card 0.1.21 → 0.1.23

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 (5) hide show
  1. package/dist/MagicCircle/index.js +69 -66
  2. package/dist/MagicStraight/index.js +76 -63
  3. package/dist/common/PickImage/index.d.ts +2 -2
  4. package/dist/types.d.ts +1 -1
  5. package/package.json +1 -1
package/dist/MagicCircle/index.js CHANGED
@@ -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(framer_motion_1.m.div, { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: className + ' ' + styles_module_css_1.default.outer, style: {
165
- zIndex: offsetIndex - 1,
166
- width: radius * 2 + controller + 'px',
167
- height: radius * 2 + controller + 'px'
168
- }, animate: { rotate: count }, transition: { duration: transition === null || transition === void 0 ? void 0 : transition.duration } },
169
- 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) => {
170
- const hasSelect = images[select] == images[index];
171
- const zIndex = reverseIndex
172
- ? offsetIndex + images.length - 1 - index
173
- : offsetIndex + index;
174
- return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
175
- rotate: -count,
176
- scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
177
- rotateY: hasSelect
178
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY
179
- : animate === null || animate === void 0 ? void 0 : animate.rotateY,
180
- rotateX: hasSelect
181
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX
182
- : animate === null || animate === void 0 ? void 0 : animate.rotateX,
183
- rotateZ: hasSelect
184
- ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ
185
- : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
186
- opacity: hasSelect
187
- ? hasPick
188
- ? 0
189
- : animate === null || animate === void 0 ? void 0 : animate.selectOpacity
190
- : animate === null || animate === void 0 ? void 0 : animate.opacity
191
- }, initial: {
192
- rotate: -count,
193
- scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
194
- rotateY: hasSelect
195
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY
196
- : initial === null || initial === void 0 ? void 0 : initial.rotateY,
197
- rotateX: hasSelect
198
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateX
199
- : initial === null || initial === void 0 ? void 0 : initial.rotateX,
200
- rotateZ: hasSelect
201
- ? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ
202
- : initial === null || initial === void 0 ? void 0 : initial.rotateZ,
203
- opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
204
- }, transition: transition, onClick: () => {
205
- setSelect(index);
206
- hasSelect && setHasPick(true);
207
- }, className: classImages +
208
- ' ' +
209
- (hasSelect && classImageSelect) +
210
- ' ' +
211
- classImageUnique +
212
- zIndex, src: image.src, alt: image.alt, style: {
213
- zIndex: hasSelect ? frontImage : zIndex,
214
- width: width + 'px',
215
- height: height + 'px',
216
- left: radius * Math.cos(index * angle) +
217
- radius -
218
- width / 2 +
219
- 'px',
220
- top: radius * Math.sin(index * angle) +
221
- radius -
222
- height / 2 +
223
- 'px'
224
- } }));
225
- }))),
226
- react_1.default.createElement(PickImage_1.default, { onClick: () => {
227
- leaveControll();
228
- setHasPick(false);
229
- }, 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 })));
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;
package/dist/MagicStraight/index.js CHANGED
@@ -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", { ref: div1Ref, tabIndex: offsetIndex <= 0 ? 0 : offsetIndex - 1, onKeyDown: handleKeyPress, className: className + ' ' + styles_module_css_1.default.outer, style: {
178
- zIndex: offsetIndex - 1,
179
- width: !vertical
180
- ? images.length * (width + margin * 2) + controller + 'px'
181
- : width + controller,
182
- height: vertical
183
- ? images.length * (height + margin * 2) + controller + 'px'
184
- : height + controller,
185
- flexDirection: vertical ? 'column' : 'row'
186
- } }, images.map((image, index) => {
187
- const hasSelect = images[select] == images[index];
188
- const zIndex = reverseIndex
189
- ? offsetIndex + images.length - 1 - index
190
- : offsetIndex + index;
191
- return (react_1.default.createElement(framer_motion_1.m.img, { key: zIndex, loading: loading, animate: {
192
- y: hasSelect
193
- ? vertical
194
- ? (average - index) * height +
195
- (average - index) * (margin * 2) +
196
- selectOffsetY
197
- : selectOffsetY
198
- : 0,
199
- x: hasSelect
200
- ? !vertical
201
- ? (average - index) * width +
202
- (average - index) * (margin * 2) +
203
- selectOffsetX
204
- : selectOffsetX
205
- : 0,
206
- scale: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectScale : animate === null || animate === void 0 ? void 0 : animate.scale,
207
- rotateY: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateY : animate === null || animate === void 0 ? void 0 : animate.rotateY,
208
- rotateX: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateX : animate === null || animate === void 0 ? void 0 : animate.rotateX,
209
- rotateZ: hasSelect ? animate === null || animate === void 0 ? void 0 : animate.selectRotateZ : animate === null || animate === void 0 ? void 0 : animate.rotateZ,
210
- opacity: hasSelect
211
- ? hasPick
212
- ? 0
213
- : animate === null || animate === void 0 ? void 0 : animate.selectOpacity
214
- : animate === null || animate === void 0 ? void 0 : animate.opacity
215
- }, initial: {
216
- scale: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectScale : initial === null || initial === void 0 ? void 0 : initial.scale,
217
- rotateY: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateY : initial === null || initial === void 0 ? void 0 : initial.rotateY,
218
- rotateX: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateX : initial === null || initial === void 0 ? void 0 : initial.rotateX,
219
- rotateZ: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectRotateZ : initial === null || initial === void 0 ? void 0 : initial.rotateZ,
220
- opacity: hasSelect ? initial === null || initial === void 0 ? void 0 : initial.selectOpacity : initial === null || initial === void 0 ? void 0 : initial.opacity
221
- }, transition: transition, onClick: () => {
222
- setSelect(index);
223
- hasSelect && setHasPick(true);
224
- }, className: classImages +
225
- ' ' +
226
- (hasSelect && classImageSelect) +
227
- ' ' +
228
- classImageUnique +
229
- index, src: image.src, alt: image.alt, role: "button", style: {
230
- zIndex: hasSelect ? frontImage : zIndex,
231
- width: width + 'px',
232
- height: height + 'px',
233
- margin: vertical ? margin + 'px' + ' 0' : '0 ' + margin + 'px'
234
- } }));
235
- })),
236
- react_1.default.createElement(PickImage_1.default, { onClick: () => {
237
- leaveControll();
238
- setHasPick(false);
239
- }, 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 })));
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/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
@@ -69,7 +69,7 @@ export type MagicStraightProps = MagicProperty & {
69
69
  selectOffsetX?: number;
70
70
  selectOffsetY?: number;
71
71
  };
72
- export type ScaleFilterImageProps = {
72
+ export type PickImageProps = {
73
73
  onClick: MouseEventHandler<HTMLDivElement>;
74
74
  classPick?: string;
75
75
  hasPick: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-magic-card",
3
- "version": "0.1.21",
3
+ "version": "0.1.23",
4
4
  "description": "image gallery components with framer motion",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",