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 | var _reactDom = require('react-dom');
|
15 |
|
16 | var _reactRedux = require('react-redux');
|
17 |
|
18 | var _redux = require('redux');
|
19 |
|
20 | var _actions = require('./actions');
|
21 |
|
22 | var _actions2 = _interopRequireDefault(_actions);
|
23 |
|
24 | var _reducers = require('./reducers');
|
25 |
|
26 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
27 |
|
28 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
29 |
|
30 | 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; }
|
31 |
|
32 | 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; }
|
33 |
|
34 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
35 |
|
36 | var NoItems = function NoItems() {
|
37 |
|
38 | return _react2['default'].createElement(
|
39 | 'div',
|
40 | {
|
41 | key: null,
|
42 | className: 'item item-no-results'
|
43 | },
|
44 | 'No results found'
|
45 | );
|
46 | };
|
47 |
|
48 | var Presentation = function Presentation(_ref) {
|
49 | var props = _objectWithoutProperties(_ref, []);
|
50 |
|
51 | var topBar = void 0;
|
52 | var visibleItems = Object.keys(props.visibleItems).map(function (item) {
|
53 | return _react2['default'].createElement(
|
54 | 'div',
|
55 | {
|
56 | onClick: function () {
|
57 | function onClick() {
|
58 | props.submit({
|
59 | selected: item,
|
60 | selectedItemLabel: props.items[item]
|
61 | });
|
62 | focus();
|
63 | }
|
64 |
|
65 | return onClick;
|
66 | }(),
|
67 | key: item,
|
68 | className: item == props.currentlyHighlighted ? 'item item-selected' : 'item'
|
69 | },
|
70 | props.items[item]
|
71 | );
|
72 | });
|
73 | var focus = function focus() {
|
74 | if (topBar) topBar.focus();
|
75 | };
|
76 | return _react2['default'].createElement(
|
77 | 'div',
|
78 | {
|
79 | className: 'select-react-redux-container',
|
80 | ref: function () {
|
81 | function ref(input) {
|
82 | if (props.initialRender && input) {
|
83 | props.initialRenderFalse();
|
84 | document.addEventListener('click', function (event) {
|
85 | if (!input.contains(event.target)) {
|
86 | props.refresh();
|
87 | }
|
88 | });
|
89 | }
|
90 | }
|
91 |
|
92 | return ref;
|
93 | }() },
|
94 | _react2['default'].createElement(
|
95 | 'a',
|
96 | { href: '#',
|
97 | tabIndex: props.tabIndex,
|
98 | onClick: props.topBarOnClick,
|
99 | onKeyPress: props.linkOnKeyPress,
|
100 | autoFocus: true,
|
101 | onKeyDown: function () {
|
102 | function onKeyDown(e) {
|
103 | if (e.key.indexOf('Arrow') == 0) {
|
104 | props.linkOnKeyPress(e);
|
105 | }
|
106 | }
|
107 |
|
108 | return onKeyDown;
|
109 | }(),
|
110 | className: props.open ? 'selected selected-open' : 'selected',
|
111 | ref: function () {
|
112 | function ref(input) {
|
113 | if (input && props.open) {
|
114 | topBar = input;
|
115 | focus();
|
116 | }
|
117 | }
|
118 |
|
119 | return ref;
|
120 | }()
|
121 | },
|
122 | _react2['default'].createElement(
|
123 | 'div',
|
124 | {
|
125 | className: Object.keys(props.items).length == 0 ? 'top-bar top-bar-empty' : 'top-bar' },
|
126 | Object.keys(props.items).length == 0 ? 'No options available' : props.selectedItemLabel ? props.selectedItemLabel : 'Please select...'
|
127 | )
|
128 | ),
|
129 | _react2['default'].createElement(
|
130 | 'div',
|
131 | { className: props.open ? 'results-container open' : 'results-container' },
|
132 | _react2['default'].createElement(
|
133 | 'div',
|
134 | { className: 'input-container' },
|
135 | _react2['default'].createElement('input', {
|
136 | type: 'text',
|
137 | autoCorrect: 'off',
|
138 | autoCapitalize: 'off',
|
139 | spellCheck: 'false',
|
140 | autoComplete: 'off',
|
141 | ref: function () {
|
142 | function ref(item) {
|
143 | if (item && props.open) {
|
144 | item.focus();
|
145 | }
|
146 | }
|
147 |
|
148 | return ref;
|
149 | }(),
|
150 | value: props.visibilityFilter,
|
151 | onKeyPress: function () {
|
152 | function onKeyPress(e) {
|
153 | if (e.key === 'Enter' && props.open) {
|
154 | props.submit({
|
155 | selected: props.currentlyHighlighted,
|
156 | selectedItemLabel: props.items[props.currentlyHighlighted]
|
157 | });
|
158 | focus();
|
159 | }
|
160 | }
|
161 |
|
162 | return onKeyPress;
|
163 | }(),
|
164 | onChange: props.inputOnChange,
|
165 | onKeyDown: function () {
|
166 | function onKeyDown(e) {
|
167 | props.inputOnKeyDown(e);
|
168 | if (e.key == 'Escape') {
|
169 | focus();
|
170 | }
|
171 | }
|
172 |
|
173 | return onKeyDown;
|
174 | }()
|
175 | })
|
176 | ),
|
177 | visibleItems.length > 0 ? visibleItems : _react2['default'].createElement(NoItems, null)
|
178 | )
|
179 | );
|
180 | };
|
181 |
|
182 | var Stateless = function Stateless(_ref2) {
|
183 | var items = _ref2.items,
|
184 | _ref2$selected = _ref2.selected,
|
185 | selected = _ref2$selected === undefined ? null : _ref2$selected,
|
186 | _ref2$tabIndex = _ref2.tabIndex,
|
187 | tabIndex = _ref2$tabIndex === undefined ? null : _ref2$tabIndex,
|
188 | onChange = _ref2.onChange;
|
189 |
|
190 |
|
191 | var store = (0, _redux.createStore)(_reducers.reducers);
|
192 |
|
193 | store.dispatch({ type: '@@redux/INIT' });
|
194 |
|
195 | window.store = store;
|
196 |
|
197 | store.dispatch({ type: _actions2['default'].SET_ITEMS, payload: items });
|
198 |
|
199 | if (selected) {
|
200 | store.dispatch({
|
201 | type: _actions2['default'].SET_SELECTED, payload: {
|
202 | selected: selected,
|
203 | selectedItemLabel: items[selected]
|
204 | }
|
205 | });
|
206 | }
|
207 |
|
208 | if (tabIndex) {
|
209 | store.dispatch({ type: _actions2['default'].SET_TABINDEX, payload: tabIndex });
|
210 | }
|
211 |
|
212 | var mapStateToProps = function mapStateToProps() {
|
213 | var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
214 |
|
215 | return state;
|
216 | };
|
217 |
|
218 | var mapDispatchToProps = function mapDispatchToProps(dispatch) {
|
219 | return {
|
220 | submit: function () {
|
221 | function submit(item) {
|
222 | if (item.selected) {
|
223 | dispatch({ type: _actions2['default'].SET_SELECTED, payload: item });
|
224 | dispatch({ type: _actions2['default'].SET_OPEN, payload: false });
|
225 | dispatch({ type: _actions2['default'].SET_FILTER, payload: '' });
|
226 | onChange(item.selected);
|
227 | }
|
228 | }
|
229 |
|
230 | return submit;
|
231 | }(),
|
232 | linkOnKeyPress: function () {
|
233 | function linkOnKeyPress(e) {
|
234 | if (e.key != 'Escape') {
|
235 | dispatch({ type: _actions2['default'].SET_OPEN, payload: true });
|
236 | dispatch({ type: _actions2['default'].SET_FILTER, payload: '' });
|
237 | }
|
238 | }
|
239 |
|
240 | return linkOnKeyPress;
|
241 | }(),
|
242 |
|
243 | inputOnChange: function () {
|
244 | function inputOnChange(e) {
|
245 | dispatch({ type: _actions2['default'].SET_FILTER, payload: e.target.value });
|
246 | }
|
247 |
|
248 | return inputOnChange;
|
249 | }(),
|
250 | inputOnKeyDown: function () {
|
251 | function inputOnKeyDown(e) {
|
252 | if (e.key === 'ArrowDown') {
|
253 | dispatch({ type: _actions2['default'].SET_NEXT_HIGHLIGHTED, payload: false });
|
254 | }
|
255 |
|
256 | if (e.key === 'ArrowUp') {
|
257 | dispatch({ type: _actions2['default'].SET_PREV_HIGHLIGHTED, payload: false });
|
258 | }
|
259 |
|
260 | if (e.key === 'Escape') {
|
261 | dispatch({ type: _actions2['default'].SET_OPEN, payload: false });
|
262 | dispatch({ type: _actions2['default'].SET_FILTER, payload: '' });
|
263 | }
|
264 | }
|
265 |
|
266 | return inputOnKeyDown;
|
267 | }(),
|
268 | topBarOnClick: function () {
|
269 | function topBarOnClick() {
|
270 | dispatch({ type: _actions2['default'].TOGGLE_OPEN });
|
271 | }
|
272 |
|
273 | return topBarOnClick;
|
274 | }(),
|
275 |
|
276 | initialRenderFalse: function () {
|
277 | function initialRenderFalse() {
|
278 | dispatch({ type: _actions2['default'].SET_INITIAL_RENDER_FALSE });
|
279 | }
|
280 |
|
281 | return initialRenderFalse;
|
282 | }(),
|
283 | refresh: function () {
|
284 | function refresh() {
|
285 | dispatch({ type: _actions2['default'].SET_OPEN, payload: false });
|
286 | dispatch({ type: _actions2['default'].SET_FILTER, payload: '' });
|
287 | }
|
288 |
|
289 | return refresh;
|
290 | }()
|
291 | };
|
292 | };
|
293 |
|
294 | var SelectWithStore = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Presentation);
|
295 |
|
296 | return _react2['default'].createElement(SelectWithStore, { store: store });
|
297 | };
|
298 |
|
299 | var Select = exports.Select = function (_React$Component) {
|
300 | _inherits(Select, _React$Component);
|
301 |
|
302 | function Select(props) {
|
303 | _classCallCheck(this, Select);
|
304 |
|
305 | return _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
|
306 | }
|
307 |
|
308 | _createClass(Select, [{
|
309 | key: 'shouldComponentUpdate',
|
310 | value: function () {
|
311 | function shouldComponentUpdate() {
|
312 | console.log('should component update');
|
313 | return true;
|
314 | }
|
315 |
|
316 | return shouldComponentUpdate;
|
317 | }()
|
318 | }, {
|
319 | key: 'componentWillReceiveProps',
|
320 | value: function () {
|
321 | function componentWillReceiveProps(nextProps) {
|
322 | console.log('fdf');
|
323 | console.log(nextProps);
|
324 | }
|
325 |
|
326 | return componentWillReceiveProps;
|
327 | }()
|
328 | }, {
|
329 | key: 'render',
|
330 | value: function () {
|
331 | function render() {
|
332 | return _react2['default'].createElement(Stateless, this.props);
|
333 | }
|
334 |
|
335 | return render;
|
336 | }()
|
337 | }]);
|
338 |
|
339 | return Select;
|
340 | }(_react2['default'].Component); |
\ | No newline at end of file |