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

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

"use strict";

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

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

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

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

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

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"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      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);
  };
}

var propTypes = {
  tableId: _propTypes["default"].string,
  vertical: _propTypes["default"].bool,
  length: _propTypes["default"].number,
  scrollLength: _propTypes["default"].number,
  scrollBarOffset: _propTypes["default"].number,
  clickScrollLength: _propTypes["default"].object,
  showScrollArrow: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  classPrefix: _propTypes["default"].string,
  onScroll: _propTypes["default"].func,
  onMouseDown: _propTypes["default"].func
};

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

  var _super = _createSuper(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 _this$mouseMoveTracke, _this$props$onMouseDo, _this$props;

      _this.mouseMoveTracker = _this.getMouseMoveTracker(); // @ts-ignore

      (_this$mouseMoveTracke = _this.mouseMoveTracker) === null || _this$mouseMoveTracke === void 0 ? void 0 : _this$mouseMoveTracke.captureMouseMoves(event);

      _this.setState({
        handlePressed: true
      });

      (_this$props$onMouseDo = (_this$props = _this.props).onMouseDown) === null || _this$props$onMouseDo === void 0 ? void 0 : _this$props$onMouseDo.call(_this$props, event);
    };

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

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

    _this.handleDragMove = function (deltaX, deltaY, event) {
      var _window, _window$event;

      var vertical = _this.props.vertical; // @ts-ignore

      if (!_this.mouseMoveTracker || !_this.mouseMoveTracker.isDragging()) {
        return;
      }

      if ((event === null || event === void 0 ? void 0 : event.buttons) === 0 || ((_window = window) === null || _window === void 0 ? void 0 : (_window$event = _window.event) === null || _window$event === void 0 ? void 0 : _window$event['buttons']) === 0) {
        _this.releaseMouseMoves();

        return;
      }

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


    _this.handleClick = function (event) {
      var _this$handleRef$curre;

      if (_this.handleRef.current && ((_this$handleRef$curre = _this.handleRef.current) === null || _this$handleRef$curre === void 0 ? void 0 : _this$handleRef$curre.contains(event.target))) {
        return;
      }

      var _this$props2 = _this.props,
          vertical = _this$props2.vertical,
          length = _this$props2.length,
          scrollLength = _this$props2.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$props3 = _this.props,
          vertical = _this$props3.vertical,
          clickScrollLength = _this$props3.clickScrollLength,
          scrollLength = _this$props3.scrollLength,
          length = _this$props3.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 = React.createRef();
    _this.barRef = 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$props4 = this.props,
          length = _this$props4.length,
          scrollLength = _this$props4.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$props$onScroll, _this$props6;

      var _this$props5 = this.props,
          length = _this$props5.length,
          scrollLength = _this$props5.scrollLength;
      var scrollDelta = delta * (scrollLength / length);
      this.updateScrollBarPosition(delta);
      (_this$props$onScroll = (_this$props6 = this.props).onScroll) === null || _this$props$onScroll === void 0 ? void 0 : _this$props$onScroll.call(_this$props6, 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$props7 = this.props,
          vertical = _this$props7.vertical,
          length = _this$props7.length,
          scrollLength = _this$props7.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 += delta;
        this.scrollOffset = Math.max(this.scrollOffset, 0);
        this.scrollOffset = Math.min(this.scrollOffset, max);
      } else {
        this.scrollOffset = forceDelta || 0;
      }

      if (vertical) {
        translateDOMPositionXY === null || translateDOMPositionXY === void 0 ? void 0 : translateDOMPositionXY(styles, 0, this.scrollOffset);
      } else {
        translateDOMPositionXY === null || translateDOMPositionXY === void 0 ? void 0 : translateDOMPositionXY(styles, this.scrollOffset, 0);
      }

      (0, _domLib.addStyle)(this.handleRef.current, styles);
    }
  }, {
    key: "releaseMouseMoves",
    value: function releaseMouseMoves() {
      var _this$mouseMoveTracke2, _this$mouseMoveTracke3;

      // @ts-ignore
      (_this$mouseMoveTracke2 = this.mouseMoveTracker) === null || _this$mouseMoveTracke2 === void 0 ? void 0 : (_this$mouseMoveTracke3 = _this$mouseMoveTracke2.releaseMouseMoves) === null || _this$mouseMoveTracke3 === void 0 ? void 0 : _this$mouseMoveTracke3.call(_this$mouseMoveTracke2);
      this.mouseMoveTracker = null;
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _styles,
          _IEstyles,
          _this3 = this;

      var _this$props8 = this.props,
          vertical = _this$props8.vertical,
          length = _this$props8.length,
          scrollLength = _this$props8.scrollLength,
          classPrefix = _this$props8.classPrefix,
          className = _this$props8.className,
          tableId = _this$props8.tableId,
          style = _this$props8.style,
          showScrollArrow = _this$props8.showScrollArrow,
          scrollBarOffset = _this$props8.scrollBarOffset,
          rest = (0, _objectWithoutProperties2["default"])(_this$props8, ["vertical", "length", "scrollLength", "classPrefix", "className", "tableId", "style", "showScrollArrow", "scrollBarOffset"]);
      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), "rem)")), (0, _defineProperty2["default"])(_IEstyles, vertical ? 'width' : 'height', showScrollArrow ? '0.2rem' : '0.1rem'), _IEstyles);
      var unhandled = (0, _utils.getUnhandledProps)(propTypes, rest);
      var scrollbarStyle = (0, _objectSpread2["default"])({}, style, {}, IEstyles);
      var valuenow = this.scrollOffset / length * 100 + width;
      return 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 && React.createElement("div", {
        className: addPrefix("handle-".concat(vertical ? 'vertical' : 'horizontal', "-fir")),
        onClick: function onClick(e) {
          return _this3.handleArrowClick(e, 'fir');
        }
      }, React.createElement(_icon["default"], {
        type: "baseline-arrow_drop_up"
      })), 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 && React.createElement("div", {
        className: addPrefix("handle-".concat(vertical ? 'vertical' : 'horizontal', "-sec")),
        onClick: function onClick(e) {
          return _this3.handleArrowClick(e, 'sec');
        }
      }, React.createElement(_icon["default"], {
        type: "baseline-arrow_drop_up"
      })));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return _TableContext["default"];
    }
  }]);
  return Scrollbar;
}(React.PureComponent);

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