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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["classes", "className", "type"];
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/styles';
import { InputBase, InputAdornment } from '@krowdy-ui/core';
import { Search as SearchIcon } from '@material-ui/icons';
import clsx from 'clsx';
export 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%'
    }
  };
};

var _ref = /*#__PURE__*/React.createElement(SearchIcon, 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 = _objectWithoutProperties(props, _excluded);

  return /*#__PURE__*/React.createElement("div", {
    className: clsx(type === 'border-bottom' ? classes.paperBottomPrimary : classes.paperPrimary, className)
  }, /*#__PURE__*/React.createElement(InputBase, _extends({
    className: classes.inputBase,
    endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
      className: classes.icon
    }, _ref),
    inputProps: {
      'aria-label': 'search'
    }
  }, restProps)));
};

process.env.NODE_ENV !== "production" ? Search.propTypes = {
  classes: PropTypes.object,
  searchIcon: PropTypes.node,
  type: PropTypes.string
} : void 0;
Search.muiName = 'Search';
export default withStyles(styles, {
  name: 'KrowdySearch'
})(Search);