react-useanimations 2.0.4 → 2.0.8

package/src/index.tsx

@@ -1,149 +0,0 @@
-import React, { useState, useEffect, useRef, ReactElement } from 'react';
-// UNFORTUNATELY WHEN LIGHT VERSION IS USED, SOME ANIMATIONS ARE NOT WORKING AS EXPECTED
-// import lottie from 'lottie-web/build/player/lottie_light';
-import lottie from 'lottie-web';
-import type { AnimationItem, AnimationConfigWithData, AnimationConfig } from 'lottie-web';
-
-import { getEffect, getEvents } from './utils';
-import type { Animation, AnimationEffect } from './utils';
-
-const getRandomId = (key: Animation['animationKey']) =>
-  `${key}_i${Math.floor(Math.random() * 10000 + 1)}`;
-
-type Props = {
-  animation: Animation;
-  reverse?: boolean;
-  strokeColor?: string;
-  pathCss?: string;
-  options?: Partial<AnimationConfig>;
-  size?: number;
-  loop?: AnimationConfig['loop'];
-  autoplay?: AnimationConfig['autoplay'];
-  wrapperStyle?: React.CSSProperties;
-  render?: (eventProps: any, animationProps: any) => ReactElement;
-} & React.HTMLProps<HTMLDivElement>;
-
-const UseAnimations: React.FC<Props> = ({
-  animation: { animationData, animationKey },
-  reverse = false,
-  size = 24,
-  strokeColor,
-  pathCss,
-  loop,
-  autoplay,
-  wrapperStyle,
-  options,
-  onClick,
-  render,
-  ...other
-}) => {
-  const [animation, setAnimation] = useState<AnimationItem>();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const animEffect: AnimationEffect = getEffect(animationKey);
-    const animationId = getRandomId(animationKey);
-
-    if (strokeColor || pathCss) {
-      try {
-        const css = `#${animationId} path { stroke: ${strokeColor || 'inherit'}; ${pathCss || ''}}`;
-        let sheetEl: any = document.getElementById('useAnimationsSheet');
-
-        // STYLESHEET HASN'T BEEN CREATED YET
-        if (!sheetEl) {
-          sheetEl = document.createElement('style');
-          sheetEl.setAttribute('id', 'useAnimationsSheet');
-          sheetEl.appendChild(document.createTextNode(''));
-          document.head.appendChild(sheetEl);
-        }
-
-        const sheet = sheetEl ? sheetEl.sheet || sheetEl.styleSheet : null;
-        sheet.insertRule(css);
-      } catch (err) {
-        // eslint-disable-next-line
-        console.warn(
-          `There's been a problem with deleting a CSSRule, please report that issue in https://github.com/useAnimations/react-useanimations`,
-          err
-        );
-      }
-    }
-
-    const defaultOptions: AnimationConfigWithData = {
-      container: ref.current as Element,
-      renderer: 'svg',
-      animationData,
-      loop: loop || animEffect === 'LOOP_PLAY',
-      autoplay: autoplay || animEffect === 'LOOP_PLAY',
-      rendererSettings: {
-        // LOADS DOM ELEMENTS WHEN NEEDED. MIGHT SPEED UP INITIALIZATION FOR LARGE NUMBER OF ELEMENTS.
-        progressiveLoad: true,
-        // lottie-web missing id type
-        // @ts-ignore-next-line
-        id: animationId,
-      },
-      ...options,
-    };
-
-    setAnimation(lottie.loadAnimation(defaultOptions));
-
-    return () => {
-      animation?.destroy();
-      setAnimation(undefined);
-      // DELETE CSS RULE
-      try {
-        const sheetEl: any = document.getElementById('useAnimationsSheet');
-        const sheet = sheetEl ? sheetEl.sheet || sheetEl.styleSheet : null;
-
-        if (sheet) {
-          const animationRuleIndex = Array.from(sheet.cssRules).findIndex(
-            (rule: any) => rule.selectorText === `#${animationId} path`
-          );
-
-          if (animationRuleIndex !== -1) {
-            sheet.deleteRule(animationRuleIndex);
-          }
-        }
-      } catch (err) {
-        // eslint-disable-next-line
-        console.warn(
-          `There's been a problem with deleting a CSSRule, please report that issue in https://github.com/useAnimations/react-useanimations`,
-          err
-        );
-      }
-    };
-  }, []);
-
-  const defaultStyles = {
-    overflow: 'hidden',
-    outline: 'none',
-    width: `${size}px`,
-    height: `${size}px`,
-    ...wrapperStyle,
-  };
-
-  const events = animation
-    ? getEvents({
-        animation,
-        reverse,
-        animEffect: getEffect(animationKey),
-      })
-    : undefined;
-
-  const eventProps = {
-    ...events,
-    onClick: (e: React.MouseEvent<HTMLDivElement>) => {
-      if (onClick) onClick(e);
-      if (events && 'onClick' in events) events.onClick();
-    },
-  };
-
-  const animationProps = {
-    ref,
-    ...other,
-    style: defaultStyles,
-  };
-
-  return render ? render(eventProps, animationProps) : <div {...eventProps} {...animationProps} />;
-};
-
-export default UseAnimations;

package/src/lib/activity/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import activity from './activity.json';
-
-export default { animationData: activity, animationKey: 'activity' } as Animation;

package/src/lib/airplay/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import airplay from './airplay.json';
-
-export default { animationData: airplay, animationKey: 'airplay' } as Animation;

package/src/lib/alertCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import alertCircle from './alertCircle.json';
-
-export default { animationData: alertCircle, animationKey: 'alertCircle' } as Animation;

package/src/lib/alertOctagon/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import alertOctagon from './alertOctagon.json';
-
-export default { animationData: alertOctagon, animationKey: 'alertOctagon' } as Animation;

package/src/lib/alertTriangle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import alertTriangle from './alertTriangle.json';
-
-export default { animationData: alertTriangle, animationKey: 'alertTriangle' } as Animation;

package/src/lib/archive/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import archive from './archive.json';
-
-export default { animationData: archive, animationKey: 'archive' } as Animation;

package/src/lib/arrowDown/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowDown from './arrowDown.json';
-
-export default { animationData: arrowDown, animationKey: 'arrowDown' } as Animation;

package/src/lib/arrowDownCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowDownCircle from './arrowDownCircle.json';
-
-export default { animationData: arrowDownCircle, animationKey: 'arrowDownCircle' } as Animation;

package/src/lib/arrowLeftCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowLeftCircle from './arrowLeftCircle.json';
-
-export default { animationData: arrowLeftCircle, animationKey: 'arrowLeftCircle' } as Animation;

package/src/lib/arrowRightCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowRightCircle from './arrowRightCircle.json';
-
-export default { animationData: arrowRightCircle, animationKey: 'arrowRightCircle' } as Animation;

package/src/lib/arrowUp/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowUp from './arrowUp.json';
-
-export default { animationData: arrowUp, animationKey: 'arrowUp' } as Animation;

package/src/lib/arrowUpCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import arrowUpCircle from './arrowUpCircle.json';
-
-export default { animationData: arrowUpCircle, animationKey: 'arrowUpCircle' } as Animation;

package/src/lib/bookmark/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import bookmark from './bookmark.json';
-
-export default { animationData: bookmark, animationKey: 'bookmark' } as Animation;

package/src/lib/calendar/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import calendar from './calendar.json';
-
-export default { animationData: calendar, animationKey: 'calendar' } as Animation;

package/src/lib/checkBox/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import checkBox from './checkBox.json';
-
-export default { animationData: checkBox, animationKey: 'checkBox' } as Animation;

package/src/lib/codepen/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import codepen from './codepen.json';
-
-export default { animationData: codepen, animationKey: 'codepen' } as Animation;

package/src/lib/copy/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import copy from './copy.json';
-
-export default { animationData: copy, animationKey: 'copy' } as Animation;

package/src/lib/download/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import download from './download.json';
-
-export default { animationData: download, animationKey: 'download' } as Animation;

package/src/lib/edit/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import edit from './edit.json';
-
-export default { animationData: edit, animationKey: 'edit' } as Animation;

package/src/lib/explore/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import explore from './explore.json';
-
-export default { animationData: explore, animationKey: 'explore' } as Animation;

package/src/lib/facebook/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import facebook from './facebook.json';
-
-export default { animationData: facebook, animationKey: 'facebook' } as Animation;

package/src/lib/github/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import github from './github.json';
-
-export default { animationData: github, animationKey: 'github' } as Animation;

package/src/lib/heart/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import heart from './heart.json';
-
-export default { animationData: heart, animationKey: 'heart' } as Animation;

package/src/lib/infinity/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import infinity from './infinity.json';
-
-export default { animationData: infinity, animationKey: 'infinity' } as Animation;

package/src/lib/info/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import info from './info.json';
-
-export default { animationData: info, animationKey: 'info' } as Animation;

package/src/lib/instagram/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import instagram from './instagram.json';
-
-export default { animationData: instagram, animationKey: 'instagram' } as Animation;

package/src/lib/linkedin/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import linkedin from './linkedin.json';
-
-export default { animationData: linkedin, animationKey: 'linkedin' } as Animation;

package/src/lib/loading/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import loading from './loading.json';
-
-export default { animationData: loading, animationKey: 'loading' } as Animation;

package/src/lib/loading2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import loading2 from './loading2.json';
-
-export default { animationData: loading2, animationKey: 'loading2' } as Animation;

package/src/lib/loading3/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import loading3 from './loading3.json';
-
-export default { animationData: loading3, animationKey: 'loading3' } as Animation;

package/src/lib/lock/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import lock from './lock.json';
-
-export default { animationData: lock, animationKey: 'lock' } as Animation;

package/src/lib/mail/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import mail from './mail.json';
-
-export default { animationData: mail, animationKey: 'mail' } as Animation;

package/src/lib/maximizeMinimize/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import maximizeMinimize from './maximizeMinimize.json';
-
-export default { animationData: maximizeMinimize, animationKey: 'maximizeMinimize' } as Animation;

package/src/lib/maximizeMinimize2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import maximizeMinimize2 from './maximizeMinimize2.json';
-
-export default { animationData: maximizeMinimize2, animationKey: 'maximizeMinimize2' } as Animation;

package/src/lib/menu/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu from './menu.json';
-
-export default { animationData: menu, animationKey: 'menu' } as Animation;

package/src/lib/menu2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu2 from './menu2.json';
-
-export default { animationData: menu2, animationKey: 'menu2' } as Animation;

package/src/lib/menu3/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu3 from './menu3.json';
-
-export default { animationData: menu3, animationKey: 'menu3' } as Animation;

package/src/lib/menu4/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import menu4 from './menu4.json';
-
-export default { animationData: menu4, animationKey: 'menu4' } as Animation;

package/src/lib/microphone/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import microphone from './microphone.json';
-
-export default { animationData: microphone, animationKey: 'microphone' } as Animation;

package/src/lib/microphone2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import microphone2 from './microphone2.json';
-
-export default { animationData: microphone2, animationKey: 'microphone2' } as Animation;

package/src/lib/notification/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import notification from './notification.json';
-
-export default { animationData: notification, animationKey: 'notification' } as Animation;

package/src/lib/notification2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import notification2 from './notification2.json';
-
-export default { animationData: notification2, animationKey: 'notification2' } as Animation;

package/src/lib/playPause/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import playPause from './playPause.json';
-
-export default { animationData: playPause, animationKey: 'playPause' } as Animation;

package/src/lib/playPauseCircle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import playPauseCircle from './playPauseCircle.json';
-
-export default { animationData: playPauseCircle, animationKey: 'playPauseCircle' } as Animation;

package/src/lib/plusToX/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import plusToX from './plusToX.json';
-
-export default { animationData: plusToX, animationKey: 'plusToX' } as Animation;

package/src/lib/pocket/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import pocket from './pocket.json';
-
-export default { animationData: pocket, animationKey: 'pocket' } as Animation;

package/src/lib/radioButton/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import radioButton from './radioButton.json';
-
-export default { animationData: radioButton, animationKey: 'radioButton' } as Animation;

package/src/lib/scrollDown/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import scrollDown from './scrollDown.json';
-
-export default { animationData: scrollDown, animationKey: 'scrollDown' } as Animation;

package/src/lib/searchToX/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import searchToX from './searchToX.json';
-
-export default { animationData: searchToX, animationKey: 'searchToX' } as Animation;

package/src/lib/settings/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import settings from './settings.json';
-
-export default { animationData: settings, animationKey: 'settings' } as Animation;

package/src/lib/settings2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import settings2 from './settings2.json';
-
-export default { animationData: settings2, animationKey: 'settings2' } as Animation;

package/src/lib/share/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import share from './share.json';
-
-export default { animationData: share, animationKey: 'share' } as Animation;

package/src/lib/skipBack/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import skipBack from './skipBack.json';
-
-export default { animationData: skipBack, animationKey: 'skipBack' } as Animation;

package/src/lib/skipForward/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import skipForward from './skipForward.json';
-
-export default { animationData: skipForward, animationKey: 'skipForward' } as Animation;

package/src/lib/star/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import star from './star.json';
-
-export default { animationData: star, animationKey: 'star' } as Animation;

package/src/lib/thumbUp/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import thumbUp from './thumbUp.json';
-
-export default { animationData: thumbUp, animationKey: 'thumbUp' } as Animation;

package/src/lib/toggle/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import toggle from './toggle.json';
-
-export default { animationData: toggle, animationKey: 'toggle' } as Animation;

package/src/lib/trash/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import trash from './trash.json';
-
-export default { animationData: trash, animationKey: 'trash' } as Animation;

package/src/lib/trash2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import trash2 from './trash2.json';
-
-export default { animationData: trash2, animationKey: 'trash2' } as Animation;

package/src/lib/twitter/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import twitter from './twitter.json';
-
-export default { animationData: twitter, animationKey: 'twitter' } as Animation;

package/src/lib/userMinus/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import userMinus from './userMinus.json';
-
-export default { animationData: userMinus, animationKey: 'userMinus' } as Animation;

package/src/lib/userPlus/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import userPlus from './userPlus.json';
-
-export default { animationData: userPlus, animationKey: 'userPlus' } as Animation;

package/src/lib/userX/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import userX from './userX.json';
-
-export default { animationData: userX, animationKey: 'userX' } as Animation;

package/src/lib/video/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import video from './video.json';
-
-export default { animationData: video, animationKey: 'video' } as Animation;

package/src/lib/video2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import video2 from './video2.json';
-
-export default { animationData: video2, animationKey: 'video2' } as Animation;

package/src/lib/visibility/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import visibility from './visibility.json';
-
-export default { animationData: visibility, animationKey: 'visibility' } as Animation;

package/src/lib/visibility2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import visibility2 from './visibility2.json';
-
-export default { animationData: visibility2, animationKey: 'visibility2' } as Animation;

package/src/lib/volume/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import volume from './volume.json';
-
-export default { animationData: volume, animationKey: 'volume' } as Animation;

package/src/lib/youtube/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import youtube from './youtube.json';
-
-export default { animationData: youtube, animationKey: 'youtube' } as Animation;

package/src/lib/youtube2/index.ts

@@ -1,4 +0,0 @@
-import type { Animation } from '../../utils/constants';
-import youtube2 from './youtube2.json';
-
-export default { animationData: youtube2, animationKey: 'youtube2' } as Animation;

package/src/stories/controlled.stories.tsx

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import radioButton from '../lib/radioButton';
-import UseAnimation from '..';
-
-// ANIMATIONS WITH CLICK PLAY & BACKWARDS WILL HAVE REVERSE FUNCITONALITY FOR STATE MNG
-export default {
-  title: 'Controlled State',
-  component: UseAnimation,
-};
-
-export const RadioButton = () => {
-  const [checked, setChecked] = useState(true);
-
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-      <div style={{ padding: '20px' }}>
-        <span>radioButton</span>
-        <UseAnimation
-          reverse={checked}
-          onClick={() => {
-            setChecked(!checked);
-          }}
-          size={40}
-          wrapperStyle={{ marginTop: '5px' }}
-          animation={radioButton}
-        />
-      </div>
-    </div>
-  );
-};