react-native-fiesta/lib/commonjs/components/Firework.js

A set of celebration animations powered by Skia. Engage more with your users by celebrating in your React Native application.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Firework = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeSkia = require("@shopify/react-native-skia");
var _reactNativeReanimated = require("react-native-reanimated");
var _fireworks = require("../utils/fireworks");
var _FireworkParticle = require("./FireworkParticle");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Firework = exports.Firework = /*#__PURE__*/(0, _react.memo)(({
  initialPosition,
  color = '#000',
  autoHide = true,
  particleRadius,
  fireworkRadius = 400,
  numberOfParticles = 50
}) => {
  const cx = (0, _react.useMemo)(() => (initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.x) ?? 0, [initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.x]);
  const cy = (0, _react.useMemo)(() => (initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.y) ?? 0, [initialPosition === null || initialPosition === void 0 ? void 0 : initialPosition.y]);
  const particlesToDraw = (0, _react.useMemo)(() => () => {
    const golden_ratio = (Math.sqrt(4) + 2) / 2 - 1;
    const golden_angle = golden_ratio * (2 * Math.PI);
    const circle_rad = fireworkRadius * 0.4 - 20; // defines the radious of the final circle

    const particlesToDrawArray = [];
    for (let i = 1; i <= numberOfParticles; ++i) {
      const dot_rad = numberOfParticles / 10 * 0.001 * i;
      const ratio = i / numberOfParticles;
      const angle = i * golden_angle;
      const spiral_rad = ratio * circle_rad;
      const x = cx + Math.cos((0, _fireworks.fromRadians)(angle)) * spiral_rad;
      const y = cy + Math.sin((0, _fireworks.fromRadians)(angle)) * spiral_rad;
      const initialPosX = cx;
      const initialPosY = cy;
      const particleColor = `rgba(${i % 1000 + 200}, ${i % 900 + 20}, ${i % 256 + 20}, 1)`;
      particlesToDrawArray.push({
        x,
        y,
        color: particleColor,
        r: dot_rad,
        initialPosX,
        initialPosY
      });
    }
    return particlesToDrawArray;
  }, [cx, cy, fireworkRadius, numberOfParticles]);
  const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
  (0, _react.useEffect)(() => {
    opacity.value = (0, _reactNativeReanimated.withTiming)(1, {
      duration: 2000
    }, () => {
      if (autoHide) {
        opacity.value = (0, _reactNativeReanimated.withTiming)(0, {
          duration: 2000
        });
      }
    });
  }, [autoHide, opacity]);
  return /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Group, {
    origin: {
      x: cx,
      y: cy
    },
    opacity: opacity
  }, particlesToDraw().map((c, i) => {
    return /*#__PURE__*/_react.default.createElement(_FireworkParticle.FireworkParticle, {
      key: i,
      x: c.initialPosX,
      y: c.initialPosY,
      finalPos: {
        x: c.x,
        y: c.y
      },
      r: c.r * 10 ?? particleRadius,
      color: color ?? c.color
    });
  }));
});
//# sourceMappingURL=Firework.js.map