@oceanbase/ui/es/SideTip/Dragger.js

The UI library based on OceanBase Design

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/* eslint-disable react/sort-comp */
/* eslint-disable no-restricted-syntax */

import classnames from 'classnames';
import React from 'react';
import { getClientHeight, getClientWidth, getScrollBarSize, getScrollOffsets, isFixedElem } from "./utils";
import { jsx as _jsx } from "react/jsx-runtime";
var INIT_RIGHT = 32;
var INIT_BOTTOM = 32;
var Draggable = /*#__PURE__*/function (_React$Component) {
  _inherits(Draggable, _React$Component);
  var _super = _createSuper(Draggable);
  function Draggable(props) {
    var _this;
    _classCallCheck(this, Draggable);
    _this = _super.call(this, props);
    _defineProperty(_assertThisInitialized(_this), "nodeRef", void 0);
    _defineProperty(_assertThisInitialized(_this), "intervalStart", void 0);
    _defineProperty(_assertThisInitialized(_this), "deltaX", void 0);
    _defineProperty(_assertThisInitialized(_this), "deltaY", void 0);
    _defineProperty(_assertThisInitialized(_this), "defaultScrollBarSize", void 0);
    _defineProperty(_assertThisInitialized(_this), "overlapDetection", function () {
      var node = _this.nodeRef.current;
      var _node$getBoundingClie = node.getBoundingClientRect(),
        left = _node$getBoundingClie.left,
        top = _node$getBoundingClie.top,
        right = _node$getBoundingClie.right,
        bottom = _node$getBoundingClie.bottom,
        width = _node$getBoundingClie.width,
        height = _node$getBoundingClie.height;
      var aroundElems = [document.elementFromPoint(left, top), document.elementFromPoint(right, bottom), document.elementFromPoint(left + width / 2, top + height / 2)];
      for (var _i = 0, _aroundElems = aroundElems; _i < _aroundElems.length; _i++) {
        var elem = _aroundElems[_i];
        if (elem !== node && isFixedElem(elem)) {
          if (_this.props.onOverlap) {
            // eslint-disable-next-line react/destructuring-assignment
            _this.props.onOverlap();
          }
          break;
        }
      }
    });
    _defineProperty(_assertThisInitialized(_this), "getContainerDom", function () {
      var getPopupContainer = _this.props.getPopupContainer;
      var dom = getPopupContainer ? getPopupContainer() : undefined;
      return dom;
    });
    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
      var dom = _this.getContainerDom();
      // update defaultScrollBarSize
      _this.defaultScrollBarSize = getScrollBarSize();
      var node = _this.nodeRef.current;
      var clientRect = node.getBoundingClientRect();
      var width = clientRect.width,
        height = clientRect.height;
      var _window$getComputedSt = window.getComputedStyle(node),
        styleRight = _window$getComputedSt.right,
        styleBottom = _window$getComputedSt.bottom;
      var right = Number(styleRight.replace('px', ''));
      var bottom = Number(styleBottom.replace('px', ''));
      var clientWidth = getClientWidth(dom);
      var clientHeight = getClientHeight(dom);
      var deltaX = clientWidth - right - width;
      var deltaY = clientHeight - bottom - height;

      // drag boundary detection
      if (deltaX < 0) {
        right += deltaX;
      }
      if (deltaY < 0) {
        bottom += deltaY;
      }
      _this.setState({
        bottom: bottom,
        right: right
      });
    });
    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
      // 非鼠标左键点按不处理
      if (e.button !== 0) {
        return;
      }
      var dom = _this.getContainerDom();
      _this.intervalStart = new Date().getTime();
      var scroll = getScrollOffsets(dom);
      var node = _this.nodeRef.current;
      var startX = e.clientX + scroll.x;
      var startY = e.clientY + scroll.y;
      var origX = node.offsetLeft;
      var origY = node.offsetTop;
      _this.deltaX = startX - origX;
      _this.deltaY = startY - origY;
      if (_this.props.onDragStart) {
        _this.props.onDragStart();
      }
      _this.setState({
        dragged: true
      });

      // We've handled this event. Don't let anybody else see it.
      if (e.stopPropagation) e.stopPropagation();
      // Standard model
      else e.cancelBubble = true; // IE

      // Now prevent any default action.
      if (e.preventDefault) e.preventDefault();
      // Standard model
      else e.returnValue = false; // IE
    });
    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function (e) {
      var dragged = _this.state.dragged;
      var hide = _this.props.hide;

      // 非鼠标左键点击 || 不在组件点击或拖拽过程中 || 组件隐藏中 都不处理鼠标移动事件
      if (e.button !== 0 || !dragged || !!hide) {
        return;
      }
      var clientX = e.clientX,
        clientY = e.clientY;
      var _assertThisInitialize = _assertThisInitialized(_this),
        deltaX = _assertThisInitialize.deltaX,
        deltaY = _assertThisInitialize.deltaY;
      var node = _this.nodeRef.current;
      var dom = _this.getContainerDom();
      var scroll = getScrollOffsets(dom);
      var clientWidth = getClientWidth(dom);
      var clientHeight = getClientHeight(dom);
      var _node$getBoundingClie2 = node.getBoundingClientRect(),
        width = _node$getBoundingClie2.width,
        height = _node$getBoundingClie2.height;
      var left = clientX + scroll.x - deltaX;
      var top = clientY + scroll.y - deltaY;
      var right = clientWidth - left - width;
      var bottom = clientHeight - top - height;

      // boundary detection
      // left boundary
      if (right > clientWidth - width) {
        right = clientWidth - width;
      }
      // top boundary
      if (bottom > clientHeight - height) {
        bottom = clientHeight - height;
      }
      // right boundary
      if (right < 0) {
        right = 0;
      }
      // bottom boundary
      if (bottom < 0) {
        bottom = 0;
      }
      _this.setState({
        dragged: true,
        right: right - _this.defaultScrollBarSize,
        bottom: bottom
      }, function () {
        if (_this.props.onDrag) {
          _this.props.onDrag({
            right: right,
            bottom: bottom
          });
        }
      });
    });
    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function (e) {
      var dragged = _this.state.dragged;

      // 非组件左键点按之后的事件不处理
      if (dragged) {
        var interval = new Date().getTime() - _this.intervalStart;
        if (interval < 200 && e.target.id !== 'ui-mini-hide') {
          _this.props.onClick(e);
          _this.setState({
            dragged: false
          });
          return;
        }
        _this.setState({
          dragged: false
        }, function () {
          if (_this.props.onDragEnd) {
            _this.props.onDragEnd();
          }
        });
      }
    });
    var _props$position = props.position,
      position = _props$position === void 0 ? {} : _props$position;
    _this.intervalStart = 0;
    _this.nodeRef = /*#__PURE__*/React.createRef();
    _this.deltaX = 0;
    _this.deltaY = 0;
    _this.defaultScrollBarSize = getScrollBarSize();
    _this.state = {
      dragged: false,
      width: 0,
      bottom: position.bottom ? position.bottom : INIT_BOTTOM,
      right: position.right ? position.right : INIT_RIGHT
    };
    return _this;
  }
  _createClass(Draggable, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props$draggable = this.props.draggable,
        draggable = _this$props$draggable === void 0 ? true : _this$props$draggable;
      window.addEventListener('resize', this.handleResize, false);
      if (draggable) window.addEventListener('mousemove', this.handleMouseMove, false);
      window.addEventListener('mouseup', this.handleMouseUp, false);
      window.addEventListener('load', this.overlapDetection, false);
      var _this$nodeRef$current = this.nodeRef.current.getBoundingClientRect(),
        width = _this$nodeRef$current.width;
      this.setState({
        width: width
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this$props$draggable2 = this.props.draggable,
        draggable = _this$props$draggable2 === void 0 ? true : _this$props$draggable2;
      window.removeEventListener('load', this.overlapDetection, false);
      if (draggable) window.removeEventListener('mousemove', this.handleMouseMove, false);
      window.removeEventListener('mouseup', this.handleMouseUp, false);
      window.removeEventListener('resize', this.handleResize, false);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(preProps) {
      var preHide = preProps.hide;
      var hide = this.props.hide;

      // 隐藏到显示，贴右侧边
      if (preHide && !hide) {
        // eslint-disable-next-line react/no-did-update-set-state
        this.setState({
          right: INIT_RIGHT
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
        children = _this$props.children,
        hide = _this$props.hide,
        _this$props$style = _this$props.style,
        style = _this$props$style === void 0 ? {} : _this$props$style,
        prefix = _this$props.prefix,
        className = _this$props.className,
        id = _this$props.id,
        onMouseEnter = _this$props.onMouseEnter,
        onMouseLeave = _this$props.onMouseLeave;
      var _this$state = this.state,
        dragged = _this$state.dragged,
        width = _this$state.width,
        bottom = _this$state.bottom,
        right = _this$state.right;
      var containerStyle = _objectSpread({
        bottom: bottom,
        right: right
      }, style);
      var containerPrefix = "".concat(prefix, "-container");
      var containerClassName = classnames(containerPrefix, className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(containerPrefix, "-dragged"), dragged), "".concat(containerPrefix, "-hide"), hide), "".concat(containerPrefix, "-hide-not-dragged"), hide && !dragged));
      return /*#__PURE__*/_jsx("div", {
        id: id,
        ref: this.nodeRef,
        onMouseDown: this.handleMouseDown,
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
        style: hide ? _objectSpread(_objectSpread({}, containerStyle), {}, {
          right: -width / 1.5
        }) : containerStyle,
        className: containerClassName,
        children: children
      });
    }
  }]);
  return Draggable;
}(React.Component);
export default Draggable;