@react-awesome-query-builder/ui/esm/components/containers/Draggable.js

User-friendly query builder for React. Core React UI

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _excluded = ["isDraggingTempo", "isDraggingMe", "dragging"];
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { _isReorderingTree } from "./SortableContainer";
import classNames from "classnames";
export default (function (className) {
  return function (GroupOrRule) {
    var _Draggable;
    return _Draggable = /*#__PURE__*/function (_PureComponent) {
      function Draggable(props) {
        var _this;
        _classCallCheck(this, Draggable);
        _this = _callSuper(this, Draggable, [props]);
        _this.handleDraggerMouseDown = function (e) {
          var nodeId = _this.props.id;
          var dom = _this.wrapper.current;
          if (_this.props.onDragStart) {
            _this.props.onDragStart(nodeId, dom, e);
          }
        };
        _this.wrapper = /*#__PURE__*/React.createRef();
        return _this;
      }
      _inherits(Draggable, _PureComponent);
      return _createClass(Draggable, [{
        key: "render",
        value: function render() {
          var _this$props = this.props,
            isDraggingTempo = _this$props.isDraggingTempo,
            isDraggingMe = _this$props.isDraggingMe,
            dragging = _this$props.dragging,
            otherProps = _objectWithoutProperties(_this$props, _excluded);
          var isTrueLocked = otherProps.isTrueLocked;
          var styles = {};
          if (isDraggingMe && isDraggingTempo) {
            if (_isReorderingTree) {
              // don't apply old styles for dragging tempo during reorder
            } else {
              styles = {
                top: dragging.y,
                left: dragging.x,
                width: dragging.w
              };
            }
          }
          var cn = classNames(className, "group-or-rule", isDraggingMe && isDraggingTempo ? "qb-draggable" : null, isDraggingMe && !isDraggingTempo ? "qb-placeholder" : null, isTrueLocked ? "locked" : null);
          return /*#__PURE__*/React.createElement("div", {
            className: cn,
            style: styles,
            ref: this.wrapper,
            "data-id": this.props.id
          }, /*#__PURE__*/React.createElement(GroupOrRule, _extends({
            handleDraggerMouseDown: this.handleDraggerMouseDown,
            isDraggingMe: isDraggingMe,
            isDraggingTempo: isDraggingTempo
          }, otherProps)));
        }
      }]);
    }(PureComponent), _Draggable.propTypes = {
      isDraggingTempo: PropTypes.bool,
      isDraggingMe: PropTypes.bool,
      onDragStart: PropTypes.func,
      dragging: PropTypes.object,
      //{id, x, y, w, h}
      isLocked: PropTypes.bool,
      isTrueLocked: PropTypes.bool
    }, _Draggable;
  };
});