@react-awesome-query-builder-dev/ui
Version:
User-friendly query builder for React. Core React UI
463 lines (462 loc) • 20.1 kB
JavaScript
import _readOnlyError from "@babel/runtime/helpers/readOnlyError";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
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 _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 startsWith from "lodash/startsWith";
import GroupContainer from "../containers/GroupContainer";
import Draggable from "../containers/Draggable";
import classNames from "classnames";
import { Item } from "./Item";
import { GroupActions } from "./GroupActions";
import { WithConfirmFn, dummyFn, getRenderFromConfig } from "../utils";
import { useOnPropsChanged } from "../../utils/reactUtils";
var getFieldConfig = Utils.ConfigUtils.getFieldConfig;
var isEmptyGroupChildren = Utils.RuleUtils.isEmptyGroupChildren;
var _Utils$TreeUtils = Utils.TreeUtils,
getTotalReordableNodesCountInTree = _Utils$TreeUtils.getTotalReordableNodesCountInTree,
getTotalRulesCountInTree = _Utils$TreeUtils.getTotalRulesCountInTree;
var defaultPosition = "topRight";
export var BasicGroup = /*#__PURE__*/function (_Component) {
function BasicGroup(props) {
var _this;
_classCallCheck(this, BasicGroup);
_this = _callSuper(this, BasicGroup, [props]);
_this.childrenClassName = function () {
return "";
};
_this.renderBeforeActions = function () {
var BeforeActions = _this.BeforeActions;
if (BeforeActions == undefined) return null;
return /*#__PURE__*/React.createElement(BeforeActions, _extends({
key: "group-actions-before"
}, _this.props));
};
_this.renderAfterActions = function () {
var AfterActions = _this.AfterActions;
if (AfterActions == undefined) return null;
return /*#__PURE__*/React.createElement(AfterActions, _extends({
key: "group-actions-after"
}, _this.props));
};
useOnPropsChanged(_this);
_this.onPropsChanged(props);
_this.removeSelf = _this.removeSelf.bind(_this);
_this.setLock = _this.setLock.bind(_this);
_this.renderItem = _this.renderItem.bind(_this);
return _this;
}
_inherits(BasicGroup, _Component);
return _createClass(BasicGroup, [{
key: "onPropsChanged",
value: function onPropsChanged(nextProps) {
var _this2 = this;
var prevProps = this.props;
var configChanged = !this.Icon || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.config) !== (nextProps === null || nextProps === void 0 ? void 0 : nextProps.config);
if (configChanged) {
var config = nextProps.config;
var _config$settings = config.settings,
renderIcon = _config$settings.renderIcon,
renderConjs = _config$settings.renderConjs,
renderBeforeActions = _config$settings.renderBeforeActions,
renderAfterActions = _config$settings.renderAfterActions;
this.Icon = getRenderFromConfig(config, renderIcon);
this.Conjs = getRenderFromConfig(config, renderConjs);
this.BeforeActions = getRenderFromConfig(config, renderBeforeActions);
this.AfterActions = getRenderFromConfig(config, renderAfterActions);
}
this.doRemove = function () {
_this2.props.removeSelf();
};
}
}, {
key: "isGroupTopPosition",
value: function isGroupTopPosition() {
return startsWith(this.props.config.settings.groupActionsPosition || defaultPosition, "top");
}
}, {
key: "setLock",
value: function setLock(lock) {
this.props.setLock(lock);
}
}, {
key: "removeSelf",
value: function removeSelf() {
var _this$props = this.props,
confirmFn = _this$props.confirmFn,
config = _this$props.config;
var _config$settings2 = config.settings,
renderConfirm = _config$settings2.renderConfirm,
confirmOptions = _config$settings2.removeGroupConfirmOptions;
if (confirmOptions && !this.isEmptyCurrentGroup()) {
renderConfirm.call(config.ctx, _objectSpread(_objectSpread({}, confirmOptions), {}, {
onOk: this.doRemove,
onCancel: null,
confirmFn: confirmFn
}), config.ctx);
} else {
this.doRemove();
}
}
}, {
key: "isEmptyCurrentGroup",
value: function isEmptyCurrentGroup() {
var _this$props2 = this.props,
children1 = _this$props2.children1,
config = _this$props2.config;
return isEmptyGroupChildren(children1, config);
}
}, {
key: "showNot",
value: function showNot() {
var _this$props3 = this.props,
config = _this$props3.config,
parentField = _this$props3.parentField;
var showNot = config.settings.showNot;
if (parentField) {
var _ruleGroupFieldConfig;
var ruleGroupFieldConfig = getFieldConfig(config, parentField);
showNot = showNot && ((_ruleGroupFieldConfig = ruleGroupFieldConfig === null || ruleGroupFieldConfig === void 0 ? void 0 : ruleGroupFieldConfig.showNot) !== null && _ruleGroupFieldConfig !== void 0 ? _ruleGroupFieldConfig : true);
}
return showNot;
}
// show conjs for 2+ children?
}, {
key: "showConjs",
value: function showConjs() {
var config = this.props.config;
var forceShowConj = config.settings.forceShowConj;
var conjunctionOptions = this.conjunctionOptions();
var conjunctionCount = Object.keys(conjunctionOptions).length;
return conjunctionCount > 1 && !this.isOneChild() || this.showNot() || forceShowConj;
}
}, {
key: "isNoChildren",
value: function isNoChildren() {
var children1 = this.props.children1;
return children1 ? children1.size == 0 : true;
}
}, {
key: "isOneChild",
value: function isOneChild() {
var children1 = this.props.children1;
return children1 ? children1.size < 2 : true;
}
}, {
key: "renderChildrenWrapper",
value: function renderChildrenWrapper() {
var children1 = this.props.children1;
return children1 && /*#__PURE__*/React.createElement("div", {
key: "group-children",
className: classNames("group--children", !this.showConjs() ? "hide--conjs" : "", this.isOneChild() ? "hide--line" : "", this.isOneChild() ? "one--child" : "", this.childrenClassName())
}, this.renderChildren());
}
}, {
key: "renderHeaderWrapper",
value: function renderHeaderWrapper() {
var isGroupTopPosition = this.isGroupTopPosition();
return /*#__PURE__*/React.createElement("div", {
key: "group-header",
className: classNames("group--header", this.isOneChild() ? "one--child" : "", !this.showConjs() ? "hide--conjs" : "", this.isOneChild() ? "hide--line" : "", this.isNoChildren() ? "no--children" : "")
}, this.renderHeader(), isGroupTopPosition && this.renderBeforeActions(), isGroupTopPosition && this.renderActions(), isGroupTopPosition && this.renderAfterActions());
}
}, {
key: "renderFooterWrapper",
value: function renderFooterWrapper() {
var isGroupTopPosition = this.isGroupTopPosition();
return !isGroupTopPosition && /*#__PURE__*/React.createElement("div", {
key: "group-footer",
className: "group--footer"
}, this.renderBeforeActions(), this.renderActions(), this.renderAfterActions());
}
}, {
key: "renderActions",
value: function renderActions() {
var _this$props4 = this.props,
config = _this$props4.config,
addRule = _this$props4.addRule,
addGroup = _this$props4.addGroup,
isLocked = _this$props4.isLocked,
isTrueLocked = _this$props4.isTrueLocked,
id = _this$props4.id,
parentField = _this$props4.parentField;
return /*#__PURE__*/React.createElement(GroupActions, {
key: "group-actions",
config: config,
addRule: addRule,
addGroup: addGroup,
canAddGroup: this.canAddGroup(),
canAddRule: this.canAddRule(),
canDeleteGroup: this.canDeleteGroup(),
removeSelf: this.removeSelf,
setLock: this.setLock,
isLocked: isLocked,
isTrueLocked: isTrueLocked,
id: id,
parentField: parentField
});
}
}, {
key: "canAddGroup",
value: function canAddGroup() {
return this.props.allowFurtherNesting;
}
}, {
key: "canAddRule",
value: function canAddRule() {
var _this$props5 = this.props,
totalRulesCnt = _this$props5.totalRulesCnt,
isMaxNestingExceeded = _this$props5.isMaxNestingExceeded,
parentField = _this$props5.parentField;
var maxNumberOfRules = this.props.config.settings.maxNumberOfRules;
if (parentField) {
var ruleGroupFieldConfig = getFieldConfig(this.props.config, parentField);
maxNumberOfRules = ruleGroupFieldConfig.maxNumberOfRules;
}
if (isMaxNestingExceeded) {
return false;
}
if (maxNumberOfRules) {
return totalRulesCnt < maxNumberOfRules;
}
return true;
}
}, {
key: "canDeleteGroup",
value: function canDeleteGroup() {
return !this.props.isRoot;
}
}, {
key: "renderChildren",
value: function renderChildren() {
var children1 = this.props.children1;
return children1 ? children1.valueSeq().toArray().map(this.renderItem) : null;
}
}, {
key: "renderItem",
value: function renderItem(item) {
if (!item) {
return undefined;
}
var props = this.props;
var config = props.config,
actions = props.actions,
onDragStart = props.onDragStart,
isLocked = props.isLocked,
parentField = props.parentField,
parentFieldPathSize = props.parentFieldPathSize,
parentFieldCanReorder = props.parentFieldCanReorder;
var isRuleGroup = item.get("type") == "group" && item.getIn(["properties", "field"]) != null;
var type = isRuleGroup ? "rule_group" : item.get("type");
return /*#__PURE__*/React.createElement(Item, _extends({
key: item.get("id"),
id: item.get("id"),
groupId: props.id,
path: item.get("path"),
type: type,
properties: item.get("properties"),
config: config,
actions: actions,
children1: item.get("children1"),
parentField: parentField,
parentFieldPathSize: parentFieldPathSize,
parentFieldCanReorder: parentFieldCanReorder,
reordableNodesCnt: this.reordableNodesCntForItem(item),
totalRulesCnt: this.totalRulesCntForItem(item),
parentReordableNodesCnt: this.reordableNodesCnt(),
onDragStart: onDragStart,
isDraggingTempo: this.props.isDraggingTempo,
isParentLocked: isLocked
}, this.extraPropsForItem(item)));
}
}, {
key: "extraPropsForItem",
value: function extraPropsForItem(_item) {
return {};
}
}, {
key: "reordableNodesCnt",
value: function reordableNodesCnt() {
if (this.props.isLocked) return 0;
return this.props.reordableNodesCnt;
}
}, {
key: "totalRulesCntForItem",
value: function totalRulesCntForItem(item) {
if (item.get("type") === "rule_group") {
return getTotalRulesCountInTree(item);
}
return this.props.totalRulesCnt;
}
}, {
key: "reordableNodesCntForItem",
value: function reordableNodesCntForItem(_item) {
if (this.props.isLocked) return 0;
return this.reordableNodesCnt();
}
}, {
key: "showDragIcon",
value: function showDragIcon() {
var _this$props6 = this.props,
config = _this$props6.config,
isRoot = _this$props6.isRoot,
isLocked = _this$props6.isLocked,
parentField = _this$props6.parentField,
parentFieldCanReorder = _this$props6.parentFieldCanReorder;
var reordableNodesCnt = this.reordableNodesCnt();
var canReorder = config.settings.canReorder && !isRoot && reordableNodesCnt > 1 && !isLocked;
if (parentField) {
canReorder = canReorder && parentFieldCanReorder;
}
return canReorder;
}
}, {
key: "renderDrag",
value: function renderDrag() {
var handleDraggerMouseDown = this.props.handleDraggerMouseDown;
var Icon = this.Icon;
var icon = /*#__PURE__*/React.createElement(Icon, {
type: "drag"
});
return this.showDragIcon() && /*#__PURE__*/React.createElement("div", {
key: "group-drag-icon",
onMouseDown: handleDraggerMouseDown,
className: "qb-drag-handler group--drag-handler"
}, icon);
}
}, {
key: "conjunctionOptions",
value: function conjunctionOptions() {
var _this$props7 = this.props,
parentField = _this$props7.parentField,
conjunctionOptions = _this$props7.conjunctionOptions;
// Note: if current group is a group inside rule-group, we should respect config of parent rule-group
return parentField ? this.conjunctionOptionsForGroupField(parentField) : conjunctionOptions;
}
}, {
key: "conjunctionOptionsForGroupField",
value: function conjunctionOptionsForGroupField() {
var groupField = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var _this$props8 = this.props,
config = _this$props8.config,
conjunctionOptions = _this$props8.conjunctionOptions;
var groupFieldConfig = getFieldConfig(config, groupField);
if (groupFieldConfig !== null && groupFieldConfig !== void 0 && groupFieldConfig.conjunctions) {
var filtered = {};
var _iterator = _createForOfIteratorHelper(groupFieldConfig.conjunctions),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var k = _step.value;
var options = conjunctionOptions[k];
if (options) {
filtered[k] = options;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return filtered;
}
return conjunctionOptions;
}
}, {
key: "renderConjs",
value: function renderConjs() {
var _this$props9 = this.props,
config = _this$props9.config,
children1 = _this$props9.children1,
id = _this$props9.id,
selectedConjunction = _this$props9.selectedConjunction,
setConjunction = _this$props9.setConjunction,
not = _this$props9.not,
setNot = _this$props9.setNot,
isLocked = _this$props9.isLocked;
var _config$settings3 = config.settings,
immutableGroupsMode = _config$settings3.immutableGroupsMode,
notLabel = _config$settings3.notLabel;
var conjunctionOptions = this.conjunctionOptions();
if (!this.showConjs()) return null;
if (!children1 || !children1.size) return null;
var renderProps = {
disabled: this.isOneChild(),
readonly: immutableGroupsMode || isLocked,
selectedConjunction: selectedConjunction,
setConjunction: immutableGroupsMode ? dummyFn : setConjunction,
conjunctionOptions: conjunctionOptions,
config: config,
not: not || false,
id: id,
setNot: immutableGroupsMode ? dummyFn : setNot,
notLabel: notLabel,
showNot: this.showNot(),
isLocked: isLocked
};
var Conjs = this.Conjs;
return /*#__PURE__*/React.createElement(Conjs, _extends({
key: "group-conjs"
}, renderProps));
}
}, {
key: "renderHeader",
value: function renderHeader() {
return /*#__PURE__*/React.createElement("div", {
key: "group-conjunctions",
className: "group--conjunctions"
}, this.renderConjs(), this.renderDrag());
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderHeaderWrapper(), this.renderChildrenWrapper(), this.renderFooterWrapper());
}
}]);
}(Component);
BasicGroup.propTypes = {
reordableNodesCnt: PropTypes.number,
conjunctionOptions: PropTypes.object.isRequired,
allowFurtherNesting: PropTypes.bool.isRequired,
isMaxNestingExceeded: PropTypes.bool,
isRoot: PropTypes.bool.isRequired,
not: PropTypes.bool,
selectedConjunction: PropTypes.string,
config: PropTypes.object.isRequired,
id: PropTypes.string.isRequired,
groupId: PropTypes.string,
path: PropTypes.any,
//instanceOf(Immutable.List)
children1: PropTypes.any,
//instanceOf(Immutable.OrderedMap)
isDraggingMe: PropTypes.bool,
isDraggingTempo: PropTypes.bool,
isLocked: PropTypes.bool,
isTrueLocked: PropTypes.bool,
parentField: PropTypes.string,
//from RuleGroup
//actions
handleDraggerMouseDown: PropTypes.func,
onDragStart: PropTypes.func,
addRule: PropTypes.func.isRequired,
addGroup: PropTypes.func.isRequired,
removeSelf: PropTypes.func.isRequired,
setConjunction: PropTypes.func.isRequired,
setNot: PropTypes.func.isRequired,
setLock: PropTypes.func.isRequired,
actions: PropTypes.object.isRequired
};
export default GroupContainer(Draggable("group")(WithConfirmFn(BasicGroup)), "group");