ldx-widgets
Version:
widgets
238 lines (200 loc) • 8.36 kB
JavaScript
(function() {
var ENTER, InputMixin, PropTypes, React, ReactDOM, SelectInput2, Spinner, createClass, div, label, makeGuid, option, ref, ref1, select, synthesizeMouseEvent;
React = require('react');
PropTypes = require('prop-types');
createClass = require('create-react-class');
ReactDOM = require('react-dom');
Spinner = React.createFactory(require('./spinner'));
InputMixin = require('../mixins/input_mixin');
ref = require('../utils'), makeGuid = ref.makeGuid, synthesizeMouseEvent = ref.synthesizeMouseEvent;
ENTER = require('../constants/keyboard').ENTER;
ref1 = require('react-dom-factories'), div = ref1.div, select = ref1.select, label = ref1.label, option = ref1.option;
/*&
Select Props
@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.options - REQUIRED - [Array/Collection]
An array of objects w/ a value and label property or an array of objects w/ any values
@props.selectText - [String]
text for the default option
@props.labelField - [String] - REQUIRED
w/ arbitrary option array (ie no label/value properties)
The attribute name from the collection of objects to be used as the select label
@props.valueField - [String] - REQUIRED
w/ arbittrary option array (ie no label/value properties)
The attribute value from the collection of objects to be used as the select value
@props.returnFullObjects - [Boolean] - Optional
Get value will return a full object instead of just the value
@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 'select-input'
optional class to be added the select element itself
@props.id - OPTIONAL - [String] - default null
optional id to be added the input element itself
@props.wrapperClass - OPTIONAL - [String] default null
class to be added to the wrapper div
@props.wrapperLabel - OPTIONAL - [String]
text for wrapping label element
@props.loading - OPTIONAL - [Boolean]
indicator to determine that the input is loading a value from the server
@props.tabIndex - OPTIONAL - [Number]
tab index for the input
@props.onEnterKey/onBlur/onFocus - Optional - [Function]
optional handlers for various events
@props.disabled - OPTIONAL - [Boolean]
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]
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.openOnMount - [Boolean] - Optional
opens the drop down when it mounts
@props.tabId - OPTIONAL - [String]
If this input is within a tab, this id will be used for validation errors in the store
@props.returnNull - REQUIRED - [Boolean]
When the default or 'placeholder' value is selected, instead of returning empty string, return null
&
*/
SelectInput2 = createClass({
displayName: 'SelectInput2',
mixins: [InputMixin],
contextTypes: {
clearValidationError: PropTypes.func,
addValidationError: PropTypes.func,
getValidationStatus: PropTypes.func,
toggleValidationError: PropTypes.func
},
propTypes: {
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
options: PropTypes.array.isRequired,
tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
returnNull: PropTypes.bool.isRequired
},
getDefaultProps: function() {
return {
className: 'select-menu',
id: null,
name: null,
wrapperClass: null,
wrapperLabel: null,
loading: false,
tabIndex: null,
onKeyDown: null,
onKeyPress: null,
onFocus: null,
onBlur: null,
onKeyUp: null,
onEnterKey: null,
onChange: null,
disabled: false,
validation: false,
isInPopover: false,
delayedActionOnChange: null,
openOnMount: false,
returnFullObjects: false,
valueField: null,
labelField: null,
selectText: null,
returnNull: false
};
},
render: function() {
var className, disabled, error, forceShowAllErrors, id, index, input, isValid, item, labelField, loading, name, onBlur, onFocus, onKeyDown, onKeyPress, optionEls, options, outerClass, ref2, ref3, returnFullObjects, selectText, tabIndex, validation, value, valueField, valueHasChanged, wrapperClass, wrapperLabel;
ref2 = this.props, value = ref2.value, name = ref2.name, options = ref2.options, tabIndex = ref2.tabIndex, className = ref2.className, loading = ref2.loading, onKeyDown = ref2.onKeyDown, onKeyPress = ref2.onKeyPress, onBlur = ref2.onBlur, onFocus = ref2.onFocus, wrapperClass = ref2.wrapperClass, wrapperLabel = ref2.wrapperLabel, id = ref2.id, disabled = ref2.disabled, validation = ref2.validation, valueField = ref2.valueField, labelField = ref2.labelField, returnFullObjects = ref2.returnFullObjects, selectText = ref2.selectText;
valueHasChanged = this.state.valueHasChanged;
ref3 = this.context.getValidationStatus(this.inputId), error = ref3.error, forceShowAllErrors = ref3.forceShowAllErrors;
valueHasChanged = this.state.valueHasChanged;
isValid = error == null;
outerClass = 'field-wrap';
if (wrapperClass != null) {
outerClass += " " + wrapperClass;
}
if (!isValid && (valueHasChanged || forceShowAllErrors)) {
outerClass += ' invalid shrink';
}
valueField = valueField || 'value';
labelField = labelField || 'label';
optionEls = (function() {
var i, len, results;
results = [];
for (index = i = 0, len = options.length; i < len; index = ++i) {
item = options[index];
results.push(option({
key: item[valueField] + "_" + index,
value: item[valueField],
disabled: item.disabled
}, item[labelField]));
}
return results;
})();
if (selectText != null) {
optionEls.unshift(option({
key: "default",
value: ''
}, selectText));
}
if (returnFullObjects && (value != null)) {
value = value[valueField];
}
input = select({
ref: 'input',
key: 'selectMenu',
name: name,
onChange: this.handleChange,
onKeyUp: this.handleKeyUp,
value: value || '',
className: className,
id: id,
tabIndex: tabIndex,
onFocus: onFocus,
onBlur: onBlur,
onKeyDown: onKeyDown,
onKeyPress: onKeyPress,
disabled: disabled
}, optionEls);
if (wrapperLabel) {
input = label({
key: 'textInputLabel'
}, [wrapperLabel, input]);
}
return div({
className: "" + outerClass
}, [
input, loading ? div({
key: 'input-spinner',
className: 'input-spinner'
}, Spinner({
length: 3
})) : void 0, div({
className: 'field-errors-show',
key: 'textInputErrorsShow',
ref: 'errorAnchor',
onMouseOver: this.handleErrorMouseOver,
onMouseOut: this.handleErrorMouseOut
})
]);
},
componentDidMount: function() {
if (this.props.openOnMount) {
return setTimeout((function(_this) {
return function() {
return synthesizeMouseEvent(_this.refs.input, 'mousedown');
};
})(this), 15);
}
}
});
module.exports = SelectInput2;
}).call(this);