dragon-mobile-ui/lib/SwipeAction/Swipeout.js

UI for react.js

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _getCurrentPoint(e) {
  // console.log("e.touches[0].pageX: ", e.touches[0].pageX , " e.touches[0].screenX: ", e.touches[0].screenX);
  return e.touches[0].pageX;
}

function _addListenerMulti(el, s, fn) {
  var evts = s.split(' ');
  for (var i = 0, iLen = evts.length; i < iLen; i += 1) {
    el.addEventListener(evts[i], fn, false);
  }
}

var Swipeout = function (_Component) {
  _inherits(Swipeout, _Component);

  function Swipeout(props) {
    _classCallCheck(this, Swipeout);

    var _this = _possibleConstructorReturn(this, (Swipeout.__proto__ || Object.getPrototypeOf(Swipeout)).call(this, props));

    _this.openedLeft = false;
    _this.openedRight = false;
    return _this;
  }

  _createClass(Swipeout, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.btnWrapWidth = this.btnWrap.offsetWidth;

      document.body.addEventListener('touchstart', this.onCloseSwipe.bind(this), true);
    }
  }, {
    key: 'onCloseSwipe',
    value: function onCloseSwipe(ev) {
      var _this2 = this;

      if (this.openedLeft || this.openedRight) {
        var pNode = function (node) {
          while (node.parentNode && node.parentNode !== document.body) {
            if (node.className.indexOf(_this2.props.prefixCls + '-wrap') > -1) {
              return node;
            }
            node = node.parentNode;
          }
        }(ev.target);
        if (!pNode) {
          ev.preventDefault();
          this.close();
        }
      }
    }
  }, {
    key: '_onTouchStart',
    value: function _onTouchStart(e) {
      if (this.props.disabled) {
        return;
      }

      console.log("touchstart openedRight ->", this.openedRight);
      this.pointStart = _getCurrentPoint(e);
      this.pointEnd = _getCurrentPoint(e);
      if (this.openedRight) {
        this.close(300);
        return;
      }
      this.timeStart = new Date();
    }
  }, {
    key: '_onTouchMove',
    value: function _onTouchMove(e) {
      e.preventDefault();
      if (this.props.disabled) {
        return;
      }

      var pointX = _getCurrentPoint(e);
      var px = pointX - this.pointStart;

      if (px > 0) {
        return;
      }

      this._doTransition(px, 0);
      this.pointEnd = pointX;
    }
  }, {
    key: '_onTouchEnd',
    value: function _onTouchEnd(e) {
      if (this.props.disabled) {
        return;
      }

      var dom = this.btnWrap;
      var px = this.pointEnd !== 0 ? this.pointEnd - this.pointStart : 0;

      var timeSpan = new Date().getTime() - this.timeStart.getTime();

      if (px !== 0 && (
      // 滑动距离和父容器长度之比超过moveDistanceRatio
      Math.abs(px / dom.offsetWidth) >= this.props.moveDistanceRatio ||
      // 滑动释放时间差低于moveTimeDur
      timeSpan <= this.props.moveTimeDur)) {
        this.open(-this.btnWrapWidth, 300, false, true);
      } else {
        this.close(300);
      }
    }

    // 执行过渡动画

  }, {
    key: '_doTransition',
    value: function _doTransition(offset, duration) {
      var dom = this.content;
      var x = offset;
      var y = 0;

      dom.style.webkitTransitionDuration = duration + 'ms';
      dom.style.mozTransitionDuration = duration + 'ms';
      dom.style.oTransitionDuration = duration + 'ms';
      dom.style.transitionDuration = duration + 'ms';

      dom.style.webkitTransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
      dom.style.mozTransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
      dom.style.oTransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
      dom.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
    }
  }, {
    key: 'open',
    value: function open(value, duration, openedLeft, openedRight) {
      if (!this.openedLeft && !this.openedRight) {
        this.props.onOpen();
      }

      this.openedLeft = openedLeft;
      this.openedRight = openedRight;
      this._doTransition(value, duration);
    }
  }, {
    key: 'close',
    value: function close() {
      var _this3 = this;

      var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;

      var dom = this.content;

      if (this.openedLeft || this.openedRight) {
        this.props.onClose();
      }
      this._doTransition(0, duration);

      _addListenerMulti(dom, 'webkitTransitionEnd transitionend', function () {
        _this3.openedLeft = !_this3.openedLeft;
        _this3.openedRight = !_this3.openedRight;
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props = this.props,
          className = _props.className,
          right = _props.right,
          children = _props.children,
          prefixCls = _props.prefixCls;


      return _react2.default.createElement(
        'div',
        { className: prefixCls + '-wrap' },
        _react2.default.createElement(
          'div',
          {
            className: prefixCls + '-content',
            ref: function ref(content) {
              _this4.content = content;
            },
            onTouchStart: function onTouchStart(e) {
              return _this4._onTouchStart(e);
            },
            onTouchMove: function onTouchMove(e) {
              return _this4._onTouchMove(e);
            },
            onTouchEnd: function onTouchEnd(e) {
              return _this4._onTouchEnd(e);
            } },
          children
        ),
        _react2.default.createElement(
          'div',
          {
            className: prefixCls + '-btn-wrap',
            ref: function ref(btnWrap) {
              _this4.btnWrap = btnWrap;
            } },
          right
        )
      );
    }
  }]);

  return Swipeout;
}(_react.Component);

Swipeout.defaultProps = {
  moveTimeDur: 300,
  moveDistanceRatio: 0.5,
  onOpen: function onOpen() {},
  onClose: function onClose() {}
};

exports.default = Swipeout;