ldx-widgets/dist/components/text_input_2.js

widgets

(function() {
  var InputMixin, PropTypes, React, Spinner, TextInput2, button, createClass, div, input, label, ref;

  React = require('react');

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

  PropTypes = require('prop-types');

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

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

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


  /*&
  
  @general
    TextInput2 is the updated version of TextInput. This component uses the validation store.
  
  @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.onChange - REQUIRED - [Function]
    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 'text-input'
    optional class to be added the input element itself
  
  @props.inputTextClass - OPTIONAL - [String] 
    optional class to be added the input element itself when using the gridInputForm
  
  @props.id - OPTIONAL - [String] - default null
    optional id to be added the input element itself
  
  @props.placeholder - OPTIONAL - [String] - default null
    optional placeholder text for the input
  
  @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.showClear - OPTIONAL - [Boolean]
    indicator to determine whether or not to show the clear "X" button 
  
  @props.tabIndex - OPTIONAL - [Number] - default null
    tab index for the input
  
  @props.maxLength - OPTIONAL - [Number] - default null
    max characters that can be entered in the input
  
  @props.onKeyDown/onKeyPress/onKeyUp/onEnterKey/onBlur/onFocus
    optional handlers for various events
  
  @props.disabled - OPTIONAL - [Boolean] - default no
    disabled state of the input
  
  @props.validation - OPTIONAL - [Function]
    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 - [Boolean] - 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.textTransform - OPTIONAL - [Function] 
    runs the value through a transform method that will change the input before returning via getValue()
  
  @props.focusOnMount - OPTIONAL - [Boolean] 
    Focuses the input once mounted
  
  @props.tabId - OPTIONAL - [String] 
    If this input is within a tab, this id will be used for validation errors in the store
  &
   */

  TextInput2 = createClass({
    displayName: 'TextInput2',
    mixins: [InputMixin],
    contextTypes: {
      clearValidationError: PropTypes.func,
      addValidationError: PropTypes.func,
      getValidationStatus: PropTypes.func,
      toggleValidationError: PropTypes.func
    },
    propTypes: {
      type: PropTypes.string,
      name: PropTypes.string,
      className: PropTypes.string,
      textTransform: PropTypes.func,
      focusOnMount: PropTypes.bool,
      delayedActionOnChange: PropTypes.object,
      tabIndex: PropTypes.number,
      maxLength: PropTypes.number,
      disabled: PropTypes.bool,
      onChange: PropTypes.func,
      onInput: PropTypes.func,
      onKeyDown: PropTypes.func,
      onKeyUp: PropTypes.func,
      onKeyPress: PropTypes.func,
      style: PropTypes.object,
      autoComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
      placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    },
    getDefaultProps: function() {
      return {
        type: 'text',
        className: 'text-input',
        id: null,
        name: null,
        placeholder: '',
        wrapperClass: null,
        wrapperLabel: null,
        loading: false,
        showClear: false,
        tabIndex: null,
        maxLength: null,
        onKeyDown: null,
        onKeyPress: null,
        onFocus: null,
        onBlur: null,
        onKeyUp: null,
        onEnterKey: null,
        onChange: null,
        onInput: null,
        disabled: false,
        autoComplete: false,
        validation: false,
        isInPopover: false,
        delayedActionOnChange: null,
        spellCheck: false,
        style: null,
        focusOnMount: false
      };
    },
    render: function() {
      var autoComplete, className, disabled, error, errorButtonClass, focusOnMount, forceShowAllErrors, id, inputClass, inputTextClass, isValid, loading, maxLength, name, onBlur, onFocus, onInput, onKeyDown, onKeyPress, outerClass, placeholder, ref1, ref2, showClear, spellCheck, style, tabIndex, textInput, type, validation, value, valueHasChanged, wrapperClass, wrapperLabel;
      ref1 = this.props, value = ref1.value, name = ref1.name, placeholder = ref1.placeholder, tabIndex = ref1.tabIndex, className = ref1.className, inputTextClass = ref1.inputTextClass, maxLength = ref1.maxLength, loading = ref1.loading, type = ref1.type, showClear = ref1.showClear, onInput = ref1.onInput, onKeyDown = ref1.onKeyDown, onKeyPress = ref1.onKeyPress, onBlur = ref1.onBlur, onFocus = ref1.onFocus, wrapperClass = ref1.wrapperClass, wrapperLabel = ref1.wrapperLabel, id = ref1.id, disabled = ref1.disabled, validation = ref1.validation, autoComplete = ref1.autoComplete, spellCheck = ref1.spellCheck, style = ref1.style, focusOnMount = ref1.focusOnMount;
      ref2 = this.context.getValidationStatus(this.inputId), error = ref2.error, forceShowAllErrors = ref2.forceShowAllErrors;
      valueHasChanged = this.state.valueHasChanged;
      isValid = error == null;
      outerClass = 'field-wrap';
      if (wrapperClass != null) {
        outerClass += " " + wrapperClass;
      }
      if (!isValid && (valueHasChanged || forceShowAllErrors)) {
        outerClass += ' invalid';
      }
      inputClass = className != null ? className : '';
      if (loading) {
        inputClass += ' loading-spinner';
      }
      if (inputTextClass != null) {
        inputClass += " " + inputTextClass;
      }
      errorButtonClass = 'field-errors-show';
      if (loading) {
        errorButtonClass += ' is-hidden';
      }
      autoComplete = (function() {
        switch (typeof autoComplete) {
          case 'string':
            return autoComplete;
          case 'boolean':
            if (autoComplete) {
              return 'on';
            } else {
              return 'off';
            }
        }
      })();
      textInput = input({
        key: 'textInput',
        ref: 'input',
        id: id,
        name: name,
        className: inputClass,
        type: type,
        value: value,
        placeholder: placeholder,
        maxLength: maxLength,
        disabled: disabled,
        tabIndex: tabIndex,
        onChange: onInput == null ? this.handleChange : void 0,
        onInput: onInput != null ? this.handleChange : void 0,
        onKeyUp: this.handleKeyUp,
        onKeyDown: onKeyDown,
        onKeyPress: onKeyPress,
        onBlur: onBlur,
        onFocus: onFocus,
        autoComplete: autoComplete,
        spellCheck: spellCheck
      });
      if (wrapperLabel) {
        textInput = label({
          key: 'textInputLabel'
        }, [wrapperLabel, textInput]);
      }
      return div({
        className: "" + outerClass,
        style: style
      }, [
        textInput, loading ? div({
          key: 'input-spinner',
          className: 'input-spinner'
        }, Spinner({
          length: 3
        })) : void 0, (value != null ? value.length : void 0) && showClear ? button({
          className: 'search-clear',
          title: 'Clear Search',
          key: 'searchClearBtn',
          onClick: this.clear,
          tabIndex: -1
        }) : void 0, div({
          className: errorButtonClass,
          key: 'textInputErrorsShow',
          ref: 'errorAnchor',
          onMouseOver: this.handleErrorMouseOver,
          onMouseOut: this.handleErrorMouseOut
        })
      ]);
    }
  });

  module.exports = TextInput2;

}).call(this);