@react-awesome-query-builder/ui/esm/components/rule/FuncWidget.js

User-friendly query builder for React. Core React UI

import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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, PureComponent } from "react";
import { Utils } from "@react-awesome-query-builder/core";
import PropTypes from "prop-types";
import FuncSelect from "./FuncSelect";
import Widget from "./Widget";
import { Col, getWidgetId } from "../utils";
import { useOnPropsChanged } from "../../utils/reactUtils";
var getFuncConfig = Utils.ConfigUtils.getFuncConfig;
var shallowEqual = Utils.OtherUtils.shallowEqual;
var FuncWidget = /*#__PURE__*/function (_Component) {
  function FuncWidget(props) {
    var _this;
    _classCallCheck(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 = 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.createElement("label", {
        className: "rule--label"
      }, funcLabel) : null;
      return /*#__PURE__*/React.createElement(Col, {
        key: "func",
        className: "rule--func"
      }, widgetLabel, /*#__PURE__*/React.createElement(FuncSelect, 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.createElement(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.createElement(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.createElement(Col, {
        className: "rule--func--arg-value"
      }, /*#__PURE__*/React.createElement(ArgWidget, widgetProps));
    };
    _this.renderArgSep = function (argKey, argDefinition, argIndex, _ref) {
      var renderSeps = _ref.renderSeps;
      if (!argIndex) return null;
      return /*#__PURE__*/React.createElement(Col, {
        className: "rule--func--arg-sep"
      }, renderSeps ? renderSeps[argIndex - 1] : ", ");
    };
    _this.renderBracketBefore = function (_ref2) {
      var renderBrackets = _ref2.renderBrackets;
      return /*#__PURE__*/React.createElement(Col, {
        key: "before_args",
        className: "rule--func--bracket-before"
      }, renderBrackets ? renderBrackets[0] : "(");
    };
    _this.renderBracketAfter = function (_ref3) {
      var renderBrackets = _ref3.renderBrackets;
      return /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, _this.renderBracketBefore(funcDefinition), /*#__PURE__*/React.createElement(Col, {
        key: "args-".concat(funcKey),
        className: "rule--func--args rule--func--".concat(funcKey, "--args")
      }, Object.keys(args).map(function (argKey, argIndex) {
        return /*#__PURE__*/React.createElement(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));
    };
    useOnPropsChanged(_this);
    _this.onPropsChanged(props);
    return _this;
  }
  _inherits(FuncWidget, _Component);
  return _createClass(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 = _slicedToArray(_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.createElement(Col, {
        className: "rule--func--wrapper rule--func--wrapper--under-".concat(funcPath, " rule--func--wrapper--lev-").concat(funcLevel)
      }, this.renderFuncSelect(), this.renderFuncArgs());
    }
  }]);
}(Component);
FuncWidget.propTypes = {
  id: PropTypes.string,
  groupId: PropTypes.string,
  config: PropTypes.object.isRequired,
  field: PropTypes.any,
  fieldSrc: PropTypes.string,
  fieldType: PropTypes.string,
  fieldError: PropTypes.string,
  operator: PropTypes.string,
  customProps: PropTypes.object,
  value: PropTypes.object,
  //instanceOf(Immutable.Map) //with keys 'func' and `args`
  setValue: PropTypes.func.isRequired,
  setFuncValue: PropTypes.func,
  readonly: PropTypes.bool,
  parentFuncs: PropTypes.array,
  parentDelta: PropTypes.number,
  fieldDefinition: PropTypes.object,
  isFuncArg: PropTypes.bool,
  isLHS: PropTypes.bool,
  valueError: PropTypes.string
};
export { FuncWidget as default };
var ArgWidget = /*#__PURE__*/function (_Component2) {
  function ArgWidget(props) {
    var _this2;
    _classCallCheck(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);
    };
    useOnPropsChanged(_this2);
    _this2.onPropsChanged(props);
    return _this2;
  }
  _inherits(ArgWidget, _Component2);
  return _createClass(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(_toConsumableArray(parentFuncs || []), [[funcKey, argKey]]);
      return {
        parentFuncs: newParentFuncs
      };
    }
  }, {
    key: "render",
    value: function render() {
      var parentFuncs = this.meta.parentFuncs;
      return /*#__PURE__*/React.createElement(Widget, _extends({}, this.props, {
        parentDelta: this.props.parentDelta,
        setValue: this.setValue,
        setValueSrc: this.setValueSrc,
        isFuncArg: true,
        parentFuncs: parentFuncs
      }));
    }
  }]);
}(Component);
ArgWidget.propTypes = {
  funcKey: PropTypes.string.isRequired,
  argKey: PropTypes.string.isRequired,
  setValue: PropTypes.func.isRequired,
  setValueSrc: PropTypes.func.isRequired,
  readonly: PropTypes.bool,
  isLHS: PropTypes.bool,
  parentFuncs: PropTypes.array,
  id: PropTypes.string,
  groupId: PropTypes.string
};