choerodon-ui/pro/lib/performance-table/Scrollbar.js

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

"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

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

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

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

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

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

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

var _domLib = require("dom-lib");

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _icon = _interopRequireDefault(require("../../../lib/icon"));

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _constants = require("./constants");

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

var _TableContext = _interopRequireDefault(require("./TableContext"));

var _excluded = ["vertical", "length", "scrollLength", "classPrefix", "className", "tableId", "style", "showScrollArrow", "scrollBarOffset"];
var propTypeKeys = ['tableId', 'vertical', 'length', 'scrollLength', 'scrollBarOffset', 'clickScrollLength', 'showScrollArrow', 'className', 'classPrefix', 'onScroll', 'onMouseDown'];

var Scrollbar = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(Scrollbar, _React$PureComponent);

  var _super = (0, _createSuper2["default"])(Scrollbar);

  function Scrollbar(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Scrollbar);
    _this = _super.call(this, props);
    _this.scrollOffset = 0;
    _this.mouseMoveTracker = null;

    _this.handleMouseDown = function (event) {
      var mouseMoveTracker = _this.getMouseMoveTracker();

      _this.mouseMoveTracker = mouseMoveTracker;

      if (mouseMoveTracker) {
        // @ts-ignore
        mouseMoveTracker.captureMouseMoves(event);
      }

      _this.setState({
        handlePressed: true
      });

      var onMouseDown = _this.props.onMouseDown;

      if (onMouseDown) {
        onMouseDown(event);
      }
    };

    _this.handleDragEnd = function () {
      _this.releaseMouseMoves();

      _this.setState({
        handlePressed: false
      });
    };

    _this.handleDragMove = function (deltaX, deltaY, event) {
      // @ts-ignore
      if (!_this.mouseMoveTracker || !_this.mouseMoveTracker.isDragging()) {
        return;
      }

      if (event && event.buttons === 0 || window.event && window.event['buttons'] === 0) {
        _this.releaseMouseMoves();

        return;
      }

      var vertical = _this.props.vertical;

      _this.handleScroll(vertical ? deltaY : deltaX, event);
    };
    /**
     * 点击滚动条，然后滚动到指定位置
     */


    _this.handleClick = function (event) {
      if (_this.handleRef.current && _this.handleRef.current.contains(event.target)) {
        return;
      }

      var _this$props = _this.props,
          vertical = _this$props.vertical,
          length = _this$props.length,
          scrollLength = _this$props.scrollLength;
      var barOffset = _this.state.barOffset;
      var offset = vertical ? event.pageY - barOffset.top : event.pageX - barOffset.left;
      var handleWidth = length / scrollLength * length;
      var delta = offset - handleWidth;
      var nextDelta = offset > _this.scrollOffset ? delta - _this.scrollOffset : offset - _this.scrollOffset;

      _this.handleScroll(nextDelta, event);
    };
    /**
     *
     * @param e
     * @param sort
     */


    _this.handleArrowClick = function (e, sort) {
      e.stopPropagation();
      var _this$props2 = _this.props,
          vertical = _this$props2.vertical,
          clickScrollLength = _this$props2.clickScrollLength,
          scrollLength = _this$props2.scrollLength,
          length = _this$props2.length;

      if (vertical) {
        if ((0, _isNumber["default"])(clickScrollLength.vertical)) {
          var handleLength = length / scrollLength * clickScrollLength.vertical;

          _this.handleScroll(sort === 'fir' ? -handleLength : handleLength, e);
        }
      } else if ((0, _isNumber["default"])(clickScrollLength.horizontal)) {
        var _handleLength = length / scrollLength * clickScrollLength.horizontal;

        _this.handleScroll(sort === 'fir' ? -_handleLength : _handleLength, e);
      }
    };

    _this.state = {
      barOffset: {
        top: 0,
        left: 0
      },
      handlePressed: false
    };
    _this.handleRef = /*#__PURE__*/React.createRef();
    _this.barRef = /*#__PURE__*/React.createRef();
    return _this;
  }

  (0, _createClass2["default"])(Scrollbar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.initBarOffset();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (this.props.vertical && this.props.scrollLength !== prevProps.scrollLength) {
        this.initBarOffset();
      } else if (!this.props.vertical && this.props.scrollLength !== prevProps.scrollLength) {
        this.initBarOffset();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.releaseMouseMoves();
    }
  }, {
    key: "onWheelScroll",
    value: function onWheelScroll(delta) {
      var _this$props3 = this.props,
          length = _this$props3.length,
          scrollLength = _this$props3.scrollLength;
      var nextDelta = delta / (scrollLength / length);
      this.updateScrollBarPosition(nextDelta);
    }
  }, {
    key: "getMouseMoveTracker",
    value: function getMouseMoveTracker() {
      return this.mouseMoveTracker || new _domLib.DOMMouseMoveTracker(this.handleDragMove, this.handleDragEnd, document.body);
    }
  }, {
    key: "initBarOffset",
    value: function initBarOffset() {
      var _this2 = this;

      setTimeout(function () {
        _this2.barRef.current && _this2.setState({
          barOffset: (0, _domLib.getOffset)(_this2.barRef.current)
        });
      }, 1);
    }
  }, {
    key: "handleScroll",
    value: function handleScroll(delta, event) {
      var _this$props4 = this.props,
          length = _this$props4.length,
          scrollLength = _this$props4.scrollLength,
          onScroll = _this$props4.onScroll;
      var scrollDelta = delta * (scrollLength / length);
      this.updateScrollBarPosition(delta);

      if (onScroll) {
        onScroll(scrollDelta, event);
      }
    }
  }, {
    key: "resetScrollBarPosition",
    value: function resetScrollBarPosition() {
      var forceDelta = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      this.scrollOffset = 0;
      this.updateScrollBarPosition(0, forceDelta);
    }
  }, {
    key: "updateScrollBarPosition",
    value: function updateScrollBarPosition(delta, forceDelta) {
      var _this$props5 = this.props,
          vertical = _this$props5.vertical,
          length = _this$props5.length,
          scrollLength = _this$props5.scrollLength;
      var translateDOMPositionXY = this.context.translateDOMPositionXY;
      var max = scrollLength && length ? length - Math.max(length / scrollLength * length, _constants.SCROLLBAR_MIN_WIDTH + 2) : 0;
      var styles = {};

      if (typeof forceDelta === 'undefined') {
        this.scrollOffset = Math.min(Math.max(this.scrollOffset + delta, 0), max);
      } else {
        this.scrollOffset = forceDelta || 0;
      }

      if (translateDOMPositionXY) {
        if (vertical) {
          translateDOMPositionXY(styles, 0, this.scrollOffset);
        } else {
          translateDOMPositionXY(styles, this.scrollOffset, 0);
        }
      }

      (0, _domLib.addStyle)(this.handleRef.current, styles);
    }
  }, {
    key: "releaseMouseMoves",
    value: function releaseMouseMoves() {
      var mouseMoveTracker = this.mouseMoveTracker;

      if (mouseMoveTracker) {
        // @ts-ignore
        mouseMoveTracker.releaseMouseMoves && mouseMoveTracker.releaseMouseMoves();
        this.mouseMoveTracker = null;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _styles,
          _IEstyles,
          _this3 = this;

      var _this$props6 = this.props,
          vertical = _this$props6.vertical,
          length = _this$props6.length,
          scrollLength = _this$props6.scrollLength,
          classPrefix = _this$props6.classPrefix,
          className = _this$props6.className,
          tableId = _this$props6.tableId,
          style = _this$props6.style,
          showScrollArrow = _this$props6.showScrollArrow,
          scrollBarOffset = _this$props6.scrollBarOffset,
          rest = (0, _objectWithoutProperties2["default"])(_this$props6, _excluded);
      var handlePressed = this.state.handlePressed; // @ts-ignore

      var addPrefix = (0, _utils.prefix)(classPrefix);
      var classes = (0, _classnames["default"])(classPrefix, className, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, addPrefix('vertical'), vertical), (0, _defineProperty2["default"])(_classNames, addPrefix('horizontal'), !vertical), (0, _defineProperty2["default"])(_classNames, addPrefix('hide'), scrollLength <= length), (0, _defineProperty2["default"])(_classNames, addPrefix('pressed'), handlePressed), (0, _defineProperty2["default"])(_classNames, addPrefix('arrow'), showScrollArrow), _classNames));
      var width = length / scrollLength * 100;
      var styles = (_styles = {}, (0, _defineProperty2["default"])(_styles, vertical ? 'height' : 'width', "".concat(width, "%")), (0, _defineProperty2["default"])(_styles, vertical ? 'minHeight' : 'minWidth', _constants.SCROLLBAR_MIN_WIDTH), _styles);
      var IEstyles = (_IEstyles = {}, (0, _defineProperty2["default"])(_IEstyles, vertical ? 'top' : 'left', showScrollArrow ? '0.2rem' : 0), (0, _defineProperty2["default"])(_IEstyles, vertical ? 'bottom' : 'right', showScrollArrow ? '0.2rem' : 0), (0, _defineProperty2["default"])(_IEstyles, vertical ? 'height' : 'width', style ? style[vertical ? 'height' : 'width'] - scrollBarOffset : "calc(100% - ".concat((0, _UnitConvertor.pxToRem)(scrollBarOffset), ")")), (0, _defineProperty2["default"])(_IEstyles, vertical ? 'width' : 'height', showScrollArrow ? '0.2rem' : '0.1rem'), _IEstyles);
      var unhandled = (0, _utils.getUnhandledProps)(propTypeKeys, rest);
      var scrollbarStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), IEstyles);
      var valuenow = this.scrollOffset / length * 100 + width;
      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
        role: "scrollbar",
        "aria-controls": tableId,
        "aria-valuemax": "100",
        "aria-valuemin": "0",
        "aria-valuenow": valuenow,
        "aria-orientation": vertical ? 'vertical' : 'horizontal'
      }, unhandled, {
        style: scrollbarStyle,
        ref: this.barRef,
        className: classes,
        onClick: this.handleClick
      }), showScrollArrow && /*#__PURE__*/React.createElement("div", {
        className: addPrefix("handle-".concat(vertical ? 'vertical' : 'horizontal', "-fir")),
        onClick: function onClick(e) {
          return _this3.handleArrowClick(e, 'fir');
        }
      }, /*#__PURE__*/React.createElement(_icon["default"], {
        type: "baseline-arrow_drop_up"
      })), /*#__PURE__*/React.createElement("div", {
        ref: this.handleRef,
        className: addPrefix("handle ".concat(showScrollArrow ? 'has-arrow' : '')),
        style: styles,
        onMouseDown: this.handleMouseDown,
        onTouchMove: function onTouchMove(e) {
          return e.stopPropagation();
        },
        role: "button",
        tabIndex: -1
      }), showScrollArrow && /*#__PURE__*/React.createElement("div", {
        className: addPrefix("handle-".concat(vertical ? 'vertical' : 'horizontal', "-sec")),
        onClick: function onClick(e) {
          return _this3.handleArrowClick(e, 'sec');
        }
      }, /*#__PURE__*/React.createElement(_icon["default"], {
        type: "baseline-arrow_drop_up"
      })));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _TableContext["default"];
    }
  }]);
  return Scrollbar;
}(React.PureComponent);

Scrollbar.defaultProps = {
  classPrefix: (0, _utils.defaultClassPrefix)('performance-table-scrollbar'),
  scrollLength: 1,
  length: 1
};
var _default = Scrollbar;
exports["default"] = _default;
//# sourceMappingURL=Scrollbar.js.map