@jetbrains/ring-ui-built 6.0.32 → 6.0.34
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/components/_helpers/_rollupPluginBabelHelpers.js +567 -1
- package/components/_helpers/anchor.js +6 -7
- package/components/_helpers/button__classes.js +14 -16
- package/components/_helpers/caption.js +20 -14
- package/components/_helpers/card.js +105 -95
- package/components/_helpers/dialog__body-scroll-preventer.js +19 -11
- package/components/_helpers/icon__svg.js +25 -22
- package/components/_helpers/input.js +176 -146
- package/components/_helpers/query-assist__suggestions.js +90 -74
- package/components/_helpers/select__filter.js +69 -48
- package/components/_helpers/services-link.js +37 -29
- package/components/_helpers/sidebar.js +107 -99
- package/components/_helpers/tab-link.js +7 -7
- package/components/_helpers/theme.js +40 -31
- package/components/_helpers/title.js +72 -57
- package/components/alert/alert.js +202 -150
- package/components/alert/container.js +41 -32
- package/components/alert-service/alert-service.js +170 -105
- package/components/analytics/analytics.js +22 -12
- package/components/analytics/analytics__custom-plugin.js +75 -54
- package/components/auth/auth.js +36 -4
- package/components/auth/auth__core.js +1471 -746
- package/components/auth/background-flow.js +127 -87
- package/components/auth/down-notification.js +73 -30
- package/components/auth/iframe-flow.js +133 -75
- package/components/auth/request-builder.js +82 -46
- package/components/auth/response-parser.js +116 -86
- package/components/auth/storage.js +334 -171
- package/components/auth/token-validator.js +242 -137
- package/components/auth/window-flow.js +134 -92
- package/components/auth-dialog/auth-dialog.js +172 -114
- package/components/auth-dialog-service/auth-dialog-service.js +31 -8
- package/components/avatar/avatar-example-datauri.js +1 -23
- package/components/avatar/avatar.js +152 -119
- package/components/avatar/fallback-avatar.js +38 -22
- package/components/badge/badge.js +45 -35
- package/components/button/button.js +107 -86
- package/components/button-group/button-group.js +33 -19
- package/components/button-set/button-set.js +32 -20
- package/components/button-toolbar/button-toolbar.js +31 -19
- package/components/caret/caret.js +220 -186
- package/components/checkbox/checkbox.js +101 -76
- package/components/clipboard/clipboard-fallback.js +10 -10
- package/components/clipboard/clipboard.js +132 -35
- package/components/code/code.js +166 -92
- package/components/collapse/collapse-content.js +64 -42
- package/components/collapse/collapse-context.js +2 -2
- package/components/collapse/collapse-control.js +14 -12
- package/components/collapse/collapse.js +17 -11
- package/components/collapse/consts.js +4 -4
- package/components/collapse/utils.js +3 -1
- package/components/confirm/confirm.js +104 -66
- package/components/confirm-service/confirm-service.js +59 -37
- package/components/content-layout/content-layout.js +64 -43
- package/components/content-layout/sidebar.js +1 -0
- package/components/contenteditable/contenteditable.js +59 -50
- package/components/control-label/control-label.js +9 -9
- package/components/data-list/data-list.js +182 -129
- package/components/data-list/data-list.mock.js +6 -2
- package/components/data-list/item.js +170 -143
- package/components/data-list/selection.js +136 -76
- package/components/data-list/title.js +12 -1
- package/components/date-picker/consts.js +26 -19
- package/components/date-picker/date-input.js +144 -113
- package/components/date-picker/date-picker.js +282 -227
- package/components/date-picker/date-popup.js +395 -350
- package/components/date-picker/day.js +116 -87
- package/components/date-picker/month-names.js +66 -43
- package/components/date-picker/month-slider.js +76 -51
- package/components/date-picker/month.js +25 -16
- package/components/date-picker/months.js +50 -43
- package/components/date-picker/weekdays.js +22 -12
- package/components/date-picker/years.js +110 -83
- package/components/dialog/dialog.js +190 -142
- package/components/dialog/dialog__body-scroll-preventer.js +4 -0
- package/components/dropdown/anchor.js +9 -0
- package/components/dropdown/dropdown.js +213 -182
- package/components/dropdown-menu/dropdown-menu.js +97 -71
- package/components/editable-heading/editable-heading.js +127 -75
- package/components/error-bubble/error-bubble.js +60 -31
- package/components/error-message/error-message.js +59 -39
- package/components/footer/footer.js +30 -27
- package/components/global/compose.js +10 -1
- package/components/global/composeRefs.js +12 -7
- package/components/global/controls-height.js +2 -2
- package/components/global/create-stateful-context.js +15 -15
- package/components/global/data-tests.js +14 -6
- package/components/global/dom.js +86 -47
- package/components/global/focus-sensor-hoc.js +132 -122
- package/components/global/fuzzy-highlight.js +36 -22
- package/components/global/get-event-key.js +8 -8
- package/components/global/get-uid.js +8 -4
- package/components/global/inject-styles.js +15 -10
- package/components/global/listeners.js +51 -27
- package/components/global/memoize.js +12 -6
- package/components/global/normalize-indent.js +50 -19
- package/components/global/promise-with-timeout.js +8 -6
- package/components/global/prop-types.js +5 -3
- package/components/global/react-dom-renderer.js +44 -28
- package/components/global/react-render-adapter.js +1 -1
- package/components/global/rerender-hoc.js +30 -12
- package/components/global/schedule-raf.js +6 -5
- package/components/global/sniffer.js +1 -1
- package/components/global/theme.js +22 -0
- package/components/global/trivial-template-tag.js +10 -3
- package/components/global/typescript-utils.js +6 -2
- package/components/global/url.js +26 -20
- package/components/global/use-event-callback.js +4 -6
- package/components/grid/col.js +52 -35
- package/components/grid/grid.js +31 -17
- package/components/grid/row.js +47 -35
- package/components/group/group.js +25 -17
- package/components/header/header.js +78 -33
- package/components/header/logo.js +36 -20
- package/components/header/profile.js +199 -166
- package/components/header/services-link.js +4 -0
- package/components/header/services.js +116 -73
- package/components/header/smart-profile.js +203 -111
- package/components/header/smart-services.js +113 -62
- package/components/header/tray-icon.js +37 -21
- package/components/header/tray.js +32 -21
- package/components/heading/heading.js +25 -24
- package/components/http/http.d.ts +1 -2
- package/components/http/http.js +345 -203
- package/components/http/http.mock.d.ts +1 -5
- package/components/http/http.mock.js +101 -49
- package/components/hub-source/hub-source.js +190 -83
- package/components/hub-source/hub-source__user.js +44 -11
- package/components/hub-source/hub-source__users-groups.js +65 -37
- package/components/i18n/i18n-context.js +10 -7
- package/components/i18n/i18n.js +10 -7
- package/components/icon/icon.js +93 -76
- package/components/icon/icon__svg.js +8 -0
- package/components/icon/index.js +8 -0
- package/components/input/input.js +13 -0
- package/components/island/adaptive-island-hoc.js +43 -30
- package/components/island/content.js +132 -115
- package/components/island/header.js +70 -57
- package/components/island/island.js +40 -28
- package/components/island-legacy/content-legacy.js +25 -17
- package/components/island-legacy/header-legacy.js +27 -19
- package/components/island-legacy/island-legacy.js +25 -17
- package/components/link/clickableLink.js +59 -44
- package/components/link/link.js +68 -57
- package/components/list/consts.js +2 -2
- package/components/list/list.js +698 -611
- package/components/list/list__custom.js +62 -44
- package/components/list/list__hint.js +19 -10
- package/components/list/list__item.js +174 -133
- package/components/list/list__link.js +50 -37
- package/components/list/list__separator.js +24 -14
- package/components/list/list__title.js +32 -22
- package/components/list/list__users-groups-source.js +126 -54
- package/components/loader/loader.js +74 -43
- package/components/loader/loader__core.js +263 -198
- package/components/loader-inline/loader-inline.js +35 -23
- package/components/loader-screen/loader-screen.js +46 -25
- package/components/login-dialog/login-dialog.js +158 -111
- package/components/login-dialog/service.js +34 -8
- package/components/markdown/markdown.js +23 -15
- package/components/message/message.js +203 -161
- package/components/old-browsers-message/old-browsers-message.js +18 -11
- package/components/old-browsers-message/old-browsers-message__stop.js +7 -0
- package/components/old-browsers-message/white-list.js +17 -9
- package/components/pager/pager.js +271 -212
- package/components/panel/panel.js +25 -17
- package/components/permissions/permissions.js +172 -127
- package/components/permissions/permissions__cache.js +224 -194
- package/components/popup/popup.consts.js +1 -1
- package/components/popup/popup.js +343 -284
- package/components/popup/popup.target.js +8 -9
- package/components/popup/position.js +106 -96
- package/components/popup-menu/popup-menu.js +81 -44
- package/components/progress-bar/progress-bar.js +104 -87
- package/components/query-assist/query-assist.js +916 -838
- package/components/query-assist/query-assist__suggestions.js +30 -1
- package/components/radio/radio.js +34 -19
- package/components/radio/radio__item.js +69 -52
- package/components/select/select.js +957 -852
- package/components/select/select__filter.js +30 -0
- package/components/select/select__popup.js +487 -373
- package/components/shortcuts/core.js +217 -166
- package/components/shortcuts/shortcut-title.js +11 -6
- package/components/shortcuts/shortcuts-hoc.js +45 -19
- package/components/shortcuts/shortcuts.js +75 -50
- package/components/slider/slider.js +122 -99
- package/components/slider/slider.utils.js +24 -14
- package/components/storage/storage.js +33 -4
- package/components/storage/storage__fallback.js +224 -149
- package/components/storage/storage__local.js +153 -90
- package/components/tab-trap/tab-trap.js +153 -122
- package/components/table/cell.js +26 -14
- package/components/table/disable-hover-hoc.js +51 -33
- package/components/table/header-cell.js +89 -64
- package/components/table/header.js +132 -104
- package/components/table/multitable.js +125 -107
- package/components/table/row-with-focus-sensor.js +69 -25
- package/components/table/row.js +216 -175
- package/components/table/selection-adapter.js +3 -1
- package/components/table/selection-shortcuts-hoc.js +181 -180
- package/components/table/selection.js +226 -156
- package/components/table/smart-table.js +88 -50
- package/components/table/table.js +358 -289
- package/components/tabs/collapsible-more.js +79 -46
- package/components/tabs/collapsible-tab.js +38 -31
- package/components/tabs/collapsible-tabs.js +153 -88
- package/components/tabs/custom-item.js +2 -4
- package/components/tabs/dumb-tabs.js +117 -74
- package/components/tabs/smart-tabs.js +69 -29
- package/components/tabs/tab-link.js +5 -1
- package/components/tabs/tab.js +31 -19
- package/components/tabs/tabs.js +31 -0
- package/components/tag/tag.js +173 -133
- package/components/tags-input/tags-input.js +427 -329
- package/components/tags-list/tags-list.js +78 -57
- package/components/text/text.js +39 -28
- package/components/toggle/toggle.js +70 -56
- package/components/tooltip/tooltip.js +190 -146
- package/components/user-agreement/service.js +371 -228
- package/components/user-agreement/toolbox.eula.js +1 -160
- package/components/user-agreement/user-agreement.js +120 -85
- package/components/user-card/card.js +29 -0
- package/components/user-card/smart-user-card-tooltip.js +111 -51
- package/components/user-card/tooltip.js +84 -47
- package/components/user-card/user-card.js +29 -0
- package/package.json +1 -2
@@ -1,5 +1,19 @@
|
|
1
|
-
import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
|
2
|
-
import
|
1
|
+
import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _extends, f as _classCallCheck, g as _callSuper, c as _objectWithoutProperties, o as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
|
2
|
+
import 'core-js/modules/es.array.concat.js';
|
3
|
+
import 'core-js/modules/es.array.filter.js';
|
4
|
+
import 'core-js/modules/es.array.find.js';
|
5
|
+
import 'core-js/modules/es.array.index-of.js';
|
6
|
+
import 'core-js/modules/es.array.map.js';
|
7
|
+
import 'core-js/modules/es.array.reduce.js';
|
8
|
+
import 'core-js/modules/es.array.slice.js';
|
9
|
+
import 'core-js/modules/es.object.assign.js';
|
10
|
+
import 'core-js/modules/es.object.to-string.js';
|
11
|
+
import 'core-js/modules/es.object.values.js';
|
12
|
+
import 'core-js/modules/es.regexp.exec.js';
|
13
|
+
import 'core-js/modules/es.string.replace.js';
|
14
|
+
import 'core-js/modules/es.string.trim.js';
|
15
|
+
import 'core-js/modules/web.dom-collections.for-each.js';
|
16
|
+
import React, { Fragment, Component } from 'react';
|
3
17
|
import classNames from 'classnames';
|
4
18
|
import PropTypes from 'prop-types';
|
5
19
|
import chevronDownIcon from '@jetbrains/icons/chevron-down';
|
@@ -22,29 +36,47 @@ import { I18nContext } from '../i18n/i18n-context.js';
|
|
22
36
|
import composeRefs from '../global/composeRefs.js';
|
23
37
|
import { refObject } from '../global/prop-types.js';
|
24
38
|
import { isArray } from '../global/typescript-utils.js';
|
25
|
-
import {
|
39
|
+
import { ControlsHeight, ControlsHeightContext } from '../global/controls-height.js';
|
26
40
|
import SelectPopup from './select__popup.js';
|
27
41
|
import { A as Anchor } from '../_helpers/anchor.js';
|
42
|
+
import 'core-js/modules/es.object.entries.js';
|
28
43
|
import '@jetbrains/icons/chevron-10px';
|
29
44
|
import '../icon/icon.js';
|
30
45
|
import 'util-deprecate';
|
31
46
|
import '../icon/icon__constants.js';
|
32
47
|
import '../_helpers/icon__svg.js';
|
48
|
+
import 'core-js/modules/es.string.starts-with.js';
|
49
|
+
import 'core-js/modules/es.array.iterator.js';
|
50
|
+
import 'core-js/modules/es.map.js';
|
51
|
+
import 'core-js/modules/es.weak-map.js';
|
52
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
33
53
|
import '../link/clickableLink.js';
|
34
54
|
import '../_helpers/button__classes.js';
|
35
55
|
import '../global/url.js';
|
56
|
+
import 'core-js/modules/es.string.match.js';
|
36
57
|
import '../global/dom.js';
|
58
|
+
import 'core-js/modules/es.set.js';
|
59
|
+
import 'core-js/modules/es.string.split.js';
|
37
60
|
import '../avatar/fallback-avatar.js';
|
61
|
+
import 'core-js/modules/es.array.from.js';
|
62
|
+
import 'core-js/modules/es.regexp.to-string.js';
|
38
63
|
import 'react-dom';
|
39
64
|
import '../global/schedule-raf.js';
|
40
65
|
import '../tab-trap/tab-trap.js';
|
41
66
|
import '../popup/position.js';
|
67
|
+
import 'core-js/modules/es.array.includes.js';
|
68
|
+
import 'core-js/modules/es.array.sort.js';
|
69
|
+
import 'core-js/modules/es.string.includes.js';
|
42
70
|
import '../popup/popup.consts.js';
|
43
71
|
import '../popup/popup.target.js';
|
44
72
|
import '../shortcuts/core.js';
|
73
|
+
import 'core-js/modules/es.array.find-index.js';
|
74
|
+
import 'core-js/modules/es.array.splice.js';
|
45
75
|
import 'combokeys';
|
46
76
|
import '../global/sniffer.js';
|
47
77
|
import 'sniffr';
|
78
|
+
import 'core-js/modules/es.symbol.js';
|
79
|
+
import 'core-js/modules/es.symbol.description.js';
|
48
80
|
import 'react-virtualized/dist/es/List';
|
49
81
|
import 'react-virtualized/dist/es/AutoSizer';
|
50
82
|
import 'react-virtualized/dist/es/WindowScroller';
|
@@ -92,12 +124,16 @@ var Type;
|
|
92
124
|
Type["INLINE"] = "INLINE";
|
93
125
|
Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
|
94
126
|
})(Type || (Type = {}));
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
127
|
+
var ICONS_OFFSET = 5;
|
128
|
+
var ICON_WIDTH = 20;
|
129
|
+
var getStyle = memoize(function (iconsLength) {
|
130
|
+
return {
|
131
|
+
paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
|
132
|
+
};
|
133
|
+
});
|
134
|
+
var _isInputMode = function isInputMode(type) {
|
135
|
+
return type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
|
136
|
+
};
|
101
137
|
function getLowerCaseLabel(item) {
|
102
138
|
if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || typeof item.label !== 'string') {
|
103
139
|
return null;
|
@@ -105,65 +141,76 @@ function getLowerCaseLabel(item) {
|
|
105
141
|
return item.label.toLowerCase();
|
106
142
|
}
|
107
143
|
function doesLabelMatch(itemToCheck, fn) {
|
108
|
-
|
144
|
+
var lowerCaseLabel = getLowerCaseLabel(itemToCheck);
|
109
145
|
if (lowerCaseLabel == null) {
|
110
146
|
return true;
|
111
147
|
}
|
112
148
|
return fn(lowerCaseLabel);
|
113
149
|
}
|
114
|
-
function
|
150
|
+
function _getFilterFn(filter) {
|
115
151
|
if (typeof filter === 'object') {
|
116
152
|
if (filter.fn) {
|
117
153
|
return filter.fn;
|
118
154
|
}
|
119
155
|
if (filter.fuzzy) {
|
120
|
-
return (itemToCheck, checkString)
|
156
|
+
return function (itemToCheck, checkString) {
|
157
|
+
return doesLabelMatch(itemToCheck, function (lowerCaseLabel) {
|
158
|
+
return fuzzyHighlight(checkString, lowerCaseLabel).matched;
|
159
|
+
});
|
160
|
+
};
|
121
161
|
}
|
122
162
|
}
|
123
|
-
return
|
163
|
+
return function (itemToCheck, checkString) {
|
164
|
+
return doesLabelMatch(itemToCheck, function (lowerCaseLabel) {
|
165
|
+
return lowerCaseLabel.indexOf(checkString) >= 0;
|
166
|
+
});
|
167
|
+
};
|
124
168
|
}
|
125
169
|
function buildMultipleMap(selected) {
|
126
|
-
return selected.reduce((acc, item)
|
170
|
+
return selected.reduce(function (acc, item) {
|
127
171
|
acc[item.key] = true;
|
128
172
|
return acc;
|
129
173
|
}, {});
|
130
174
|
}
|
131
|
-
function
|
132
|
-
|
133
|
-
|
134
|
-
if (
|
175
|
+
function _getListItems(props, state, rawFilterString) {
|
176
|
+
var data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
|
177
|
+
var filterString = rawFilterString.trim();
|
178
|
+
if (_isInputMode(props.type) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
|
135
179
|
filterString = ''; // ignore multiple if it is exactly the selected item
|
136
180
|
}
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
...data[i]
|
144
|
-
};
|
181
|
+
var lowerCaseString = filterString.toLowerCase();
|
182
|
+
var filteredData = [];
|
183
|
+
var exactMatch = false;
|
184
|
+
var check = _getFilterFn(props.filter);
|
185
|
+
var _loop = function _loop() {
|
186
|
+
var item = _objectSpread2({}, data[i]);
|
145
187
|
if (check(item, lowerCaseString, data)) {
|
188
|
+
var _state$multipleMap2;
|
146
189
|
exactMatch = item.label === filterString;
|
147
190
|
if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
|
148
|
-
|
191
|
+
var _state$multipleMap;
|
192
|
+
item.checkbox = !!((_state$multipleMap = state.multipleMap) !== null && _state$multipleMap !== void 0 && _state$multipleMap[item.key]);
|
149
193
|
}
|
150
194
|
if (props.multiple && typeof props.multiple === 'object' && props.multiple.limit && Array.isArray(state.selected)) {
|
151
|
-
item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(
|
195
|
+
item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(function (selectedItem) {
|
196
|
+
return selectedItem.key === item.key;
|
197
|
+
});
|
152
198
|
}
|
153
199
|
// Ignore item if it's multiple and is already selected
|
154
|
-
if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && state.multipleMap
|
200
|
+
if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && (_state$multipleMap2 = state.multipleMap) !== null && _state$multipleMap2 !== void 0 && _state$multipleMap2[item.key])) {
|
155
201
|
filteredData.push(item);
|
156
202
|
}
|
157
203
|
}
|
204
|
+
};
|
205
|
+
for (var i = 0; i < data.length; i++) {
|
206
|
+
_loop();
|
158
207
|
}
|
159
|
-
|
160
|
-
|
161
|
-
add
|
162
|
-
} = props;
|
208
|
+
var addButton = null;
|
209
|
+
var add = props.add;
|
163
210
|
if (add && filterString && !exactMatch || add && add.alwaysVisible) {
|
164
211
|
if (!(add.regexp && !add.regexp.test(filterString)) && !(add.minlength && filterString.length < +add.minlength) || add.alwaysVisible) {
|
165
212
|
var _add$delayed;
|
166
|
-
|
213
|
+
var label;
|
167
214
|
if (add.label) {
|
168
215
|
label = typeof add.label === 'function' ? add.label(filterString) : add.label;
|
169
216
|
} else {
|
@@ -182,12 +229,12 @@ function getListItems(props, state, rawFilterString) {
|
|
182
229
|
};
|
183
230
|
}
|
184
231
|
function getSelectedIndex(selected, data) {
|
185
|
-
|
232
|
+
var firstSelected = Array.isArray(selected) ? selected[0] : selected;
|
186
233
|
if (firstSelected == null) {
|
187
234
|
return null;
|
188
235
|
}
|
189
|
-
for (
|
190
|
-
|
236
|
+
for (var i = 0; i < data.length; i++) {
|
237
|
+
var item = data[i];
|
191
238
|
if (item.key === undefined) {
|
192
239
|
continue;
|
193
240
|
}
|
@@ -197,26 +244,28 @@ function getSelectedIndex(selected, data) {
|
|
197
244
|
}
|
198
245
|
return null;
|
199
246
|
}
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
label
|
204
|
-
} = _ref;
|
247
|
+
var getItemLabel = function getItemLabel(_ref) {
|
248
|
+
var selectedLabel = _ref.selectedLabel,
|
249
|
+
label = _ref.label;
|
205
250
|
if (selectedLabel != null) {
|
206
251
|
return selectedLabel;
|
207
252
|
}
|
208
253
|
return typeof label === 'string' ? label : '';
|
209
254
|
};
|
210
|
-
|
255
|
+
var _getValueForFilter = function getValueForFilter(selected, type, filterValue) {
|
256
|
+
return selected && !isArray(selected) && _isInputMode(type) ? getItemLabel(selected) : filterValue;
|
257
|
+
};
|
211
258
|
function isSameSelected(prevSelected, selected) {
|
212
259
|
if (!prevSelected || !selected || prevSelected.length !== selected.length) {
|
213
260
|
return false;
|
214
261
|
}
|
215
|
-
|
262
|
+
var keysMap = selected.reduce(function (result, item) {
|
216
263
|
result[item.key] = true;
|
217
264
|
return result;
|
218
265
|
}, {});
|
219
|
-
return prevSelected.every(
|
266
|
+
return prevSelected.every(function (it) {
|
267
|
+
return keysMap[it.key];
|
268
|
+
});
|
220
269
|
}
|
221
270
|
/**
|
222
271
|
* @name Select
|
@@ -226,538 +275,216 @@ function isSameSelected(prevSelected, selected) {
|
|
226
275
|
/**
|
227
276
|
* Displays a select.
|
228
277
|
*/
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
filterRef: noop,
|
236
|
-
multiple: false,
|
237
|
-
// multiple can be an object - see demo for more information
|
238
|
-
clear: false,
|
239
|
-
// enable clear button that clears the "selected" state
|
240
|
-
loading: false,
|
241
|
-
// show a loading indicator while data is loading
|
242
|
-
disabled: false,
|
243
|
-
// disable select
|
244
|
-
type: Type.BUTTON,
|
245
|
-
size: Size.M,
|
246
|
-
targetElement: null,
|
247
|
-
// element to bind the popup to (select BUTTON or INPUT by default)
|
248
|
-
hideSelected: false,
|
249
|
-
// INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
|
250
|
-
allowAny: false,
|
251
|
-
// INPUT mode: allows any value to be entered
|
252
|
-
hideArrow: false,
|
253
|
-
// hide dropdown arrow icon
|
254
|
-
showPopup: false,
|
255
|
-
maxHeight: 600,
|
256
|
-
// height of the options list, including the filter and the 'Add' button
|
257
|
-
directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
|
258
|
-
selected: null,
|
259
|
-
// current selection (item / array of items)
|
260
|
-
label: null,
|
261
|
-
// BUTTON or INPUT label (nothing selected)
|
262
|
-
selectedLabel: null,
|
263
|
-
// BUTTON or INPUT label (something selected)
|
264
|
-
inputPlaceholder: '',
|
265
|
-
// Placeholder for input modes
|
266
|
-
hint: null,
|
267
|
-
// hint text to display under the list
|
268
|
-
shortcutsEnabled: false,
|
269
|
-
onBeforeOpen: noop,
|
270
|
-
onLoadMore: noop,
|
271
|
-
onOpen: noop,
|
272
|
-
onClose: noop,
|
273
|
-
onFilter: noop,
|
274
|
-
// search string as first argument
|
275
|
-
onFocus: noop,
|
276
|
-
onBlur: noop,
|
277
|
-
onKeyDown: noop,
|
278
|
-
onSelect: noop,
|
279
|
-
// single + multi
|
280
|
-
onDeselect: noop,
|
281
|
-
// multi
|
282
|
-
onOutsideClick: noop,
|
283
|
-
// multi
|
284
|
-
onChange: noop,
|
285
|
-
// multi
|
286
|
-
onAdd: noop,
|
287
|
-
// search string as first argument
|
288
|
-
onDone: noop,
|
289
|
-
onReset: noop,
|
290
|
-
tags: null,
|
291
|
-
ringPopupTarget: null,
|
292
|
-
dir: 'ltr'
|
293
|
-
};
|
294
|
-
static getDerivedStateFromProps(nextProps, prevState) {
|
295
|
-
const {
|
296
|
-
multiple,
|
297
|
-
data,
|
298
|
-
type
|
299
|
-
} = nextProps;
|
300
|
-
const {
|
301
|
-
prevSelected,
|
302
|
-
prevData,
|
303
|
-
prevMultiple,
|
304
|
-
filterValue
|
305
|
-
} = prevState;
|
306
|
-
const nextState = {
|
307
|
-
prevData: data,
|
308
|
-
prevSelected: nextProps.selected,
|
309
|
-
prevMultiple: multiple
|
310
|
-
};
|
311
|
-
if ('data' in nextProps && data !== prevData) {
|
312
|
-
const {
|
313
|
-
filteredData,
|
314
|
-
addButton
|
315
|
-
} = getListItems(nextProps, prevState, filterValue, data);
|
316
|
-
Object.assign(nextState, {
|
317
|
-
shownData: filteredData,
|
318
|
-
addButton
|
319
|
-
});
|
320
|
-
if (prevState.selected) {
|
321
|
-
Object.assign(nextState, {
|
322
|
-
selectedIndex: getSelectedIndex(prevState.selected, data),
|
323
|
-
filterValue: getValueForFilter(prevState.selected, type, filterValue)
|
324
|
-
});
|
325
|
-
}
|
326
|
-
}
|
327
|
-
if ('selected' in nextProps && nextProps.selected !== prevSelected) {
|
328
|
-
const selected = nextProps.selected || (multiple ? [] : null);
|
329
|
-
const selectedIndex = getSelectedIndex(selected, data || prevData);
|
330
|
-
Object.assign(nextState, {
|
331
|
-
selected,
|
332
|
-
filterValue: getValueForFilter(selected, type, filterValue)
|
333
|
-
});
|
334
|
-
if (!Array.isArray(prevSelected) || !Array.isArray(selected) || !isSameSelected(prevSelected, selected)) {
|
335
|
-
Object.assign(nextState, {
|
336
|
-
selectedIndex
|
337
|
-
});
|
338
|
-
}
|
339
|
-
}
|
340
|
-
if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
|
341
|
-
nextState.selected = multiple ? [] : null;
|
342
|
-
}
|
343
|
-
if (multiple && !nextState.selected) {
|
344
|
-
nextState.selected = prevState.selected;
|
345
|
-
}
|
346
|
-
const {
|
347
|
-
selected
|
348
|
-
} = {
|
349
|
-
...prevState,
|
350
|
-
...nextState
|
351
|
-
};
|
352
|
-
if (selected && Array.isArray(selected)) {
|
353
|
-
nextState.multipleMap = buildMultipleMap(selected);
|
354
|
-
const {
|
355
|
-
filteredData,
|
356
|
-
addButton
|
357
|
-
} = getListItems(nextProps, nextState, filterValue, data);
|
358
|
-
Object.assign(nextState, {
|
359
|
-
shownData: filteredData,
|
360
|
-
addButton
|
361
|
-
});
|
362
|
-
}
|
363
|
-
return nextState;
|
364
|
-
}
|
365
|
-
state = {
|
366
|
-
data: [],
|
367
|
-
shownData: [],
|
368
|
-
selected: this.props.multiple ? [] : null,
|
369
|
-
selectedIndex: null,
|
370
|
-
filterValue: this.props.filter && typeof this.props.filter === 'object' && this.props.filter.value || '',
|
371
|
-
shortcutsEnabled: false,
|
372
|
-
popupShortcuts: false,
|
373
|
-
showPopup: this.props.showPopup,
|
374
|
-
prevData: this.props.data,
|
375
|
-
prevSelected: null,
|
376
|
-
prevMultiple: this.props.multiple,
|
377
|
-
multipleMap: {},
|
378
|
-
addButton: null
|
379
|
-
};
|
380
|
-
componentDidUpdate(prevProps, prevState) {
|
381
|
-
const {
|
382
|
-
showPopup,
|
383
|
-
selected
|
384
|
-
} = this.state;
|
385
|
-
const {
|
386
|
-
onClose,
|
387
|
-
onOpen,
|
388
|
-
onChange,
|
389
|
-
multiple
|
390
|
-
} = this.props;
|
391
|
-
if (prevState.showPopup && !showPopup) {
|
392
|
-
onClose(selected);
|
393
|
-
} else if (!prevState.showPopup && showPopup) {
|
394
|
-
onOpen();
|
395
|
-
}
|
396
|
-
if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
|
397
|
-
onChange(selected);
|
278
|
+
var Select = /*#__PURE__*/function (_Component) {
|
279
|
+
function Select() {
|
280
|
+
var _this;
|
281
|
+
_classCallCheck(this, Select);
|
282
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
283
|
+
args[_key] = arguments[_key];
|
398
284
|
}
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
285
|
+
_this = _callSuper(this, Select, [].concat(args));
|
286
|
+
_defineProperty(_this, "state", {
|
287
|
+
data: [],
|
288
|
+
shownData: [],
|
289
|
+
selected: _this.props.multiple ? [] : null,
|
290
|
+
selectedIndex: null,
|
291
|
+
filterValue: _this.props.filter && typeof _this.props.filter === 'object' && _this.props.filter.value || '',
|
292
|
+
shortcutsEnabled: false,
|
293
|
+
popupShortcuts: false,
|
294
|
+
showPopup: _this.props.showPopup,
|
295
|
+
prevData: _this.props.data,
|
296
|
+
prevSelected: null,
|
297
|
+
prevMultiple: _this.props.multiple,
|
298
|
+
multipleMap: {},
|
299
|
+
addButton: null
|
411
300
|
});
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
301
|
+
_defineProperty(_this, "id", getUID('select-'));
|
302
|
+
_defineProperty(_this, "shortcutsScope", _this.id);
|
303
|
+
_defineProperty(_this, "listId", "".concat(_this.id, ":list"));
|
304
|
+
_defineProperty(_this, "_focusHandler", function (e) {
|
305
|
+
_this.props.onFocus(e);
|
306
|
+
_this.setState({
|
307
|
+
shortcutsEnabled: true,
|
308
|
+
focused: true
|
420
309
|
});
|
421
|
-
}
|
422
|
-
if (!this._popup?.isClickingPopup) {
|
423
|
-
this.setState({
|
424
|
-
shortcutsEnabled: false,
|
425
|
-
focused: false
|
426
|
-
});
|
427
|
-
}
|
428
|
-
};
|
429
|
-
node;
|
430
|
-
nodeRef = el => {
|
431
|
-
this.node = el;
|
432
|
-
};
|
433
|
-
_popup = null;
|
434
|
-
onEmptyPopupEnter = () => {
|
435
|
-
if (this.state.addButton) {
|
436
|
-
this.addHandler();
|
437
|
-
}
|
438
|
-
};
|
439
|
-
focus = () => {
|
440
|
-
const focusableSelectExists = this.node?.querySelector('[data-test~=ring-select__focus]');
|
441
|
-
const restoreFocusNode = this.props.targetElement || focusableSelectExists;
|
442
|
-
restoreFocusNode?.focus();
|
443
|
-
};
|
444
|
-
_onEnter = () => {
|
445
|
-
if (this.state.addButton && this.state.shownData.length === 0) {
|
446
|
-
this.addHandler();
|
447
|
-
}
|
448
|
-
this.props.onDone();
|
449
|
-
if (!this._popup?.isVisible() && this.props.allowAny) {
|
450
|
-
return true;
|
451
|
-
}
|
452
|
-
return undefined;
|
453
|
-
};
|
454
|
-
_onEsc = event => {
|
455
|
-
if (!this._popup?.isVisible()) {
|
456
|
-
return true;
|
457
|
-
} else if (this.props.multiple || !this.props.getInitial) {
|
458
|
-
return false;
|
459
|
-
}
|
460
|
-
const selected = {
|
461
|
-
key: Math.random(),
|
462
|
-
label: this.props.getInitial()
|
463
|
-
};
|
464
|
-
this.setState({
|
465
|
-
selected,
|
466
|
-
filterValue: this.getValueForFilter(selected)
|
467
|
-
}, () => {
|
468
|
-
this.props.onChange(selected, event);
|
469
|
-
this.props.onReset();
|
470
310
|
});
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
return getValueForFilter(selected, this.props.type, this.state.filterValue);
|
480
|
-
}
|
481
|
-
_getSelectedIndex(selected, data) {
|
482
|
-
return getSelectedIndex(selected, data);
|
483
|
-
}
|
484
|
-
popupRef = el => {
|
485
|
-
this._popup = el;
|
486
|
-
};
|
487
|
-
_getResetOption() {
|
488
|
-
const isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
|
489
|
-
const reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
|
490
|
-
if (!isOptionsSelected || !reset) {
|
491
|
-
return null;
|
492
|
-
}
|
493
|
-
const resetHandler = (item, event) => {
|
494
|
-
this.clear(event);
|
495
|
-
this.clearFilter();
|
496
|
-
this.props.onFilter('');
|
497
|
-
this.setState(prevState => ({
|
498
|
-
shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
|
499
|
-
multipleMap: {}
|
500
|
-
}));
|
501
|
-
this._redrawPopup();
|
502
|
-
};
|
503
|
-
return {
|
504
|
-
isResetItem: true,
|
505
|
-
separator: reset.separator,
|
506
|
-
key: reset.label,
|
507
|
-
rgItemType: List.ListProps.Type.CUSTOM,
|
508
|
-
template: /*#__PURE__*/React.createElement(Button, {
|
509
|
-
text: true,
|
510
|
-
className: modules_9d0de074.button,
|
511
|
-
"data-test": "ring-select-reset-tags-button",
|
512
|
-
height: ControlsHeight.S
|
513
|
-
}, reset.label),
|
514
|
-
glyph: reset.glyph,
|
515
|
-
onClick: resetHandler
|
516
|
-
};
|
517
|
-
}
|
518
|
-
_prependResetOption(shownData) {
|
519
|
-
const resetOption = this._getResetOption();
|
520
|
-
if (resetOption) {
|
521
|
-
const resetItems = [resetOption];
|
522
|
-
if (resetOption.separator) {
|
523
|
-
resetItems.push({
|
524
|
-
rgItemType: List.ListProps.Type.SEPARATOR
|
311
|
+
_defineProperty(_this, "_blurHandler", function () {
|
312
|
+
var _this$_popup;
|
313
|
+
_this.props.onBlur();
|
314
|
+
if (_this._popup && _this._popup.isVisible() && !_this._popup.isClickingPopup) {
|
315
|
+
window.setTimeout(function () {
|
316
|
+
_this.setState({
|
317
|
+
showPopup: false
|
318
|
+
});
|
525
319
|
});
|
526
320
|
}
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
const anchorElement = this.props.targetElement || this.node;
|
533
|
-
const {
|
534
|
-
showPopup,
|
535
|
-
shownData
|
536
|
-
} = this.state;
|
537
|
-
const _shownData = this._prependResetOption(shownData);
|
538
|
-
return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, _ref2 => {
|
539
|
-
let {
|
540
|
-
translate
|
541
|
-
} = _ref2;
|
542
|
-
let message;
|
543
|
-
if (this.props.loading) {
|
544
|
-
var _this$props$loadingMe;
|
545
|
-
message = (_this$props$loadingMe = this.props.loadingMessage) !== null && _this$props$loadingMe !== void 0 ? _this$props$loadingMe : translate('loading');
|
546
|
-
} else if (!shownData.length) {
|
547
|
-
var _this$props$notFoundM;
|
548
|
-
message = (_this$props$notFoundM = this.props.notFoundMessage) !== null && _this$props$notFoundM !== void 0 ? _this$props$notFoundM : translate('noOptionsFound');
|
321
|
+
if (!((_this$_popup = _this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
|
322
|
+
_this.setState({
|
323
|
+
shortcutsEnabled: false,
|
324
|
+
focused: false
|
325
|
+
});
|
549
326
|
}
|
550
|
-
return /*#__PURE__*/React.createElement(SelectPopup, {
|
551
|
-
data: _shownData,
|
552
|
-
message: message,
|
553
|
-
toolbar: showPopup && this.getToolbar(),
|
554
|
-
topbar: this.getTopbar(),
|
555
|
-
loading: this.props.loading,
|
556
|
-
activeIndex: this.state.selectedIndex,
|
557
|
-
hidden: !showPopup,
|
558
|
-
ref: this.popupRef,
|
559
|
-
maxHeight: this.props.maxHeight,
|
560
|
-
minWidth: this.props.minWidth,
|
561
|
-
directions: this.props.directions,
|
562
|
-
className: this.props.popupClassName,
|
563
|
-
style: this.props.popupStyle,
|
564
|
-
top: this.props.top,
|
565
|
-
left: this.props.left,
|
566
|
-
filter: this.isInputMode() ? false : this.props.filter // disable popup filter in INPUT mode
|
567
|
-
,
|
568
|
-
filterIcon: this.props.filterIcon,
|
569
|
-
filterRef: this.props.filterRef,
|
570
|
-
multiple: this.props.multiple,
|
571
|
-
filterValue: this.state.filterValue,
|
572
|
-
anchorElement: anchorElement,
|
573
|
-
onCloseAttempt: this._onCloseAttempt,
|
574
|
-
onOutsideClick: this.props.onOutsideClick,
|
575
|
-
onSelect: this._listSelectHandler,
|
576
|
-
onSelectAll: this._listSelectAllHandler,
|
577
|
-
onFilter: this._filterChangeHandler,
|
578
|
-
onClear: this.clearFilter,
|
579
|
-
onLoadMore: this.props.onLoadMore,
|
580
|
-
isInputMode: this.isInputMode(),
|
581
|
-
selected: this.state.selected,
|
582
|
-
tags: this.props.tags,
|
583
|
-
compact: this.props.compact,
|
584
|
-
renderOptimization: this.props.renderOptimization,
|
585
|
-
ringPopupTarget: this.props.ringPopupTarget,
|
586
|
-
disableMoveOverflow: this.props.disableMoveOverflow,
|
587
|
-
disableScrollToActive: this.props.disableScrollToActive,
|
588
|
-
dir: this.props.dir,
|
589
|
-
onEmptyPopupEnter: this.onEmptyPopupEnter,
|
590
|
-
listId: this.listId,
|
591
|
-
preventListOverscroll: this.props.preventListOverscroll
|
592
|
-
});
|
593
327
|
});
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
return;
|
598
|
-
}
|
599
|
-
const shownData = this.getListItems(this.filterValue());
|
600
|
-
this.setState({
|
601
|
-
showPopup: true,
|
602
|
-
shownData
|
328
|
+
_defineProperty(_this, "node", void 0);
|
329
|
+
_defineProperty(_this, "nodeRef", function (el) {
|
330
|
+
_this.node = el;
|
603
331
|
});
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
showPopup: false,
|
609
|
-
filterValue: this.props.allowAny ? prevState.filterValue : ''
|
610
|
-
}));
|
611
|
-
if (tryFocusAnchor) {
|
612
|
-
this.focus();
|
332
|
+
_defineProperty(_this, "_popup", null);
|
333
|
+
_defineProperty(_this, "onEmptyPopupEnter", function () {
|
334
|
+
if (_this.state.addButton) {
|
335
|
+
_this.addHandler();
|
613
336
|
}
|
614
|
-
}
|
615
|
-
};
|
616
|
-
addHandler = () => {
|
617
|
-
const value = this.filterValue();
|
618
|
-
this._hidePopup();
|
619
|
-
this.props.onAdd(value);
|
620
|
-
};
|
621
|
-
getToolbar() {
|
622
|
-
const {
|
623
|
-
hint,
|
624
|
-
renderBottomToolbar
|
625
|
-
} = this.props;
|
626
|
-
const {
|
627
|
-
prefix,
|
628
|
-
label,
|
629
|
-
delayed
|
630
|
-
} = this.state.addButton || {};
|
631
|
-
const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
|
632
|
-
if (!isToolbarHasElements) {
|
633
|
-
return null;
|
634
|
-
}
|
635
|
-
return /*#__PURE__*/React.createElement("div", {
|
636
|
-
className: classNames({
|
637
|
-
[modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
|
638
|
-
}),
|
639
|
-
"data-test": "ring-select-toolbar"
|
640
|
-
}, renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/React.createElement(Button, {
|
641
|
-
text: true,
|
642
|
-
delayed: delayed,
|
643
|
-
className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
|
644
|
-
onClick: this.addHandler,
|
645
|
-
"data-test": "ring-select-toolbar-button"
|
646
|
-
}, prefix ? `${prefix} ${label}` : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
|
647
|
-
label: hint,
|
648
|
-
"data-test": "ring-select-toolbar-hint"
|
649
|
-
}));
|
650
|
-
}
|
651
|
-
getTopbar() {
|
652
|
-
return this.props.renderTopToolbar?.();
|
653
|
-
}
|
654
|
-
getLowerCaseLabel = getLowerCaseLabel;
|
655
|
-
doesLabelMatch = doesLabelMatch;
|
656
|
-
getFilterFn() {
|
657
|
-
return getFilterFn(this.props.filter);
|
658
|
-
}
|
659
|
-
getListItems(rawFilterString, data) {
|
660
|
-
const {
|
661
|
-
filteredData,
|
662
|
-
addButton
|
663
|
-
} = getListItems(this.props, this.state, rawFilterString, data);
|
664
|
-
this.setState({
|
665
|
-
addButton
|
666
337
|
});
|
667
|
-
|
668
|
-
|
669
|
-
|
670
|
-
|
671
|
-
|
672
|
-
|
673
|
-
|
338
|
+
_defineProperty(_this, "focus", function () {
|
339
|
+
var _this$node;
|
340
|
+
var focusableSelectExists = (_this$node = _this.node) === null || _this$node === void 0 ? void 0 : _this$node.querySelector('[data-test~=ring-select__focus]');
|
341
|
+
var restoreFocusNode = _this.props.targetElement || focusableSelectExists;
|
342
|
+
restoreFocusNode === null || restoreFocusNode === void 0 || restoreFocusNode.focus();
|
343
|
+
});
|
344
|
+
_defineProperty(_this, "_onEnter", function () {
|
345
|
+
var _this$_popup2;
|
346
|
+
if (_this.state.addButton && _this.state.shownData.length === 0) {
|
347
|
+
_this.addHandler();
|
348
|
+
}
|
349
|
+
_this.props.onDone();
|
350
|
+
if (!((_this$_popup2 = _this._popup) !== null && _this$_popup2 !== void 0 && _this$_popup2.isVisible()) && _this.props.allowAny) {
|
351
|
+
return true;
|
352
|
+
}
|
674
353
|
return undefined;
|
675
|
-
}
|
676
|
-
|
677
|
-
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
_clickHandler = () => {
|
683
|
-
if (!this.props.disabled) {
|
684
|
-
if (this.state.showPopup) {
|
685
|
-
this._hidePopup();
|
686
|
-
} else {
|
687
|
-
this.props.onBeforeOpen();
|
688
|
-
this._showPopup();
|
354
|
+
});
|
355
|
+
_defineProperty(_this, "_onEsc", function (event) {
|
356
|
+
var _this$_popup3;
|
357
|
+
if (!((_this$_popup3 = _this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
|
358
|
+
return true;
|
359
|
+
} else if (_this.props.multiple || !_this.props.getInitial) {
|
360
|
+
return false;
|
689
361
|
}
|
690
|
-
|
691
|
-
};
|
692
|
-
_openPopupIfClosed = () => {
|
693
|
-
if (this.props.disabled || this.state.showPopup) {
|
694
|
-
return;
|
695
|
-
}
|
696
|
-
this.props.onBeforeOpen();
|
697
|
-
this._showPopup();
|
698
|
-
};
|
699
|
-
_filterChangeHandler = e => {
|
700
|
-
this._setFilter(e.currentTarget.value, e);
|
701
|
-
};
|
702
|
-
_setFilter = (value, event) => {
|
703
|
-
if (this.isInputMode() && !this.state.focused) {
|
704
|
-
return;
|
705
|
-
}
|
706
|
-
if (value === this.state.filterValue) {
|
707
|
-
return;
|
708
|
-
}
|
709
|
-
const filterValue = value.replace(/^\s+/g, '');
|
710
|
-
this.props.onFilter(filterValue);
|
711
|
-
if (this.props.allowAny) {
|
712
|
-
const fakeSelected = {
|
362
|
+
var selected = {
|
713
363
|
key: Math.random(),
|
714
|
-
label:
|
364
|
+
label: _this.props.getInitial()
|
715
365
|
};
|
716
|
-
|
717
|
-
selected
|
718
|
-
|
719
|
-
}, ()
|
720
|
-
|
721
|
-
|
366
|
+
_this.setState({
|
367
|
+
selected,
|
368
|
+
filterValue: _this.getValueForFilter(selected)
|
369
|
+
}, function () {
|
370
|
+
_this.props.onChange(selected, event);
|
371
|
+
_this.props.onReset();
|
722
372
|
});
|
723
|
-
|
724
|
-
!this._popup?.isVisible() && this.props.onBeforeOpen();
|
725
|
-
this.setState({
|
726
|
-
filterValue
|
727
|
-
}, () => {
|
728
|
-
this._showPopup();
|
373
|
+
return undefined;
|
729
374
|
});
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
375
|
+
_defineProperty(_this, "_inputShortcutHandler", function () {
|
376
|
+
if (_this.state.focused && _this._popup && !_this._popup.isVisible()) {
|
377
|
+
_this._clickHandler();
|
378
|
+
}
|
379
|
+
});
|
380
|
+
_defineProperty(_this, "popupRef", function (el) {
|
381
|
+
_this._popup = el;
|
382
|
+
});
|
383
|
+
_defineProperty(_this, "_showPopup", function () {
|
384
|
+
if (!_this.node) {
|
385
|
+
return;
|
386
|
+
}
|
387
|
+
var shownData = _this.getListItems(_this.filterValue());
|
388
|
+
_this.setState({
|
389
|
+
showPopup: true,
|
390
|
+
shownData
|
735
391
|
});
|
736
|
-
}
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
|
392
|
+
});
|
393
|
+
_defineProperty(_this, "_hidePopup", function (tryFocusAnchor) {
|
394
|
+
if (_this.node && _this.state.showPopup) {
|
395
|
+
_this.setState(function (prevState) {
|
396
|
+
return {
|
397
|
+
showPopup: false,
|
398
|
+
filterValue: _this.props.allowAny ? prevState.filterValue : ''
|
399
|
+
};
|
400
|
+
});
|
401
|
+
if (tryFocusAnchor) {
|
402
|
+
_this.focus();
|
403
|
+
}
|
404
|
+
}
|
405
|
+
});
|
406
|
+
_defineProperty(_this, "addHandler", function () {
|
407
|
+
var value = _this.filterValue();
|
408
|
+
_this._hidePopup();
|
409
|
+
_this.props.onAdd(value);
|
410
|
+
});
|
411
|
+
_defineProperty(_this, "getLowerCaseLabel", getLowerCaseLabel);
|
412
|
+
_defineProperty(_this, "doesLabelMatch", doesLabelMatch);
|
413
|
+
_defineProperty(_this, "_clickHandler", function () {
|
414
|
+
if (!_this.props.disabled) {
|
415
|
+
if (_this.state.showPopup) {
|
416
|
+
_this._hidePopup();
|
417
|
+
} else {
|
418
|
+
_this.props.onBeforeOpen();
|
419
|
+
_this._showPopup();
|
420
|
+
}
|
421
|
+
}
|
422
|
+
});
|
423
|
+
_defineProperty(_this, "_openPopupIfClosed", function () {
|
424
|
+
if (_this.props.disabled || _this.state.showPopup) {
|
425
|
+
return;
|
426
|
+
}
|
427
|
+
_this.props.onBeforeOpen();
|
428
|
+
_this._showPopup();
|
429
|
+
});
|
430
|
+
_defineProperty(_this, "_filterChangeHandler", function (e) {
|
431
|
+
_this._setFilter(e.currentTarget.value, e);
|
432
|
+
});
|
433
|
+
_defineProperty(_this, "_setFilter", function (value, event) {
|
434
|
+
var _this$_popup4;
|
435
|
+
if (_this.isInputMode() && !_this.state.focused) {
|
436
|
+
return;
|
437
|
+
}
|
438
|
+
if (value === _this.state.filterValue) {
|
439
|
+
return;
|
440
|
+
}
|
441
|
+
var filterValue = value.replace(/^\s+/g, '');
|
442
|
+
_this.props.onFilter(filterValue);
|
443
|
+
if (_this.props.allowAny) {
|
444
|
+
var fakeSelected = {
|
445
|
+
key: Math.random(),
|
446
|
+
label: filterValue
|
447
|
+
};
|
448
|
+
_this.setState({
|
449
|
+
selected: filterValue === '' ? null : fakeSelected,
|
450
|
+
selectedIndex: null
|
451
|
+
}, function () {
|
452
|
+
_this.props.onSelect(fakeSelected, event);
|
453
|
+
_this.props.onChange(fakeSelected, event);
|
454
|
+
});
|
455
|
+
}
|
456
|
+
!((_this$_popup4 = _this._popup) !== null && _this$_popup4 !== void 0 && _this$_popup4.isVisible()) && _this.props.onBeforeOpen();
|
457
|
+
_this.setState({
|
458
|
+
filterValue
|
459
|
+
}, function () {
|
460
|
+
_this._showPopup();
|
461
|
+
});
|
462
|
+
});
|
463
|
+
_defineProperty(_this, "_redrawPopup", function () {
|
464
|
+
if (_this.props.multiple) {
|
465
|
+
setTimeout(function () {
|
466
|
+
_this.isInputMode() && _this.clearFilter();
|
467
|
+
_this._showPopup();
|
468
|
+
}, 0);
|
469
|
+
}
|
470
|
+
});
|
471
|
+
_defineProperty(_this, "_listSelectHandler", function (selected, event) {
|
749
472
|
var _this$props$tryKeepOp;
|
750
|
-
|
751
|
-
|
752
|
-
|
753
|
-
|
473
|
+
var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
474
|
+
var isItem = function isItem(item) {
|
475
|
+
return List.isItemType(List.ListProps.Type.ITEM, item);
|
476
|
+
};
|
477
|
+
var isCustomItem = function isCustomItem(item) {
|
478
|
+
return List.isItemType(List.ListProps.Type.CUSTOM, item);
|
479
|
+
};
|
480
|
+
var isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
|
754
481
|
if (isSelectItemEvent) {
|
755
482
|
event.preventDefault();
|
756
483
|
}
|
757
484
|
if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
|
758
485
|
return;
|
759
486
|
}
|
760
|
-
|
487
|
+
var tryKeepOpen = (_this$props$tryKeepOp = _this.props.tryKeepOpen) !== null && _this$props$tryKeepOp !== void 0 ? _this$props$tryKeepOp : opts.tryKeepOpen;
|
761
488
|
if (!_this.props.multiple) {
|
762
489
|
if (!tryKeepOpen) {
|
763
490
|
_this._hidePopup(isSelectItemEvent);
|
@@ -765,8 +492,8 @@ class Select extends Component {
|
|
765
492
|
_this.setState({
|
766
493
|
selected,
|
767
494
|
selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
|
768
|
-
}, ()
|
769
|
-
|
495
|
+
}, function () {
|
496
|
+
var newFilterValue = _this.isInputMode() && !_this.props.hideSelected ? getItemLabel(selected) : '';
|
770
497
|
_this.filterValue(newFilterValue);
|
771
498
|
_this.props.onFilter(newFilterValue);
|
772
499
|
_this.props.onSelect(selected, event);
|
@@ -779,359 +506,737 @@ class Select extends Component {
|
|
779
506
|
if (selected.key == null) {
|
780
507
|
throw new Error('Multiple selection requires each item to have the "key" property');
|
781
508
|
}
|
782
|
-
_this.setState(prevState
|
783
|
-
|
784
|
-
|
509
|
+
_this.setState(function (prevState) {
|
510
|
+
var currentSelection = prevState.selected;
|
511
|
+
var nextSelection;
|
785
512
|
if (!prevState.multipleMap[selected.key]) {
|
786
513
|
nextSelection = currentSelection.concat(selected);
|
787
514
|
_this.props.onSelect && _this.props.onSelect(selected, event);
|
788
515
|
} else {
|
789
|
-
nextSelection = currentSelection.filter(
|
516
|
+
nextSelection = currentSelection.filter(function (item) {
|
517
|
+
return item.key !== selected.key;
|
518
|
+
});
|
790
519
|
_this.props.onDeselect && _this.props.onDeselect(selected);
|
791
520
|
}
|
792
521
|
_this.props.onChange(nextSelection, event);
|
793
|
-
|
522
|
+
var nextState = {
|
794
523
|
filterValue: '',
|
795
524
|
selected: nextSelection,
|
796
525
|
selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
|
797
526
|
};
|
798
527
|
if (typeof _this.props.multiple === 'object' && _this.props.multiple.limit && nextSelection.length === _this.props.multiple.limit) {
|
799
|
-
nextState.shownData = prevState.shownData.map(
|
800
|
-
|
801
|
-
|
528
|
+
nextState.shownData = prevState.shownData.map(function (item) {
|
529
|
+
return nextSelection.find(function (selectedItem) {
|
530
|
+
return selectedItem.key === item.key;
|
531
|
+
}) ? item : _objectSpread2(_objectSpread2({}, item), {}, {
|
532
|
+
disabled: true
|
533
|
+
});
|
802
534
|
});
|
803
535
|
}
|
804
536
|
if (!prevState.multipleMap[selected.key]) {
|
805
|
-
nextState.multipleMap = {
|
806
|
-
...prevState.multipleMap,
|
537
|
+
nextState.multipleMap = _objectSpread2(_objectSpread2({}, prevState.multipleMap), {}, {
|
807
538
|
[selected.key]: true
|
808
|
-
};
|
539
|
+
});
|
809
540
|
} else {
|
810
|
-
|
811
|
-
|
812
|
-
|
813
|
-
|
541
|
+
var _prevState$multipleMa = prevState.multipleMap,
|
542
|
+
_selected$key = selected.key;
|
543
|
+
_prevState$multipleMa[_selected$key];
|
544
|
+
var restMultipleMap = _objectWithoutProperties(_prevState$multipleMa, [_selected$key].map(_toPropertyKey));
|
814
545
|
nextState.multipleMap = restMultipleMap;
|
815
546
|
}
|
816
|
-
return {
|
817
|
-
|
818
|
-
...nextState
|
819
|
-
};
|
820
|
-
}, () => {
|
547
|
+
return _objectSpread2(_objectSpread2({}, prevState), nextState);
|
548
|
+
}, function () {
|
821
549
|
if (tryKeepOpen) {
|
822
550
|
_this._redrawPopup();
|
823
551
|
}
|
824
552
|
});
|
825
553
|
}
|
826
|
-
};
|
827
|
-
|
828
|
-
|
829
|
-
|
830
|
-
|
831
|
-
|
832
|
-
|
833
|
-
|
834
|
-
|
835
|
-
|
836
|
-
|
554
|
+
});
|
555
|
+
_defineProperty(_this, "_listSelectAllHandler", function () {
|
556
|
+
var isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
557
|
+
var isItem = function isItem(item) {
|
558
|
+
return List.isItemType(List.ListProps.Type.ITEM, item);
|
559
|
+
};
|
560
|
+
var isCustomItem = function isCustomItem(item) {
|
561
|
+
return List.isItemType(List.ListProps.Type.CUSTOM, item);
|
562
|
+
};
|
563
|
+
_this.setState(function (prevState) {
|
564
|
+
var currentSelection = prevState.selected;
|
565
|
+
var nextSelection;
|
837
566
|
if (isSelectAll) {
|
838
|
-
nextSelection =
|
839
|
-
|
840
|
-
|
567
|
+
nextSelection = _this.props.data.filter(function (item) {
|
568
|
+
return (isItem(item) || isCustomItem(item)) && !item.disabled;
|
569
|
+
});
|
570
|
+
nextSelection.filter(function (item) {
|
571
|
+
return !_this.props.selected.find(function (selectedItem) {
|
572
|
+
return item.key === selectedItem.key;
|
573
|
+
});
|
574
|
+
}).forEach(function (item) {
|
575
|
+
_this.props.onSelect && _this.props.onSelect(item);
|
841
576
|
});
|
842
577
|
} else {
|
843
578
|
nextSelection = [];
|
844
|
-
currentSelection.forEach(item
|
845
|
-
|
579
|
+
currentSelection.forEach(function (item) {
|
580
|
+
_this.props.onDeselect && _this.props.onDeselect(item);
|
846
581
|
});
|
847
582
|
}
|
848
|
-
|
583
|
+
_this.props.onChange(nextSelection, event);
|
849
584
|
return {
|
850
585
|
filterValue: '',
|
851
586
|
selected: nextSelection,
|
852
|
-
selectedIndex: isSelectAll ?
|
853
|
-
shownData: prevState.shownData.map(item
|
854
|
-
|
855
|
-
|
856
|
-
|
857
|
-
|
587
|
+
selectedIndex: isSelectAll ? _this._getSelectedIndex(nextSelection, _this.props.data) : null,
|
588
|
+
shownData: prevState.shownData.map(function (item) {
|
589
|
+
return _objectSpread2(_objectSpread2({}, item), {}, {
|
590
|
+
checkbox: isSelectAll
|
591
|
+
});
|
592
|
+
}),
|
593
|
+
multipleMap: isSelectAll ? buildMultipleMap(_this.props.data.filter(function (item) {
|
594
|
+
return !item.disabled;
|
595
|
+
})) : {}
|
858
596
|
};
|
859
|
-
},
|
860
|
-
};
|
861
|
-
|
862
|
-
|
863
|
-
|
864
|
-
|
865
|
-
|
866
|
-
|
867
|
-
|
868
|
-
|
597
|
+
}, _this._redrawPopup);
|
598
|
+
});
|
599
|
+
_defineProperty(_this, "_onCloseAttempt", function (event, isEsc) {
|
600
|
+
if (_this.isInputMode()) {
|
601
|
+
if (!_this.props.allowAny) {
|
602
|
+
if (_this.props.hideSelected || !_this.state.selected || _this.props.multiple) {
|
603
|
+
_this.clearFilter();
|
604
|
+
} else if (_this.state.selected && !Array.isArray(_this.state.selected)) {
|
605
|
+
_this.filterValue(getItemLabel(_this.state.selected));
|
606
|
+
}
|
607
|
+
}
|
608
|
+
}
|
609
|
+
var isTagRemoved = _this.props.tags && event && event.target && event.target instanceof Element && event.target.matches('[data-test="ring-tag-remove"]');
|
610
|
+
if (!isTagRemoved) {
|
611
|
+
_this._hidePopup(isEsc);
|
612
|
+
}
|
613
|
+
});
|
614
|
+
_defineProperty(_this, "clearFilter", function (e) {
|
615
|
+
_this._setFilter('', e);
|
616
|
+
});
|
617
|
+
_defineProperty(_this, "clear", function (event) {
|
618
|
+
if (event) {
|
619
|
+
event.stopPropagation();
|
620
|
+
}
|
621
|
+
var empty = _this.props.multiple ? [] : null;
|
622
|
+
_this.setState({
|
623
|
+
selected: empty,
|
624
|
+
selectedIndex: null,
|
625
|
+
filterValue: ''
|
626
|
+
}, function () {
|
627
|
+
if (_this.props.onChange) {
|
628
|
+
_this.props.onChange(empty, event);
|
869
629
|
}
|
630
|
+
});
|
631
|
+
return false;
|
632
|
+
});
|
633
|
+
_defineProperty(_this, "filter", void 0);
|
634
|
+
_defineProperty(_this, "filterRef", function (el) {
|
635
|
+
_this.filter = el;
|
636
|
+
});
|
637
|
+
return _this;
|
638
|
+
}
|
639
|
+
_inherits(Select, _Component);
|
640
|
+
return _createClass(Select, [{
|
641
|
+
key: "componentDidUpdate",
|
642
|
+
value: function componentDidUpdate(prevProps, prevState) {
|
643
|
+
var _this$state = this.state,
|
644
|
+
showPopup = _this$state.showPopup,
|
645
|
+
selected = _this$state.selected;
|
646
|
+
var _this$props = this.props,
|
647
|
+
onClose = _this$props.onClose,
|
648
|
+
onOpen = _this$props.onOpen,
|
649
|
+
onChange = _this$props.onChange,
|
650
|
+
multiple = _this$props.multiple;
|
651
|
+
if (prevState.showPopup && !showPopup) {
|
652
|
+
onClose(selected);
|
653
|
+
} else if (!prevState.showPopup && showPopup) {
|
654
|
+
onOpen();
|
655
|
+
}
|
656
|
+
if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
|
657
|
+
onChange(selected);
|
870
658
|
}
|
871
659
|
}
|
872
|
-
|
873
|
-
|
874
|
-
|
660
|
+
}, {
|
661
|
+
key: "getValueForFilter",
|
662
|
+
value: function getValueForFilter(selected) {
|
663
|
+
return _getValueForFilter(selected, this.props.type, this.state.filterValue);
|
875
664
|
}
|
876
|
-
}
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
clear = event => {
|
881
|
-
if (event) {
|
882
|
-
event.stopPropagation();
|
665
|
+
}, {
|
666
|
+
key: "_getSelectedIndex",
|
667
|
+
value: function _getSelectedIndex(selected, data) {
|
668
|
+
return getSelectedIndex(selected, data);
|
883
669
|
}
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
if (
|
891
|
-
|
670
|
+
}, {
|
671
|
+
key: "_getResetOption",
|
672
|
+
value: function _getResetOption() {
|
673
|
+
var _this2 = this;
|
674
|
+
var isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
|
675
|
+
var reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
|
676
|
+
if (!isOptionsSelected || !reset) {
|
677
|
+
return null;
|
892
678
|
}
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
|
902
|
-
|
903
|
-
|
904
|
-
|
905
|
-
|
906
|
-
|
679
|
+
var resetHandler = function resetHandler(item, event) {
|
680
|
+
_this2.clear(event);
|
681
|
+
_this2.clearFilter();
|
682
|
+
_this2.props.onFilter('');
|
683
|
+
_this2.setState(function (prevState) {
|
684
|
+
return {
|
685
|
+
shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
|
686
|
+
multipleMap: {}
|
687
|
+
};
|
688
|
+
});
|
689
|
+
_this2._redrawPopup();
|
690
|
+
};
|
691
|
+
return {
|
692
|
+
isResetItem: true,
|
693
|
+
separator: reset.separator,
|
694
|
+
key: reset.label,
|
695
|
+
rgItemType: List.ListProps.Type.CUSTOM,
|
696
|
+
template: /*#__PURE__*/React.createElement(Button, {
|
697
|
+
text: true,
|
698
|
+
className: modules_9d0de074.button,
|
699
|
+
"data-test": "ring-select-reset-tags-button",
|
700
|
+
height: ControlsHeight.S
|
701
|
+
}, reset.label),
|
702
|
+
glyph: reset.glyph,
|
703
|
+
onClick: resetHandler
|
704
|
+
};
|
907
705
|
}
|
908
|
-
|
909
|
-
|
910
|
-
|
911
|
-
|
912
|
-
|
913
|
-
|
914
|
-
|
706
|
+
}, {
|
707
|
+
key: "_prependResetOption",
|
708
|
+
value: function _prependResetOption(shownData) {
|
709
|
+
var resetOption = this._getResetOption();
|
710
|
+
if (resetOption) {
|
711
|
+
var resetItems = [resetOption];
|
712
|
+
if (resetOption.separator) {
|
713
|
+
resetItems.push({
|
714
|
+
rgItemType: List.ListProps.Type.SEPARATOR
|
715
|
+
});
|
716
|
+
}
|
717
|
+
return resetItems.concat(shownData);
|
915
718
|
}
|
916
|
-
return
|
917
|
-
} else {
|
918
|
-
return this.state.selected != null ? getItemLabel(this.state.selected) : null;
|
719
|
+
return shownData;
|
919
720
|
}
|
920
|
-
}
|
921
|
-
|
922
|
-
|
923
|
-
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
|
928
|
-
|
929
|
-
|
930
|
-
|
931
|
-
|
932
|
-
|
933
|
-
|
934
|
-
|
935
|
-
|
936
|
-
|
937
|
-
|
938
|
-
disabled: this.props.disabled,
|
939
|
-
onClick: this._clickHandler,
|
940
|
-
style: {
|
941
|
-
backgroundImage: `url(${selected.icon})`
|
721
|
+
}, {
|
722
|
+
key: "_renderPopup",
|
723
|
+
value: function _renderPopup() {
|
724
|
+
var _this3 = this;
|
725
|
+
var anchorElement = this.props.targetElement || this.node;
|
726
|
+
var _this$state2 = this.state,
|
727
|
+
showPopup = _this$state2.showPopup,
|
728
|
+
shownData = _this$state2.shownData;
|
729
|
+
var _shownData = this._prependResetOption(shownData);
|
730
|
+
return /*#__PURE__*/React.createElement(I18nContext.Consumer, null, function (_ref2) {
|
731
|
+
var translate = _ref2.translate;
|
732
|
+
var message;
|
733
|
+
if (_this3.props.loading) {
|
734
|
+
var _this3$props$loadingM;
|
735
|
+
message = (_this3$props$loadingM = _this3.props.loadingMessage) !== null && _this3$props$loadingM !== void 0 ? _this3$props$loadingM : translate('loading');
|
736
|
+
} else if (!shownData.length) {
|
737
|
+
var _this3$props$notFound;
|
738
|
+
message = (_this3$props$notFound = _this3.props.notFoundMessage) !== null && _this3$props$notFound !== void 0 ? _this3$props$notFound : translate('noOptionsFound');
|
942
739
|
}
|
943
|
-
|
740
|
+
return /*#__PURE__*/React.createElement(SelectPopup, {
|
741
|
+
data: _shownData,
|
742
|
+
message: message,
|
743
|
+
toolbar: showPopup && _this3.getToolbar(),
|
744
|
+
topbar: _this3.getTopbar(),
|
745
|
+
loading: _this3.props.loading,
|
746
|
+
activeIndex: _this3.state.selectedIndex,
|
747
|
+
hidden: !showPopup,
|
748
|
+
ref: _this3.popupRef,
|
749
|
+
maxHeight: _this3.props.maxHeight,
|
750
|
+
minWidth: _this3.props.minWidth,
|
751
|
+
directions: _this3.props.directions,
|
752
|
+
className: _this3.props.popupClassName,
|
753
|
+
style: _this3.props.popupStyle,
|
754
|
+
top: _this3.props.top,
|
755
|
+
left: _this3.props.left,
|
756
|
+
filter: _this3.isInputMode() ? false : _this3.props.filter // disable popup filter in INPUT mode
|
757
|
+
,
|
758
|
+
filterIcon: _this3.props.filterIcon,
|
759
|
+
filterRef: _this3.props.filterRef,
|
760
|
+
multiple: _this3.props.multiple,
|
761
|
+
filterValue: _this3.state.filterValue,
|
762
|
+
anchorElement: anchorElement,
|
763
|
+
onCloseAttempt: _this3._onCloseAttempt,
|
764
|
+
onOutsideClick: _this3.props.onOutsideClick,
|
765
|
+
onSelect: _this3._listSelectHandler,
|
766
|
+
onSelectAll: _this3._listSelectAllHandler,
|
767
|
+
onFilter: _this3._filterChangeHandler,
|
768
|
+
onClear: _this3.clearFilter,
|
769
|
+
onLoadMore: _this3.props.onLoadMore,
|
770
|
+
isInputMode: _this3.isInputMode(),
|
771
|
+
selected: _this3.state.selected,
|
772
|
+
tags: _this3.props.tags,
|
773
|
+
compact: _this3.props.compact,
|
774
|
+
renderOptimization: _this3.props.renderOptimization,
|
775
|
+
ringPopupTarget: _this3.props.ringPopupTarget,
|
776
|
+
disableMoveOverflow: _this3.props.disableMoveOverflow,
|
777
|
+
disableScrollToActive: _this3.props.disableScrollToActive,
|
778
|
+
dir: _this3.props.dir,
|
779
|
+
onEmptyPopupEnter: _this3.onEmptyPopupEnter,
|
780
|
+
listId: _this3.listId,
|
781
|
+
preventListOverscroll: _this3.props.preventListOverscroll
|
782
|
+
});
|
783
|
+
});
|
944
784
|
}
|
945
|
-
|
946
|
-
|
947
|
-
|
948
|
-
|
949
|
-
|
950
|
-
|
951
|
-
|
952
|
-
|
953
|
-
|
954
|
-
|
785
|
+
}, {
|
786
|
+
key: "getToolbar",
|
787
|
+
value: function getToolbar() {
|
788
|
+
var _this$props2 = this.props,
|
789
|
+
hint = _this$props2.hint,
|
790
|
+
renderBottomToolbar = _this$props2.renderBottomToolbar;
|
791
|
+
var _ref3 = this.state.addButton || {},
|
792
|
+
prefix = _ref3.prefix,
|
793
|
+
label = _ref3.label,
|
794
|
+
delayed = _ref3.delayed;
|
795
|
+
var isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
|
796
|
+
if (!isToolbarHasElements) {
|
797
|
+
return null;
|
798
|
+
}
|
799
|
+
return /*#__PURE__*/React.createElement("div", {
|
800
|
+
className: classNames({
|
801
|
+
[modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
|
802
|
+
}),
|
803
|
+
"data-test": "ring-select-toolbar"
|
804
|
+
}, renderBottomToolbar && renderBottomToolbar(), this.state.addButton && /*#__PURE__*/React.createElement(Button, {
|
805
|
+
text: true,
|
806
|
+
delayed: delayed,
|
807
|
+
className: classNames(modules_9d0de074.button, modules_9d0de074.buttonSpaced),
|
808
|
+
onClick: this.addHandler,
|
809
|
+
"data-test": "ring-select-toolbar-button"
|
810
|
+
}, prefix ? "".concat(prefix, " ").concat(label) : label), hint && /*#__PURE__*/React.createElement(List.ListHint, {
|
811
|
+
label: hint,
|
812
|
+
"data-test": "ring-select-toolbar-hint"
|
955
813
|
}));
|
956
814
|
}
|
957
|
-
|
958
|
-
|
959
|
-
|
960
|
-
|
961
|
-
|
962
|
-
icon: chevronDownIcon,
|
963
|
-
key: "hide",
|
964
|
-
disabled: this.props.disabled,
|
965
|
-
height: height,
|
966
|
-
onClick: this._clickHandler
|
967
|
-
}));
|
815
|
+
}, {
|
816
|
+
key: "getTopbar",
|
817
|
+
value: function getTopbar() {
|
818
|
+
var _this$props$renderTop, _this$props3;
|
819
|
+
return (_this$props$renderTop = (_this$props3 = this.props).renderTopToolbar) === null || _this$props$renderTop === void 0 ? void 0 : _this$props$renderTop.call(_this$props3);
|
968
820
|
}
|
969
|
-
|
970
|
-
|
971
|
-
|
972
|
-
|
973
|
-
|
974
|
-
|
975
|
-
|
976
|
-
|
977
|
-
|
978
|
-
|
979
|
-
|
980
|
-
|
981
|
-
|
982
|
-
|
983
|
-
|
984
|
-
|
985
|
-
|
986
|
-
|
987
|
-
|
988
|
-
|
989
|
-
|
990
|
-
|
991
|
-
|
992
|
-
|
993
|
-
|
994
|
-
|
995
|
-
|
996
|
-
|
997
|
-
|
998
|
-
|
999
|
-
|
1000
|
-
|
1001
|
-
}
|
1002
|
-
|
1003
|
-
|
1004
|
-
|
1005
|
-
|
1006
|
-
|
1007
|
-
|
1008
|
-
|
1009
|
-
|
1010
|
-
|
1011
|
-
|
1012
|
-
|
1013
|
-
|
1014
|
-
|
1015
|
-
|
1016
|
-
|
1017
|
-
|
1018
|
-
|
1019
|
-
|
1020
|
-
|
1021
|
-
|
1022
|
-
|
1023
|
-
|
1024
|
-
|
1025
|
-
|
1026
|
-
|
1027
|
-
|
1028
|
-
|
1029
|
-
|
1030
|
-
|
1031
|
-
|
1032
|
-
|
1033
|
-
|
1034
|
-
|
1035
|
-
|
1036
|
-
|
1037
|
-
|
1038
|
-
|
1039
|
-
|
1040
|
-
|
1041
|
-
|
1042
|
-
|
1043
|
-
|
1044
|
-
|
1045
|
-
|
1046
|
-
|
1047
|
-
|
1048
|
-
|
1049
|
-
|
1050
|
-
|
1051
|
-
|
1052
|
-
|
1053
|
-
|
1054
|
-
|
1055
|
-
|
1056
|
-
|
1057
|
-
|
1058
|
-
|
1059
|
-
|
1060
|
-
}, this.props.error));
|
1061
|
-
case Type.BUTTON:
|
1062
|
-
return /*#__PURE__*/React.createElement("div", {
|
1063
|
-
ref: this.nodeRef,
|
1064
|
-
className: classNames(classes, modules_9d0de074.buttonMode),
|
1065
|
-
"data-test": joinDataTestAttributes('ring-select', dataTest)
|
1066
|
-
}, selectedLabel && /*#__PURE__*/React.createElement(ControlLabel, {
|
1067
|
-
type: this.props.labelType,
|
821
|
+
}, {
|
822
|
+
key: "getFilterFn",
|
823
|
+
value: function getFilterFn() {
|
824
|
+
return _getFilterFn(this.props.filter);
|
825
|
+
}
|
826
|
+
}, {
|
827
|
+
key: "getListItems",
|
828
|
+
value: function getListItems(rawFilterString, data) {
|
829
|
+
var _getListItems2 = _getListItems(this.props, this.state, rawFilterString, data),
|
830
|
+
filteredData = _getListItems2.filteredData,
|
831
|
+
addButton = _getListItems2.addButton;
|
832
|
+
this.setState({
|
833
|
+
addButton
|
834
|
+
});
|
835
|
+
return filteredData;
|
836
|
+
}
|
837
|
+
}, {
|
838
|
+
key: "filterValue",
|
839
|
+
value: function filterValue(setValue) {
|
840
|
+
if (typeof setValue === 'string' || typeof setValue === 'number') {
|
841
|
+
this.setState({
|
842
|
+
filterValue: setValue
|
843
|
+
});
|
844
|
+
return undefined;
|
845
|
+
} else {
|
846
|
+
return this.state.filterValue;
|
847
|
+
}
|
848
|
+
}
|
849
|
+
}, {
|
850
|
+
key: "isInputMode",
|
851
|
+
value: function isInputMode() {
|
852
|
+
return _isInputMode(this.props.type);
|
853
|
+
}
|
854
|
+
}, {
|
855
|
+
key: "_rebuildMultipleMap",
|
856
|
+
value: function _rebuildMultipleMap(selected) {
|
857
|
+
if (Array.isArray(selected)) {
|
858
|
+
this.setState({
|
859
|
+
multipleMap: buildMultipleMap(selected)
|
860
|
+
});
|
861
|
+
}
|
862
|
+
}
|
863
|
+
}, {
|
864
|
+
key: "_selectionIsEmpty",
|
865
|
+
value: function _selectionIsEmpty() {
|
866
|
+
return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
|
867
|
+
}
|
868
|
+
}, {
|
869
|
+
key: "_getLabel",
|
870
|
+
value: function _getLabel() {
|
871
|
+
var _ref4, _this$props$label;
|
872
|
+
return (_ref4 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref4 !== void 0 ? _ref4 : 'Select an option';
|
873
|
+
}
|
874
|
+
}, {
|
875
|
+
key: "_getPlaceholder",
|
876
|
+
value: function _getPlaceholder() {
|
877
|
+
if (this._selectionIsEmpty()) {
|
878
|
+
var _this$props$label2;
|
879
|
+
return (_this$props$label2 = this.props.label) !== null && _this$props$label2 !== void 0 ? _this$props$label2 : 'Select an option';
|
880
|
+
}
|
881
|
+
return this._getSelectedString();
|
882
|
+
}
|
883
|
+
}, {
|
884
|
+
key: "_getSelectedString",
|
885
|
+
value: function _getSelectedString() {
|
886
|
+
if (Array.isArray(this.state.selected)) {
|
887
|
+
var labels = [];
|
888
|
+
for (var i = 0; i < this.state.selected.length; i++) {
|
889
|
+
labels.push(getItemLabel(this.state.selected[i]));
|
890
|
+
}
|
891
|
+
return labels.filter(Boolean).join(', ');
|
892
|
+
} else {
|
893
|
+
return this.state.selected != null ? getItemLabel(this.state.selected) : null;
|
894
|
+
}
|
895
|
+
}
|
896
|
+
}, {
|
897
|
+
key: "_getIcons",
|
898
|
+
value: function _getIcons() {
|
899
|
+
var selected = this.state.selected;
|
900
|
+
var _this$props4 = this.props,
|
901
|
+
disabled = _this$props4.disabled,
|
902
|
+
clear = _this$props4.clear,
|
903
|
+
hideArrow = _this$props4.hideArrow;
|
904
|
+
var icons = [];
|
905
|
+
var height = this.props.height || this.context;
|
906
|
+
if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
|
907
|
+
icons.push( /*#__PURE__*/React.createElement("button", {
|
908
|
+
title: "Toggle options popup",
|
909
|
+
type: "button",
|
910
|
+
className: modules_9d0de074.selectedIcon,
|
911
|
+
key: "selected",
|
1068
912
|
disabled: this.props.disabled,
|
1069
|
-
htmlFor: this.props.id
|
1070
|
-
}, selectedLabel), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
|
1071
|
-
map: this.getShortcutsMap(),
|
1072
|
-
scope: this.shortcutsScope
|
1073
|
-
}), /*#__PURE__*/React.createElement("div", {
|
1074
|
-
className: modules_9d0de074.buttonContainer
|
1075
|
-
}, /*#__PURE__*/React.createElement(Button, _extends({}, ariaProps, {
|
1076
|
-
height: this.props.height,
|
1077
|
-
id: this.props.id,
|
1078
913
|
onClick: this._clickHandler,
|
1079
|
-
|
1080
|
-
|
1081
|
-
|
1082
|
-
|
914
|
+
style: {
|
915
|
+
backgroundImage: "url(".concat(selected.icon, ")")
|
916
|
+
}
|
917
|
+
}));
|
918
|
+
}
|
919
|
+
if (clear && !disabled && !this._selectionIsEmpty()) {
|
920
|
+
icons.push( /*#__PURE__*/React.createElement(Button, {
|
921
|
+
title: "Clear selection",
|
922
|
+
"data-test": "ring-clear-select",
|
923
|
+
className: modules_9d0de074.clearIcon,
|
924
|
+
key: "close",
|
1083
925
|
disabled: this.props.disabled,
|
1084
|
-
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
|
1089
|
-
|
1090
|
-
|
1091
|
-
"
|
1092
|
-
|
1093
|
-
|
1094
|
-
|
1095
|
-
|
1096
|
-
className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
|
1097
|
-
id: this.props.id,
|
1098
|
-
onClick: this._clickHandler,
|
1099
|
-
"data-test": "ring-select__focus",
|
926
|
+
onClick: this.clear,
|
927
|
+
height: height,
|
928
|
+
icon: closeIcon
|
929
|
+
}));
|
930
|
+
}
|
931
|
+
if (!hideArrow) {
|
932
|
+
icons.push( /*#__PURE__*/React.createElement(Button, {
|
933
|
+
title: "Toggle options popup",
|
934
|
+
className: modules_9d0de074.chevron,
|
935
|
+
iconClassName: modules_9d0de074.chevronIcon,
|
936
|
+
icon: chevronDownIcon,
|
937
|
+
key: "hide",
|
1100
938
|
disabled: this.props.disabled,
|
1101
|
-
|
1102
|
-
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
939
|
+
height: height,
|
940
|
+
onClick: this._clickHandler
|
941
|
+
}));
|
942
|
+
}
|
943
|
+
return icons;
|
944
|
+
}
|
945
|
+
}, {
|
946
|
+
key: "_getAvatar",
|
947
|
+
value: function _getAvatar() {
|
948
|
+
var _this$state$selected, _this$state$selected2;
|
949
|
+
return !Array.isArray(this.state.selected) && (((_this$state$selected = this.state.selected) === null || _this$state$selected === void 0 ? void 0 : _this$state$selected.avatar) || ((_this$state$selected2 = this.state.selected) === null || _this$state$selected2 === void 0 ? void 0 : _this$state$selected2.showGeneratedAvatar)) && /*#__PURE__*/React.createElement(Avatar, {
|
950
|
+
className: modules_9d0de074.avatar,
|
951
|
+
url: this.state.selected.avatar,
|
952
|
+
username: this.state.selected.username,
|
953
|
+
size: Size$1.Size20
|
954
|
+
});
|
955
|
+
}
|
956
|
+
}, {
|
957
|
+
key: "getShortcutsMap",
|
958
|
+
value: function getShortcutsMap() {
|
959
|
+
return {
|
960
|
+
enter: this._onEnter,
|
961
|
+
esc: this._onEsc,
|
962
|
+
up: this._inputShortcutHandler,
|
963
|
+
down: this._inputShortcutHandler,
|
964
|
+
right: noop,
|
965
|
+
left: noop,
|
966
|
+
'shift+up': noop,
|
967
|
+
'shift+down': noop,
|
968
|
+
space: noop
|
969
|
+
};
|
970
|
+
}
|
971
|
+
}, {
|
972
|
+
key: "renderSelect",
|
973
|
+
value: function renderSelect(activeItemId) {
|
974
|
+
var _this$props$label3, _this$props$label4, _this$_popup5, _this$props$buttonCla;
|
975
|
+
var dataTest = this.props['data-test'];
|
976
|
+
var selectedLabel = this.props.selectedLabel;
|
977
|
+
var shortcutsEnabled = this.state.shortcutsEnabled;
|
978
|
+
var classes = classNames(modules_9d0de074.select, 'ring-js-shortcuts', this.props.className, modules_9d0de074["height".concat(this.props.height || this.context)], {
|
979
|
+
[modules_9d0de074["size".concat(this.props.size)]]: this.props.type !== Type.INLINE,
|
980
|
+
[modules_9d0de074.disabled]: this.props.disabled
|
981
|
+
});
|
982
|
+
var icons = this._getIcons();
|
983
|
+
var style = getStyle(icons.length);
|
984
|
+
var iconsNode = /*#__PURE__*/React.createElement("div", {
|
985
|
+
className: modules_9d0de074.icons
|
986
|
+
}, icons);
|
987
|
+
var ariaProps = this.state.showPopup ? {
|
988
|
+
'aria-owns': this.listId,
|
989
|
+
'aria-activedescendant': activeItemId,
|
990
|
+
'aria-label': (_this$props$label3 = this.props.label) !== null && _this$props$label3 !== void 0 ? _this$props$label3 : undefined
|
991
|
+
} : {
|
992
|
+
'aria-label': (_this$props$label4 = this.props.label) !== null && _this$props$label4 !== void 0 ? _this$props$label4 : undefined
|
993
|
+
};
|
994
|
+
switch (this.props.type) {
|
995
|
+
case Type.INPUT_WITHOUT_CONTROLS:
|
996
|
+
case Type.INPUT:
|
997
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
998
|
+
ref: this.nodeRef,
|
999
|
+
className: classNames(classes, modules_9d0de074.inputMode),
|
1000
|
+
"data-test": joinDataTestAttributes('ring-select', dataTest)
|
1001
|
+
}, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
|
1002
|
+
map: this.getShortcutsMap(),
|
1003
|
+
scope: this.shortcutsScope
|
1004
|
+
}), /*#__PURE__*/React.createElement(Input, _extends({}, ariaProps, {
|
1005
|
+
height: this.props.height,
|
1006
|
+
autoComplete: "off",
|
1007
|
+
id: this.props.id,
|
1008
|
+
onClick: this._clickHandler,
|
1009
|
+
inputRef: composeRefs(this.filterRef, this.props.filterRef),
|
1010
|
+
disabled: this.props.disabled,
|
1011
|
+
value: this.state.filterValue,
|
1012
|
+
borderless: this.props.type === Type.INPUT_WITHOUT_CONTROLS,
|
1013
|
+
style: style,
|
1014
|
+
size: Size.FULL,
|
1015
|
+
onChange: this._filterChangeHandler,
|
1016
|
+
onFocus: this._focusHandler,
|
1017
|
+
onBlur: this._blurHandler
|
1018
|
+
// Input with error style without description
|
1019
|
+
,
|
1020
|
+
error: this.props.error != null ? '' : null,
|
1021
|
+
label: this.props.type === Type.INPUT ? this._getLabel() : null,
|
1022
|
+
placeholder: this.props.inputPlaceholder,
|
1023
|
+
onKeyDown: this.props.onKeyDown,
|
1024
|
+
"data-test": "ring-select__focus",
|
1025
|
+
enableShortcuts: shortcutsEnabled ? Object.keys(_objectSpread2(_objectSpread2({}, this.getShortcutsMap()), (_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 || (_this$_popup5 = _this$_popup5.list) === null || _this$_popup5 === void 0 ? void 0 : _this$_popup5.shortcutsMap)) : undefined,
|
1026
|
+
icon: this.props.filterIcon,
|
1027
|
+
afterInput: this.props.type === Type.INPUT && iconsNode
|
1028
|
+
})), this._renderPopup()), this.props.error && /*#__PURE__*/React.createElement("div", {
|
1029
|
+
className: classNames(modules_88cfaf40.errorText, modules_88cfaf40["size".concat(this.props.size)])
|
1030
|
+
}, this.props.error));
|
1031
|
+
case Type.BUTTON:
|
1032
|
+
return /*#__PURE__*/React.createElement("div", {
|
1033
|
+
ref: this.nodeRef,
|
1034
|
+
className: classNames(classes, modules_9d0de074.buttonMode),
|
1035
|
+
"data-test": joinDataTestAttributes('ring-select', dataTest)
|
1036
|
+
}, selectedLabel && /*#__PURE__*/React.createElement(ControlLabel, {
|
1037
|
+
type: this.props.labelType,
|
1038
|
+
disabled: this.props.disabled,
|
1039
|
+
htmlFor: this.props.id
|
1040
|
+
}, selectedLabel), shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
|
1041
|
+
map: this.getShortcutsMap(),
|
1042
|
+
scope: this.shortcutsScope
|
1043
|
+
}), /*#__PURE__*/React.createElement("div", {
|
1044
|
+
className: modules_9d0de074.buttonContainer
|
1045
|
+
}, /*#__PURE__*/React.createElement(Button, _extends({}, ariaProps, {
|
1046
|
+
height: this.props.height,
|
1047
|
+
id: this.props.id,
|
1048
|
+
onClick: this._clickHandler,
|
1049
|
+
className: classNames(this.props.buttonClassName, modules_9d0de074.buttonValue, {
|
1050
|
+
[modules_9d0de074.buttonValueOpen]: this.state.showPopup,
|
1051
|
+
[modules_9d0de074.buttonValueEmpty]: this._selectionIsEmpty()
|
1052
|
+
}),
|
1053
|
+
disabled: this.props.disabled,
|
1054
|
+
style: style,
|
1055
|
+
"data-test": "ring-select__button ring-select__focus"
|
1056
|
+
}), this._getAvatar(), this._getPlaceholder()), iconsNode), this._renderPopup());
|
1057
|
+
case Type.INLINE:
|
1058
|
+
return /*#__PURE__*/React.createElement("div", {
|
1059
|
+
className: classes,
|
1060
|
+
ref: this.nodeRef,
|
1061
|
+
"data-test": joinDataTestAttributes('ring-select', dataTest)
|
1062
|
+
}, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
|
1106
1063
|
map: this.getShortcutsMap(),
|
1107
1064
|
scope: this.shortcutsScope
|
1108
|
-
}),
|
1109
|
-
|
1110
|
-
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1117
|
-
|
1118
|
-
|
1119
|
-
|
1120
|
-
|
1121
|
-
|
1122
|
-
|
1065
|
+
}), /*#__PURE__*/React.createElement(Anchor, _extends({}, ariaProps, {
|
1066
|
+
className: (_this$props$buttonCla = this.props.buttonClassName) !== null && _this$props$buttonCla !== void 0 ? _this$props$buttonCla : undefined,
|
1067
|
+
id: this.props.id,
|
1068
|
+
onClick: this._clickHandler,
|
1069
|
+
"data-test": "ring-select__focus",
|
1070
|
+
disabled: this.props.disabled,
|
1071
|
+
active: this.state.showPopup
|
1072
|
+
}), this._getPlaceholder()), this._renderPopup());
|
1073
|
+
default:
|
1074
|
+
if (this.props.customAnchor) {
|
1075
|
+
return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
|
1076
|
+
map: this.getShortcutsMap(),
|
1077
|
+
scope: this.shortcutsScope
|
1078
|
+
}), this.props.customAnchor({
|
1079
|
+
wrapperProps: {
|
1080
|
+
ref: this.nodeRef,
|
1081
|
+
'data-test': joinDataTestAttributes('ring-select', dataTest)
|
1082
|
+
},
|
1083
|
+
buttonProps: _objectSpread2(_objectSpread2({}, ariaProps), {}, {
|
1084
|
+
id: this.props.id,
|
1085
|
+
onClick: this._clickHandler,
|
1086
|
+
disabled: this.props.disabled,
|
1087
|
+
children: this._getPlaceholder(),
|
1088
|
+
'data-test': 'ring-select__focus'
|
1089
|
+
}),
|
1090
|
+
popup: this._renderPopup()
|
1091
|
+
}));
|
1092
|
+
}
|
1093
|
+
return /*#__PURE__*/React.createElement("span", {
|
1094
|
+
id: this.props.id,
|
1095
|
+
ref: this.nodeRef,
|
1096
|
+
"data-test": "ring-select"
|
1097
|
+
}, this._renderPopup());
|
1098
|
+
}
|
1099
|
+
}
|
1100
|
+
}, {
|
1101
|
+
key: "render",
|
1102
|
+
value: function render() {
|
1103
|
+
var _this4 = this;
|
1104
|
+
return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, function (activeItemId) {
|
1105
|
+
return _this4.renderSelect(activeItemId);
|
1106
|
+
}));
|
1107
|
+
}
|
1108
|
+
}], [{
|
1109
|
+
key: "getDerivedStateFromProps",
|
1110
|
+
value: function getDerivedStateFromProps(nextProps, prevState) {
|
1111
|
+
var multiple = nextProps.multiple,
|
1112
|
+
data = nextProps.data,
|
1113
|
+
type = nextProps.type;
|
1114
|
+
var prevSelected = prevState.prevSelected,
|
1115
|
+
prevData = prevState.prevData,
|
1116
|
+
prevMultiple = prevState.prevMultiple,
|
1117
|
+
filterValue = prevState.filterValue;
|
1118
|
+
var nextState = {
|
1119
|
+
prevData: data,
|
1120
|
+
prevSelected: nextProps.selected,
|
1121
|
+
prevMultiple: multiple
|
1122
|
+
};
|
1123
|
+
if ('data' in nextProps && data !== prevData) {
|
1124
|
+
var _getListItems3 = _getListItems(nextProps, prevState, filterValue, data),
|
1125
|
+
filteredData = _getListItems3.filteredData,
|
1126
|
+
addButton = _getListItems3.addButton;
|
1127
|
+
Object.assign(nextState, {
|
1128
|
+
shownData: filteredData,
|
1129
|
+
addButton
|
1130
|
+
});
|
1131
|
+
if (prevState.selected) {
|
1132
|
+
Object.assign(nextState, {
|
1133
|
+
selectedIndex: getSelectedIndex(prevState.selected, data),
|
1134
|
+
filterValue: _getValueForFilter(prevState.selected, type, filterValue)
|
1135
|
+
});
|
1136
|
+
}
|
1137
|
+
}
|
1138
|
+
if ('selected' in nextProps && nextProps.selected !== prevSelected) {
|
1139
|
+
var _selected = nextProps.selected || (multiple ? [] : null);
|
1140
|
+
var selectedIndex = getSelectedIndex(_selected, data || prevData);
|
1141
|
+
Object.assign(nextState, {
|
1142
|
+
selected: _selected,
|
1143
|
+
filterValue: _getValueForFilter(_selected, type, filterValue)
|
1144
|
+
});
|
1145
|
+
if (!Array.isArray(prevSelected) || !Array.isArray(_selected) || !isSameSelected(prevSelected, _selected)) {
|
1146
|
+
Object.assign(nextState, {
|
1147
|
+
selectedIndex
|
1148
|
+
});
|
1123
1149
|
}
|
1124
|
-
|
1125
|
-
|
1126
|
-
|
1127
|
-
|
1128
|
-
|
1150
|
+
}
|
1151
|
+
if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
|
1152
|
+
nextState.selected = multiple ? [] : null;
|
1153
|
+
}
|
1154
|
+
if (multiple && !nextState.selected) {
|
1155
|
+
nextState.selected = prevState.selected;
|
1156
|
+
}
|
1157
|
+
var _prevState$nextState = _objectSpread2(_objectSpread2({}, prevState), nextState),
|
1158
|
+
selected = _prevState$nextState.selected;
|
1159
|
+
if (selected && Array.isArray(selected)) {
|
1160
|
+
nextState.multipleMap = buildMultipleMap(selected);
|
1161
|
+
var _getListItems4 = _getListItems(nextProps, nextState, filterValue, data),
|
1162
|
+
_filteredData = _getListItems4.filteredData,
|
1163
|
+
_addButton = _getListItems4.addButton;
|
1164
|
+
Object.assign(nextState, {
|
1165
|
+
shownData: _filteredData,
|
1166
|
+
addButton: _addButton
|
1167
|
+
});
|
1168
|
+
}
|
1169
|
+
return nextState;
|
1129
1170
|
}
|
1130
|
-
}
|
1131
|
-
|
1132
|
-
|
1133
|
-
|
1134
|
-
|
1171
|
+
}]);
|
1172
|
+
}(Component);
|
1173
|
+
_defineProperty(Select, "defaultProps", {
|
1174
|
+
data: [],
|
1175
|
+
filter: false,
|
1176
|
+
// enable filter (not in INPUT modes)
|
1177
|
+
filterIcon: null,
|
1178
|
+
filterRef: noop,
|
1179
|
+
multiple: false,
|
1180
|
+
// multiple can be an object - see demo for more information
|
1181
|
+
clear: false,
|
1182
|
+
// enable clear button that clears the "selected" state
|
1183
|
+
loading: false,
|
1184
|
+
// show a loading indicator while data is loading
|
1185
|
+
disabled: false,
|
1186
|
+
// disable select
|
1187
|
+
type: Type.BUTTON,
|
1188
|
+
size: Size.M,
|
1189
|
+
targetElement: null,
|
1190
|
+
// element to bind the popup to (select BUTTON or INPUT by default)
|
1191
|
+
hideSelected: false,
|
1192
|
+
// INPUT mode: clears the input after an option is selected (useful when the selection is displayed in some custom way elsewhere)
|
1193
|
+
allowAny: false,
|
1194
|
+
// INPUT mode: allows any value to be entered
|
1195
|
+
hideArrow: false,
|
1196
|
+
// hide dropdown arrow icon
|
1197
|
+
showPopup: false,
|
1198
|
+
maxHeight: 600,
|
1199
|
+
// height of the options list, including the filter and the 'Add' button
|
1200
|
+
directions: [Popup.PopupProps.Directions.BOTTOM_RIGHT, Popup.PopupProps.Directions.BOTTOM_LEFT, Popup.PopupProps.Directions.TOP_LEFT, Popup.PopupProps.Directions.TOP_RIGHT],
|
1201
|
+
selected: null,
|
1202
|
+
// current selection (item / array of items)
|
1203
|
+
label: null,
|
1204
|
+
// BUTTON or INPUT label (nothing selected)
|
1205
|
+
selectedLabel: null,
|
1206
|
+
// BUTTON or INPUT label (something selected)
|
1207
|
+
inputPlaceholder: '',
|
1208
|
+
// Placeholder for input modes
|
1209
|
+
hint: null,
|
1210
|
+
// hint text to display under the list
|
1211
|
+
shortcutsEnabled: false,
|
1212
|
+
onBeforeOpen: noop,
|
1213
|
+
onLoadMore: noop,
|
1214
|
+
onOpen: noop,
|
1215
|
+
onClose: noop,
|
1216
|
+
onFilter: noop,
|
1217
|
+
// search string as first argument
|
1218
|
+
onFocus: noop,
|
1219
|
+
onBlur: noop,
|
1220
|
+
onKeyDown: noop,
|
1221
|
+
onSelect: noop,
|
1222
|
+
// single + multi
|
1223
|
+
onDeselect: noop,
|
1224
|
+
// multi
|
1225
|
+
onOutsideClick: noop,
|
1226
|
+
// multi
|
1227
|
+
onChange: noop,
|
1228
|
+
// multi
|
1229
|
+
onAdd: noop,
|
1230
|
+
// search string as first argument
|
1231
|
+
onDone: noop,
|
1232
|
+
onReset: noop,
|
1233
|
+
tags: null,
|
1234
|
+
ringPopupTarget: null,
|
1235
|
+
dir: 'ltr'
|
1236
|
+
});
|
1237
|
+
_defineProperty(Select, "contextType", ControlsHeightContext);
|
1238
|
+
_defineProperty(Select, "Type", Type);
|
1239
|
+
_defineProperty(Select, "Size", Size);
|
1135
1240
|
Select.propTypes = {
|
1136
1241
|
className: PropTypes.string,
|
1137
1242
|
buttonClassName: PropTypes.string,
|
@@ -1195,6 +1300,6 @@ Select.propTypes = {
|
|
1195
1300
|
dir: PropTypes.oneOf(['ltr', 'rtl']),
|
1196
1301
|
'data-test': PropTypes.string
|
1197
1302
|
};
|
1198
|
-
|
1303
|
+
var RerenderableSelect = rerenderHOC(Select);
|
1199
1304
|
|
1200
1305
|
export { RerenderableSelect, Type, Select as default };
|