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

User-friendly query builder for React. Core React UI

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 Field from "./Field";
import { Col } from "../utils";
import FuncWidget from "./FuncWidget";
import { useOnPropsChanged } from "../../utils/reactUtils";
var FieldWrapper = /*#__PURE__*/function (_Component) {
  function FieldWrapper(props) {
    var _this;
    _classCallCheck(this, FieldWrapper);
    _this = _callSuper(this, FieldWrapper, [props]);
    _this.renderField = function () {
      var _this$props = _this.props,
        config = _this$props.config,
        classname = _this$props.classname,
        selectedField = _this$props.selectedField,
        selectedFieldSrc = _this$props.selectedFieldSrc,
        selectedFieldType = _this$props.selectedFieldType,
        setField = _this$props.setField,
        setFuncValue = _this$props.setFuncValue,
        parentField = _this$props.parentField,
        readonly = _this$props.readonly,
        id = _this$props.id,
        groupId = _this$props.groupId,
        fieldError = _this$props.fieldError,
        valueError = _this$props.valueError;
      var supportedFieldSrcs = ["func", "field"];
      if (!supportedFieldSrcs.includes(selectedFieldSrc)) {
        return "?";
      }
      var field = selectedFieldSrc === "func" ? /*#__PURE__*/React.createElement(FuncWidget, {
        isLHS: true,
        config: config,
        value: selectedField,
        fieldSrc: selectedFieldSrc,
        fieldType: selectedFieldType,
        fieldError: fieldError,
        valueError: valueError,
        parentField: parentField,
        setValue: setField,
        setFuncValue: setFuncValue,
        readonly: readonly,
        id: id,
        groupId: groupId,
        key: "field-func-" + id
      }) : /*#__PURE__*/React.createElement(Field, {
        config: config,
        selectedField: selectedField,
        selectedFieldSrc: selectedFieldSrc,
        selectedFieldType: selectedFieldType,
        parentField: parentField,
        setField: setField,
        customProps: config.settings.customFieldSelectProps,
        readonly: readonly,
        id: id,
        groupId: groupId,
        key: "field-" + id
      });
      var fieldLabel = selectedFieldSrc === "func" ? config.settings.funcLabel : config.settings.fieldLabel;
      var label = config.settings.showLabels && selectedFieldSrc !== "func" && /*#__PURE__*/React.createElement("label", {
        className: "rule--label"
      }, fieldLabel);
      return /*#__PURE__*/React.createElement("div", {
        key: selectedFieldSrc,
        className: classname
      }, label, field);
    };
    _this.renderFieldSources = function () {
      if (!_this.meta) return null;
      var _this$props2 = _this.props,
        config = _this$props2.config,
        readonly = _this$props2.readonly,
        selectedFieldSrc = _this$props2.selectedFieldSrc,
        setFieldSrc = _this$props2.setFieldSrc,
        id = _this$props2.id;
      var fieldSourcesOptions = _this.meta.fieldSourcesOptions;
      var settings = config.settings;
      var ValueSources = _this.ValueSources;
      var sourceLabel = settings.showLabels ? /*#__PURE__*/React.createElement("label", {
        className: "rule--label"
      }, "\xA0") : null;
      return fieldSourcesOptions.length > 1 && !readonly && /*#__PURE__*/React.createElement("div", {
        key: "fieldsrc",
        className: "rule--fieldsrc"
      }, sourceLabel, /*#__PURE__*/React.createElement(ValueSources, {
        key: "fieldsrc-" + id,
        valueSources: fieldSourcesOptions,
        valueSrc: selectedFieldSrc,
        config: config,
        setValueSrc: setFieldSrc,
        readonly: readonly,
        title: settings.fieldSourcesPopupTitle
      }));
    };
    useOnPropsChanged(_this);
    _this.onPropsChanged(props);
    return _this;
  }
  _inherits(FieldWrapper, _Component);
  return _createClass(FieldWrapper, [{
    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"];
      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 renderValueSources = config.settings.renderValueSources;
        this.ValueSources = function (pr) {
          return renderValueSources(pr, config.ctx);
        };
      }
    }
  }, {
    key: "getMeta",
    value: function getMeta(_ref) {
      var config = _ref.config;
      var defaultValueSourcesLabels = {
        value: "Value",
        field: "Field",
        func: "Function"
      };
      var _config$settings = config.settings,
        valueSourcesInfo = _config$settings.valueSourcesInfo,
        fieldSources = _config$settings.fieldSources;
      var fieldSourcesOptions = fieldSources.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
        }];
      });
      return {
        fieldSourcesOptions: fieldSourcesOptions
      };
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
        classname = _this$props3.classname,
        canSelectFieldSource = _this$props3.canSelectFieldSource;
      var fieldSources = canSelectFieldSource && this.renderFieldSources();
      var field = this.renderField();
      if (!canSelectFieldSource) {
        return field;
      } else {
        return /*#__PURE__*/React.createElement(Col, {
          className: "rule--field-wrapper"
        }, fieldSources, field);
      }
    }
  }]);
}(Component);
export { FieldWrapper as default };