@react-awesome-query-builder-dev/ui/esm/components/widgets/vanilla/value/VanillaMultiSelect.js

User-friendly query builder for React. Core React UI

import _extends from "@babel/runtime/helpers/extends";
import React from "react";
import { Utils } from "@react-awesome-query-builder-dev/core";
import omit from "lodash/omit";
var mapListValues = Utils.ListUtils.mapListValues;
export default (function (_ref) {
  var listValues = _ref.listValues,
    value = _ref.value,
    setValue = _ref.setValue,
    allowCustomValues = _ref.allowCustomValues,
    readonly = _ref.readonly,
    customProps = _ref.customProps;
  var renderOptions = function renderOptions() {
    return mapListValues(listValues, function (_ref2) {
      var title = _ref2.title,
        value = _ref2.value;
      return /*#__PURE__*/React.createElement("option", {
        key: value,
        value: value
      }, title);
    });
  };
  var getMultiSelectValues = function getMultiSelectValues(multiselect) {
    var values = [];
    var options = multiselect.options;
    for (var i = 0; i < options.length; i++) {
      var opt = options[i];
      if (opt.selected) {
        values.push(opt.value);
      }
    }
    if (!values.length) values = undefined; //not allow []
    return values;
  };
  var onChange = function onChange(e) {
    return setValue(getMultiSelectValues(e.target));
  };
  return /*#__PURE__*/React.createElement("select", _extends({
    multiple: true,
    onChange: onChange,
    value: value,
    disabled: readonly
  }, omit(customProps, ["showSearch", "input", "showCheckboxes"])), renderOptions());
});