@react-awesome-query-builder-dev/ui
Version:
User-friendly query builder for React. Core React UI
221 lines • 10.6 kB
JavaScript
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 context from "../../stores/context";
import { pureShouldComponentUpdate } from "../../utils/reactUtils";
import { connect } from "react-redux";
import classNames from "classnames";
var getFieldConfig = Utils.ConfigUtils.getFieldConfig;
var createRuleContainer = function createRuleContainer(Rule) {
var _RuleContainer;
return _RuleContainer = /*#__PURE__*/function (_Component) {
function RuleContainer(props) {
var _this;
_classCallCheck(this, RuleContainer);
_this = _callSuper(this, RuleContainer, [props]);
_this.dummyFn = function () {};
_this.removeSelf = function () {
_this.props.actions.removeRule(_this.props.path);
};
_this.setLock = function () {
var lock = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
_this.props.actions.setLock(_this.props.path, lock);
};
_this.setField = function (field, asyncListValues, _meta) {
_this.props.actions.setField(_this.props.path, field, asyncListValues, _meta);
};
_this.setFieldSrc = function (srcKey) {
_this.props.actions.setFieldSrc(_this.props.path, srcKey);
};
_this.setOperator = function (operator) {
_this.props.actions.setOperator(_this.props.path, operator);
};
_this.setOperatorOption = function (name, value) {
_this.props.actions.setOperatorOption(_this.props.path, name, value);
};
_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);
_this.dummyFn.isDummyFn = true;
return _this;
}
_inherits(RuleContainer, _Component);
return _createClass(RuleContainer, [{
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: "render",
value: function render() {
var isDraggingMe = this.props.dragging.id == this.props.id;
var fieldConfig = getFieldConfig(this.props.config, this.props.field);
var fieldType = this.props.fieldType || (fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.type) || null;
var showErrorMessage = this.props.config.settings.showErrorMessage;
var _isGroup = fieldConfig && fieldConfig.type == "!struct";
var isInDraggingTempo = !isDraggingMe && this.props.isDraggingTempo;
var _this$props = this.props,
valueError = _this$props.valueError,
fieldError = _this$props.fieldError;
var oneError = [fieldError].concat(_toConsumableArray((valueError === null || valueError === void 0 ? void 0 : valueError.toArray()) || [])).filter(function (e) {
return !!e;
}).shift() || null;
var hasError = oneError != null && showErrorMessage;
return /*#__PURE__*/React.createElement("div", {
className: classNames("group-or-rule-container", "rule-container", hasError ? "rule-with-error" : null),
"data-id": this.props.id
}, [isDraggingMe ? /*#__PURE__*/React.createElement(Rule, {
key: "dragging",
id: this.props.id,
groupId: this.props.groupId,
lev: this.props.path.size - 1,
isDraggingMe: true,
isDraggingTempo: true,
dragging: this.props.dragging,
setField: this.dummyFn,
setFieldSrc: this.dummyFn,
setFuncValue: this.dummyFn,
setOperator: this.dummyFn,
setOperatorOption: this.dummyFn,
setLock: this.dummyFn,
removeSelf: this.dummyFn,
setValue: this.dummyFn,
setValueSrc: this.dummyFn,
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,
value: this.props.value || null,
valueSrc: this.props.valueSrc || null,
valueType: this.props.valueType || null,
valueError: this.props.valueError || null,
fieldError: this.props.fieldError || null,
operatorOptions: this.props.operatorOptions,
config: this.props.config,
reordableNodesCnt: this.props.reordableNodesCnt,
totalRulesCnt: this.props.totalRulesCnt,
asyncListValues: this.props.asyncListValues,
isLocked: this.props.isLocked,
isTrueLocked: this.props.isTrueLocked,
parentReordableNodesCnt: this.props.parentReordableNodesCnt
}) : null, /*#__PURE__*/React.createElement(Rule, {
key: this.props.id,
id: this.props.id,
groupId: this.props.groupId,
lev: this.props.path.size - 1,
isDraggingMe: isDraggingMe,
isDraggingTempo: isInDraggingTempo,
onDragStart: this.props.onDragStart,
setLock: isInDraggingTempo ? this.dummyFn : this.setLock,
removeSelf: isInDraggingTempo ? this.dummyFn : this.removeSelf,
setField: isInDraggingTempo ? this.dummyFn : this.setField,
setFieldSrc: isInDraggingTempo ? this.dummyFn : this.setFieldSrc,
setFuncValue: isInDraggingTempo ? this.dummyFn : this.setFuncValue,
setOperator: isInDraggingTempo ? this.dummyFn : this.setOperator,
setOperatorOption: isInDraggingTempo ? this.dummyFn : this.setOperatorOption,
setValue: isInDraggingTempo ? this.dummyFn : this.setValue,
setValueSrc: isInDraggingTempo ? this.dummyFn : this.setValueSrc,
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,
value: this.props.value || null,
valueSrc: this.props.valueSrc || null,
valueType: this.props.valueType || null,
valueError: this.props.valueError || null,
fieldError: this.props.fieldError || null,
operatorOptions: this.props.operatorOptions,
config: this.props.config,
reordableNodesCnt: this.props.reordableNodesCnt,
totalRulesCnt: this.props.totalRulesCnt,
asyncListValues: this.props.asyncListValues,
isLocked: this.props.isLocked,
isTrueLocked: this.props.isTrueLocked,
parentReordableNodesCnt: this.props.parentReordableNodesCnt
})]);
}
}]);
}(Component), _RuleContainer.propTypes = {
id: PropTypes.string.isRequired,
groupId: PropTypes.string,
config: PropTypes.object.isRequired,
path: PropTypes.any.isRequired,
//instanceOf(Immutable.List)
operator: PropTypes.string,
field: PropTypes.any,
fieldSrc: PropTypes.string,
fieldType: PropTypes.string,
actions: PropTypes.object.isRequired,
//{removeRule: Function, setField, setFieldSrc, setOperator, setOperatorOption, setValue, setValueSrc, ...}
onDragStart: PropTypes.func,
value: PropTypes.any,
//depends on widget
valueSrc: PropTypes.any,
asyncListValues: PropTypes.array,
valueError: PropTypes.any,
fieldError: PropTypes.string,
operatorOptions: PropTypes.object,
reordableNodesCnt: PropTypes.number,
parentField: PropTypes.string,
//from RuleGroup
isLocked: PropTypes.bool,
isTrueLocked: PropTypes.bool,
//connected:
dragging: PropTypes.object,
//{id, x, y, w, h}
isDraggingTempo: PropTypes.bool
}, _RuleContainer;
};
export default (function (Rule) {
var ConnectedRuleContainer = connect(function (state) {
return {
dragging: state.dragging
};
}, null, null, {
context: context
})(createRuleContainer(Rule));
ConnectedRuleContainer.displayName = "ConnectedRuleContainer";
return ConnectedRuleContainer;
});