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