ldx-widgets/dist/components/select_input_2.js

widgets

(function() {
  var ENTER, Flux, Input, InputMixin, React, ReactDOM, SelectInput2, Spinner, div, label, makeGuid, option, ref, ref1, select, synthesizeMouseEvent;

  React = require('react');

  ReactDOM = require('react-dom');

  Flux = require('delorean').Flux;

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

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

  InputMixin = require('../mixins/input_mixin');

  ref = require('../utils'), makeGuid = ref.makeGuid, synthesizeMouseEvent = ref.synthesizeMouseEvent;

  ENTER = require('../constants/keyboard').ENTER;

  ref1 = React.DOM, div = ref1.div, select = ref1.select, label = ref1.label, option = ref1.option;


  /*
  Select Props
  
  @props.value - REQUIRED - string
    The value of the input
    w/ out this props, the input will not work
  
  @props.options - REQUIRED - array/collection
    An array of objects w/ a value and label property
  
  @props.onChange - REQUIRED 
    method that will change the value of the input prop
    gets passed a single param that is the new value of the input
    w/ out this method, the input will not update
  
  @props.className - OPTIONAL - string - default 'select-input'
    optional class to be added the select element itself
  
  @props.id - OPTIONAL - string - default null
    optional id to be added the input element itself
  
  @props.wrapperClass - OPTIONAL - string default null
    class to be added to the wrapper div
  
  @props.wrapperLabel - OPTIONAL - default null
    text for wrapping label element
  
  @props.loading - OPTIONAL - Boolean
    indicator to determine that the input is loading a value from the server
  
  @props.tabIndex - OPTIONAL - int - default null
    tab index for the input
  
  @props.onEnterKey/onBlur/onFocus
    optional handlers for various events
  
  @props.disabled - OPTIONAL - Boolean - default no
    disabled state of the input
  
  @props.validation - OPTIONAL - method
    a method that takes the value and returns an arry of validation objects
    always return an empty array for a valid value
    see the validation store for more documentation on validation objects
  
  @props.isInPopover - OPTIONAL - default no
    set this to yes if the form is inside a popover or modal, forces the
    validation to display above the popover/modal layer
    Inconsequential if validation is not being used
  
  @props.delayedActionOnChange - OPTIONAL - Object
    Takes action and interval parameters, will fire the action after the set interval everytime the data changes
  
  @props.openOnMount - boolean -default no
    opens the drop down when it mounts
   */

  SelectInput2 = React.createClass({
    displayName: 'SelectInput2',
    mixins: [Flux.mixins.storeListener, InputMixin],
    watchStores: ['validation'],
    propTypes: {
      onChange: React.PropTypes.func.isRequired,
      options: React.PropTypes.array.isRequired
    },
    getDefaultProps: function() {
      return {
        type: 'text',
        className: 'select-menu',
        id: null,
        wrapperClass: null,
        wrapperLabel: null,
        loading: false,
        tabIndex: null,
        onKeyDown: null,
        onKeyPress: null,
        onFocus: null,
        onBlur: null,
        onKeyUp: null,
        onEnterKey: null,
        onChange: null,
        disabled: false,
        validation: false,
        isInPopover: false,
        delayedActionOnChange: null,
        openOnMount: false
      };
    },
    render: function() {
      var className, disabled, errors, forceShowAllErrors, id, index, input, inputClass, isValid, item, loading, onBlur, onFocus, onKeyDown, onKeyPress, optionEls, options, outerClass, ref2, ref3, tabIndex, validation, value, valueHasChanged, wrapperClass, wrapperLabel;
      ref2 = this.props, value = ref2.value, options = ref2.options, tabIndex = ref2.tabIndex, className = ref2.className, loading = ref2.loading, onKeyDown = ref2.onKeyDown, onKeyPress = ref2.onKeyPress, onBlur = ref2.onBlur, onFocus = ref2.onFocus, wrapperClass = ref2.wrapperClass, wrapperLabel = ref2.wrapperLabel, id = ref2.id, disabled = ref2.disabled, validation = ref2.validation;
      ref3 = this.getStore('validation'), errors = ref3.errors, forceShowAllErrors = ref3.forceShowAllErrors;
      valueHasChanged = this.state.valueHasChanged;
      isValid = errors[this.inputId] == null;
      outerClass = 'field-wrap';
      if (wrapperClass != null) {
        outerClass += " " + wrapperClass;
      }
      if (!isValid && (valueHasChanged || forceShowAllErrors)) {
        outerClass += ' invalid shrink';
      }
      inputClass = 'loading-spinner';
      if (className != null) {
        inputClass += " " + className;
      }
      optionEls = (function() {
        var i, len, results;
        results = [];
        for (index = i = 0, len = options.length; i < len; index = ++i) {
          item = options[index];
          results.push(option({
            key: item.value + "_" + index,
            value: item.value
          }, item.label));
        }
        return results;
      })();
      input = select({
        ref: 'input',
        key: 'selectMenu',
        onChange: this.handleChange,
        onKeyUp: this.handleKeyUp,
        className: className,
        id: id,
        tabIndex: tabIndex,
        value: value,
        onFocus: onFocus,
        onBlur: onBlur,
        onKeyDown: onKeyDown,
        onKeyPress: onKeyPress,
        disabled: disabled
      }, optionEls);
      if (wrapperLabel) {
        input = label({
          key: 'textInputLabel'
        }, [wrapperLabel, input]);
      }
      return div({
        className: "" + outerClass
      }, [
        input, loading ? div({
          key: 'input-spinner',
          className: 'input-spinner'
        }, Spinner({
          length: 3
        })) : void 0, div({
          className: 'field-errors-show',
          key: 'textInputErrorsShow',
          ref: 'errorAnchor',
          onMouseOver: this.handleErrorMouseOver,
          onMouseOut: this.handleErrorMouseOut
        })
      ]);
    },
    componentDidMount: function() {
      if (this.props.openOnMount) {
        return setTimeout((function(_this) {
          return function() {
            return synthesizeMouseEvent(_this.refs.input, 'mousedown');
          };
        })(this), 15);
      }
    }
  });

  module.exports = SelectInput2;

}).call(this);