@commercetools-uikit/data-table-manager 12.2.1 → 12.2.5
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.
|
@@ -13,10 +13,9 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
|
|
|
13
13
|
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
14
14
|
var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
|
|
15
15
|
require('prop-types');
|
|
16
|
-
var
|
|
16
|
+
var react = require('react');
|
|
17
17
|
var Spacings = require('@commercetools-uikit/spacings');
|
|
18
|
-
var
|
|
19
|
-
var _extends = require('@babel/runtime-corejs3/helpers/extends');
|
|
18
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
20
19
|
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
21
20
|
var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
|
|
22
21
|
var _styled = require('@emotion/styled/base');
|
|
@@ -56,7 +55,6 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
|
|
|
56
55
|
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
|
|
57
56
|
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
|
|
58
57
|
var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
|
|
59
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
60
58
|
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
|
|
61
59
|
var _styled__default = /*#__PURE__*/_interopDefault(_styled);
|
|
62
60
|
var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
|
|
@@ -85,7 +83,7 @@ var UPDATE_ACTIONS = {
|
|
|
85
83
|
var COLUMN_MANAGER = 'columnManager';
|
|
86
84
|
var DISPLAY_SETTINGS = 'displaySettings';
|
|
87
85
|
|
|
88
|
-
var HeaderContainer = _styled__default[
|
|
86
|
+
var HeaderContainer = _styled__default["default"]("div", {
|
|
89
87
|
target: "e16v1mgb0"
|
|
90
88
|
} )({
|
|
91
89
|
name: "1bhm8h2",
|
|
@@ -94,35 +92,46 @@ var HeaderContainer = _styled__default['default']("div", {
|
|
|
94
92
|
|
|
95
93
|
var SettingsContainer = function SettingsContainer(props) {
|
|
96
94
|
var intl = reactIntl.useIntl();
|
|
97
|
-
return
|
|
98
|
-
isDefaultClosed: false
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
95
|
+
return jsxRuntime.jsx(CollapsibleMotion__default["default"], {
|
|
96
|
+
isDefaultClosed: false,
|
|
97
|
+
children: function children(_ref) {
|
|
98
|
+
var registerContentNode = _ref.registerContentNode,
|
|
99
|
+
containerStyles = _ref.containerStyles;
|
|
100
|
+
return jsxRuntime.jsx(Card__default["default"], {
|
|
101
|
+
type: "flat",
|
|
102
|
+
theme: props.containerTheme,
|
|
103
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
104
|
+
scale: "xs",
|
|
105
|
+
children: [jsxRuntime.jsxs(HeaderContainer, {
|
|
106
|
+
children: [jsxRuntime.jsx(Text__default["default"].Headline, {
|
|
107
|
+
as: "h3",
|
|
108
|
+
intlMessage: props.title
|
|
109
|
+
}), jsxRuntime.jsx(AccessibleButton__default["default"], {
|
|
110
|
+
onClick: props.onClose,
|
|
111
|
+
label: intl.formatMessage(props.closeButtonLabel),
|
|
112
|
+
children: jsxRuntime.jsx(icons.CloseIcon, {
|
|
113
|
+
size: "medium"
|
|
114
|
+
})
|
|
115
|
+
})]
|
|
116
|
+
}), jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
117
|
+
scale: "xs",
|
|
118
|
+
children: [jsxRuntime.jsx(Spacings__default["default"].Inset, {
|
|
119
|
+
scale: "s",
|
|
120
|
+
children: jsxRuntime.jsx("div", {
|
|
121
|
+
style: containerStyles,
|
|
122
|
+
children: jsxRuntime.jsx("div", {
|
|
123
|
+
ref: registerContentNode,
|
|
124
|
+
children: props.children
|
|
125
|
+
})
|
|
126
|
+
})
|
|
127
|
+
}), (props.secondaryButton || props.primaryButton) && jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
128
|
+
justifyContent: "flex-end",
|
|
129
|
+
children: [props.secondaryButton, props.primaryButton]
|
|
130
|
+
})]
|
|
131
|
+
})]
|
|
132
|
+
})
|
|
133
|
+
});
|
|
134
|
+
}
|
|
126
135
|
});
|
|
127
136
|
};
|
|
128
137
|
|
|
@@ -131,8 +140,9 @@ SettingsContainer.propTypes = {};
|
|
|
131
140
|
SettingsContainer.defaultProps = {
|
|
132
141
|
containerTheme: 'dark'
|
|
133
142
|
};
|
|
143
|
+
var SettingsContainer$1 = SettingsContainer;
|
|
134
144
|
|
|
135
|
-
var messages = reactIntl.defineMessages({
|
|
145
|
+
var messages$3 = reactIntl.defineMessages({
|
|
136
146
|
title: {
|
|
137
147
|
id: 'UIKit.DataTableManager.DensityManager.title',
|
|
138
148
|
description: 'Title for the density manager component.',
|
|
@@ -184,51 +194,73 @@ var DensityManager = function DensityManager(props) {
|
|
|
184
194
|
var intl = reactIntl.useIntl();
|
|
185
195
|
var textWrappingOption = props.isWrappingText ? SHOW_HIDE_ON_DEMAND : WRAPPED_TEXT_VISIBLE;
|
|
186
196
|
var densityDisplayOption = props.isCondensed ? DENSITY_COMPACT : DENSITY_DEFAULT;
|
|
187
|
-
return
|
|
188
|
-
title: messages.title,
|
|
189
|
-
closeButtonLabel: messages.closeButtonLabel,
|
|
197
|
+
return jsxRuntime.jsx(SettingsContainer$1, {
|
|
198
|
+
title: messages$3.title,
|
|
199
|
+
closeButtonLabel: messages$3.closeButtonLabel,
|
|
190
200
|
onClose: props.onClose,
|
|
191
201
|
primaryButton: props.primaryButton,
|
|
192
202
|
secondaryButton: props.secondaryButton,
|
|
193
|
-
containerTheme: props.managerTheme
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
203
|
+
containerTheme: props.managerTheme,
|
|
204
|
+
children: jsxRuntime.jsxs(Grid__default["default"], {
|
|
205
|
+
gridGap: designSystem.customProperties.spacingM,
|
|
206
|
+
gridTemplateColumns: "repeat(2, 1fr)",
|
|
207
|
+
children: [jsxRuntime.jsx(Grid__default["default"].Item, {
|
|
208
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
209
|
+
scale: "s",
|
|
210
|
+
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
211
|
+
title: intl.formatMessage(messages$3.textWrappingSubtitle)
|
|
212
|
+
}), jsxRuntime.jsxs(AccessibleHiden__default["default"], {
|
|
213
|
+
children: [jsxRuntime.jsx("label", {
|
|
214
|
+
htmlFor: "text-wrapping-0",
|
|
215
|
+
children: "Select radio option: display full text"
|
|
216
|
+
}), jsxRuntime.jsx("label", {
|
|
217
|
+
htmlFor: "text-wrapping-1",
|
|
218
|
+
children: "Select radio option: display full previews"
|
|
219
|
+
})]
|
|
220
|
+
}), jsxRuntime.jsxs(RadioInput__default["default"].Group, {
|
|
221
|
+
id: "text-wrapping",
|
|
222
|
+
name: "text-wrapping",
|
|
223
|
+
value: textWrappingOption,
|
|
224
|
+
onChange: props.onTextWrappingChange,
|
|
225
|
+
children: [jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
226
|
+
value: WRAPPED_TEXT_VISIBLE,
|
|
227
|
+
children: intl.formatMessage(messages$3.textWrappingAllWrapVisibleOption)
|
|
228
|
+
}), jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
229
|
+
value: SHOW_HIDE_ON_DEMAND,
|
|
230
|
+
children: intl.formatMessage(messages$3.textWrappingShowHideOnDemandOption)
|
|
231
|
+
})]
|
|
232
|
+
})]
|
|
233
|
+
})
|
|
234
|
+
}), jsxRuntime.jsx(Grid__default["default"].Item, {
|
|
235
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
236
|
+
scale: "s",
|
|
237
|
+
children: [jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
238
|
+
title: intl.formatMessage(messages$3.densityDisplaySubtitle)
|
|
239
|
+
}), jsxRuntime.jsxs(AccessibleHiden__default["default"], {
|
|
240
|
+
children: [jsxRuntime.jsx("label", {
|
|
241
|
+
htmlFor: "density-display-0",
|
|
242
|
+
children: "Select radio option: density default"
|
|
243
|
+
}), jsxRuntime.jsx("label", {
|
|
244
|
+
htmlFor: "density-display-1",
|
|
245
|
+
children: "Select radio option: density compact"
|
|
246
|
+
})]
|
|
247
|
+
}), jsxRuntime.jsxs(RadioInput__default["default"].Group, {
|
|
248
|
+
id: "density-display",
|
|
249
|
+
name: "density-display",
|
|
250
|
+
value: densityDisplayOption,
|
|
251
|
+
onChange: props.onDensityDisplayChange,
|
|
252
|
+
children: [jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
253
|
+
value: DENSITY_DEFAULT,
|
|
254
|
+
children: intl.formatMessage(messages$3.densityDisplayDefaultOption)
|
|
255
|
+
}), jsxRuntime.jsx(RadioInput__default["default"].Option, {
|
|
256
|
+
value: DENSITY_COMPACT,
|
|
257
|
+
children: intl.formatMessage(messages$3.densityDisplayCompactOption)
|
|
258
|
+
})]
|
|
259
|
+
})]
|
|
260
|
+
})
|
|
261
|
+
})]
|
|
262
|
+
})
|
|
263
|
+
});
|
|
232
264
|
};
|
|
233
265
|
|
|
234
266
|
DensityManager.displayName = 'DensityManager';
|
|
@@ -237,52 +269,68 @@ DensityManager.defaultProps = {
|
|
|
237
269
|
isWrappingText: false
|
|
238
270
|
};
|
|
239
271
|
DensityManager.propTypes = {};
|
|
272
|
+
var DisplaySettingsManager = DensityManager;
|
|
240
273
|
|
|
241
|
-
var DraggingSmall = _styled__default[
|
|
274
|
+
var DraggingSmall = _styled__default["default"]("small", {
|
|
242
275
|
target: "ed3a5rx1"
|
|
243
276
|
} )({
|
|
244
277
|
name: "1fhyj3b",
|
|
245
278
|
styles: "&:hover{cursor:grab;}"
|
|
246
279
|
} );
|
|
247
280
|
|
|
248
|
-
var DraggingContainer = _styled__default[
|
|
281
|
+
var DraggingContainer = _styled__default["default"]("div", {
|
|
249
282
|
target: "ed3a5rx0"
|
|
250
|
-
} )(DraggingSmall, ";");
|
|
283
|
+
} )(DraggingSmall, ";" + ("" ));
|
|
284
|
+
|
|
285
|
+
var DraggingContainer$1 = DraggingContainer;
|
|
286
|
+
|
|
287
|
+
function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
288
|
+
|
|
289
|
+
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
251
290
|
|
|
252
291
|
var DraggableTag = function DraggableTag(props) {
|
|
253
292
|
var handleRemoveColumn = function handleRemoveColumn() {
|
|
254
293
|
return props.onRemove(props.index);
|
|
255
294
|
};
|
|
256
295
|
|
|
257
|
-
return
|
|
296
|
+
return jsxRuntime.jsx(reactBeautifulDnd.Draggable, {
|
|
258
297
|
draggableId: props.column.key,
|
|
259
298
|
index: props.index,
|
|
260
|
-
isDragDisabled: props.isDisabled
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
299
|
+
isDragDisabled: props.isDisabled,
|
|
300
|
+
children: function children(provided) {
|
|
301
|
+
return jsxRuntime.jsxs(Spacings__default["default"].Inset, {
|
|
302
|
+
scale: "xs",
|
|
303
|
+
children: [jsxRuntime.jsx(DraggingContainer$1, _objectSpread$3(_objectSpread$3(_objectSpread$3({
|
|
304
|
+
ref: provided.innerRef
|
|
305
|
+
}, provided.draggableProps), provided.dragHandleProps), {}, {
|
|
306
|
+
children: jsxRuntime.jsx(Tag__default["default"], {
|
|
307
|
+
onRemove: props.onRemove ? handleRemoveColumn : undefined,
|
|
308
|
+
isDisabled: props.isDisabled,
|
|
309
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
310
|
+
alignItems: "center",
|
|
311
|
+
children: [jsxRuntime.jsx(icons.DragIcon, {
|
|
312
|
+
"data-testid": "drag-icon",
|
|
313
|
+
size: "medium"
|
|
314
|
+
}), props.column.label]
|
|
315
|
+
})
|
|
316
|
+
})
|
|
317
|
+
})), provided.placeholder]
|
|
318
|
+
});
|
|
319
|
+
}
|
|
275
320
|
});
|
|
276
321
|
};
|
|
277
322
|
|
|
278
323
|
DraggableTag.displayName = 'DraggableTag';
|
|
279
324
|
DraggableTag.propTypes = {};
|
|
325
|
+
var DraggableTag$1 = DraggableTag;
|
|
280
326
|
|
|
281
|
-
var TagContainerEditable = _styled__default[
|
|
327
|
+
var TagContainerEditable = _styled__default["default"]("div", {
|
|
282
328
|
target: "ecy2q1d0"
|
|
283
|
-
} )("background-color:", designSystem.customProperties.backgroundColorForInput, ";border:", designSystem.customProperties.borderRadius1, " solid ", designSystem.customProperties.colorNeutral60, ";border-radius:", designSystem.customProperties.borderRadius6, ";padding:", designSystem.customProperties.spacingS, ";height:", designSystem.customProperties.constraint7, ";overflow:auto;");
|
|
329
|
+
} )("background-color:", designSystem.customProperties.backgroundColorForInput, ";border:", designSystem.customProperties.borderRadius1, " solid ", designSystem.customProperties.colorNeutral60, ";border-radius:", designSystem.customProperties.borderRadius6, ";padding:", designSystem.customProperties.spacingS, ";height:", designSystem.customProperties.constraint7, ";overflow:auto;" + ("" ));
|
|
284
330
|
|
|
285
|
-
var
|
|
331
|
+
var TagContainerEditable$1 = TagContainerEditable;
|
|
332
|
+
|
|
333
|
+
var messages$2 = reactIntl.defineMessages({
|
|
286
334
|
loadMoreAttributesHint: {
|
|
287
335
|
id: 'UIKit.DataTableManager.ColumnManager.DroppablePanel.loadMoreAttributesHint',
|
|
288
336
|
description: 'Indicate that the user can use the search input to load more attributes',
|
|
@@ -291,45 +339,52 @@ var messages$1 = reactIntl.defineMessages({
|
|
|
291
339
|
});
|
|
292
340
|
|
|
293
341
|
var DroppablePanel = function DroppablePanel(props) {
|
|
294
|
-
return
|
|
295
|
-
droppableId: props.droppableId
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
342
|
+
return jsxRuntime.jsx(reactBeautifulDnd.Droppable, {
|
|
343
|
+
droppableId: props.droppableId,
|
|
344
|
+
children: function children(provided) {
|
|
345
|
+
var _context;
|
|
346
|
+
|
|
347
|
+
return jsxRuntime.jsxs(TagContainerEditable$1, {
|
|
348
|
+
"data-testid": props.droppableId,
|
|
349
|
+
ref: provided.innerRef,
|
|
350
|
+
children: [props.columns.length === 0 ? jsxRuntime.jsx(Spacings__default["default"].Inset, {
|
|
351
|
+
scale: "s",
|
|
352
|
+
children: jsxRuntime.jsx(Text__default["default"].Detail, {
|
|
353
|
+
tone: "secondary",
|
|
354
|
+
children: props.noColumnsText
|
|
355
|
+
})
|
|
356
|
+
}) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
357
|
+
children: [_mapInstanceProperty__default["default"](_context = props.columns).call(_context, function (column, index) {
|
|
358
|
+
var _context2;
|
|
359
|
+
|
|
360
|
+
return jsxRuntime.jsx(DraggableTag$1, {
|
|
361
|
+
column: column,
|
|
362
|
+
index: index,
|
|
363
|
+
onRemove: props.onRemove ? function () {
|
|
364
|
+
var _context3, _context4, _context5;
|
|
365
|
+
|
|
366
|
+
return props.onRemove(_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty__default["default"](_context4 = props.columns).call(_context4, 0, index)), _toConsumableArray(_sliceInstanceProperty__default["default"](_context5 = props.columns).call(_context5, index + 1))));
|
|
367
|
+
} : undefined,
|
|
368
|
+
isDisabled: props.isDisabled
|
|
369
|
+
}, _concatInstanceProperty__default["default"](_context2 = "".concat(column.key, "-")).call(_context2, index));
|
|
370
|
+
}), props.isSearchable && jsxRuntime.jsx(Spacings__default["default"].Inset, {
|
|
371
|
+
scale: "xs",
|
|
372
|
+
children: jsxRuntime.jsx(Text__default["default"].Detail, {
|
|
373
|
+
tone: "secondary",
|
|
374
|
+
intlMessage: messages$2.loadMoreAttributesHint
|
|
375
|
+
})
|
|
376
|
+
})]
|
|
377
|
+
}), provided.placeholder]
|
|
319
378
|
});
|
|
320
|
-
}
|
|
321
|
-
scale: "xs"
|
|
322
|
-
}, react.jsx(Text__default['default'].Detail, {
|
|
323
|
-
tone: "secondary",
|
|
324
|
-
intlMessage: messages$1.loadMoreAttributesHint
|
|
325
|
-
}))), provided.placeholder);
|
|
379
|
+
}
|
|
326
380
|
});
|
|
327
381
|
};
|
|
328
382
|
|
|
329
383
|
DroppablePanel.displayName = 'DroppablePanel';
|
|
330
384
|
DroppablePanel.propTypes = {};
|
|
385
|
+
var DroppablePanel$1 = DroppablePanel;
|
|
331
386
|
|
|
332
|
-
var messages$
|
|
387
|
+
var messages$1 = reactIntl.defineMessages({
|
|
333
388
|
title: {
|
|
334
389
|
id: 'UIKit.DataTableManager.ColumnManager.title',
|
|
335
390
|
description: 'Title for the column manager component.',
|
|
@@ -365,11 +420,15 @@ var messages$2 = reactIntl.defineMessages({
|
|
|
365
420
|
var HIDDEN_COLUMNS_PANEL = 'hidden-columns-panel';
|
|
366
421
|
var SELECTED_COLUMNS_PANEL = 'selected-columns-panel';
|
|
367
422
|
|
|
368
|
-
var
|
|
423
|
+
function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
424
|
+
|
|
425
|
+
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys$2(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
426
|
+
|
|
427
|
+
var DroppableContainer = _styled__default["default"]("div", {
|
|
369
428
|
target: "e6ge22w0"
|
|
370
429
|
} )("width:100%;position:relative;max-width:", designSystem.customProperties.constraint10, ";cursor:", function (props) {
|
|
371
430
|
return props.isDragging ? 'grabbing' : 'auto';
|
|
372
|
-
}, ";");
|
|
431
|
+
}, ";" + ("" ));
|
|
373
432
|
|
|
374
433
|
var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColumns, selectedColumns, availableColumns, setIsDragging) {
|
|
375
434
|
setIsDragging(false); // Invalid drop destination, do nothing
|
|
@@ -380,7 +439,7 @@ var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColum
|
|
|
380
439
|
var _context;
|
|
381
440
|
|
|
382
441
|
if (dragResult.source.droppableId === HIDDEN_COLUMNS_PANEL) return;
|
|
383
|
-
onUpdateColumns(_concatInstanceProperty__default[
|
|
442
|
+
onUpdateColumns(_concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, 0, dragResult.source.index)), _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, dragResult.source.index + 1))));
|
|
384
443
|
} else {
|
|
385
444
|
var _context2, _context3;
|
|
386
445
|
|
|
@@ -389,25 +448,26 @@ var handleColumnsUpdate = function handleColumnsUpdate(dragResult, onUpdateColum
|
|
|
389
448
|
var isSwap = dragResult.source.droppableId === SELECTED_COLUMNS_PANEL;
|
|
390
449
|
var items = isSwap ? // remove the dragged item from its position if it is not coming from
|
|
391
450
|
// the hidden section (it is a swap)
|
|
392
|
-
_concatInstanceProperty__default[
|
|
451
|
+
_concatInstanceProperty__default["default"](_context2 = []).call(_context2, _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, 0, dragResult.source.index)), _toConsumableArray(_sliceInstanceProperty__default["default"](selectedColumns).call(selectedColumns, dragResult.source.index + 1))) : selectedColumns;
|
|
393
452
|
var columns = isSwap ? selectedColumns : availableColumns;
|
|
394
453
|
|
|
395
|
-
var draggedColumn = _findInstanceProperty__default[
|
|
454
|
+
var draggedColumn = _findInstanceProperty__default["default"](columns).call(columns, function (col) {
|
|
396
455
|
return col.key === dragResult.draggableId;
|
|
397
456
|
}); // push the column in the new position
|
|
398
457
|
|
|
399
458
|
|
|
400
|
-
onUpdateColumns(_concatInstanceProperty__default[
|
|
459
|
+
onUpdateColumns(_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, 0, dragResult.destination.index)), [draggedColumn], _toConsumableArray(_sliceInstanceProperty__default["default"](items).call(items, dragResult.destination.index))));
|
|
401
460
|
}
|
|
402
461
|
};
|
|
403
462
|
|
|
404
463
|
var DropdownIndicator = function DropdownIndicator() {
|
|
405
|
-
return
|
|
406
|
-
alignItems: "center"
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
464
|
+
return jsxRuntime.jsx(Spacings__default["default"].Inline, {
|
|
465
|
+
alignItems: "center",
|
|
466
|
+
children: jsxRuntime.jsx(icons.SearchIcon, {
|
|
467
|
+
scale: "medium",
|
|
468
|
+
color: "primary"
|
|
469
|
+
})
|
|
470
|
+
});
|
|
411
471
|
};
|
|
412
472
|
|
|
413
473
|
DropdownIndicator.displayName = 'DropdownIndicator';
|
|
@@ -424,7 +484,7 @@ var selectInputComponents = {
|
|
|
424
484
|
var ColumnSettingsManager = function ColumnSettingsManager(props) {
|
|
425
485
|
var intl = reactIntl.useIntl();
|
|
426
486
|
|
|
427
|
-
var _useState =
|
|
487
|
+
var _useState = react.useState(false),
|
|
428
488
|
_useState2 = _slicedToArray(_useState, 2),
|
|
429
489
|
isDragging = _useState2[0],
|
|
430
490
|
setIsDragging = _useState2[1];
|
|
@@ -435,88 +495,100 @@ var ColumnSettingsManager = function ColumnSettingsManager(props) {
|
|
|
435
495
|
setIsDragging(true);
|
|
436
496
|
};
|
|
437
497
|
|
|
438
|
-
var hiddenColumns =
|
|
439
|
-
return differenceWith__default[
|
|
498
|
+
var hiddenColumns = react.useMemo(function () {
|
|
499
|
+
return differenceWith__default["default"](props.availableColumns, props.selectedColumns, function (a, b) {
|
|
440
500
|
return a.key === b.key;
|
|
441
501
|
});
|
|
442
502
|
}, [props.availableColumns, props.selectedColumns]);
|
|
443
|
-
var handleDragEnd =
|
|
503
|
+
var handleDragEnd = react.useCallback(function (dragResult) {
|
|
444
504
|
return handleColumnsUpdate(dragResult, props.onUpdateColumns, props.selectedColumns, props.availableColumns, setIsDragging);
|
|
445
505
|
}, [props.onUpdateColumns, props.selectedColumns, props.availableColumns]);
|
|
446
|
-
var handleInputChange =
|
|
506
|
+
var handleInputChange = react.useCallback(function (input) {
|
|
447
507
|
return (// loadOptions is not invoked when input is empty
|
|
448
508
|
!input.length && searchHiddenColumns(input)
|
|
449
509
|
);
|
|
450
510
|
}, [searchHiddenColumns]);
|
|
451
|
-
return
|
|
452
|
-
title: messages$
|
|
453
|
-
closeButtonLabel: messages$
|
|
511
|
+
return jsxRuntime.jsx(SettingsContainer$1, {
|
|
512
|
+
title: messages$1.title,
|
|
513
|
+
closeButtonLabel: messages$1.closeButtonLabel,
|
|
454
514
|
onClose: props.onClose,
|
|
455
515
|
primaryButton: props.primaryButton,
|
|
456
516
|
secondaryButton: props.secondaryButton,
|
|
457
|
-
containerTheme: props.managerTheme
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
517
|
+
containerTheme: props.managerTheme,
|
|
518
|
+
children: jsxRuntime.jsx(reactBeautifulDnd.DragDropContext, {
|
|
519
|
+
onDragEnd: handleDragEnd,
|
|
520
|
+
onDragStart: handleDragStart,
|
|
521
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
522
|
+
scale: "m",
|
|
523
|
+
children: [jsxRuntime.jsx(DroppableContainer, {
|
|
524
|
+
isDragging: isDragging,
|
|
525
|
+
"aria-labelledby": "hidden-columns",
|
|
526
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
527
|
+
children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
528
|
+
scale: "xs",
|
|
529
|
+
alignItems: "center",
|
|
530
|
+
children: [jsxRuntime.jsx(icons.EyeCrossedIcon, {
|
|
531
|
+
size: "medium"
|
|
532
|
+
}), jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
533
|
+
id: "hidden-columns",
|
|
534
|
+
title: intl.formatMessage(messages$1.hiddenColumns)
|
|
535
|
+
})]
|
|
536
|
+
}), props.areHiddenColumnsSearchable && jsxRuntime.jsx(AsyncSelectInput__default["default"], _objectSpread$2(_objectSpread$2({}, props.searchHiddenColumnsPlaceholder ? {
|
|
537
|
+
placeholder: props.searchHiddenColumnsPlaceholder
|
|
538
|
+
} : undefined), {}, {
|
|
539
|
+
cacheOptions: false,
|
|
540
|
+
onChange: function onChange() {// to avoid prop-types error
|
|
541
|
+
// as `onChange` is a required prop in
|
|
542
|
+
// `AsyncSelectInput`
|
|
543
|
+
} // loadOptions is used instead of onInputChange
|
|
544
|
+
// because the loading indicator is displayed
|
|
545
|
+
// only when loadOptions is invoked
|
|
546
|
+
,
|
|
547
|
+
loadOptions: debounce__default["default"](searchHiddenColumns, 300),
|
|
548
|
+
onInputChange: handleInputChange,
|
|
549
|
+
components: selectInputComponents
|
|
550
|
+
})), jsxRuntime.jsx(DroppablePanel$1, {
|
|
551
|
+
droppableId: HIDDEN_COLUMNS_PANEL,
|
|
552
|
+
"data-testid": HIDDEN_COLUMNS_PANEL,
|
|
553
|
+
noColumnsText: intl.formatMessage(messages$1.noHiddenColumnsToShow),
|
|
554
|
+
columns: hiddenColumns,
|
|
555
|
+
isSearchable: props.areHiddenColumnsSearchable
|
|
556
|
+
})]
|
|
557
|
+
})
|
|
558
|
+
}), jsxRuntime.jsx(DroppableContainer, {
|
|
559
|
+
isDragging: isDragging,
|
|
560
|
+
"aria-labelledby": "visible-columns",
|
|
561
|
+
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
562
|
+
children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
563
|
+
scale: "xs",
|
|
564
|
+
alignItems: "center",
|
|
565
|
+
children: [jsxRuntime.jsx(icons.EyeIcon, {
|
|
566
|
+
size: "medium"
|
|
567
|
+
}), jsxRuntime.jsx(FieldLabel__default["default"], {
|
|
568
|
+
id: "visible-columns",
|
|
569
|
+
title: intl.formatMessage(messages$1.visibleColumns)
|
|
570
|
+
})]
|
|
571
|
+
}), jsxRuntime.jsx(DroppablePanel$1, {
|
|
572
|
+
droppableId: SELECTED_COLUMNS_PANEL,
|
|
573
|
+
"data-testid": SELECTED_COLUMNS_PANEL,
|
|
574
|
+
noColumnsText: intl.formatMessage(messages$1.noSelectedColumnsToShow),
|
|
575
|
+
columns: props.selectedColumns,
|
|
576
|
+
onRemove: props.onUpdateColumns
|
|
577
|
+
})]
|
|
578
|
+
})
|
|
579
|
+
})]
|
|
580
|
+
})
|
|
581
|
+
})
|
|
582
|
+
});
|
|
512
583
|
};
|
|
513
584
|
ColumnSettingsManager.displayName = 'ColumnSettingsManager';
|
|
514
585
|
ColumnSettingsManager.propTypes = {};
|
|
515
586
|
ColumnSettingsManager.defaultProps = {
|
|
516
587
|
availableColumns: []
|
|
517
588
|
};
|
|
589
|
+
var ColumnSettingsManager$1 = ColumnSettingsManager;
|
|
518
590
|
|
|
519
|
-
var messages
|
|
591
|
+
var messages = reactIntl.defineMessages({
|
|
520
592
|
placeholder: {
|
|
521
593
|
id: 'UIKit.DataTableManager.TableSettings.placeholder',
|
|
522
594
|
description: 'Placeholder for the table settings select component.',
|
|
@@ -534,15 +606,15 @@ var messages$3 = reactIntl.defineMessages({
|
|
|
534
606
|
}
|
|
535
607
|
});
|
|
536
608
|
|
|
537
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default[
|
|
609
|
+
function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
538
610
|
|
|
539
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default[
|
|
611
|
+
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$1(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
540
612
|
|
|
541
|
-
var SelectContainer = _styled__default[
|
|
613
|
+
var SelectContainer = _styled__default["default"]("div", {
|
|
542
614
|
target: "eh8k7x01"
|
|
543
|
-
} )("width:", designSystem.customProperties.constraint4, ";");
|
|
615
|
+
} )("width:", designSystem.customProperties.constraint4, ";" + ("" ));
|
|
544
616
|
|
|
545
|
-
var TopBarContainer = _styled__default[
|
|
617
|
+
var TopBarContainer = _styled__default["default"]("div", {
|
|
546
618
|
target: "eh8k7x00"
|
|
547
619
|
} )({
|
|
548
620
|
name: "1ff36h2",
|
|
@@ -555,23 +627,23 @@ var getDropdownOptions = function getDropdownOptions(_ref) {
|
|
|
555
627
|
var areColumnSettingsEnabled = _ref.areColumnSettingsEnabled,
|
|
556
628
|
areDisplaySettingsEnabled = _ref.areDisplaySettingsEnabled,
|
|
557
629
|
formatMessage = _ref.formatMessage;
|
|
558
|
-
return _concatInstanceProperty__default[
|
|
630
|
+
return _concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(areColumnSettingsEnabled ? [{
|
|
559
631
|
value: COLUMN_MANAGER,
|
|
560
|
-
label: formatMessage(messages
|
|
632
|
+
label: formatMessage(messages.columnManagerOption)
|
|
561
633
|
}] : []), _toConsumableArray(areDisplaySettingsEnabled ? [{
|
|
562
634
|
value: DISPLAY_SETTINGS,
|
|
563
|
-
label: formatMessage(messages
|
|
635
|
+
label: formatMessage(messages.displaySettingsOption)
|
|
564
636
|
}] : []));
|
|
565
637
|
};
|
|
566
638
|
var getMappedColumns = function getMappedColumns() {
|
|
567
639
|
var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
568
|
-
return _reduceInstanceProperty__default[
|
|
569
|
-
return _objectSpread(_objectSpread({}, mappedColumns), {}, _defineProperty({}, column.key, column));
|
|
640
|
+
return _reduceInstanceProperty__default["default"](columns).call(columns, function (mappedColumns, column) {
|
|
641
|
+
return _objectSpread$1(_objectSpread$1({}, mappedColumns), {}, _defineProperty({}, column.key, column));
|
|
570
642
|
}, {});
|
|
571
643
|
};
|
|
572
644
|
var getSelectedColumns = function getSelectedColumns(mappedColumns) {
|
|
573
645
|
var visibleColumnsKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
574
|
-
return _mapInstanceProperty__default[
|
|
646
|
+
return _mapInstanceProperty__default["default"](visibleColumnsKeys).call(visibleColumnsKeys, function (columnKey) {
|
|
575
647
|
return mappedColumns[columnKey];
|
|
576
648
|
});
|
|
577
649
|
};
|
|
@@ -581,7 +653,7 @@ var DataTableSettings = function DataTableSettings(props) {
|
|
|
581
653
|
var areColumnSettingsEnabled = Boolean(props.columnManager && !props.columnManager.disableColumnManager);
|
|
582
654
|
var intl = reactIntl.useIntl();
|
|
583
655
|
|
|
584
|
-
var _useState =
|
|
656
|
+
var _useState = react.useState(null),
|
|
585
657
|
_useState2 = _slicedToArray(_useState, 2),
|
|
586
658
|
openedPanelId = _useState2[0],
|
|
587
659
|
setOpenedPanelId = _useState2[1];
|
|
@@ -603,93 +675,103 @@ var DataTableSettings = function DataTableSettings(props) {
|
|
|
603
675
|
return setOpenedPanelId(null);
|
|
604
676
|
};
|
|
605
677
|
|
|
606
|
-
return
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
}
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
678
|
+
return jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
679
|
+
children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
|
|
680
|
+
justifyContent: "space-between",
|
|
681
|
+
alignItems: "center",
|
|
682
|
+
children: [jsxRuntime.jsx(TopBarContainer, {
|
|
683
|
+
children: props.topBar
|
|
684
|
+
}), dropdownOptions.length > 0 && jsxRuntime.jsxs(SelectContainer, {
|
|
685
|
+
children: [jsxRuntime.jsx(AccessibleHiden__default["default"], {
|
|
686
|
+
children: jsxRuntime.jsx("label", {
|
|
687
|
+
htmlFor: "table-settings-dropdown",
|
|
688
|
+
children: "Open table manager dropdown"
|
|
689
|
+
})
|
|
690
|
+
}), jsxRuntime.jsx(SelectInput__default["default"], {
|
|
691
|
+
id: "table-settings-dropdown" // the dropdown always shows the placeholder as selecting an option
|
|
692
|
+
// will open the corresponding panel (column manager or display settings)
|
|
693
|
+
,
|
|
694
|
+
value: "",
|
|
695
|
+
placeholder: intl.formatMessage(messages.placeholder),
|
|
696
|
+
onChange: handleDropdownChange,
|
|
697
|
+
options: dropdownOptions,
|
|
698
|
+
iconLeft: jsxRuntime.jsx(icons.TableIcon, {})
|
|
699
|
+
})]
|
|
700
|
+
})]
|
|
701
|
+
}), openedPanelId === DISPLAY_SETTINGS && jsxRuntime.jsx(DisplaySettingsManager, _objectSpread$1(_objectSpread$1({}, props.displaySettings || {}), {}, {
|
|
702
|
+
onClose: handleSettingsPanelChange,
|
|
703
|
+
onDensityDisplayChange: function onDensityDisplayChange(event) {
|
|
704
|
+
props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_CONDENSED_UPDATE, event.target.value === DENSITY_COMPACT);
|
|
705
|
+
},
|
|
706
|
+
onTextWrappingChange: function onTextWrappingChange(event) {
|
|
707
|
+
props.onSettingsChange(UPDATE_ACTIONS.IS_TABLE_WRAPPING_TEXT_UPDATE, event.target.value === SHOW_HIDE_ON_DEMAND);
|
|
708
|
+
},
|
|
709
|
+
managerTheme: props.managerTheme
|
|
710
|
+
})), openedPanelId === COLUMN_MANAGER && jsxRuntime.jsx(ColumnSettingsManager$1, _objectSpread$1(_objectSpread$1({}, props.columnManager || {}), {}, {
|
|
711
|
+
availableColumns: props.columnManager.hideableColumns,
|
|
712
|
+
selectedColumns: selectedColumns,
|
|
713
|
+
onClose: handleSettingsPanelChange,
|
|
714
|
+
onUpdateColumns: function onUpdateColumns(nextVisibleColumns) {
|
|
715
|
+
var keysOfVisibleColumns = _mapInstanceProperty__default["default"](nextVisibleColumns).call(nextVisibleColumns, function (visibleColumn) {
|
|
716
|
+
return visibleColumn.key;
|
|
717
|
+
});
|
|
718
|
+
|
|
719
|
+
props.onSettingsChange(UPDATE_ACTIONS.COLUMNS_UPDATE, keysOfVisibleColumns);
|
|
720
|
+
},
|
|
721
|
+
managerTheme: props.managerTheme
|
|
722
|
+
}))]
|
|
723
|
+
});
|
|
642
724
|
};
|
|
643
725
|
|
|
644
726
|
DataTableSettings.displayName = 'DataTableSettings';
|
|
645
727
|
DataTableSettings.propTypes = {};
|
|
728
|
+
var DataTableSettings$1 = DataTableSettings;
|
|
646
729
|
|
|
647
|
-
function ownKeys
|
|
730
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
648
731
|
|
|
649
|
-
function _objectSpread
|
|
732
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
|
|
650
733
|
|
|
651
734
|
var DataTableManager = function DataTableManager(props) {
|
|
652
735
|
var areDisplaySettingsEnabled = Boolean(props.displaySettings && !props.displaySettings.disableDisplaySettings);
|
|
653
736
|
var isWrappingText = areDisplaySettingsEnabled && props.displaySettings.isWrappingText;
|
|
654
|
-
var columns =
|
|
737
|
+
var columns = react.useMemo(function () {
|
|
655
738
|
var _context;
|
|
656
739
|
|
|
657
|
-
return _mapInstanceProperty__default[
|
|
658
|
-
return _objectSpread
|
|
740
|
+
return _mapInstanceProperty__default["default"](_context = props.columns).call(_context, function (column) {
|
|
741
|
+
return _objectSpread(_objectSpread({}, column), {}, {
|
|
659
742
|
isTruncated: areDisplaySettingsEnabled ? isWrappingText : column.isTruncated
|
|
660
743
|
});
|
|
661
744
|
});
|
|
662
745
|
}, [areDisplaySettingsEnabled, props.columns, isWrappingText]);
|
|
663
|
-
return
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
746
|
+
return jsxRuntime.jsxs(Spacings__default["default"].Stack, {
|
|
747
|
+
children: [jsxRuntime.jsx(DataTableSettings$1, {
|
|
748
|
+
topBar: props.topBar,
|
|
749
|
+
onSettingsChange: props.onSettingsChange,
|
|
750
|
+
columnManager: props.columnManager,
|
|
751
|
+
displaySettings: props.displaySettings,
|
|
752
|
+
managerTheme: props.managerTheme
|
|
753
|
+
}), /*#__PURE__*/react.cloneElement(props.children, {
|
|
754
|
+
columns: columns,
|
|
755
|
+
isCondensed: areDisplaySettingsEnabled && props.displaySettings.isCondensed
|
|
756
|
+
})]
|
|
757
|
+
});
|
|
673
758
|
};
|
|
674
759
|
|
|
675
760
|
DataTableManager.propTypes = {};
|
|
676
761
|
DataTableManager.displayName = 'DataTableManager';
|
|
762
|
+
var DataTableManager$1 = DataTableManager;
|
|
677
763
|
|
|
678
|
-
// NOTE: This string will be replaced
|
|
679
|
-
var version =
|
|
764
|
+
// NOTE: This string will be replaced on build time with the package version.
|
|
765
|
+
var version = "12.2.5";
|
|
680
766
|
|
|
681
767
|
Object.defineProperty(exports, 'useRowSelection', {
|
|
682
768
|
enumerable: true,
|
|
683
|
-
get: function () {
|
|
684
|
-
return hooks.useRowSelection;
|
|
685
|
-
}
|
|
769
|
+
get: function () { return hooks.useRowSelection; }
|
|
686
770
|
});
|
|
687
771
|
Object.defineProperty(exports, 'useSorting', {
|
|
688
772
|
enumerable: true,
|
|
689
|
-
get: function () {
|
|
690
|
-
return hooks.useSorting;
|
|
691
|
-
}
|
|
773
|
+
get: function () { return hooks.useSorting; }
|
|
692
774
|
});
|
|
693
775
|
exports.UPDATE_ACTIONS = UPDATE_ACTIONS;
|
|
694
|
-
exports
|
|
776
|
+
exports["default"] = DataTableManager$1;
|
|
695
777
|
exports.version = version;
|