ldx-widgets
Version:
widgets
411 lines (384 loc) • 15.1 kB
JavaScript
(function() {
var DatePicker, GridFormDatePicker, PropTypes, React, SelectInput2, assign, createClass, div, find, label, last, moment, omit, ref, span;
React = require('react');
PropTypes = require('prop-types');
createClass = require('create-react-class');
assign = require('lodash/assign');
omit = require('lodash/omit');
find = require('lodash/find');
last = require('lodash/last');
moment = require('moment');
DatePicker = React.createFactory(require('../date_picker'));
SelectInput2 = React.createFactory(require('../select_input_2'));
ref = require('react-dom-factories'), 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.maxDate - OPTIONAL - [moment]
when using the time picker it will disable times of day after this value
@props.minDate - OPTIONAL - [moment]
when using the time picker it will disable times of day before this value
@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,
maxDate: PropTypes.object,
minDate: PropTypes.object
},
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
};
},
componentDidMount: function() {
return this.changeOnOutOfRange();
},
componentDidUpdate: function() {
return this.changeOnOutOfRange();
},
changeOnOutOfRange: function() {
var controlValue, maxDate, minDate, onChange, propsValue, ref1, selected;
ref1 = this.props, selected = ref1.selected, onChange = ref1.onChange, maxDate = ref1.maxDate, minDate = ref1.minDate;
if ((selected != null) && ((maxDate != null) || (minDate != null))) {
propsValue = this.getMomentObject(selected);
controlValue = this.getMomentObject(this.getValue());
if (!propsValue.isSame(controlValue, 'minute')) {
return onChange();
}
}
},
render: function() {
var ampm, children, className, classes, content, disabled, enableTime, formLabel, fullRow, hour, hourOptions, 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;
hourOptions = this.getHourOptions({
minute: minute,
ampm: 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: hourOptions,
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({
hour: hour,
ampm: ampm
}, hourOptions),
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 (timestamp == null) {
return null;
}
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');
}
},
getMomentObject: function(date) {
var returnDateString;
returnDateString = this.props.returnDateString;
if (returnDateString != null) {
return moment(date, returnDateString);
} else {
return date;
}
},
parseTime: function(timestamp) {
var ref1, returnDateString, twentyFourHour;
if (timestamp == null) {
return {};
}
ref1 = this.props, twentyFourHour = ref1.twentyFourHour, returnDateString = ref1.returnDateString;
timestamp = this.getMomentObject(timestamp);
return {
hour: timestamp.format(twentyFourHour ? 'HH' : 'h'),
minute: timestamp.format('mm'),
ampm: timestamp.format('a')
};
},
getHourOptions: function(parsedTime) {
var hour, hourOptions, hoursArray, i, results, twentyFourHour;
twentyFourHour = this.props.twentyFourHour;
hoursArray = twentyFourHour ? (function() {
results = [];
for (i = 0; i <= 23; i++){ results.push(i); }
return results;
}).apply(this) : [12].concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
hourOptions = (function() {
var j, len, results1;
results1 = [];
for (j = 0, len = hoursArray.length; j < len; j++) {
hour = hoursArray[j];
results1.push({
label: twentyFourHour ? this.prependZero(hour) : "" + hour,
value: twentyFourHour ? this.prependZero(hour) : "" + hour,
disabled: false
});
}
return results1;
}).call(this);
this.removeOutOfRange('hours', parsedTime, hourOptions);
return hourOptions;
},
getMinuteOptions: function(parsedTime, hourOptions) {
var minute, minuteOptions, minutes;
minutes = this.props.minutes;
minuteOptions = (function() {
var i, len, results;
results = [];
for (i = 0, len = minutes.length; i < len; i++) {
minute = minutes[i];
results.push({
label: this.prependZero(minute),
value: this.prependZero(minute),
disabled: false
});
}
return results;
}).call(this);
this.removeOutOfRange('minutes', parsedTime, minuteOptions, hourOptions);
return minuteOptions;
},
getAmPmOptions: function() {
var AmPm, ampmOptions, opt;
AmPm = this.props.AmPm;
ampmOptions = (function() {
var i, len, results;
results = [];
for (i = 0, len = AmPm.length; i < len; i++) {
opt = AmPm[i];
results.push({
label: opt,
value: opt
});
}
return results;
})();
this.removeOutOfRangeAmPm(ampmOptions);
return ampmOptions;
},
removeOutOfRange: function(timeSection, parsedTime, optionsList, hourOptions) {
var checkTime, currentValue, dateFormat, firstMinute, i, j, lastMinute, maxDate, maxDay, minDate, minDay, minutes, o, option, ref1, ref2, selected, selectedHour, twentyFourHour;
if (hourOptions == null) {
hourOptions = [];
}
ref1 = this.props, selected = ref1.selected, twentyFourHour = ref1.twentyFourHour, minDate = ref1.minDate, maxDate = ref1.maxDate, minutes = ref1.minutes;
dateFormat = twentyFourHour ? 'MMDDYYYY HHmm' : 'MMDDYYYY hmma';
if (selected != null) {
currentValue = this.getMomentObject(selected);
selectedHour = find(hourOptions, {
value: parsedTime.hour
}) == null ? ((ref2 = hourOptions[0]) != null ? ref2.value : void 0) || '' : parsedTime.hour;
lastMinute = this.prependZero(last(minutes));
firstMinute = this.prependZero(minutes[0]);
if ((maxDate != null) && currentValue.isSame(maxDate, 'day')) {
maxDay = maxDate.format('MMDDYYYY');
for (o = i = optionsList.length - 1; i >= 0; o = i += -1) {
option = optionsList[o];
checkTime = (function() {
switch (timeSection) {
case 'hours':
return moment(maxDay + " " + option.value + firstMinute + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
case 'minutes':
return moment(maxDay + " " + selectedHour + option.value + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
}
})();
if (checkTime.isAfter(maxDate, 'minute')) {
optionsList.splice(o, 1);
}
}
}
if ((minDate != null) && currentValue.isSame(minDate, 'day')) {
minDay = minDate.format('MMDDYYYY');
for (o = j = optionsList.length - 1; j >= 0; o = j += -1) {
option = optionsList[o];
checkTime = (function() {
switch (timeSection) {
case 'hours':
return moment(minDay + " " + option.value + lastMinute + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
case 'minutes':
return moment(minDay + " " + selectedHour + option.value + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
}
})();
if (checkTime.isBefore(minDate, 'minute')) {
optionsList.splice(o, 1);
}
}
}
return optionsList;
}
},
removeOutOfRangeAmPm: function(optionsList) {
var currentValue, maxDate, minDate, ref1, selected;
ref1 = this.props, selected = ref1.selected, minDate = ref1.minDate, maxDate = ref1.maxDate;
if (selected != null) {
currentValue = this.getMomentObject(selected);
if (maxDate != null) {
if (currentValue.isSame(maxDate, 'day')) {
if (maxDate.format('a') === 'am') {
optionsList.splice(1, 1);
}
}
}
if (minDate != null) {
if (currentValue.isSame(minDate, 'day')) {
if (minDate.format('a') === 'pm') {
return optionsList.splice(0, 1);
}
}
}
}
},
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];
},
prependZero: function(value) {
if (+value < 10) {
return "0" + value;
} else {
return "" + value;
}
}
});
module.exports = GridFormDatePicker;
}).call(this);