@hipay/hipay-material-ui 1.0.0-beta.3 → 1.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/HiDatePicker/HiDatePicker.js +12 -14
- package/HiForm/HiFormControl.js +4 -1
- package/HiForm/HiInput.js +4 -4
- package/HiForm/HiSearchField.js +1 -1
- package/HiSelect/HiSelect.js +285 -257
- package/HiSelect/HiSelectField.js +8 -6
- package/HiSelect/HiSuggestSelect.js +25 -47
- package/HiSelect/HiSuggestSelectField.js +88 -80
- package/HiSelect/SelectInput.js +32 -21
- package/HiSelectableList/HiSelectableListItem.js +3 -0
- package/HiTopBar/HiTopBar.js +16 -12
- package/es/HiDatePicker/HiDatePicker.js +12 -14
- package/es/HiForm/HiFormControl.js +4 -1
- package/es/HiForm/HiInput.js +4 -4
- package/es/HiForm/HiSearchField.js +1 -1
- package/es/HiSelect/HiSelect.js +261 -229
- package/es/HiSelect/HiSelectField.js +9 -7
- package/es/HiSelect/HiSuggestSelect.js +24 -39
- package/es/HiSelect/HiSuggestSelectField.js +77 -69
- package/es/HiSelect/SelectInput.js +42 -21
- package/es/HiSelectableList/HiSelectableListItem.js +3 -0
- package/es/HiTopBar/HiTopBar.js +16 -8
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/umd/hipay-material-ui.development.js +8684 -8694
- package/umd/hipay-material-ui.production.min.js +5 -5
package/HiSelect/HiSelect.js
CHANGED
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.styles = undefined;
|
7
7
|
|
8
|
-
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
9
|
-
|
10
|
-
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
11
|
-
|
12
8
|
var _keys = require('babel-runtime/core-js/object/keys');
|
13
9
|
|
14
10
|
var _keys2 = _interopRequireDefault(_keys);
|
15
11
|
|
12
|
+
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
13
|
+
|
14
|
+
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
15
|
+
|
16
16
|
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
17
17
|
|
18
18
|
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
@@ -63,10 +63,6 @@ var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
|
|
63
63
|
|
64
64
|
var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
|
65
65
|
|
66
|
-
var _Collapse = require('material-ui/transitions/Collapse');
|
67
|
-
|
68
|
-
var _Collapse2 = _interopRequireDefault(_Collapse);
|
69
|
-
|
70
66
|
var _reactPopper = require('react-popper');
|
71
67
|
|
72
68
|
var _mdiMaterialUi = require('mdi-material-ui');
|
@@ -75,10 +71,6 @@ var _HiSelectableList = require('../HiSelectableList');
|
|
75
71
|
|
76
72
|
var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
|
77
73
|
|
78
|
-
var _HiSelectableListItem = require('../HiSelectableList/HiSelectableListItem');
|
79
|
-
|
80
|
-
var _HiSelectableListItem2 = _interopRequireDefault(_HiSelectableListItem);
|
81
|
-
|
82
74
|
var _HiForm = require('../HiForm');
|
83
75
|
|
84
76
|
var _SelectInput = require('./SelectInput');
|
@@ -157,249 +149,7 @@ var HiSelect = function (_React$PureComponent) {
|
|
157
149
|
|
158
150
|
var _this = (0, _possibleConstructorReturn3.default)(this, (HiSelect.__proto__ || (0, _getPrototypeOf2.default)(HiSelect)).call(this, props));
|
159
151
|
|
160
|
-
|
161
|
-
document.body.style.overflow = 'hidden';
|
162
|
-
_this.setState({ open: true });
|
163
|
-
var options = _this.props.options.slice();
|
164
|
-
_this.handleSuggestions(options);
|
165
|
-
|
166
|
-
if (_this.props.onClick) {
|
167
|
-
_this.props.onClick();
|
168
|
-
}
|
169
|
-
|
170
|
-
// Gestion du focus
|
171
|
-
if (_this.searchField) {
|
172
|
-
// si searchable, focus sur le champs de recherche
|
173
|
-
var searchField = _this.searchField;
|
174
|
-
setTimeout(function () {
|
175
|
-
searchField.focus();
|
176
|
-
}, 1);
|
177
|
-
} else if (_this.overlay) {
|
178
|
-
// sinon focus sur le dernier élément selectionné
|
179
|
-
_this.focusOnSelectedItem();
|
180
|
-
}
|
181
|
-
};
|
182
|
-
|
183
|
-
_this.focusOnSelectedItem = function () {
|
184
|
-
// On récupère la div parent "overlay"
|
185
|
-
var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
|
186
|
-
var multiple = _this.props.multiple;
|
187
|
-
var value = _this.props.value;
|
188
|
-
var selectedIdList = Array.isArray(value) ? value : [value];
|
189
|
-
setTimeout(function () {
|
190
|
-
var focused = false;
|
191
|
-
// Si un ou plusieurs items sont selectionnés, on focus sur le dernier
|
192
|
-
if (selectedIdList.length > 0) {
|
193
|
-
var itemSelected = overlay.querySelector('[data-id="' + selectedIdList[selectedIdList.length - 1] + '"]');
|
194
|
-
if (itemSelected && itemSelected.parentElement.tagName === 'LI') {
|
195
|
-
itemSelected.parentElement.focus();
|
196
|
-
focused = true;
|
197
|
-
}
|
198
|
-
}
|
199
|
-
// Si pas d'item selectionné, ou pas visible (en cas de recherche), focus sur le premier
|
200
|
-
if (selectedIdList.length === 0 || !focused) {
|
201
|
-
// On recupère tous les items
|
202
|
-
var items = overlay.getElementsByTagName('li');
|
203
|
-
var itemToFocus = items[0];
|
204
|
-
// Si select multiple, et qu'au moins un selectionné, focus sur le 2e item
|
205
|
-
if (multiple && selectedIdList.length > 0) {
|
206
|
-
itemToFocus = items[1];
|
207
|
-
}
|
208
|
-
itemToFocus.focus();
|
209
|
-
}
|
210
|
-
}, 1);
|
211
|
-
};
|
212
|
-
|
213
|
-
_this.handleKeyDown = function (event) {
|
214
|
-
var nextItem = void 0;
|
215
|
-
if (event.key === 'ArrowDown') {
|
216
|
-
nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'down');
|
217
|
-
} else if (event.key === 'ArrowUp') {
|
218
|
-
nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
|
219
|
-
} else if (event.key === 'Tab') {
|
220
|
-
document.body.style.overflow = 'auto';
|
221
|
-
_this.setState({ open: false });
|
222
|
-
}
|
223
|
-
if (nextItem) {
|
224
|
-
nextItem.focus();
|
225
|
-
}
|
226
|
-
};
|
227
|
-
|
228
|
-
_this.handleKeyDownSearch = function (event) {
|
229
|
-
if (_this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
|
230
|
-
_this.focusOnSelectedItem();
|
231
|
-
}
|
232
|
-
};
|
233
|
-
|
234
|
-
_this.handleFocus = function () {
|
235
|
-
_this.setState({ focused: true });
|
236
|
-
};
|
237
|
-
|
238
|
-
_this.handleBlur = function () {
|
239
|
-
_this.setState({ focused: false });
|
240
|
-
};
|
241
|
-
|
242
|
-
_this.handleClose = function () {
|
243
|
-
document.body.style.overflow = 'auto';
|
244
|
-
_this.setState({
|
245
|
-
open: false
|
246
|
-
});
|
247
|
-
|
248
|
-
if (_this.props.onClose) {
|
249
|
-
_this.props.onClose();
|
250
|
-
}
|
251
|
-
};
|
252
|
-
|
253
|
-
_this.handleSelect = function (event, item) {
|
254
|
-
var _this$props = _this.props,
|
255
|
-
multiple = _this$props.multiple,
|
256
|
-
value = _this$props.value,
|
257
|
-
name = _this$props.name,
|
258
|
-
onChange = _this$props.onChange,
|
259
|
-
options = _this$props.options,
|
260
|
-
hierarchic = _this$props.hierarchic;
|
261
|
-
var _this$state = _this.state,
|
262
|
-
hierarchySelected = _this$state.hierarchySelected,
|
263
|
-
hierarchy = _this$state.hierarchy,
|
264
|
-
nbOptions = _this$state.nbOptions;
|
265
|
-
|
266
|
-
var hiSelected = (0, _extends3.default)({}, hierarchySelected);
|
267
|
-
|
268
|
-
if (multiple) {
|
269
|
-
var valueList = value;
|
270
|
-
if (item.id === '_all') {
|
271
|
-
if (valueList.length === nbOptions) {
|
272
|
-
valueList = [];
|
273
|
-
if (hierarchic) {
|
274
|
-
// if hierarchic select => empty associative array of selected children
|
275
|
-
(0, _keys2.default)(hiSelected).forEach(function (key) {
|
276
|
-
hiSelected[key] = [];
|
277
|
-
});
|
278
|
-
}
|
279
|
-
} else {
|
280
|
-
options.forEach(function (option) {
|
281
|
-
if (option.hasChildren !== true && !valueList.includes(option.id) && option.id !== '_all') {
|
282
|
-
valueList.push(option.id);
|
283
|
-
} else if (option.hasChildren === true) {
|
284
|
-
// if hierarchic select => fill associative array of selected children
|
285
|
-
hiSelected[option.id] = hierarchy[option.id];
|
286
|
-
}
|
287
|
-
});
|
288
|
-
}
|
289
|
-
} else if (valueList.includes(item.id) || item.hasChildren === true && hierarchySelected[item.id].length === hierarchy[item.id].length) {
|
290
|
-
// item déjà sélectionné => on le déselectionne
|
291
|
-
if (item.hasChildren !== true) {
|
292
|
-
valueList = valueList.filter(function (val) {
|
293
|
-
return val !== item.id;
|
294
|
-
});
|
295
|
-
}
|
296
|
-
|
297
|
-
if (item.hasChildren === true) {
|
298
|
-
// remove all children
|
299
|
-
valueList = valueList.filter(function (val) {
|
300
|
-
return !_this.state.hierarchy[item.id].includes(val);
|
301
|
-
});
|
302
|
-
hiSelected[item.id] = [];
|
303
|
-
} else if (item.hasOwnProperty('parentId')) {
|
304
|
-
// Si item est un enfant on l'enlève du tableau associatif des
|
305
|
-
// elmts sélectionnés
|
306
|
-
hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
|
307
|
-
}
|
308
|
-
} else {
|
309
|
-
// item non sélectionné => on le sélectionne
|
310
|
-
if (item.hasChildren !== true) valueList.push(item.id);
|
311
|
-
|
312
|
-
if (item.hasChildren === true) {
|
313
|
-
// Si item parent => on ajoute tous les enfants
|
314
|
-
// Ou on les supprime s'ils sont déjà tous sélectionnés (dans une liste filtrée)
|
315
|
-
var idsInSuggestions = [];
|
316
|
-
_this.state.suggestions.forEach(function (suggestion) {
|
317
|
-
if (_this.state.hierarchy[item.id].includes(suggestion.id)) {
|
318
|
-
idsInSuggestions.push(suggestion.id);
|
319
|
-
}
|
320
|
-
});
|
321
|
-
// if(hierarchySelected[item.id].length > 0) {}
|
322
|
-
var allChildrenSuggestionsSelected = true;
|
323
|
-
idsInSuggestions.forEach(function (id) {
|
324
|
-
if (!hierarchySelected[item.id].includes(id)) {
|
325
|
-
allChildrenSuggestionsSelected = false;
|
326
|
-
}
|
327
|
-
});
|
328
|
-
|
329
|
-
if (allChildrenSuggestionsSelected === true) {
|
330
|
-
// On supprime les enfants car déjà tous sélectionnés
|
331
|
-
idsInSuggestions.forEach(function (id) {
|
332
|
-
valueList.splice(valueList.indexOf(id), 1);
|
333
|
-
hiSelected[item.id].splice(hiSelected[item.id].indexOf(id), 1);
|
334
|
-
});
|
335
|
-
} else {
|
336
|
-
// On ajoute tous les enfants filtrés au éléments sélectionnés
|
337
|
-
valueList = (0, _hiHelpers.arrayUnique)(valueList.concat(idsInSuggestions));
|
338
|
-
hiSelected[item.id] = (0, _hiHelpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
|
339
|
-
}
|
340
|
-
|
341
|
-
_this.setState({ hierarchySelected: hiSelected });
|
342
|
-
} else if (item.hasOwnProperty('parentId')) {
|
343
|
-
// Si item est un enfant on l'ajoute du tableau associatif des
|
344
|
-
// elmts sélectionnés
|
345
|
-
hiSelected[item.parentId].push(item.id);
|
346
|
-
}
|
347
|
-
}
|
348
|
-
_this.setState({ hierarchySelected: hiSelected });
|
349
|
-
onChange(event, valueList);
|
350
|
-
} else {
|
351
|
-
onChange(event, item.id);
|
352
|
-
_this.handleClose();
|
353
|
-
}
|
354
|
-
};
|
355
|
-
|
356
|
-
_this.handleSuggestions = function (suggestions) {
|
357
|
-
var _this$props2 = _this.props,
|
358
|
-
options = _this$props2.options,
|
359
|
-
hasAll = _this$props2.hasAll,
|
360
|
-
iconAll = _this$props2.iconAll,
|
361
|
-
translations = _this$props2.translations,
|
362
|
-
multiple = _this$props2.multiple;
|
363
|
-
|
364
|
-
|
365
|
-
if (suggestions.length === 0) {
|
366
|
-
// Handle No Result
|
367
|
-
// FIX to remove all item
|
368
|
-
suggestions = [];
|
369
|
-
suggestions.push({
|
370
|
-
id: '_no_result',
|
371
|
-
type: 'text',
|
372
|
-
disabled: true,
|
373
|
-
centered: true,
|
374
|
-
checkbox: false,
|
375
|
-
label: translations.no_result_match
|
376
|
-
});
|
377
|
-
} else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
|
378
|
-
// Handle 'All'
|
379
|
-
if (suggestions.filter(function (suggestion) {
|
380
|
-
return suggestion.id === '_all';
|
381
|
-
}).length === 0) {
|
382
|
-
var allItem = {
|
383
|
-
id: '_all',
|
384
|
-
icon: iconAll,
|
385
|
-
label: translations.all
|
386
|
-
};
|
387
|
-
if (iconAll !== false) {
|
388
|
-
allItem.type = 'icon';
|
389
|
-
}
|
390
|
-
suggestions.unshift(allItem);
|
391
|
-
}
|
392
|
-
}
|
393
|
-
|
394
|
-
_this.setState({
|
395
|
-
suggestions: suggestions
|
396
|
-
});
|
397
|
-
};
|
398
|
-
|
399
|
-
_this.handleRequestDelete = function (evt) {
|
400
|
-
evt.stopPropagation();
|
401
|
-
_this.props.onChange(_this.props.name, []);
|
402
|
-
};
|
152
|
+
_initialiseProps.call(_this);
|
403
153
|
|
404
154
|
_this.state = {
|
405
155
|
open: false,
|
@@ -411,6 +161,26 @@ var HiSelect = function (_React$PureComponent) {
|
|
411
161
|
dynamic: false
|
412
162
|
};
|
413
163
|
|
164
|
+
// Check if value is in options
|
165
|
+
var valueInOptions = false;
|
166
|
+
var val = _this.props.value;
|
167
|
+
// No options provided.
|
168
|
+
if (!_this.props.options.length && !val.length) {
|
169
|
+
valueInOptions = true;
|
170
|
+
}
|
171
|
+
// Check if an option match value prop.
|
172
|
+
_this.props.options.forEach(function (item) {
|
173
|
+
if (!val.length) {
|
174
|
+
valueInOptions = true;
|
175
|
+
}
|
176
|
+
if (!valueInOptions && val.indexOf(item.id) !== -1) {
|
177
|
+
valueInOptions = true;
|
178
|
+
}
|
179
|
+
});
|
180
|
+
if (!valueInOptions) {
|
181
|
+
throw new Error('prop value provided does not match any option.');
|
182
|
+
}
|
183
|
+
|
414
184
|
if (props.hierarchic === true && props.options.length > 1) {
|
415
185
|
// Construct two associative arrays
|
416
186
|
// hierarchy[parentId] => children
|
@@ -528,7 +298,7 @@ var HiSelect = function (_React$PureComponent) {
|
|
528
298
|
|
529
299
|
|
530
300
|
var display = '';
|
531
|
-
var selectedIdList = Array.isArray(value) ? value : [value];
|
301
|
+
var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
|
532
302
|
|
533
303
|
if (this.state.dynamic && selectedIdList.length === 1) {
|
534
304
|
display = translations.one_item_selected.replace('%s', selectedIdList.length);
|
@@ -600,7 +370,10 @@ var HiSelect = function (_React$PureComponent) {
|
|
600
370
|
onFocus: this.handleFocus,
|
601
371
|
onBlur: this.handleBlur,
|
602
372
|
onMouseEnter: this.props.onMouseEnter,
|
603
|
-
onMouseLeave: this.props.onMouseLeave
|
373
|
+
onMouseLeave: this.props.onMouseLeave,
|
374
|
+
refElement: function refElement(el) {
|
375
|
+
_this2.selectInputElement = el;
|
376
|
+
}
|
604
377
|
})
|
605
378
|
),
|
606
379
|
open && _react2.default.createElement(
|
@@ -688,6 +461,260 @@ HiSelect.defaultProps = {
|
|
688
461
|
one_child: '%s item'
|
689
462
|
}
|
690
463
|
};
|
464
|
+
|
465
|
+
var _initialiseProps = function _initialiseProps() {
|
466
|
+
var _this3 = this;
|
467
|
+
|
468
|
+
this.handleClick = function () {
|
469
|
+
document.body.style.overflow = 'hidden';
|
470
|
+
_this3.setState({ open: true });
|
471
|
+
var options = _this3.props.options.slice();
|
472
|
+
_this3.handleSuggestions(options);
|
473
|
+
|
474
|
+
if (_this3.props.onClick) {
|
475
|
+
_this3.props.onClick();
|
476
|
+
}
|
477
|
+
|
478
|
+
// Gestion du focus
|
479
|
+
if (_this3.searchField) {
|
480
|
+
// si searchable, focus sur le champs de recherche
|
481
|
+
var searchField = _this3.searchField;
|
482
|
+
setTimeout(function () {
|
483
|
+
searchField.focus();
|
484
|
+
}, 1);
|
485
|
+
} else if (_this3.overlay) {
|
486
|
+
// sinon focus sur le dernier élément selectionné
|
487
|
+
_this3.focusOnSelectedItem();
|
488
|
+
}
|
489
|
+
};
|
490
|
+
|
491
|
+
this.focusOnSelectedItem = function () {
|
492
|
+
// On récupère la div parent "overlay"
|
493
|
+
var overlay = (0, _reactDom.findDOMNode)(_this3.overlay);
|
494
|
+
var multiple = _this3.props.multiple;
|
495
|
+
var value = _this3.props.value;
|
496
|
+
var selectedIdList = Array.isArray(value) ? value : [value];
|
497
|
+
setTimeout(function () {
|
498
|
+
var focused = false;
|
499
|
+
// Si un ou plusieurs items sont selectionnés, on focus sur le dernier
|
500
|
+
if (selectedIdList.length > 0) {
|
501
|
+
var itemSelected = overlay.querySelector('[data-id="' + selectedIdList[selectedIdList.length - 1] + '"]');
|
502
|
+
if (itemSelected && itemSelected.parentElement.tagName === 'LI') {
|
503
|
+
itemSelected.parentElement.focus();
|
504
|
+
focused = true;
|
505
|
+
}
|
506
|
+
}
|
507
|
+
// Si pas d'item selectionné, ou pas visible (en cas de recherche), focus sur le premier
|
508
|
+
if (selectedIdList.length === 0 || !focused) {
|
509
|
+
// On recupère tous les items
|
510
|
+
var items = overlay.getElementsByTagName('li');
|
511
|
+
var itemToFocus = items[0];
|
512
|
+
// Si select multiple, et qu'au moins un selectionné, focus sur le 2e item
|
513
|
+
if (multiple && selectedIdList.length > 0) {
|
514
|
+
itemToFocus = items[1];
|
515
|
+
}
|
516
|
+
if (itemToFocus) {
|
517
|
+
itemToFocus.focus();
|
518
|
+
}
|
519
|
+
}
|
520
|
+
}, 1);
|
521
|
+
};
|
522
|
+
|
523
|
+
this.handleKeyDown = function (event) {
|
524
|
+
var nextItem = void 0;
|
525
|
+
if (event.key === 'ArrowDown') {
|
526
|
+
nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'down');
|
527
|
+
} else if (event.key === 'ArrowUp') {
|
528
|
+
nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
|
529
|
+
} else if (event.key === 'Tab') {
|
530
|
+
document.body.style.overflow = 'auto';
|
531
|
+
_this3.setState({ open: false });
|
532
|
+
}
|
533
|
+
if (nextItem) {
|
534
|
+
nextItem.focus();
|
535
|
+
}
|
536
|
+
};
|
537
|
+
|
538
|
+
this.handleKeyDownSearch = function (event) {
|
539
|
+
if (_this3.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
|
540
|
+
_this3.focusOnSelectedItem();
|
541
|
+
}
|
542
|
+
};
|
543
|
+
|
544
|
+
this.handleFocus = function () {
|
545
|
+
_this3.setState({ focused: true });
|
546
|
+
};
|
547
|
+
|
548
|
+
this.handleBlur = function () {
|
549
|
+
_this3.setState({ focused: false });
|
550
|
+
};
|
551
|
+
|
552
|
+
this.handleClose = function () {
|
553
|
+
document.body.style.overflow = 'auto';
|
554
|
+
_this3.setState({
|
555
|
+
open: false
|
556
|
+
});
|
557
|
+
|
558
|
+
if (_this3.props.onClose) {
|
559
|
+
_this3.props.onClose();
|
560
|
+
}
|
561
|
+
if (_this3.selectInputElement) {
|
562
|
+
_this3.selectInputElement.focus();
|
563
|
+
}
|
564
|
+
};
|
565
|
+
|
566
|
+
this.handleSelect = function (event, item) {
|
567
|
+
var _props2 = _this3.props,
|
568
|
+
multiple = _props2.multiple,
|
569
|
+
value = _props2.value,
|
570
|
+
name = _props2.name,
|
571
|
+
onChange = _props2.onChange,
|
572
|
+
options = _props2.options,
|
573
|
+
hierarchic = _props2.hierarchic;
|
574
|
+
var _state2 = _this3.state,
|
575
|
+
hierarchySelected = _state2.hierarchySelected,
|
576
|
+
hierarchy = _state2.hierarchy,
|
577
|
+
nbOptions = _state2.nbOptions;
|
578
|
+
|
579
|
+
var hiSelected = (0, _extends3.default)({}, hierarchySelected);
|
580
|
+
|
581
|
+
if (multiple) {
|
582
|
+
var valueList = value;
|
583
|
+
if (item.id === '_all') {
|
584
|
+
if (valueList.length === nbOptions) {
|
585
|
+
valueList = [];
|
586
|
+
if (hierarchic) {
|
587
|
+
// if hierarchic select => empty associative array of selected children
|
588
|
+
(0, _keys2.default)(hiSelected).forEach(function (key) {
|
589
|
+
hiSelected[key] = [];
|
590
|
+
});
|
591
|
+
}
|
592
|
+
} else {
|
593
|
+
options.forEach(function (option) {
|
594
|
+
if (option.hasChildren !== true && !valueList.includes(option.id) && option.id !== '_all') {
|
595
|
+
valueList.push(option.id);
|
596
|
+
} else if (option.hasChildren === true) {
|
597
|
+
// if hierarchic select => fill associative array of selected children
|
598
|
+
hiSelected[option.id] = hierarchy[option.id];
|
599
|
+
}
|
600
|
+
});
|
601
|
+
}
|
602
|
+
} else if (valueList.includes(item.id) || item.hasChildren === true && hierarchySelected[item.id].length === hierarchy[item.id].length) {
|
603
|
+
// item déjà sélectionné => on le déselectionne
|
604
|
+
if (item.hasChildren !== true) {
|
605
|
+
valueList = valueList.filter(function (val) {
|
606
|
+
return val !== item.id;
|
607
|
+
});
|
608
|
+
}
|
609
|
+
|
610
|
+
if (item.hasChildren === true) {
|
611
|
+
// remove all children
|
612
|
+
valueList = valueList.filter(function (val) {
|
613
|
+
return !_this3.state.hierarchy[item.id].includes(val);
|
614
|
+
});
|
615
|
+
hiSelected[item.id] = [];
|
616
|
+
} else if (item.hasOwnProperty('parentId')) {
|
617
|
+
// Si item est un enfant on l'enlève du tableau associatif des
|
618
|
+
// elmts sélectionnés
|
619
|
+
hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
|
620
|
+
}
|
621
|
+
} else {
|
622
|
+
// item non sélectionné => on le sélectionne
|
623
|
+
if (item.hasChildren !== true) valueList.push(item.id);
|
624
|
+
|
625
|
+
if (item.hasChildren === true) {
|
626
|
+
// Si item parent => on ajoute tous les enfants
|
627
|
+
// Ou on les supprime s'ils sont déjà tous sélectionnés (dans une liste filtrée)
|
628
|
+
var idsInSuggestions = [];
|
629
|
+
_this3.state.suggestions.forEach(function (suggestion) {
|
630
|
+
if (_this3.state.hierarchy[item.id].includes(suggestion.id)) {
|
631
|
+
idsInSuggestions.push(suggestion.id);
|
632
|
+
}
|
633
|
+
});
|
634
|
+
// if(hierarchySelected[item.id].length > 0) {}
|
635
|
+
var allChildrenSuggestionsSelected = true;
|
636
|
+
idsInSuggestions.forEach(function (id) {
|
637
|
+
if (!hierarchySelected[item.id].includes(id)) {
|
638
|
+
allChildrenSuggestionsSelected = false;
|
639
|
+
}
|
640
|
+
});
|
641
|
+
|
642
|
+
if (allChildrenSuggestionsSelected === true) {
|
643
|
+
// On supprime les enfants car déjà tous sélectionnés
|
644
|
+
idsInSuggestions.forEach(function (id) {
|
645
|
+
valueList.splice(valueList.indexOf(id), 1);
|
646
|
+
hiSelected[item.id].splice(hiSelected[item.id].indexOf(id), 1);
|
647
|
+
});
|
648
|
+
} else {
|
649
|
+
// On ajoute tous les enfants filtrés au éléments sélectionnés
|
650
|
+
valueList = (0, _hiHelpers.arrayUnique)(valueList.concat(idsInSuggestions));
|
651
|
+
hiSelected[item.id] = (0, _hiHelpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
|
652
|
+
}
|
653
|
+
|
654
|
+
_this3.setState({ hierarchySelected: hiSelected });
|
655
|
+
} else if (item.hasOwnProperty('parentId')) {
|
656
|
+
// Si item est un enfant on l'ajoute du tableau associatif des
|
657
|
+
// elmts sélectionnés
|
658
|
+
hiSelected[item.parentId].push(item.id);
|
659
|
+
}
|
660
|
+
}
|
661
|
+
_this3.setState({ hierarchySelected: hiSelected });
|
662
|
+
onChange(event, valueList);
|
663
|
+
} else {
|
664
|
+
onChange(event, item.id);
|
665
|
+
_this3.handleClose();
|
666
|
+
}
|
667
|
+
};
|
668
|
+
|
669
|
+
this.handleSuggestions = function (suggestions) {
|
670
|
+
var _props3 = _this3.props,
|
671
|
+
options = _props3.options,
|
672
|
+
hasAll = _props3.hasAll,
|
673
|
+
iconAll = _props3.iconAll,
|
674
|
+
translations = _props3.translations,
|
675
|
+
multiple = _props3.multiple;
|
676
|
+
|
677
|
+
|
678
|
+
if (suggestions.length === 0) {
|
679
|
+
// Handle No Result
|
680
|
+
// FIX to remove all item
|
681
|
+
suggestions = [];
|
682
|
+
suggestions.push({
|
683
|
+
id: '_no_result',
|
684
|
+
type: 'text',
|
685
|
+
disabled: true,
|
686
|
+
centered: true,
|
687
|
+
checkbox: false,
|
688
|
+
label: translations.no_result_match
|
689
|
+
});
|
690
|
+
} else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
|
691
|
+
// Handle 'All'
|
692
|
+
if (suggestions.filter(function (suggestion) {
|
693
|
+
return suggestion.id === '_all';
|
694
|
+
}).length === 0) {
|
695
|
+
var allItem = {
|
696
|
+
id: '_all',
|
697
|
+
icon: iconAll,
|
698
|
+
label: translations.all
|
699
|
+
};
|
700
|
+
if (iconAll !== false) {
|
701
|
+
allItem.type = 'icon';
|
702
|
+
}
|
703
|
+
suggestions.unshift(allItem);
|
704
|
+
}
|
705
|
+
}
|
706
|
+
|
707
|
+
_this3.setState({
|
708
|
+
suggestions: suggestions
|
709
|
+
});
|
710
|
+
};
|
711
|
+
|
712
|
+
this.handleRequestDelete = function (evt) {
|
713
|
+
evt.stopPropagation();
|
714
|
+
_this3.props.onChange(_this3.props.name, []);
|
715
|
+
};
|
716
|
+
};
|
717
|
+
|
691
718
|
HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
692
719
|
/**
|
693
720
|
* Affiche une checkbox pour chaque éléments, par défaut si options est nested
|
@@ -768,6 +795,7 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
768
795
|
* Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
|
769
796
|
* A utiliser pour les selects avec des données dynamiques
|
770
797
|
*
|
798
|
+
* @param {object} event
|
771
799
|
* @param {string} value
|
772
800
|
*/
|
773
801
|
onSearch: _propTypes2.default.func,
|
@@ -84,7 +84,8 @@ var HiSelectField = function (_React$PureComponent) {
|
|
84
84
|
checkbox = _props.checkbox,
|
85
85
|
searchable = _props.searchable,
|
86
86
|
translations = _props.translations,
|
87
|
-
|
87
|
+
className = _props.className,
|
88
|
+
others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'name', 'value', 'options', 'type', 'multiple', 'iconAll', 'checkbox', 'searchable', 'translations', 'className']);
|
88
89
|
|
89
90
|
|
90
91
|
return _react2.default.createElement(
|
@@ -97,7 +98,8 @@ var HiSelectField = function (_React$PureComponent) {
|
|
97
98
|
error: error,
|
98
99
|
errorText: errorText,
|
99
100
|
helperText: helperText,
|
100
|
-
helperIcon: helperIcon
|
101
|
+
helperIcon: helperIcon,
|
102
|
+
className: className
|
101
103
|
},
|
102
104
|
_react2.default.createElement(_HiSelect2.default, (0, _extends3.default)({
|
103
105
|
id: id,
|
@@ -110,10 +112,6 @@ var HiSelectField = function (_React$PureComponent) {
|
|
110
112
|
checkbox: checkbox,
|
111
113
|
searchable: searchable,
|
112
114
|
translations: translations,
|
113
|
-
onClick: this.handleClick,
|
114
|
-
onMouseEnter: this.handleMouseEnter,
|
115
|
-
onMouseLeave: this.handleMouseLeave,
|
116
|
-
onClose: this.handleClose,
|
117
115
|
disabled: disabled,
|
118
116
|
error: error
|
119
117
|
}, others))
|
@@ -124,6 +122,10 @@ var HiSelectField = function (_React$PureComponent) {
|
|
124
122
|
}(_react2.default.PureComponent);
|
125
123
|
|
126
124
|
HiSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
|
125
|
+
/**
|
126
|
+
* Surcharge des styles
|
127
|
+
*/
|
128
|
+
className: _propTypes2.default.string,
|
127
129
|
/**
|
128
130
|
* Si `true`, l'input sera inactif.
|
129
131
|
*/
|