@react-awesome-query-builder/ui/cjs/components/rule/FuncWidget.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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 _FuncSelect = _interopRequireDefault(require("./FuncSelect"));
var _Widget = _interopRequireDefault(require("./Widget"));
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 _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 getFuncConfig = _core.Utils.ConfigUtils.getFuncConfig;
var shallowEqual = _core.Utils.OtherUtils.shallowEqual;
var FuncWidget = exports["default"] = /*#__PURE__*/function (_Component) {
  function FuncWidget(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, FuncWidget);
    _this = _callSuper(this, FuncWidget, [props]);
    _this.setFunc = function (funcKey) {
      var _meta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var _this$props = _this.props,
        isLHS = _this$props.isLHS,
        parentDelta = _this$props.parentDelta,
        parentFuncs = _this$props.parentFuncs,
        id = _this$props.id;
      if (!_meta.widgetId) {
        var widgetId = (0, _utils.getWidgetId)({
          id: id,
          isLHS: isLHS,
          delta: parentDelta,
          parentFuncs: parentFuncs
        });
        _meta.widgetId = widgetId;
      }
      _this.props.setFuncValue(isLHS ? -1 : parentDelta || 0, parentFuncs, null, funcKey, "!func", undefined, _meta);
    };
    _this.setArgValue = function (argKey, argVal, widgetType, asyncListValues, _meta) {
      var _this$props2 = _this.props,
        config = _this$props2.config,
        parentDelta = _this$props2.parentDelta,
        isLHS = _this$props2.isLHS,
        parentFuncs = _this$props2.parentFuncs;
      _this.props.setFuncValue(isLHS ? -1 : parentDelta || 0, parentFuncs, argKey, argVal, widgetType, asyncListValues, _meta);
    };
    _this.setArgValueSrc = function (argKey, argValSrc, _meta) {
      var _this$props3 = _this.props,
        config = _this$props3.config,
        parentDelta = _this$props3.parentDelta,
        isLHS = _this$props3.isLHS,
        parentFuncs = _this$props3.parentFuncs;
      _this.props.setFuncValue(isLHS ? -1 : parentDelta || 0, parentFuncs, argKey, argValSrc, "!valueSrc", undefined, _meta);
    };
    _this.renderFuncSelect = function () {
      var _value$get, _value$get2;
      var _this$props4 = _this.props,
        config = _this$props4.config,
        field = _this$props4.field,
        fieldType = _this$props4.fieldType,
        fieldSrc = _this$props4.fieldSrc,
        isLHS = _this$props4.isLHS,
        operator = _this$props4.operator,
        customProps = _this$props4.customProps,
        value = _this$props4.value,
        readonly = _this$props4.readonly,
        parentFuncs = _this$props4.parentFuncs,
        id = _this$props4.id,
        groupId = _this$props4.groupId,
        isFuncArg = _this$props4.isFuncArg,
        fieldDefinition = _this$props4.fieldDefinition,
        parentDelta = _this$props4.parentDelta;
      var funcKey = (_value$get = value === null || value === void 0 || (_value$get2 = value.get) === null || _value$get2 === void 0 ? void 0 : _value$get2.call(value, "func")) !== null && _value$get !== void 0 ? _value$get : null;
      var selectProps = {
        value: funcKey,
        setValue: _this.setFunc,
        config: config,
        field: field,
        fieldType: fieldType,
        fieldSrc: fieldSrc,
        isLHS: isLHS,
        operator: operator,
        customProps: customProps,
        readonly: readonly,
        parentFuncs: parentFuncs,
        isFuncArg: isFuncArg,
        fieldDefinition: fieldDefinition,
        id: id,
        groupId: groupId
      };
      var _config$settings = config.settings,
        showLabels = _config$settings.showLabels,
        funcLabel = _config$settings.funcLabel;
      var widgetLabel = showLabels ? /*#__PURE__*/_react["default"].createElement("label", {
        className: "rule--label"
      }, funcLabel) : null;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "func",
        className: "rule--func"
      }, widgetLabel, /*#__PURE__*/_react["default"].createElement(_FuncSelect["default"], selectProps));
    };
    _this.renderArgLabel = function (argKey, argDefinition) {
      var valueSources = argDefinition.valueSources,
        type = argDefinition.type,
        showPrefix = argDefinition.showPrefix,
        label = argDefinition.label;
      var config = _this.props.config;
      var isConst = valueSources && valueSources.length == 1 && valueSources[0] == "const";
      var forceShow = !config.settings.showLabels && (type == "boolean" || isConst) && showPrefix;
      if (!forceShow) return null;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        className: "rule--func--arg-label"
      }, label || argKey);
    };
    _this.renderArgLabelSep = function (argKey, argDefinition) {
      var valueSources = argDefinition.valueSources,
        type = argDefinition.type,
        showPrefix = argDefinition.showPrefix;
      var config = _this.props.config;
      var isConst = valueSources && valueSources.length == 1 && valueSources[0] == "const";
      var forceShow = !config.settings.showLabels && (type == "boolean" || isConst) && showPrefix;
      if (!forceShow) return null;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        className: "rule--func--arg-label-sep"
      }, ":");
    };
    _this.renderArgVal = function (funcKey, argKey, argDefinition) {
      var _this$props5 = _this.props,
        config = _this$props5.config,
        field = _this$props5.field,
        fieldType = _this$props5.fieldType,
        fieldSrc = _this$props5.fieldSrc,
        isLHS = _this$props5.isLHS,
        operator = _this$props5.operator,
        value = _this$props5.value,
        readonly = _this$props5.readonly,
        parentFuncs = _this$props5.parentFuncs,
        id = _this$props5.id,
        groupId = _this$props5.groupId,
        fieldError = _this$props5.fieldError,
        valueError = _this$props5.valueError,
        setFuncValue = _this$props5.setFuncValue,
        parentDelta = _this$props5.parentDelta;
      var arg = value ? value.getIn(["args", argKey]) : null;
      var argVal = arg ? arg.get("value") : undefined;
      var defaultValueSource = argDefinition.valueSources.length == 1 ? argDefinition.valueSources[0] : undefined;
      var argValSrc = arg ? arg.get("valueSrc") || defaultValueSource || "value" : defaultValueSource;
      var asyncListValues = arg === null || arg === void 0 ? void 0 : arg.get("asyncListValues");
      var widgetProps = {
        config: config,
        fieldFunc: funcKey,
        fieldArg: argKey,
        leftField: field,
        fieldType: fieldType,
        // type of leftField
        fieldSrc: fieldSrc,
        // src of leftField
        fieldError: fieldError,
        // error in LHS
        valueError: valueError,
        // error in RHS
        isLHS: isLHS,
        operator: null,
        value: argVal,
        valueSrc: argValSrc,
        asyncListValues: asyncListValues,
        setValue: _this.setArgValue,
        setValueSrc: _this.setArgValueSrc,
        setFuncValue: setFuncValue,
        funcKey: funcKey,
        argKey: argKey,
        argDefinition: argDefinition,
        readonly: readonly,
        parentFuncs: parentFuncs,
        id: id,
        groupId: groupId,
        parentDelta: parentDelta
      };
      //tip: value & valueSrc will be converted to Immutable.List at <Widget>

      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        className: "rule--func--arg-value"
      }, /*#__PURE__*/_react["default"].createElement(ArgWidget, widgetProps));
    };
    _this.renderArgSep = function (argKey, argDefinition, argIndex, _ref) {
      var renderSeps = _ref.renderSeps;
      if (!argIndex) return null;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        className: "rule--func--arg-sep"
      }, renderSeps ? renderSeps[argIndex - 1] : ", ");
    };
    _this.renderBracketBefore = function (_ref2) {
      var renderBrackets = _ref2.renderBrackets;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "before_args",
        className: "rule--func--bracket-before"
      }, renderBrackets ? renderBrackets[0] : "(");
    };
    _this.renderBracketAfter = function (_ref3) {
      var renderBrackets = _ref3.renderBrackets;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "after_args",
        className: "rule--func--bracket-after"
      }, renderBrackets ? renderBrackets[1] : ")");
    };
    _this.renderFuncArgs = function () {
      var _this$meta = _this.meta,
        funcDefinition = _this$meta.funcDefinition,
        funcKey = _this$meta.funcKey;
      if (!funcKey) return null;
      var _ref4 = funcDefinition || {},
        args = _ref4.args;
      if (!args) return null;
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _this.renderBracketBefore(funcDefinition), /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        key: "args-".concat(funcKey),
        className: "rule--func--args rule--func--".concat(funcKey, "--args")
      }, Object.keys(args).map(function (argKey, argIndex) {
        return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
          key: "arg-".concat(argKey, "-").concat(argIndex),
          className: "rule--func--arg rule--func--".concat(funcKey, "--arg--").concat(argKey)
        }, _this.renderArgSep(argKey, args[argKey], argIndex, funcDefinition), _this.renderArgLabel(argKey, args[argKey]), _this.renderArgLabelSep(argKey, args[argKey]), _this.renderArgVal(funcKey, argKey, args[argKey]));
      })), _this.renderBracketAfter(funcDefinition));
    };
    (0, _reactUtils.useOnPropsChanged)(_this);
    _this.onPropsChanged(props);
    return _this;
  }
  (0, _inherits2["default"])(FuncWidget, _Component);
  return (0, _createClass2["default"])(FuncWidget, [{
    key: "onPropsChanged",
    value: function onPropsChanged(nextProps) {
      var prevProps = this.props;
      var keysForMeta = ["config", "field", "operator", "value", "fieldSrc", "fieldType", "isLHS"];
      var needUpdateMeta = !this.meta || keysForMeta.map(function (k) {
        return k === "parentFuncs" ? !shallowEqual(nextProps[k], prevProps[k], true) : nextProps[k] !== prevProps[k];
      }).filter(function (ch) {
        return ch;
      }).length > 0;
      if (needUpdateMeta) {
        this.meta = this.getMeta(nextProps);
      }
    }
  }, {
    key: "getMeta",
    value: function getMeta(_ref5) {
      var _value$get3, _value$get4;
      var config = _ref5.config,
        field = _ref5.field,
        operator = _ref5.operator,
        value = _ref5.value;
      var funcKey = (_value$get3 = value === null || value === void 0 || (_value$get4 = value.get) === null || _value$get4 === void 0 ? void 0 : _value$get4.call(value, "func")) !== null && _value$get3 !== void 0 ? _value$get3 : null;
      var funcDefinition = funcKey ? getFuncConfig(config, funcKey) : null;
      return {
        funcDefinition: funcDefinition,
        funcKey: funcKey
      };
    }
  }, {
    key: "render",
    value: function render() {
      var parentFuncs = this.props.parentFuncs;
      var funcPath = parentFuncs ? parentFuncs.map(function (_ref6) {
        var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
          f = _ref7[0],
          a = _ref7[1];
        return "".concat(f, "_").concat(a);
      }).join("-") : "root";
      var funcLevel = (parentFuncs === null || parentFuncs === void 0 ? void 0 : parentFuncs.length) || 0;
      return /*#__PURE__*/_react["default"].createElement(_utils.Col, {
        className: "rule--func--wrapper rule--func--wrapper--under-".concat(funcPath, " rule--func--wrapper--lev-").concat(funcLevel)
      }, this.renderFuncSelect(), this.renderFuncArgs());
    }
  }]);
}(_react.Component);
FuncWidget.propTypes = {
  id: _propTypes["default"].string,
  groupId: _propTypes["default"].string,
  config: _propTypes["default"].object.isRequired,
  field: _propTypes["default"].any,
  fieldSrc: _propTypes["default"].string,
  fieldType: _propTypes["default"].string,
  fieldError: _propTypes["default"].string,
  operator: _propTypes["default"].string,
  customProps: _propTypes["default"].object,
  value: _propTypes["default"].object,
  //instanceOf(Immutable.Map) //with keys 'func' and `args`
  setValue: _propTypes["default"].func.isRequired,
  setFuncValue: _propTypes["default"].func,
  readonly: _propTypes["default"].bool,
  parentFuncs: _propTypes["default"].array,
  parentDelta: _propTypes["default"].number,
  fieldDefinition: _propTypes["default"].object,
  isFuncArg: _propTypes["default"].bool,
  isLHS: _propTypes["default"].bool,
  valueError: _propTypes["default"].string
};
var ArgWidget = /*#__PURE__*/function (_Component2) {
  function ArgWidget(props) {
    var _this2;
    (0, _classCallCheck2["default"])(this, ArgWidget);
    _this2 = _callSuper(this, ArgWidget, [props]);
    _this2.setValue = function (_delta, value, widgetType, asyncListValues, _meta) {
      var _this2$props = _this2.props,
        setValue = _this2$props.setValue,
        argKey = _this2$props.argKey;
      setValue(argKey, value, widgetType, asyncListValues, _meta);
    };
    _this2.setValueSrc = function (_delta, valueSrc, _meta) {
      var _this2$props2 = _this2.props,
        setValueSrc = _this2$props2.setValueSrc,
        argKey = _this2$props2.argKey;
      setValueSrc(argKey, valueSrc, _meta);
    };
    (0, _reactUtils.useOnPropsChanged)(_this2);
    _this2.onPropsChanged(props);
    return _this2;
  }
  (0, _inherits2["default"])(ArgWidget, _Component2);
  return (0, _createClass2["default"])(ArgWidget, [{
    key: "onPropsChanged",
    value: function onPropsChanged(nextProps) {
      var prevProps = this.props;
      var keysForMeta = ["parentFuncs", "funcKey", "argKey"];
      var needUpdateMeta = !this.meta || keysForMeta.map(function (k) {
        return k === "parentFuncs" ? !shallowEqual(nextProps[k], prevProps[k], true) : nextProps[k] !== prevProps[k];
      }).filter(function (ch) {
        return ch;
      }).length > 0;
      if (needUpdateMeta) {
        this.meta = this.getMeta(nextProps);
      }
    }
  }, {
    key: "getMeta",
    value: function getMeta(_ref8) {
      var parentFuncs = _ref8.parentFuncs,
        funcKey = _ref8.funcKey,
        argKey = _ref8.argKey;
      var newParentFuncs = [].concat((0, _toConsumableArray2["default"])(parentFuncs || []), [[funcKey, argKey]]);
      return {
        parentFuncs: newParentFuncs
      };
    }
  }, {
    key: "render",
    value: function render() {
      var parentFuncs = this.meta.parentFuncs;
      return /*#__PURE__*/_react["default"].createElement(_Widget["default"], (0, _extends2["default"])({}, this.props, {
        parentDelta: this.props.parentDelta,
        setValue: this.setValue,
        setValueSrc: this.setValueSrc,
        isFuncArg: true,
        parentFuncs: parentFuncs
      }));
    }
  }]);
}(_react.Component);
ArgWidget.propTypes = {
  funcKey: _propTypes["default"].string.isRequired,
  argKey: _propTypes["default"].string.isRequired,
  setValue: _propTypes["default"].func.isRequired,
  setValueSrc: _propTypes["default"].func.isRequired,
  readonly: _propTypes["default"].bool,
  isLHS: _propTypes["default"].bool,
  parentFuncs: _propTypes["default"].array,
  id: _propTypes["default"].string,
  groupId: _propTypes["default"].string
};