ldx-widgets
Version:
widgets
222 lines (204 loc) • 7.36 kB
JavaScript
(function() {
var FormValidation, PropTypes, React, ReactDOM, Spinner, TextInput, button, createClass, div, input, ref, ul;
React = require('react');
PropTypes = require('prop-types');
createClass = require('create-react-class');
ReactDOM = require('react-dom');
Spinner = React.createFactory(require('./spinner'));
FormValidation = require('../mixins/form_validation');
ref = require('react-dom-factories'), div = ref.div, ul = ref.ul, button = ref.button, input = ref.input;
/*
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 = createClass({
displayName: 'TextInput',
mixins: [FormValidation],
propTypes: {
type: PropTypes.string,
className: PropTypes.string,
regexAllow: PropTypes.object,
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]),
id: PropTypes.oneOfType([PropTypes.string, 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, inputClass, loading, maxLength, onBlur, onInput, 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, onInput = ref1.onInput;
value = this.state.value;
this.getErrors();
if (className != null) {
inputClass = className;
}
if (loading) {
inputClass += ' loading-spinner';
}
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: inputClass,
ref: 'textInput',
type: type,
placeholder: placeholder,
key: 'textInput',
tabIndex: tabIndex,
value: value,
onChange: onInput == null ? this.handleChange : void 0,
onInput: onInput != null ? this.handleChange : void 0,
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.value;
},
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);