ldx-widgets
Version:
widgets
236 lines (205 loc) • 8.49 kB
JavaScript
(function() {
var InputMixin, React, Spinner, Textarea, button, div, label, ref, textarea;
React = require('react');
Spinner = React.createFactory(require('./spinner'));
InputMixin = require('../mixins/input_mixin');
ref = React.DOM, div = ref.div, button = ref.button, label = ref.label, textarea = ref.textarea;
/*
Textarea Props
@props.value - REQUIRED - String
The value of the textarea
w/ out this props, the textarea will not work
@props.onChange - REQUIRED
method that will change the value of the textarea prop
gets passed a single param that is the new value of the textarea
w/ out this method, the textarea will not update
@props.className - OPTIONAL - string - default 'text-textarea'
optional class to be added the textarea 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 textarea element itself
@props.placeholder - OPTIONAL - string - default null
optional placeholder text for the textarea
@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 textarea 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 textarea
@props.maxLength - OPTIONAL - int - default null
max characters that can be entered in the textarea
@props.onKeyDown/onKeyPress/onKeyUp/onEnterKey/onBlur/onFocus
optional handlers for various events
@props.disabled - OPTIONAL - Boolean - default no
disabled state of the textarea
@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 textarea before returning via getValue()
@props.focusOnMount - OPTIONAL - Boolean
Focuses the textarea once mounted
@props.rows - OPTIONAL - Number string - default 4
Height of textarea
@props.cols - OPTIONAL - Number string - default 50
Width of textarea
*/
Textarea = React.createClass({
displayName: 'Textarea',
mixins: [InputMixin],
contextTypes: {
clearValidationError: React.PropTypes.func,
addValidationError: React.PropTypes.func,
getValidationStatus: React.PropTypes.func,
toggleValidationError: React.PropTypes.func
},
propTypes: {
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,
rows: React.PropTypes.string,
cols: React.PropTypes.string,
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]).isRequired,
id: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])
},
getDefaultProps: function() {
return {
className: 'textarea',
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,
rows: "4",
cols: "50"
};
},
render: function() {
var autoComplete, className, cols, disabled, error, errorButtonClass, focusOnMount, forceShowAllErrors, id, isValid, loading, maxLength, onBlur, onFocus, onKeyDown, onKeyPress, outerClass, placeholder, ref1, ref2, rows, showClear, spellCheck, style, tabIndex, textArea, textareaClass, 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, 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, rows = ref1.rows, cols = ref1.cols;
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';
}
if (className != null) {
textareaClass = className;
}
if (loading) {
textareaClass += ' loading-spinner';
}
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';
}
}
})();
textArea = textarea({
key: 'textArea',
ref: 'input',
id: id,
className: textareaClass,
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,
rows: rows,
cols: cols
});
if (wrapperLabel) {
textArea = label({
key: 'textAreaLabel'
}, [wrapperLabel, textArea]);
}
return div({
className: "" + outerClass,
style: style
}, [
textArea, 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: 'textAreaErrorsShow',
ref: 'errorAnchor',
onMouseOver: this.handleErrorMouseOver,
onMouseOut: this.handleErrorMouseOut
})
]);
}
});
module.exports = Textarea;
}).call(this);