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