ldx-widgets
Version:
widgets
275 lines (253 loc) • 9.45 kB
JavaScript
(function() {
var DatePicker, GridFormDatePicker, PropTypes, React, SelectInput2, _, createClass, div, label, moment, ref, span;
React = require('react');
PropTypes = require('prop-types');
createClass = require('create-react-class');
_ = require('lodash');
moment = require('moment');
DatePicker = React.createFactory(require('../date_picker'));
SelectInput2 = React.createFactory(require('../select_input_2'));
ref = React.DOM, div = ref.div, label = ref.label, span = ref.span;
/*&
@general -
This component passes all props forward to datepicker, see datepicker component for it's props.
@props.formLabel - OPTIONAL - [string]
The value of the label that will display to the left of the input
@props.className - OPTIONAL - [string] - default 'grid grid-pad'
optional class to be added the main div
@props.labelColumnClass - OPTIONAL - [string]
optional class that will be added to the label column
@props.inputColumnClass - OPTIONAL - [string]
optional class that will be added to the input column
@props.isFieldRequired - OPTIONAL - [boolean]
optional boolean that will display the red asterisk if true
@props.fullRow - OPTIONAL - [boolean]
optional boolean that will determine whether to display the input in a full row with or without a label
@props.enableTime - OPTIONAL - [boolean]
includes the time picker
@props.children - OPTIONAL - [array]
optional array of children
&
*/
GridFormDatePicker = createClass({
displayName: 'GridFormDatePicker',
propTypes: {
formLabel: PropTypes.string,
className: PropTypes.string,
labelColumnClass: PropTypes.string,
inputColumnClass: PropTypes.string,
isFieldRequired: PropTypes.bool,
fullRow: PropTypes.bool,
enableTime: PropTypes.bool,
twentyFourHour: PropTypes.bool,
selected: PropTypes.object,
minutes: PropTypes.array,
AmPm: PropTypes.array,
isInPopover: PropTypes.bool,
disabled: PropTypes.bool,
onChange: PropTypes.func,
timeColumns: PropTypes.number,
returnDateString: PropTypes.string
},
getDefaultProps: function() {
return {
labelColumnClass: 'col-3-12',
inputColumnClass: 'col-9-12',
className: 'grid grid-pad',
isFieldRequired: false,
fullRow: true,
enableTime: false,
twentyFourHour: false,
minutes: [0, 15, 30, 45],
AmPm: ['am', 'pm'],
isInPopover: false,
disabled: false,
timeColumns: 2
};
},
render: function() {
var ampm, children, className, classes, content, disabled, enableTime, formLabel, fullRow, hour, input, inputCell, inputColumnClass, inputProps, inputTextClass, isFieldRequired, isInPopover, labelClass, labelColumnClass, labelField, minute, onChange, ref1, ref2, selected, tabId, tabIndex, twentyFourHour;
ref1 = this.props, formLabel = ref1.formLabel, className = ref1.className, labelColumnClass = ref1.labelColumnClass, inputColumnClass = ref1.inputColumnClass, inputTextClass = ref1.inputTextClass, isFieldRequired = ref1.isFieldRequired, selected = ref1.selected, fullRow = ref1.fullRow, enableTime = ref1.enableTime, twentyFourHour = ref1.twentyFourHour, tabId = ref1.tabId, children = ref1.children, isInPopover = ref1.isInPopover, tabIndex = ref1.tabIndex, disabled = ref1.disabled, onChange = ref1.onChange;
if (formLabel != null) {
labelClass = 'form-label';
if (isFieldRequired) {
labelClass += ' is-required';
}
labelField = div({
key: 'label',
className: labelColumnClass
}, label({
className: labelClass
}, formLabel));
}
inputProps = _.omit(_.assign({}, this.props, {
ref: 'input'
}), ['className']);
input = DatePicker(inputProps);
if (enableTime) {
classes = this.getCellClasses(inputColumnClass);
ref2 = this.parseTime(selected), hour = ref2.hour, minute = ref2.minute, ampm = ref2.ampm;
inputCell = [
div({
key: 'picker',
className: classes[0]
}, input), div({
key: 'time1',
className: classes[1]
}, [
SelectInput2({
ref: 'hour',
key: 'hour',
tabId: tabId,
wrapperClass: 'hour',
value: hour || '',
options: this.getHourOptions(),
onChange: onChange,
disabled: disabled,
isInPopover: isInPopover,
tabIndex: tabIndex
}), span({
key: 'divide',
className: 'time-divide'
}, ':'), SelectInput2({
ref: 'minute',
key: 'minute',
wrapperClass: 'minutes',
tabId: tabId,
value: minute || '',
options: this.getMinuteOptions(),
onChange: onChange,
disabled: disabled,
isInPopover: isInPopover,
tabIndex: tabIndex
}), !twentyFourHour ? SelectInput2({
ref: 'ampm',
key: 'ampm',
wrapperClass: 'ampm',
tabId: tabId,
value: ampm || '',
options: this.getAmPmOptions(),
onChange: onChange,
disabled: disabled,
isInPopover: isInPopover,
tabIndex: tabIndex
}) : void 0
])
];
} else {
inputCell = div({
key: 'input',
className: inputColumnClass
}, input);
}
if (fullRow && (formLabel != null)) {
content = [labelField, inputCell].concat(children);
return div({
className: className
}, content);
} else if (fullRow) {
content = [inputCell].concat(children);
return div({
className: className
}, content);
} else {
return inputCell;
}
},
getValue: function() {
var ampm, date, enableTime, hour, minute, ref1, ref2, returnDateString, rv, timestamp, twentyFourHour;
ref1 = this.props, enableTime = ref1.enableTime, returnDateString = ref1.returnDateString, twentyFourHour = ref1.twentyFourHour;
timestamp = this.refs.input.getValue();
if (!enableTime) {
return timestamp;
}
minute = this.refs.minute.getValue();
hour = this.refs.hour.getValue();
ampm = ((ref2 = this.refs.ampm) != null ? ref2.getValue() : void 0) || '';
if (returnDateString != null) {
date = moment(timestamp, returnDateString).format('YYYYMMDD');
rv = moment("" + date + hour + minute + ampm, twentyFourHour ? 'YYYYMMDDHHmm' : 'YYYYMMDDhmma');
return rv.format(returnDateString);
} else {
date = timestamp.format('YYYYMMDD');
return moment("" + date + hour + minute + ampm, twentyFourHour ? 'YYYYMMDDHHmm' : 'YYYYMMDDhmma');
}
},
parseTime: function(timestamp) {
var ref1, returnDateString, twentyFourHour;
if (timestamp == null) {
return {};
}
ref1 = this.props, twentyFourHour = ref1.twentyFourHour, returnDateString = ref1.returnDateString;
timestamp = returnDateString != null ? moment(timestamp, returnDateString) : timestamp;
return {
hour: timestamp.format(twentyFourHour ? 'HH' : 'h'),
minute: timestamp.format('mm'),
ampm: timestamp.format('a')
};
},
getHourOptions: function() {
var hour, hourOptions, i, j, results, twentyFourHour;
twentyFourHour = this.props.twentyFourHour;
if (!twentyFourHour) {
hourOptions = [
{
label: '12',
value: '12'
}
];
for (hour = i = 1; i <= 11; hour = ++i) {
hourOptions.push({
label: hour,
value: hour
});
}
return hourOptions;
} else {
results = [];
for (hour = j = 0; j <= 23; hour = ++j) {
results.push({
label: hour < 10 ? "0" + hour : hour,
value: hour < 10 ? "0" + hour : hour
});
}
return results;
}
},
getMinuteOptions: function() {
var i, len, minute, minutes, results;
minutes = this.props.minutes;
results = [];
for (i = 0, len = minutes.length; i < len; i++) {
minute = minutes[i];
results.push({
label: minute < 10 ? "0" + minute : minute,
value: minute < 10 ? "0" + minute : minute
});
}
return results;
},
getAmPmOptions: function() {
var AmPm, i, len, opt, results;
AmPm = this.props.AmPm;
results = [];
for (i = 0, len = AmPm.length; i < len; i++) {
opt = AmPm[i];
results.push({
label: opt,
value: opt
});
}
return results;
},
getCellClasses: function(inputColumnClass) {
var classSplit, colCount, dateCol, timeColumns;
timeColumns = this.props.timeColumns;
classSplit = inputColumnClass.split('-');
dateCol = classSplit[1];
colCount = classSplit[2];
return ["col-" + (dateCol - timeColumns) + "-" + colCount, "col-" + timeColumns + "-" + colCount];
}
});
module.exports = GridFormDatePicker;
}).call(this);