@6thquake/react-material/es/Search/Search.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React, { Component } from 'react';
import withStyles from '../styles/withStyles';
import PropTypes from 'prop-types';
import SearchIcon from '@material-ui/icons/Search';
import classNames from 'classnames';

const styles = theme => ({
  root: {
    width: '100%',
    display: 'flex'
  },
  box: {
    display: 'flex',
    alignItems: 'center',
    background: 'rgba(0,0,0,0.1)',
    borderRadius: '1.3em',
    transition: 'all 0.5s'
  },
  alignRight: {
    justifyContent: 'flex-end'
  },
  input: _extends({
    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
    flex: 1,
    border: 'none',
    background: 'transparent',
    lineHeight: '2em',
    color: 'rgba(255,255,255,0.8)',
    outline: 'none',
    '&::-webkit-input-placeholder': {
      color: 'rgba(255,255,255,0.3)'
    },
    '&:-moz-placeholder': {
      color: 'rgba(255,255,255,0.3)'
    },
    '&::-moz-placeholder': {
      color: 'rgba(255,255,255,0.3)'
    },
    '&:-ms-input-placeholder': {
      color: 'rgba(255,255,255,0.3)'
    }
  }, theme.typography.body1),
  darkFont: {
    color: 'rgba(0,0,0,0.8)',
    '&::-webkit-input-placeholder': {
      color: 'rgba(0,0,0,0.3)'
    },
    '&:-moz-placeholder': {
      color: 'rgba(0,0,0,0.3)'
    },
    '&::-moz-placeholder': {
      color: 'rgba(0,0,0,0.3)'
    },
    '&:-ms-input-placeholder': {
      color: 'rgba(0,0,0,0.3)'
    }
  },
  iconWrap: {
    marginRight: theme.spacing(2),
    display: 'flex',
    alignItems: 'center'
  },
  icon: {
    color: 'rgba(255,255,255,0.3)'
  },
  darkIcon: {
    color: 'rgba(0,0,0,0.3)'
  }
});

class Search extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      focus: this.props.autoFocus
    };

    this.handleChange = e => {
      const {
        onChange
      } = this.props;
      onChange(e);
    };

    this.handleBlur = e => {
      this.setState({
        focus: false
      });
      this.props.onBlur(e);
    };

    this.handleFocus = e => {
      this.setState({
        focus: true
      });
      this.props.onFocus(e);
    };
  }

  render() {
    const {
      classes,
      isDark,
      floatRight,
      placeholder,
      value,
      autoFocus,
      scale,
      width
    } = this.props;
    const {
      focus
    } = this.state;
    const boxWidth = focus ? '100%' : `${String(100 * scale)}%`;
    const rootStyle = {
      width
    };
    const boxStyle = {
      width: boxWidth
    };
    return React.createElement("div", {
      style: rootStyle,
      className: classNames(classes.root, {
        [classes.alignRight]: floatRight
      })
    }, React.createElement("div", {
      style: boxStyle,
      className: classes.box
    }, React.createElement("input", {
      autoFocus: autoFocus,
      onBlur: this.handleBlur,
      onFocus: this.handleFocus,
      className: classNames(classes.input, {
        [classes.darkFont]: isDark
      }),
      value: value,
      onChange: this.handleChange,
      placeholder: placeholder
    }), React.createElement("div", {
      className: classes.iconWrap
    }, React.createElement(SearchIcon, {
      className: classNames(classes.icon, {
        [classes.darkIcon]: isDark
      })
    }))));
  }

}

process.env.NODE_ENV !== "production" ? Search.propTypes = {
  /**
   * float right
   */
  autoFocus: PropTypes.bool,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: PropTypes.object,

  /**
   * float right
   */
  floatRight: PropTypes.bool,

  /**
   * dark theme for light background
   */
  isDark: PropTypes.bool,

  /**
   * @ignore
   */
  onBlur: PropTypes.func,

  /**
   * callback function for search value changed;
   */
  onChange: PropTypes.func,

  /**
   * @ignore
   */
  onFocus: PropTypes.func,

  /**
   * placeholder
   */
  placeholder: PropTypes.string,
  // 'dark'

  /**
   * the scale of input box
   */
  scale: PropTypes.number,

  /**
   * value for search
   */
  value: PropTypes.string,

  /**
   * the width of search, default is 100%
   */
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
} : void 0;
Search.defaultProps = {
  floatRight: false,
  isDark: false,
  onChange: () => {},
  onBlur: () => {},
  onFocus: () => {},
  autoFocus: false,
  scale: 0.5,
  width: '100%'
};
export default withStyles(styles, {
  name: 'RMSearch'
})(Search);