zarm-mobile/lib/SwipeAction/SwipeAction.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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames2 = require('classnames');

var _classnames3 = _interopRequireDefault(_classnames2);

var _events = require('../utils/events');

var _events2 = _interopRequireDefault(_events);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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;
}

var SwipeAction = function (_PureComponent) {
  _inherits(SwipeAction, _PureComponent);

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

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

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

  _createClass(SwipeAction, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var _this2 = this;

      _events2.default.on(document.body, 'touchstart', function (e) {
        return _this2.onCloseSwipe(e);
      });
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      var _this3 = this;

      _events2.default.off(document.body, 'touchstart', function (e) {
        return _this3.onCloseSwipe(e);
      });
    }
  }, {
    key: 'onCloseSwipe',
    value: function onCloseSwipe(e) {
      var _this4 = this;

      if (this.openedLeft || this.openedRight) {
        var pNode = function (node) {
          while (node.parentNode && node.parentNode !== document.body) {
            if (node === _this4.wrap) {
              return node;
            }
            node = node.parentNode;
          }
        }(e.target);
        if (!pNode) {
          e.preventDefault();
          if (this.openedLeft || this.openedRight) {
            this.close();
            this.touchEnd = true;
          }
        }
      }
    }
  }, {
    key: 'onBtnClick',
    value: function onBtnClick(e, btn) {
      var onClick = btn.onClick;
      if (onClick) {
        onClick(e);
      }

      if (this.props.autoClose) {
        this.close();
      }
    }
  }, {
    key: '_onTouchStart',
    value: function _onTouchStart(e) {
      e.preventDefault();
      if (this.props.disabled) {
        return;
      }
      this.pointStart = _getCurrentPoint(e);
      this.pointEnd = _getCurrentPoint(e);
      if (this.openedLeft || this.openedRight) {
        this.touchEnd = false;
        this.close();
        return;
      }
      this.timeStart = new Date();
    }
  }, {
    key: '_onTouchMove',
    value: function _onTouchMove(e) {
      e.preventDefault();

      if (this.props.disabled) {
        return;
      }

      if (!this.touchEnd) {
        return;
      }
      var _props = this.props,
          _props$left = _props.left,
          left = _props$left === undefined ? [] : _props$left,
          _props$right = _props.right,
          right = _props$right === undefined ? [] : _props$right,
          offset = _props.offset;


      var pointX = _getCurrentPoint(e);
      var posX = pointX - this.pointStart;
      var btnsLeftWidth = this.left && this.left.offsetWidth;
      var btnsRightWidth = this.right && this.right.offsetWidth;

      if (posX < 0 && right.length) {
        if (posX < -btnsRightWidth - offset) {
          return;
        }
        this._doTransition(Math.min(posX, 0), 0);
      } else if (posX > 0 && left.length) {
        if (posX > btnsLeftWidth + offset) {
          return;
        }
        this._doTransition(Math.max(posX, 0), 0);
      }

      this.pointEnd = pointX;
    }
  }, {
    key: '_onTouchEnd',
    value: function _onTouchEnd(e) {
      e.preventDefault();
      if (this.props.disabled) {
        return;
      }
      var _props2 = this.props,
          _props2$left = _props2.left,
          left = _props2$left === undefined ? [] : _props2$left,
          _props2$right = _props2.right,
          right = _props2$right === undefined ? [] : _props2$right;


      var posX = this.pointEnd !== 0 ? this.pointEnd - this.pointStart : 0;

      var btnsLeftWidth = this.left && this.left.offsetWidth;
      var btnsRightWidth = this.right && this.right.offsetWidth;

      var leftOpenX = btnsLeftWidth * this.props.moveDistanceRatio;
      var rightOpenX = btnsRightWidth * this.props.moveDistanceRatio;

      var openLeft = posX > leftOpenX;
      var openRight = posX < -rightOpenX;

      if (openRight && posX < 0 && right.length) {
        this.open(-btnsRightWidth, 300, false, true);
      } else if (openLeft && posX > 0 && left.length) {
        this.open(btnsLeftWidth, 300, true, false);
      } else {
        this.close();
      }

      this.touchEnd = true;
    }

    // 执行过渡动画

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

      dom.style.webkitTransitionDuration = duration + 'ms';
      dom.style.transitionDuration = duration + 'ms';
      dom.style.webkitTransform = '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 duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.moveTimeDuration;

      if (this.openedLeft || this.openedRight) {
        this.props.onClose();
      }
      this.openedLeft = false;
      this.openedRight = false;
      this._doTransition(0, duration);
    }
  }, {
    key: 'renderButtons',
    value: function renderButtons(buttons, _ref) {
      var _this5 = this;

      var prefixCls = this.props.prefixCls;

      return buttons && buttons.length ? _react2.default.createElement(
        'div',
        {
          className: prefixCls + '-actions-' + _ref,
          ref: function ref(el) {
            _this5[_ref] = el;
          } },
        buttons.map(function (btn, i) {
          var _classnames;

          var theme = btn.theme,
              className = btn.className,
              text = btn.text;


          var classes = (0, _classnames3.default)((_classnames = {}, _defineProperty(_classnames, prefixCls + '-button', true), _defineProperty(_classnames, 'theme-' + theme, true), _defineProperty(_classnames, className, !!className), _classnames));

          return _react2.default.createElement(
            'div',
            {
              key: +i,
              className: classes,
              onClick: function onClick(e) {
                return _this5.onBtnClick(e, btn);
              } },
            _react2.default.createElement(
              'div',
              { className: prefixCls + '-text' },
              text || '' + _ref + i
            )
          );
        })
      ) : null;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this6 = this;

      var _props3 = this.props,
          left = _props3.left,
          right = _props3.right,
          children = _props3.children,
          prefixCls = _props3.prefixCls;

      return left.length || right.length ? _react2.default.createElement(
        'div',
        {
          className: prefixCls + '-wrap',
          ref: function ref(wrap) {
            _this6.wrap = wrap;
          } },
        this.renderButtons(left, 'left'),
        this.renderButtons(right, 'right'),
        _react2.default.createElement(
          'div',
          {
            className: prefixCls + '-content',
            ref: function ref(content) {
              _this6.content = content;
            },
            onTouchStart: function onTouchStart(e) {
              return _this6._onTouchStart(e);
            },
            onTouchMove: function onTouchMove(e) {
              return _this6._onTouchMove(e);
            },
            onTouchEnd: function onTouchEnd(e) {
              return _this6._onTouchEnd(e);
            } },
          children
        )
      ) : _react2.default.createElement(
        'div',
        {
          className: prefixCls + '-wrap' },
        _react2.default.createElement(
          'div',
          { className: prefixCls + '-content' },
          children
        )
      );
    }
  }]);

  return SwipeAction;
}(_react.PureComponent);

SwipeAction.propTypes = {
  prefixCls: _propTypes2.default.string,
  left: _propTypes2.default.arrayOf(_propTypes2.default.object),
  right: _propTypes2.default.arrayOf(_propTypes2.default.object),
  moveTimeDuration: _propTypes2.default.number,
  moveDistanceRatio: _propTypes2.default.number,
  offset: _propTypes2.default.number,
  onOpen: _propTypes2.default.func,
  onClose: _propTypes2.default.func
};

SwipeAction.defaultProps = {
  prefixCls: 'za-swipeAction',
  left: [],
  right: [],
  moveTimeDuration: 300,
  moveDistanceRatio: 0.5,
  offset: 10,
  onOpen: function onOpen() {},
  onClose: function onClose() {}
};

exports.default = SwipeAction;