react-useanimations 2.0.8 → 2.0.9-RC

package/src/stories/variants.stories.tsx

@@ -0,0 +1,237 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import activity from '../lib/activity';
+import youtube from '../lib/youtube';
+import star from '../lib/star';
+import heart from '../lib/heart';
+import UseAnimation from '..';
+
+export default {
+  title: 'Variants',
+  component: UseAnimation,
+  decorators: [withInfo],
+};
+
+export const Stroke = () => (
+  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+    <div style={{ padding: '20px' }}>
+      <span>activity</span>
+      <UseAnimation
+        strokeColor="green"
+        size={40}
+        wrapperStyle={{ marginTop: '5px' }}
+        animation={activity}
+      />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>activity</span>
+      <UseAnimation
+        strokeColor="red"
+        size={40}
+        wrapperStyle={{ marginTop: '5px' }}
+        animation={youtube}
+      />
+    </div>
+  </div>
+);
+
+Stroke.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const Stroke = () => (
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+          <div style={{ padding: '20px' }}>
+            <span>activity</span>
+            <UseAnimation
+              strokeColor="green"
+              size={40}
+              wrapperStyle={{ marginTop: '5px' }}
+              animation={activity}
+            />
+          </div>
+          <div style={{ padding: '20px' }}>
+            <span>activity</span>
+            <UseAnimation
+              strokeColor="red"
+              size={40}
+              wrapperStyle={{ marginTop: '5px' }}
+              animation={youtube}
+            />
+          </div>
+        </div>
+      );
+      ~~~
+    `,
+    },
+  },
+};
+
+export const Fill = () => (
+  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+    <div style={{ padding: '20px' }}>
+      <span>star</span>
+      <UseAnimation
+        fillColor="green"
+        size={40}
+        wrapperStyle={{ marginTop: '5px' }}
+        animation={star}
+      />
+    </div>
+    <div style={{ padding: '20px' }}>
+      <span>heart</span>
+      <UseAnimation
+        fillColor="red"
+        size={40}
+        wrapperStyle={{ marginTop: '5px' }}
+        animation={heart}
+      />
+    </div>
+  </div>
+);
+
+Fill.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const Fill = () => (
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+          <div style={{ padding: '20px' }}>
+            <span>star</span>
+            <UseAnimation
+              fillColor="green"
+              size={40}
+              wrapperStyle={{ marginTop: '5px' }}
+              animation={star}
+            />
+          </div>
+          <div style={{ padding: '20px' }}>
+            <span>heart</span>
+            <UseAnimation
+              fillColor="red"
+              size={40}
+              wrapperStyle={{ marginTop: '5px' }}
+              animation={heart}
+            />
+          </div>
+        </div>
+      );
+      ~~~
+    `,
+    },
+  },
+};
+
+export const CustomCSS = () => (
+  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+    <div style={{ padding: '20px' }}>
+      <span>activity</span>
+      <UseAnimation
+        size={40}
+        pathCss="stroke: purple; stroke-width: 2%;"
+        wrapperStyle={{ marginTop: '5px' }}
+        animation={activity}
+      />
+    </div>
+  </div>
+);
+
+CustomCSS.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const CustomCSS = () => (
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+          <div style={{ padding: '20px' }}>
+            <span>activity</span>
+            <UseAnimation
+              size={40}
+              pathCss="stroke: purple; stroke-width: 2%;"
+              wrapperStyle={{ marginTop: '5px' }}
+              animation={activity}
+            />
+          </div>
+        </div>
+      );
+      ~~~
+    `,
+    },
+  },
+};
+
+export const Size = () => (
+  <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+    <div style={{ padding: '20px' }}>
+      <span>activity</span>
+      <UseAnimation size={60} wrapperStyle={{ marginTop: '5px' }} animation={activity} />
+    </div>
+  </div>
+);
+
+Size.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const Size = () => (
+        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+          <div style={{ padding: '20px' }}>
+            <span>activity</span>
+            <UseAnimation size={60} wrapperStyle={{ marginTop: '5px' }} animation={activity} />
+          </div>
+        </div>
+      );
+      ~~~
+    `,
+    },
+  },
+};
+
+export const WrapperElement = () => {
+  return (
+    <UseAnimation
+      animation={heart}
+      size={60}
+      onClick={() => {
+        // eslint-disable-next-line
+        console.log('additional onClick cb is working');
+      }}
+      render={(eventProps, animationProps) => (
+        <button style={{ padding: '20px' }} type="button" {...eventProps}>
+          <div {...animationProps} />
+        </button>
+      )}
+    />
+  );
+};
+
+WrapperElement.story = {
+  parameters: {
+    info: {
+      text: `
+      ~~~js
+      export const WrapperElement = () => {
+        return (
+          <UseAnimation
+            animation={heart}
+            size={60}
+            onClick={() => {
+              // eslint-disable-next-line
+              console.log('additional onClick cb is working');
+            }}
+            render={(eventProps, animationProps) => (
+              <button style={{ padding: '20px' }} type="button" {...eventProps}>
+                <div {...animationProps} />
+              </button>
+            )}
+          />
+        );
+      };
+      ~~~
+    `,
+    },
+  },
+};

package/src/utils/constants.ts

@@ -0,0 +1,93 @@
+export type AnimationEffect =
+  | 'CLICK_PLAY_AND_BACKWARDS'
+  | 'HOVER_PLAY_AND_STOP'
+  | 'HOVER_PLAY_AND_BACKWARDS'
+  | 'CLICK_PLAY'
+  | 'LOOP_PLAY'
+  | 'CLICK_PLAY_AND_SEGMENTS';
+
+export type Animation = {
+  animationData: any;
+  animationKey: AnimationKey;
+};
+
+export 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/getEffect.js → src/utils/getEffect.ts}

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

package/src/utils/getEvents.ts

@@ -0,0 +1,81 @@
+import type { AnimationEffect } from './constants';
+
+const getClickAndPlaySegmentsEvents = (animation: any) => ({
+  onClick: () => animation.playSegments([0, 60], true),
+});
+
+const getClickPlayEvents = (animation: any) => ({
+  onClick: () => {
+    animation.stop();
+    animation.play();
+  },
+});
+
+const getHoverPlayAndStop = (animation: any) => ({
+  onMouseEnter: () => animation.play(),
+  onMouseLeave: () => animation.stop(),
+});
+
+const getHoverPlayBackwardsEvents = (animation: any) => ({
+  onMouseEnter: () => {
+    animation.setDirection(1);
+    animation.play();
+  },
+  onMouseLeave: () => {
+    animation.setDirection(-1);
+    animation.play();
+  },
+});
+
+const getClickAndPlayBackwardsEvents = (animation: any, reverse: boolean) => {
+  let 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: () => {
+      animation.setDirection(directionMenu);
+      animation.play();
+      directionMenu *= -1;
+    },
+  };
+};
+
+const getEvents = ({
+  animation,
+  reverse,
+  animEffect,
+}: {
+  animation: any;
+  reverse: boolean;
+  animEffect: AnimationEffect;
+}) => {
+  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);
+};
+
+export default getEvents;

package/tsconfig.json

@@ -0,0 +1,67 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "allowJs": true, /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true, /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./dist", /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": false, /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    /* Strict Type-Checking Options */
+    "strict": true, /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    /* Module Resolution Options */
+    "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    /* Advanced Options */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/index.d.ts

@@ -1,19 +0,0 @@
-import React, { ReactElement } from 'react';
-import type { AnimationConfig } from 'lottie-web';
-import type { Animation } from './utils';
-declare type Props = {
-    animation: Animation;
-    reverse?: boolean;
-    strokeColor?: string;
-    fillColor?: string;
-    pathCss?: string;
-    options?: Partial<AnimationConfig>;
-    size?: number;
-    loop?: AnimationConfig['loop'];
-    autoplay?: AnimationConfig['autoplay'];
-    speed?: number;
-    wrapperStyle?: React.CSSProperties;
-    render?: (eventProps: any, animationProps: any) => ReactElement;
-} & React.HTMLProps<HTMLDivElement>;
-declare const UseAnimations: React.FC<Props>;
-export default UseAnimations;