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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import * as React from 'react';
import PropTypes from 'prop-types';
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';
var propTypes = {
  tableId: PropTypes.string,
  vertical: PropTypes.bool,
  length: PropTypes.number,
  scrollLength: PropTypes.number,
  scrollBarOffset: PropTypes.number,
  clickScrollLength: PropTypes.object,
  showScrollArrow: PropTypes.bool,
  className: PropTypes.string,
  classPrefix: PropTypes.string,
  onScroll: PropTypes.func,
  onMouseDown: PropTypes.func
};

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 _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 (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 = React.createRef();
    _this.barRef = 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$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 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$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, 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);
      }

      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 = _objectWithoutProperties(_this$props8, ["vertical", "length", "scrollLength", "classPrefix", "className", "tableId", "style", "showScrollArrow", "scrollBarOffset"]);

      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), "rem)")), _defineProperty(_IEstyles, vertical ? 'width' : 'height', showScrollArrow ? '0.2rem' : '0.1rem'), _IEstyles);
      var unhandled = getUnhandledProps(propTypes, rest);

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

      var valuenow = this.scrollOffset / length * 100 + width;
      return 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 && React.createElement("div", {
        className: addPrefix("handle-".concat(vertical ? 'vertical' : 'horizontal', "-fir")),
        onClick: function onClick(e) {
          return _this3.handleArrowClick(e, 'fir');
        }
      }, React.createElement(Icon, {
        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, {
        type: "baseline-arrow_drop_up"
      })));
    }
  }], [{
    key: "contextType",
    get: function get() {
      return TableContext;
    }
  }]);

  return Scrollbar;
}(React.PureComponent);

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