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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
var _excluded = ["vertical", "length", "scrollLength", "classPrefix", "className", "tableId", "style", "showScrollArrow", "scrollBarOffset"];
import * as React from 'react';
import classNames from 'classnames';
import { addStyle, DOMMouseMoveTracker, getOffset } from 'dom-lib';
import isNumber from 'lodash/isNumber';
import Icon from '../../../es/icon';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import { SCROLLBAR_MIN_WIDTH } from './constants';
import { defaultClassPrefix, getUnhandledProps, prefix } from './utils';
import TableContext from './TableContext';
import { transformZoomData } from '../_util/DocumentUtils';
var propTypeKeys = ['tableId', 'vertical', 'length', 'scrollLength', 'scrollBarOffset', 'clickScrollLength', 'showScrollArrow', 'className', 'classPrefix', 'onScroll', 'onMouseDown'];

var Scrollbar = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(Scrollbar, _React$PureComponent);

  var _super = _createSuper(Scrollbar);

  function Scrollbar(props) {
    var _this;

    _classCallCheck(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 ? transformZoomData(event.pageY) - barOffset.top : transformZoomData(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 (isNumber(clickScrollLength.vertical)) {
          var handleLength = length / scrollLength * clickScrollLength.vertical;

          _this.handleScroll(sort === 'fir' ? -handleLength : handleLength, e);
        }
      } else if (isNumber(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;
  }

  _createClass(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 DOMMouseMoveTracker(this.handleDragMove, this.handleDragEnd, document.body);
    }
  }, {
    key: "initBarOffset",
    value: function initBarOffset() {
      var _this2 = this;

      setTimeout(function () {
        _this2.barRef.current && _this2.setState({
          barOffset: 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, 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);
        }
      }

      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 = _objectWithoutProperties(_this$props6, _excluded);

      var handlePressed = this.state.handlePressed; // @ts-ignore

      var addPrefix = prefix(classPrefix);
      var classes = classNames(classPrefix, className, (_classNames = {}, _defineProperty(_classNames, addPrefix('vertical'), vertical), _defineProperty(_classNames, addPrefix('horizontal'), !vertical), _defineProperty(_classNames, addPrefix('hide'), scrollLength <= length), _defineProperty(_classNames, addPrefix('pressed'), handlePressed), _defineProperty(_classNames, addPrefix('arrow'), showScrollArrow), _classNames));
      var width = length / scrollLength * 100;
      var styles = (_styles = {}, _defineProperty(_styles, vertical ? 'height' : 'width', "".concat(width, "%")), _defineProperty(_styles, vertical ? 'minHeight' : 'minWidth', SCROLLBAR_MIN_WIDTH), _styles);
      var IEstyles = (_IEstyles = {}, _defineProperty(_IEstyles, vertical ? 'top' : 'left', showScrollArrow ? '0.2rem' : 0), _defineProperty(_IEstyles, vertical ? 'bottom' : 'right', showScrollArrow ? '0.2rem' : 0), _defineProperty(_IEstyles, vertical ? 'height' : 'width', style ? style[vertical ? 'height' : 'width'] - scrollBarOffset : "calc(100% - ".concat(pxToRem(scrollBarOffset), ")")), _defineProperty(_IEstyles, vertical ? 'width' : 'height', showScrollArrow ? '0.2rem' : '0.1rem'), _IEstyles);
      var unhandled = getUnhandledProps(propTypeKeys, rest);

      var scrollbarStyle = _objectSpread(_objectSpread({}, style), IEstyles);

      var valuenow = this.scrollOffset / length * 100 + width;
      return /*#__PURE__*/React.createElement("div", _extends({
        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, {
        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, {
        type: "baseline-arrow_drop_up"
      })));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return TableContext;
    }
  }]);

  return Scrollbar;
}(React.PureComponent);

Scrollbar.defaultProps = {
  classPrefix: defaultClassPrefix('performance-table-scrollbar'),
  scrollLength: 1,
  length: 1
};
export default Scrollbar;
//# sourceMappingURL=Scrollbar.js.map