@react-awesome-query-builder/ui/cjs/components/item/Rule.js

User-friendly query builder for React. Core React UI

"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _RuleContainer = _interopRequireDefault(require("../containers/RuleContainer"));
var _Draggable = _interopRequireDefault(require("../containers/Draggable"));
var _OperatorWrapper = _interopRequireDefault(require("../rule/OperatorWrapper"));
var _FieldWrapper = _interopRequireDefault(require("../rule/FieldWrapper"));
var _Widget = _interopRequireDefault(require("../rule/Widget"));
var _OperatorOptions = _interopRequireDefault(require("../rule/OperatorOptions"));
var _reactUtils = require("../../utils/reactUtils");
var _utils = require("../utils");
var _classnames = _interopRequireDefault(require("classnames"));
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 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 _Utils$ConfigUtils = _core.Utils.ConfigUtils,
  getFieldConfig = _Utils$ConfigUtils.getFieldConfig,
  getOperatorConfig = _Utils$ConfigUtils.getOperatorConfig,
  getFieldWidgetConfig = _Utils$ConfigUtils.getFieldWidgetConfig,
  getFieldId = _Utils$ConfigUtils.getFieldId;
var isEmptyRuleProperties = _core.Utils.RuleUtils.isEmptyRuleProperties;
var Rule = /*#__PURE__*/function (_Component) {
  function Rule(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, Rule);
    _this = _callSuper(this, Rule, [props]);
    (0, _reactUtils.useOnPropsChanged)(_this);
    _this.removeSelf = _this.removeSelf.bind(_this);
    _this.setLock = _this.setLock.bind(_this);
    _this.onPropsChanged(props);
    return _this;
  }
  (0, _inherits2["default"])(Rule, _Component);
  return (0, _createClass2["default"])(Rule, [{
    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);
      var keysForMeta = ["selectedField", "selectedFieldSrc", "selectedFieldType", "selectedOperator", "config", "reordableNodesCnt", "isLocked", "parentField", "parentFieldCanReorder"];
      var needUpdateMeta = !this.meta || keysForMeta.map(function (k) {
        return nextProps[k] !== prevProps[k];
      }).filter(function (ch) {
        return ch;
      }).length > 0;
      if (needUpdateMeta) {
        this.meta = this.getMeta(nextProps);
      }
      if (configChanged) {
        var config = nextProps.config;
        var _config$settings = config.settings,
          renderIcon = _config$settings.renderIcon,
          renderButton = _config$settings.renderButton,
          renderButtonGroup = _config$settings.renderButtonGroup,
          renderSwitch = _config$settings.renderSwitch,
          renderBeforeWidget = _config$settings.renderBeforeWidget,
          renderAfterWidget = _config$settings.renderAfterWidget,
          renderRuleError = _config$settings.renderRuleError;
        this.Icon = (0, _utils.getRenderFromConfig)(config, renderIcon);
        this.Btn = (0, _utils.getRenderFromConfig)(config, renderButton);
        this.BtnGrp = (0, _utils.getRenderFromConfig)(config, renderButtonGroup);
        this.Switch = (0, _utils.getRenderFromConfig)(config, renderSwitch);
        this.BeforeWidget = (0, _utils.getRenderFromConfig)(config, renderBeforeWidget);
        this.AfterWidget = (0, _utils.getRenderFromConfig)(config, renderAfterWidget);
        this.RuleError = (0, _utils.getRenderFromConfig)(config, renderRuleError);
      }
      this.doRemove = function () {
        _this2.props.removeSelf();
      };
    }
  }, {
    key: "getMeta",
    value: function getMeta(_ref) {
      var selectedField = _ref.selectedField,
        selectedFieldType = _ref.selectedFieldType,
        selectedOperator = _ref.selectedOperator,
        config = _ref.config,
        reordableNodesCnt = _ref.reordableNodesCnt,
        isLocked = _ref.isLocked,
        parentField = _ref.parentField,
        parentFieldCanReorder = _ref.parentFieldCanReorder;
      var keepInputOnChangeFieldSrc = config.settings.keepInputOnChangeFieldSrc;
      var selectedFieldId = getFieldId(selectedField, config);
      var selectedFieldConfig = getFieldConfig(config, selectedField);
      var isSelectedGroup = selectedFieldConfig && selectedFieldConfig.type === "!struct";
      var isOkWithoutField = keepInputOnChangeFieldSrc && selectedFieldType;
      var isFieldSelected = !!selectedField || isOkWithoutField;
      var isFieldAndOpSelected = isFieldSelected && selectedOperator;
      var selectedOperatorConfig = getOperatorConfig(config, selectedOperator, selectedField);
      var selectedOperatorHasOptions = selectedOperatorConfig && selectedOperatorConfig.options != null;
      var selectedFieldWidgetConfig = getFieldWidgetConfig(config, selectedField, selectedOperator, null, null) || {};
      var hideOperator = selectedFieldWidgetConfig.hideOperator;
      var showDragIcon = config.settings.canReorder && reordableNodesCnt > 1 && !isLocked;
      if (parentField) {
        showDragIcon = showDragIcon && parentFieldCanReorder;
      }
      var showOperator = isFieldSelected && !hideOperator;
      var showOperatorLabel = isFieldSelected && hideOperator && selectedFieldWidgetConfig.operatorInlineLabel;
      var showWidget = isFieldAndOpSelected && !isSelectedGroup;
      var showOperatorOptions = isFieldAndOpSelected && selectedOperatorHasOptions;
      return {
        selectedFieldId: selectedFieldId,
        selectedFieldWidgetConfig: selectedFieldWidgetConfig,
        showDragIcon: showDragIcon,
        showOperator: showOperator,
        showOperatorLabel: showOperatorLabel,
        showWidget: showWidget,
        showOperatorOptions: showOperatorOptions
      };
    }
  }, {
    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.removeRuleConfirmOptions;
      if (confirmOptions && !this.isEmptyCurrentRule()) {
        renderConfirm.call(config.ctx, _objectSpread(_objectSpread({}, confirmOptions), {}, {
          onOk: this.doRemove,
          onCancel: null,
          confirmFn: confirmFn
        }), config.ctx);
      } else {
        this.doRemove();
      }
    }
  }, {
    key: "_buildWidgetProps",
    value: function _buildWidgetProps(_ref2, _ref3) {
      var selectedField = _ref2.selectedField,
        selectedFieldSrc = _ref2.selectedFieldSrc,
        selectedFieldType = _ref2.selectedFieldType,
        selectedOperator = _ref2.selectedOperator,
        operatorOptions = _ref2.operatorOptions,
        value = _ref2.value,
        valueType = _ref2.valueType,
        valueSrc = _ref2.valueSrc,
        asyncListValues = _ref2.asyncListValues,
        valueError = _ref2.valueError,
        fieldError = _ref2.fieldError,
        parentField = _ref2.parentField;
      var selectedFieldId = _ref3.selectedFieldId;
      return {
        field: selectedField,
        fieldSrc: selectedFieldSrc,
        fieldType: selectedFieldType,
        fieldId: selectedFieldId,
        operator: selectedOperator,
        operatorOptions: operatorOptions,
        value: value,
        valueType: valueType,
        valueSrc: valueSrc,
        asyncListValues: asyncListValues,
        valueError: valueError,
        fieldError: fieldError,
        parentField: parentField
      };
    }
  }, {
    key: "isEmptyCurrentRule",
    value: function isEmptyCurrentRule() {
      var config = this.props.config;
      var ruleData = this._buildWidgetProps(this.props, this.meta);
      return isEmptyRuleProperties(ruleData, config);
    }
  }, {
    key: "renderField",
    value: function renderField() {
      var _this$props2 = this.props,
        config = _this$props2.config,
        isLocked = _this$props2.isLocked,
        parentField = _this$props2.parentField,
        groupId = _this$props2.groupId,
        id = _this$props2.id,
        selectedFieldSrc = _this$props2.selectedFieldSrc,
        selectedField = _this$props2.selectedField,
        selectedFieldType = _this$props2.selectedFieldType,
        setField = _this$props2.setField,
        setFuncValue = _this$props2.setFuncValue,
        setFieldSrc = _this$props2.setFieldSrc,
        fieldError = _this$props2.fieldError;
      var immutableFieldsMode = config.settings.immutableFieldsMode;
      var selectedFieldId = this.meta.selectedFieldId;
      // tip: don't allow function inside !group (yet)

      return /*#__PURE__*/_react["default"].createElement(_FieldWrapper["default"], {
        key: "field",
        classname: (0, _classnames["default"])(selectedFieldSrc == "func" ? "rule--field--func" : "rule--field"),
        config: config,
        canSelectFieldSource: !parentField,
        selectedField: selectedField,
        selectedFieldSrc: selectedFieldSrc,
        selectedFieldType: selectedFieldType,
        selectedFieldId: selectedFieldId,
        fieldError: fieldError,
        setField: !immutableFieldsMode ? setField : _utils.dummyFn,
        setFuncValue: !immutableFieldsMode ? setFuncValue : _utils.dummyFn,
        setFieldSrc: !immutableFieldsMode ? setFieldSrc : _utils.dummyFn,
        parentField: parentField,
        readonly: immutableFieldsMode || isLocked,
        id: id,
        groupId: groupId
      });
    }
  }, {
    key: "renderOperator",
    value: function renderOperator() {
      var _this$props3 = this.props,
        config = _this$props3.config,
        isLocked = _this$props3.isLocked;
      var _this$meta = this.meta,
        selectedFieldId = _this$meta.selectedFieldId,
        selectedFieldWidgetConfig = _this$meta.selectedFieldWidgetConfig,
        showOperator = _this$meta.showOperator,
        showOperatorLabel = _this$meta.showOperatorLabel;
      var immutableOpsMode = config.settings.immutableOpsMode;
      return /*#__PURE__*/_react["default"].createElement(_OperatorWrapper["default"], {
        key: "operator",
        config: config,
        selectedField: this.props.selectedField,
        selectedFieldSrc: this.props.selectedFieldSrc,
        selectedFieldType: this.props.selectedFieldType,
        selectedFieldId: selectedFieldId,
        selectedOperator: this.props.selectedOperator,
        setOperator: !immutableOpsMode ? this.props.setOperator : _utils.dummyFn,
        showOperator: showOperator,
        showOperatorLabel: showOperatorLabel,
        selectedFieldWidgetConfig: selectedFieldWidgetConfig,
        readonly: immutableOpsMode || isLocked,
        id: this.props.id,
        groupId: this.props.groupId
      });
    }
  }, {
    key: "renderWidget",
    value: function renderWidget() {
      var _this$props4 = this.props,
        config = _this$props4.config,
        isLocked = _this$props4.isLocked;
      var showWidget = this.meta.showWidget;
      var immutableValuesMode = config.settings.immutableValuesMode;
      if (!showWidget) return null;
      var widget = /*#__PURE__*/_react["default"].createElement(_Widget["default"], (0, _extends2["default"])({
        key: "values"
      }, this._buildWidgetProps(this.props, this.meta), {
        config: config,
        setValue: !immutableValuesMode ? this.props.setValue : _utils.dummyFn,
        setValueSrc: !immutableValuesMode ? this.props.setValueSrc : _utils.dummyFn,
        setFuncValue: !immutableValuesMode ? this.props.setFuncValue : _utils.dummyFn,
        readonly: immutableValuesMode || isLocked,
        id: this.props.id,
        groupId: this.props.groupId
      }));
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "widget-for-" + this.props.selectedOperator,
        className: "rule--value"
      }, widget);
    }
  }, {
    key: "renderOperatorOptions",
    value: function renderOperatorOptions() {
      var config = this.props.config;
      var showOperatorOptions = this.meta.showOperatorOptions;
      var _config$settings3 = config.settings,
        immutableOpsMode = _config$settings3.immutableOpsMode,
        immutableValuesMode = _config$settings3.immutableValuesMode;
      if (!showOperatorOptions) return null;
      var opOpts = /*#__PURE__*/_react["default"].createElement(_OperatorOptions["default"], {
        key: "operatorOptions",
        selectedField: this.props.selectedField,
        selectedOperator: this.props.selectedOperator,
        operatorOptions: this.props.operatorOptions,
        setOperatorOption: !immutableOpsMode ? this.props.setOperatorOption : _utils.dummyFn,
        config: config,
        readonly: immutableValuesMode
      });
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "op-options-for-" + this.props.selectedOperator,
        className: "rule--operator-options"
      }, opOpts);
    }
  }, {
    key: "renderBeforeWidget",
    value: function renderBeforeWidget() {
      var BeforeWidget = this.BeforeWidget;
      if (!BeforeWidget) return null;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "before-widget-for-" + this.props.selectedOperator,
        className: "rule--before-widget"
      }, /*#__PURE__*/_react["default"].createElement(BeforeWidget, this.props));
    }
  }, {
    key: "renderAfterWidget",
    value: function renderAfterWidget() {
      var AfterWidget = this.AfterWidget;
      if (!AfterWidget) return null;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "after-widget-for-" + this.props.selectedOperator,
        className: "rule--after-widget"
      }, /*#__PURE__*/_react["default"].createElement(AfterWidget, this.props));
    }
  }, {
    key: "renderError",
    value: function renderError() {
      var _this$props5 = this.props,
        config = _this$props5.config,
        valueError = _this$props5.valueError,
        fieldError = _this$props5.fieldError;
      var showErrorMessage = config.settings.showErrorMessage;
      var RuleError = this.RuleError;
      var oneError = [fieldError].concat((0, _toConsumableArray2["default"])((valueError === null || valueError === void 0 ? void 0 : valueError.toArray()) || [])).filter(function (e) {
        return !!e;
      }).shift() || null;
      return showErrorMessage && oneError && /*#__PURE__*/_react["default"].createElement("div", {
        className: "rule--error"
      }, RuleError ? /*#__PURE__*/_react["default"].createElement(RuleError, {
        error: oneError
      }) : oneError);
    }
  }, {
    key: "renderDrag",
    value: function renderDrag() {
      var _this$props6 = this.props,
        handleDraggerMouseDown = _this$props6.handleDraggerMouseDown,
        config = _this$props6.config,
        isLocked = _this$props6.isLocked;
      var showDragIcon = this.meta.showDragIcon;
      var Icon = this.Icon;
      var icon = /*#__PURE__*/_react["default"].createElement(Icon, {
        type: "drag",
        config: config,
        readonly: isLocked
      });
      return showDragIcon && /*#__PURE__*/_react["default"].createElement("div", {
        key: "rule-drag-icon",
        onMouseDown: handleDraggerMouseDown,
        className: "qb-drag-handler rule--drag-handler"
      }, icon);
    }
  }, {
    key: "renderDel",
    value: function renderDel() {
      var _this$props7 = this.props,
        config = _this$props7.config,
        isLocked = _this$props7.isLocked;
      var _config$settings4 = config.settings,
        deleteLabel = _config$settings4.deleteLabel,
        immutableGroupsMode = _config$settings4.immutableGroupsMode,
        canDeleteLocked = _config$settings4.canDeleteLocked;
      var Icon = this.Icon;
      var Btn = this.Btn;
      return !immutableGroupsMode && (!isLocked || isLocked && canDeleteLocked) && /*#__PURE__*/_react["default"].createElement(Btn, {
        key: "rule-del",
        type: "delRule",
        onClick: this.removeSelf,
        label: deleteLabel,
        config: config,
        renderIcon: Icon
      });
    }
  }, {
    key: "renderLock",
    value: function renderLock() {
      var _this$props8 = this.props,
        config = _this$props8.config,
        isLocked = _this$props8.isLocked,
        isTrueLocked = _this$props8.isTrueLocked,
        id = _this$props8.id;
      var _config$settings5 = config.settings,
        lockLabel = _config$settings5.lockLabel,
        lockedLabel = _config$settings5.lockedLabel,
        showLock = _config$settings5.showLock;
      var Switch = this.Switch;
      return showLock && !(isLocked && !isTrueLocked) && /*#__PURE__*/_react["default"].createElement(Switch, {
        key: "rule-lock",
        type: "lock",
        id: id,
        value: isLocked,
        setValue: this.setLock,
        label: lockLabel,
        checkedLabel: lockedLabel,
        hideLabel: true,
        config: config
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$meta2 = this.meta,
        showOperatorOptions = _this$meta2.showOperatorOptions,
        selectedFieldWidgetConfig = _this$meta2.selectedFieldWidgetConfig;
      var _this$props9 = this.props,
        valueSrc = _this$props9.valueSrc,
        value = _this$props9.value,
        config = _this$props9.config;
      var canShrinkValue = (valueSrc === null || valueSrc === void 0 ? void 0 : valueSrc.first()) == "value" && !showOperatorOptions && value.size == 1 && selectedFieldWidgetConfig.fullWidth;
      var BtnGrp = this.BtnGrp;
      var parts = [this.renderField(), this.renderOperator(), this.renderBeforeWidget(), this.renderWidget(), this.renderAfterWidget(), this.renderOperatorOptions()];
      var body = /*#__PURE__*/_react["default"].createElement("div", {
        key: "rule-body",
        className: (0, _classnames["default"])("rule--body", canShrinkValue && "can--shrink--value")
      }, parts);
      var error = this.renderError();
      var drag = this.renderDrag();
      var lock = this.renderLock();
      var del = this.renderDel();
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, drag, /*#__PURE__*/_react["default"].createElement("div", {
        key: "rule-body-wrapper",
        className: "rule--body--wrapper"
      }, body, error), /*#__PURE__*/_react["default"].createElement("div", {
        key: "rule-header-wrapper",
        className: "rule--header"
      }, /*#__PURE__*/_react["default"].createElement(BtnGrp, {
        key: "rule-header-group",
        config: config
      }, lock, del)));
    }
  }]);
}(_react.Component);
Rule.propTypes = {
  id: _propTypes["default"].string.isRequired,
  groupId: _propTypes["default"].string,
  selectedField: _propTypes["default"].any,
  selectedFieldSrc: _propTypes["default"].string,
  selectedFieldType: _propTypes["default"].string,
  selectedOperator: _propTypes["default"].string,
  operatorOptions: _propTypes["default"].object,
  config: _propTypes["default"].object.isRequired,
  value: _propTypes["default"].any,
  //depends on widget
  valueSrc: _propTypes["default"].any,
  valueType: _propTypes["default"].any,
  asyncListValues: _propTypes["default"].array,
  isDraggingMe: _propTypes["default"].bool,
  isDraggingTempo: _propTypes["default"].bool,
  parentField: _propTypes["default"].string,
  //from RuleGroup
  valueError: _propTypes["default"].any,
  fieldError: _propTypes["default"].string,
  isLocked: _propTypes["default"].bool,
  isTrueLocked: _propTypes["default"].bool,
  //path: PropTypes.instanceOf(Immutable.List),
  //actions
  handleDraggerMouseDown: _propTypes["default"].func,
  setField: _propTypes["default"].func,
  setFieldSrc: _propTypes["default"].func,
  setOperator: _propTypes["default"].func,
  setOperatorOption: _propTypes["default"].func,
  setLock: _propTypes["default"].func,
  removeSelf: _propTypes["default"].func,
  setValue: _propTypes["default"].func,
  setValueSrc: _propTypes["default"].func,
  setFuncValue: _propTypes["default"].func,
  reordableNodesCnt: _propTypes["default"].number,
  totalRulesCnt: _propTypes["default"].number,
  parentReordableNodesCnt: _propTypes["default"].number,
  parentFieldCanReorder: _propTypes["default"].bool
};
var _default = exports["default"] = (0, _RuleContainer["default"])((0, _Draggable["default"])("rule")((0, _utils.WithConfirmFn)(Rule)));