alm-search-01/dist/components/Search/SearchBox.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

"use strict";

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

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

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

var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _brandStyles = _interopRequireDefault(require("../../utils/brandStyles"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    searchInput: {
      color: function color(getBrandStyles) {
        return getBrandStyles.dialogTextColor;
      },
      marginLeft: theme.spacing(1),
      flex: 1
    },
    searchContainer: {
      alignItems: "center",
      display: "flex",
      flex: 1
    },
    closeIcon: {
      color: function color(getBrandStyles) {
        return getBrandStyles.dialogTextColor;
      },
      marginRight: theme.spacing(-2)
    }
  };
});

var SearchBox = function SearchBox(_ref) {
  var value = _ref.value,
      _onChange = _ref.onChange,
      onClear = _ref.onClear,
      _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
      brand = _ref.brand;
  var classes = useStyles((0, _brandStyles.default)(brand));
  return _react.default.createElement("div", {
    className: classes.searchContainer
  }, _react.default.createElement(_InputBase.default, {
    value: value,
    className: classes.searchInput,
    placeholder: placeholder,
    onChange: function onChange(ev) {
      return _onChange(ev.target.value);
    }
  }), value ? _react.default.createElement(_IconButton.default, {
    onClick: onClear,
    className: classes.closeIcon,
    "aria-label": "clear"
  }, _react.default.createElement(_Close.default, null)) : null);
};

var _default = SearchBox;
exports.default = _default;