ldx-widgets/dist/components/select_input_2.js

widgets

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

  React = require('react');

  PropTypes = require('prop-types');

  createClass = require('create-react-class');

  ReactDOM = require('react-dom');

  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.name - OPTIONAL - [String]
    The name of the input
  
  @props.options - REQUIRED - array/collection
    An array of objects w/ a value and label property
  
  or
  @props.options - REQUIRED - array/collection
    An array of objects w/ any values
  @props.selectText - STRING
    text for the default option
  @props.labelField - String - REQUIRED w/ arbittrary option array (ie no label/value properties)
    The attribute name from the collection of objects to be used as the select label
  @props.valueField - String - REQUIRED w/ arbittrary option array (ie no label/value properties)
    The attribute value from the collection of objects to be used as the select value
  @props.returnFullObjects - BOOLEAN - default: no
    Get value will return a full object instead of just the value
  
  @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
  
  @props.tabId - OPTIONAL - string 
    If this input is within a tab, this id will be used for validation errors in the store
   */

  SelectInput2 = createClass({
    displayName: 'SelectInput2',
    mixins: [InputMixin],
    contextTypes: {
      clearValidationError: PropTypes.func,
      addValidationError: PropTypes.func,
      getValidationStatus: PropTypes.func,
      toggleValidationError: PropTypes.func
    },
    propTypes: {
      name: PropTypes.string,
      onChange: PropTypes.func.isRequired,
      options: PropTypes.array.isRequired,
      tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    },
    getDefaultProps: function() {
      return {
        className: 'select-menu',
        id: null,
        name: 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,
        returnFullObjects: false,
        valueField: null,
        labelField: null,
        selectText: null
      };
    },
    render: function() {
      var className, disabled, error, forceShowAllErrors, id, index, input, isValid, item, labelField, loading, name, onBlur, onFocus, onKeyDown, onKeyPress, optionEls, options, outerClass, ref2, ref3, returnFullObjects, selectText, tabIndex, validation, value, valueField, valueHasChanged, wrapperClass, wrapperLabel;
      ref2 = this.props, value = ref2.value, name = ref2.name, 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, valueField = ref2.valueField, labelField = ref2.labelField, returnFullObjects = ref2.returnFullObjects, selectText = ref2.selectText;
      valueHasChanged = this.state.valueHasChanged;
      ref3 = this.context.getValidationStatus(this.inputId), error = ref3.error, forceShowAllErrors = ref3.forceShowAllErrors;
      valueHasChanged = this.state.valueHasChanged;
      isValid = error == null;
      outerClass = 'field-wrap';
      if (wrapperClass != null) {
        outerClass += " " + wrapperClass;
      }
      if (!isValid && (valueHasChanged || forceShowAllErrors)) {
        outerClass += ' invalid shrink';
      }
      valueField = valueField || 'value';
      labelField = labelField || 'label';
      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[valueField] + "_" + index,
            value: item[valueField]
          }, item[labelField]));
        }
        return results;
      })();
      if (selectText != null) {
        optionEls.unshift(option({
          key: "default",
          value: ''
        }, selectText));
      }
      if (returnFullObjects && (value != null)) {
        value = value[valueField];
      }
      input = select({
        ref: 'input',
        key: 'selectMenu',
        name: name,
        onChange: this.handleChange,
        onKeyUp: this.handleKeyUp,
        value: value || '',
        className: className,
        id: id,
        tabIndex: tabIndex,
        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);