{this.days(weekStart)}
);
},
renderDay: function(day, key) {
var minDate = new DateUtil(this.props.minDate).safeClone(),
maxDate = new DateUtil(this.props.maxDate).safeClone(),
disabled = day.isBefore(minDate) || day.isAfter(maxDate);
return (
);
},
days: function(weekStart) {
return weekStart.mapDaysInWeek(this.renderDay);
},
render: function() {
return (
{this.state.date.format("MMMM YYYY")}
{this.weeks()}
);
}
});
module.exports = Calendar;
================================================
FILE: src/react-datepicker/date_input.js
================================================
/** @jsx React.DOM */
var React = require('react/addons');
var moment = require('moment');
var DateUtil = require('./util/date');
var DateInput = React.createClass({
propTypes: {
onKeyDown: React.PropTypes.func
},
getDefaultProps: function() {
return {
dateFormat: 'YYYY-MM-DD'
};
},
getInitialState: function() {
return {
value: this.safeDateFormat(this.props.date)
};
},
componentDidMount: function() {
this.toggleFocus(this.props.focus);
},
componentWillReceiveProps: function(newProps) {
this.toggleFocus(newProps.focus);
this.setState({
value: this.safeDateFormat(newProps.date)
});
},
toggleFocus: function(focus) {
if (focus) {
this.refs.entry.getDOMNode().focus();
} else {
this.refs.entry.getDOMNode().blur();
}
},
handleChange: function(event) {
var date = moment(event.target.value, this.props.dateFormat, true);
this.setState({
value: event.target.value
});
},
safeDateFormat: function(date) {
return !! date ? date.format(this.props.dateFormat) : null;
},
isValueAValidDate: function() {
var date = moment(event.target.value, this.props.dateFormat, true);
return date.isValid();
},
handleEnter: function(event) {
if (this.isValueAValidDate()) {
var date = moment(event.target.value, this.props.dateFormat, true);
this.props.setSelected(new DateUtil(date));
}
},
handleKeyDown: function(event) {
switch(event.key) {
case "Enter":
event.preventDefault();
this.handleEnter(event);
break;
case "Backspace":
this.props.onKeyDown(event);
break;
}
},
handleClick: function(event) {
this.props.handleClick(event);
},
render: function() {
return ;
}
});
module.exports = DateInput;
================================================
FILE: src/react-datepicker/datepicker.js
================================================
/** @jsx React.DOM */
var React = require('react/addons');
var Popover = require('./popover');
var DateUtil = require('./util/date');
var Calendar = require('./calendar');
var DateInput = require('./date_input');
var DatePicker = React.createClass({
propTypes: {
onChange: React.PropTypes.func,
onKeyDown: React.PropTypes.func
},
getInitialState: function() {
return {
focus: true
};
},
handleFocus: function() {
this.setState({
focus: true
});
},
hideCalendar: function() {
this.setState({
focus: false
});
},
handleSelect: function(date) {
this.hideCalendar();
this.setSelected(date);
},
setSelected: function(date) {
this.props.onChange(date.moment());
},
onInputClick: function() {
this.setState({
focus: true
});
},
calendar: function() {
if (this.state.focus) {
return (
);
}
},
render: function() {
return (
{this.calendar()}
);
}
});
module.exports = DatePicker;
================================================
FILE: src/react-datepicker/day.js
================================================
/** @jsx React.DOM */
var React = require('react/addons');
var moment = require('moment');
var Day = React.createClass({
handleClick: function(event) {
if (this.props.disabled) return;
this.props.onClick(event);
},
render: function() {
classes = React.addons.classSet({
'datepicker__day': true,
'datepicker__day--disabled': this.props.disabled,
'datepicker__day--selected': this.props.day.sameDay(this.props.selected),
'datepicker__day--today': this.props.day.sameDay(moment())
});
return (
{this.props.day.day()}
);
}
});
module.exports = Day;
================================================
FILE: src/react-datepicker/popover.js
================================================
/** @jsx React.DOM */
var React = require('react/addons');
var Tether = require('tether/tether');
var Popover = React.createClass({
displayName: 'Popover',
componentWillMount: function() {
popoverContainer = document.createElement('span');
popoverContainer.className = 'datepicker__container';
this._popoverElement = popoverContainer;
document.querySelector('body').appendChild(this._popoverElement);
},
componentDidMount: function() {
this._renderPopover();
},
componentDidUpdate: function() {
this._renderPopover();
},
_popoverComponent: function() {
var className = this.props.className;
return (
{this.props.children}
);
},
_tetherOptions: function() {
return {
element: this._popoverElement,
target: this.getDOMNode().parentElement,
attachment: 'top left',
targetAttachment: 'bottom left',
targetOffset: '10px 0',
optimizations: {
moveElement: false // always moves to anyway!
},
constraints: [
{
to: 'window',
attachment: 'together',
pin: true
}
]
};
},
_renderPopover: function() {
React.render(this._popoverComponent(), this._popoverElement);
if (this._tether != null) {
this._tether.setOptions(this._tetherOptions());
} else {
this._tether = new Tether(this._tetherOptions());
}
},
componentWillUnmount: function() {
this._tether.destroy();
React.unmountComponentAtNode(this._popoverElement);
if (this._popoverElement.parentNode) {
this._popoverElement.parentNode.removeChild(this._popoverElement);
}
},
render: function() {
return ;
}
});
module.exports = Popover;
================================================
FILE: src/react-datepicker/util/date.js
================================================
function DateUtil(date) {
this._date = date;
}
DateUtil.prototype.isBefore = function(other) {
return this._date.isBefore(other._date, 'day');
};
DateUtil.prototype.isAfter = function(other) {
return this._date.isAfter(other._date, 'day');
};
DateUtil.prototype.sameDay = function(other) {
return this._date.isSame(other._date, 'day');
};
DateUtil.prototype.sameMonth = function(other) {
return this._date.isSame(other._date, 'month');
};
DateUtil.prototype.day = function() {
return this._date.date();
};
DateUtil.prototype.mapDaysInWeek = function(callback) {
var week = [];
var firstDay = this._date.clone().startOf('isoWeek');
for(var i = 0; i < 7; i++) {
var day = new DateUtil(firstDay.clone().add(i, 'days'));
week[i] = callback(day, i);
}
return week;
};
DateUtil.prototype.mapWeeksInMonth = function(callback) {
var month = [];
var firstDay = this._date.clone().startOf('month').startOf('isoWeek');
for(var i = 0; i < 6; i++) {
var weekStart = new DateUtil(firstDay.clone().add(i, 'weeks'));
month[i] = callback(weekStart, i);
}
return month;
};
DateUtil.prototype.weekInMonth = function(other) {
var firstDayInWeek = this._date.clone();
var lastDayInWeek = this._date.clone().isoWeekday(7);
return firstDayInWeek.isSame(other._date, 'month') ||
lastDayInWeek.isSame(other._date, 'month');
};
DateUtil.prototype.format = function() {
return this._date.format.apply(this._date, arguments);
};
DateUtil.prototype.addMonth = function() {
return new DateUtil(this._date.clone().add(1, 'month'));
};
DateUtil.prototype.subtractMonth = function() {
return new DateUtil(this._date.clone().subtract(1, 'month'));
};
DateUtil.prototype.clone = function() {
return new DateUtil(this._date.clone());
};
DateUtil.prototype.safeClone = function(alternative) {
if (!! this._date) return this.clone();
if (alternative === undefined) alternative = null;
return new DateUtil(alternative);
};
DateUtil.prototype.moment = function() {
return this._date;
};
module.exports = DateUtil;
================================================
FILE: src/react-typeahead/keyevent.js
================================================
/**
* PolyFills make me sad
*/
var KeyEvent = KeyEvent || {};
KeyEvent.DOM_VK_UP = KeyEvent.DOM_VK_UP || 38;
KeyEvent.DOM_VK_DOWN = KeyEvent.DOM_VK_DOWN || 40;
KeyEvent.DOM_VK_BACK_SPACE = KeyEvent.DOM_VK_BACK_SPACE || 8;
KeyEvent.DOM_VK_RETURN = KeyEvent.DOM_VK_RETURN || 13;
KeyEvent.DOM_VK_ENTER = KeyEvent.DOM_VK_ENTER || 14;
KeyEvent.DOM_VK_ESCAPE = KeyEvent.DOM_VK_ESCAPE || 27;
KeyEvent.DOM_VK_TAB = KeyEvent.DOM_VK_TAB || 9;
module.exports = KeyEvent;
================================================
FILE: src/react-typeahead/react-typeahead.js
================================================
var Typeahead = require('./typeahead');
var Tokenizer = require('./tokenizer');
module.exports = {
Typeahead: Typeahead,
Tokenizer: Tokenizer
};
================================================
FILE: src/react-typeahead/tokenizer/index.js
================================================
/**
* @jsx React.DOM
*/
var React = window.React || require('react');
var Token = require('./token');
var KeyEvent = require('../keyevent');
var Typeahead = require('../typeahead');
/**
* A typeahead that, when an option is selected, instead of simply filling
* the text entry widget, prepends a renderable "token", that may be deleted
* by pressing backspace on the beginning of the line with the keyboard.
*/
var TypeaheadTokenizer = React.createClass({
propTypes: {
options: React.PropTypes.array,
customClasses: React.PropTypes.object,
defaultSelected: React.PropTypes.array,
defaultValue: React.PropTypes.string,
placeholder: React.PropTypes.string,
onTokenRemove: React.PropTypes.func,
onTokenAdd: React.PropTypes.func
},
getInitialState: function() {
return {
selected: this.props.defaultSelected,
category: "",
operator: ""
};
},
getDefaultProps: function() {
return {
options: [],
defaultSelected: [],
customClasses: {},
defaultValue: "",
placeholder: "",
onTokenAdd: function() {},
onTokenRemove: function() {}
};
},
// TODO: Support initialized tokens
//
_renderTokens: function() {
var tokenClasses = {}
tokenClasses[this.props.customClasses.token] = !!this.props.customClasses.token;
var classList = React.addons.classSet(tokenClasses);
var result = this.state.selected.map(function(selected) {
mykey = selected.category + selected.operator + selected.value;
return (
{ selected }
)
}, this);
return result;
},
_getOptionsForTypeahead: function() {
if (this.state.category=="") {
var categories=[];
for (var i = 0; i < this.props.options.length; i++) {
categories.push(this.props.options[i].category);
}
return categories;
} else if (this.state.operator=="") {
categoryType = this._getCategoryType();
if (categoryType == "text") { return ["==", "!=", "contains", "!contains"];}
else if (categoryType == "textoptions") {return ["==", "!="];}
else if (categoryType == "number" || categoryType == "date") {return ["==", "!=", "<", "<=", ">", ">="];}
else {console.log("WARNING: Unknown category type in tokenizer");};
} else {
var options = this._getCategoryOptions();
if (options == null) return []
else return options();
}
return this.props.options;
},
_getHeader: function() {
if (this.state.category=="") {
return "Category";
} else if (this.state.operator=="") {
return "Operator";
} else {
return "Value";
}
return this.props.options;
},
_getCategoryType: function() {
for (var i = 0; i < this.props.options.length; i++) {
if (this.props.options[i].category == this.state.category) {
categoryType = this.props.options[i].type;
return categoryType;
}
}
},
_getCategoryOptions: function() {
for (var i = 0; i < this.props.options.length; i++) {
if (this.props.options[i].category == this.state.category) {
return this.props.options[i].options;
}
}
},
_onKeyDown: function(event) {
// We only care about intercepting backspaces
if (event.keyCode !== KeyEvent.DOM_VK_BACK_SPACE) {
return;
}
// Remove token ONLY when bksp pressed at beginning of line
// without a selection
var entry = this.refs.typeahead.inputRef().getDOMNode();
if (entry.selectionStart == entry.selectionEnd &&
entry.selectionStart == 0)
{
if (this.state.operator != "") {
this.setState({operator: ""});
} else if (this.state.category != "") {
this.setState({category: ""});
} else {
// No tokens
if (!this.state.selected.length) {
return;
}
this._removeTokenForValue(
this.state.selected[this.state.selected.length - 1]
);
}
event.preventDefault();
}
},
_removeTokenForValue: function(value) {
var index = this.state.selected.indexOf(value);
if (index == -1) {
return;
}
this.state.selected.splice(index, 1);
this.setState({selected: this.state.selected});
this.props.onTokenRemove(this.state.selected);
return;
},
_addTokenForValue: function(value) {
if (this.state.category == "") {
this.setState({category: value});
this.refs.typeahead.setEntryText("");
return;
}
if (this.state.operator == "") {
this.setState({operator: value});
this.refs.typeahead.setEntryText("");
return;
}
value = {"category":this.state.category,"operator":this.state.operator,"value":value};
this.state.selected.push(value);
this.setState({selected: this.state.selected});
this.refs.typeahead.setEntryText("");
this.props.onTokenAdd(this.state.selected);
this.setState({category: "", operator: ""});
return;
},
/***
* Returns the data type the input should use ("date" or "text")
*/
_getInputType: function() {
if (this.state.category != "" && this.state.operator != "") {
return this._getCategoryType();
} else {
return "text";
}
},
render: function() {
var classes = {}
classes[this.props.customClasses.typeahead] = !!this.props.customClasses.typeahead;
var classList = React.addons.classSet(classes);
return (
{ this._renderTokens() }
{ this.state.category }
{ this.state.operator }
)
}
});
module.exports = TypeaheadTokenizer;
================================================
FILE: src/react-typeahead/tokenizer/token.js
================================================
/**
* @jsx React.DOM
*/
var React = window.React || require('react');
/**
* Encapsulates the rendering of an option that has been "selected" in a
* TypeaheadTokenizer
*/
var Token = React.createClass({
propTypes: {
children: React.PropTypes.object,
onRemove: React.PropTypes.func
},
render: function() {
return (
{this.props.children["category"]} {this.props.children["operator"]} "{this.props.children["value"]}"
{this._makeCloseButton()}
);
},
_makeCloseButton: function() {
if (!this.props.onRemove) {
return "";
}
return (
×
);
}
});
module.exports = Token;
================================================
FILE: src/react-typeahead/typeahead/index.js
================================================
/**
* @jsx React.DOM
*/
var React = window.React || require('react/addons');
var TypeaheadSelector = require('./selector');
var KeyEvent = require('../keyevent');
var fuzzy = require('fuzzy');
var DatePicker = require('../../react-datepicker/datepicker.js');
var moment = require('moment');
/**
* A "typeahead", an auto-completing text input
*
* Renders an text input that shows options nearby that you can use the
* keyboard or mouse to select. Requires CSS for MASSIVE DAMAGE.
*/
var Typeahead = React.createClass({
propTypes: {
customClasses: React.PropTypes.object,
maxVisible: React.PropTypes.number,
options: React.PropTypes.array,
header: React.PropTypes.string,
datatype: React.PropTypes.string,
defaultValue: React.PropTypes.string,
placeholder: React.PropTypes.string,
onOptionSelected: React.PropTypes.func,
onKeyDown: React.PropTypes.func
},
mixins: [
require('react-onclickoutside')
],
getDefaultProps: function() {
return {
options: [],
header: "Category",
datatype: "text",
customClasses: {},
defaultValue: "",
placeholder: "",
onKeyDown: function(event) { return },
onOptionSelected: function(option) { }
};
},
getInitialState: function() {
return {
// The set of all options... Does this need to be state? I guess for lazy load...
options: this.props.options,
header: this.props.header,
datatype: this.props.datatype,
focused: false,
// The currently visible set of options
visible: this.getOptionsForValue(this.props.defaultValue, this.props.options),
// This should be called something else, "entryValue"
entryValue: this.props.defaultValue,
// A valid typeahead value
selection: null
};
},
componentWillReceiveProps: function(nextProps) {
this.setState({options: nextProps.options,
header: nextProps.header,
datatype: nextProps.datatype,
visible: nextProps.options});
},
getOptionsForValue: function(value, options) {
var result = fuzzy.filter(value, options).map(function(res) {
return res.string;
});
if (this.props.maxVisible) {
result = result.slice(0, this.props.maxVisible);
}
return result;
},
setEntryText: function(value) {
if (this.refs.entry != null) {
this.refs.entry.getDOMNode().value = value;
}
this._onTextEntryUpdated();
},
_renderIncrementalSearchResults: function() {
if (!this.state.focused) {
return "";
}
// Something was just selected
if (this.state.selection) {
return "";
}
// There are no typeahead / autocomplete suggestions
if (!this.state.visible.length) {
return "";
}
return (
);
},
_onOptionSelected: function(option) {
var nEntry = this.refs.entry.getDOMNode();
nEntry.focus();
nEntry.value = option;
this.setState({visible: this.getOptionsForValue(option, this.state.options),
selection: option,
entryValue: option});
this.props.onOptionSelected(option);
},
_onTextEntryUpdated: function() {
var value = "";
if (this.refs.entry != null) {
value = this.refs.entry.getDOMNode().value;
}
this.setState({visible: this.getOptionsForValue(value, this.state.options),
selection: null,
entryValue: value});
},
_onEnter: function(event) {
if (!this.refs.sel.state.selection) {
return this.props.onKeyDown(event);
}
this._onOptionSelected(this.refs.sel.state.selection);
},
_onEscape: function() {
this.refs.sel.setSelectionIndex(null)
},
_onTab: function(event) {
var option = this.refs.sel.state.selection ?
this.refs.sel.state.selection : this.state.visible[0];
this._onOptionSelected(option)
},
eventMap: function(event) {
var events = {};
events[KeyEvent.DOM_VK_UP] = this.refs.sel.navUp;
events[KeyEvent.DOM_VK_DOWN] = this.refs.sel.navDown;
events[KeyEvent.DOM_VK_RETURN] = events[KeyEvent.DOM_VK_ENTER] = this._onEnter;
events[KeyEvent.DOM_VK_ESCAPE] = this._onEscape;
events[KeyEvent.DOM_VK_TAB] = this._onTab;
return events;
},
_onKeyDown: function(event) {
// If Enter pressed
if (event.keyCode === KeyEvent.DOM_VK_RETURN || event.keyCode === KeyEvent.DOM_VK_ENTER) {
// If no options were provided so we can match on anything
if (this.props.options.length===0) {
this._onOptionSelected(this.state.entryValue);
}
// If what has been typed in is an exact match of one of the options
if (this.props.options.indexOf(this.state.entryValue) > -1) {
this._onOptionSelected(this.state.entryValue);
}
}
// If there are no visible elements, don't perform selector navigation.
// Just pass this up to the upstream onKeydown handler
if (!this.refs.sel) {
return this.props.onKeyDown(event);
}
var handler = this.eventMap()[event.keyCode];
if (handler) {
handler(event);
} else {
return this.props.onKeyDown(event);
}
// Don't propagate the keystroke back to the DOM/browser
event.preventDefault();
},
_onFocus: function(event) {
this.setState({focused: true});
},
handleClickOutside: function(event) {
this.setState({focused:false});
},
isDescendant: function(parent, child) {
var node = child.parentNode;
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
},
_handleDateChange: function(date) {
this.props.onOptionSelected(date.format("YYYY-MM-DD"));
},
_showDatePicker: function() {
if (this.state.datatype == "date") {
return true;
}
return false;
},
inputRef: function() {
if (this._showDatePicker()) {
return this.refs.datepicker.refs.dateinput.refs.entry;
} else {
return this.refs.entry;
}
},
render: function() {
var inputClasses = {}
inputClasses[this.props.customClasses.input] = !!this.props.customClasses.input;
var inputClassList = React.addons.classSet(inputClasses)
var classes = {
typeahead: true
}
classes[this.props.className] = !!this.props.className;
var classList = React.addons.classSet(classes);
if (this._showDatePicker()) {
return (
);
}
return (
{ this._renderIncrementalSearchResults() }
);
}
});
module.exports = Typeahead;
================================================
FILE: src/react-typeahead/typeahead/option.js
================================================
/**
* @jsx React.DOM
*/
var React = window.React || require('react/addons');
/**
* A single option within the TypeaheadSelector
*/
var TypeaheadOption = React.createClass({
propTypes: {
customClasses: React.PropTypes.object,
onClick: React.PropTypes.func,
children: React.PropTypes.string
},
getDefaultProps: function() {
return {
customClasses: {},
onClick: function(event) {
event.preventDefault();
}
};
},
getInitialState: function() {
return {
hover: false
};
},
render: function() {
var classes = {
hover: this.props.hover
}
classes[this.props.customClasses.listItem] = !!this.props.customClasses.listItem;
var classList = React.addons.classSet(classes);
return (
{ this.props.children }
);
},
_getClasses: function() {
var classes = {
"typeahead-option": true,
};
classes[this.props.customClasses.listAnchor] = !!this.props.customClasses.listAnchor;
return React.addons.classSet(classes);
},
_onClick: function() {
return this.props.onClick();
}
});
module.exports = TypeaheadOption;
================================================
FILE: src/react-typeahead/typeahead/selector.js
================================================
/**
* @jsx React.DOM
*/
var React = window.React || require('react/addons');
var TypeaheadOption = require('./option');
/**
* Container for the options rendered as part of the autocompletion process
* of the typeahead
*/
var TypeaheadSelector = React.createClass({
propTypes: {
options: React.PropTypes.array,
header: React.PropTypes.string,
customClasses: React.PropTypes.object,
selectionIndex: React.PropTypes.number,
onOptionSelected: React.PropTypes.func
},
getDefaultProps: function() {
return {
selectionIndex: null,
customClasses: {},
onOptionSelected: function(option) { }
};
},
getInitialState: function() {
return {
selectionIndex: this.props.selectionIndex,
selection: this.getSelectionForIndex(this.props.selectionIndex)
};
},
componentWillReceiveProps: function(nextProps) {
this.setState({selectionIndex: null});
},
render: function() {
var classes = {
"typeahead-selector": true
};
classes[this.props.customClasses.results] = this.props.customClasses.results;
var classList = React.addons.classSet(classes);
var results = this.props.options.map(function(result, i) {
return (
{ result }
);
}, this);
return
- {this.props.header}
{ results }
;
},
setSelectionIndex: function(index) {
this.setState({
selectionIndex: index,
selection: this.getSelectionForIndex(index),
});
},
getSelectionForIndex: function(index) {
if (index === null) {
return null;
}
return this.props.options[index];
},
_onClick: function(result) {
this.props.onOptionSelected(result);
},
_nav: function(delta) {
if (!this.props.options) {
return;
}
var newIndex;
if (this.state.selectionIndex === null) {
if (delta == 1) {
newIndex = 0;
} else {
newIndex = delta;
}
} else {
newIndex = this.state.selectionIndex + delta;
}
if (newIndex < 0) {
newIndex += this.props.options.length;
} else if (newIndex >= this.props.options.length) {
newIndex -= this.props.options.length;
}
var newSelection = this.getSelectionForIndex(newIndex);
this.setState({selectionIndex: newIndex,
selection: newSelection});
},
navDown: function() {
this._nav(1);
},
navUp: function() {
this._nav(-1);
}
});
module.exports = TypeaheadSelector;