choerodon-ui/lib/rc-components/tabs/SwipeableTabContent.js

An enterprise-class UI design language and React-based implementation

"use strict";

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

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

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

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

var _TabContent = _interopRequireDefault(require("./TabContent"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _createReactClass = _interopRequireDefault(require("create-react-class"));

var _hammerjs = _interopRequireDefault(require("../hammerjs"));

var _reactDom = _interopRequireDefault(require("react-dom"));

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

var RESISTANCE_COEF = 0.6;

function computeIndex(_ref) {
  var maxIndex = _ref.maxIndex,
      startIndex = _ref.startIndex,
      delta = _ref.delta,
      viewSize = _ref.viewSize;
  var index = startIndex + -delta / viewSize;

  if (index < 0) {
    index = Math.exp(index * RESISTANCE_COEF) - 1;
  } else if (index > maxIndex) {
    index = maxIndex + 1 - Math.exp((maxIndex - index) * RESISTANCE_COEF);
  }

  return index;
}

function getIndexByDelta(e) {
  var delta = (0, _utils.isVertical)(this.props.tabBarPosition) ? e.deltaY : e.deltaX;
  var otherDelta = (0, _utils.isVertical)(this.props.tabBarPosition) ? e.deltaX : e.deltaY;

  if (Math.abs(delta) < Math.abs(otherDelta)) {
    return undefined;
  }

  var currentIndex = computeIndex({
    maxIndex: this.maxIndex,
    viewSize: this.viewSize,
    startIndex: this.startIndex,
    delta: delta
  });
  var showIndex = delta < 0 ? Math.floor(currentIndex + 1) : Math.floor(currentIndex);

  if (showIndex < 0) {
    showIndex = 0;
  } else if (showIndex > this.maxIndex) {
    showIndex = this.maxIndex;
  }

  if (this.children[showIndex].props.disabled) {
    return undefined;
  }

  return currentIndex;
}

var SwipeableTabContent = (0, _createReactClass["default"])({
  displayName: 'SwipeableTabContent',
  propTypes: {
    tabBarPosition: _propTypes["default"].string,
    onChange: _propTypes["default"].func,
    children: _propTypes["default"].any,
    hammerOptions: _propTypes["default"].any,
    animated: _propTypes["default"].bool,
    activeKey: _propTypes["default"].string
  },
  getDefaultProps: function getDefaultProps() {
    return {
      animated: true
    };
  },
  componentDidMount: function componentDidMount() {
    this.rootNode = _reactDom["default"].findDOMNode(this);
  },
  onPanStart: function onPanStart() {
    var _this$props = this.props,
        tabBarPosition = _this$props.tabBarPosition,
        children = _this$props.children,
        activeKey = _this$props.activeKey,
        animated = _this$props.animated;
    var startIndex = this.startIndex = (0, _utils.getActiveIndex)(children, activeKey);

    if (startIndex === -1) {
      return;
    }

    if (animated) {
      (0, _utils.setTransition)(this.rootNode.style, 'none');
    }

    this.startDrag = true;
    this.children = (0, _utils.toArray)(children);
    this.maxIndex = this.children.length - 1;
    this.viewSize = (0, _utils.isVertical)(tabBarPosition) ? this.rootNode.offsetHeight : this.rootNode.offsetWidth;
  },
  onPan: function onPan(e) {
    if (!this.startDrag) {
      return;
    }

    var tabBarPosition = this.props.tabBarPosition;
    var currentIndex = getIndexByDelta.call(this, e);

    if (currentIndex !== undefined) {
      (0, _utils.setTransform)(this.rootNode.style, (0, _utils.getTransformByIndex)(currentIndex, tabBarPosition));
    }
  },
  onPanEnd: function onPanEnd(e) {
    if (!this.startDrag) {
      return;
    }

    this.end(e);
  },
  onSwipe: function onSwipe(e) {
    this.end(e, true);
  },
  end: function end(e, swipe) {
    var _this$props2 = this.props,
        tabBarPosition = _this$props2.tabBarPosition,
        animated = _this$props2.animated;
    this.startDrag = false;

    if (animated) {
      (0, _utils.setTransition)(this.rootNode.style, '');
    }

    var currentIndex = getIndexByDelta.call(this, e);
    var finalIndex = this.startIndex;

    if (currentIndex !== undefined) {
      if (currentIndex < 0) {
        finalIndex = 0;
      } else if (currentIndex > this.maxIndex) {
        finalIndex = this.maxIndex;
      } else if (swipe) {
        var delta = (0, _utils.isVertical)(tabBarPosition) ? e.deltaY : e.deltaX;
        finalIndex = delta < 0 ? Math.ceil(currentIndex) : Math.floor(currentIndex);
      } else {
        var floorIndex = Math.floor(currentIndex);

        if (currentIndex - floorIndex > 0.6) {
          finalIndex = floorIndex + 1;
        } else {
          finalIndex = floorIndex;
        }
      }
    }

    if (this.children[finalIndex].props.disabled) {
      return;
    }

    if (this.startIndex === finalIndex) {
      if (animated) {
        (0, _utils.setTransform)(this.rootNode.style, (0, _utils.getTransformByIndex)(finalIndex, this.props.tabBarPosition));
      }
    } else {
      this.props.onChange((0, _utils.getActiveKey)(this.props.children, finalIndex));
    }
  },
  render: function render() {
    var _this$props3 = this.props,
        tabBarPosition = _this$props3.tabBarPosition,
        hammerOptions = _this$props3.hammerOptions,
        animated = _this$props3.animated;
    var events = {
      onSwipe: this.onSwipe,
      onPanStart: this.onPanStart
    };

    if (animated !== false) {
      events = (0, _objectSpread2["default"])({}, events, {
        onPan: this.onPan,
        onPanEnd: this.onPanEnd
      });
    }

    return _react["default"].createElement(_hammerjs["default"], (0, _extends2["default"])({}, events, {
      direction: (0, _utils.isVertical)(tabBarPosition) ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL',
      options: hammerOptions
    }), _react["default"].createElement(_TabContent["default"], this.props));
  }
});
var _default = SwipeableTabContent;
exports["default"] = _default;
//# sourceMappingURL=SwipeableTabContent.js.map