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

EGroup Team react component modules.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _core = require("@material-ui/core");

var _TextField = _interopRequireDefault(require("@e-group/material/TextField"));

var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

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

  const _useState = (0, _react.useState)(false),
        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];

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

var _default = SearchBar;
exports.default = _default;