react-native-micro-interactions/lib/commonjs/components/AnimatedWrapper.js

Effortlessly enhance your React Native components with subtle micro-interactions and animations.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _useAnimation = require("../hooks/useAnimation.js");
var _reactNative = require("react-native");
var _react = _interopRequireWildcard(require("react"));
var _AnimatedChild = _interopRequireDefault(require("./AnimatedChild.js"));
var _useRunAnimation = require("../hooks/useRunAnimation.js");
var _utilityFunctions = require("../utils/utilityFunctions.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AnimatedWrapper = /*#__PURE__*/(0, _react.forwardRef)(({
  children,
  animationTrigger,
  animationType,
  animationOptions,
  isGroup = false
}, ref) => {
  if (animationType === "text_slide_vertical" || animationType === "text_slide_horizontal" && children.type !== _reactNative.Text) {
    return children;
  }
  const {
    animatedStyle,
    runIndividualAnimation
  } = (0, _useAnimation.useAnimation)(animationType, animationOptions);
  const {
    addAnimation,
    runAnimation,
    runCurrentAnimation
  } = (0, _useRunAnimation.useRunAnimation)(runIndividualAnimation, isGroup);
  const AnimatedComponent = (0, _react.useMemo)(() => {
    return _reactNativeReanimated.default.createAnimatedComponent(children.type);
  }, [children.type]);
  const childElements = _react.default.Children.toArray(children.props.children);
  const {
    style,
    onPress,
    onLongPress,
    ...restProps
  } = children.props;
  const combinedStyle = [animatedStyle, style];
  (0, _react.useImperativeHandle)(ref, () => ({
    runAnimation // Expose runAnimation to the parent component
  }));
  (0, _react.useEffect)(() => {
    if (animationTrigger === "init") {
      runCurrentAnimation();
    }
  }, [children.props.children]);

  // render animated grandchildren in case of group animations
  const mapGrandChildren = () => childElements.map((child, index) => {
    if (/*#__PURE__*/_react.default.isValidElement(child)) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedChild.default, {
        animationOptions: animationOptions,
        animationType: animationType,
        addAnimation: addAnimation,
        children: child
      }, child.key || index);
    }
    return child;
  });

  // If the child provided is already a touchable kind, we dont need to wrap with additional touchable opacity
  if ((0, _utilityFunctions.isComponentTouchable)(children)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedComponent, {
      ...restProps,
      style: isGroup ? style : combinedStyle,
      onPress: (...args) => {
        if (animationTrigger === "press") {
          runCurrentAnimation();
        }
        onPress?.(...args);
      },
      children: isGroup ? mapGrandChildren() : children.props.children
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
    activeOpacity: 1,
    onPressIn: animationTrigger === "press" ? runCurrentAnimation : undefined,
    onLongPress: animationTrigger === "long_press" ? runCurrentAnimation : undefined,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedComponent, {
      ...restProps,
      style: isGroup ? style : combinedStyle,
      children: isGroup ? mapGrandChildren() : children.props.children
    })
  });
});
var _default = exports.default = AnimatedWrapper;
//# sourceMappingURL=AnimatedWrapper.js.map