@react-awesome-query-builder/ui
Version:
User-friendly query builder for React. Core React UI
491 lines (489 loc) • 23 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.BasicGroup = void 0;
var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _core = require("@react-awesome-query-builder/core");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _startsWith = _interopRequireDefault(require("lodash/startsWith"));
var _GroupContainer = _interopRequireDefault(require("../containers/GroupContainer"));
var _Draggable = _interopRequireDefault(require("../containers/Draggable"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Item = require("./Item");
var _GroupActions = require("./GroupActions");
var _utils = require("../utils");
var _reactUtils = require("../../utils/reactUtils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
var getFieldConfig = _core.Utils.ConfigUtils.getFieldConfig;
var isEmptyGroupChildren = _core.Utils.RuleUtils.isEmptyGroupChildren;
var _Utils$TreeUtils = _core.Utils.TreeUtils,
getTotalReordableNodesCountInTree = _Utils$TreeUtils.getTotalReordableNodesCountInTree,
getTotalRulesCountInTree = _Utils$TreeUtils.getTotalRulesCountInTree;
var defaultPosition = "topRight";
var BasicGroup = exports.BasicGroup = /*#__PURE__*/function (_Component) {
function BasicGroup(props) {
var _this;
(0, _classCallCheck2["default"])(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["default"].createElement(BeforeActions, (0, _extends2["default"])({
key: "group-actions-before"
}, _this.props));
};
_this.renderAfterActions = function () {
var AfterActions = _this.AfterActions;
if (AfterActions == undefined) return null;
return /*#__PURE__*/_react["default"].createElement(AfterActions, (0, _extends2["default"])({
key: "group-actions-after"
}, _this.props));
};
(0, _reactUtils.useOnPropsChanged)(_this);
_this.onPropsChanged(props);
_this.removeSelf = _this.removeSelf.bind(_this);
_this.removeGroupChildren = _this.removeGroupChildren.bind(_this);
_this.setLock = _this.setLock.bind(_this);
_this.renderItem = _this.renderItem.bind(_this);
return _this;
}
(0, _inherits2["default"])(BasicGroup, _Component);
return (0, _createClass2["default"])(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 = (0, _utils.getRenderFromConfig)(config, renderIcon);
this.Conjs = (0, _utils.getRenderFromConfig)(config, renderConjs);
this.BeforeActions = (0, _utils.getRenderFromConfig)(config, renderBeforeActions);
this.AfterActions = (0, _utils.getRenderFromConfig)(config, renderAfterActions);
}
this.doRemove = function () {
_this2.props.removeSelf();
};
}
}, {
key: "isGroupTopPosition",
value: function isGroupTopPosition() {
return (0, _startsWith["default"])(this.props.config.settings.groupActionsPosition || defaultPosition, "top");
}
}, {
key: "setLock",
value: function setLock(lock) {
this.props.setLock(lock);
}
}, {
key: "removeGroupChildren",
value: function removeGroupChildren() {
this.props.removeGroupChildren();
}
}, {
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["default"].createElement("div", {
key: "group-children",
className: (0, _classnames["default"])("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["default"].createElement("div", {
key: "group-header",
className: (0, _classnames["default"])("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["default"].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["default"].createElement(_GroupActions.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["default"].createElement(_Item.Item, (0, _extends2["default"])({
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 _this$props7 = this.props,
handleDraggerMouseDown = _this$props7.handleDraggerMouseDown,
config = _this$props7.config,
isLocked = _this$props7.isLocked;
var Icon = this.Icon;
var icon = /*#__PURE__*/_react["default"].createElement(Icon, {
type: "drag",
readonly: isLocked,
config: config
});
return this.showDragIcon() && /*#__PURE__*/_react["default"].createElement("div", {
key: "group-drag-icon",
onMouseDown: handleDraggerMouseDown,
className: "qb-drag-handler group--drag-handler"
}, icon);
}
}, {
key: "conjunctionOptions",
value: function conjunctionOptions() {
var _this$props8 = this.props,
parentField = _this$props8.parentField,
conjunctionOptions = _this$props8.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$props9 = this.props,
config = _this$props9.config,
conjunctionOptions = _this$props9.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: "canRenderConjs",
value: function canRenderConjs() {
var children1 = this.props.children1;
if (!this.showConjs()) return false;
if (!children1 || !children1.size) return false;
return true;
}
}, {
key: "renderConjs",
value: function renderConjs() {
var _this$props10 = this.props,
config = _this$props10.config,
id = _this$props10.id,
selectedConjunction = _this$props10.selectedConjunction,
setConjunction = _this$props10.setConjunction,
not = _this$props10.not,
setNot = _this$props10.setNot,
isLocked = _this$props10.isLocked;
var _config$settings3 = config.settings,
immutableGroupsMode = _config$settings3.immutableGroupsMode,
notLabel = _config$settings3.notLabel;
var conjunctionOptions = this.conjunctionOptions();
if (!this.canRenderConjs()) return null;
var renderProps = {
disabled: this.isOneChild(),
readonly: immutableGroupsMode || isLocked,
selectedConjunction: selectedConjunction,
setConjunction: immutableGroupsMode ? _utils.dummyFn : setConjunction,
conjunctionOptions: conjunctionOptions,
config: config,
not: not || false,
id: id,
setNot: immutableGroupsMode ? _utils.dummyFn : setNot,
notLabel: notLabel,
showNot: this.showNot(),
isLocked: isLocked
};
var Conjs = this.Conjs;
return /*#__PURE__*/_react["default"].createElement(Conjs, (0, _extends2["default"])({
key: "group-conjs"
}, renderProps));
}
}, {
key: "renderHeader",
value: function renderHeader() {
return /*#__PURE__*/_react["default"].createElement("div", {
key: "group-conjunctions",
className: "group--conjunctions"
}, this.renderConjs(), this.renderDrag());
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.renderHeaderWrapper(), this.renderChildrenWrapper(), this.renderFooterWrapper());
}
}]);
}(_react.Component);
BasicGroup.propTypes = {
reordableNodesCnt: _propTypes["default"].number,
conjunctionOptions: _propTypes["default"].object.isRequired,
allowFurtherNesting: _propTypes["default"].bool.isRequired,
isMaxNestingExceeded: _propTypes["default"].bool,
isRoot: _propTypes["default"].bool.isRequired,
not: _propTypes["default"].bool,
selectedConjunction: _propTypes["default"].string,
config: _propTypes["default"].object.isRequired,
id: _propTypes["default"].string.isRequired,
groupId: _propTypes["default"].string,
path: _propTypes["default"].any,
//instanceOf(Immutable.List)
children1: _propTypes["default"].any,
//instanceOf(Immutable.OrderedMap)
isDraggingMe: _propTypes["default"].bool,
isDraggingTempo: _propTypes["default"].bool,
isLocked: _propTypes["default"].bool,
isTrueLocked: _propTypes["default"].bool,
parentField: _propTypes["default"].string,
//from RuleGroup
//actions
handleDraggerMouseDown: _propTypes["default"].func,
onDragStart: _propTypes["default"].func,
addRule: _propTypes["default"].func.isRequired,
addGroup: _propTypes["default"].func.isRequired,
removeSelf: _propTypes["default"].func.isRequired,
removeGroupChildren: _propTypes["default"].func.isRequired,
setConjunction: _propTypes["default"].func.isRequired,
setNot: _propTypes["default"].func.isRequired,
setLock: _propTypes["default"].func.isRequired,
actions: _propTypes["default"].object.isRequired
};
var _default = exports["default"] = (0, _GroupContainer["default"])((0, _Draggable["default"])("group simple_group")((0, _utils.WithConfirmFn)(BasicGroup)), "group");