@jetbrains/ring-ui 5.0.35 → 5.0.37
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/date-picker/date-popup.js +3 -1
- package/components/editable-heading/editable-heading.css +69 -0
- package/components/editable-heading/editable-heading.d.ts +21 -0
- package/components/editable-heading/editable-heading.js +34 -0
- package/components/input/input.css +2 -0
- package/components/query-assist/query-assist.js +1 -1
- package/dist/_helpers/_rollupPluginBabelHelpers.js +0 -4
- package/dist/_helpers/anchor.js +0 -1
- package/dist/_helpers/card.js +0 -3
- package/dist/_helpers/dialog__body-scroll-preventer.js +0 -11
- package/dist/_helpers/footer.js +2 -13
- package/dist/_helpers/query-assist__suggestions.js +0 -10
- package/dist/_helpers/select__filter.js +0 -11
- package/dist/_helpers/services-link.js +0 -2
- package/dist/_helpers/sidebar.js +0 -12
- package/dist/_helpers/theme.js +0 -3
- package/dist/_helpers/title.js +0 -9
- package/dist/alert/alert.js +2 -32
- package/dist/alert/container.js +0 -5
- package/dist/alert-service/alert-service.js +0 -26
- package/dist/analytics/analytics.js +0 -22
- package/dist/analytics/analytics__custom-plugin.js +0 -38
- package/dist/analytics/analytics__fus-plugin.js +0 -20
- package/dist/analytics/analytics__ga-plugin.js +0 -13
- package/dist/analytics/analytics__plugin-utils.js +0 -8
- package/dist/analytics-ng/analytics-ng.js +3 -9
- package/dist/auth/auth.js +2 -3
- package/dist/auth/auth__core.js +30 -243
- package/dist/auth/background-flow.js +2 -25
- package/dist/auth/down-notification.js +0 -7
- package/dist/auth/iframe-flow.js +2 -26
- package/dist/auth/landing.js +2 -6
- package/dist/auth/request-builder.js +0 -11
- package/dist/auth/response-parser.js +4 -26
- package/dist/auth/storage.js +4 -60
- package/dist/auth/token-validator.js +6 -42
- package/dist/auth/window-flow.js +2 -34
- package/dist/auth-dialog/auth-dialog.js +2 -12
- package/dist/auth-dialog-service/auth-dialog-service.js +2 -4
- package/dist/auth-ng/auth-ng.js +6 -22
- package/dist/auth-ng/auth-ng.mock.js +0 -4
- package/dist/autofocus-ng/autofocus-ng.js +0 -5
- package/dist/avatar/avatar.js +4 -17
- package/dist/avatar/fallback-avatar.js +2 -9
- package/dist/avatar-editor-ng/avatar-editor-ng.js +1 -17
- package/dist/badge/badge.js +0 -3
- package/dist/button/button.js +0 -8
- package/dist/button-group/button-group.js +0 -3
- package/dist/button-group/caption.js +0 -2
- package/dist/button-group-ng/button-group-ng.js +0 -4
- package/dist/button-ng/button-ng.js +3 -21
- package/dist/button-set/button-set.js +0 -3
- package/dist/button-set-ng/button-set-ng.js +0 -2
- package/dist/button-toolbar/button-toolbar.js +0 -3
- package/dist/button-toolbar-ng/button-toolbar-ng.js +0 -2
- package/dist/caret/caret.js +2 -53
- package/dist/checkbox/checkbox.js +0 -12
- package/dist/code/code.js +3 -25
- package/dist/compiler-ng/compiler-ng.js +0 -5
- package/dist/confirm/confirm.js +0 -6
- package/dist/confirm-service/confirm-service.js +10 -8
- package/dist/content-layout/content-layout.js +0 -7
- package/dist/contenteditable/contenteditable.js +6 -13
- package/dist/data-list/data-list.js +4 -28
- package/dist/data-list/item.js +0 -15
- package/dist/data-list/selection.js +0 -27
- package/dist/date-picker/consts.js +0 -7
- package/dist/date-picker/date-input.js +0 -20
- package/dist/date-picker/date-picker.js +2 -36
- package/dist/date-picker/date-popup.js +21 -72
- package/dist/date-picker/day.js +0 -14
- package/dist/date-picker/month-names.js +0 -9
- package/dist/date-picker/month-slider.js +0 -10
- package/dist/date-picker/month.js +2 -4
- package/dist/date-picker/months.js +6 -13
- package/dist/date-picker/years.js +0 -14
- package/dist/dialog/dialog.js +0 -19
- package/dist/dialog-ng/dialog-ng.js +17 -105
- package/dist/docked-panel-ng/docked-panel-ng.js +6 -29
- package/dist/dropdown/dropdown.js +2 -33
- package/dist/dropdown-menu/dropdown-menu.js +4 -8
- package/dist/editable-heading/editable-heading.d.ts +21 -0
- package/dist/editable-heading/editable-heading.js +85 -0
- package/dist/error-bubble/error-bubble.js +2 -4
- package/dist/error-message/error-message.js +0 -3
- package/dist/footer-ng/footer-ng.js +0 -13
- package/dist/form-ng/form-ng.js +1 -21
- package/dist/global/angular-component-factory.js +0 -10
- package/dist/global/compose.js +0 -1
- package/dist/global/composeRefs.js +0 -1
- package/dist/global/controls-height.js +0 -2
- package/dist/global/create-stateful-context.js +0 -5
- package/dist/global/data-tests.js +0 -4
- package/dist/global/dom.js +2 -11
- package/dist/global/focus-sensor-hoc.js +4 -33
- package/dist/global/fuzzy-highlight.js +2 -16
- package/dist/global/get-event-key.js +8 -17
- package/dist/global/get-uid.js +0 -2
- package/dist/global/linear-function.js +0 -2
- package/dist/global/listeners.js +0 -13
- package/dist/global/memoize.js +0 -2
- package/dist/global/normalize-indent.js +2 -5
- package/dist/global/react-dom-renderer.js +0 -8
- package/dist/global/react-render-adapter.js +0 -7
- package/dist/global/rerender-hoc.js +0 -7
- package/dist/global/ring-angular-component.js +0 -5
- package/dist/global/schedule-raf.js +0 -5
- package/dist/global/trivial-template-tag.js +2 -3
- package/dist/global/url.js +0 -27
- package/dist/grid/col.js +0 -4
- package/dist/grid/grid.js +0 -3
- package/dist/grid/row.js +0 -5
- package/dist/group/group.js +0 -3
- package/dist/header/header.js +0 -5
- package/dist/header/logo.js +0 -4
- package/dist/header/profile.js +0 -7
- package/dist/header/services.js +0 -11
- package/dist/header/smart-profile.js +4 -18
- package/dist/header/smart-services.js +0 -17
- package/dist/header/tray-icon.js +2 -3
- package/dist/header/tray.js +0 -3
- package/dist/heading/heading.js +0 -5
- package/dist/http/http.js +20 -65
- package/dist/http/http.mock.js +2 -14
- package/dist/hub-source/hub-source.js +0 -32
- package/dist/hub-source/hub-source__user.js +0 -1
- package/dist/hub-source/hub-source__users-groups.js +0 -12
- package/dist/icon/icon.js +0 -13
- package/dist/icon/icon__constants.js +0 -4
- package/dist/icon/icon__svg.js +0 -10
- package/dist/icon-ng/icon-ng.js +2 -7
- package/dist/input/input.js +0 -30
- package/dist/input-ng/input-ng.js +0 -17
- package/dist/island/adaptive-island-hoc.js +0 -7
- package/dist/island/content.js +0 -25
- package/dist/island/header.js +0 -7
- package/dist/island/island.js +0 -4
- package/dist/island-legacy/content-legacy.js +0 -2
- package/dist/island-legacy/header-legacy.js +0 -2
- package/dist/island-legacy/island-legacy.js +0 -2
- package/dist/island-ng/island-content-ng.js +0 -3
- package/dist/link/clickableLink.js +2 -10
- package/dist/link/link.js +2 -9
- package/dist/link-ng/link-ng.js +0 -2
- package/dist/list/consts.js +0 -4
- package/dist/list/list.js +6 -128
- package/dist/list/list__custom.js +0 -4
- package/dist/list/list__hint.js +0 -3
- package/dist/list/list__item.js +0 -8
- package/dist/list/list__link.js +2 -3
- package/dist/list/list__separator.js +0 -1
- package/dist/list/list__title.js +0 -1
- package/dist/list/list__users-groups-source.js +4 -17
- package/dist/loader/loader.js +0 -10
- package/dist/loader/loader__core.js +6 -70
- package/dist/loader-inline/loader-inline.js +0 -3
- package/dist/loader-ng/loader-ng.js +0 -7
- package/dist/loader-screen/loader-screen.js +0 -3
- package/dist/loader-screen-ng/loader-screen-ng.js +2 -14
- package/dist/login-dialog/login-dialog.js +0 -15
- package/dist/login-dialog/service.js +2 -4
- package/dist/markdown/code.js +0 -2
- package/dist/markdown/heading.js +0 -1
- package/dist/markdown/link.js +0 -1
- package/dist/markdown/markdown.js +0 -2
- package/dist/message/message.js +0 -24
- package/dist/message-bundle-ng/message-bundle-ng.js +2 -45
- package/dist/old-browsers-message/old-browsers-message.js +2 -21
- package/dist/old-browsers-message/white-list.js +2 -6
- package/dist/pager/pager.js +2 -39
- package/dist/panel/panel.js +0 -3
- package/dist/permissions/permissions.js +1 -43
- package/dist/permissions/permissions__cache.js +12 -63
- package/dist/permissions-ng/permissions-ng.js +11 -19
- package/dist/place-under-ng/place-under-ng.js +0 -19
- package/dist/popup/popup.consts.js +0 -11
- package/dist/popup/popup.js +6 -68
- package/dist/popup/position.js +8 -30
- package/dist/popup-menu/popup-menu.js +4 -13
- package/dist/progress-bar/progress-bar.js +0 -14
- package/dist/promised-click-ng/promised-click-ng.js +3 -22
- package/dist/query-assist/query-assist.js +17 -201
- package/dist/radio/radio.js +0 -6
- package/dist/radio/radio__item.js +0 -9
- package/dist/radio-ng/radio-ng.js +0 -4
- package/dist/save-field-ng/save-field-ng.js +1 -37
- package/dist/select/select.js +18 -208
- package/dist/select/select__popup.js +4 -76
- package/dist/select-ng/select-ng.js +18 -74
- package/dist/select-ng/select-ng__lazy.js +2 -17
- package/dist/select-ng/select-ng__options.js +3 -29
- package/dist/shortcuts/core.js +4 -56
- package/dist/shortcuts/shortcuts-hoc.js +0 -4
- package/dist/shortcuts/shortcuts.js +0 -10
- package/dist/shortcuts-hint-ng/shortcuts-hint-ng.js +0 -13
- package/dist/shortcuts-ng/shortcuts-ng.js +16 -46
- package/dist/sidebar-ng/sidebar-ng.js +2 -12
- package/dist/storage/storage.js +2 -5
- package/dist/storage/storage__fallback.js +2 -48
- package/dist/storage/storage__local.js +0 -23
- package/dist/style.css +1 -1
- package/dist/tab-trap/tab-trap.js +0 -37
- package/dist/table/cell.js +0 -2
- package/dist/table/disable-hover-hoc.js +0 -9
- package/dist/table/header-cell.js +0 -8
- package/dist/table/header.js +0 -16
- package/dist/table/multitable.js +0 -23
- package/dist/table/row-with-focus-sensor.js +0 -12
- package/dist/table/row.js +0 -18
- package/dist/table/selection-adapter.js +0 -2
- package/dist/table/selection-shortcuts-hoc.js +8 -42
- package/dist/table/selection.js +0 -50
- package/dist/table/smart-table.js +0 -9
- package/dist/table/table.js +6 -37
- package/dist/table-legacy-ng/table-legacy-ng.js +12 -42
- package/dist/table-legacy-ng/table-legacy-ng__selection-navigate-actions.js +0 -31
- package/dist/table-legacy-ng/table-legacy-ng__selection.js +0 -32
- package/dist/table-legacy-ng/table-legacy-ng__toolbar.js +2 -5
- package/dist/tabs/collapsible-more.js +0 -5
- package/dist/tabs/collapsible-tab.js +0 -4
- package/dist/tabs/collapsible-tabs.js +8 -28
- package/dist/tabs/dumb-tabs.js +0 -8
- package/dist/tabs/smart-tabs.js +0 -6
- package/dist/tabs/tab-link.js +0 -1
- package/dist/tabs/tab.js +0 -2
- package/dist/tabs-ng/tabs-ng.js +13 -29
- package/dist/tag/tag.js +0 -24
- package/dist/tags-input/tags-input.js +0 -76
- package/dist/tags-list/tags-list.js +0 -6
- package/dist/template-ng/template-ng.js +0 -12
- package/dist/text/text.js +0 -3
- package/dist/theme-ng/theme-ng.js +0 -8
- package/dist/title-ng/title-ng.js +6 -17
- package/dist/toggle/toggle.js +0 -4
- package/dist/tooltip/tooltip.js +4 -35
- package/dist/tooltip-ng/tooltip-ng.js +2 -8
- package/dist/user-agreement/service.js +0 -62
- package/dist/user-agreement/user-agreement.js +0 -8
- package/dist/user-card/smart-user-card-tooltip.js +2 -8
- package/dist/user-card/tooltip.js +0 -3
- package/package.json +22 -22
package/dist/select/select.js
CHANGED
|
@@ -83,15 +83,11 @@ var modules_9d0de074 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","select":
|
|
|
83
83
|
/**
|
|
84
84
|
* @name Select
|
|
85
85
|
*/
|
|
86
|
-
|
|
87
86
|
function noop() {}
|
|
88
87
|
/**
|
|
89
88
|
* @enum {number}
|
|
90
89
|
*/
|
|
91
|
-
|
|
92
|
-
|
|
93
90
|
var Type;
|
|
94
|
-
|
|
95
91
|
(function (Type) {
|
|
96
92
|
Type["BUTTON"] = "BUTTON";
|
|
97
93
|
Type["INPUT"] = "INPUT";
|
|
@@ -99,58 +95,45 @@ var Type;
|
|
|
99
95
|
Type["INLINE"] = "INLINE";
|
|
100
96
|
Type["INPUT_WITHOUT_CONTROLS"] = "INPUT_WITHOUT_CONTROLS";
|
|
101
97
|
})(Type || (Type = {}));
|
|
102
|
-
|
|
103
98
|
const ICONS_OFFSET = 5;
|
|
104
99
|
const ICON_WIDTH = 20;
|
|
105
100
|
const getStyle = memoize(iconsLength => ({
|
|
106
101
|
paddingRight: ICONS_OFFSET + iconsLength * ICON_WIDTH
|
|
107
102
|
}));
|
|
108
|
-
|
|
109
103
|
const isInputMode = type => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
|
|
110
|
-
|
|
111
104
|
function getLowerCaseLabel(item) {
|
|
112
105
|
if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || List.isItemType(List.ListProps.Type.HINT, item) || typeof item.label !== 'string') {
|
|
113
106
|
return null;
|
|
114
107
|
}
|
|
115
|
-
|
|
116
108
|
return item.label.toLowerCase();
|
|
117
109
|
}
|
|
118
|
-
|
|
119
110
|
function doesLabelMatch(itemToCheck, fn) {
|
|
120
111
|
const lowerCaseLabel = getLowerCaseLabel(itemToCheck);
|
|
121
|
-
|
|
122
112
|
if (lowerCaseLabel == null) {
|
|
123
113
|
return true;
|
|
124
114
|
}
|
|
125
|
-
|
|
126
115
|
return fn(lowerCaseLabel);
|
|
127
116
|
}
|
|
128
|
-
|
|
129
117
|
function getFilterFn(filter) {
|
|
130
118
|
if (typeof filter === 'object') {
|
|
131
119
|
if (filter.fn) {
|
|
132
120
|
return filter.fn;
|
|
133
121
|
}
|
|
134
|
-
|
|
135
122
|
if (filter.fuzzy) {
|
|
136
123
|
return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => fuzzyHighlight(checkString, lowerCaseLabel).matched);
|
|
137
124
|
}
|
|
138
125
|
}
|
|
139
|
-
|
|
140
126
|
return (itemToCheck, checkString) => doesLabelMatch(itemToCheck, lowerCaseLabel => lowerCaseLabel.indexOf(checkString) >= 0);
|
|
141
127
|
}
|
|
142
|
-
|
|
143
128
|
function buildMultipleMap(selected) {
|
|
144
129
|
return selected.reduce((acc, item) => {
|
|
145
130
|
acc[item.key] = true;
|
|
146
131
|
return acc;
|
|
147
132
|
}, {});
|
|
148
133
|
}
|
|
149
|
-
|
|
150
134
|
function getListItems(props, state, rawFilterString) {
|
|
151
135
|
let data = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : props.data;
|
|
152
136
|
let filterString = rawFilterString.trim();
|
|
153
|
-
|
|
154
137
|
if (isInputMode(props.type) && !props.allowAny && state.selected && !Array.isArray(state.selected) && filterString === state.selected.label) {
|
|
155
138
|
filterString = ''; // ignore multiple if it is exactly the selected item
|
|
156
139
|
}
|
|
@@ -159,50 +142,39 @@ function getListItems(props, state, rawFilterString) {
|
|
|
159
142
|
const filteredData = [];
|
|
160
143
|
let exactMatch = false;
|
|
161
144
|
const check = getFilterFn(props.filter);
|
|
162
|
-
|
|
163
145
|
for (let i = 0; i < data.length; i++) {
|
|
164
|
-
const item = {
|
|
146
|
+
const item = {
|
|
147
|
+
...data[i]
|
|
165
148
|
};
|
|
166
|
-
|
|
167
149
|
if (check(item, lowerCaseString, data)) {
|
|
168
150
|
var _state$multipleMap2;
|
|
169
|
-
|
|
170
151
|
exactMatch = item.label === filterString;
|
|
171
|
-
|
|
172
152
|
if (props.multiple && !(typeof props.multiple === 'object' && props.multiple.removeSelectedItems)) {
|
|
173
153
|
var _state$multipleMap;
|
|
174
|
-
|
|
175
154
|
item.checkbox = !!((_state$multipleMap = state.multipleMap) !== null && _state$multipleMap !== void 0 && _state$multipleMap[item.key]);
|
|
176
155
|
}
|
|
177
|
-
|
|
178
156
|
if (props.multiple && typeof props.multiple === 'object' && props.multiple.limit && Array.isArray(state.selected)) {
|
|
179
157
|
item.disabled = props.multiple.limit === state.selected.length && !state.selected.find(selectedItem => selectedItem.key === item.key);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
|
|
158
|
+
}
|
|
159
|
+
// Ignore item if it's multiple and is already selected
|
|
183
160
|
if (!(props.multiple && typeof props.multiple === 'object' && props.multiple.removeSelectedItems && (_state$multipleMap2 = state.multipleMap) !== null && _state$multipleMap2 !== void 0 && _state$multipleMap2[item.key])) {
|
|
184
161
|
filteredData.push(item);
|
|
185
162
|
}
|
|
186
163
|
}
|
|
187
164
|
}
|
|
188
|
-
|
|
189
165
|
let addButton = null;
|
|
190
166
|
const {
|
|
191
167
|
add
|
|
192
168
|
} = props;
|
|
193
|
-
|
|
194
169
|
if (add && filterString && !exactMatch || add && add.alwaysVisible) {
|
|
195
170
|
if (!(add.regexp && !add.regexp.test(filterString)) && !(add.minlength && filterString.length < +add.minlength) || add.alwaysVisible) {
|
|
196
171
|
var _add$delayed;
|
|
197
|
-
|
|
198
172
|
let label;
|
|
199
|
-
|
|
200
173
|
if (add.label) {
|
|
201
174
|
label = typeof add.label === 'function' ? add.label(filterString) : add.label;
|
|
202
175
|
} else {
|
|
203
176
|
label = filterString;
|
|
204
177
|
}
|
|
205
|
-
|
|
206
178
|
addButton = {
|
|
207
179
|
prefix: add.prefix,
|
|
208
180
|
label,
|
|
@@ -210,55 +182,42 @@ function getListItems(props, state, rawFilterString) {
|
|
|
210
182
|
};
|
|
211
183
|
}
|
|
212
184
|
}
|
|
213
|
-
|
|
214
185
|
return {
|
|
215
186
|
filteredData,
|
|
216
187
|
addButton
|
|
217
188
|
};
|
|
218
189
|
}
|
|
219
|
-
|
|
220
190
|
function getSelectedIndex(selected, data) {
|
|
221
191
|
const firstSelected = Array.isArray(selected) ? selected[0] : selected;
|
|
222
|
-
|
|
223
192
|
if (firstSelected == null) {
|
|
224
193
|
return null;
|
|
225
194
|
}
|
|
226
|
-
|
|
227
195
|
for (let i = 0; i < data.length; i++) {
|
|
228
196
|
const item = data[i];
|
|
229
|
-
|
|
230
197
|
if (item.key === undefined) {
|
|
231
198
|
continue;
|
|
232
199
|
}
|
|
233
|
-
|
|
234
200
|
if (item.key === firstSelected.key) {
|
|
235
201
|
return i;
|
|
236
202
|
}
|
|
237
203
|
}
|
|
238
|
-
|
|
239
204
|
return null;
|
|
240
205
|
}
|
|
241
|
-
|
|
242
206
|
const getItemLabel = _ref => {
|
|
243
207
|
let {
|
|
244
208
|
selectedLabel,
|
|
245
209
|
label
|
|
246
210
|
} = _ref;
|
|
247
|
-
|
|
248
211
|
if (selectedLabel != null) {
|
|
249
212
|
return selectedLabel;
|
|
250
213
|
}
|
|
251
|
-
|
|
252
214
|
return typeof label === 'string' ? label : '';
|
|
253
215
|
};
|
|
254
|
-
|
|
255
216
|
const getValueForFilter = (selected, type, filterValue) => selected && !isArray(selected) && isInputMode(type) ? getItemLabel(selected) : filterValue;
|
|
256
|
-
|
|
257
217
|
function isSameSelected(prevSelected, selected) {
|
|
258
218
|
if (!prevSelected || !selected || prevSelected.length !== selected.length) {
|
|
259
219
|
return false;
|
|
260
220
|
}
|
|
261
|
-
|
|
262
221
|
const keysMap = selected.reduce((result, item) => {
|
|
263
222
|
result[item.key] = true;
|
|
264
223
|
return result;
|
|
@@ -270,19 +229,14 @@ function isSameSelected(prevSelected, selected) {
|
|
|
270
229
|
* @constructor
|
|
271
230
|
* @extends {Component}
|
|
272
231
|
*/
|
|
273
|
-
|
|
274
232
|
/**
|
|
275
233
|
* Displays a select.
|
|
276
234
|
*/
|
|
277
|
-
|
|
278
|
-
|
|
279
235
|
class Select extends Component {
|
|
280
236
|
constructor() {
|
|
281
237
|
var _this;
|
|
282
|
-
|
|
283
238
|
super(...arguments);
|
|
284
239
|
_this = this;
|
|
285
|
-
|
|
286
240
|
_defineProperty(this, "state", {
|
|
287
241
|
data: [],
|
|
288
242
|
shownData: [],
|
|
@@ -298,13 +252,9 @@ class Select extends Component {
|
|
|
298
252
|
multipleMap: {},
|
|
299
253
|
addButton: null
|
|
300
254
|
});
|
|
301
|
-
|
|
302
255
|
_defineProperty(this, "id", getUID('select-'));
|
|
303
|
-
|
|
304
256
|
_defineProperty(this, "shortcutsScope", this.id);
|
|
305
|
-
|
|
306
257
|
_defineProperty(this, "listId", `${this.id}:list`);
|
|
307
|
-
|
|
308
258
|
_defineProperty(this, "_focusHandler", e => {
|
|
309
259
|
this.props.onFocus(e);
|
|
310
260
|
this.setState({
|
|
@@ -312,12 +262,9 @@ class Select extends Component {
|
|
|
312
262
|
focused: true
|
|
313
263
|
});
|
|
314
264
|
});
|
|
315
|
-
|
|
316
265
|
_defineProperty(this, "_blurHandler", () => {
|
|
317
266
|
var _this$_popup;
|
|
318
|
-
|
|
319
267
|
this.props.onBlur();
|
|
320
|
-
|
|
321
268
|
if (this._popup && this._popup.isVisible() && !this._popup.isClickingPopup) {
|
|
322
269
|
window.setTimeout(() => {
|
|
323
270
|
this.setState({
|
|
@@ -325,7 +272,6 @@ class Select extends Component {
|
|
|
325
272
|
});
|
|
326
273
|
});
|
|
327
274
|
}
|
|
328
|
-
|
|
329
275
|
if (!((_this$_popup = this._popup) !== null && _this$_popup !== void 0 && _this$_popup.isClickingPopup)) {
|
|
330
276
|
this.setState({
|
|
331
277
|
shortcutsEnabled: false,
|
|
@@ -333,46 +279,34 @@ class Select extends Component {
|
|
|
333
279
|
});
|
|
334
280
|
}
|
|
335
281
|
});
|
|
336
|
-
|
|
337
282
|
_defineProperty(this, "node", void 0);
|
|
338
|
-
|
|
339
283
|
_defineProperty(this, "nodeRef", el => {
|
|
340
284
|
this.node = el;
|
|
341
285
|
});
|
|
342
|
-
|
|
343
286
|
_defineProperty(this, "_popup", null);
|
|
344
|
-
|
|
345
287
|
_defineProperty(this, "onEmptyPopupEnter", () => {
|
|
346
288
|
if (this.state.addButton) {
|
|
347
289
|
this.addHandler();
|
|
348
290
|
}
|
|
349
291
|
});
|
|
350
|
-
|
|
351
292
|
_defineProperty(this, "_onEnter", () => {
|
|
352
293
|
var _this$_popup2;
|
|
353
|
-
|
|
354
294
|
if (this.state.addButton && this.state.shownData.length === 0) {
|
|
355
295
|
this.addHandler();
|
|
356
296
|
}
|
|
357
|
-
|
|
358
297
|
this.props.onDone();
|
|
359
|
-
|
|
360
298
|
if (!((_this$_popup2 = this._popup) !== null && _this$_popup2 !== void 0 && _this$_popup2.isVisible()) && this.props.allowAny) {
|
|
361
299
|
return true;
|
|
362
300
|
}
|
|
363
|
-
|
|
364
301
|
return undefined;
|
|
365
302
|
});
|
|
366
|
-
|
|
367
303
|
_defineProperty(this, "_onEsc", event => {
|
|
368
304
|
var _this$_popup3;
|
|
369
|
-
|
|
370
305
|
if (!((_this$_popup3 = this._popup) !== null && _this$_popup3 !== void 0 && _this$_popup3.isVisible())) {
|
|
371
306
|
return true;
|
|
372
307
|
} else if (this.props.multiple || !this.props.getInitial) {
|
|
373
308
|
return false;
|
|
374
309
|
}
|
|
375
|
-
|
|
376
310
|
const selected = {
|
|
377
311
|
key: Math.random(),
|
|
378
312
|
label: this.props.getInitial()
|
|
@@ -386,69 +320,51 @@ class Select extends Component {
|
|
|
386
320
|
});
|
|
387
321
|
return undefined;
|
|
388
322
|
});
|
|
389
|
-
|
|
390
323
|
_defineProperty(this, "_inputShortcutHandler", () => {
|
|
391
324
|
if (this.state.focused && this._popup && !this._popup.isVisible()) {
|
|
392
325
|
this._clickHandler();
|
|
393
326
|
}
|
|
394
327
|
});
|
|
395
|
-
|
|
396
328
|
_defineProperty(this, "popupRef", el => {
|
|
397
329
|
this._popup = el;
|
|
398
330
|
});
|
|
399
|
-
|
|
400
331
|
_defineProperty(this, "addHandler", () => {
|
|
401
332
|
const value = this.filterValue();
|
|
402
|
-
|
|
403
333
|
this._hidePopup();
|
|
404
|
-
|
|
405
334
|
this.props.onAdd(value);
|
|
406
335
|
});
|
|
407
|
-
|
|
408
336
|
_defineProperty(this, "getLowerCaseLabel", getLowerCaseLabel);
|
|
409
|
-
|
|
410
337
|
_defineProperty(this, "doesLabelMatch", doesLabelMatch);
|
|
411
|
-
|
|
412
338
|
_defineProperty(this, "_clickHandler", () => {
|
|
413
339
|
if (!this.props.disabled) {
|
|
414
340
|
if (this.state.showPopup) {
|
|
415
341
|
this._hidePopup();
|
|
416
342
|
} else {
|
|
417
343
|
this.props.onBeforeOpen();
|
|
418
|
-
|
|
419
344
|
this._showPopup();
|
|
420
345
|
}
|
|
421
346
|
}
|
|
422
347
|
});
|
|
423
|
-
|
|
424
348
|
_defineProperty(this, "_openPopupIfClosed", () => {
|
|
425
349
|
if (this.props.disabled || this.state.showPopup) {
|
|
426
350
|
return;
|
|
427
351
|
}
|
|
428
|
-
|
|
429
352
|
this.props.onBeforeOpen();
|
|
430
|
-
|
|
431
353
|
this._showPopup();
|
|
432
354
|
});
|
|
433
|
-
|
|
434
355
|
_defineProperty(this, "_filterChangeHandler", e => {
|
|
435
356
|
this._setFilter(e.currentTarget.value, e);
|
|
436
357
|
});
|
|
437
|
-
|
|
438
358
|
_defineProperty(this, "_setFilter", (value, event) => {
|
|
439
359
|
var _this$_popup4;
|
|
440
|
-
|
|
441
360
|
if (this.isInputMode() && !this.state.focused) {
|
|
442
361
|
return;
|
|
443
362
|
}
|
|
444
|
-
|
|
445
363
|
if (value === this.state.filterValue) {
|
|
446
364
|
return;
|
|
447
365
|
}
|
|
448
|
-
|
|
449
366
|
const filterValue = value.replace(/^\s+/g, '');
|
|
450
367
|
this.props.onFilter(filterValue);
|
|
451
|
-
|
|
452
368
|
if (this.props.allowAny) {
|
|
453
369
|
const fakeSelected = {
|
|
454
370
|
key: Math.random(),
|
|
@@ -462,7 +378,6 @@ class Select extends Component {
|
|
|
462
378
|
this.props.onChange(fakeSelected, event);
|
|
463
379
|
});
|
|
464
380
|
}
|
|
465
|
-
|
|
466
381
|
!((_this$_popup4 = this._popup) !== null && _this$_popup4 !== void 0 && _this$_popup4.isVisible()) && this.props.onBeforeOpen();
|
|
467
382
|
this.setState({
|
|
468
383
|
filterValue
|
|
@@ -470,68 +385,50 @@ class Select extends Component {
|
|
|
470
385
|
this._showPopup();
|
|
471
386
|
});
|
|
472
387
|
});
|
|
473
|
-
|
|
474
388
|
_defineProperty(this, "_redrawPopup", () => {
|
|
475
389
|
if (this.props.multiple) {
|
|
476
390
|
setTimeout(() => {
|
|
477
391
|
this.isInputMode() && this.clearFilter();
|
|
478
|
-
|
|
479
392
|
this._showPopup();
|
|
480
393
|
}, 0);
|
|
481
394
|
}
|
|
482
395
|
});
|
|
483
|
-
|
|
484
396
|
_defineProperty(this, "_listSelectHandler", function (selected, event) {
|
|
485
397
|
let opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
486
|
-
|
|
487
398
|
const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
|
|
488
|
-
|
|
489
399
|
const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
|
|
490
|
-
|
|
491
400
|
const isSelectItemEvent = event && (event.type === 'select' || event.type === 'keydown');
|
|
492
|
-
|
|
493
401
|
if (isSelectItemEvent) {
|
|
494
402
|
event.preventDefault();
|
|
495
403
|
}
|
|
496
|
-
|
|
497
404
|
if (!isItem(selected) && !isCustomItem(selected) || selected.disabled || selected.isResetItem) {
|
|
498
405
|
return;
|
|
499
406
|
}
|
|
500
|
-
|
|
501
407
|
if (!_this.props.multiple) {
|
|
502
408
|
_this._hidePopup(isSelectItemEvent);
|
|
503
|
-
|
|
504
409
|
_this.setState({
|
|
505
410
|
selected,
|
|
506
411
|
selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
|
|
507
412
|
}, () => {
|
|
508
413
|
const newFilterValue = _this.isInputMode() && !_this.props.hideSelected ? getItemLabel(selected) : '';
|
|
509
|
-
|
|
510
414
|
_this.filterValue(newFilterValue);
|
|
511
|
-
|
|
512
415
|
_this.props.onFilter(newFilterValue);
|
|
513
|
-
|
|
514
416
|
_this.props.onSelect(selected, event);
|
|
515
|
-
|
|
516
417
|
_this.props.onChange(selected, event);
|
|
517
418
|
});
|
|
518
419
|
} else {
|
|
519
420
|
const {
|
|
520
421
|
tryKeepOpen
|
|
521
422
|
} = opts;
|
|
522
|
-
|
|
523
423
|
if (!tryKeepOpen) {
|
|
524
424
|
_this._hidePopup(isSelectItemEvent);
|
|
525
425
|
}
|
|
526
|
-
|
|
527
426
|
if (selected.key == null) {
|
|
528
427
|
throw new Error('Multiple selection requires each item to have the "key" property');
|
|
529
428
|
}
|
|
530
|
-
|
|
531
429
|
_this.setState(prevState => {
|
|
532
430
|
const currentSelection = prevState.selected;
|
|
533
431
|
let nextSelection;
|
|
534
|
-
|
|
535
432
|
if (!prevState.multipleMap[selected.key]) {
|
|
536
433
|
nextSelection = currentSelection.concat(selected);
|
|
537
434
|
_this.props.onSelect && _this.props.onSelect(selected, event);
|
|
@@ -539,22 +436,20 @@ class Select extends Component {
|
|
|
539
436
|
nextSelection = currentSelection.filter(item => item.key !== selected.key);
|
|
540
437
|
_this.props.onDeselect && _this.props.onDeselect(selected);
|
|
541
438
|
}
|
|
542
|
-
|
|
543
439
|
_this.props.onChange(nextSelection, event);
|
|
544
|
-
|
|
545
440
|
const nextState = {
|
|
546
441
|
selected: nextSelection,
|
|
547
442
|
selectedIndex: _this._getSelectedIndex(selected, _this.props.data)
|
|
548
443
|
};
|
|
549
|
-
|
|
550
444
|
if (typeof _this.props.multiple === 'object' && _this.props.multiple.limit && nextSelection.length === _this.props.multiple.limit) {
|
|
551
|
-
nextState.shownData = prevState.shownData.map(item => nextSelection.find(selectedItem => selectedItem.key === item.key) ? item : {
|
|
445
|
+
nextState.shownData = prevState.shownData.map(item => nextSelection.find(selectedItem => selectedItem.key === item.key) ? item : {
|
|
446
|
+
...item,
|
|
552
447
|
disabled: true
|
|
553
448
|
});
|
|
554
449
|
}
|
|
555
|
-
|
|
556
450
|
if (!prevState.multipleMap[selected.key]) {
|
|
557
|
-
nextState.multipleMap = {
|
|
451
|
+
nextState.multipleMap = {
|
|
452
|
+
...prevState.multipleMap,
|
|
558
453
|
[selected.key]: true
|
|
559
454
|
};
|
|
560
455
|
} else {
|
|
@@ -564,8 +459,8 @@ class Select extends Component {
|
|
|
564
459
|
} = prevState.multipleMap;
|
|
565
460
|
nextState.multipleMap = restMultipleMap;
|
|
566
461
|
}
|
|
567
|
-
|
|
568
|
-
|
|
462
|
+
return {
|
|
463
|
+
...prevState,
|
|
569
464
|
...nextState
|
|
570
465
|
};
|
|
571
466
|
}, () => {
|
|
@@ -575,18 +470,13 @@ class Select extends Component {
|
|
|
575
470
|
});
|
|
576
471
|
}
|
|
577
472
|
});
|
|
578
|
-
|
|
579
473
|
_defineProperty(this, "_listSelectAllHandler", function () {
|
|
580
474
|
let isSelectAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
581
|
-
|
|
582
475
|
const isItem = item => List.isItemType(List.ListProps.Type.ITEM, item);
|
|
583
|
-
|
|
584
476
|
const isCustomItem = item => List.isItemType(List.ListProps.Type.CUSTOM, item);
|
|
585
|
-
|
|
586
477
|
_this.setState(prevState => {
|
|
587
478
|
const currentSelection = prevState.selected;
|
|
588
479
|
let nextSelection;
|
|
589
|
-
|
|
590
480
|
if (isSelectAll) {
|
|
591
481
|
nextSelection = _this.props.data.filter(item => (isItem(item) || isCustomItem(item)) && !item.disabled);
|
|
592
482
|
nextSelection.filter(item => !_this.props.selected.find(selectedItem => item.key === selectedItem.key)).forEach(item => {
|
|
@@ -598,21 +488,19 @@ class Select extends Component {
|
|
|
598
488
|
_this.props.onDeselect && _this.props.onDeselect(item);
|
|
599
489
|
});
|
|
600
490
|
}
|
|
601
|
-
|
|
602
491
|
_this.props.onChange(nextSelection, event);
|
|
603
|
-
|
|
604
492
|
return {
|
|
605
493
|
filterValue: '',
|
|
606
494
|
selected: nextSelection,
|
|
607
495
|
selectedIndex: isSelectAll ? _this._getSelectedIndex(nextSelection, _this.props.data) : null,
|
|
608
|
-
shownData: prevState.shownData.map(item => ({
|
|
496
|
+
shownData: prevState.shownData.map(item => ({
|
|
497
|
+
...item,
|
|
609
498
|
checkbox: isSelectAll
|
|
610
499
|
})),
|
|
611
500
|
multipleMap: isSelectAll ? buildMultipleMap(_this.props.data.filter(item => !item.disabled)) : {}
|
|
612
501
|
};
|
|
613
502
|
}, _this._redrawPopup);
|
|
614
503
|
});
|
|
615
|
-
|
|
616
504
|
_defineProperty(this, "_onCloseAttempt", (event, isEsc) => {
|
|
617
505
|
if (this.isInputMode()) {
|
|
618
506
|
if (!this.props.allowAny) {
|
|
@@ -623,23 +511,18 @@ class Select extends Component {
|
|
|
623
511
|
}
|
|
624
512
|
}
|
|
625
513
|
}
|
|
626
|
-
|
|
627
514
|
const isTagRemoved = this.props.tags && event && event.target && event.target instanceof Element && event.target.matches('[data-test="ring-tag-remove"]');
|
|
628
|
-
|
|
629
515
|
if (!isTagRemoved) {
|
|
630
516
|
this._hidePopup(isEsc);
|
|
631
517
|
}
|
|
632
518
|
});
|
|
633
|
-
|
|
634
519
|
_defineProperty(this, "clearFilter", e => {
|
|
635
520
|
this._setFilter('', e);
|
|
636
521
|
});
|
|
637
|
-
|
|
638
522
|
_defineProperty(this, "clear", event => {
|
|
639
523
|
if (event) {
|
|
640
524
|
event.stopPropagation();
|
|
641
525
|
}
|
|
642
|
-
|
|
643
526
|
const empty = this.props.multiple ? [] : null;
|
|
644
527
|
this.setState({
|
|
645
528
|
selected: empty,
|
|
@@ -652,14 +535,11 @@ class Select extends Component {
|
|
|
652
535
|
});
|
|
653
536
|
return false;
|
|
654
537
|
});
|
|
655
|
-
|
|
656
538
|
_defineProperty(this, "filter", void 0);
|
|
657
|
-
|
|
658
539
|
_defineProperty(this, "filterRef", el => {
|
|
659
540
|
this.filter = el;
|
|
660
541
|
});
|
|
661
542
|
}
|
|
662
|
-
|
|
663
543
|
static getDerivedStateFromProps(nextProps, prevState) {
|
|
664
544
|
const {
|
|
665
545
|
multiple,
|
|
@@ -677,7 +557,6 @@ class Select extends Component {
|
|
|
677
557
|
prevSelected: nextProps.selected,
|
|
678
558
|
prevMultiple: multiple
|
|
679
559
|
};
|
|
680
|
-
|
|
681
560
|
if ('data' in nextProps && data !== prevData) {
|
|
682
561
|
const {
|
|
683
562
|
filteredData,
|
|
@@ -687,7 +566,6 @@ class Select extends Component {
|
|
|
687
566
|
shownData: filteredData,
|
|
688
567
|
addButton
|
|
689
568
|
});
|
|
690
|
-
|
|
691
569
|
if (prevState.selected) {
|
|
692
570
|
Object.assign(nextState, {
|
|
693
571
|
selectedIndex: getSelectedIndex(prevState.selected, data),
|
|
@@ -695,7 +573,6 @@ class Select extends Component {
|
|
|
695
573
|
});
|
|
696
574
|
}
|
|
697
575
|
}
|
|
698
|
-
|
|
699
576
|
if ('selected' in nextProps && nextProps.selected !== prevSelected) {
|
|
700
577
|
const selected = nextProps.selected || (multiple ? [] : null);
|
|
701
578
|
const selectedIndex = getSelectedIndex(selected, data || prevData);
|
|
@@ -703,28 +580,24 @@ class Select extends Component {
|
|
|
703
580
|
selected,
|
|
704
581
|
prevFilterValue: getValueForFilter(selected, type, filterValue)
|
|
705
582
|
});
|
|
706
|
-
|
|
707
583
|
if (!Array.isArray(prevSelected) || !Array.isArray(selected) || !isSameSelected(prevSelected, selected)) {
|
|
708
584
|
Object.assign(nextState, {
|
|
709
585
|
selectedIndex
|
|
710
586
|
});
|
|
711
587
|
}
|
|
712
588
|
}
|
|
713
|
-
|
|
714
589
|
if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
|
|
715
590
|
nextState.selected = multiple ? [] : null;
|
|
716
591
|
}
|
|
717
|
-
|
|
718
592
|
if (multiple && !nextState.selected) {
|
|
719
593
|
nextState.selected = prevState.selected;
|
|
720
594
|
}
|
|
721
|
-
|
|
722
595
|
const {
|
|
723
596
|
selected
|
|
724
|
-
} = {
|
|
597
|
+
} = {
|
|
598
|
+
...prevState,
|
|
725
599
|
...nextState
|
|
726
600
|
};
|
|
727
|
-
|
|
728
601
|
if (selected && Array.isArray(selected)) {
|
|
729
602
|
nextState.multipleMap = buildMultipleMap(selected);
|
|
730
603
|
const {
|
|
@@ -736,10 +609,8 @@ class Select extends Component {
|
|
|
736
609
|
addButton
|
|
737
610
|
});
|
|
738
611
|
}
|
|
739
|
-
|
|
740
612
|
return nextState;
|
|
741
613
|
}
|
|
742
|
-
|
|
743
614
|
componentDidUpdate(prevProps, prevState) {
|
|
744
615
|
const {
|
|
745
616
|
showPopup,
|
|
@@ -751,34 +622,27 @@ class Select extends Component {
|
|
|
751
622
|
onChange,
|
|
752
623
|
multiple
|
|
753
624
|
} = this.props;
|
|
754
|
-
|
|
755
625
|
if (prevState.showPopup && !showPopup) {
|
|
756
626
|
onClose(selected);
|
|
757
627
|
} else if (!prevState.showPopup && showPopup) {
|
|
758
628
|
onOpen();
|
|
759
629
|
}
|
|
760
|
-
|
|
761
630
|
if (multiple !== prevProps.multiple && !deepEqual(multiple, prevProps.multiple)) {
|
|
762
631
|
onChange(selected);
|
|
763
632
|
}
|
|
764
633
|
}
|
|
765
|
-
|
|
766
634
|
getValueForFilter(selected) {
|
|
767
635
|
return getValueForFilter(selected, this.props.type, this.state.filterValue);
|
|
768
636
|
}
|
|
769
|
-
|
|
770
637
|
_getSelectedIndex(selected, data) {
|
|
771
638
|
return getSelectedIndex(selected, data);
|
|
772
639
|
}
|
|
773
|
-
|
|
774
640
|
_getResetOption() {
|
|
775
641
|
const isOptionsSelected = Array.isArray(this.state.selected) && this.state.selected.length;
|
|
776
642
|
const reset = this.props.tags && typeof this.props.tags === 'object' ? this.props.tags.reset : null;
|
|
777
|
-
|
|
778
643
|
if (!isOptionsSelected || !reset) {
|
|
779
644
|
return null;
|
|
780
645
|
}
|
|
781
|
-
|
|
782
646
|
const resetHandler = (item, event) => {
|
|
783
647
|
this.clear(event);
|
|
784
648
|
this.clearFilter();
|
|
@@ -787,10 +651,8 @@ class Select extends Component {
|
|
|
787
651
|
shownData: prevState.shownData.slice(reset.separator ? 2 : 1),
|
|
788
652
|
multipleMap: {}
|
|
789
653
|
}));
|
|
790
|
-
|
|
791
654
|
this._redrawPopup();
|
|
792
655
|
};
|
|
793
|
-
|
|
794
656
|
return {
|
|
795
657
|
isResetItem: true,
|
|
796
658
|
separator: reset.separator,
|
|
@@ -805,46 +667,35 @@ class Select extends Component {
|
|
|
805
667
|
onClick: resetHandler
|
|
806
668
|
};
|
|
807
669
|
}
|
|
808
|
-
|
|
809
670
|
_prependResetOption(shownData) {
|
|
810
671
|
const resetOption = this._getResetOption();
|
|
811
|
-
|
|
812
672
|
const margin = {
|
|
813
673
|
rgItemType: List.ListProps.Type.MARGIN
|
|
814
674
|
};
|
|
815
|
-
|
|
816
675
|
if (resetOption) {
|
|
817
676
|
const resetItems = [margin, resetOption, margin];
|
|
818
|
-
|
|
819
677
|
if (resetOption.separator) {
|
|
820
678
|
resetItems.push({
|
|
821
679
|
rgItemType: List.ListProps.Type.SEPARATOR
|
|
822
680
|
});
|
|
823
681
|
}
|
|
824
|
-
|
|
825
682
|
return resetItems.concat(shownData);
|
|
826
683
|
}
|
|
827
|
-
|
|
828
684
|
return shownData;
|
|
829
685
|
}
|
|
830
|
-
|
|
831
686
|
_renderPopup() {
|
|
832
687
|
const anchorElement = this.props.targetElement || this.node;
|
|
833
688
|
const {
|
|
834
689
|
showPopup,
|
|
835
690
|
shownData
|
|
836
691
|
} = this.state;
|
|
837
|
-
|
|
838
692
|
const _shownData = this._prependResetOption(shownData);
|
|
839
|
-
|
|
840
693
|
let message;
|
|
841
|
-
|
|
842
694
|
if (this.props.loading) {
|
|
843
695
|
message = this.props.loadingMessage;
|
|
844
696
|
} else if (!shownData.length) {
|
|
845
697
|
message = this.props.notFoundMessage;
|
|
846
698
|
}
|
|
847
|
-
|
|
848
699
|
return /*#__PURE__*/React.createElement(SelectPopup, {
|
|
849
700
|
data: _shownData,
|
|
850
701
|
message: message,
|
|
@@ -884,37 +735,31 @@ class Select extends Component {
|
|
|
884
735
|
listId: this.listId
|
|
885
736
|
});
|
|
886
737
|
}
|
|
887
|
-
|
|
888
738
|
_showPopup() {
|
|
889
739
|
if (!this.node) {
|
|
890
740
|
return;
|
|
891
741
|
}
|
|
892
|
-
|
|
893
742
|
const shownData = this.getListItems(this.filterValue());
|
|
894
743
|
this.setState({
|
|
895
744
|
showPopup: !!shownData.length || !this.props.allowAny,
|
|
896
745
|
shownData
|
|
897
746
|
});
|
|
898
747
|
}
|
|
899
|
-
|
|
900
748
|
_hidePopup(tryFocusAnchor) {
|
|
901
749
|
if (this.node && this.state.showPopup) {
|
|
902
750
|
this.setState(prevState => ({
|
|
903
751
|
showPopup: false,
|
|
904
752
|
filterValue: this.props.allowAny ? prevState.filterValue : ''
|
|
905
753
|
}));
|
|
906
|
-
|
|
907
754
|
if (tryFocusAnchor) {
|
|
908
755
|
const focusableSelectExists = this.node && this.node.querySelector('[data-test~=ring-select__focus]');
|
|
909
756
|
const restoreFocusNode = this.props.targetElement || focusableSelectExists;
|
|
910
|
-
|
|
911
757
|
if (restoreFocusNode) {
|
|
912
758
|
restoreFocusNode.focus();
|
|
913
759
|
}
|
|
914
760
|
}
|
|
915
761
|
}
|
|
916
762
|
}
|
|
917
|
-
|
|
918
763
|
getToolbar() {
|
|
919
764
|
const {
|
|
920
765
|
hint,
|
|
@@ -926,11 +771,9 @@ class Select extends Component {
|
|
|
926
771
|
delayed
|
|
927
772
|
} = this.state.addButton || {};
|
|
928
773
|
const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
|
|
929
|
-
|
|
930
774
|
if (!isToolbarHasElements) {
|
|
931
775
|
return null;
|
|
932
776
|
}
|
|
933
|
-
|
|
934
777
|
return /*#__PURE__*/React.createElement("div", {
|
|
935
778
|
className: classNames({
|
|
936
779
|
[modules_9d0de074.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
|
|
@@ -947,11 +790,9 @@ class Select extends Component {
|
|
|
947
790
|
"data-test": "ring-select-toolbar-hint"
|
|
948
791
|
}));
|
|
949
792
|
}
|
|
950
|
-
|
|
951
793
|
getFilterFn() {
|
|
952
794
|
return getFilterFn(this.props.filter);
|
|
953
795
|
}
|
|
954
|
-
|
|
955
796
|
getListItems(rawFilterString, data) {
|
|
956
797
|
const {
|
|
957
798
|
filteredData,
|
|
@@ -962,7 +803,6 @@ class Select extends Component {
|
|
|
962
803
|
});
|
|
963
804
|
return filteredData;
|
|
964
805
|
}
|
|
965
|
-
|
|
966
806
|
filterValue(setValue) {
|
|
967
807
|
if (typeof setValue === 'string' || typeof setValue === 'number') {
|
|
968
808
|
this.setState({
|
|
@@ -973,11 +813,9 @@ class Select extends Component {
|
|
|
973
813
|
return this.state.filterValue;
|
|
974
814
|
}
|
|
975
815
|
}
|
|
976
|
-
|
|
977
816
|
isInputMode() {
|
|
978
817
|
return isInputMode(this.props.type);
|
|
979
818
|
}
|
|
980
|
-
|
|
981
819
|
_rebuildMultipleMap(selected) {
|
|
982
820
|
if (Array.isArray(selected)) {
|
|
983
821
|
this.setState({
|
|
@@ -985,31 +823,24 @@ class Select extends Component {
|
|
|
985
823
|
});
|
|
986
824
|
}
|
|
987
825
|
}
|
|
988
|
-
|
|
989
826
|
_selectionIsEmpty() {
|
|
990
827
|
return Array.isArray(this.state.selected) && !this.state.selected.length || !this.state.selected;
|
|
991
828
|
}
|
|
992
|
-
|
|
993
829
|
_getLabel() {
|
|
994
830
|
var _ref2, _this$props$label;
|
|
995
|
-
|
|
996
831
|
return (_ref2 = (_this$props$label = this.props.label) !== null && _this$props$label !== void 0 ? _this$props$label : this.props.selectedLabel) !== null && _ref2 !== void 0 ? _ref2 : 'Select an option';
|
|
997
832
|
}
|
|
998
|
-
|
|
999
833
|
_getSelectedString() {
|
|
1000
834
|
if (Array.isArray(this.state.selected)) {
|
|
1001
835
|
const labels = [];
|
|
1002
|
-
|
|
1003
836
|
for (let i = 0; i < this.state.selected.length; i++) {
|
|
1004
837
|
labels.push(getItemLabel(this.state.selected[i]));
|
|
1005
838
|
}
|
|
1006
|
-
|
|
1007
839
|
return labels.filter(Boolean).join(', ');
|
|
1008
840
|
} else {
|
|
1009
841
|
return this.state.selected != null ? getItemLabel(this.state.selected) : null;
|
|
1010
842
|
}
|
|
1011
843
|
}
|
|
1012
|
-
|
|
1013
844
|
_getIcons() {
|
|
1014
845
|
const {
|
|
1015
846
|
selected
|
|
@@ -1020,7 +851,6 @@ class Select extends Component {
|
|
|
1020
851
|
hideArrow
|
|
1021
852
|
} = this.props;
|
|
1022
853
|
const icons = [];
|
|
1023
|
-
|
|
1024
854
|
if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
|
|
1025
855
|
icons.push( /*#__PURE__*/React.createElement("button", {
|
|
1026
856
|
title: "Toggle options popup",
|
|
@@ -1034,7 +864,6 @@ class Select extends Component {
|
|
|
1034
864
|
}
|
|
1035
865
|
}));
|
|
1036
866
|
}
|
|
1037
|
-
|
|
1038
867
|
if (clear && !disabled && !this._selectionIsEmpty()) {
|
|
1039
868
|
icons.push( /*#__PURE__*/React.createElement(Button, {
|
|
1040
869
|
title: "Clear selection",
|
|
@@ -1046,7 +875,6 @@ class Select extends Component {
|
|
|
1046
875
|
icon: closeIcon
|
|
1047
876
|
}));
|
|
1048
877
|
}
|
|
1049
|
-
|
|
1050
878
|
if (!hideArrow) {
|
|
1051
879
|
icons.push( /*#__PURE__*/React.createElement(Button, {
|
|
1052
880
|
title: "Toggle options popup",
|
|
@@ -1058,13 +886,10 @@ class Select extends Component {
|
|
|
1058
886
|
onClick: this._clickHandler
|
|
1059
887
|
}));
|
|
1060
888
|
}
|
|
1061
|
-
|
|
1062
889
|
return icons;
|
|
1063
890
|
}
|
|
1064
|
-
|
|
1065
891
|
_getAvatar() {
|
|
1066
892
|
var _this$state$selected, _this$state$selected2;
|
|
1067
|
-
|
|
1068
893
|
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, {
|
|
1069
894
|
className: modules_9d0de074.avatar,
|
|
1070
895
|
url: this.state.selected.avatar,
|
|
@@ -1072,7 +897,6 @@ class Select extends Component {
|
|
|
1072
897
|
size: Size$1.Size20
|
|
1073
898
|
});
|
|
1074
899
|
}
|
|
1075
|
-
|
|
1076
900
|
getShortcutsMap() {
|
|
1077
901
|
return {
|
|
1078
902
|
enter: this._onEnter,
|
|
@@ -1086,10 +910,8 @@ class Select extends Component {
|
|
|
1086
910
|
space: noop
|
|
1087
911
|
};
|
|
1088
912
|
}
|
|
1089
|
-
|
|
1090
913
|
renderSelect(activeItemId) {
|
|
1091
914
|
var _this$_popup5, _this$_popup5$list;
|
|
1092
|
-
|
|
1093
915
|
const dataTest = this.props['data-test'];
|
|
1094
916
|
const {
|
|
1095
917
|
shortcutsEnabled
|
|
@@ -1098,9 +920,7 @@ class Select extends Component {
|
|
|
1098
920
|
[modules_9d0de074[`size${this.props.size}`]]: this.props.type !== Type.INLINE,
|
|
1099
921
|
[modules_9d0de074.disabled]: this.props.disabled
|
|
1100
922
|
});
|
|
1101
|
-
|
|
1102
923
|
const icons = this._getIcons();
|
|
1103
|
-
|
|
1104
924
|
const style = getStyle(icons.length);
|
|
1105
925
|
const iconsNode = /*#__PURE__*/React.createElement("span", {
|
|
1106
926
|
className: modules_9d0de074.icons
|
|
@@ -1109,7 +929,6 @@ class Select extends Component {
|
|
|
1109
929
|
'aria-owns': this.listId,
|
|
1110
930
|
'aria-activedescendant': activeItemId
|
|
1111
931
|
} : {};
|
|
1112
|
-
|
|
1113
932
|
switch (this.props.type) {
|
|
1114
933
|
case Type.INPUT_WITHOUT_CONTROLS:
|
|
1115
934
|
case Type.INPUT:
|
|
@@ -1138,12 +957,12 @@ class Select extends Component {
|
|
|
1138
957
|
placeholder: this.props.inputPlaceholder,
|
|
1139
958
|
onKeyDown: this.props.onKeyDown,
|
|
1140
959
|
"data-test": "ring-select__focus",
|
|
1141
|
-
enableShortcuts: shortcutsEnabled ? Object.keys({
|
|
960
|
+
enableShortcuts: shortcutsEnabled ? Object.keys({
|
|
961
|
+
...this.getShortcutsMap(),
|
|
1142
962
|
...((_this$_popup5 = this._popup) === null || _this$_popup5 === void 0 ? void 0 : (_this$_popup5$list = _this$_popup5.list) === null || _this$_popup5$list === void 0 ? void 0 : _this$_popup5$list.shortcutsMap)
|
|
1143
963
|
}) : undefined,
|
|
1144
964
|
afterInput: this.props.type === Type.INPUT && iconsNode
|
|
1145
965
|
})), this._renderPopup());
|
|
1146
|
-
|
|
1147
966
|
case Type.BUTTON:
|
|
1148
967
|
return /*#__PURE__*/React.createElement("div", {
|
|
1149
968
|
ref: this.nodeRef,
|
|
@@ -1165,7 +984,6 @@ class Select extends Component {
|
|
|
1165
984
|
style: style,
|
|
1166
985
|
"data-test": "ring-select__button ring-select__focus"
|
|
1167
986
|
}), this._getAvatar(), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), iconsNode), this._renderPopup());
|
|
1168
|
-
|
|
1169
987
|
case Type.INLINE:
|
|
1170
988
|
return /*#__PURE__*/React.createElement("div", {
|
|
1171
989
|
className: classes,
|
|
@@ -1181,7 +999,6 @@ class Select extends Component {
|
|
|
1181
999
|
disabled: this.props.disabled,
|
|
1182
1000
|
active: this.state.showPopup
|
|
1183
1001
|
}), this._selectionIsEmpty() ? this._getLabel() : this._getSelectedString()), this._renderPopup());
|
|
1184
|
-
|
|
1185
1002
|
default:
|
|
1186
1003
|
if (this.props.customAnchor) {
|
|
1187
1004
|
return /*#__PURE__*/React.createElement(Fragment, null, shortcutsEnabled && /*#__PURE__*/React.createElement(Shortcuts, {
|
|
@@ -1192,7 +1009,8 @@ class Select extends Component {
|
|
|
1192
1009
|
ref: this.nodeRef,
|
|
1193
1010
|
'data-test': joinDataTestAttributes('ring-select', dataTest)
|
|
1194
1011
|
},
|
|
1195
|
-
buttonProps: {
|
|
1012
|
+
buttonProps: {
|
|
1013
|
+
...ariaProps,
|
|
1196
1014
|
id: this.props.id,
|
|
1197
1015
|
onClick: this._clickHandler,
|
|
1198
1016
|
disabled: this.props.disabled,
|
|
@@ -1202,7 +1020,6 @@ class Select extends Component {
|
|
|
1202
1020
|
popup: this._renderPopup()
|
|
1203
1021
|
}));
|
|
1204
1022
|
}
|
|
1205
|
-
|
|
1206
1023
|
return /*#__PURE__*/React.createElement("span", {
|
|
1207
1024
|
id: this.props.id,
|
|
1208
1025
|
ref: this.nodeRef,
|
|
@@ -1210,13 +1027,10 @@ class Select extends Component {
|
|
|
1210
1027
|
}, this._renderPopup());
|
|
1211
1028
|
}
|
|
1212
1029
|
}
|
|
1213
|
-
|
|
1214
1030
|
render() {
|
|
1215
1031
|
return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => this.renderSelect(activeItemId)));
|
|
1216
1032
|
}
|
|
1217
|
-
|
|
1218
1033
|
}
|
|
1219
|
-
|
|
1220
1034
|
_defineProperty(Select, "defaultProps", {
|
|
1221
1035
|
data: [],
|
|
1222
1036
|
filter: false,
|
|
@@ -1258,13 +1072,9 @@ _defineProperty(Select, "defaultProps", {
|
|
|
1258
1072
|
ringPopupTarget: null,
|
|
1259
1073
|
dir: 'ltr'
|
|
1260
1074
|
});
|
|
1261
|
-
|
|
1262
1075
|
_defineProperty(Select, "contextType", ControlsHeightContext);
|
|
1263
|
-
|
|
1264
1076
|
_defineProperty(Select, "Type", Type);
|
|
1265
|
-
|
|
1266
1077
|
_defineProperty(Select, "Size", Size);
|
|
1267
|
-
|
|
1268
1078
|
Select.propTypes = {
|
|
1269
1079
|
className: PropTypes.string,
|
|
1270
1080
|
buttonClassName: PropTypes.string,
|