@carbon/ibm-products 1.11.2 → 1.12.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +0 -3
- package/css/index-full-carbon.css +1387 -358
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +1 -0
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +51 -5
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +51 -5
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelect.js +63 -12
- package/es/components/AddSelect/AddSelectColumn.js +0 -1
- package/es/components/AddSelect/AddSelectList.js +33 -13
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +107 -89
- package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +93 -20
- package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +50 -2
- package/es/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +3 -1
- package/es/components/ImportModal/ImportModal.js +2 -2
- package/es/components/UserProfileImage/UserProfileImage.js +1 -1
- package/lib/components/AddSelect/AddSelect.js +63 -12
- package/lib/components/AddSelect/AddSelectColumn.js +0 -1
- package/lib/components/AddSelect/AddSelectList.js +34 -12
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +108 -91
- package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +94 -20
- package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +52 -7
- package/lib/components/DataSpreadsheet/utils/handleHeaderCellSelection.js +3 -1
- package/lib/components/ImportModal/ImportModal.js +1 -1
- package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
- package/package.json +13 -13
- package/scss/components/AboutModal/_about-modal.scss +2 -2
- package/scss/components/ActionSet/_action-set.scss +3 -1
- package/scss/components/AddSelect/_add-select.scss +37 -2
- package/scss/components/CreateModal/_create-modal.scss +7 -5
- package/scss/components/CreateModal/_storybook-styles.scss +8 -7
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +21 -3
- package/scss/components/ExportModal/_export-modal.scss +3 -3
- package/scss/components/InlineEdit/_inline-edit.scss +0 -1
- package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -10
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -3
- package/scss/components/OptionsTile/_options-tile.scss +0 -1
- package/scss/components/RemoveModal/_remove-modal.scss +3 -3
- package/scss/components/TagSet/_tag-set.scss +2 -1
- package/scss/components/Tearsheet/_tearsheet.scss +1 -2
@@ -1,5 +1,10 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
4
|
+
|
5
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
6
|
+
|
7
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
3
8
|
|
4
9
|
/**
|
5
10
|
* Copyright IBM Corp. 2022, 2022
|
@@ -7,24 +12,48 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
12
|
* This source code is licensed under the Apache-2.0 license found in the
|
8
13
|
* LICENSE file in the root directory of this source tree.
|
9
14
|
*/
|
10
|
-
import React, { forwardRef } from 'react';
|
15
|
+
import React, { forwardRef, useEffect, useState } from 'react';
|
11
16
|
import PropTypes from 'prop-types';
|
12
17
|
import cx from 'classnames';
|
18
|
+
import { px } from '@carbon/layout';
|
13
19
|
import { pkg } from '../../settings';
|
14
20
|
import { checkActiveHeaderCell } from './utils/checkActiveHeaderCell';
|
15
21
|
import { handleHeaderCellSelection } from './utils/handleHeaderCellSelection';
|
22
|
+
import { usePreviousValue } from '../../global/js/hooks';
|
16
23
|
var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
|
17
24
|
export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
18
25
|
var activeCellCoordinates = _ref.activeCellCoordinates,
|
26
|
+
cellSize = _ref.cellSize,
|
19
27
|
columns = _ref.columns,
|
20
28
|
defaultColumn = _ref.defaultColumn,
|
21
29
|
headerGroups = _ref.headerGroups,
|
30
|
+
scrollBarSize = _ref.scrollBarSize,
|
22
31
|
selectionAreas = _ref.selectionAreas,
|
23
32
|
setActiveCellCoordinates = _ref.setActiveCellCoordinates,
|
24
33
|
setCurrentMatcher = _ref.setCurrentMatcher,
|
25
34
|
setSelectionAreas = _ref.setSelectionAreas,
|
35
|
+
setSelectionAreaData = _ref.setSelectionAreaData,
|
26
36
|
rows = _ref.rows;
|
27
37
|
|
38
|
+
var _useState = useState(0),
|
39
|
+
_useState2 = _slicedToArray(_useState, 2),
|
40
|
+
scrollBarSizeValue = _useState2[0],
|
41
|
+
setScrollBarSizeValue = _useState2[1];
|
42
|
+
|
43
|
+
var previousState = usePreviousValue({
|
44
|
+
cellSize: cellSize
|
45
|
+
});
|
46
|
+
useEffect(function () {
|
47
|
+
if ((previousState === null || previousState === void 0 ? void 0 : previousState.cellSize) !== cellSize) {
|
48
|
+
var _ref$current;
|
49
|
+
|
50
|
+
var scrollContainer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".".concat(blockClass, "__list--container"));
|
51
|
+
var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
|
52
|
+
var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
|
53
|
+
setScrollBarSizeValue(scrollBarValue);
|
54
|
+
}
|
55
|
+
}, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
|
56
|
+
|
28
57
|
var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
|
29
58
|
return function () {
|
30
59
|
handleHeaderCellSelection({
|
@@ -36,7 +65,8 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
36
65
|
setCurrentMatcher: setCurrentMatcher,
|
37
66
|
setSelectionAreas: setSelectionAreas,
|
38
67
|
spreadsheetRef: ref,
|
39
|
-
index: index
|
68
|
+
index: index,
|
69
|
+
setSelectionAreaData: setSelectionAreaData
|
40
70
|
});
|
41
71
|
};
|
42
72
|
};
|
@@ -47,6 +77,9 @@ export var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref)
|
|
47
77
|
return /*#__PURE__*/React.createElement("div", _extends({
|
48
78
|
key: "header_".concat(index)
|
49
79
|
}, headerGroup.getHeaderGroupProps(), {
|
80
|
+
style: _objectSpread(_objectSpread({}, headerGroup.getHeaderGroupProps().style), {}, {
|
81
|
+
width: px(parseInt(headerGroup.getHeaderGroupProps().style.width) + scrollBarSizeValue)
|
82
|
+
}),
|
50
83
|
className: "".concat(blockClass, "__tr")
|
51
84
|
}), /*#__PURE__*/React.createElement("button", {
|
52
85
|
"data-row-index": "header",
|
@@ -84,6 +117,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
84
117
|
column: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
85
118
|
}),
|
86
119
|
|
120
|
+
/**
|
121
|
+
* Specifies the cell height
|
122
|
+
*/
|
123
|
+
cellSize: PropTypes.oneOf(['compact', 'standard', 'medium', 'large']),
|
124
|
+
|
87
125
|
/**
|
88
126
|
* All of the spreadsheet columns
|
89
127
|
*/
|
@@ -108,6 +146,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
108
146
|
*/
|
109
147
|
rows: PropTypes.arrayOf(PropTypes.object),
|
110
148
|
|
149
|
+
/**
|
150
|
+
* The scrollbar width
|
151
|
+
*/
|
152
|
+
scrollBarSize: PropTypes.number,
|
153
|
+
|
111
154
|
/**
|
112
155
|
* All of the cell selection area items
|
113
156
|
*/
|
@@ -123,6 +166,11 @@ DataSpreadsheetHeader.propTypes = {
|
|
123
166
|
*/
|
124
167
|
setCurrentMatcher: PropTypes.func,
|
125
168
|
|
169
|
+
/**
|
170
|
+
* Setter fn for selectionAreaData state value
|
171
|
+
*/
|
172
|
+
setSelectionAreaData: PropTypes.func,
|
173
|
+
|
126
174
|
/**
|
127
175
|
* Setter fn for selectionAreas value
|
128
176
|
*/
|
@@ -16,7 +16,9 @@ export var handleHeaderCellSelection = function handleHeaderCellSelection(_ref)
|
|
16
16
|
setSelectionAreas = _ref.setSelectionAreas,
|
17
17
|
spreadsheetRef = _ref.spreadsheetRef,
|
18
18
|
index = _ref.index,
|
19
|
-
isKeyboard = _ref.isKeyboard
|
19
|
+
isKeyboard = _ref.isKeyboard,
|
20
|
+
setSelectionAreaData = _ref.setSelectionAreaData;
|
21
|
+
setSelectionAreaData([]);
|
20
22
|
var rowValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row : index;
|
21
23
|
var columnValue = isKeyboard ? activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column : index;
|
22
24
|
var point1 = {
|
@@ -23,7 +23,7 @@ import cx from 'classnames';
|
|
23
23
|
import PropTypes from 'prop-types';
|
24
24
|
import { getDevtoolsProps } from '../../global/js/utils/devtools';
|
25
25
|
import uuidv4 from '../../global/js/utils/uuidv4';
|
26
|
-
import { pkg } from '../../settings';
|
26
|
+
import { pkg, carbon } from '../../settings';
|
27
27
|
var componentName = 'ImportModal'; // Default values for props
|
28
28
|
|
29
29
|
var defaults = {
|
@@ -254,7 +254,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
254
254
|
size: "sm",
|
255
255
|
disabled: importButtonDisabled
|
256
256
|
}, inputButtonText)), /*#__PURE__*/React.createElement("div", {
|
257
|
-
className: "
|
257
|
+
className: "".concat(carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
|
258
258
|
}, hasFiles && /*#__PURE__*/React.createElement("p", {
|
259
259
|
className: "".concat(blockClass, "__helper-text")
|
260
260
|
}, fileStatusString), files.map(function (file) {
|
@@ -41,7 +41,7 @@ var _AddSelectColumn = require("./AddSelectColumn");
|
|
41
41
|
|
42
42
|
var _addSelectUtils = require("./add-select-utils");
|
43
43
|
|
44
|
-
var _excluded = ["className", "columnInputPlaceholder", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "textInputLabel", "title"];
|
44
|
+
var _excluded = ["className", "columnInputPlaceholder", "description", "influencerTitle", "inputPlaceholder", "items", "itemsLabel", "multi", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "onClose", "onCloseButtonText", "onSearchFilter", "onSubmit", "onSubmitButtonText", "open", "removeIconDescription", "searchResultsLabel", "textInputLabel", "title"];
|
45
45
|
|
46
46
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
47
47
|
|
@@ -70,6 +70,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
70
70
|
onSubmitButtonText = _ref.onSubmitButtonText,
|
71
71
|
open = _ref.open,
|
72
72
|
removeIconDescription = _ref.removeIconDescription,
|
73
|
+
searchResultsLabel = _ref.searchResultsLabel,
|
73
74
|
textInputLabel = _ref.textInputLabel,
|
74
75
|
title = _ref.title,
|
75
76
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
@@ -107,12 +108,13 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
107
108
|
|
108
109
|
var _useState13 = (0, _react.useState)([]),
|
109
110
|
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
110
|
-
|
111
|
-
|
111
|
+
flatItems = _useState14[0],
|
112
|
+
setFlatItems = _useState14[1];
|
112
113
|
|
113
114
|
(0, _react.useEffect)(function () {
|
114
|
-
var entries = items.entries;
|
115
|
-
|
115
|
+
var entries = items.entries; // flatItems is just a single array of all entries including children
|
116
|
+
|
117
|
+
setFlatItems((0, _addSelectUtils.flatten)(entries)); // multi select with nested data needs to be normalized
|
116
118
|
|
117
119
|
if (multi && entries.find(function (entry) {
|
118
120
|
return entry.children;
|
@@ -191,10 +193,25 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
191
193
|
return item.title.toLowerCase().includes(searchTerm);
|
192
194
|
});
|
193
195
|
return results;
|
196
|
+
};
|
197
|
+
|
198
|
+
var getDisplayItems = function getDisplayItems() {
|
199
|
+
if (useNormalizedItems) {
|
200
|
+
// when global search is in use the results are not in column format
|
201
|
+
if (searchTerm) {
|
202
|
+
return flatItems.filter(function (item) {
|
203
|
+
return item.title.toLowerCase().includes(searchTerm);
|
204
|
+
});
|
205
|
+
}
|
206
|
+
|
207
|
+
return getPages();
|
208
|
+
}
|
209
|
+
|
210
|
+
return getFilteredItems();
|
194
211
|
}; // only multi select with hierarchy requires the the normalized items
|
195
212
|
|
196
213
|
|
197
|
-
var itemsToDisplay =
|
214
|
+
var itemsToDisplay = getDisplayItems();
|
198
215
|
var commonListProps = {
|
199
216
|
multi: multi,
|
200
217
|
multiSelection: multiSelection,
|
@@ -231,14 +248,41 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
231
248
|
};
|
232
249
|
var sidebarProps = {
|
233
250
|
influencerTitle: influencerTitle,
|
234
|
-
items:
|
251
|
+
items: flatItems,
|
235
252
|
multiSelection: multiSelection,
|
236
253
|
noSelectionDescription: noSelectionDescription,
|
237
254
|
noSelectionTitle: noSelectionTitle,
|
238
255
|
removeIconDescription: removeIconDescription,
|
239
256
|
setMultiSelection: setMultiSelection
|
240
257
|
};
|
241
|
-
var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
|
258
|
+
var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
|
259
|
+
|
260
|
+
var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
|
261
|
+
if (searchTerm) {
|
262
|
+
return false;
|
263
|
+
}
|
264
|
+
|
265
|
+
if (path.length) {
|
266
|
+
return true;
|
267
|
+
}
|
268
|
+
|
269
|
+
return false;
|
270
|
+
};
|
271
|
+
|
272
|
+
var setShowTags = function setShowTags() {
|
273
|
+
if (searchTerm) {
|
274
|
+
return true;
|
275
|
+
}
|
276
|
+
|
277
|
+
if (useNormalizedItems) {
|
278
|
+
return false;
|
279
|
+
}
|
280
|
+
|
281
|
+
return true;
|
282
|
+
};
|
283
|
+
|
284
|
+
var showBreadsCrumbs = setShowBreadsCrumbs();
|
285
|
+
var showTags = setShowTags(); // main content
|
242
286
|
|
243
287
|
var body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
244
288
|
className: "".concat(blockClass, "__header")
|
@@ -250,16 +294,16 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
250
294
|
onChange: handleSearch
|
251
295
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
252
296
|
className: "".concat(blockClass, "__tag-container")
|
253
|
-
},
|
297
|
+
}, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
|
254
298
|
itemsLabel: itemsLabel,
|
255
299
|
path: path,
|
256
300
|
setPath: setPath
|
257
301
|
}) : /*#__PURE__*/_react.default.createElement("p", {
|
258
302
|
className: "".concat(blockClass, "__tag-container-label")
|
259
|
-
}, itemsLabel),
|
303
|
+
}, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {
|
260
304
|
type: "gray",
|
261
305
|
size: "sm"
|
262
|
-
}, itemsToDisplay.length))), useNormalizedItems ? /*#__PURE__*/_react.default.createElement("div", {
|
306
|
+
}, itemsToDisplay.length))), useNormalizedItems && !searchTerm ? /*#__PURE__*/_react.default.createElement("div", {
|
263
307
|
className: "".concat(blockClass, "__columns")
|
264
308
|
}, itemsToDisplay.map(function (page, idx) {
|
265
309
|
var _path;
|
@@ -271,7 +315,8 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
271
315
|
columnInputPlaceholder: columnInputPlaceholder
|
272
316
|
}));
|
273
317
|
})) : /*#__PURE__*/_react.default.createElement("div", null, itemsToDisplay.length > 0 ? /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, commonListProps, {
|
274
|
-
filteredItems: itemsToDisplay
|
318
|
+
filteredItems: itemsToDisplay,
|
319
|
+
modifiers: items === null || items === void 0 ? void 0 : items.modifiers
|
275
320
|
})) : /*#__PURE__*/_react.default.createElement("div", {
|
276
321
|
className: "".concat(blockClass, "__body")
|
277
322
|
}, /*#__PURE__*/_react.default.createElement(_NoDataEmptyState.NoDataEmptyState, {
|
@@ -295,6 +340,11 @@ AddSelect.propTypes = {
|
|
295
340
|
influencerTitle: _propTypes.default.string,
|
296
341
|
inputPlaceholder: _propTypes.default.string,
|
297
342
|
items: _propTypes.default.shape({
|
343
|
+
modifiers: _propTypes.default.shape({
|
344
|
+
label: _propTypes.default.string,
|
345
|
+
options: _propTypes.default.array,
|
346
|
+
property: _propTypes.default.string
|
347
|
+
}),
|
298
348
|
sortBy: _propTypes.default.array,
|
299
349
|
filterBy: _propTypes.default.array,
|
300
350
|
entries: _propTypes.default.arrayOf(_propTypes.default.shape({
|
@@ -317,6 +367,7 @@ AddSelect.propTypes = {
|
|
317
367
|
onSubmitButtonText: _propTypes.default.string,
|
318
368
|
open: _propTypes.default.bool,
|
319
369
|
removeIconDescription: _propTypes.default.string,
|
370
|
+
searchResultsLabel: _propTypes.default.string,
|
320
371
|
textInputLabel: _propTypes.default.string,
|
321
372
|
title: _propTypes.default.string
|
322
373
|
};
|
@@ -238,7 +238,6 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
|
|
238
238
|
size: "sm"
|
239
239
|
}, colItems.length))
|
240
240
|
})), /*#__PURE__*/_react.default.createElement(_AddSelectList.AddSelectList, (0, _extends2.default)({}, props, {
|
241
|
-
inColumn: true,
|
242
241
|
filteredItems: colItems,
|
243
242
|
setMultiSelection: setMultiSelection,
|
244
243
|
multiSelection: multiSelection
|
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
});
|
8
8
|
exports.AddSelectList = void 0;
|
9
9
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
|
+
|
10
12
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
11
13
|
|
12
14
|
var _react = _interopRequireDefault(require("react"));
|
@@ -17,6 +19,8 @@ var _iconsReact = require("@carbon/icons-react");
|
|
17
19
|
|
18
20
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
19
21
|
|
22
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
23
|
+
|
20
24
|
var _settings = require("../../settings");
|
21
25
|
|
22
26
|
//
|
@@ -29,7 +33,7 @@ var componentName = 'AddSelectList';
|
|
29
33
|
|
30
34
|
var AddSelectList = function AddSelectList(_ref) {
|
31
35
|
var filteredItems = _ref.filteredItems,
|
32
|
-
|
36
|
+
modifiers = _ref.modifiers,
|
33
37
|
multi = _ref.multi,
|
34
38
|
multiSelection = _ref.multiSelection,
|
35
39
|
path = _ref.path,
|
@@ -113,32 +117,50 @@ var AddSelectList = function AddSelectList(_ref) {
|
|
113
117
|
}
|
114
118
|
};
|
115
119
|
|
120
|
+
var isSelected = function isSelected(id) {
|
121
|
+
return multiSelection.includes(id);
|
122
|
+
};
|
123
|
+
|
116
124
|
return /*#__PURE__*/_react.default.createElement("div", {
|
117
125
|
className: "".concat(blockClass, "-wrapper")
|
118
126
|
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
|
119
127
|
selection: true,
|
120
128
|
className: "".concat(blockClass)
|
121
129
|
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredItems.map(function (item) {
|
130
|
+
var _modifiers$options;
|
131
|
+
|
122
132
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
|
123
133
|
key: item.id,
|
124
|
-
className: "".concat(blockClass, "-row")
|
134
|
+
className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
|
125
135
|
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, {
|
126
136
|
className: "".concat(blockClass, "-cell")
|
127
137
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
128
138
|
className: "".concat(blockClass, "-cell-wrapper")
|
129
|
-
}, multi ? /*#__PURE__*/_react.default.createElement(
|
130
|
-
className: "".concat(blockClass, "-checkbox")
|
139
|
+
}, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
140
|
+
className: "".concat(blockClass, "-checkbox")
|
141
|
+
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
|
131
142
|
onChange: function onChange(checked) {
|
132
143
|
return handleMultiSelection(item.id, checked);
|
133
144
|
},
|
134
|
-
labelText:
|
135
|
-
className: "".concat(blockClass, "-cell-title")
|
136
|
-
}, item.title), /*#__PURE__*/_react.default.createElement("span", {
|
137
|
-
className: "".concat(blockClass, "-cell-subtitle")
|
138
|
-
}, item.subtitle)) : item.title,
|
145
|
+
labelText: item.title,
|
139
146
|
id: item.id,
|
140
|
-
checked:
|
141
|
-
|
147
|
+
checked: isSelected(item.id),
|
148
|
+
className: "".concat(blockClass, "-checkbox-wrapper")
|
149
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
150
|
+
className: "".concat(blockClass, "-checkbox-label-text")
|
151
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
152
|
+
className: "".concat(blockClass, "-cell-title")
|
153
|
+
}, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
|
154
|
+
className: "".concat(blockClass, "-cell-subtitle")
|
155
|
+
}, item.subtitle))), (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Dropdown, {
|
156
|
+
id: "".concat(item.id, "-modifier"),
|
157
|
+
type: "inline",
|
158
|
+
items: modifiers === null || modifiers === void 0 ? void 0 : modifiers.options,
|
159
|
+
light: true,
|
160
|
+
label: modifiers === null || modifiers === void 0 ? void 0 : modifiers.label,
|
161
|
+
disabled: !isSelected(item.id),
|
162
|
+
className: "".concat(blockClass, "-dropdown")
|
163
|
+
})) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
|
142
164
|
className: "".concat(blockClass, "-radio"),
|
143
165
|
name: "add-select-selections",
|
144
166
|
id: item.id,
|
@@ -157,7 +179,7 @@ var AddSelectList = function AddSelectList(_ref) {
|
|
157
179
|
exports.AddSelectList = AddSelectList;
|
158
180
|
AddSelectList.propTypes = {
|
159
181
|
filteredItems: _propTypes.default.array,
|
160
|
-
|
182
|
+
modifiers: _propTypes.default.object,
|
161
183
|
multi: _propTypes.default.bool,
|
162
184
|
multiSelection: _propTypes.default.array,
|
163
185
|
path: _propTypes.default.array,
|