@makeen.io/material-ui-kit/distr/atoms/AutoComplete/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n  padding-right: 10px;\n  font-size: 18px;\n  path[fill] {\n    fill: #c5cee0;\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  .MuiAutocomplete-inputRoot[class*=\"MuiOutlinedInput-root\"]\n    .MuiAutocomplete-input {\n    padding: 5px;\n  }\n\n  .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon\n    .MuiAutocomplete-inputRoot[class*=\"MuiOutlinedInput-root\"] {\n    padding-right: 5px;\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  font-size: 1rem;\n  color: ", ";\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { Typography } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";
import { Autocomplete, createFilterOptions } from "@material-ui/lab";
import SearchIcon from "../../../assets/icons/search.svg";
import styled from "styled-components";
var filter = createFilterOptions();
var RenderNoOptionComponentWrapper = styled.div(_templateObject(),

function (props) {return props.theme.palette.text.secondary;});

var RenderNoOptionsComponent = function RenderNoOptionsComponent() {return /*#__PURE__*/React.createElement(RenderNoOptionComponentWrapper, null, "No more options");};
var AutocompleteWrapper = styled.div(_templateObject2());










var SearchIconWrapper = styled.div(_templateObject3());






export default (function (_ref) {var onChange = _ref.onChange,NoOptionsComponent = _ref.NoOptionsComponent,label = _ref.label,readOnly = _ref.readOnly,id = _ref.id,value = _ref.value,options = _ref.options,loading = _ref.loading,multiple = _ref.multiple,Icon = _ref.Icon,customRenderInput = _ref.customRenderInput,customRenderOptions = _ref.customRenderOptions,ListboxComponent = _ref.ListboxComponent,PaperComponent = _ref.PaperComponent;
  var onChangeHandler = React.useCallback(function (newVal, newValObj) {return onChange(value, newValObj);}, [onChange]);
  var NoOptions = NoOptionsComponent || /*#__PURE__*/React.createElement(RenderNoOptionsComponent, null);
  var handleChange = function handleChange(event, originalValue) {
    if (event && originalValue) {
      if (originalValue.value) {
        onChangeHandler(originalValue.value, originalValue);
      }
    } else
    {
      onChangeHandler(null);
    }
  };
  var filterOptions = function filterOptions(optns, params) {
    var filtered = filter(optns, params);
    if (filtered.length === 0) {
      filtered.unshift({ noOption: true });
    }
    return filtered;
  };
  var renderOption = function renderOption(_ref2) {var lbl = _ref2.label,noOption = _ref2.noOption;return noOption ? NoOptions : /*#__PURE__*/React.createElement(Typography, { noWrap: true }, lbl);};
  var renderInput = function renderInput(_ref3) {var InputProps = _ref3.InputProps,params = _objectWithoutProperties(_ref3, ["InputProps"]);return /*#__PURE__*/React.createElement(TextField, _extends({}, params, { placeholder: label, variant: "outlined", InputProps: _extends({},
      InputProps, {
        endAdornment: null,
        readOnly: !!readOnly,
        startAdornment: Icon === null ? null : /*#__PURE__*/React.createElement(SearchIconWrapper, null, Icon ? Icon : /*#__PURE__*/React.createElement(SearchIcon, null)) })
    }));};
  return /*#__PURE__*/React.createElement(AutocompleteWrapper, null, /*#__PURE__*/
  React.createElement(Autocomplete, { multiple: multiple, id: id, value: value, onChange: handleChange, options: customRenderOptions ?
    options :
    options.map(function (x) {
      return { label: x.label, noOption: x.noOption || null };
    }), ListboxComponent: ListboxComponent, PaperComponent: PaperComponent, renderInput: customRenderInput || renderInput, getOptionSelected: function getOptionSelected(option) {return option.value;}, getOptionLabel: function getOptionLabel(option) {return option.label || "";}, renderOption: customRenderOptions || renderOption, filterOptions: filterOptions, loading: loading }));
});
//# sourceMappingURL=index.js.map