ldx-widgets
Version:
widgets
221 lines (191 loc) • 7.91 kB
JavaScript
(function() {
var Flux, Input, InputMixin, React, Spinner, TextInput2, button, div, label, ref;
React = require('react');
Flux = require('delorean').Flux;
Input = React.createFactory(require('./input_placeholder'));
Spinner = React.createFactory(require('./spinner'));
InputMixin = require('../mixins/input_mixin');
ref = React.DOM, div = ref.div, button = ref.button, label = ref.label;
/*
Input Props
@props.value - REQUIRED - String
The value of the input
w/ out this props, the input will not work
@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 'text-input'
optional class to be added the input element itself
@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 - int - default null
tab index for the input
@props.maxLength - OPTIONAL - int - 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 - 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
*/
TextInput2 = React.createClass({
displayName: 'TextInput2',
mixins: [Flux.mixins.storeListener, InputMixin],
watchStores: ['validation'],
propTypes: {
type: React.PropTypes.string,
className: React.PropTypes.string,
textTransform: React.PropTypes.func,
focusOnMount: React.PropTypes.bool,
delayedActionOnChange: React.PropTypes.object,
tabIndex: React.PropTypes.number,
maxLength: React.PropTypes.number,
disabled: React.PropTypes.bool,
onChange: React.PropTypes.func,
onKeyDown: React.PropTypes.func,
onKeyUp: React.PropTypes.func,
onKeyPress: React.PropTypes.func,
style: React.PropTypes.object,
autoComplete: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.bool]),
placeholder: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
value: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
id: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])
},
getDefaultProps: function() {
return {
type: 'text',
className: 'text-input',
id: 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,
disabled: false,
autoComplete: false,
validation: false,
isInPopover: false,
delayedActionOnChange: null,
spellCheck: false,
style: null,
focusOnMount: false
};
},
render: function() {
var autoComplete, className, disabled, errorButtonClass, errors, focusOnMount, forceShowAllErrors, id, input, inputClass, isValid, loading, maxLength, onBlur, onFocus, onKeyDown, onKeyPress, outerClass, placeholder, ref1, ref2, showClear, spellCheck, style, tabIndex, type, validation, value, valueHasChanged, wrapperClass, wrapperLabel;
ref1 = this.props, value = ref1.value, placeholder = ref1.placeholder, tabIndex = ref1.tabIndex, className = ref1.className, maxLength = ref1.maxLength, loading = ref1.loading, type = ref1.type, showClear = ref1.showClear, 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.getStore('validation'), errors = ref2.errors, forceShowAllErrors = ref2.forceShowAllErrors;
valueHasChanged = this.state.valueHasChanged;
isValid = errors[this.inputId] == null;
outerClass = 'field-wrap';
if (wrapperClass != null) {
outerClass += " " + wrapperClass;
}
if (!isValid && (valueHasChanged || forceShowAllErrors)) {
outerClass += ' invalid';
}
inputClass = 'loading-spinner';
if (className != null) {
inputClass += " " + className;
}
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';
}
}
})();
input = Input({
key: 'textInput',
ref: 'input',
id: id,
className: inputClass,
type: type,
value: value,
placeholder: placeholder,
maxLength: maxLength,
disabled: disabled,
tabIndex: tabIndex,
onChange: this.handleChange,
onKeyUp: this.handleKeyUp,
onKeyDown: onKeyDown,
onKeyPress: onKeyPress,
onBlur: onBlur,
onFocus: onFocus,
autoComplete: autoComplete,
spellCheck: spellCheck
});
if (wrapperLabel) {
input = label({
key: 'textInputLabel'
}, [wrapperLabel, input]);
}
return div({
className: "" + outerClass,
style: style
}, [
input, loading ? div({
key: 'input-spinner',
className: 'input-spinner'
}, Spinner({
length: 3
})) : void 0, (value != null ? value.length : void 0) > 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);