@react-awesome-query-builder/ui/esm/components/widgets/vanilla/core/VanillaFieldSelect.js

User-friendly query builder for React. Core React UI

import React from "react";
export default (function (_ref) {
  var items = _ref.items,
    setField = _ref.setField,
    selectedKey = _ref.selectedKey,
    readonly = _ref.readonly,
    errorText = _ref.errorText;
  var _renderOptions = function renderOptions(fields) {
    return fields.map(function (field) {
      var items = field.items,
        path = field.path,
        label = field.label,
        disabled = field.disabled,
        matchesType = field.matchesType;
      if (items) {
        return /*#__PURE__*/React.createElement("optgroup", {
          disabled: disabled,
          key: path,
          label: label
        }, _renderOptions(items));
      } else {
        var style = matchesType ? {
          fontWeight: "bold"
        } : {};
        return /*#__PURE__*/React.createElement("option", {
          disabled: disabled,
          key: path,
          value: path,
          style: style
        }, label);
      }
    });
  };
  var onChange = function onChange(e) {
    return setField(e.target.value);
  };
  var hasValue = selectedKey != null;
  return /*#__PURE__*/React.createElement("select", {
    onChange: onChange,
    value: hasValue ? selectedKey : "",
    disabled: readonly,
    style: {
      color: errorText ? "red" : null
    }
  }, !hasValue && /*#__PURE__*/React.createElement("option", {
    disabled: true,
    value: ""
  }), _renderOptions(items));
});