React Searchbox

gistfile1.js

import React, { Component } from 'react';

class Drawer extends Component {
  getDefaultProps() {
    return {
      payload: null,
      drawerOpened: false
    };
  };

  notFound() {
    return (
      (this.props.payload === false) &&
      <div className="c-not_found">Nothing found</div>
    );
  }

  render() {
    return (
      this.props.drawerOpened &&
      <div className="c-search-drawer">
        {this.notFound()}
        {this.props.payload}
      </div>
    );
  }

}

class Icon extends Component {
  getDefaultProps() {
    return {
      icon: null,
      onClick: null
    };
  }

  render() {
    return (
      <div className="c-ikon" onClick={this.props.onClick}>
        <div className={this.props.icon}>{this.props.icon}</div>
      </div>
    );
  }
}

class Form extends Component {
  getDefaultProps() {
    return {
      onSubmit: null,
      placeholder: null,
      invalidInput: null
    };
  }

  invalidInput() {
    return (
      this.props.invalidInput &&
      <div>3 letters</div>
    );
  }

  render() {
    return (
      <form className="c-search-form" onSubmit={this.props.onSubmit}>
        <div className="c-search-section">
        { this.invalidInput() }
        <input type="text"
          onChange={this.props.onChange}
          placeholder={this.props.placeholder} />
        <button type="submit">
          Search
        </button>
        </div>
      </form>
    );
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      state: 'default',
      payload: null,
      invalidInput: false,
      inputValue: '',
      drawerOpened: false
    };

    this.icons = {
      default: '_search',
               loading: '_loading',
               opened: '_opened',
               closed: '_closed'
    };
  }

  getDefaultProps(){
    return {
      placeholder: 'Barcode'
    };
  }

  getIcon() {
    return this.icons[this.state.state];
  }

  onIconClick() {
    console.log(this);
    if(this.state.state === 'opened') {
      if(this.state.payload) {
        this.setState({ state: 'closed' });
      } else {
        this.setState({ state: 'default' });
      }
      this.setState({ drawerOpened: false });
    } else if (this.state.state === 'closed') {
      this.setState({ state: 'opened', drawerOpened: true });
    }
  }

  onFormSubmit(e) {
    // tmp
    e.preventDefault();
    if (this.state.inputValue.length < 3) {
      this.setState({ invalidInput: true });
      e.preventDefault();
    } else {
      this.setState({ state: 'loading' });
    }
  }

  onFormChange(e) {
    var inputValue = e.target.value;
    this.setState({
      inputValue: inputValue
    });
    if(this.state.invalidInput && inputValue.length >= 3) {
      this.setState({ invalidInput: false });
    }
  }

  documentFound(e) {
    var payload = e.detail;
    var drawerOpened = payload ? true : false;
    var state = drawerOpened ? 'opened' : 'default';
    this.setState({
      state: state,
      payload: payload,
      drawerOpened: drawerOpened
    });
  }

  documentNotFound() {
    this.setState({ state: 'opened', payload: false, drawerOpened: true });
  }

  componentDidMount() {
    window.addEventListener('found', this.documentFound.bind(this));
    window.addEventListener('not_found', this.documentNotFound.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener('found');
    window.removeEventListener('not_found');
  }

  render() {
    return (
      <div className="c-search">
      <div className="c-search-icon">
        <Icon icon={this.getIcon()} onClick={this.onIconClick.bind(this)}/>
      </div>
      <Form
        placeholder={this.props.placeholder}
        invalidInput={this.state.invalidInput}
        inputValue={this.state.inputValue}
        onChange={this.onFormChange.bind(this)}
        onSubmit={this.onFormSubmit.bind(this)}
      />
      <Drawer payload={this.state.payload} drawerOpened={this.state.drawerOpened}/>

      <button onClick={function() { window.dispatchEvent(new CustomEvent('found', {detail: 'Payload'})); }}>
        Trigger found
      </button>
      <button onClick={function() { window.dispatchEvent(new CustomEvent('found')); }}>
        No payload
      </button>
      <button onClick={function() { window.dispatchEvent(new CustomEvent('not_found')); }}>
        Trigger not_found
      </button>
      </div>
    );
  }
}