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

User-friendly query builder for React. Core React UI

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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";
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, { Component } from "react";
import { Utils } from "@react-awesome-query-builder-dev/core";
import PropTypes from "prop-types";
import mapValues from "lodash/mapValues";
import context from "../../stores/context";
import { pureShouldComponentUpdate, useOnPropsChanged } from "../../utils/reactUtils";
import classNames from "classnames";
import { connect } from "react-redux";
var defaultGroupConjunction = Utils.DefaultUtils.defaultGroupConjunction;
var getFieldConfig = Utils.ConfigUtils.getFieldConfig;
var createGroupContainer = function createGroupContainer(Group, itemType) {
  var _GroupContainer;
  return _GroupContainer = /*#__PURE__*/function (_Component) {
    function GroupContainer(_props) {
      var _this;
      _classCallCheck(this, GroupContainer);
      _this = _callSuper(this, GroupContainer, [_props]);
      _this._selectedConjunction = function (props) {
        props = props || _this.props;
        return props.conjunction || defaultGroupConjunction(props.config, props.field);
      };
      _this.setConjunction = function () {
        var conj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
        _this.props.actions.setConjunction(_this.props.path, conj);
      };
      _this.setNot = function () {
        var not = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
        _this.props.actions.setNot(_this.props.path, not);
      };
      _this.setLock = function () {
        var lock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
        _this.props.actions.setLock(_this.props.path, lock);
      };
      _this.dummyFn = function () {};
      _this.removeSelf = function () {
        _this.props.actions.removeGroup(_this.props.path);
      };
      _this.addGroup = function () {
        var parentRuleGroupField = itemType == "rule_group" ? _this.props.field : _this.props.parentField;
        _this.props.actions.addGroup(_this.props.path, undefined, undefined, parentRuleGroupField);
      };
      _this.addCaseGroup = function () {
        _this.props.actions.addCaseGroup(_this.props.path);
      };
      _this.addDefaultCaseGroup = function () {
        _this.props.actions.addDefaultCaseGroup(_this.props.path);
      };
      _this.addRule = function () {
        var parentRuleGroupField = itemType == "rule_group" ? _this.props.field : _this.props.parentField;
        _this.props.actions.addRule(_this.props.path, undefined, undefined, undefined, parentRuleGroupField);
      };
      // for RuleGroup
      _this.setField = function (field, asyncListValues, _meta) {
        _this.props.actions.setField(_this.props.path, field, asyncListValues, _meta);
      };
      // for RuleGroupExt
      _this.setOperator = function (operator) {
        _this.props.actions.setOperator(_this.props.path, operator);
      };
      // for RuleGroupExt, CaseGroup
      _this.setValue = function (delta, value, type, asyncListValues, _meta) {
        _this.props.actions.setValue(_this.props.path, delta, value, type, asyncListValues, _meta);
      };
      _this.setValueSrc = function (delta, srcKey, _meta) {
        _this.props.actions.setValueSrc(_this.props.path, delta, srcKey, _meta);
      };
      // can be used for both LHS and LHS
      _this.setFuncValue = function (delta, parentFuncs, argKey, value, type, asyncListValues, _meta) {
        _this.props.actions.setFuncValue(_this.props.path, delta, parentFuncs, argKey, value, type, asyncListValues, _meta);
      };
      _this.pureShouldComponentUpdate = pureShouldComponentUpdate(_this);
      useOnPropsChanged(_this);
      _this.selectedConjunction = _this._selectedConjunction(_props);
      _this.conjunctionOptions = _this._getConjunctionOptions(_props);
      _this.dummyFn.isDummyFn = true;
      return _this;
    }
    _inherits(GroupContainer, _Component);
    return _createClass(GroupContainer, [{
      key: "shouldComponentUpdate",
      value: function shouldComponentUpdate(nextProps, nextState) {
        var prevProps = this.props;
        var prevState = this.state;
        var should = this.pureShouldComponentUpdate(nextProps, nextState);
        if (should) {
          if (prevState == nextState && prevProps != nextProps) {
            var draggingId = nextProps.dragging.id || prevProps.dragging.id;
            var isDraggingMe = draggingId == nextProps.id;
            var chs = [];
            for (var k in nextProps) {
              var changed = nextProps[k] != prevProps[k];
              if (k == "dragging" && !isDraggingMe) {
                changed = false; //dragging another item -> ignore
              }
              if (changed) {
                chs.push(k);
              }
            }
            if (!chs.length) should = false;
          }
        }
        return should;
      }
    }, {
      key: "onPropsChanged",
      value: function onPropsChanged(nextProps) {
        var config = nextProps.config,
          id = nextProps.id,
          conjunction = nextProps.conjunction;
        var oldConfig = this.props.config;
        var oldConjunction = this.props.conjunction;
        if (oldConfig != config || oldConjunction != conjunction) {
          this.selectedConjunction = this._selectedConjunction(nextProps);
          this.conjunctionOptions = this._getConjunctionOptions(nextProps);
        }
      }
    }, {
      key: "_getConjunctionOptions",
      value: function _getConjunctionOptions(props) {
        var _this2 = this;
        return mapValues(props.config.conjunctions, function (item, index) {
          return {
            id: "conjunction-".concat(props.id, "-").concat(index),
            name: "conjunction[".concat(props.id, "]"),
            key: index,
            label: item.label,
            checked: index === _this2._selectedConjunction(props)
          };
        });
      }
    }, {
      key: "render",
      value: function render() {
        var showErrorMessage = this.props.config.settings.showErrorMessage;
        var isDraggingMe = this.props.dragging.id == this.props.id;
        var currentNesting = this.props.path.size;
        var maxNesting = this.props.config.settings.maxNesting;
        var isRoot = currentNesting == 1;
        if (this.props.parentField && this.props.parentFieldPathSize) {
          // inside rule-group
          var ruleGroupFieldConfig = getFieldConfig(this.props.config, this.props.parentField);
          currentNesting = this.props.path.size - this.props.parentFieldPathSize + 1;
          maxNesting = ruleGroupFieldConfig === null || ruleGroupFieldConfig === void 0 ? void 0 : ruleGroupFieldConfig.maxNesting;
          isRoot = false;
        } else if (this.props.field) {
          // it is rule-group
          var _ruleGroupFieldConfig = getFieldConfig(this.props.config, this.props.field);
          currentNesting = 1;
          maxNesting = _ruleGroupFieldConfig === null || _ruleGroupFieldConfig === void 0 ? void 0 : _ruleGroupFieldConfig.maxNesting;
          isRoot = false;
        }
        var isInDraggingTempo = !isDraggingMe && this.props.isDraggingTempo;
        var fieldType = this.props.fieldType || null;
        var valueError = this.props.valueError;
        var oneError = _toConsumableArray((valueError === null || valueError === void 0 ? void 0 : valueError.toArray()) || []).filter(function (e) {
          return !!e;
        }).shift() || null;
        var hasError = oneError != null && showErrorMessage;

        // Don't allow nesting further than the maximum configured depth and don't
        // allow removal of the root group.
        var allowFurtherNesting = typeof maxNesting === "undefined" || currentNesting < maxNesting;
        var isMaxNestingExceeded = maxNesting && currentNesting > maxNesting;
        return /*#__PURE__*/React.createElement("div", {
          className: classNames("group-or-rule-container", "group-container", hasError ? "group-with-error" : null),
          "data-id": this.props.id
        }, [isDraggingMe ? /*#__PURE__*/React.createElement(Group, {
          key: "dragging",
          id: this.props.id,
          groupId: this.props.groupId,
          isDraggingMe: true,
          isDraggingTempo: true,
          dragging: this.props.dragging,
          isRoot: isRoot,
          lev: this.props.path.size - 1,
          allowFurtherNesting: allowFurtherNesting,
          isMaxNestingExceeded: isMaxNestingExceeded,
          conjunctionOptions: this.conjunctionOptions,
          not: this.props.not,
          selectedConjunction: this.selectedConjunction,
          setConjunction: this.dummyFn,
          setNot: this.dummyFn,
          setLock: this.dummyFn,
          removeSelf: this.dummyFn,
          addGroup: this.dummyFn,
          addCaseGroup: this.dummyFn,
          addDefaultCaseGroup: this.dummyFn,
          addRule: this.dummyFn,
          setField: this.dummyFn,
          setFuncValue: this.dummyFn,
          setOperator: this.dummyFn,
          setValue: this.dummyFn,
          setValueSrc: this.dummyFn,
          value: this.props.value || null,
          valueError: this.props.valueError || null,
          valueSrc: this.props.valueSrc || null,
          config: this.props.config,
          children1: this.props.children1,
          actions: this.props.actions,
          reordableNodesCnt: this.props.reordableNodesCnt,
          totalRulesCnt: this.props.totalRulesCnt,
          selectedField: this.props.field || null,
          selectedFieldSrc: this.props.fieldSrc || "field",
          selectedFieldType: fieldType,
          parentField: this.props.parentField || null,
          parentFieldPathSize: this.props.parentFieldPathSize,
          parentFieldCanReorder: this.props.parentFieldCanReorder,
          selectedOperator: this.props.operator || null,
          isLocked: this.props.isLocked,
          isTrueLocked: this.props.isTrueLocked,
          parentReordableNodesCnt: this.props.parentReordableNodesCnt
        }) : null, /*#__PURE__*/React.createElement(Group, {
          key: this.props.id,
          id: this.props.id,
          groupId: this.props.groupId,
          isDraggingMe: isDraggingMe,
          isDraggingTempo: isInDraggingTempo,
          onDragStart: this.props.onDragStart,
          isRoot: isRoot,
          lev: this.props.path.size - 1,
          allowFurtherNesting: allowFurtherNesting,
          isMaxNestingExceeded: isMaxNestingExceeded,
          conjunctionOptions: this.conjunctionOptions,
          not: this.props.not,
          selectedConjunction: this.selectedConjunction,
          setConjunction: isInDraggingTempo ? this.dummyFn : this.setConjunction,
          setNot: isInDraggingTempo ? this.dummyFn : this.setNot,
          setLock: isInDraggingTempo ? this.dummyFn : this.setLock,
          removeSelf: isInDraggingTempo ? this.dummyFn : this.removeSelf,
          addGroup: isInDraggingTempo ? this.dummyFn : this.addGroup,
          addCaseGroup: isInDraggingTempo ? this.dummyFn : this.addCaseGroup,
          addDefaultCaseGroup: isInDraggingTempo ? this.dummyFn : this.addDefaultCaseGroup,
          addRule: isInDraggingTempo ? this.dummyFn : this.addRule,
          setField: isInDraggingTempo ? this.dummyFn : this.setField,
          setFuncValue: isInDraggingTempo ? this.dummyFn : this.setFuncValue,
          setOperator: isInDraggingTempo ? this.dummyFn : this.setOperator,
          setValue: isInDraggingTempo ? this.dummyFn : this.setValue,
          setValueSrc: isInDraggingTempo ? this.dummyFn : this.setValueSrc,
          value: this.props.value || null,
          valueError: this.props.valueError || null,
          valueSrc: this.props.valueSrc || null,
          config: this.props.config,
          children1: this.props.children1,
          actions: this.props.actions,
          reordableNodesCnt: this.props.reordableNodesCnt,
          totalRulesCnt: this.props.totalRulesCnt,
          selectedField: this.props.field || null,
          selectedFieldSrc: this.props.fieldSrc || "field",
          selectedFieldType: fieldType,
          parentField: this.props.parentField || null,
          parentFieldPathSize: this.props.parentFieldPathSize,
          parentFieldCanReorder: this.props.parentFieldCanReorder,
          selectedOperator: this.props.operator || null,
          isLocked: this.props.isLocked,
          isTrueLocked: this.props.isTrueLocked,
          parentReordableNodesCnt: this.props.parentReordableNodesCnt
        })]);
      }
    }]);
  }(Component), _GroupContainer.propTypes = {
    config: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
    //{setConjunction: Function, removeGroup, addGroup, addRule, ...}
    path: PropTypes.any.isRequired,
    //instanceOf(Immutable.List)
    id: PropTypes.string.isRequired,
    groupId: PropTypes.string,
    not: PropTypes.bool,
    conjunction: PropTypes.string,
    children1: PropTypes.any,
    //instanceOf(Immutable.OrderedMap)
    onDragStart: PropTypes.func,
    reordableNodesCnt: PropTypes.number,
    field: PropTypes.any,
    // for RuleGroup
    fieldSrc: PropTypes.string,
    // for RuleGroup
    fieldType: PropTypes.string,
    // for RuleGroup
    parentField: PropTypes.string,
    //from RuleGroup
    value: PropTypes.any,
    // for RuleGroup, CaseGroup
    valueSrc: PropTypes.any,
    valueError: PropTypes.any,
    isLocked: PropTypes.bool,
    isTrueLocked: PropTypes.bool,
    //connected:
    dragging: PropTypes.object,
    //{id, x, y, w, h}
    isDraggingTempo: PropTypes.bool
  }, _GroupContainer;
};
export default (function (Group, itemType) {
  var ConnectedGroupContainer = connect(function (state) {
    return {
      dragging: state.dragging
    };
  }, null, null, {
    context: context
  })(createGroupContainer(Group, itemType));
  ConnectedGroupContainer.displayName = "ConnectedGroupContainer";
  return ConnectedGroupContainer;
});