ldx-widgets/dist/components/search_input.js

widgets

(function() {
  var Input, React, ReactDOM, SearchInput, Spinner, button, div, ref;

  React = require('react');

  ReactDOM = require('react-dom');

  Input = React.createFactory(require('./input_placeholder'));

  Spinner = React.createFactory(require('./spinner'));

  ref = React.DOM, div = ref.div, button = ref.button;


  /*
  Search Input Props
  
  @props.wrapClass - String - default: search-input-wrap
    className to apply to the div wrapper
  
  @props.placeholder - String - default: search
    placeholder text for searh field
  
  @props.height - Int - default: 18
    height of the inout
  
  @props.width - Int - default: 260
    width of the input
  
  @props.changeDelay - Int - default: 0
    ms delay before calling change handler
  
  @props.handleChange - function
    method to call when the search term changes
  
  @props.focusOnMount - Boolean - default: false
    whether or not the search input should focus immediately after mounting
  
  @props.term - String - default: ''
    the value of the search field when first rendered
   */

  SearchInput = React.createClass({
    displayName: 'SearchInput',
    getDefaultProps: function() {
      return {
        wrapClass: 'search-input-wrap',
        height: 28,
        width: 260,
        changeDelay: 0,
        placeholder: 'search',
        focusOnMount: false,
        term: '',
        loading: false,
        inputClass: '',
        defaultTerm: '',
        handleChange: function() {}
      };
    },
    render: function() {
      var autoComplete, disabled, handleChange, height, inputClass, loading, placeholder, ref1, term, width, wrapClass;
      ref1 = this.props, handleChange = ref1.handleChange, height = ref1.height, width = ref1.width, wrapClass = ref1.wrapClass, placeholder = ref1.placeholder, loading = ref1.loading, inputClass = ref1.inputClass, autoComplete = ref1.autoComplete, disabled = ref1.disabled;
      term = this.state.term;
      autoComplete = (function() {
        switch (typeof autoComplete) {
          case 'string':
            return autoComplete;
          case 'boolean':
            if (autoComplete) {
              return 'on';
            } else {
              return 'off';
            }
        }
      })();
      return div({
        className: wrapClass,
        style: {
          height: height,
          width: width
        }
      }, [
        Input({
          className: "search-input loading-spinner " + inputClass,
          ref: 'searchInput',
          type: 'text',
          placeholder: placeholder,
          key: 'searchField',
          value: term,
          onChange: this.handleChange,
          onKeyDown: this.handleKeyDown,
          autoComplete: autoComplete,
          disabled: disabled
        }), loading ? div({
          key: 'input-spinner',
          className: 'input-spinner'
        }, Spinner({
          length: 3
        })) : void 0, (term != null ? term.length : void 0) && !disabled ? button({
          className: 'search-clear',
          title: 'Clear Search',
          key: 'searchClearBtn',
          onClick: this.clearSearch,
          tabIndex: -1
        }, []) : void 0
      ]);
    },
    getInitialState: function() {
      return {
        term: this.props.defaultTerm
      };
    },
    componentDidMount: function() {
      if (this.props.focusOnMount) {
        return this.focus();
      }
    },
    handleChange: function(e) {
      var newTerm, term;
      newTerm = e.target.value;
      term = this.state.term;
      if (newTerm === term) {
        return;
      }
      this.setState({
        term: newTerm
      });
      if (this.changeTimer != null) {
        clearInterval(this.changeTimer);
      }
      return this.changeTimer = setTimeout((function(_this) {
        return function() {
          var base;
          return typeof (base = _this.props).handleChange === "function" ? base.handleChange(newTerm) : void 0;
        };
      })(this), this.props.changeDelay);
    },
    handleKeyDown: function(e) {
      if (e.key === 'Enter') {
        return e.preventDefault();
      }
    },
    setTerm: function(term) {
      return this.setState({
        term: term
      });
    },
    clearSearch: function() {
      this.props.handleChange('');
      return this.setState({
        term: ''
      });
    },
    focus: function() {
      return ReactDOM.findDOMNode(this.refs.searchInput).focus();
    },
    blur: function() {
      return ReactDOM.findDOMNode(this.refs.searchInput).blur();
    }
  });

  module.exports = SearchInput;

}).call(this);