1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.Select = undefined;
|
7 |
|
8 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
9 |
|
10 | var _react = require('react');
|
11 |
|
12 | var _react2 = _interopRequireDefault(_react);
|
13 |
|
14 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
15 |
|
16 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
17 |
|
18 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
19 |
|
20 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
21 |
|
22 | var ReactDom = require('react-dom');
|
23 |
|
24 | var Select = exports.Select = function (_React$Component) {
|
25 | _inherits(Select, _React$Component);
|
26 |
|
27 | function Select(props) {
|
28 | _classCallCheck(this, Select);
|
29 |
|
30 | var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
|
31 |
|
32 | _this.getVisibleItems = _this.getVisibleItems.bind(_this);
|
33 | _this.handleOutsideClick = _this.handleOutsideClick.bind(_this);
|
34 | _this.inputOnChange = _this.inputOnChange.bind(_this);
|
35 | _this.inputOnKeyPress = _this.inputOnKeyPress.bind(_this);
|
36 | _this.inputOnKeyDown = _this.inputOnKeyDown.bind(_this);
|
37 | _this.linkOnKeyDown = _this.linkOnKeyDown.bind(_this);
|
38 | _this.setNextHighlightedItem = _this.setNextHighlightedItem.bind(_this);
|
39 | _this.findIndex = _this.findIndex.bind(_this);
|
40 | return _this;
|
41 | }
|
42 |
|
43 | _createClass(Select, [{
|
44 | key: 'componentWillMount',
|
45 | value: function () {
|
46 | function componentWillMount() {
|
47 | this.setState({
|
48 | open: false,
|
49 | items: this.props.items ? this.props.items : {},
|
50 | filter: '',
|
51 | selectedItem: '',
|
52 | selectedItemLabel: '',
|
53 | visibleItems: [],
|
54 | tabIndex: this.props.tabIndex ? this.props.tabIndex : null,
|
55 | currentlyHighlighted: ''
|
56 | });
|
57 | document.addEventListener('click', this.handleOutsideClick, false);
|
58 | }
|
59 |
|
60 | return componentWillMount;
|
61 | }()
|
62 | }, {
|
63 | key: 'componentDidMount',
|
64 | value: function () {
|
65 | function componentDidMount() {
|
66 | var _this2 = this;
|
67 |
|
68 | this.getVisibleItems();
|
69 | document.addEventListener('keydown', function (e) {
|
70 | if (e.key === "Escape") {
|
71 | _this2.setState({
|
72 | open: false,
|
73 | filter: ''
|
74 | });
|
75 | _this2.setState({
|
76 | currentlyHighlighted: ''
|
77 | });
|
78 | _this2.getVisibleItems();
|
79 | if (ReactDom.findDOMNode(_this2).contains(e.target)) {
|
80 | _this2.link.focus();
|
81 | }
|
82 | }
|
83 | });
|
84 | }
|
85 |
|
86 | return componentDidMount;
|
87 | }()
|
88 | }, {
|
89 | key: 'componentWillUnmount',
|
90 | value: function () {
|
91 | function componentWillUnmount() {
|
92 | document.removeEventListener('click', this.handleOutsideClick, false);
|
93 | }
|
94 |
|
95 | return componentWillUnmount;
|
96 | }()
|
97 | }, {
|
98 | key: 'toggle',
|
99 | value: function () {
|
100 | function toggle(value) {
|
101 | this.setState({
|
102 | open: value
|
103 | });
|
104 | if (value == false) {
|
105 | this.setState({
|
106 | filter: ''
|
107 | });
|
108 | } else {
|
109 | if (this.state.selectedItem) {
|
110 | this.setState({
|
111 | currentlyHighlighted: this.state.selectedItem
|
112 | });
|
113 | }
|
114 | }
|
115 | }
|
116 |
|
117 | return toggle;
|
118 | }()
|
119 | }, {
|
120 | key: 'componentWillReceiveProps',
|
121 | value: function () {
|
122 | function componentWillReceiveProps(nextProps) {
|
123 | var _this3 = this;
|
124 |
|
125 | if (nextProps.items !== this.state.items) {
|
126 | this.setState({ items: nextProps.items }, function () {
|
127 | _this3.getVisibleItems();
|
128 | });
|
129 | }
|
130 | }
|
131 |
|
132 | return componentWillReceiveProps;
|
133 | }()
|
134 | }, {
|
135 | key: 'submit',
|
136 | value: function () {
|
137 | function submit(value) {
|
138 | var _this4 = this;
|
139 |
|
140 | this.props.onChange(value);
|
141 | this.setState({
|
142 | selectedItem: value,
|
143 | selectedItemLabel: this.props.items[value],
|
144 | open: false,
|
145 | currentlyHighlighted: ''
|
146 | }, function () {
|
147 | _this4.getVisibleItems();
|
148 | });
|
149 | }
|
150 |
|
151 | return submit;
|
152 | }()
|
153 | }, {
|
154 | key: 'getVisibleItems',
|
155 | value: function () {
|
156 | function getVisibleItems(isSearching) {
|
157 | var _this5 = this;
|
158 |
|
159 | var first = true;
|
160 | var visibleItems = [];
|
161 | Object.keys(this.props.items).forEach(function (key) {
|
162 | if (!_this5.state.filter || _this5.props.items[key].toLowerCase().indexOf(_this5.state.filter.toLowerCase().trim()) !== -1) {
|
163 | var className = '';
|
164 | if (isSearching) {
|
165 | if (first == true) {
|
166 | first = false;
|
167 | className = 'item item-selected';
|
168 | _this5.setState({
|
169 | currentlyHighlighted: key
|
170 | });
|
171 | } else {
|
172 | className = 'item';
|
173 | }
|
174 | } else {
|
175 | className = key == _this5.state.currentlyHighlighted && _this5.state.selectedItem == '' || key == _this5.state.selectedItem && _this5.state.currentlyHighlighted == '' || _this5.state.currentlyHighlighted != '' && _this5.state.selectedItem != '' && key == _this5.state.currentlyHighlighted ? 'item item-selected' : 'item';
|
176 | }
|
177 | visibleItems.push(_react2['default'].createElement(
|
178 | 'div',
|
179 | {
|
180 | onClick: function () {
|
181 | function onClick() {
|
182 | _this5.submit(key);
|
183 | }
|
184 |
|
185 | return onClick;
|
186 | }(),
|
187 | key: key,
|
188 | className: className
|
189 | },
|
190 | _this5.props.items[key]
|
191 | ));
|
192 | }
|
193 | });
|
194 |
|
195 | if (visibleItems.length === 0) {
|
196 | visibleItems.push(_react2['default'].createElement(
|
197 | 'div',
|
198 | {
|
199 | key: null,
|
200 | className: 'item item-no-results'
|
201 | },
|
202 | 'No results found'
|
203 | ));
|
204 | this.setState({
|
205 | currentlyHighlighted: ''
|
206 | });
|
207 | }
|
208 |
|
209 | this.setState({
|
210 | visibleItems: visibleItems
|
211 | });
|
212 | }
|
213 |
|
214 | return getVisibleItems;
|
215 | }()
|
216 | }, {
|
217 | key: 'handleOutsideClick',
|
218 | value: function () {
|
219 | function handleOutsideClick(e) {
|
220 | var _this6 = this;
|
221 |
|
222 | if (!ReactDom.findDOMNode(this).contains(e.target)) {
|
223 | this.setState({
|
224 | open: false,
|
225 | filter: ''
|
226 | }, function () {
|
227 | _this6.getVisibleItems();
|
228 | });
|
229 | }
|
230 | }
|
231 |
|
232 | return handleOutsideClick;
|
233 | }()
|
234 | }, {
|
235 | key: 'findIndex',
|
236 | value: function () {
|
237 | function findIndex(item) {
|
238 | return item.key == this.state.currentlyHighlighted;
|
239 | }
|
240 |
|
241 | return findIndex;
|
242 | }()
|
243 | }, {
|
244 | key: 'setNextHighlightedItem',
|
245 | value: function () {
|
246 | function setNextHighlightedItem() {
|
247 | var _this7 = this;
|
248 |
|
249 | var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
250 | var isSearching = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
251 |
|
252 | var currentIndex = this.state.visibleItems.findIndex(this.findIndex);
|
253 | var newIndex = 0;
|
254 | if (direction == 'down' && currentIndex < this.state.visibleItems.length - 1 && currentIndex != -1) {
|
255 | newIndex = currentIndex + 1;
|
256 | } else if (direction == 'up' && currentIndex > 0) {
|
257 | newIndex = currentIndex - 1;
|
258 | } else if (!direction) {
|
259 | newIndex = 0;
|
260 | }
|
261 | this.setState({
|
262 | currentlyHighlighted: this.state.visibleItems[newIndex].key
|
263 | }, function () {
|
264 | _this7.getVisibleItems(isSearching);
|
265 | });
|
266 | }
|
267 |
|
268 | return setNextHighlightedItem;
|
269 | }()
|
270 | }, {
|
271 | key: 'inputOnKeyDown',
|
272 | value: function () {
|
273 | function inputOnKeyDown(e) {
|
274 | if (e.key === 'ArrowDown') {
|
275 | this.setNextHighlightedItem('down');
|
276 | }
|
277 |
|
278 | if (e.key === 'ArrowUp') {
|
279 | this.setNextHighlightedItem('up');
|
280 | }
|
281 | }
|
282 |
|
283 | return inputOnKeyDown;
|
284 | }()
|
285 | }, {
|
286 | key: 'inputOnKeyPress',
|
287 | value: function () {
|
288 | function inputOnKeyPress(e) {
|
289 | if (e.key === 'Esc') {
|
290 | this.toggle(!this.state.open);
|
291 | }
|
292 | if (e.key === 'Enter') {
|
293 | e.preventDefault();
|
294 | if (this.state.currentlyHighlighted != '') {
|
295 | this.submit(this.state.currentlyHighlighted);
|
296 | this.toggle(!this.state.open);
|
297 | this.link.focus();
|
298 | }
|
299 | return false;
|
300 | }
|
301 | }
|
302 |
|
303 | return inputOnKeyPress;
|
304 | }()
|
305 | }, {
|
306 | key: 'inputOnChange',
|
307 | value: function () {
|
308 | function inputOnChange(e) {
|
309 | var _this8 = this;
|
310 |
|
311 | this.setState({
|
312 | filter: e.target.value
|
313 | }, function () {
|
314 | _this8.setNextHighlightedItem(null, true);
|
315 | });
|
316 | }
|
317 |
|
318 | return inputOnChange;
|
319 | }()
|
320 | }, {
|
321 | key: 'linkOnKeyDown',
|
322 | value: function () {
|
323 | function linkOnKeyDown(e) {
|
324 | if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
325 | this.setState({
|
326 | open: true
|
327 | });
|
328 | }
|
329 | }
|
330 |
|
331 | return linkOnKeyDown;
|
332 | }()
|
333 | }, {
|
334 | key: 'render',
|
335 | value: function () {
|
336 | function render() {
|
337 | var _this9 = this;
|
338 |
|
339 | return _react2['default'].createElement(
|
340 | 'div',
|
341 | { className: 'select-react-redux-container' },
|
342 | _react2['default'].createElement(
|
343 | 'a',
|
344 | { href: '#',
|
345 | tabIndex: this.state.tabIndex,
|
346 | onClick: function () {
|
347 | function onClick() {
|
348 | _this9.toggle(!_this9.state.open);
|
349 | }
|
350 |
|
351 | return onClick;
|
352 | }(),
|
353 | onKeyPress: function () {
|
354 | function onKeyPress() {
|
355 | _this9.setState({ open: true });
|
356 | }
|
357 |
|
358 | return onKeyPress;
|
359 | }(),
|
360 | ref: function () {
|
361 | function ref(e) {
|
362 | _this9.link = e;
|
363 | }
|
364 |
|
365 | return ref;
|
366 | }(),
|
367 | onKeyDown: this.linkOnKeyDown,
|
368 | className: this.state.open ? 'selected selected-open' : 'selected'
|
369 | },
|
370 | _react2['default'].createElement(
|
371 | 'div',
|
372 | {
|
373 | className: Object.keys(this.state.items).length == 0 ? 'top-bar top-bar-empty' : 'top-bar' },
|
374 | this.state.selectedItemLabel ? this.state.selectedItemLabel : Object.keys(this.state.items).length == 0 ? 'No options available' : 'Please select...'
|
375 | )
|
376 | ),
|
377 | _react2['default'].createElement(
|
378 | 'div',
|
379 | { className: this.state.open ? 'results-container open' : 'results-container' },
|
380 | _react2['default'].createElement(
|
381 | 'div',
|
382 | { className: 'input-container' },
|
383 | _react2['default'].createElement('input', {
|
384 | type: 'text',
|
385 | autoCorrect: 'off',
|
386 | autoCapitalize: 'off',
|
387 | spellCheck: 'false',
|
388 | autoComplete: 'off',
|
389 | ref: function () {
|
390 | function ref(search) {
|
391 | return search && search.focus();
|
392 | }
|
393 |
|
394 | return ref;
|
395 | }(),
|
396 | value: this.state.filter,
|
397 | onKeyPress: this.inputOnKeyPress,
|
398 | onChange: this.inputOnChange,
|
399 | onKeyDown: this.inputOnKeyDown
|
400 | })
|
401 | ),
|
402 | this.state.visibleItems
|
403 | )
|
404 | );
|
405 | }
|
406 |
|
407 | return render;
|
408 | }()
|
409 | }]);
|
410 |
|
411 | return Select;
|
412 | }(_react2['default'].Component); |
\ | No newline at end of file |