@mongodb-js/mongodb-ui-components/src/nav/search.js

A collection of frequently used functional UI components found on mongodb properties

import {h, Component} from 'preact'
import {searchIcon} from './icons'

export class Search extends Component {
  constructor (props) {
    super(props)

    this.state = {
      hover: false,
      searching: false
    }
  }

  onSearchClick () {
    let searching = this.state.searching

    const {value} = this.input

    if (searching && value !== '') {
      location.href = `/search?addsearch=${value}`
    } else {
      searching = !searching
      this.setState({searching}, () => {
        this.input.focus()
      })
    }

    this.props.onSearchClick(searching)
  }
  
  cancelSearch () {
    this.input.value = ''
    this.setState({searching: false})
    setTimeout(this.props.onSearchClick, 200, false)
  }

  render ({mobile}, {hover, searching}) {
    return (
      <div class='fl fl-center w-full'>
        <span onClick={(e) => {
          return searching || mobile ? this.onSearchClick() : null
        }}>
          <div class='h-25' style={mobile ? {} : {
            transition: '200ms',
            cursor: 'pointer',
            width: searching || hover ? '25px' : '0px',
            opacity: searching || hover ? '1' : '0',
            transform: !mobile && !searching
              ? 'scale(0.55) translateY(-1px)'
              : 'scale(0.8)',
            zIndex: searching || hover ? '1' : '0'
          }}>
            {searchIcon}
          </div>
        </span>
        
        {mobile !== true &&
        <p class='m-r-10'
          onMouseEnter={() => this.setState({hover: true})}
          onMouseLeave={() => this.setState({hover: false})}
          onClick={() =>
            searching || mobile ? null : this.onSearchClick()
          }
          style={{
            cursor: 'pointer',
            color: '#798186',
            fontSize: '14px',
            width: searching ? '0px' : '',
            opacity: searching ? '0' : '1',
            zIndex: searching ? '1' : '0'
          }}>Search</p>}

        <input
          ref={(el) => { this.input = el }}
          onKeyDown={(e) => { if (e.keyCode === 13) this.onSearchClick() }}
          onBlur={() => {
            setTimeout(() => this.cancelSearch(), 100)
          }}
          style={{
            '-webkit-appearance': 'none',
            display: 'inline',
            border: '0',
            borderRadius: '0',
            outline: '0',
            borderBottom: '1px solid #bbb',
            fontSize: '16px',
            margin: searching
              ? `0px 30px 0 ${mobile ? '15px' : '0'}`
              : '0 10px',
            padding: '5px 0',
            transition: '500ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
            width: searching ? `${mobile ? (window.innerWidth - 150) : 300}px` : '0px'
          }} />
      </div>
    )
  }
}