@react-awesome-query-builder/ui
Version:
User-friendly query builder for React. Core React UI
434 lines (433 loc) • 21.9 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"] = void 0;
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 _range = _interopRequireDefault(require("lodash/range"));
var _stuff = require("../../utils/stuff");
var _reactUtils = require("../../utils/reactUtils");
var _pick = _interopRequireDefault(require("lodash/pick"));
var _WidgetFactory = _interopRequireDefault(require("./WidgetFactory"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../utils");
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 _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 _Utils$ConfigUtils = _core.Utils.ConfigUtils,
getFieldConfig = _Utils$ConfigUtils.getFieldConfig,
getOperatorConfig = _Utils$ConfigUtils.getOperatorConfig,
getFieldWidgetConfig = _Utils$ConfigUtils.getFieldWidgetConfig,
getWidgetForFieldOp = _Utils$ConfigUtils.getWidgetForFieldOp,
getValueSourcesForFieldOp = _Utils$ConfigUtils.getValueSourcesForFieldOp;
var getValueLabel = _core.Utils.RuleUtils.getValueLabel;
var createListWithOneElement = _core.Utils.DefaultUtils.createListWithOneElement;
var shallowEqual = _core.Utils.OtherUtils.shallowEqual;
var isImmutable = _core.Utils.TreeUtils.isImmutable;
var funcArgDummyOpDef = {
cardinality: 1
};
var Widget = exports["default"] = /*#__PURE__*/function (_Component) {
function Widget(_props) {
var _this;
(0, _classCallCheck2["default"])(this, Widget);
_this = _callSuper(this, Widget, [_props]);
_this._setValue = function (isSpecialRange, delta, widgetType, widgetId,
// bound!
value, asyncListValues) {
var _meta = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};
if (!_meta.widgetId) {
_meta.widgetId = widgetId;
}
if (isSpecialRange && Array.isArray(value)) {
var oldRange = [_this.props.value.get(0), _this.props.value.get(1)];
if (oldRange[0] != value[0]) _this.props.setValue(0, value[0], widgetType, asyncListValues, _meta);
if (oldRange[1] != value[1]) _this.props.setValue(1, value[1], widgetType, asyncListValues, _meta);
} else {
_this.props.setValue(delta, value, widgetType, asyncListValues, _meta);
}
};
_this._setValueSrc = function (delta, widgetId,
// bound!
srcKey) {
var _meta = {
widgetId: widgetId
};
_this.props.setValueSrc(delta, srcKey, _meta);
};
_this.renderWidget = function (delta, meta, props) {
var config = props.config,
isFuncArg = props.isFuncArg,
leftField = props.leftField,
operator = props.operator,
values = props.value,
valueError = props.valueError,
fieldError = props.fieldError,
readonly = props.readonly,
parentField = props.parentField,
parentFuncs = props.parentFuncs,
id = props.id,
groupId = props.groupId,
fieldSrc = props.fieldSrc,
fieldType = props.fieldType,
isLHS = props.isLHS,
setFuncValue = props.setFuncValue,
parentDelta = props.parentDelta;
var settings = config.settings;
var widgets = meta.widgets,
iValues = meta.iValues,
aField = meta.aField,
valueSources = meta.valueSources;
var value = isFuncArg ? iValues : values;
var field = isFuncArg ? leftField : aField;
var _widgets$delta = widgets[delta],
valueSrc = _widgets$delta.valueSrc,
valueLabel = _widgets$delta.valueLabel,
widgetId = _widgets$delta.widgetId;
var hasValueSources = valueSources.length > 1 && !readonly;
var widgetLabel = settings.showLabels ? /*#__PURE__*/_react["default"].createElement("label", {
key: "label-" + widgetId,
className: "rule--label"
}, valueLabel.label) : null;
return /*#__PURE__*/_react["default"].createElement("div", {
key: "wrapper-" + widgetId,
className: (0, _classnames["default"])(valueSrc === "func" ? "widget--func" : "widget--widget", hasValueSources ? "widget--has-valuesrcs" : "widget--has-no-valuesrcs")
}, valueSrc === "func" ? null : widgetLabel, /*#__PURE__*/_react["default"].createElement(_WidgetFactory["default"], (0, _extends2["default"])({
key: widgetId,
id: id // id of rule
,
groupId: groupId,
widgetId: widgetId,
valueSrc: valueSrc,
delta: delta,
value: value,
valueError: valueError,
fieldError: fieldError,
isFuncArg: isFuncArg,
isLHS: isLHS
}, (0, _pick["default"])(meta, ["isSpecialRange", "fieldDefinition", "asyncListValues"]), (0, _pick["default"])(widgets[delta], ["widget", "widgetDefinition", "widgetValueLabel", "valueLabels", "textSeparators", "setValue"]), {
setFuncValue: setFuncValue,
config: config,
field: field,
fieldSrc: fieldSrc,
fieldType: fieldType,
parentField: parentField,
parentFuncs: parentFuncs,
parentDelta: parentDelta !== null && parentDelta !== void 0 ? parentDelta : delta,
operator: operator,
readonly: readonly
})));
};
_this.renderValueSources = function (delta, meta, props) {
var config = props.config,
isFuncArg = props.isFuncArg,
leftField = props.leftField,
operator = props.operator,
readonly = props.readonly;
var settings = config.settings;
var valueSources = meta.valueSources,
widgets = meta.widgets,
aField = meta.aField,
valueSourcesOptions = meta.valueSourcesOptions;
var field = isFuncArg ? leftField : aField;
var _widgets$delta2 = widgets[delta],
valueSrc = _widgets$delta2.valueSrc,
setValueSrc = _widgets$delta2.setValueSrc;
var ValueSources = _this.ValueSources;
var sourceLabel = settings.showLabels ? /*#__PURE__*/_react["default"].createElement("label", {
className: "rule--label"
}, "\xA0") : null;
return valueSources.length > 1 && !readonly && /*#__PURE__*/_react["default"].createElement("div", {
key: "wrapper-" + "valuesrc-" + delta,
className: "widget--valuesrc"
}, sourceLabel, /*#__PURE__*/_react["default"].createElement(ValueSources, {
key: "valuesrc-" + delta,
delta: delta,
valueSources: valueSourcesOptions,
valueSrc: valueSrc,
config: config,
field: field,
operator: operator,
setValueSrc: setValueSrc,
readonly: readonly,
title: settings.valueSourcesPopupTitle
}));
};
_this.renderSep = function (delta, meta, props) {
var config = props.config;
var widgets = meta.widgets;
var settings = config.settings;
var sepText = widgets[delta].sepText;
var sepLabel = settings.showLabels ? /*#__PURE__*/_react["default"].createElement("label", {
className: "rule--label"
}, "\xA0") : null;
return sepText && /*#__PURE__*/_react["default"].createElement("div", {
key: "widget-separators-" + delta,
className: (0, _classnames["default"])("widget--sep", delta == 0 && "widget--sep-first")
}, sepLabel, /*#__PURE__*/_react["default"].createElement("span", null, sepText));
};
_this.renderWidgetDelta = function (delta) {
var sep = _this.renderSep(delta, _this.meta, _this.props);
var sources = _this.renderValueSources(delta, _this.meta, _this.props);
var widgetCmp = _this.renderWidget(delta, _this.meta, _this.props);
return [sep, sources, widgetCmp];
};
(0, _reactUtils.useOnPropsChanged)(_this);
_this.onPropsChanged(_props);
return _this;
}
(0, _inherits2["default"])(Widget, _Component);
return (0, _createClass2["default"])(Widget, [{
key: "onPropsChanged",
value: function onPropsChanged(nextProps) {
var prevProps = this.props;
var configChanged = !this.ValueSources || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.config) !== (nextProps === null || nextProps === void 0 ? void 0 : nextProps.config);
var keysForMeta = ["config", "id", "parentFuncs", "field", "fieldId", "fieldSrc", "fieldType", "fieldFunc", "fieldArg", "leftField", "operator", "valueSrc", "asyncListValues", "isLHS", "isFuncArg", "isForRuleGroup", "isCaseValue", "value", "parentDelta"];
var changedKeys = keysForMeta.filter(function (k) {
if (k === "parentFuncs") {
return !shallowEqual(nextProps[k], prevProps[k], true);
}
// if (k === "value") {
// if (nextProps["value"] !== prevProps["value"] && isImmutable(nextProps["value"])) {
// }
// }
if (k === "field") {
//tip: if `fieldId` has not changed, but `field` changed -> ignore
// (because we are in RHS and field is LHS)
return nextProps["fieldId"] !== prevProps["fieldId"];
}
return nextProps[k] !== prevProps[k];
});
var needUpdateMeta = !this.meta || changedKeys.length > 0;
if (needUpdateMeta) {
this.meta = this.getMeta(nextProps, changedKeys);
}
if (configChanged) {
var config = nextProps.config;
var renderValueSources = config.settings.renderValueSources;
this.ValueSources = (0, _utils.getRenderFromConfig)(config, renderValueSources);
}
}
}, {
key: "getMeta",
value: function getMeta(_ref) {
var _iValueSrcs,
_iValueSrcs2,
_this$meta,
_this$meta2,
_this2 = this;
var config = _ref.config,
simpleField = _ref.field,
fieldSrc = _ref.fieldSrc,
fieldType = _ref.fieldType,
fieldFunc = _ref.fieldFunc,
fieldArg = _ref.fieldArg,
operator = _ref.operator,
valueSrcs = _ref.valueSrc,
values = _ref.value,
isForRuleGroup = _ref.isForRuleGroup,
isCaseValue = _ref.isCaseValue,
isFuncArg = _ref.isFuncArg,
leftField = _ref.leftField,
asyncListValues = _ref.asyncListValues,
parentFuncs = _ref.parentFuncs,
isLHS = _ref.isLHS,
id = _ref.id,
parentDelta = _ref.parentDelta;
var changedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var valueSourcesInfo = config.settings.valueSourcesInfo;
var field = isFuncArg ? {
func: fieldFunc,
arg: fieldArg
} : simpleField;
var isOkWithoutField = !simpleField && fieldType;
var iValueSrcs = valueSrcs;
var iValues = values;
if (isFuncArg || isForRuleGroup || isCaseValue) {
iValueSrcs = createListWithOneElement(valueSrcs);
iValues = createListWithOneElement(values);
}
var fieldDefinition = getFieldConfig(config, field);
if (!fieldDefinition && isOkWithoutField) {
fieldDefinition = config.types[fieldType];
}
var defaultWidget = getWidgetForFieldOp(config, field, operator);
if (!defaultWidget && isOkWithoutField) {
var _config$types$fieldTy;
defaultWidget = (_config$types$fieldTy = config.types[fieldType]) === null || _config$types$fieldTy === void 0 ? void 0 : _config$types$fieldTy.mainWidget;
}
var operatorDefinition = isFuncArg ? funcArgDummyOpDef : getOperatorConfig(config, operator, field);
if ((fieldDefinition == null || operatorDefinition == null) && !isCaseValue) {
return null;
}
var isSpecialRange = operatorDefinition === null || operatorDefinition === void 0 ? void 0 : operatorDefinition.isSpecialRange;
var isSpecialRangeForSrcField = isSpecialRange && (((_iValueSrcs = iValueSrcs) === null || _iValueSrcs === void 0 ? void 0 : _iValueSrcs.get(0)) === "field" || ((_iValueSrcs2 = iValueSrcs) === null || _iValueSrcs2 === void 0 ? void 0 : _iValueSrcs2.get(1)) === "field");
var isTrueSpecialRange = isSpecialRange && !isSpecialRangeForSrcField;
var cardinality = isTrueSpecialRange ? 1 : (0, _stuff.getOpCardinality)(operatorDefinition);
if (cardinality === 0) {
return null;
}
var valueSources = (_this$meta = this.meta) === null || _this$meta === void 0 ? void 0 : _this$meta.valueSources;
var valueSourcesOptions = (_this$meta2 = this.meta) === null || _this$meta2 === void 0 ? void 0 : _this$meta2.valueSourcesOptions;
var defaultValueSourcesLabels = {
value: "Value",
field: "Field",
func: "Function"
};
if (!valueSources || ["field", "operator", "config", "fieldDefinition", "isForRuleGroup"].filter(function (k) {
return changedKeys.includes(k);
}).length) {
valueSources = getValueSourcesForFieldOp(config, field, operator, fieldDefinition);
if (isForRuleGroup) {
// todo: aggregation can be not only number?
valueSources = ["value"];
}
if (!field) {
valueSources = Object.keys(valueSourcesInfo);
}
valueSourcesOptions = valueSources.map(function (srcKey) {
var _ref2, _valueSourcesInfo$src, _valueSourcesInfo$src2;
return [srcKey, {
label: (_ref2 = (_valueSourcesInfo$src = (_valueSourcesInfo$src2 = valueSourcesInfo[srcKey]) === null || _valueSourcesInfo$src2 === void 0 ? void 0 : _valueSourcesInfo$src2.label) !== null && _valueSourcesInfo$src !== void 0 ? _valueSourcesInfo$src : defaultValueSourcesLabels[srcKey]) !== null && _ref2 !== void 0 ? _ref2 : srcKey
}];
});
}
var widgets = (isFuncArg ? [0] : (0, _range["default"])(0, cardinality)).map(function (delta) {
var _this2$meta, _iValueSrcs3, _widgetDefinition, _this2$meta2;
var oldWidgetMeta = (_this2$meta = _this2.meta) === null || _this2$meta === void 0 || (_this2$meta = _this2$meta.widgets) === null || _this2$meta === void 0 ? void 0 : _this2$meta[delta];
var valueSrc = ((_iValueSrcs3 = iValueSrcs) === null || _iValueSrcs3 === void 0 ? void 0 : _iValueSrcs3.get(delta)) || null;
var widget = getWidgetForFieldOp(config, field, operator, valueSrc);
var widgetDefinition = getFieldWidgetConfig(config, field, operator, widget, valueSrc);
if (isSpecialRangeForSrcField) {
widget = widgetDefinition.singleWidget;
widgetDefinition = getFieldWidgetConfig(config, field, operator, widget, valueSrc);
}
if (!widgetDefinition && isOkWithoutField) {
widget = ["func", "field"].includes(valueSrc) ? valueSrc : defaultWidget;
widgetDefinition = config.widgets[widget];
}
var widgetType = (_widgetDefinition = widgetDefinition) === null || _widgetDefinition === void 0 ? void 0 : _widgetDefinition.type;
var valueLabel = getValueLabel(config, field, operator, delta, valueSrc, isTrueSpecialRange);
var widgetValueLabel = getValueLabel(config, field, operator, delta, null, isTrueSpecialRange);
var sepText = operatorDefinition !== null && operatorDefinition !== void 0 && operatorDefinition.textSeparators ? operatorDefinition === null || operatorDefinition === void 0 ? void 0 : operatorDefinition.textSeparators[delta] : null;
var valueLabels = null;
var textSeparators = null;
if (isSpecialRange) {
valueLabels = [getValueLabel(config, field, operator, 0), getValueLabel(config, field, operator, 1)];
valueLabels = {
placeholder: [valueLabels[0].placeholder, valueLabels[1].placeholder],
label: [valueLabels[0].label, valueLabels[1].label]
};
textSeparators = operatorDefinition === null || operatorDefinition === void 0 ? void 0 : operatorDefinition.textSeparators;
}
var widgetId = (0, _utils.getWidgetId)({
id: id,
isLHS: isLHS,
delta: parentDelta !== null && parentDelta !== void 0 ? parentDelta : delta,
parentFuncs: parentFuncs
});
var vsId = widgetId + ":" + "VS";
var setValueSrc = oldWidgetMeta === null || oldWidgetMeta === void 0 ? void 0 : oldWidgetMeta.setValueSrc;
if (!setValueSrc || (oldWidgetMeta === null || oldWidgetMeta === void 0 ? void 0 : oldWidgetMeta.widgetId) !== widgetId) {
setValueSrc = _this2._setValueSrc.bind(_this2, delta, vsId);
}
var setValue = oldWidgetMeta === null || oldWidgetMeta === void 0 ? void 0 : oldWidgetMeta.setValue;
if (!setValue || (oldWidgetMeta === null || oldWidgetMeta === void 0 ? void 0 : oldWidgetMeta.widgetId) !== widgetId || (oldWidgetMeta === null || oldWidgetMeta === void 0 ? void 0 : oldWidgetMeta.widgetType) !== widgetType || ((_this2$meta2 = _this2.meta) === null || _this2$meta2 === void 0 ? void 0 : _this2$meta2.isSpecialRange) !== isSpecialRange) {
setValue = _this2._setValue.bind(_this2, isSpecialRange, delta, widgetType, widgetId);
}
return {
valueSrc: valueSrc,
valueLabel: valueLabel,
widget: widget,
sepText: sepText,
widgetDefinition: widgetDefinition,
widgetValueLabel: widgetValueLabel,
valueLabels: valueLabels,
textSeparators: textSeparators,
setValueSrc: setValueSrc,
setValue: setValue,
widgetId: widgetId,
widgetType: widgetType
};
});
return {
defaultWidget: defaultWidget,
fieldDefinition: fieldDefinition,
operatorDefinition: operatorDefinition,
isSpecialRange: isTrueSpecialRange,
cardinality: cardinality,
valueSources: valueSources,
valueSourcesOptions: valueSourcesOptions,
widgets: widgets,
iValues: iValues,
//correct for isFuncArg
aField: field,
//correct for isFuncArg
asyncListValues: asyncListValues
};
}
}, {
key: "render",
value: function render() {
if (!this.meta) return null;
var _this$meta3 = this.meta,
defaultWidget = _this$meta3.defaultWidget,
cardinality = _this$meta3.cardinality;
var isFuncArg = this.meta.isFuncArg;
if (!defaultWidget) return null;
var name = defaultWidget;
return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
className: "rule--widget rule--widget--".concat(name.toUpperCase()),
key: "widget-col-" + name
}, (isFuncArg ? [0] : (0, _range["default"])(0, cardinality)).map(this.renderWidgetDelta));
}
}]);
}(_react.Component);
Widget.propTypes = {
config: _propTypes["default"].object.isRequired,
value: _propTypes["default"].any,
//instanceOf(Immutable.List)
valueSrc: _propTypes["default"].any,
//instanceOf(Immutable.List)
valueError: _propTypes["default"].any,
//instanceOf(Immutable.List)
fieldError: _propTypes["default"].string,
field: _propTypes["default"].any,
fieldSrc: _propTypes["default"].string,
fieldType: _propTypes["default"].string,
fieldId: _propTypes["default"].string,
operator: _propTypes["default"].string,
readonly: _propTypes["default"].bool,
asyncListValues: _propTypes["default"].array,
id: _propTypes["default"].string,
groupId: _propTypes["default"].string,
//actions
setValue: _propTypes["default"].func,
setValueSrc: _propTypes["default"].func,
setFuncValue: _propTypes["default"].func,
// for isFuncArg
isFuncArg: _propTypes["default"].bool,
fieldFunc: _propTypes["default"].string,
fieldArg: _propTypes["default"].string,
leftField: _propTypes["default"].any,
// for RuleGroupExt
isForRuleGroup: _propTypes["default"].bool,
parentField: _propTypes["default"].string,
// for func in func
parentFuncs: _propTypes["default"].array,
isLHS: _propTypes["default"].bool,
parentDelta: _propTypes["default"].number,
// for case_value
isCaseValue: _propTypes["default"].bool
};