rc-tween-one/lib/TweenOne.js

tween-one anim component for react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = require("react-dom");

var _tweenOne = _interopRequireDefault(require("tween-one"));

var _styleUtils = require("style-utils");

var _utils = require("./utils");

var _common = require("./utils/common");

var _excluded = ["component", "componentProps", "animation", "attr", "paused", "reverse", "repeat", "repeatDelay", "yoyo", "moment", "onChange", "onChangeTimeline", "resetStyle", "killPrevAnim"];

var TweenOne = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var _ref$component = _ref.component,
      component = _ref$component === void 0 ? 'div' : _ref$component,
      componentProps = _ref.componentProps,
      animation = _ref.animation,
      attr = _ref.attr,
      paused = _ref.paused,
      reverse = _ref.reverse,
      repeat = _ref.repeat,
      repeatDelay = _ref.repeatDelay,
      yoyo = _ref.yoyo,
      moment = _ref.moment,
      onChange = _ref.onChange,
      onChangeTimeline = _ref.onChangeTimeline,
      resetStyle = _ref.resetStyle,
      _ref$killPrevAnim = _ref.killPrevAnim,
      killPrevAnim = _ref$killPrevAnim === void 0 ? true : _ref$killPrevAnim,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);

  var _ref2 = props || {},
      children = _ref2.children,
      className = _ref2.className,
      _ref2$style = _ref2.style,
      style = _ref2$style === void 0 ? {} : _ref2$style;

  var domRef = (0, _react.useRef)();
  var prevAnim = (0, _react.useRef)();
  var animRef = (0, _react.useRef)();

  var commonFunc = function commonFunc(key, value) {
    var tween = animRef.current;

    if (tween) {
      if (key === 'moment') {
        if (typeof value === 'number') {
          tween.goto(value, paused);
        }

        return;
      }

      tween[key] = !!value;
    }
  };

  (0, _common.useIsomorphicLayoutEffect)(function () {
    commonFunc('paused', paused);
  }, [paused]); //  yoyo, moment, reverse, repeat, repeatDelay

  (0, _common.useIsomorphicLayoutEffect)(function () {
    commonFunc('moment', moment);
  }, [moment]);
  (0, _common.useIsomorphicLayoutEffect)(function () {
    commonFunc('reverse', reverse);
  }, [reverse]);
  (0, _common.useIsomorphicLayoutEffect)(function () {
    if (!domRef.current) {
      return console.warn('Warning: TweenOne domRef is error.');
    } // 动画写在标签上，手动对比；


    if (!(0, _utils.objectEqual)(animation, prevAnim.current)) {
      var doms = (0, _utils.dataToArray)(domRef.current).map(function (item) {
        return item instanceof Element || !(item instanceof _react.default.Component) ? item : (0, _reactDom.findDOMNode)(item);
      }).filter(function (item, i) {
        if (!(item instanceof Element)) {
          console.warn("Warning: TweenOne tag[".concat(i, "] is not dom."));
          return false;
        }

        return item;
      });

      if (animRef.current && killPrevAnim) {
        animRef.current.kill();
      }

      if (resetStyle && animRef.current) {
        var s = !component ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), children.props.style) : style;
        var styleStr = Object.keys(s).map(function (key) {
          return "".concat((0, _styleUtils.toStyleUpperCase)(key), ":").concat((0, _styleUtils.stylesToCss)(key, s[key]));
        }).join(';');
        doms.forEach(function (item) {
          item.setAttribute('style', styleStr); // dom.style.cssText = styleStr;

          delete item._tweenOneVars; // eslint-disable-line no-underscore-dangle
        });
      }

      animRef.current = animation && (0, _tweenOne.default)(doms, {
        animation: animation,
        attr: attr,
        yoyo: yoyo,
        moment: moment,
        repeat: repeat,
        reverse: reverse,
        paused: paused,
        repeatDelay: repeatDelay,
        onChange: onChange,
        onChangeTimeline: onChangeTimeline
      });
      prevAnim.current = animation;
    }
  }, [animation]);
  (0, _react.useEffect)(function () {
    return function () {
      if (animRef.current && animRef.current.kill) {
        animRef.current.kill();
      }
    };
  }, []);

  var refFunc = function refFunc(c) {
    domRef.current = c;

    if (ref && 'current' in ref) {
      ref.current = c;
    } else if (typeof ref === 'function') {
      ref(c);
    }
  };

  if (!component && children && typeof children !== 'string' && typeof children !== 'boolean' && typeof children !== 'number') {
    var childrenProps = children.props;

    var _ref3 = childrenProps || {},
        childStyle = _ref3.style,
        _ref3$className = _ref3.className,
        childClass = _ref3$className === void 0 ? '' : _ref3$className; // 合并 style 与 className。


    var newStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, childStyle), style);
    var newClassName = className ? "".concat(className, " ").concat(childClass).trim() : childClass;
    return /*#__PURE__*/_react.default.cloneElement(children, {
      style: newStyle,
      ref: refFunc,
      className: (0, _toConsumableArray2.default)(new Set(newClassName.split(/\s+/))).join(' ').trim() || undefined
    });
  }

  if (!component) {
    console.warn('Warning: component is null, children must be ReactElement.');
    return children;
  }

  return /*#__PURE__*/(0, _react.createElement)(component, (0, _objectSpread2.default)((0, _objectSpread2.default)({
    ref: refFunc
  }, props), componentProps));
});

TweenOne.isTweenOne = true;
TweenOne.displayName = 'TweenOne';
var _default = TweenOne;
exports.default = _default;