react-useanimations 2.0.9-RC → 2.0.9-RC1

package/stories/variants.stories.d.ts

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,196 @@
+"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/utils/constants.d.ts

@@ -0,0 +1,6 @@
+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

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

package/utils/getEffect.d.ts

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

package/{src/utils/getEffect.ts → utils/getEffect.js}

@@ -1,10 +1,10 @@
-import type { AnimationKey, AnimationEffect } from '.';
+"use strict";
 
-type Animations = {
-  [Key in AnimationKey]: AnimationEffect;
-};
-
-const animations: Animations = {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var animations = {
   activity: 'LOOP_PLAY',
   airplay: 'LOOP_PLAY',
   alertCircle: 'LOOP_PLAY',
@@ -83,9 +83,12 @@ const animations: Animations = {
   youtube: 'HOVER_PLAY_AND_STOP',
   youtube2: 'HOVER_PLAY_AND_STOP',
   zoomIn: 'LOOP_PLAY',
-  zoomOut: 'LOOP_PLAY',
+  zoomOut: 'LOOP_PLAY'
 };
 
-const getEffect = (animationKey: AnimationKey) => animations[animationKey] || '';
+var getEffect = function getEffect(animationKey) {
+  return animations[animationKey] || '';
+};
 
-export default getEffect;
+var _default = getEffect;
+exports["default"] = _default;

package/utils/getEvents.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,96 @@
+"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.js

@@ -0,0 +1,23 @@
+"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 }; }

package/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
-  "plugins": ["@babel/plugin-proposal-class-properties"]
-}

package/.editorconfig

@@ -1,15 +0,0 @@
-
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_style = space
-insert_final_newline = true
-indent_size = 2
-
-[*.{js,ts,jsx,tsx}]
-indent_size = 2
-
-[*.json]
-indent_size = 2

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-dist

package/.eslintrc.json

@@ -1,31 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "extends": [
-    "airbnb-typescript",
-    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ],
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "rules": {
-    "arrow-parens": "off",
-    "react/jsx-props-no-spreading": "off",
-    "react/prop-types": "off",
-    "rest-spread-spacing": "off",
-    "object-curly-newline": "off",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": [
-          ".storybook/**",
-          "./src/**/*.stories.tsx" 
-        ]
-      }
-    ]
-  }
-}

package/.gitattributes

@@ -1 +0,0 @@
-docs/** linguist-generated=true

package/.prettierrc

@@ -1,10 +0,0 @@
-{
-    "printWidth": 100,
-    "tabWidth": 2,
-    "singleQuote": true,
-    "trailingComma": "es5",
-    "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "semi": true
-  }
-  

package/.storybook/main.js

@@ -1,15 +0,0 @@
-module.exports = {
-  stories: ['../src/**/*.stories.tsx'],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
-      loader: require.resolve('babel-loader'),
-      options: {
-        presets: [['react-app', { flow: false, typescript: true }]],
-      },
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    return config;
-  },
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
-};

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-}

package/LICENSE

@@ -1,30 +0,0 @@
-RIGHTS
-
-All the free files available in useAnimations are distributed
-under Creative Commons (CC) Attribution (BY) unless stated otherwise.
-Our resources (animations) can be used for personal and commercial usage
-within Web and Mobile Applications.
-
-You may modify the resources according to your requirements and use them
-in any or all of your personal or commercial projects. For example,
-you may include this resource on a website or mobile application
-you will be designing for a client.
-
-You are required to attribute or link to useanimations.com in any of projects.
-useAnimations (useanimations.com) will not be responsible for any outcome
-that may occur during the use of our resources.
-
-Files from useAnimations can be shared as long as the useAnimations
-are credited appropriately. 
-
-
-PROHIBITIONS
-
-You do not have the rights to redistribute, resell, lease, license,
-sub-license or offer the file downloaded to any third party.
-For any resalable web applications, software programs, web templates,
-app templates, merchandise etc. you should not include our graphics resources.
-This will be considered as a redistribution of our resources
-which is forbidden by us.
-
-More about Creative Commons (CC) Attribution (BY) - https://creativecommons.org/licenses/by/4.0/