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

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
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 const styles = theme => ({
  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 ${theme.palette.grey[500]}`
    },
    '&:focus': {
      borderBottom: `1px solid ${theme.palette.primary[600]}`
    },
    '&:hover': {
      borderBottom: `1px solid ${theme.palette.primary[400]}`
    },
    alignItems: 'center',
    background: theme.palette.primary['contrastText'],
    borderBottom: `1px solid ${theme.palette.grey[400]}`,
    display: 'flex',
    minHeight: 40,
    width: '100%'
  },
  paperPrimary: {
    '&:active': {
      border: `1px solid ${theme.palette.grey[500]}`
    },
    '&:focus': {
      border: `1px solid ${theme.palette.primary[600]}`
    },
    '&:hover': {
      border: `1px solid ${theme.palette.primary[400]}`
    },
    alignItems: 'center',
    background: theme.palette.primary['contrastText'],
    border: `1px solid ${theme.palette.grey[400]}`,
    borderRadius: 4,
    boxShadow: 'none',
    boxSizing: 'border-box',
    display: 'flex',
    minHeight: 40,
    width: '100%'
  }
});

var _ref = /*#__PURE__*/React.createElement(SearchIcon, null);

const Search = props => {
  const {
    classes,
    className,
    type = ''
  } = props,
        restProps = _objectWithoutPropertiesLoose(props, ["classes", "className", "type"]);

  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);