react-useanimations 2.10.0 → 3.0.0-beta.1

package/index.js

@@ -1,197 +1,288 @@
+'use client';
 "use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
 });
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _lottieWeb = _interopRequireDefault(require("lottie-web"));
-
-var _utils = require("./utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var getRandomId = function getRandomId(key) {
-  return "".concat(key, "_i").concat(Math.floor(Math.random() * 10000 + 1));
+module.exports = __toCommonJS(src_exports);
+var import_react = __toESM(require("react"));
+
+// src/icons.ts
+var interactions = {
+  activity: "loop",
+  airplay: "loop",
+  alertCircle: "loop",
+  alertOctagon: "loop",
+  alertTriangle: "loop",
+  archive: "hover",
+  arrowDown: "loop",
+  arrowDownCircle: "click-replay",
+  arrowLeftCircle: "click-replay",
+  arrowRightCircle: "click-replay",
+  arrowUp: "loop",
+  arrowUpCircle: "click-replay",
+  behance: "hover-loop",
+  bookmark: "click-toggle",
+  calendar: "hover",
+  checkBox: "click-toggle",
+  checkmark: "loop",
+  chevronLeft: "click-replay",
+  chevronRight: "click-replay",
+  codepen: "hover-loop",
+  copy: "hover",
+  download: "click-replay",
+  dribbble: "hover-loop",
+  edit: "hover",
+  error: "loop",
+  explore: "hover",
+  facebook: "hover-loop",
+  filter: "click-replay",
+  folder: "hover",
+  github: "hover-loop",
+  heart: "click-toggle",
+  help: "loop",
+  home: "hover",
+  infinity: "loop",
+  info: "hover",
+  instagram: "hover",
+  linkedin: "hover-loop",
+  loading: "loop",
+  loading2: "loop",
+  loading3: "loop",
+  loading4: "loop",
+  lock: "click-toggle",
+  mail: "hover",
+  maximizeMinimize: "click-toggle",
+  maximizeMinimize2: "click-toggle",
+  menu: "click-toggle",
+  menu2: "click-toggle",
+  menu3: "click-toggle",
+  menu4: "click-toggle",
+  microphone: "click-toggle",
+  microphone2: "click-toggle",
+  notification: "click-toggle",
+  notification2: "click-toggle",
+  notification3: "loop",
+  notification4: "loop",
+  playPause: "click-toggle",
+  playPauseCircle: "click-toggle",
+  plusToX: "click-toggle",
+  pocket: "hover-loop",
+  radioButton: "click-toggle",
+  refresh: "click-replay",
+  scrollDown: "loop",
+  searchToX: "click-toggle",
+  settings: "hover",
+  settings2: "click-toggle",
+  share: "hover",
+  skipBack: "click-replay",
+  skipForward: "click-replay",
+  star: "click-toggle",
+  thumbUp: "click-toggle",
+  toggle: "click-toggle",
+  trash: "hover",
+  trash2: "hover",
+  twitter: "hover-loop",
+  userMinus: "hover",
+  userPlus: "hover",
+  userX: "hover",
+  video: "click-toggle",
+  video2: "click-toggle",
+  visibility: "click-toggle",
+  visibility2: "click-toggle",
+  visibility3: "click-toggle",
+  volume: "click-toggle",
+  youtube: "hover",
+  youtube2: "hover",
+  zoomIn: "hover",
+  zoomOut: "hover"
+};
+var fullPlayerIcons = /* @__PURE__ */ new Set(["error", "twitter"]);
+
+// src/interactions.ts
+var getInteraction = (key) => (
+  // Unknown keys (e.g. custom animations) fall back to replaying on click.
+  interactions[key] ?? "click-replay"
+);
+var playToggle = (animation, toEnd) => {
+  animation.setDirection(toEnd ? 1 : -1);
+  animation.play();
+};
+var replay = (animation) => {
+  animation.setDirection(1);
+  animation.playSegments([0, animation.totalFrames], true);
+};
+var hoverStart = (animation, interaction) => {
+  if (interaction === "hover") animation.setDirection(1);
+  animation.play();
+};
+var hoverEnd = (animation, interaction) => {
+  if (interaction === "hover") {
+    animation.setDirection(-1);
+    animation.play();
+  } else {
+    animation.stop();
+  }
 };
 
-var UseAnimations = function UseAnimations(_ref) {
-  var _ref$animation = _ref.animation,
-      animationData = _ref$animation.animationData,
-      animationKey = _ref$animation.animationKey,
-      _ref$reverse = _ref.reverse,
-      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 24 : _ref$size,
-      _ref$speed = _ref.speed,
-      speed = _ref$speed === void 0 ? 1 : _ref$speed,
-      strokeColor = _ref.strokeColor,
-      fillColor = _ref.fillColor,
-      pathCss = _ref.pathCss,
-      loop = _ref.loop,
-      autoplay = _ref.autoplay,
-      wrapperStyle = _ref.wrapperStyle,
-      options = _ref.options,
-      _onClick = _ref.onClick,
-      render = _ref.render,
-      other = _objectWithoutProperties(_ref, ["animation", "reverse", "size", "speed", "strokeColor", "fillColor", "pathCss", "loop", "autoplay", "wrapperStyle", "options", "onClick", "render"]);
-
-  var _useState = (0, _react.useState)(),
-      _useState2 = _slicedToArray(_useState, 2),
-      animation = _useState2[0],
-      setAnimation = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(getRandomId(animationKey)),
-      _useState4 = _slicedToArray(_useState3, 1),
-      animationId = _useState4[0];
-
-  var _useState5 = (0, _react.useState)({}),
-      _useState6 = _slicedToArray(_useState5, 2),
-      events = _useState6[0],
-      setEvents = _useState6[1];
-
-  var ref = (0, _react.useRef)(null);
-
-  var defaultStyles = _objectSpread({
-    overflow: 'hidden',
-    outline: 'none',
-    width: "".concat(size, "px"),
-    height: "".concat(size, "px")
-  }, wrapperStyle); // INVOKE THE LOTTIE ANIMATION
-
-
-  (0, _react.useEffect)(function () {
-    var animEffect = (0, _utils.getEffect)(animationKey);
-
-    var defaultOptions = _objectSpread({
-      container: ref.current,
-      renderer: 'svg',
-      animationData: 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(_lottieWeb["default"].loadAnimation(defaultOptions));
-    return function () {
-      animation === null || animation === void 0 ? void 0 : animation.destroy();
-      setAnimation(undefined);
-    };
-  }, []); // HANDLE STYLING FOR ANIMATION
-
-  (0, _react.useEffect)(function () {
-    if (strokeColor || fillColor || pathCss) {
-      try {
-        var css = "#".concat(animationId, " path { ").concat(strokeColor ? "stroke: ".concat(strokeColor, ";") : '', "  ").concat(fillColor ? "fill: ".concat(fillColor, ";") : '', " ").concat(pathCss || '', "}");
-        var sheetEl = 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);
-        }
-
-        var 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);
-      }
-    }
-
-    return function () {
-      // DELETE CSS RULE
-      try {
-        var _sheetEl = document.getElementById('useAnimationsSheet');
-
-        var _sheet = _sheetEl ? _sheetEl.sheet || _sheetEl.styleSheet : null;
-
-        if (_sheet) {
-          var animationRuleIndex = Array.from(_sheet.cssRules).findIndex(function (rule) {
-            return rule.selectorText === "#".concat(animationId, " path");
-          });
-
-          if (animationRuleIndex !== -1) {
-            _sheet.deleteRule(animationRuleIndex);
-          }
+// src/lottie.ts
+var light;
+var full;
+var unwrap = (mod) => mod.default ?? mod;
+var loadLottie = (needsFullPlayer) => {
+  if (needsFullPlayer) {
+    full ?? (full = import("lottie-web").then(unwrap));
+    return full;
+  }
+  light ?? (light = import("lottie-web/build/player/lottie_light").then(unwrap));
+  return light;
+};
+var lottie_default = loadLottie;
+
+// src/index.tsx
+var idCounter = 0;
+var UseAnimations = (props) => {
+  const {
+    animation: { animationData, animationKey },
+    interaction: interactionProp,
+    reverse = false,
+    size = 24,
+    speed = 1,
+    strokeColor,
+    fillColor,
+    pathCss,
+    loop,
+    autoplay,
+    wrapperStyle,
+    options,
+    render,
+    style,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...other
+  } = props;
+  const containerRef = (0, import_react.useRef)(null);
+  const [player, setPlayer] = (0, import_react.useState)(null);
+  const [id] = (0, import_react.useState)(() => `useanimations-${idCounter += 1}`);
+  const atEnd = (0, import_react.useRef)(false);
+  const latest = (0, import_react.useRef)({ options, speed });
+  const interaction = interactionProp ?? getInteraction(animationKey);
+  const shouldLoop = loop ?? (interaction === "loop" || interaction === "hover-loop");
+  const shouldAutoplay = autoplay ?? interaction === "loop";
+  (0, import_react.useEffect)(() => {
+    latest.current = { options, speed };
+  });
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return void 0;
+    let cancelled = false;
+    let instance;
+    lottie_default(fullPlayerIcons.has(animationKey)).then((lottie) => {
+      if (cancelled) return;
+      const { options: custom, speed: initialSpeed } = latest.current;
+      instance = lottie.loadAnimation({
+        container,
+        renderer: "svg",
+        animationData,
+        loop: shouldLoop,
+        autoplay: shouldAutoplay,
+        ...custom,
+        // lottie-web supports `id` (set on the <svg>) but its types don't declare it.
+        rendererSettings: {
+          progressiveLoad: true,
+          ...custom?.rendererSettings,
+          id
         }
-      } 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);
-      }
+      });
+      instance.setSpeed(initialSpeed);
+      atEnd.current = false;
+      setPlayer(instance);
+    });
+    return () => {
+      cancelled = true;
+      instance?.destroy();
+      setPlayer(null);
     };
-  }, [strokeColor, fillColor, pathCss]); // SET NAVIGATION EVENTS
-
-  (0, _react.useEffect)(function () {
-    // eslint-disable-next-line
-    var events = animation ? (0, _utils.getEvents)({
-      animation: animation,
-      reverse: reverse,
-      animEffect: (0, _utils.getEffect)(animationKey)
-    }) : undefined;
-    if (events) setEvents(events);
-  }, [animation, reverse]); // SET ANIMATION SPEED
-
-  (0, _react.useEffect)(function () {
-    if (animation) {
-      animation.setSpeed(speed);
+  }, [animationData, animationKey, shouldLoop, shouldAutoplay, id]);
+  (0, import_react.useEffect)(() => {
+    player?.setSpeed(speed);
+  }, [player, speed]);
+  (0, import_react.useEffect)(() => {
+    if (!player || interaction !== "click-toggle" || reverse === atEnd.current) return;
+    atEnd.current = reverse;
+    playToggle(player, reverse);
+  }, [player, interaction, reverse]);
+  (0, import_react.useEffect)(() => {
+    if (!strokeColor && !fillColor && !pathCss) return void 0;
+    const sheet = document.createElement("style");
+    sheet.textContent = `#${id} path { ${strokeColor ? `stroke: ${strokeColor};` : ""} ${fillColor ? `fill: ${fillColor};` : ""} ${pathCss ?? ""} }`;
+    document.head.appendChild(sheet);
+    return () => sheet.remove();
+  }, [id, strokeColor, fillColor, pathCss]);
+  const eventProps = {
+    onClick: (event) => {
+      onClick?.(event);
+      if (!player || event.defaultPrevented) return;
+      if (interaction === "click-toggle") {
+        atEnd.current = !atEnd.current;
+        playToggle(player, atEnd.current);
+      } else if (interaction === "click-replay") {
+        replay(player);
+      }
+    },
+    onMouseEnter: (event) => {
+      onMouseEnter?.(event);
+      if (!player || event.defaultPrevented) return;
+      if (interaction === "hover" || interaction === "hover-loop") hoverStart(player, interaction);
+    },
+    onMouseLeave: (event) => {
+      onMouseLeave?.(event);
+      if (!player || event.defaultPrevented) return;
+      if (interaction === "hover" || interaction === "hover-loop") hoverEnd(player, interaction);
     }
-  }, [animation, speed]);
-
-  var eventProps = _objectSpread(_objectSpread({}, events), {}, {
-    onClick: function onClick(e) {
-      if (_onClick) _onClick(e);
-      if (events && 'onClick' in events) events.onClick();
+  };
+  const animationProps = {
+    ...other,
+    ref: containerRef,
+    style: {
+      overflow: "hidden",
+      outline: "none",
+      width: `${size}px`,
+      height: `${size}px`,
+      ...wrapperStyle,
+      ...style
     }
-  });
-
-  var animationProps = _objectSpread(_objectSpread({
-    ref: ref
-  }, other), {}, {
-    style: defaultStyles
-  });
-
-  return render ? render(eventProps, animationProps) : /*#__PURE__*/_react["default"].createElement("div", _extends({}, eventProps, animationProps));
+  };
+  return render ? render(eventProps, animationProps) : /* @__PURE__ */ import_react.default.createElement("div", { ...eventProps, ...animationProps });
 };
-
-var _default = UseAnimations;
-exports["default"] = _default;
+var src_default = UseAnimations;