react-native-fiesta/lib/commonjs/components/Popper.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.PopperDirection = exports.Popper = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeSkia = require("@shopify/react-native-skia");
var _reactNativeReanimated = require("react-native-reanimated");
var _dimensions = require("../constants/dimensions");
var _array = require("../utils/array");
var _colors = require("../utils/colors");
var _theming = require("../constants/theming");
var _speed = require("../constants/speed");
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; }
let PopperDirection = exports.PopperDirection = /*#__PURE__*/function (PopperDirection) {
  PopperDirection["Ascending"] = "Ascending";
  PopperDirection["Descending"] = "Descending";
  return PopperDirection;
}({});
const Popper = exports.Popper = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(({
  spacing = 30,
  theme = _theming.FiestaThemes.Default,
  renderItem,
  autoPlay = true,
  direction = PopperDirection.Descending,
  positionSpringConfig = _speed.FiestaSpeed.Normal,
  fadeSpringConfig = _speed.singleItemFadeSpeed
}, ref) => {
  // properties that might be controlled are also defined as states and refs
  const [controlledTheme, setControlledTheme] = (0, _react.useState)(theme);
  const controlledDirection = (0, _react.useRef)(direction);
  const controlledPositionSpringConfig = (0, _react.useRef)(positionSpringConfig);
  const controlledFadeSpringConfig = (0, _react.useRef)(fadeSpringConfig);
  const [displayCanvas, setDisplayCanvas] = (0, _react.useState)(autoPlay);
  const initialPosition = controlledDirection.current === PopperDirection.Ascending ? _dimensions.screenHeight : -_dimensions.screenHeight / 2;
  const finalPosition = controlledDirection.current === PopperDirection.Ascending ? -_dimensions.screenHeight : _dimensions.screenHeight;
  const optimalNumberOfItems = (0, _react.useMemo)(() => Math.floor(_dimensions.screenWidth / spacing), [spacing]);
  const itemsToRenderArray = (0, _react.useMemo)(() => [...Array(optimalNumberOfItems)], [optimalNumberOfItems]);
  const yPositions = (0, _react.useMemo)(() => (0, _array.shuffleArray)(itemsToRenderArray.map((_, i) => i * spacing)), [itemsToRenderArray, spacing]);
  const containerYPosition = (0, _reactNativeReanimated.useSharedValue)(0);
  const opacity = (0, _reactNativeReanimated.useSharedValue)(1);
  const colors = (0, _react.useMemo)(() => (0, _colors.colorsFromTheme)(controlledTheme, optimalNumberOfItems), [controlledTheme, optimalNumberOfItems]);
  const changeItemPosition = (0, _react.useCallback)(() => {
    containerYPosition.value = (0, _reactNativeReanimated.withSpring)(finalPosition, controlledPositionSpringConfig.current, finished => {
      if (finished) {
        containerYPosition.value = initialPosition;
        (0, _reactNativeReanimated.runOnJS)(setDisplayCanvas)(false);
      }
    });
    opacity.value = (0, _reactNativeReanimated.withSpring)(0, controlledFadeSpringConfig.current);
  }, [containerYPosition, controlledFadeSpringConfig, controlledPositionSpringConfig, finalPosition, initialPosition, opacity]);
  const transform = (0, _reactNativeReanimated.useDerivedValue)(() => [{
    translateY: containerYPosition.value
  }]);
  (0, _react.useImperativeHandle)(ref, () => ({
    start(params) {
      // cancel any ongoing animation
      (0, _reactNativeReanimated.cancelAnimation)(containerYPosition);
      setDisplayCanvas(false);

      // reset the container position and opacity
      containerYPosition.value = initialPosition;
      opacity.value = 1;
      if (params !== null && params !== void 0 && params.theme) {
        setControlledTheme(params.theme);
      }
      if (params !== null && params !== void 0 && params.direction) {
        controlledDirection.current = params.direction;
      }
      if (params !== null && params !== void 0 && params.positionSpringConfig) {
        controlledPositionSpringConfig.current = params.positionSpringConfig;
      }
      if (params !== null && params !== void 0 && params.fadeSpringConfig) {
        controlledFadeSpringConfig.current = params.fadeSpringConfig;
      }

      // plays the animation again
      setDisplayCanvas(true);
      changeItemPosition();
    }
  }));

  // when the controlled direction changes, reset the container position
  (0, _react.useEffect)(() => {
    containerYPosition.value = initialPosition;
  }, [containerYPosition, controlledDirection, initialPosition]);
  (0, _react.useEffect)(() => {
    displayCanvas && changeItemPosition();
  }, [displayCanvas, changeItemPosition]);
  if (!displayCanvas) return null;
  return /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Canvas, {
    style: styles.canvas,
    pointerEvents: "none"
  }, /*#__PURE__*/_react.default.createElement(_reactNativeSkia.Group, {
    transform: transform,
    opacity: opacity
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, itemsToRenderArray.map((_, index) => renderItem({
    x: spacing * index,
    y: yPositions[index],
    colors
  }, index)))));
}));
const styles = _reactNative.StyleSheet.create({
  canvas: {
    ..._reactNative.StyleSheet.absoluteFillObject,
    zIndex: 1
  }
});
//# sourceMappingURL=Popper.js.map