@e-group/material-module/esm/SearchBar/SearchBar.js

EGroup Team react component modules.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { useCallback, useRef, useState } from 'react';
import { IconButton, RootRef, Popover, InputAdornment } from '@material-ui/core';
import TextField from '@e-group/material/TextField';
import FilterListIcon from '@material-ui/icons/FilterList';
import SearchIcon from '@material-ui/icons/Search';

const SearchBar = (_ref) => {
  let container = _ref.container,
      onSearchClick = _ref.onSearchClick,
      renderOptions = _ref.renderOptions,
      variant = _ref.variant,
      others = _objectWithoutProperties(_ref, ["container", "onSearchClick", "renderOptions", "variant"]);

  const _useState = useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];

  const rootEl = useRef(null);
  const handleDropDownOpen = useCallback(() => {
    setOpen(true);
  }, []);
  const handleDropDownClose = useCallback(() => {
    setOpen(false);
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, _extends({
    variant: variant
  }, others, {
    InputProps: {
      endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
        position: "end"
      }, /*#__PURE__*/React.createElement(IconButton, {
        type: "submit",
        onClick: onSearchClick
      }, /*#__PURE__*/React.createElement(SearchIcon, null)))
    }
  })), renderOptions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RootRef, {
    rootRef: rootEl
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: handleDropDownOpen
  }, /*#__PURE__*/React.createElement(FilterListIcon, null))), /*#__PURE__*/React.createElement(Popover, {
    open: open,
    container: container,
    anchorEl: rootEl.current,
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'right'
    },
    transformOrigin: {
      vertical: 'top',
      horizontal: 'right'
    },
    onClose: handleDropDownClose
  }, renderOptions({
    handleDropDownOpen,
    handleDropDownClose
  }))));
};

export default SearchBar;