48 | {this.days(weekStart)}
49 |
50 | );
51 | },
52 |
53 | renderDay: function(day, key) {
54 | var minDate = new DateUtil(this.props.minDate).safeClone(),
55 | maxDate = new DateUtil(this.props.maxDate).safeClone(),
56 | disabled = day.isBefore(minDate) || day.isAfter(maxDate);
57 |
58 | return (
59 |
76 |
77 |
78 |
80 |
81 |
82 | {this.state.date.format("MMMM YYYY")}
83 |
84 |
86 |
87 |
88 |
Mo
89 |
Tu
90 |
We
91 |
Th
92 |
Fr
93 |
Sa
94 |
Su
95 |
96 |
97 |
98 | {this.weeks()}
99 |
100 |
53 |
60 | );
61 | }
62 | },
63 |
64 | render: function() {
65 | return (
66 |
67 |
81 | );
82 | }
83 | });
84 |
85 | module.exports = DatePicker;
86 |
--------------------------------------------------------------------------------
/src/react-datepicker/day.js:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 |
3 | var React = require('react/addons');
4 | var moment = require('moment');
5 |
6 | var Day = React.createClass({
7 | handleClick: function(event) {
8 | if (this.props.disabled) return;
9 |
10 | this.props.onClick(event);
11 | },
12 |
13 | render: function() {
14 | classes = React.addons.classSet({
15 | 'datepicker__day': true,
16 | 'datepicker__day--disabled': this.props.disabled,
17 | 'datepicker__day--selected': this.props.day.sameDay(this.props.selected),
18 | 'datepicker__day--today': this.props.day.sameDay(moment())
19 | });
20 |
21 | return (
22 |
23 | {this.props.day.day()}
24 |
25 | );
26 | }
27 | });
28 |
29 | module.exports = Day;
30 |
--------------------------------------------------------------------------------
/src/react-datepicker/popover.js:
--------------------------------------------------------------------------------
1 | /** @jsx React.DOM */
2 |
3 | var React = require('react/addons');
4 | var Tether = require('tether/tether');
5 |
6 |
7 | var Popover = React.createClass({
8 | displayName: 'Popover',
9 |
10 | componentWillMount: function() {
11 | popoverContainer = document.createElement('span');
12 | popoverContainer.className = 'datepicker__container';
13 |
14 | this._popoverElement = popoverContainer;
15 |
16 | document.querySelector('body').appendChild(this._popoverElement);
17 | },
18 |
19 | componentDidMount: function() {
20 | this._renderPopover();
21 | },
22 |
23 | componentDidUpdate: function() {
24 | this._renderPopover();
25 | },
26 |
27 | _popoverComponent: function() {
28 | var className = this.props.className;
29 | return (
30 |
31 | {this.props.children}
32 |
33 | );
34 | },
35 |
36 | _tetherOptions: function() {
37 | return {
38 | element: this._popoverElement,
39 | target: this.getDOMNode().parentElement,
40 | attachment: 'top left',
41 | targetAttachment: 'bottom left',
42 | targetOffset: '10px 0',
43 | optimizations: {
44 | moveElement: false // always moves to anyway!
45 | },
46 | constraints: [
47 | {
48 | to: 'window',
49 | attachment: 'together',
50 | pin: true
51 | }
52 | ]
53 | };
54 | },
55 |
56 | _renderPopover: function() {
57 | React.render(this._popoverComponent(), this._popoverElement);
58 |
59 | if (this._tether != null) {
60 | this._tether.setOptions(this._tetherOptions());
61 | } else {
62 | this._tether = new Tether(this._tetherOptions());
63 | }
64 | },
65 |
66 | componentWillUnmount: function() {
67 | this._tether.destroy();
68 | React.unmountComponentAtNode(this._popoverElement);
69 | if (this._popoverElement.parentNode) {
70 | this._popoverElement.parentNode.removeChild(this._popoverElement);
71 | }
72 | },
73 |
74 | render: function() {
75 | return
58 | { selected }
59 |
60 |
61 | )
62 | }, this);
63 | return result;
64 | },
65 |
66 | _getOptionsForTypeahead: function() {
67 | if (this.state.category=="") {
68 | var categories=[];
69 | for (var i = 0; i < this.props.options.length; i++) {
70 | categories.push(this.props.options[i].category);
71 | }
72 | return categories;
73 | } else if (this.state.operator=="") {
74 | categoryType = this._getCategoryType();
75 |
76 | if (categoryType == "text") { return ["==", "!=", "contains", "!contains"];}
77 | else if (categoryType == "textoptions") {return ["==", "!="];}
78 | else if (categoryType == "number" || categoryType == "date") {return ["==", "!=", "<", "<=", ">", ">="];}
79 | else {console.log("WARNING: Unknown category type in tokenizer");};
80 |
81 | } else {
82 | var options = this._getCategoryOptions();
83 | if (options == null) return []
84 | else return options();
85 | }
86 |
87 | return this.props.options;
88 | },
89 |
90 | _getHeader: function() {
91 | if (this.state.category=="") {
92 | return "Category";
93 | } else if (this.state.operator=="") {
94 | return "Operator";
95 | } else {
96 | return "Value";
97 | }
98 |
99 | return this.props.options;
100 | },
101 |
102 | _getCategoryType: function() {
103 | for (var i = 0; i < this.props.options.length; i++) {
104 | if (this.props.options[i].category == this.state.category) {
105 | categoryType = this.props.options[i].type;
106 | return categoryType;
107 | }
108 | }
109 | },
110 |
111 | _getCategoryOptions: function() {
112 | for (var i = 0; i < this.props.options.length; i++) {
113 | if (this.props.options[i].category == this.state.category) {
114 | return this.props.options[i].options;
115 | }
116 | }
117 | },
118 |
119 |
120 | _onKeyDown: function(event) {
121 | // We only care about intercepting backspaces
122 | if (event.keyCode !== KeyEvent.DOM_VK_BACK_SPACE) {
123 | return;
124 | }
125 |
126 | // Remove token ONLY when bksp pressed at beginning of line
127 | // without a selection
128 | var entry = this.refs.typeahead.inputRef().getDOMNode();
129 | if (entry.selectionStart == entry.selectionEnd &&
130 | entry.selectionStart == 0)
131 | {
132 | if (this.state.operator != "") {
133 | this.setState({operator: ""});
134 | } else if (this.state.category != "") {
135 | this.setState({category: ""});
136 | } else {
137 | // No tokens
138 | if (!this.state.selected.length) {
139 | return;
140 | }
141 | this._removeTokenForValue(
142 | this.state.selected[this.state.selected.length - 1]
143 | );
144 | }
145 | event.preventDefault();
146 | }
147 | },
148 |
149 | _removeTokenForValue: function(value) {
150 | var index = this.state.selected.indexOf(value);
151 | if (index == -1) {
152 | return;
153 | }
154 |
155 | this.state.selected.splice(index, 1);
156 | this.setState({selected: this.state.selected});
157 | this.props.onTokenRemove(this.state.selected);
158 |
159 | return;
160 | },
161 |
162 | _addTokenForValue: function(value) {
163 | if (this.state.category == "") {
164 | this.setState({category: value});
165 | this.refs.typeahead.setEntryText("");
166 | return;
167 | }
168 |
169 | if (this.state.operator == "") {
170 | this.setState({operator: value});
171 | this.refs.typeahead.setEntryText("");
172 | return;
173 | }
174 |
175 | value = {"category":this.state.category,"operator":this.state.operator,"value":value};
176 |
177 | this.state.selected.push(value);
178 | this.setState({selected: this.state.selected});
179 | this.refs.typeahead.setEntryText("");
180 | this.props.onTokenAdd(this.state.selected);
181 |
182 | this.setState({category: "", operator: ""});
183 |
184 | return;
185 | },
186 |
187 | /***
188 | * Returns the data type the input should use ("date" or "text")
189 | */
190 | _getInputType: function() {
191 | if (this.state.category != "" && this.state.operator != "") {
192 | return this._getCategoryType();
193 | } else {
194 | return "text";
195 | }
196 | },
197 |
198 | render: function() {
199 | var classes = {}
200 | classes[this.props.customClasses.typeahead] = !!this.props.customClasses.typeahead;
201 | var classList = React.addons.classSet(classes);
202 | return (
203 |
204 |
205 |
207 |
208 | { this._renderTokens() }
209 |
210 |
211 |
{ this.state.category }
212 |
{ this.state.operator }
213 |
214 |
224 |
225 |
226 |
20 | {this.props.children["category"]} {this.props.children["operator"]} "{this.props.children["value"]}"
21 | {this._makeCloseButton()}
22 |
23 | );
24 | },
25 |
26 | _makeCloseButton: function() {
27 | if (!this.props.onRemove) {
28 | return "";
29 | }
30 | return (
31 | ×
35 | );
36 | }
37 | });
38 |
39 | module.exports = Token;
40 |
--------------------------------------------------------------------------------
/src/react-typeahead/typeahead/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 |
5 | var React = window.React || require('react/addons');
6 | var TypeaheadSelector = require('./selector');
7 | var KeyEvent = require('../keyevent');
8 | var fuzzy = require('fuzzy');
9 | var DatePicker = require('../../react-datepicker/datepicker.js');
10 | var moment = require('moment');
11 |
12 | /**
13 | * A "typeahead", an auto-completing text input
14 | *
15 | * Renders an text input that shows options nearby that you can use the
16 | * keyboard or mouse to select. Requires CSS for MASSIVE DAMAGE.
17 | */
18 | var Typeahead = React.createClass({
19 | propTypes: {
20 | customClasses: React.PropTypes.object,
21 | maxVisible: React.PropTypes.number,
22 | options: React.PropTypes.array,
23 | header: React.PropTypes.string,
24 | datatype: React.PropTypes.string,
25 | defaultValue: React.PropTypes.string,
26 | placeholder: React.PropTypes.string,
27 | onOptionSelected: React.PropTypes.func,
28 | onKeyDown: React.PropTypes.func
29 | },
30 |
31 | mixins: [
32 | require('react-onclickoutside')
33 | ],
34 |
35 | getDefaultProps: function() {
36 | return {
37 | options: [],
38 | header: "Category",
39 | datatype: "text",
40 | customClasses: {},
41 | defaultValue: "",
42 | placeholder: "",
43 | onKeyDown: function(event) { return },
44 | onOptionSelected: function(option) { }
45 | };
46 | },
47 |
48 | getInitialState: function() {
49 | return {
50 | // The set of all options... Does this need to be state? I guess for lazy load...
51 | options: this.props.options,
52 | header: this.props.header,
53 | datatype: this.props.datatype,
54 |
55 | focused: false,
56 |
57 | // The currently visible set of options
58 | visible: this.getOptionsForValue(this.props.defaultValue, this.props.options),
59 |
60 | // This should be called something else, "entryValue"
61 | entryValue: this.props.defaultValue,
62 |
63 | // A valid typeahead value
64 | selection: null
65 | };
66 | },
67 |
68 | componentWillReceiveProps: function(nextProps) {
69 | this.setState({options: nextProps.options,
70 | header: nextProps.header,
71 | datatype: nextProps.datatype,
72 | visible: nextProps.options});
73 | },
74 |
75 | getOptionsForValue: function(value, options) {
76 | var result = fuzzy.filter(value, options).map(function(res) {
77 | return res.string;
78 | });
79 |
80 | if (this.props.maxVisible) {
81 | result = result.slice(0, this.props.maxVisible);
82 | }
83 | return result;
84 | },
85 |
86 | setEntryText: function(value) {
87 | if (this.refs.entry != null) {
88 | this.refs.entry.getDOMNode().value = value;
89 | }
90 | this._onTextEntryUpdated();
91 | },
92 |
93 | _renderIncrementalSearchResults: function() {
94 | if (!this.state.focused) {
95 | return "";
96 | }
97 |
98 | // Something was just selected
99 | if (this.state.selection) {
100 | return "";
101 | }
102 |
103 | // There are no typeahead / autocomplete suggestions
104 | if (!this.state.visible.length) {
105 | return "";
106 | }
107 |
108 | return (
109 |
250 |
251 |
252 | );
253 | }
254 |
255 | return (
256 |
257 |
264 | );
265 | }
266 | });
267 |
268 | module.exports = Typeahead;
269 |
--------------------------------------------------------------------------------
/src/react-typeahead/typeahead/option.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 |
5 | var React = window.React || require('react/addons');
6 |
7 | /**
8 | * A single option within the TypeaheadSelector
9 | */
10 | var TypeaheadOption = React.createClass({
11 | propTypes: {
12 | customClasses: React.PropTypes.object,
13 | onClick: React.PropTypes.func,
14 | children: React.PropTypes.string
15 | },
16 |
17 | getDefaultProps: function() {
18 | return {
19 | customClasses: {},
20 | onClick: function(event) {
21 | event.preventDefault();
22 | }
23 | };
24 | },
25 |
26 | getInitialState: function() {
27 | return {
28 | hover: false
29 | };
30 | },
31 |
32 | render: function() {
33 | var classes = {
34 | hover: this.props.hover
35 | }
36 | classes[this.props.customClasses.listItem] = !!this.props.customClasses.listItem;
37 | var classList = React.addons.classSet(classes);
38 |
39 | return (
40 |
41 |
42 | { this.props.children }
43 |
44 |
45 | );
46 | },
47 |
48 | _getClasses: function() {
49 | var classes = {
50 | "typeahead-option": true,
51 | };
52 | classes[this.props.customClasses.listAnchor] = !!this.props.customClasses.listAnchor;
53 | return React.addons.classSet(classes);
54 | },
55 |
56 | _onClick: function() {
57 | return this.props.onClick();
58 | }
59 | });
60 |
61 |
62 | module.exports = TypeaheadOption;
63 |
--------------------------------------------------------------------------------
/src/react-typeahead/typeahead/selector.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jsx React.DOM
3 | */
4 |
5 | var React = window.React || require('react/addons');
6 | var TypeaheadOption = require('./option');
7 |
8 | /**
9 | * Container for the options rendered as part of the autocompletion process
10 | * of the typeahead
11 | */
12 | var TypeaheadSelector = React.createClass({
13 | propTypes: {
14 | options: React.PropTypes.array,
15 | header: React.PropTypes.string,
16 | customClasses: React.PropTypes.object,
17 | selectionIndex: React.PropTypes.number,
18 | onOptionSelected: React.PropTypes.func
19 | },
20 |
21 | getDefaultProps: function() {
22 | return {
23 | selectionIndex: null,
24 | customClasses: {},
25 | onOptionSelected: function(option) { }
26 | };
27 | },
28 |
29 | getInitialState: function() {
30 | return {
31 | selectionIndex: this.props.selectionIndex,
32 | selection: this.getSelectionForIndex(this.props.selectionIndex)
33 | };
34 | },
35 |
36 | componentWillReceiveProps: function(nextProps) {
37 | this.setState({selectionIndex: null});
38 | },
39 |
40 | render: function() {
41 | var classes = {
42 | "typeahead-selector": true
43 | };
44 | classes[this.props.customClasses.results] = this.props.customClasses.results;
45 | var classList = React.addons.classSet(classes);
46 |
47 | var results = this.props.options.map(function(result, i) {
48 | return (
49 |
53 | { result }
54 |
55 | );
56 | }, this);
57 | return
58 | {this.props.header}
59 | { results }
60 | ;
61 | },
62 |
63 | setSelectionIndex: function(index) {
64 | this.setState({
65 | selectionIndex: index,
66 | selection: this.getSelectionForIndex(index),
67 | });
68 | },
69 |
70 | getSelectionForIndex: function(index) {
71 | if (index === null) {
72 | return null;
73 | }
74 | return this.props.options[index];
75 | },
76 |
77 | _onClick: function(result) {
78 | this.props.onOptionSelected(result);
79 | },
80 |
81 | _nav: function(delta) {
82 | if (!this.props.options) {
83 | return;
84 | }
85 | var newIndex;
86 | if (this.state.selectionIndex === null) {
87 | if (delta == 1) {
88 | newIndex = 0;
89 | } else {
90 | newIndex = delta;
91 | }
92 | } else {
93 | newIndex = this.state.selectionIndex + delta;
94 | }
95 | if (newIndex < 0) {
96 | newIndex += this.props.options.length;
97 | } else if (newIndex >= this.props.options.length) {
98 | newIndex -= this.props.options.length;
99 | }
100 | var newSelection = this.getSelectionForIndex(newIndex);
101 | this.setState({selectionIndex: newIndex,
102 | selection: newSelection});
103 | },
104 |
105 | navDown: function() {
106 | this._nav(1);
107 | },
108 |
109 | navUp: function() {
110 | this._nav(-1);
111 | }
112 |
113 | });
114 |
115 | module.exports = TypeaheadSelector;
116 |
--------------------------------------------------------------------------------