@legendapp/motion/lib/commonjs/createMotionComponent.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createMotionAnimatedComponent = createMotionAnimatedComponent;
exports.createMotionComponent = createMotionComponent;
var _tools = require("@legendapp/tools");
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _configureMotion = require("./configureMotion");
var _Constants = require("./Constants");
var _MotionPressable = require("./MotionPressable");
var _useTransformOrigin = require("./useTransformOrigin");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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); }
const TransformKeys = {
  x: 'translateX',
  y: 'translateY',
  scale: 'scale',
  scaleX: 'scaleX',
  scaleY: 'scaleY',
  skewX: 'skewX',
  skewY: 'skewY',
  perspective: 'perspective',
  rotate: 'rotate',
  rotateX: 'rotateX',
  rotateY: 'rotateY',
  rotateZ: 'rotateZ',
  matrix: 'matrix'
};
const OtherNativeKeys = {
  opacity: 'opacity'
};
const DefaultValues = {
  x: 0,
  y: 0,
  scale: 1,
  scaleX: 1,
  scaleY: 1,
  skewX: '0deg',
  skewY: '0deg',
  perspective: 0,
  rotate: '0deg',
  rotateX: '0deg',
  rotateY: '0deg',
  rotateZ: '0deg',
  matrix: [],
  opacity: 1
};
const DefaultTransition = {
  type: 'tween',
  duration: _Constants.DefaultTransitionTime
};
const Eases = {
  linear: _reactNative.Easing.linear,
  easeIn: _reactNative.Easing.ease,
  easeInOut: _reactNative.Easing.inOut(_reactNative.Easing.ease),
  easeOut: _reactNative.Easing.out(_reactNative.Easing.ease),
  circIn: _reactNative.Easing.circle,
  circInOut: _reactNative.Easing.inOut(_reactNative.Easing.circle),
  circOut: _reactNative.Easing.out(_reactNative.Easing.circle),
  backIn: _reactNative.Easing.back(2),
  backInOut: _reactNative.Easing.inOut(_reactNative.Easing.back(2)),
  backOut: _reactNative.Easing.out(_reactNative.Easing.back(2))
};
function addKeysToSet() {
  const set = new Set();
  for (let i = 0; i < arguments.length; i++) {
    const obj = i < 0 || arguments.length <= i ? undefined : arguments[i];
    if (obj) {
      const keys = Object.keys(obj);
      for (let i = 0; i < keys.length; i++) {
        set.add(keys[i]);
      }
    }
  }
  return set;
}
function createMotionComponent(Component) {
  return /*#__PURE__*/(0, _react.forwardRef)(function MotionComponent(_ref,
  // @ts-ignore
  ref) {
    let {
      animate,
      animateProps,
      initial,
      initialProps,
      exit,
      transition,
      transformOrigin,
      style: styleProp,
      onLayout: onLayoutProp,
      whileTap,
      whileHover,
      onAnimationComplete,
      ...rest
    } = _ref;
    const refAnims = (0, _react.useRef)({});

    // Generate the arrays of keys and values for transitioning. These are used as deps of useMemo
    // so that it will update whenever a key or value changes.
    const animKeysSet = addKeysToSet(initial, animate, animateProps, whileTap, whileHover, exit);
    const values = Object.assign({}, animate);
    if (animateProps) {
      addKeysToSet(animKeysSet, animateProps);
      Object.assign(values, animateProps);
    }
    if (whileTap || whileHover) {
      const {
        pressed,
        hovered
      } = (0, _react.useContext)(_MotionPressable.ContextPressable);
      if (whileHover) {
        addKeysToSet(animKeysSet, whileHover);
        if (hovered) {
          Object.assign(values, whileHover);
        }
      }
      if (whileTap) {
        addKeysToSet(animKeysSet, whileTap);
        if (pressed) {
          Object.assign(values, whileTap);
        }
      }
    }
    if (exit) {
      addKeysToSet(animKeysSet, exit);
    }
    const animKeys = [...animKeysSet];
    const animValues = animKeys.map(key => values[key]);
    const update = () => {
      const anims = refAnims.current;
      const useNativeDriver = !animateProps && animKeys.every(key => !!OtherNativeKeys[key] || !!TransformKeys[key]);
      for (let i = 0; i < animKeys.length; i++) {
        var _ref2, _ref3;
        const key = animKeys[i];
        const isProp = (animateProps === null || animateProps === void 0 ? void 0 : animateProps[key]) !== undefined;
        let value = values[key];
        const valueInitial = (_ref2 = (_ref3 = isProp ? initialProps === null || initialProps === void 0 ? void 0 : initialProps[key] : initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _ref3 !== void 0 ? _ref3 : value) !== null && _ref2 !== void 0 ? _ref2 : DefaultValues[key];
        if (value === undefined) {
          value = valueInitial !== null && valueInitial !== void 0 ? valueInitial : DefaultValues[key];
        }
        if (!anims[key] || anims[key].value !== value) {
          const isStr = (0, _tools.isString)(valueInitial);
          const isArr = (0, _tools.isArray)(valueInitial);

          // If this is the first run or it's a new key, create the Animated.Value
          if (!anims[key]) {
            const startValue = isStr || isArr ? 1 : valueInitial;
            const animValue = new _reactNative.Animated.Value(startValue);
            anims[key] = {
              value: valueInitial,
              animValue,
              valueInterp: isStr ? 1 : undefined
            };
          }
          let toValue;
          // If string or array it needs to interpolate, so toggle back and forth between 0 and 1,
          // interpolating from current value to target value
          if (isStr || isArr) {
            const fromInterp = anims[key].valueInterp;
            const from = anims[key].value;
            anims[key].interpolation = anims[key].animValue.interpolate({
              inputRange: [0, 1],
              outputRange: fromInterp === 1 ? [value, from] : [from, value]
            });
            anims[key].valueInterp = toValue = 1 - fromInterp;
            anims[key].value = value;
          } else {
            anims[key].value = toValue = value;
          }

          // Get the transition for this key, the 'default' key, the root transition, or default transition if no transition prop
          const transitionForKey = (transition === null || transition === void 0 ? void 0 : transition[key]) || (transition === null || transition === void 0 ? void 0 : transition['default']) || transition || DefaultTransition;
          if (_configureMotion.config.timing === 's' && transitionForKey !== DefaultTransition && (0, _tools.isNumber)(transitionForKey.duration)) {
            transitionForKey.duration *= 1000;
          }
          if ((0, _tools.isString)(transitionForKey.easing)) {
            transitionForKey.easing = Eases[transitionForKey.easing];
          }
          if ((0, _tools.isString)(transitionForKey.ease)) {
            transitionForKey.ease = Eases[transitionForKey.ease];
          }
          const animOptions = Object.assign({
            toValue,
            useNativeDriver
          }, transitionForKey);

          // This typeof check is to make it work when rendered server-side like in Next.js
          if (typeof requestAnimationFrame !== 'undefined') {
            requestAnimationFrame(() => {
              const callback = onAnimationComplete ? () => onAnimationComplete(key) : undefined;
              const {
                loop,
                type
              } = transitionForKey;
              let animation;

              // Spring or timing based on the transition prop
              if (type === 'spring') {
                animation = _reactNative.Animated.spring(anims[key].animValue, animOptions);
              } else {
                animation = _reactNative.Animated.timing(anims[key].animValue, animOptions);
              }

              // Loop based on the transition prop
              if (loop !== undefined) {
                animation = _reactNative.Animated.loop(animation, {
                  iterations: loop
                });
              }
              animation.start(callback);
            });
          }
        }
      }
    };
    (0, _react.useMemo)(update, animValues); // eslint-disable-line react-hooks/exhaustive-deps

    // Apply the animations to the style object
    const style = {};
    const animProps = {};
    const transforms = [];
    Object.entries(refAnims.current).forEach(_ref4 => {
      let [key, value] = _ref4;
      if ((animateProps === null || animateProps === void 0 ? void 0 : animateProps[key]) !== undefined) {
        animProps[key] = value.interpolation || value.animValue;
      } else if (TransformKeys[key]) {
        transforms.push({
          key,
          value
        });
      } else {
        style[key] = value.interpolation || value.animValue;
      }
    });

    // Map the transforms into an Animated transforms array
    if (transforms.length) {
      style.transform = transforms.map(_ref5 => {
        let {
          key,
          value
        } = _ref5;
        return {
          [TransformKeys[key]]: value.interpolation || value.animValue
        };
      });
    }
    const onLayout = transformOrigin ? (0, _useTransformOrigin.useTransformOrigin)(transformOrigin, style.transform, onLayoutProp) : onLayoutProp;

    // @ts-ignore
    return /*#__PURE__*/_react.default.createElement(Component, _extends({
      style: [styleProp, style],
      onLayout: onLayout
    }, rest, animProps, {
      ref: ref
    }));
  });
}
function createMotionAnimatedComponent(component) {
  return createMotionComponent(_reactNative.Animated.createAnimatedComponent(component));
}
//# sourceMappingURL=createMotionComponent.js.map