message: Makes SearchInput icon states more configurable; supports flex
diff: -import React, { Component } from 'react';
  +import React, { PureComponent } from 'react';
  import PropTypes from 'prop-types';
  import styled from 'styled-components';
  import { isEmpty, debounce, pick, omit } from 'underscore';
  @@ -9,7 +9,7 @@ import Box from 'react/components/UI/Box';
  import Icons from 'react/components/UI/Icons';
  import { Input } from 'react/components/UI/Inputs';
  -const OUTER_PROPS_KEYS = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my'];
  +const OUTER_PROPS_KEYS = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'flex'];
  const Icon = styled.div`
  display: flex;
  @@ -23,7 +23,7 @@ const Icon = styled.div`
  cursor: pointer;
  `;
  -class SearchInput extends Component {
  +class SearchInput extends PureComponent {
  static propTypes = {
  query: PropTypes.string,
  onFocus: PropTypes.func,
  @@ -35,6 +35,11 @@ class SearchInput extends Component {
  PropTypes.func,
  PropTypes.shape({ current: PropTypes.any }),
  ]),
  + iconMap: PropTypes.shape({
  + resting: PropTypes.string,
  + hover: PropTypes.string,
  + active: PropTypes.string,
  + }),
  }
  static defaultProps = {
  @@ -45,6 +50,11 @@ class SearchInput extends Component {
  onDebouncedQueryChange: () => {},
  debounceWait: 250,
  forwardRef: null,
  + iconMap: {
  + resting: 'MagnifyingGlass',
  + hover: 'MagnifyingGlass',
  + active: 'X',
  + },
  }
  constructor(props) {
  @@ -55,7 +65,7 @@ class SearchInput extends Component {
  this.handleDebouncedQueryChange = debounce(onDebouncedQueryChange, debounceWait);
  this.state = {
  - mode: 'resting',
  + mode: props.query && props.query !== '' ? 'active' : 'resting',
  query: props.query,
  };
  }
  @@ -99,6 +109,7 @@ class SearchInput extends Component {
  onDebouncedQueryChange: _onDebouncedQueryChange,
  debounceWait: _debounceWait,
  forwardRef,
  + iconMap,
  ...rest
  } = this.props;
  @@ -108,14 +119,17 @@ class SearchInput extends Component {
  const innerProps = omit(rest, ...OUTER_PROPS_KEYS);
  return (
  - <Box position="relative" ref={forwardRef} {...outerProps}>
  + <Box
  + position="relative"
  + ref={forwardRef}
  + {...outerProps}
  + >
  <Icon onClick={this.handleReset}>
  <Icons
  + width="1.5em"
  + height="0.88em"
  color="gray.medium"
  - name={{
  - resting: 'MagnifyingGlass',
  - active: 'X',
  - }[mode]}
  + name={iconMap[mode]}
  />
  </Icon>
  