@react-awesome-query-builder/antd/esm/widgets/core/FieldDropdown.js

User-friendly query builder for React. AntDesign widgets

import _extends from "@babel/runtime/helpers/extends";
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, { PureComponent } from "react";
import PropTypes from "prop-types";
import omit from "lodash/omit";
import { Menu, Dropdown, Tooltip, Button } from "antd";
var SubMenu = Menu.SubMenu;
var MenuItem = Menu.Item;
import { DownOutlined } from "@ant-design/icons";
var FieldDropdown = /*#__PURE__*/function (_PureComponent) {
  function FieldDropdown() {
    var _this;
    _classCallCheck(this, FieldDropdown);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, FieldDropdown, [].concat(args));
    _this.onChange = function (_ref) {
      var key = _ref.key,
        keyPath = _ref.keyPath;
      _this.props.setField(key);
    };
    return _this;
  }
  _inherits(FieldDropdown, _PureComponent);
  return _createClass(FieldDropdown, [{
    key: "renderMenuItems",
    value: function renderMenuItems(fields) {
      var _this2 = this;
      return fields.map(function (field) {
        var items = field.items,
          key = field.key,
          path = field.path,
          label = field.label,
          fullLabel = field.fullLabel,
          altLabel = field.altLabel,
          tooltip = field.tooltip,
          disabled = field.disabled,
          matchesType = field.matchesType;
        var pathKey = path || key;
        var optionText = matchesType ? /*#__PURE__*/React.createElement("b", null, label) : label;
        var option = tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
          title: tooltip
        }, optionText) : optionText;
        if (items) {
          return /*#__PURE__*/React.createElement(SubMenu, {
            key: pathKey,
            title: /*#__PURE__*/React.createElement("span", null, option, " \xA0\xA0\xA0\xA0")
          }, _this2.renderMenuItems(items));
        } else {
          return /*#__PURE__*/React.createElement(MenuItem, {
            key: pathKey,
            disabled: disabled
          }, option);
        }
      });
    }
  }, {
    key: "renderMenuToggler",
    value: function renderMenuToggler(togglerLabel, tooltipText, config, readonly, errorText) {
      var toggler = /*#__PURE__*/React.createElement(Button, {
        size: config.settings.renderSize,
        disabled: readonly,
        danger: !!errorText
      }, togglerLabel, " ", /*#__PURE__*/React.createElement(DownOutlined, null));
      if (tooltipText) {
        toggler = /*#__PURE__*/React.createElement(Tooltip, {
          placement: "top",
          title: tooltipText
        }, toggler);
      }
      return toggler;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
        config = _this$props.config,
        customProps = _this$props.customProps,
        items = _this$props.items,
        placeholder = _this$props.placeholder,
        errorText = _this$props.errorText,
        selectedKeys = _this$props.selectedKeys,
        selectedLabel = _this$props.selectedLabel,
        selectedOpts = _this$props.selectedOpts,
        readonly = _this$props.readonly,
        selectedAltLabel = _this$props.selectedAltLabel,
        selectedFullLabel = _this$props.selectedFullLabel;
      var fieldMenuItems = this.renderMenuItems(items);
      var fieldMenu = /*#__PURE__*/React.createElement(Menu
      //size={config.settings.renderSize}
      , _extends({
        selectedKeys: selectedKeys,
        onClick: this.onChange
      }, omit(customProps, ["showSearch"])), fieldMenuItems);
      var togglerLabel = selectedAltLabel || selectedLabel || placeholder;
      var tooltipText = selectedFullLabel;
      if (tooltipText == selectedLabel) tooltipText = null;
      var fieldToggler = this.renderMenuToggler(togglerLabel, tooltipText, config, readonly, errorText);
      return readonly ? fieldToggler : /*#__PURE__*/React.createElement(Dropdown, {
        overlay: fieldMenu,
        trigger: ["click"],
        placement: config.settings.dropdownPlacement
      }, fieldToggler);
    }
  }]);
}(PureComponent);
FieldDropdown.propTypes = {
  config: PropTypes.object.isRequired,
  customProps: PropTypes.object,
  errorText: PropTypes.string,
  items: PropTypes.array.isRequired,
  placeholder: PropTypes.string,
  selectedKey: PropTypes.string,
  selectedKeys: PropTypes.array,
  selectedPath: PropTypes.array,
  selectedLabel: PropTypes.string,
  selectedAltLabel: PropTypes.string,
  selectedFullLabel: PropTypes.string,
  selectedOpts: PropTypes.object,
  readonly: PropTypes.bool,
  //actions
  setField: PropTypes.func.isRequired
};
export { FieldDropdown as default };