yunjiwong-slider/es/anim.js

banner-anim animation component for react

import _extends from 'babel-runtime/helpers/extends';
import React, { cloneElement } from 'react';
import { toArrayChildren, setAnimCompToTagComp, switchChildren } from './utils';
import ticker from 'rc-tween-one/es/ticker';

export default {
  across: function across(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _x = void 0;
    var props = _extends({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _x = direction === 'next' ? '100%' : '-100%';
    } else {
            _x = direction === 'next' ? '-100%' : '100%';
      children = toArrayChildren(children).map(switchChildren.bind(this, leaveChildHide));
    }
    return cloneElement(elem, {
      animation: _extends({}, animData, {
        x: _x,
        type: type === 'enter' ? 'from' : 'to'
      })
    }, children);
  },
  vertical: function vertical(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _y = void 0;
    var props = _extends({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _y = direction === 'next' ? '-100%' : '100%';
    } else {
            _y = direction === 'next' ? '100%' : '-100%';
      children = toArrayChildren(children).map(switchChildren.bind(this, leaveChildHide));
    }
    return cloneElement(elem, _extends({}, props, {
      animation: _extends({}, animData, {
        y: _y,
        type: type === 'enter' ? 'from' : 'to'
      })
    }), children);
  },
  acrossOverlay: function acrossOverlay(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _x = void 0;
    var props = _extends({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _x = direction === 'next' ? '100%' : '-100%';
    } else {
      _x = direction === 'next' ? '-20%' : '20%';
      children = toArrayChildren(children).map(switchChildren.bind(this, leaveChildHide));
    }
    return cloneElement(elem, _extends({}, props, {
      animation: _extends({}, animData, {
        x: _x,
        type: type === 'enter' ? 'from' : 'to'
      })
    }), children);
  },
  verticalOverlay: function verticalOverlay(elem, type, direction, animData, elemOffset, leaveChildHide) {
    var _y = void 0;
    var props = _extends({}, elem.props);
    var children = props.children;
    if (type === 'enter') {
      _y = direction === 'next' ? '-100%' : '100%';
    } else {
      _y = direction === 'next' ? '20%' : '-20%';
      children = toArrayChildren(children).map(switchChildren.bind(this, leaveChildHide));
    }
    return cloneElement(elem, _extends({}, props, {
      animation: _extends({}, animData, {
        y: _y,
        type: type === 'enter' ? 'from' : 'to'
      })
    }), children);
  },
  gridBar: function gridBar(elem, type, direction, animData, elemOffset) {
    var props = _extends({}, elem.props);
    var animChild = [];
    var girdNum = 10;
    var girdSize = 100 / girdNum;

    var _y = void 0;
    var children = props.children;
    if (type === 'enter') {
      _y = direction === 'next' ? '-100%' : '100%';
    } else {
      _y = direction === 'next' ? '100%' : '-100%';
      children = toArrayChildren(children).map(setAnimCompToTagComp);
    }
    for (var i = 0; i < girdNum; i++) {
      var style = _extends({}, props.style);
      style.width = girdSize + 0.1 + '%';
      style.left = i * girdSize + '%';
      style.position = 'absolute';
      style.overflow = 'hidden';
      var _style = _extends({}, 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';
      props.style = _style;
      props.animation = _extends({}, animData, {
        y: _y,
        type: type === 'enter' ? 'from' : 'to',
        delay: i * 50 + (type === 'enter' ? 0 : 50) + (animData.delay || 0),
        onComplete: i === girdNum - 1 ? animData.onComplete : null
      });

      var mask = React.createElement(
        'div',
        { style: style, key: i },
        cloneElement(elem, props, children)
      );
      animChild.push(mask);
    }
    var animSlot = React.createElement(
      'div',
      { style: { width: '100%', position: 'absolute', top: 0 } },
      animChild
    );
    var _props = _extends({}, elem.props);
    _props.children = animSlot;
    return cloneElement(elem, _props);
  },
  grid: function grid(elem, type, direction, animData, elemOffset) {
    var props = _extends({}, elem.props);
    var animChild = [];
    var gridNum = 10;
    var gridWidth = elemOffset.width / gridNum;
    var gridNumH = Math.ceil(elemOffset.height / gridWidth);
    if (type === 'leave') {
      var _delay = (gridNum * gridNumH - 1) % gridNum * 50 + Math.floor((gridNum * gridNumH - 1) / gridNum) * 50;
      ticker.timeout(function () {
        animData.onComplete();
      }, _delay + animData.duration);
      return React.cloneElement(elem, props);
    }
    for (var i = 0; i < gridNum * gridNumH; i++) {
            var style = _extends({}, 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;
            var _style = _extends({}, 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;
      props.style = _style;
      var delay = direction === 'next' ? i % gridNum * 50 + Math.floor(i / gridNum) * 50 : (gridNum - i % gridNum) * 50 + (gridNumH - Math.floor(i / gridNum)) * 50;
      delay += animData.delay || 0;
      var length = direction === 'next' ? gridNum * gridNumH - 1 : 0;
      var animation = _extends({}, animData, {
        opacity: 0,
        type: 'from',
        delay: delay,
        onComplete: i === length ? animData.onComplete : null
      });
      var mask = React.createElement(
        elem.type,
        { style: style, key: i, animation: animation },
        cloneElement(elem, props)
      );
      animChild.push(mask);
    }
    var _props = _extends({}, elem.props);
    _props.children = animChild;
    return cloneElement(elem, _props);
  }
};