rc-banner-anim/lib/anim.js

banner-anim animation component for react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

exports['default'] = {
  across: function across(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _x = void 0;
    var props = (0, _extends3['default'])({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _x = direction === 'next' ? '100%' : '-100%';
    } else {
      // 时间轴不同，导致中间有空隙， 等修复 twee-one,先加delay
      _x = direction === 'next' ? '-100%' : '100%';
      children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
    }
    return (0, _react.cloneElement)(elem, {
      animation: (0, _extends3['default'])({}, animData, {
        x: _x,
        type: type === 'enter' ? 'from' : 'to'
      })
    }, children);
  },
  vertical: function vertical(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _y = void 0;
    var props = (0, _extends3['default'])({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _y = direction === 'next' ? '-100%' : '100%';
    } else {
      // 时间轴不同，导致中间有空隙， 等修复 twee-one,先加delay
      _y = direction === 'next' ? '100%' : '-100%';
      children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
    }
    return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, props, {
      animation: (0, _extends3['default'])({}, animData, {
        y: _y,
        type: type === 'enter' ? 'from' : 'to'
      })
    }), children);
  },
  acrossOverlay: function acrossOverlay(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _x = void 0;
    var props = (0, _extends3['default'])({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _x = direction === 'next' ? '100%' : '-100%';
    } else {
      _x = direction === 'next' ? '-20%' : '20%';
      children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
    }
    return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, props, {
      animation: (0, _extends3['default'])({}, animData, {
        x: _x,
        type: type === 'enter' ? 'from' : 'to'
      })
    }), children);
  },
  verticalOverlay: function verticalOverlay(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _y = void 0;
    var props = (0, _extends3['default'])({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _y = direction === 'next' ? '-100%' : '100%';
    } else {
      _y = direction === 'next' ? '20%' : '-20%';
      children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
    }
    return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, props, {
      animation: (0, _extends3['default'])({}, animData, {
        y: _y,
        type: type === 'enter' ? 'from' : 'to'
      })
    }), children);
  },
  gridBar: function gridBar(elem, type, direction, animData, elemOffset, leaveChildHide, ratio, paused) {
    var props = (0, _extends3['default'])({}, elem.props);
    var animChild = [];
    var gridNum = 10;
    var girdSize = 100 / gridNum;

    var _y = void 0;
    var children = props.children;
    if (type === 'enter') {
      _y = direction === 'next' ? '-100%' : '100%';
    } else {
      _y = direction === 'next' ? '100%' : '-100%';
    }
    var moment = ratio * (animData.duration + animData.delay + gridNum * 50 - (type === 'enter' ? 50 : 0)) || 0;
    for (var i = 0; i < gridNum; i++) {
      var style = (0, _extends3['default'])({}, props.style);
      style.width = girdSize + 0.1 + '%';
      style.left = i * girdSize + '%';
      style.position = 'absolute';
      style.overflow = 'hidden';
      var _style = (0, _extends3['default'])({}, props.style);
      _style.width = elemOffset.width + 'px';
      _style.height = elemOffset.height + 'px';
      _style.float = 'left';
      _style.position = 'relative';
      _style.left = -i * girdSize / 100 * elemOffset.width + 'px';
      _style.overflow = 'hidden';
      var animProps = (0, _extends3['default'])({}, props);
      animProps.style = _style;
      var delay = (direction === 'next' ? i : gridNum - i) * 50 + (type === 'enter' ? 0 : 50) + (animData.delay || 0);
      animProps.animation = (0, _extends3['default'])({}, animData, {
        y: _y,
        type: type === 'enter' ? 'from' : 'to',
        key: type,
        direction: direction,
        delay: delay,
        i: i,
        onComplete: i === (direction === 'next' ? gridNum - 1 : 0) ? animData.onComplete : null
      });
      animProps.paused = paused;
      animProps.moment = moment;
      var mask = _react2['default'].createElement(
        'div',
        { style: style, key: i },
        (0, _react.cloneElement)(elem, animProps, children)
      );
      animChild.push(mask);
    }
    var animSlot = _react2['default'].createElement(
      'div',
      { style: { width: '100%', position: 'absolute', top: 0 } },
      animChild
    );
    var _props = (0, _extends3['default'])({}, elem.props);
    _props.children = animSlot;
    return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, _props, { animation: { x: 0, y: 0, type: 'set' } }));
  },
  grid: function grid(elem, type, direction, animData, elemOffset, leaveChildHide, ratio, paused) {
    var props = (0, _extends3['default'])({}, elem.props);
    var animChild = [];
    var gridNum = 10;
    var gridWidth = elemOffset.width / gridNum;
    var gridNumH = Math.ceil(elemOffset.height / gridWidth);
    var _delay = (gridNum - 1) * 50 + (gridNumH - 1) * 50;
    if (type === 'leave') {
      props.animation = (0, _extends3['default'])({}, animData, {
        duration: _delay + animData.duration
      });
      props.moment = ((animData.delay || 0) + _delay + animData.duration) * ratio || 0;
      props.paused = paused;
      return _react2['default'].cloneElement(elem, props);
    }
    var moment = ratio * (animData.duration + animData.delay + _delay) || 0;
    for (var i = 0; i < gridNum * gridNumH; i++) {
      // mask样式
      var style = (0, _extends3['default'])({}, props.style);
      style.position = 'absolute';
      style.overflow = 'hidden';
      style.width = gridWidth + 1 + 'px';
      style.height = gridWidth + 1 + 'px';
      style.left = i % gridNum * gridWidth;
      style.top = Math.floor(i / gridNum) * gridWidth;
      style.opacity = 0;
      // clone 的样式
      var _style = (0, _extends3['default'])({}, props.style);
      _style.width = elemOffset.width + 'px';
      _style.height = elemOffset.height + 'px';
      _style.position = 'relative';
      _style.left = -i % gridNum * gridWidth;
      _style.top = -Math.floor(i / gridNum) * gridWidth;
      _style.overflow = 'hidden';
      props.style = _style;
      var delay = direction === 'next' ? i % gridNum * 50 + Math.floor(i / gridNum) * 50 : (gridNum - 1 - i % gridNum) * 50 + (gridNumH - 1 - Math.floor(i / gridNum)) * 50;
      delay += animData.delay || 0;
      var length = direction === 'next' ? gridNum * gridNumH - 1 : 0;
      var animation = (0, _extends3['default'])({}, animData, {
        opacity: 1,
        delay: delay,
        onComplete: i === length ? animData.onComplete : null
      });
      var mask = _react2['default'].createElement(
        elem.type,
        {
          style: style,
          key: i,
          paused: paused,
          animation: animation,
          moment: moment
        },
        (0, _react.cloneElement)(elem, props)
      );
      animChild.push(mask);
    }
    var _props = (0, _extends3['default'])({}, elem.props);
    _props.children = animChild;
    return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, _props, { animation: { x: 0, y: 0, type: 'set' } }));
  }
};
module.exports = exports['default'];