@jdcfe/yep-react/lib/swipe-action/index.js

一套移动端的React组件库

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

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

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

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

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

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _gesture = _interopRequireDefault(require("../gesture"));

var _noop = _interopRequireDefault(require("../_utils/noop"));

var _closest = _interopRequireDefault(require("../_utils/closest"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var SwipeAction = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2.default)(SwipeAction, _React$PureComponent);

  var _super = _createSuper(SwipeAction);

  function SwipeAction(props) {
    var _this;

    (0, _classCallCheck2.default)(this, SwipeAction);
    _this = _super.call(this, props);

    _this._setStyle = function (value) {
      var onMovingDistance = _this.props.onMovingDistance;
      var limit = value > 0 ? _this.btnsLeftWidth : -_this.btnsRightWidth;

      var contentLeft = _this._getContentEasing(value, limit);

      _this.content.style.left = "".concat(contentLeft, "px");

      if (_this.cover) {
        _this.cover.style.display = Math.abs(value) > 0 ? 'block' : 'none';
        _this.cover.style.left = "".concat(contentLeft, "px");
      }

      onMovingDistance(contentLeft);
    };

    _this.renderButtons = _this.renderButtons.bind((0, _assertThisInitialized2.default)(_this));
    _this.doOpenLeft = _this.doOpenLeft.bind((0, _assertThisInitialized2.default)(_this));
    _this.doOpenRight = _this.doOpenRight.bind((0, _assertThisInitialized2.default)(_this));
    _this.open = _this.open.bind((0, _assertThisInitialized2.default)(_this));
    _this.close = _this.close.bind((0, _assertThisInitialized2.default)(_this));
    _this.createContentRef = _this.createContentRef.bind((0, _assertThisInitialized2.default)(_this));
    _this.createCoverRef = _this.createCoverRef.bind((0, _assertThisInitialized2.default)(_this));
    _this.onCloseSwipe = _this.onCloseSwipe.bind((0, _assertThisInitialized2.default)(_this));
    _this.onPanStart = _this.onPanStart.bind((0, _assertThisInitialized2.default)(_this));
    _this.onPan = _this.onPan.bind((0, _assertThisInitialized2.default)(_this));
    _this.onPanEnd = _this.onPanEnd.bind((0, _assertThisInitialized2.default)(_this));
    _this.onBtnClick = _this.onBtnClick.bind((0, _assertThisInitialized2.default)(_this));
    _this.state = {
      swiping: false
    };
    return _this;
  }

  (0, _createClass2.default)(SwipeAction, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
      this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
      document.body.addEventListener('touchstart', this.onCloseSwipe, {
        passive: false
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      // @ts-ignore
      document.body.removeEventListener('touchstart', this.onCloseSwipe, {
        passive: false
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      //如果是动态改变right和left的length，需要重新计算
      this.btnsLeftWidth = this.left ? this.left.offsetWidth : 0;
      this.btnsRightWidth = this.right ? this.right.offsetWidth : 0;
    }
  }, {
    key: "onCloseSwipe",
    value: function onCloseSwipe(ev) {
      if (!(this.openedLeft || this.openedRight)) {
        return;
      }

      var pNode = (0, _closest.default)(ev.target, ".".concat(this.props.prefixCls, "-actions"));

      if (!pNode) {
        ev.preventDefault();
        this.close();
      }
    }
  }, {
    key: "createContentRef",
    value: function createContentRef(el) {
      this.content = el;
    }
  }, {
    key: "createCoverRef",
    value: function createCoverRef(el) {
      this.cover = el;
    }
  }, {
    key: "_getContentEasing",
    value: function _getContentEasing(value, limit) {
      // limit content style left when value > actions width
      var delta = Math.abs(value) - Math.abs(limit);
      var isOverflow = delta > 0;
      var factor = limit > 0 ? 1 : -1;

      if (isOverflow) {
        value = limit + Math.pow(delta, 0.85) * factor;
        return Math.abs(value) > Math.abs(limit) ? limit : value;
      }

      return value;
    }
  }, {
    key: "open",
    value: function open(value, openedLeft, openedRight) {
      if (!this.openedLeft && !this.openedRight && this.props.onOpen) {
        this.props.onOpen();
      }

      this.openedLeft = openedLeft;
      this.openedRight = openedRight;

      this._setStyle(value);
    }
  }, {
    key: "close",
    value: function close() {
      if ((this.openedLeft || this.openedRight) && this.props.onClose) {
        this.props.onClose();
      }

      this._setStyle(0);

      this.openedLeft = false;
      this.openedRight = false;
    }
  }, {
    key: "doOpenLeft",
    value: function doOpenLeft() {
      this.open(this.btnsLeftWidth, true, false);
    }
  }, {
    key: "doOpenRight",
    value: function doOpenRight() {
      this.open(-this.btnsRightWidth, true, false);
    }
  }, {
    key: "onPanStart",
    value: function onPanStart(e) {
      var direction = e.direction,
          moveStatus = e.moveStatus; // http://hammerjs.github.io/api/#directions

      var isLeft = direction === 2;
      var isRight = direction === 4;

      if (!isLeft && !isRight) {
        return;
      }

      var _this$props = this.props,
          left = _this$props.left,
          right = _this$props.right;
      this.needShowRight = isLeft && right.length > 0;
      this.needShowLeft = isRight && left.length > 0;

      if (this.left) {
        this.left.style.visibility = this.needShowRight ? 'hidden' : 'visible';
      }

      if (this.right) {
        this.right.style.visibility = this.needShowLeft ? 'hidden' : 'visible';
      }

      if (this.needShowLeft || this.needShowRight) {
        this.swiping = true;
        this.setState({
          swiping: this.swiping
        });

        this._setStyle(moveStatus.x);
      }
    }
  }, {
    key: "onPan",
    value: function onPan(e) {
      var x = e.moveStatus.x;

      if (!this.swiping) {
        return;
      }

      this._setStyle(x);
    }
  }, {
    key: "onPanEnd",
    value: function onPanEnd(e) {
      if (!this.swiping) {
        return;
      }

      var x = e.moveStatus.x;
      var needOpenRight = this.needShowRight && Math.abs(x) > this.btnsRightWidth / 2;
      var needOpenLeft = this.needShowLeft && Math.abs(x) > this.btnsLeftWidth / 2;

      if (needOpenRight) {
        this.doOpenRight();
      } else if (needOpenLeft) {
        this.doOpenLeft();
      } else {
        this.close();
      }

      this.swiping = false;
      this.setState({
        swiping: this.swiping
      });
      this.needShowLeft = false;
      this.needShowRight = false;
    }
  }, {
    key: "onBtnClick",
    value: function onBtnClick(ev, btn) {
      var onClick = btn.onClick;

      if (onClick) {
        onClick(ev);
      }

      if (this.props.autoClose) {
        this.close();
      }
    }
  }, {
    key: "renderButtons",
    value: function renderButtons(buttons, position, ref) {
      var _this2 = this;

      var prefixCls = this.props.prefixCls;
      return buttons && buttons.length > 0 ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-actions ").concat(prefixCls, "-actions-").concat(position),
        ref: ref
      }, buttons.map(function (btn, i) {
        return /*#__PURE__*/React.createElement("div", {
          key: i,
          className: "".concat(prefixCls, "-btn ").concat(btn.hasOwnProperty('className') ? btn.className : ''),
          style: btn.style,
          role: "button",
          onClick: function onClick(e) {
            return _this2.onBtnClick(e, btn);
          }
        }, /*#__PURE__*/React.createElement("div", {
          className: "".concat(prefixCls, "-btn-text")
        }, btn.text || 'Click'));
      })) : null;
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props2 = this.props,
          className = _this$props2.className,
          style = _this$props2.style,
          prefixCls = _this$props2.prefixCls,
          _this$props2$left = _this$props2.left,
          left = _this$props2$left === void 0 ? [] : _this$props2$left,
          _this$props2$right = _this$props2.right,
          right = _this$props2$right === void 0 ? [] : _this$props2$right,
          children = _this$props2.children,
          disabled = _this$props2.disabled;
      var divProps = (0, _omit.default)(this.props, ['prefixCls', 'className', 'style', 'left', 'right', 'children', 'disabled', 'autoClose', 'onOpen', 'onClose', 'onMovingDistance']);
      var cls = (0, _classnames.default)(prefixCls, className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-swiping"), this.state.swiping));
      return (left.length > 0 || right.length > 0) && !disabled ? /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, divProps, {
        className: cls,
        style: style
      }), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-cover"),
        ref: this.createCoverRef
      }), this.renderButtons(left, 'left', function (el) {
        return _this3.left = el;
      }), this.renderButtons(right, 'right', function (el) {
        return _this3.right = el;
      }), /*#__PURE__*/React.createElement(_gesture.default, {
        onPanStart: this.onPanStart,
        onPan: this.onPan,
        onPanEnd: this.onPanEnd,
        onSwipeLeft: this.doOpenRight,
        onSwipeRight: this.doOpenLeft
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-content"),
        ref: this.createContentRef
      }, children))) : /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
        className: cls,
        style: style
      }, divProps), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-cover"),
        ref: this.createCoverRef
      }), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
        className: "".concat(prefixCls, "-content"),
        ref: this.createContentRef
      }, divProps), children));
    }
  }]);
  return SwipeAction;
}(React.PureComponent);

exports.default = SwipeAction;
SwipeAction.defaultProps = {
  prefixCls: 'Yep-swipe',
  style: {},
  autoClose: false,
  disabled: false,
  left: [],
  right: [],
  onOpen: _noop.default,
  onClose: _noop.default,
  onMovingDistance: _noop.default
};