ldx-widgets
Version:
widgets
214 lines (196 loc) • 7.17 kB
JavaScript
(function() {
var FormValidation, Input, React, ReactDOM, Spinner, TextInput, _, button, div, ref, ul;
React = require('react');
ReactDOM = require('react-dom');
Input = React.createFactory(require('./input_placeholder'));
Spinner = React.createFactory(require('./spinner'));
FormValidation = require('../mixins/form_validation');
_ = require('lodash');
ref = React.DOM, div = ref.div, ul = ref.ul, button = ref.button;
/*
Input Props
@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.delayedActionOnChange - OPTIONAL - Object
Takes action and interval parameters, will fire the action after the set interval everytime the componentWillReceiveProps method fires
@props.wrapperClass - OPTIONAL - String
class to be added to the wrpper div
@props.regexAllow - OPTIONAL - Array
runs the value through a regex test to see if it passes
*/
TextInput = React.createClass({
displayName: 'TextInput',
mixins: [FormValidation],
propTypes: {
type: React.PropTypes.string,
className: React.PropTypes.string,
regexAllow: React.PropTypes.object,
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])
},
getInitialState: function() {
return {
value: this.props.value || ''
};
},
getDefaultProps: function() {
return {
type: 'text',
loading: false,
className: 'text-input',
wrapperClass: null,
showClear: false,
autoComplete: false
};
},
componentWillReceiveProps: function(nextProps) {
var value;
value = nextProps.value;
if ((value != null) && value !== this.props.value) {
this.fireDelayedAction();
return this.setState({
value: value
});
}
},
delayedActionTimer: null,
fireDelayedAction: function() {
var action, delayedActionOnChange, interval;
delayedActionOnChange = this.props.delayedActionOnChange;
if (delayedActionOnChange != null) {
action = delayedActionOnChange.action, interval = delayedActionOnChange.interval;
clearInterval(this.delayedActionTimer);
return this.delayedActionTimer = setTimeout((function(_this) {
return function() {
return action(_this.state.value);
};
})(this), interval);
}
},
render: function() {
var autoComplete, className, disabled, id, loading, maxLength, onBlur, onKeyDown, onKeyPress, outerClass, placeholder, ref1, showClear, style, tabIndex, type, value, wrapperClass, wrapperLabel;
ref1 = this.props, 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, wrapperClass = ref1.wrapperClass, wrapperLabel = ref1.wrapperLabel, id = ref1.id, disabled = ref1.disabled, autoComplete = ref1.autoComplete, onBlur = ref1.onBlur, style = ref1.style;
value = this.state.value;
this.getErrors();
outerClass = 'field-wrap';
if (wrapperClass) {
outerClass += " " + wrapperClass;
}
autoComplete = (function() {
switch (typeof autoComplete) {
case 'string':
return autoComplete;
case 'boolean':
if (autoComplete) {
return 'on';
} else {
return 'off';
}
}
})();
return div({
className: outerClass + " " + this.invalidClass,
style: style
}, [
Input({
id: id,
className: "loading-spinner " + className,
ref: 'textInput',
type: type,
placeholder: placeholder,
key: 'textInput',
tabIndex: tabIndex,
value: value,
onChange: this.handleChange,
onKeyDown: this.onKeyDown,
onKeyUp: this.handleKeyUp,
onKeyPress: onKeyPress,
onBlur: onBlur,
maxLength: maxLength,
spellCheck: false,
disabled: disabled,
autoComplete: autoComplete
}), loading ? div({
key: 'input-spinner',
className: 'input-spinner'
}, Spinner({
length: 3
})) : void 0, value.length > 0 && showClear ? button({
className: 'search-clear',
title: 'Clear Search',
key: 'searchClearBtn',
onClick: this.clear,
tabIndex: -1
}, []) : void 0, this.validationErrors.length && !loading ? div({
className: 'field-errors-show',
key: 'textInputErrorsShow'
}, [
div({
className: 'field-errors',
key: 'textInputErrors'
}, ul({
className: 'field-errors-list'
}, this.validationErrors))
]) : void 0
]);
},
handleChange: function(e) {
var onChange, ref1, regexAllow, value;
value = e.target.value;
ref1 = this.props, regexAllow = ref1.regexAllow, onChange = ref1.onChange;
if ((regexAllow != null) && value && !regexAllow.test(value)) {
return;
}
this.setState({
value: value
});
return typeof onChange === "function" ? onChange(e) : void 0;
},
onKeyDown: function(e) {
var base;
if (e.key === 'Enter') {
e.preventDefault();
}
return typeof (base = this.props).onKeyDown === "function" ? base.onKeyDown(e) : void 0;
},
handleKeyUp: function(e) {
var base, base1;
if (e.key === 'Enter') {
e.preventDefault();
if (typeof (base = this.props).onEnterKey === "function") {
base.onEnterKey(e);
}
}
return typeof (base1 = this.props).onKeyUp === "function" ? base1.onKeyUp(e) : void 0;
},
getValue: function() {
return this.refs.textInput.getValue();
},
clear: function() {
this.props.onChange(true);
return this.setState({
value: ''
});
},
focus: function() {
return ReactDOM.findDOMNode(this.refs.textInput).focus();
},
blur: function() {
return ReactDOM.findDOMNode(this.refs.textInput).blur();
}
});
module.exports = TextInput;
}).call(this);