@krowdy-ui/views/Search/Search.js

React components that implement Google's Material Design.

"use strict";

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

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

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

var _icons = require("@material-ui/icons");

var _clsx = _interopRequireDefault(require("clsx"));

var _excluded = ["classes", "className", "type"];

var styles = function styles(theme) {
  return {
    icon: {
      color: theme.palette.grey[600],
      fontSize: 18,
      marginRight: theme.spacing(1)
    },
    inputBase: {
      flex: 1,
      fontSize: 14,
      fontStyle: 'normal',
      fontWeight: 'normal',
      lineHeight: 16,
      marginLeft: theme.spacing(1.375)
    },
    paperBottomPrimary: {
      '&:active': {
        borderBottom: "1px solid ".concat(theme.palette.grey[500])
      },
      '&:focus': {
        borderBottom: "1px solid ".concat(theme.palette.primary[600])
      },
      '&:hover': {
        borderBottom: "1px solid ".concat(theme.palette.primary[400])
      },
      alignItems: 'center',
      background: theme.palette.primary['contrastText'],
      borderBottom: "1px solid ".concat(theme.palette.grey[400]),
      display: 'flex',
      minHeight: 40,
      width: '100%'
    },
    paperPrimary: {
      '&:active': {
        border: "1px solid ".concat(theme.palette.grey[500])
      },
      '&:focus': {
        border: "1px solid ".concat(theme.palette.primary[600])
      },
      '&:hover': {
        border: "1px solid ".concat(theme.palette.primary[400])
      },
      alignItems: 'center',
      background: theme.palette.primary['contrastText'],
      border: "1px solid ".concat(theme.palette.grey[400]),
      borderRadius: 4,
      boxShadow: 'none',
      boxSizing: 'border-box',
      display: 'flex',
      minHeight: 40,
      width: '100%'
    }
  };
};

exports.styles = styles;

var _ref = /*#__PURE__*/_react["default"].createElement(_icons.Search, null);

var Search = function Search(props) {
  var classes = props.classes,
      className = props.className,
      _props$type = props.type,
      type = _props$type === void 0 ? '' : _props$type,
      restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(type === 'border-bottom' ? classes.paperBottomPrimary : classes.paperPrimary, className)
  }, /*#__PURE__*/_react["default"].createElement(_core.InputBase, (0, _extends2["default"])({
    className: classes.inputBase,
    endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
      className: classes.icon
    }, _ref),
    inputProps: {
      'aria-label': 'search'
    }
  }, restProps)));
};

process.env.NODE_ENV !== "production" ? Search.propTypes = {
  classes: _propTypes["default"].object,
  searchIcon: _propTypes["default"].node,
  type: _propTypes["default"].string
} : void 0;
Search.muiName = 'Search';

var _default = (0, _styles.withStyles)(styles, {
  name: 'KrowdySearch'
})(Search);

exports["default"] = _default;