react-useanimations 2.10.0 → 3.0.0-beta.2

package/stories/variants.stories.d.ts

@@ -1,70 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.FC<{
-        animation: import("../utils").Animation;
-        reverse?: boolean | undefined;
-        strokeColor?: string | undefined;
-        fillColor?: string | undefined;
-        pathCss?: string | undefined;
-        options?: Partial<import("lottie-web").AnimationConfig> | undefined;
-        size?: number | undefined;
-        loop?: number | boolean | undefined;
-        autoplay?: boolean | undefined;
-        speed?: number | undefined;
-        wrapperStyle?: React.CSSProperties | undefined;
-        render?: ((eventProps: any, animationProps: any) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | undefined;
-    } & React.HTMLProps<HTMLDivElement>>;
-    decorators: any[];
-};
-export default _default;
-export declare const Stroke: {
-    (): JSX.Element;
-    story: {
-        parameters: {
-            info: {
-                text: string;
-            };
-        };
-    };
-};
-export declare const Fill: {
-    (): JSX.Element;
-    story: {
-        parameters: {
-            info: {
-                text: string;
-            };
-        };
-    };
-};
-export declare const CustomCSS: {
-    (): JSX.Element;
-    story: {
-        parameters: {
-            info: {
-                text: string;
-            };
-        };
-    };
-};
-export declare const Size: {
-    (): JSX.Element;
-    story: {
-        parameters: {
-            info: {
-                text: string;
-            };
-        };
-    };
-};
-export declare const WrapperElement: {
-    (): JSX.Element;
-    story: {
-        parameters: {
-            info: {
-                text: string;
-            };
-        };
-    };
-};

package/stories/variants.stories.js

@@ -1,196 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WrapperElement = exports.Size = exports.CustomCSS = exports.Fill = exports.Stroke = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _addonInfo = require("@storybook/addon-info");
-
-var _activity = _interopRequireDefault(require("../lib/activity"));
-
-var _youtube = _interopRequireDefault(require("../lib/youtube"));
-
-var _star = _interopRequireDefault(require("../lib/star"));
-
-var _heart = _interopRequireDefault(require("../lib/heart"));
-
-var _ = _interopRequireDefault(require(".."));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _default = {
-  title: 'Variants',
-  component: _["default"],
-  decorators: [_addonInfo.withInfo]
-};
-exports["default"] = _default;
-
-var Stroke = function Stroke() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "activity"), /*#__PURE__*/_react["default"].createElement(_["default"], {
-    strokeColor: "green",
-    size: 40,
-    wrapperStyle: {
-      marginTop: '5px'
-    },
-    animation: _activity["default"]
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "activity"), /*#__PURE__*/_react["default"].createElement(_["default"], {
-    strokeColor: "red",
-    size: 40,
-    wrapperStyle: {
-      marginTop: '5px'
-    },
-    animation: _youtube["default"]
-  })));
-};
-
-exports.Stroke = Stroke;
-Stroke.story = {
-  parameters: {
-    info: {
-      text: "\n      ~~~js\n      export const Stroke = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation\n              strokeColor=\"green\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={activity}\n            />\n          </div>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation\n              strokeColor=\"red\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={youtube}\n            />\n          </div>\n        </div>\n      );\n      ~~~\n    "
-    }
-  }
-};
-
-var Fill = function Fill() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "star"), /*#__PURE__*/_react["default"].createElement(_["default"], {
-    fillColor: "green",
-    size: 40,
-    wrapperStyle: {
-      marginTop: '5px'
-    },
-    animation: _star["default"]
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "heart"), /*#__PURE__*/_react["default"].createElement(_["default"], {
-    fillColor: "red",
-    size: 40,
-    wrapperStyle: {
-      marginTop: '5px'
-    },
-    animation: _heart["default"]
-  })));
-};
-
-exports.Fill = Fill;
-Fill.story = {
-  parameters: {
-    info: {
-      text: "\n      ~~~js\n      export const Fill = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>star</span>\n            <UseAnimation\n              fillColor=\"green\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={star}\n            />\n          </div>\n          <div style={{ padding: '20px' }}>\n            <span>heart</span>\n            <UseAnimation\n              fillColor=\"red\"\n              size={40}\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={heart}\n            />\n          </div>\n        </div>\n      );\n      ~~~\n    "
-    }
-  }
-};
-
-var CustomCSS = function CustomCSS() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "activity"), /*#__PURE__*/_react["default"].createElement(_["default"], {
-    size: 40,
-    pathCss: "stroke: purple; stroke-width: 2%;",
-    wrapperStyle: {
-      marginTop: '5px'
-    },
-    animation: _activity["default"]
-  })));
-};
-
-exports.CustomCSS = CustomCSS;
-CustomCSS.story = {
-  parameters: {
-    info: {
-      text: "\n      ~~~js\n      export const CustomCSS = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation\n              size={40}\n              pathCss=\"stroke: purple; stroke-width: 2%;\"\n              wrapperStyle={{ marginTop: '5px' }}\n              animation={activity}\n            />\n          </div>\n        </div>\n      );\n      ~~~\n    "
-    }
-  }
-};
-
-var Size = function Size() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex',
-      flexWrap: 'wrap'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      padding: '20px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "activity"), /*#__PURE__*/_react["default"].createElement(_["default"], {
-    size: 60,
-    wrapperStyle: {
-      marginTop: '5px'
-    },
-    animation: _activity["default"]
-  })));
-};
-
-exports.Size = Size;
-Size.story = {
-  parameters: {
-    info: {
-      text: "\n      ~~~js\n      export const Size = () => (\n        <div style={{ display: 'flex', flexWrap: 'wrap' }}>\n          <div style={{ padding: '20px' }}>\n            <span>activity</span>\n            <UseAnimation size={60} wrapperStyle={{ marginTop: '5px' }} animation={activity} />\n          </div>\n        </div>\n      );\n      ~~~\n    "
-    }
-  }
-};
-
-var WrapperElement = function WrapperElement() {
-  return /*#__PURE__*/_react["default"].createElement(_["default"], {
-    animation: _heart["default"],
-    size: 60,
-    onClick: function onClick() {
-      // eslint-disable-next-line
-      console.log('additional onClick cb is working');
-    },
-    render: function render(eventProps, animationProps) {
-      return /*#__PURE__*/_react["default"].createElement("button", _extends({
-        style: {
-          padding: '20px'
-        },
-        type: "button"
-      }, eventProps), /*#__PURE__*/_react["default"].createElement("div", animationProps));
-    }
-  });
-};
-
-exports.WrapperElement = WrapperElement;
-WrapperElement.story = {
-  parameters: {
-    info: {
-      text: "\n      ~~~js\n      export const WrapperElement = () => {\n        return (\n          <UseAnimation\n            animation={heart}\n            size={60}\n            onClick={() => {\n              // eslint-disable-next-line\n              console.log('additional onClick cb is working');\n            }}\n            render={(eventProps, animationProps) => (\n              <button style={{ padding: '20px' }} type=\"button\" {...eventProps}>\n                <div {...animationProps} />\n              </button>\n            )}\n          />\n        );\n      };\n      ~~~\n    "
-    }
-  }
-};

package/typings.d.ts

@@ -1,6 +0,0 @@
-declare module '*.json' {
-  const value: any;
-  export default value;
-}
-
-declare module '@storybook/addon-info';

package/utils/constants.d.ts

@@ -1,6 +0,0 @@
-export declare type AnimationEffect = 'CLICK_PLAY_AND_BACKWARDS' | 'HOVER_PLAY_AND_STOP' | 'HOVER_PLAY_AND_BACKWARDS' | 'CLICK_PLAY' | 'LOOP_PLAY' | 'CLICK_PLAY_AND_SEGMENTS';
-export declare type Animation = {
-    animationData: any;
-    animationKey: AnimationKey;
-};
-export declare type AnimationKey = 'activity' | 'airplay' | 'alertCircle' | 'alertOctagon' | 'alertTriangle' | 'archive' | 'arrowDown' | 'arrowDownCircle' | 'arrowLeftCircle' | 'arrowRightCircle' | 'arrowUp' | 'arrowUpCircle' | 'bookmark' | 'behance' | 'calendar' | 'checkBox' | 'checkmark' | 'codepen' | 'copy' | 'download' | 'dribbble' | 'edit' | 'error' | 'explore' | 'facebook' | 'folder' | 'github' | 'heart' | 'help' | 'home' | 'infinity' | 'info' | 'instagram' | 'linkedin' | 'loading' | 'loading2' | 'loading3' | 'lock' | 'mail' | 'maximizeMinimize' | 'maximizeMinimize2' | 'menu' | 'menu2' | 'menu3' | 'menu4' | 'microphone' | 'microphone2' | 'notification' | 'notification2' | 'playPause' | 'playPauseCircle' | 'plusToX' | 'pocket' | 'radioButton' | 'scrollDown' | 'searchToX' | 'settings' | 'settings2' | 'share' | 'skipBack' | 'skipForward' | 'star' | 'thumbUp' | 'toggle' | 'trash' | 'trash2' | 'twitter' | 'userMinus' | 'userPlus' | 'userX' | 'video' | 'video2' | 'visibility' | 'visibility2' | 'volume' | 'youtube' | 'youtube2' | 'zoomIn' | 'zoomOut';

package/utils/constants.js

@@ -1 +0,0 @@
-"use strict";

package/utils/getEffect.d.ts

@@ -1,3 +0,0 @@
-import type { AnimationKey, AnimationEffect } from '.';
-declare const getEffect: (animationKey: AnimationKey) => AnimationEffect;
-export default getEffect;

package/utils/getEffect.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var animations = {
-  activity: 'LOOP_PLAY',
-  airplay: 'LOOP_PLAY',
-  alertCircle: 'LOOP_PLAY',
-  alertOctagon: 'LOOP_PLAY',
-  alertTriangle: 'LOOP_PLAY',
-  archive: 'HOVER_PLAY_AND_BACKWARDS',
-  arrowDown: 'LOOP_PLAY',
-  arrowDownCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  arrowLeftCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  arrowRightCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  arrowUp: 'LOOP_PLAY',
-  arrowUpCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  bookmark: 'CLICK_PLAY_AND_BACKWARDS',
-  behance: 'HOVER_PLAY_AND_STOP',
-  calendar: 'HOVER_PLAY_AND_STOP',
-  checkBox: 'CLICK_PLAY_AND_BACKWARDS',
-  checkmark: 'LOOP_PLAY',
-  codepen: 'HOVER_PLAY_AND_STOP',
-  copy: 'CLICK_PLAY',
-  download: 'CLICK_PLAY',
-  dribbble: 'HOVER_PLAY_AND_BACKWARDS',
-  edit: 'CLICK_PLAY',
-  error: 'LOOP_PLAY',
-  explore: 'HOVER_PLAY_AND_BACKWARDS',
-  facebook: 'HOVER_PLAY_AND_STOP',
-  folder: 'HOVER_PLAY_AND_STOP',
-  github: 'HOVER_PLAY_AND_STOP',
-  help: 'LOOP_PLAY',
-  heart: 'CLICK_PLAY_AND_BACKWARDS',
-  home: 'HOVER_PLAY_AND_STOP',
-  infinity: 'LOOP_PLAY',
-  info: 'HOVER_PLAY_AND_BACKWARDS',
-  instagram: 'HOVER_PLAY_AND_STOP',
-  linkedin: 'HOVER_PLAY_AND_STOP',
-  loading: 'LOOP_PLAY',
-  loading2: 'LOOP_PLAY',
-  loading3: 'LOOP_PLAY',
-  lock: 'CLICK_PLAY_AND_BACKWARDS',
-  mail: 'CLICK_PLAY',
-  maximizeMinimize: 'CLICK_PLAY_AND_BACKWARDS',
-  maximizeMinimize2: 'CLICK_PLAY_AND_BACKWARDS',
-  menu: 'CLICK_PLAY_AND_BACKWARDS',
-  menu2: 'CLICK_PLAY_AND_BACKWARDS',
-  menu3: 'CLICK_PLAY_AND_BACKWARDS',
-  menu4: 'CLICK_PLAY_AND_BACKWARDS',
-  microphone: 'CLICK_PLAY_AND_BACKWARDS',
-  microphone2: 'CLICK_PLAY_AND_BACKWARDS',
-  notification: 'CLICK_PLAY_AND_BACKWARDS',
-  notification2: 'CLICK_PLAY_AND_BACKWARDS',
-  playPause: 'CLICK_PLAY_AND_BACKWARDS',
-  playPauseCircle: 'CLICK_PLAY_AND_BACKWARDS',
-  plusToX: 'CLICK_PLAY_AND_BACKWARDS',
-  pocket: 'HOVER_PLAY_AND_STOP',
-  radioButton: 'CLICK_PLAY_AND_BACKWARDS',
-  scrollDown: 'LOOP_PLAY',
-  searchToX: 'CLICK_PLAY_AND_BACKWARDS',
-  settings: 'HOVER_PLAY_AND_BACKWARDS',
-  settings2: 'CLICK_PLAY_AND_BACKWARDS',
-  skipForward: 'CLICK_PLAY_AND_SEGMENTS',
-  skipBack: 'CLICK_PLAY_AND_SEGMENTS',
-  share: 'HOVER_PLAY_AND_BACKWARDS',
-  star: 'CLICK_PLAY_AND_BACKWARDS',
-  toggle: 'CLICK_PLAY_AND_BACKWARDS',
-  trash: 'HOVER_PLAY_AND_BACKWARDS',
-  trash2: 'HOVER_PLAY_AND_BACKWARDS',
-  thumbUp: 'CLICK_PLAY_AND_BACKWARDS',
-  twitter: 'HOVER_PLAY_AND_STOP',
-  userMinus: 'HOVER_PLAY_AND_STOP',
-  userPlus: 'HOVER_PLAY_AND_STOP',
-  userX: 'HOVER_PLAY_AND_STOP',
-  video: 'CLICK_PLAY_AND_BACKWARDS',
-  video2: 'CLICK_PLAY_AND_BACKWARDS',
-  visibility: 'CLICK_PLAY_AND_BACKWARDS',
-  visibility2: 'CLICK_PLAY_AND_BACKWARDS',
-  volume: 'CLICK_PLAY_AND_BACKWARDS',
-  youtube: 'HOVER_PLAY_AND_STOP',
-  youtube2: 'HOVER_PLAY_AND_STOP',
-  zoomIn: 'LOOP_PLAY',
-  zoomOut: 'LOOP_PLAY'
-};
-
-var getEffect = function getEffect(animationKey) {
-  return animations[animationKey] || '';
-};
-
-var _default = getEffect;
-exports["default"] = _default;

package/utils/getEvents.d.ts

@@ -1,12 +0,0 @@
-import type { AnimationEffect } from './constants';
-declare const getEvents: ({ animation, reverse, animEffect, }: {
-    animation: any;
-    reverse: boolean;
-    animEffect: AnimationEffect;
-}) => {
-    onClick: () => any;
-} | {
-    onMouseEnter: () => any;
-    onMouseLeave: () => any;
-};
-export default getEvents;

package/utils/getEvents.js

@@ -1,96 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var getClickAndPlaySegmentsEvents = function getClickAndPlaySegmentsEvents(animation) {
-  return {
-    onClick: function onClick() {
-      return animation.playSegments([0, 60], true);
-    }
-  };
-};
-
-var getClickPlayEvents = function getClickPlayEvents(animation) {
-  return {
-    onClick: function onClick() {
-      animation.stop();
-      animation.play();
-    }
-  };
-};
-
-var getHoverPlayAndStop = function getHoverPlayAndStop(animation) {
-  return {
-    onMouseEnter: function onMouseEnter() {
-      return animation.play();
-    },
-    onMouseLeave: function onMouseLeave() {
-      return animation.stop();
-    }
-  };
-};
-
-var getHoverPlayBackwardsEvents = function getHoverPlayBackwardsEvents(animation) {
-  return {
-    onMouseEnter: function onMouseEnter() {
-      animation.setDirection(1);
-      animation.play();
-    },
-    onMouseLeave: function onMouseLeave() {
-      animation.setDirection(-1);
-      animation.play();
-    }
-  };
-};
-
-var getClickAndPlayBackwardsEvents = function getClickAndPlayBackwardsEvents(animation, reverse) {
-  var directionMenu = 1; // EG CHECKBOX WHICH NEED TO BE CHECKED AS INITIAL STATE, LET'S PLAY THE ANIMATION ASAP AUTOMATICALLY
-
-  if (reverse) {
-    animation.setDirection(directionMenu);
-    animation.play();
-    directionMenu *= -1;
-  }
-
-  return {
-    onClick: function onClick() {
-      animation.setDirection(directionMenu);
-      animation.play();
-      directionMenu *= -1;
-    }
-  };
-};
-
-var getEvents = function getEvents(_ref) {
-  var animation = _ref.animation,
-      reverse = _ref.reverse,
-      animEffect = _ref.animEffect;
-
-  if (animEffect === 'CLICK_PLAY_AND_SEGMENTS') {
-    return getClickAndPlaySegmentsEvents(animation);
-  }
-
-  if (animEffect === 'CLICK_PLAY') {
-    return getClickPlayEvents(animation);
-  }
-
-  if (animEffect === 'HOVER_PLAY_AND_STOP') {
-    return getHoverPlayAndStop(animation);
-  }
-
-  if (animEffect === 'HOVER_PLAY_AND_BACKWARDS') {
-    return getHoverPlayBackwardsEvents(animation);
-  }
-
-  if (animEffect === 'CLICK_PLAY_AND_BACKWARDS') {
-    return getClickAndPlayBackwardsEvents(animation, reverse);
-  }
-
-  return getClickPlayEvents(animation);
-};
-
-var _default = getEvents;
-exports["default"] = _default;

package/utils/index.d.ts

@@ -1,3 +0,0 @@
-export { default as getEffect } from './getEffect';
-export { default as getEvents } from './getEvents';
-export type { Animation, AnimationKey, AnimationEffect } from './constants';

package/utils/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "getEffect", {
-  enumerable: true,
-  get: function get() {
-    return _getEffect["default"];
-  }
-});
-Object.defineProperty(exports, "getEvents", {
-  enumerable: true,
-  get: function get() {
-    return _getEvents["default"];
-  }
-});
-
-var _getEffect = _interopRequireDefault(require("./getEffect"));
-
-var _getEvents = _interopRequireDefault(require("./getEvents"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }