ldx-widgets/dist/components/grid_form/grid_form_input.js

widgets

(function() {
  var GridFormInput, MultiSelect, React, SelectInput2, TextInput2, Textarea, _, div, label, ref;

  React = require('react');

  _ = require('lodash');

  TextInput2 = React.createFactory(require('../text_input_2'));

  Textarea = React.createFactory(require('../textarea'));

  SelectInput2 = React.createFactory(require('../select_input_2'));

  MultiSelect = React.createFactory(require('../multi_select'));

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


  /*
  Select Props
  
  @props.type - OPTIONAL - string
    The value that will determine whether to display a text input or select input - default is text
  
  @props.formLabel - OPTIONAL - string
    The value of the label that will display to the left of the input
  
  @props.className - OPTIONAL - string - default 'grid grid-pad'
    optional class to be added the main div
  
  @props.labelColumnClass - OPTIONAL - string
    optional class that will be added to the label column
  
  @props.inputColumnClass - OPTIONAL - string
    optional class that will be added to the input column
  
  @props.inputTextClass - OPTIONAL - string
    optional class that will be added to the input element
  
  @props.isFieldRequired - OPTIONAL - boolean
    optional boolean that will display the red asterisk if true
  
  @props.fullRow - OPTIONAL - boolean
    optional boolean that will determine whether to display the input in a full row with  or without a label
  
  @props.children - OPTIONAL - array
    optional array of children
   */

  GridFormInput = React.createClass({
    displayName: 'GridFormInput',
    getDefaultProps: function() {
      return {
        type: 'text',
        labelColumnClass: 'col-3-12',
        inputColumnClass: 'col-9-12',
        className: 'grid grid-pad',
        fullRow: true,
        formLabel: null,
        children: []
      };
    },
    render: function() {
      var children, className, content, formLabel, fullRow, input, inputCell, inputColumnClass, inputProps, inputTextClass, isFieldRequired, labelClass, labelColumnClass, labelField, ref1, type;
      ref1 = this.props, type = ref1.type, formLabel = ref1.formLabel, className = ref1.className, labelColumnClass = ref1.labelColumnClass, inputColumnClass = ref1.inputColumnClass, inputTextClass = ref1.inputTextClass, isFieldRequired = ref1.isFieldRequired, fullRow = ref1.fullRow, children = ref1.children;
      if (formLabel != null) {
        labelClass = 'form-label';
        if (isFieldRequired) {
          labelClass += ' is-required';
        }
        labelField = div({
          key: 'label',
          className: labelColumnClass
        }, label({
          className: labelClass
        }, formLabel));
      }
      inputProps = _.omit(_.assign({}, this.props, {
        ref: 'input'
      }), ['className']);
      switch (type) {
        case 'textarea':
          inputProps = _.omit(_.assign({}, this.props, {
            ref: 'input'
          }), ['className', 'type']);
          input = Textarea(inputProps);
          break;
        case 'select':
          input = SelectInput2(inputProps);
          break;
        case 'multiselect':
          input = MultiSelect(inputProps);
          break;
        default:
          input = TextInput2(inputProps);
      }
      inputCell = div({
        key: 'input',
        className: inputColumnClass
      }, input);
      if (fullRow && (formLabel != null)) {
        content = [labelField, inputCell].concat(children);
        return div({
          className: className
        }, content);
      } else if (fullRow) {
        content = [inputCell].concat(children);
        return div({
          className: className
        }, content);
      } else {
        return inputCell;
      }
    },
    getValue: function() {
      return this.refs.input.getValue();
    }
  });

  module.exports = GridFormInput;

}).call(this);