@react-awesome-query-builder/ui
Version:
User-friendly query builder for React. Core React UI
252 lines • 11.2 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
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; })(); }
function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
import React from "react";
import PropTypes from "prop-types";
import GroupContainer from "../containers/GroupContainer";
import Draggable from "../containers/Draggable";
import { BasicGroup } from "./Group";
import { GroupActions } from "./GroupActions";
import { useOnPropsChanged } from "../../utils/reactUtils";
import { Col, dummyFn, WithConfirmFn, getRenderFromConfig } from "../utils";
import Widget from "../rule/Widget";
import classNames from "classnames";
var CaseGroup = /*#__PURE__*/function (_BasicGroup) {
function CaseGroup(props) {
var _this;
_classCallCheck(this, CaseGroup);
_this = _callSuper(this, CaseGroup, [props]);
_this.childrenClassName = function () {
return "case_group--children";
};
_this.renderFooterWrapper = function () {
return null;
};
return _this;
}
_inherits(CaseGroup, _BasicGroup);
return _createClass(CaseGroup, [{
key: "onPropsChanged",
value: function onPropsChanged(nextProps) {
var prevProps = this.props;
var configChanged = !this.renderBeforeCaseValue || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.config) !== (nextProps === null || nextProps === void 0 ? void 0 : nextProps.config);
_superPropGet(CaseGroup, "onPropsChanged", this, 3)([nextProps]);
if (configChanged) {
var config = nextProps.config;
var _config$settings = config.settings,
renderBeforeCaseValue = _config$settings.renderBeforeCaseValue,
renderAfterCaseValue = _config$settings.renderAfterCaseValue,
renderRuleError = _config$settings.renderRuleError;
this.BeforeCaseValue = getRenderFromConfig(config, renderBeforeCaseValue);
this.AfterCaseValue = getRenderFromConfig(config, renderAfterCaseValue);
this.RuleError = getRenderFromConfig(config, renderRuleError);
}
}
}, {
key: "isDefaultCase",
value: function isDefaultCase() {
return this.props.children1 == undefined;
}
}, {
key: "reordableNodesCnt",
value: function reordableNodesCnt() {
// `parentReordableNodesCnt` is number of cases to reorder
return this.props.parentReordableNodesCnt;
}
}, {
key: "reordableNodesCntForItem",
value: function reordableNodesCntForItem(_item) {
// `reordableNodesCnt` is number of nodes is current case
if (this.props.isLocked) return 0;
return this.props.reordableNodesCnt;
}
}, {
key: "totalRulesCntForItem",
value: function totalRulesCntForItem(_item) {
// `totalRulesCnt` is number of nodes is current case
return this.props.totalRulesCnt;
}
}, {
key: "showDragIcon",
value: function showDragIcon() {
// default impl of `showDragIcon()` uses `this.reordableNodesCnt()`
if (this.isDefaultCase()) return false;
return _superPropGet(CaseGroup, "showDragIcon", this, 3)([]);
}
}, {
key: "renderHeaderWrapper",
value: function renderHeaderWrapper() {
return /*#__PURE__*/React.createElement("div", {
key: "group-header",
className: classNames("group--header", this.isOneChild() ? "one--child" : "", this.isOneChild() ? "hide--line" : "", this.isNoChildren() ? "no--children" : "", this.showDragIcon() ? "with--drag" : "hide--drag", this.showConjs() && (!this.isOneChild() || this.showNot()) ? "with--conjs" : "hide--conjs")
}, this.renderHeaderLeft(), this.renderHeaderCenter(), this.renderActions());
}
}, {
key: "renderChildrenWrapper",
value: function renderChildrenWrapper() {
if (this.isDefaultCase()) return null;
// body has 2 columns: condition & value
return /*#__PURE__*/React.createElement("div", {
className: "case_group--body"
}, this.renderCondition(), this.renderBeforeValue(), this.renderValue(), this.renderAfterValue());
}
}, {
key: "renderHeaderLeft",
value: function renderHeaderLeft() {
if (this.isDefaultCase()) {
var defaultCaseLabel = this.props.config.settings.defaultCaseLabel;
return defaultCaseLabel || "";
}
// default impl:
return /*#__PURE__*/React.createElement("div", {
className: "group--conjunctions"
}, this.renderConjs(), this.renderDrag(), this.renderError());
}
}, {
key: "renderCondition",
value: function renderCondition() {
if (this.isDefaultCase()) return null;
return _superPropGet(CaseGroup, "renderChildrenWrapper", this, 3)([]);
}
}, {
key: "renderHeaderCenter",
value: function renderHeaderCenter() {
if (this.isDefaultCase()) {
return /*#__PURE__*/React.createElement("div", null, this.renderValue(), this.renderError());
}
return null;
}
}, {
key: "canAddGroup",
value: function canAddGroup() {
if (this.isDefaultCase()) return false;
return _superPropGet(CaseGroup, "canAddGroup", this, 3)([]);
}
}, {
key: "canAddRule",
value: function canAddRule() {
if (this.isDefaultCase()) return false;
return _superPropGet(CaseGroup, "canAddRule", this, 3)([]);
}
}, {
key: "renderBeforeValue",
value: function renderBeforeValue() {
var BeforeCaseValue = this.BeforeCaseValue;
if (BeforeCaseValue == undefined) return null;
return /*#__PURE__*/React.createElement(BeforeCaseValue, _extends({
key: "values-before"
}, this.props));
}
}, {
key: "renderAfterValue",
value: function renderAfterValue() {
var AfterCaseValue = this.AfterCaseValue;
if (AfterCaseValue == undefined) return null;
return /*#__PURE__*/React.createElement(AfterCaseValue, _extends({
key: "values-after"
}, this.props));
}
}, {
key: "renderError",
value: function renderError() {
var _this$props = this.props,
config = _this$props.config,
valueError = _this$props.valueError;
var showErrorMessage = config.settings.showErrorMessage;
var RuleError = this.RuleError;
var oneError = _toConsumableArray((valueError === null || valueError === void 0 ? void 0 : valueError.toArray()) || []).filter(function (e) {
return !!e;
}).shift() || null;
return showErrorMessage && oneError && /*#__PURE__*/React.createElement("div", {
className: "rule--error"
}, RuleError ? /*#__PURE__*/React.createElement(RuleError, {
error: oneError
}) : oneError);
}
}, {
key: "renderValue",
value: function renderValue() {
var _this$props2 = this.props,
config = _this$props2.config,
isLocked = _this$props2.isLocked,
value = _this$props2.value,
valueSrc = _this$props2.valueSrc,
valueError = _this$props2.valueError,
setValue = _this$props2.setValue,
setValueSrc = _this$props2.setValueSrc,
setFuncValue = _this$props2.setFuncValue,
id = _this$props2.id;
var immutableValuesMode = config.settings.immutableValuesMode;
var widget = /*#__PURE__*/React.createElement(Widget, {
key: "values",
isCaseValue: true,
field: "!case_value",
operator: null,
value: value,
valueSrc: valueSrc !== null && valueSrc !== void 0 ? valueSrc : "value",
valueError: valueError,
fieldError: null,
config: config,
setValue: !immutableValuesMode ? setValue : dummyFn,
setValueSrc: !immutableValuesMode ? setValueSrc : dummyFn,
setFuncValue: !immutableValuesMode ? setFuncValue : dummyFn,
readonly: immutableValuesMode || isLocked,
id: id,
groupId: null
});
return /*#__PURE__*/React.createElement(Col, {
className: "case_group--value"
}, widget);
}
}, {
key: "renderActions",
value: function renderActions() {
var _this$props3 = this.props,
config = _this$props3.config,
addGroup = _this$props3.addGroup,
addRule = _this$props3.addRule,
isLocked = _this$props3.isLocked,
isTrueLocked = _this$props3.isTrueLocked,
id = _this$props3.id;
return /*#__PURE__*/React.createElement(GroupActions, {
config: config,
addGroup: addGroup,
addRule: addRule,
canAddRule: this.canAddRule(),
canAddGroup: this.canAddGroup(),
canDeleteGroup: this.canDeleteGroup(),
removeSelf: this.removeSelf,
setLock: this.setLock,
isLocked: isLocked,
isTrueLocked: isTrueLocked,
id: id
});
}
}, {
key: "isEmptyCurrentGroup",
value: function isEmptyCurrentGroup() {
// used to confirm self-deletion
var value = this.props.value;
var oneValue = value && value.size ? value.get(0) : null;
var hasValue = oneValue != null && (Array.isArray(oneValue) ? oneValue.length > 0 : true);
return _superPropGet(CaseGroup, "isEmptyCurrentGroup", this, 3)([]) && !hasValue;
}
}]);
}(BasicGroup);
CaseGroup.propTypes = _objectSpread(_objectSpread({}, BasicGroup.propTypes), {}, {
parentReordableNodesCnt: PropTypes.number,
value: PropTypes.any,
setValue: PropTypes.func
});
export default GroupContainer(Draggable("group case_group")(WithConfirmFn(CaseGroup)), "case_group");