@desynova-digital/components 9.1.25 → 9.1.26
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/atoms/icon/icons.json +7 -0
- package/molecules/table/table.js +129 -94
- package/package.json +2 -2
package/atoms/icon/icons.json
CHANGED
|
@@ -1703,6 +1703,13 @@
|
|
|
1703
1703
|
],
|
|
1704
1704
|
"width": 26,
|
|
1705
1705
|
"height": 12
|
|
1706
|
+
},
|
|
1707
|
+
"customize-columns": {
|
|
1708
|
+
"paths": [
|
|
1709
|
+
"M0 3.2H8.8V4.8H0V3.2ZM0 1.6H8.8V0H0V1.6ZM0 8H5.6V6.4H0V8ZM12.008 5.496L12.576 4.928C12.888 4.616 13.392 4.616 13.704 4.928L14.272 5.496C14.584 5.808 14.584 6.312 14.272 6.624L13.704 7.192L12.008 5.496ZM11.44 6.064L7.2 10.304V12H8.896L13.136 7.76L11.44 6.064Z"
|
|
1710
|
+
],
|
|
1711
|
+
"width": 15,
|
|
1712
|
+
"height": 12
|
|
1706
1713
|
}
|
|
1707
1714
|
}
|
|
1708
1715
|
}
|
package/molecules/table/table.js
CHANGED
|
@@ -34,7 +34,7 @@ var _permissionIconMap = _interopRequireDefault(require("../../../tokens/permiss
|
|
|
34
34
|
var _TableErrorScreen = _interopRequireDefault(require("../../molecules/errorScreen/TableErrorScreen"));
|
|
35
35
|
var _inputText = _interopRequireDefault(require("../../atoms/inputText"));
|
|
36
36
|
var _Shimmer = _interopRequireDefault(require("../../atoms/loader/ShimmerComponent/Shimmer"));
|
|
37
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
37
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
38
38
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
39
39
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
40
40
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
@@ -50,14 +50,14 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
50
50
|
_this.nestedTable = [];
|
|
51
51
|
_this.actionIconCol = [];
|
|
52
52
|
var extraColumnsSchema = {
|
|
53
|
-
title:
|
|
54
|
-
field:
|
|
55
|
-
type:
|
|
53
|
+
title: "",
|
|
54
|
+
field: "extra_columns",
|
|
55
|
+
type: "extra_columns"
|
|
56
56
|
};
|
|
57
57
|
_this.columns = _this.columns.filter(function (item, idx) {
|
|
58
|
-
if (item.type ===
|
|
58
|
+
if (item.type === "action_icon") {
|
|
59
59
|
_this.actionIconCol.push(item);
|
|
60
|
-
} else if (item.type ===
|
|
60
|
+
} else if (item.type === "table") {
|
|
61
61
|
_this.nestedTable.push(item); // will maitain seperate table for nested
|
|
62
62
|
} else {
|
|
63
63
|
return item;
|
|
@@ -133,6 +133,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
133
133
|
console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
|
|
134
134
|
}
|
|
135
135
|
});
|
|
136
|
+
(0, _defineProperty2["default"])(_this, "editColumnsAction", function (e) {
|
|
137
|
+
var actionClickHandler = _this.props.actionClickHandler;
|
|
138
|
+
if (actionClickHandler) {
|
|
139
|
+
actionClickHandler("edit_columns");
|
|
140
|
+
_this.setState({
|
|
141
|
+
isAllRowsSelected: false
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
});
|
|
136
145
|
// actions elements
|
|
137
146
|
(0, _defineProperty2["default"])(_this, "actionElements", function (item, column, idx) {
|
|
138
147
|
if (item[column.field] === undefined) {
|
|
@@ -143,7 +152,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
143
152
|
}
|
|
144
153
|
var arrLength = item[column.field].length;
|
|
145
154
|
var elements = item[column.field].reduce(function (acc, curr) {
|
|
146
|
-
if (curr ===
|
|
155
|
+
if (curr === "play") {
|
|
147
156
|
arrLength -= 1;
|
|
148
157
|
return acc;
|
|
149
158
|
}
|
|
@@ -159,10 +168,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
159
168
|
});
|
|
160
169
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
161
170
|
className: "action-icons-cell"
|
|
162
|
-
}, item[column.field] && (0, _typeof2["default"])(item[column.field]) ===
|
|
171
|
+
}, item[column.field] && (0, _typeof2["default"])(item[column.field]) === "object" ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
163
172
|
style: {
|
|
164
|
-
display:
|
|
165
|
-
alignItems:
|
|
173
|
+
display: "flex",
|
|
174
|
+
alignItems: "center"
|
|
166
175
|
}
|
|
167
176
|
}, elements.first.map(function (action, i) {
|
|
168
177
|
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
@@ -170,7 +179,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
170
179
|
key: action,
|
|
171
180
|
className: "action-item-btn",
|
|
172
181
|
style: {
|
|
173
|
-
border:
|
|
182
|
+
border: "none"
|
|
174
183
|
},
|
|
175
184
|
appearance: "cta",
|
|
176
185
|
width: 20,
|
|
@@ -214,9 +223,9 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
214
223
|
(0, _defineProperty2["default"])(_this, "defaultCellRenderer", function (item, column, idx) {
|
|
215
224
|
var tableLoading = _this.props.tableLoading;
|
|
216
225
|
switch (column.type) {
|
|
217
|
-
case
|
|
226
|
+
case "video_src":
|
|
218
227
|
{
|
|
219
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
228
|
+
return /*#__PURE__*/_react["default"].createElement("div", {}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
220
229
|
className: "video-button-box"
|
|
221
230
|
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
222
231
|
theme: _this.props.theme,
|
|
@@ -232,7 +241,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
232
241
|
iconHeight: 10
|
|
233
242
|
}))));
|
|
234
243
|
}
|
|
235
|
-
case
|
|
244
|
+
case "extra_columns":
|
|
236
245
|
{
|
|
237
246
|
if (tableLoading) {
|
|
238
247
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -240,12 +249,12 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
240
249
|
width: "100%"
|
|
241
250
|
});
|
|
242
251
|
} else {
|
|
243
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
252
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
244
253
|
onClick: function onClick(e) {
|
|
245
254
|
_this.toggleExtraDetails(e, idx);
|
|
246
255
|
}
|
|
247
256
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
248
|
-
className: _this.state.showExtraRow === idx ?
|
|
257
|
+
className: _this.state.showExtraRow === idx ? "show-row" : "hide-row"
|
|
249
258
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
250
259
|
className: "open-close-extra"
|
|
251
260
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
@@ -260,7 +269,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
260
269
|
/**
|
|
261
270
|
* In link text we expect actions array in our items array to perform click functionality and data
|
|
262
271
|
*/
|
|
263
|
-
case
|
|
272
|
+
case "link_text":
|
|
264
273
|
{
|
|
265
274
|
if (tableLoading) {
|
|
266
275
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -276,10 +285,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
276
285
|
} else {
|
|
277
286
|
var isPlayable = Array.isArray(item.actions) ? item.actions.includes("play") : false;
|
|
278
287
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
279
|
-
className: "text-box ".concat(isPlayable ?
|
|
288
|
+
className: "text-box ".concat(isPlayable ? "asset-play" : ""),
|
|
280
289
|
title: item[column.field],
|
|
281
290
|
onClick: function onClick(e) {
|
|
282
|
-
return isPlayable ? _this.actionClickEvents(e,
|
|
291
|
+
return isPlayable ? _this.actionClickEvents(e, "play", idx) : e.preventDefault();
|
|
283
292
|
}
|
|
284
293
|
}, item[column.field].toString());
|
|
285
294
|
}
|
|
@@ -288,7 +297,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
288
297
|
/**
|
|
289
298
|
* In link field we don't expect any actions in our items array it always have click functionality
|
|
290
299
|
*/
|
|
291
|
-
case
|
|
300
|
+
case "link_field":
|
|
292
301
|
{
|
|
293
302
|
if (tableLoading) {
|
|
294
303
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -298,15 +307,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
298
307
|
} else {
|
|
299
308
|
var _isPlayable = true;
|
|
300
309
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
301
|
-
className: "text-box ".concat(_isPlayable ?
|
|
310
|
+
className: "text-box ".concat(_isPlayable ? "asset-play" : ""),
|
|
302
311
|
title: item[column.field],
|
|
303
312
|
onClick: function onClick(e) {
|
|
304
|
-
return _isPlayable ? _this.actionClickEvents(e,
|
|
313
|
+
return _isPlayable ? _this.actionClickEvents(e, "play", idx) : e.preventDefault();
|
|
305
314
|
}
|
|
306
315
|
}, item[column.field].toString());
|
|
307
316
|
}
|
|
308
317
|
}
|
|
309
|
-
case
|
|
318
|
+
case "action_icon":
|
|
310
319
|
if (tableLoading) {
|
|
311
320
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
312
321
|
height: "16px",
|
|
@@ -315,9 +324,9 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
315
324
|
} else {
|
|
316
325
|
return _this.actionElements(item, column, idx);
|
|
317
326
|
}
|
|
318
|
-
case
|
|
327
|
+
case "avatar":
|
|
319
328
|
return _this.getAvatar(item[column.field]);
|
|
320
|
-
case
|
|
329
|
+
case "date":
|
|
321
330
|
if (tableLoading) {
|
|
322
331
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
323
332
|
height: "16px",
|
|
@@ -327,11 +336,11 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
327
336
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
328
337
|
className: "text-box",
|
|
329
338
|
style: {
|
|
330
|
-
whiteSpace:
|
|
339
|
+
whiteSpace: "nowrap"
|
|
331
340
|
}
|
|
332
|
-
}, item[column.field] ? _dateTime["default"].toDateString(new Date(item[column.field]),
|
|
341
|
+
}, item[column.field] ? _dateTime["default"].toDateString(new Date(item[column.field]), "DD/MM/YYYY") : null);
|
|
333
342
|
}
|
|
334
|
-
case
|
|
343
|
+
case "time":
|
|
335
344
|
if (tableLoading) {
|
|
336
345
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
337
346
|
height: "16px",
|
|
@@ -341,11 +350,11 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
341
350
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
342
351
|
className: "text-box",
|
|
343
352
|
style: {
|
|
344
|
-
whiteSpace:
|
|
353
|
+
whiteSpace: "nowrap"
|
|
345
354
|
}
|
|
346
|
-
}, item[column.field] ? _dateTime["default"].toTimeString(new Date(item[column.field]),
|
|
355
|
+
}, item[column.field] ? _dateTime["default"].toTimeString(new Date(item[column.field]), "HH:MM AP") : null);
|
|
347
356
|
}
|
|
348
|
-
case
|
|
357
|
+
case "datetime":
|
|
349
358
|
if (tableLoading) {
|
|
350
359
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
351
360
|
height: "16px",
|
|
@@ -355,11 +364,11 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
355
364
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
356
365
|
className: "text-box",
|
|
357
366
|
style: {
|
|
358
|
-
whiteSpace:
|
|
367
|
+
whiteSpace: "nowrap"
|
|
359
368
|
}
|
|
360
369
|
}, item[column.field] ? _dateTime["default"].toDateTimeString(new Date(item[column.field])) : null);
|
|
361
370
|
}
|
|
362
|
-
case
|
|
371
|
+
case "icon":
|
|
363
372
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
364
373
|
return item[column.field].map(function (iconItem) {
|
|
365
374
|
return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
@@ -367,12 +376,12 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
367
376
|
name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
|
|
368
377
|
width: 18,
|
|
369
378
|
height: 18,
|
|
370
|
-
color: column.iconColorMap && column.iconColorMap[iconItem] ? column.iconColorMap[iconItem] :
|
|
379
|
+
color: column.iconColorMap && column.iconColorMap[iconItem] ? column.iconColorMap[iconItem] : "#FFF"
|
|
371
380
|
});
|
|
372
381
|
});
|
|
373
382
|
}
|
|
374
383
|
return null;
|
|
375
|
-
case
|
|
384
|
+
case "icon_circle":
|
|
376
385
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
377
386
|
return item[column.field].map(function (iconItem) {
|
|
378
387
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -395,12 +404,12 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
395
404
|
name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
|
|
396
405
|
width: 14,
|
|
397
406
|
height: 14,
|
|
398
|
-
color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color :
|
|
407
|
+
color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color : "#FFF"
|
|
399
408
|
}));
|
|
400
409
|
});
|
|
401
410
|
}
|
|
402
411
|
return null;
|
|
403
|
-
case
|
|
412
|
+
case "label":
|
|
404
413
|
{
|
|
405
414
|
if (tableLoading) {
|
|
406
415
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -418,7 +427,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
418
427
|
}
|
|
419
428
|
return null;
|
|
420
429
|
}
|
|
421
|
-
case
|
|
430
|
+
case "dubbing_status":
|
|
422
431
|
{
|
|
423
432
|
if (tableLoading) {
|
|
424
433
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -443,7 +452,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
443
452
|
}
|
|
444
453
|
break;
|
|
445
454
|
}
|
|
446
|
-
case
|
|
455
|
+
case "rowChecked":
|
|
447
456
|
{
|
|
448
457
|
if (tableLoading) {
|
|
449
458
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -468,10 +477,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
468
477
|
width: "100%"
|
|
469
478
|
});
|
|
470
479
|
} else {
|
|
471
|
-
if (typeof item[column.field] ===
|
|
472
|
-
var className =
|
|
480
|
+
if (typeof item[column.field] === "string" || typeof item[column.field] === "number" || Array.isArray(item[column.field])) {
|
|
481
|
+
var className = "text-box";
|
|
473
482
|
if (item[column.field]) {
|
|
474
|
-
className = className +
|
|
483
|
+
className = className + " text-" + item[column.field].toString().toLowerCase().split(" ").join("");
|
|
475
484
|
}
|
|
476
485
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
477
486
|
className: className,
|
|
@@ -513,13 +522,13 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
513
522
|
});
|
|
514
523
|
(0, _defineProperty2["default"])(_this, "getAvatar", function (data) {
|
|
515
524
|
var returnDom = null;
|
|
516
|
-
if (data && data.user_image && data.user_image !==
|
|
525
|
+
if (data && data.user_image && data.user_image !== "") {
|
|
517
526
|
returnDom = /*#__PURE__*/_react["default"].createElement("div", null, "image");
|
|
518
527
|
} else {
|
|
519
528
|
returnDom = data && data.name ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
520
529
|
className: "initial-placeholder",
|
|
521
530
|
title: data.name
|
|
522
|
-
}, data.name ? data.name.split(
|
|
531
|
+
}, data.name ? data.name.split(" ")[0] ? data.name.split(" ")[1] ? data.name.split(" ")[0][0] + "" + data.name.split(" ")[1][0] : data.name.split(" ")[0][0] : null : null), /*#__PURE__*/_react["default"].createElement("div", {
|
|
523
532
|
className: "avatar-details"
|
|
524
533
|
}, "FUll NAme ", /*#__PURE__*/_react["default"].createElement("br", null), "email@address.com")) : null;
|
|
525
534
|
}
|
|
@@ -555,7 +564,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
555
564
|
* This function reset Search & filters.
|
|
556
565
|
*/
|
|
557
566
|
(0, _defineProperty2["default"])(_this, "resetSearchTextAndFilters", function () {
|
|
558
|
-
_this.handleInputChange(
|
|
567
|
+
_this.handleInputChange("");
|
|
559
568
|
_this._filterRef && _this._filterRef.current && this_filterRef.current.resetSelectedUserFilter();
|
|
560
569
|
});
|
|
561
570
|
/**
|
|
@@ -575,15 +584,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
575
584
|
refreshDashboard = _this$props.refreshDashboard,
|
|
576
585
|
getSearchedRows = _this$props.getSearchedRows;
|
|
577
586
|
_this.setState({
|
|
578
|
-
searchedText:
|
|
587
|
+
searchedText: ""
|
|
579
588
|
});
|
|
580
589
|
switch (operation) {
|
|
581
|
-
case
|
|
590
|
+
case "refresh":
|
|
582
591
|
_this.props.tableLoadingActionFunc(true);
|
|
583
592
|
refreshDashboard();
|
|
584
593
|
break;
|
|
585
|
-
case
|
|
586
|
-
getSearchedRows(
|
|
594
|
+
case "clearInput":
|
|
595
|
+
getSearchedRows("");
|
|
587
596
|
break;
|
|
588
597
|
}
|
|
589
598
|
});
|
|
@@ -599,7 +608,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
599
608
|
selectedRows: [],
|
|
600
609
|
showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : [],
|
|
601
610
|
isAllRowsSelected: false,
|
|
602
|
-
searchedText: props.searchValue ||
|
|
611
|
+
searchedText: props.searchValue || "",
|
|
603
612
|
commonActionsSelected: [],
|
|
604
613
|
ingestedDbIdArray: []
|
|
605
614
|
};
|
|
@@ -620,6 +629,17 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
620
629
|
isAllRowsSelected: false
|
|
621
630
|
});
|
|
622
631
|
}
|
|
632
|
+
// Recalculate split columns if maxShowNoOfColumns or showActions change
|
|
633
|
+
if (prevProps.maxShowNoOfColumns !== this.props.maxShowNoOfColumns || prevProps.showActions !== this.props.showActions) {
|
|
634
|
+
this.columns = this.getColumns(this.props);
|
|
635
|
+
var spiltColumns = this.spiltColumns();
|
|
636
|
+
this.setState({
|
|
637
|
+
defaultShowColumns: spiltColumns.defaultShowColumns,
|
|
638
|
+
extraColumns: spiltColumns.extraColumns,
|
|
639
|
+
nestedTable: spiltColumns.nestedTable,
|
|
640
|
+
showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : []
|
|
641
|
+
});
|
|
642
|
+
}
|
|
623
643
|
}
|
|
624
644
|
}, {
|
|
625
645
|
key: "toggleExtraDetails",
|
|
@@ -685,7 +705,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
685
705
|
items.sort(function (row1, row2) {
|
|
686
706
|
return comparator(sortColumn, row1, row2);
|
|
687
707
|
});
|
|
688
|
-
if (sortColumn.sort ===
|
|
708
|
+
if (sortColumn.sort === "desc") items.reverse();
|
|
689
709
|
return items;
|
|
690
710
|
}
|
|
691
711
|
}, {
|
|
@@ -693,7 +713,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
693
713
|
value: function guessComparator(firstItem, sortColumn) {
|
|
694
714
|
// If a comparator isn't specified, try to guess based on the type of the data.
|
|
695
715
|
var sampleValue = firstItem[sortColumn.field];
|
|
696
|
-
if (typeof sampleValue ===
|
|
716
|
+
if (typeof sampleValue === "number") return Table.compare.numbers;
|
|
697
717
|
return Table.compare.strings;
|
|
698
718
|
}
|
|
699
719
|
/**
|
|
@@ -780,7 +800,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
780
800
|
var _this$props2 = this.props,
|
|
781
801
|
dashboard_common_actions = _this$props2.dashboard_common_actions,
|
|
782
802
|
common_actions = _this$props2.common_actions;
|
|
783
|
-
var table = e.target.closest(
|
|
803
|
+
var table = e.target.closest("table");
|
|
784
804
|
var checkboxNodes = table.querySelectorAll('thead tr th input[type="checkbox"]');
|
|
785
805
|
if (value) {
|
|
786
806
|
items.map(function (itemSelectedRows, i) {
|
|
@@ -946,10 +966,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
946
966
|
return /*#__PURE__*/_react["default"].createElement("div", null, divArray.map(function (_, index) {
|
|
947
967
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
948
968
|
style: {
|
|
949
|
-
display:
|
|
950
|
-
alignItems:
|
|
951
|
-
justifyContent:
|
|
952
|
-
marginBottom:
|
|
969
|
+
display: "flex",
|
|
970
|
+
alignItems: "center",
|
|
971
|
+
justifyContent: "space-between",
|
|
972
|
+
marginBottom: "15px"
|
|
953
973
|
}
|
|
954
974
|
}, /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
955
975
|
height: "16px",
|
|
@@ -987,7 +1007,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
987
1007
|
if (this.props.tableLoading && !this.props.tableLoadingAction) {
|
|
988
1008
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
989
1009
|
style: {
|
|
990
|
-
padding:
|
|
1010
|
+
padding: "10px"
|
|
991
1011
|
}
|
|
992
1012
|
}, this.tableLoadingFirst());
|
|
993
1013
|
} else {
|
|
@@ -1007,7 +1027,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1007
1027
|
onSort: this.props.onSort
|
|
1008
1028
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1009
1029
|
style: {
|
|
1010
|
-
padding:
|
|
1030
|
+
padding: "10px"
|
|
1011
1031
|
}
|
|
1012
1032
|
}, this.tableLoadingFirst()), ";");
|
|
1013
1033
|
}
|
|
@@ -1044,7 +1064,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1044
1064
|
}, /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1045
1065
|
theme: _this4.props.theme,
|
|
1046
1066
|
key: index,
|
|
1047
|
-
className: item.rowChecked ?
|
|
1067
|
+
className: item.rowChecked ? "selected-row " + (item._divider_ ? "divider-row" : "") : item._divider_ ? "divider-row" : ""
|
|
1048
1068
|
}, _this4.defaultShowColumns.map(function (column) {
|
|
1049
1069
|
var cellRenderer = column.children || _this4.defaultCellRenderer;
|
|
1050
1070
|
if (_this4.state.showColumnArr.indexOf(column.field) > -1) {
|
|
@@ -1055,13 +1075,13 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1055
1075
|
maxWidth: column.maxWidth,
|
|
1056
1076
|
column: {
|
|
1057
1077
|
column: column,
|
|
1058
|
-
width: column.field ===
|
|
1078
|
+
width: column.field === "extra_columns" ? "40px" : "auto"
|
|
1059
1079
|
}
|
|
1060
1080
|
}, cellRenderer(item, column, index));
|
|
1061
1081
|
}
|
|
1062
1082
|
})), _this4.state.showExtraRow === index ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1063
1083
|
theme: _this4.props.theme,
|
|
1064
|
-
key:
|
|
1084
|
+
key: "row-" + index + "extra"
|
|
1065
1085
|
}, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
|
|
1066
1086
|
className: "table-inner-cell",
|
|
1067
1087
|
theme: _this4.props.theme,
|
|
@@ -1088,7 +1108,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1088
1108
|
var cellRenderer = inner.children || _this4.defaultCellRenderer;
|
|
1089
1109
|
return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
|
|
1090
1110
|
theme: _this4.props.theme,
|
|
1091
|
-
key: inner.title +
|
|
1111
|
+
key: inner.title + "n",
|
|
1092
1112
|
column: inner
|
|
1093
1113
|
}, cellRenderer(element, inner, i));
|
|
1094
1114
|
})));
|
|
@@ -1105,19 +1125,19 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1105
1125
|
onSort: _this4.props.onSort
|
|
1106
1126
|
}), /*#__PURE__*/_react["default"].createElement(Table.Body, null, /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1107
1127
|
theme: _this4.props.theme,
|
|
1108
|
-
key:
|
|
1128
|
+
key: "row-" + index + "child"
|
|
1109
1129
|
}, _this4.extraColumns.map(function (column) {
|
|
1110
1130
|
var cellRenderer = column.children || _this4.defaultCellRenderer;
|
|
1111
1131
|
return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
|
|
1112
1132
|
theme: _this4.props.theme,
|
|
1113
|
-
key: column.title +
|
|
1133
|
+
key: column.title + "c",
|
|
1114
1134
|
column: column
|
|
1115
1135
|
}, cellRenderer(item, column, index));
|
|
1116
1136
|
}))))))) : null);
|
|
1117
1137
|
});
|
|
1118
1138
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showTableHeader && /*#__PURE__*/_react["default"].createElement(Table.Title, {
|
|
1119
1139
|
style: {
|
|
1120
|
-
display:
|
|
1140
|
+
display: "flex"
|
|
1121
1141
|
},
|
|
1122
1142
|
className: "table-title-holder",
|
|
1123
1143
|
theme: this.props.theme,
|
|
@@ -1151,7 +1171,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1151
1171
|
}), searchedText && searchedText.length && /*#__PURE__*/_react["default"].createElement("span", {
|
|
1152
1172
|
className: "close-icon-wrapper",
|
|
1153
1173
|
onClick: function onClick() {
|
|
1154
|
-
return _this4.tableOperation(
|
|
1174
|
+
return _this4.tableOperation("clearInput");
|
|
1155
1175
|
}
|
|
1156
1176
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
1157
1177
|
theme: this.props.theme,
|
|
@@ -1174,7 +1194,20 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1174
1194
|
height: 34,
|
|
1175
1195
|
iconWidth: 16,
|
|
1176
1196
|
iconHeight: 16
|
|
1177
|
-
})) : null, /*#__PURE__*/_react["default"].createElement("
|
|
1197
|
+
})) : null, (!tableLoading || tableLoading && tableLoadingAction) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(EditableColumn, {
|
|
1198
|
+
onClick: this.editColumnsAction
|
|
1199
|
+
}, /*#__PURE__*/_react["default"].createElement(Tooltip, {
|
|
1200
|
+
className: "tooltip"
|
|
1201
|
+
}, "Edit Columns"), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
1202
|
+
theme: this.props.theme,
|
|
1203
|
+
name: "customize-columns",
|
|
1204
|
+
width: 18,
|
|
1205
|
+
height: 15,
|
|
1206
|
+
color: "#afb2ba"
|
|
1207
|
+
}))) || (downloadHandle ? null : /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
1208
|
+
height: "24px",
|
|
1209
|
+
width: "30px"
|
|
1210
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1178
1211
|
className: "refresh-section"
|
|
1179
1212
|
}, isRefreshActivated && /*#__PURE__*/_react["default"].createElement("div", {
|
|
1180
1213
|
className: "tooltip"
|
|
@@ -1183,7 +1216,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1183
1216
|
}), (!tableLoading || tableLoadingAction) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
1184
1217
|
className: "".concat(isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
|
|
1185
1218
|
onClick: function onClick() {
|
|
1186
|
-
return _this4.tableOperation(
|
|
1219
|
+
return _this4.tableOperation("refresh");
|
|
1187
1220
|
}
|
|
1188
1221
|
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
1189
1222
|
theme: this.props.theme,
|
|
@@ -1266,7 +1299,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1266
1299
|
theme: _this4.props.theme,
|
|
1267
1300
|
value: item.field
|
|
1268
1301
|
}, item.title);
|
|
1269
|
-
}) : null)))))))), rows.length && this.state.showColumnArr[0] ===
|
|
1302
|
+
}) : null)))))))), rows.length && this.state.showColumnArr[0] === "rowChecked" && this.props.selectAllRows && !tableLoading ? /*#__PURE__*/_react["default"].createElement(SelectAllButton, {
|
|
1270
1303
|
theme: this.props.theme,
|
|
1271
1304
|
isActive: !this.state.isAllRowsSelected,
|
|
1272
1305
|
onClick: function onClick(e) {
|
|
@@ -1287,13 +1320,13 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1287
1320
|
radius: 2
|
|
1288
1321
|
}), this.state.commonActionsSelected.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Table.SelectedAction, {
|
|
1289
1322
|
theme: this.props.theme,
|
|
1290
|
-
className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ?
|
|
1323
|
+
className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ? "selectedAction show" : "selectedAction"
|
|
1291
1324
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
1292
1325
|
className: "action-icons-common"
|
|
1293
1326
|
}, this.state.commonActionsSelected.map(function (item, idx) {
|
|
1294
|
-
return item !==
|
|
1327
|
+
return item !== "play" ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
1295
1328
|
theme: _this4.props.theme,
|
|
1296
|
-
className:
|
|
1329
|
+
className: "action-button " + (item === "play" ? "play" : "default"),
|
|
1297
1330
|
key: idx,
|
|
1298
1331
|
onClick: function onClick(e) {
|
|
1299
1332
|
if (_this4.props.commonActionClickHandler) {
|
|
@@ -1306,7 +1339,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1306
1339
|
commonActionsSelected: [],
|
|
1307
1340
|
selectedRows: []
|
|
1308
1341
|
});
|
|
1309
|
-
_this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray,
|
|
1342
|
+
_this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray, "common-action");
|
|
1310
1343
|
} else {
|
|
1311
1344
|
console.log("pass func as props named 'commonActionClickHandler'... receive args as actionItem name and event obj. ");
|
|
1312
1345
|
}
|
|
@@ -1333,17 +1366,19 @@ Table.Header = _tableHeader["default"];
|
|
|
1333
1366
|
Table.Column = _tableColumn["default"];
|
|
1334
1367
|
var SearchContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n border-bottom: 1px solid #303f51;\n display: flex;\n align-items: center;\n input:focus {\n outline: none;\n }\n .search-icon-wrapper {\n padding-right: 10px;\n }\n .input-field {\n border: none;\n color: #999999;\n min-width: 300px;\n margin-top: 0px;\n }\n .close-icon-wrapper {\n cursor: pointer;\n &:hover {\n path {\n fill: white;\n }\n }\n }\n"])));
|
|
1335
1368
|
var AvatarBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n & .avatar-details {\n display: none;\n }\n\n .initial-placeholder {\n background: #78909c;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 100%;\n font-size: 12px;\n color: #fff;\n }\n"])));
|
|
1336
|
-
|
|
1369
|
+
var EditableColumn = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover .tooltip {\n display: flex;\n }\n"])));
|
|
1370
|
+
var Tooltip = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: -35px; /* Adjust if needed */\n left: 50%;\n transform: translateX(-50%);\n display: none;\n width: max-content;\n height: 25px;\n padding: 5px 10px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n background-color: #ffffff;\n color: #0c141d;\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n border-radius: 4px;\n z-index: 999;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n border-top: 6px dashed #ffffff;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n }\n"])));
|
|
1371
|
+
Table.SelectedAction = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n\n position: absolute;\n top: 0;\n left: 55px;\n width: 0px;\n overflow: hidden;\n transition: all 0.4s ease;\n height: 38px;\n background: ", ";//#ccc;\n display: flex;\n align-items: center;\n &.show{\n width: 146px;\n overflow: visible;\n }\n\n div.action-icons-common{\n white-space: nowrap;\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .tooltip-container{\n display: inline-block;\n margin: 0px 5px;\n }\n\n .action-button{\n // padding: 0px;\n // border-radius: 50%;\n // -webkit-appearance: none;\n // cursor:pointer;\n // align-items: center;\n // justify-content: center;\n // height: 25px;\n // width: 25px;\n\n &.default{\n //background: #666666;\n //border:1px solid #666666;\n &:hover{\n //background: #8e8e8e;\n //border:1px solid #8e8e8e;\n }\n }\n &.play{\n background: ", ";\n border:1px solid ", ";\n &:hover{\n background: #39cac2;\n border:1px solid #39cac2;\n }\n }\n }\n\n"])), function (props) {
|
|
1337
1372
|
return _tokens.colors[props.theme].table.background;
|
|
1338
1373
|
}, function (props) {
|
|
1339
1374
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1340
1375
|
}, function (props) {
|
|
1341
1376
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1342
1377
|
});
|
|
1343
|
-
Table.Card = (0, _styledComponents["default"])(_card["default"])(
|
|
1378
|
+
Table.Card = (0, _styledComponents["default"])(_card["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 100%;\n // overflow-x: auto;\n // overflow-y: hidden;\n margin: 10px 0;\n /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n position:relative\n\n ", "\n\ninput[type='checkbox']{ height: 0; width: 0; display:none;}\n\ninput[type='checkbox'] + label{\n position: relative;\n display: flex;\n margin:0;\n align-items: center;\n color: #9e9e9e;\n transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox'] + label > span{\n display: flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9E9E9E;\n border-radius: 50%;\n cursor: pointer; \n transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type='checkbox'] + label:hover > span,\ninput[type='checkbox']:focus + label > span{\n background: rgba(255,255,255,.1);\n}\n\ninput[type='checkbox']:checked + label > span{\n border: 10px solid #49dad0\n animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox']:checked + label > span:before{\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n 0%{\n transform: scale(1);\n }\n 33%{ \n transform: scale(.85);\n }\n 100%{\n transform: scale(1); \n }\n}\n@keyframes checkbox-check{\n 0%{\n width: 0;\n height: 0;\n border-color: #FFF;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 33%{\n width: 4px;\n height: 0;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 100%{ \n width: 4px;\n height: 9px; \n border-color: #FFF;\n transform: translate3d(0,-.5em,0) rotate(45deg);\n }\n}\n \n"])), function (props) {
|
|
1344
1379
|
// console.log(props.theme);
|
|
1345
1380
|
});
|
|
1346
|
-
Table.Title = _styledComponents["default"].div(
|
|
1381
|
+
Table.Title = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: ", ";\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed ", ";\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: ", ";\n }\n cursor: ", ";\n }\n \n &.active {\n background-color: ", ";\n border-color: ", ";\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n cursor: ", ";\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n }\n\n &:before {\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid ", ";\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: ", ";\n }\n }\n\n &:checked ~ span {\n background: ", ";\n &:hover {\n background: ", ";\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"])), function (props) {
|
|
1347
1382
|
return _tokens.colors[props.theme].table.titleColor;
|
|
1348
1383
|
}, function (props) {
|
|
1349
1384
|
return _tokens.colors[props.theme].table.titleBackgroundColor;
|
|
@@ -1379,32 +1414,32 @@ Table.compare = {
|
|
|
1379
1414
|
return String(row1[column.field]) - String(row2[column.field]);
|
|
1380
1415
|
}
|
|
1381
1416
|
};
|
|
1382
|
-
Table.Element = _styledComponents["default"].table(
|
|
1417
|
+
Table.Element = _styledComponents["default"].table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
1383
1418
|
var TableInner = {};
|
|
1384
|
-
TableInner.Element = _styledComponents["default"].table(
|
|
1385
|
-
TableInner.Cell = _styledComponents["default"].td(
|
|
1419
|
+
TableInner.Element = _styledComponents["default"].table(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
1420
|
+
TableInner.Cell = _styledComponents["default"].td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", ";\n padding: 7px 14px;\n border-top: 1px solid ", ";\n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: auto;\n"])), function (props) {
|
|
1386
1421
|
return _tokens.colors[props.theme].table.InnerTdColor;
|
|
1387
1422
|
}, function (props) {
|
|
1388
1423
|
return _tokens.colors[props.theme].table.border;
|
|
1389
1424
|
});
|
|
1390
|
-
Table.Body = _styledComponents["default"].tbody(
|
|
1391
|
-
Table.Row = _styledComponents["default"].tr(
|
|
1425
|
+
Table.Body = _styledComponents["default"].tbody(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
1426
|
+
Table.Row = _styledComponents["default"].tr(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n .show-row {\n transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -moz-transform: rotate(-180deg);\n -ms-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n }\n .hide-row {\n transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n }\n .show-row,\n .hide-row {\n transition: transform 0.5s ease-in-out;\n -webkit-transition: transform 0.5s ease-in-out;\n -moz-transition: transform 0.5s ease-in-out;\n -ms-transition: transform 0.5s ease-in-out;\n -o-transition: transform 0.5s ease-in-out;\n text-align: right;\n cursor: pointer;\n }\n\n &.selected-row > td,\n &.selected-row:nth-child(even) > td {\n background: ", ";\n }\n\n &:nth-child(even) > td {\n background: ", ";\n }\n\n &:hover {\n .asset-play {\n color: ", ";\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"])), function (props) {
|
|
1392
1427
|
return _tokens.colors[props.theme].table.rowSelectedBackground;
|
|
1393
1428
|
}, function (props) {
|
|
1394
1429
|
return _tokens.colors[props.theme].table.evenRowBackground;
|
|
1395
1430
|
}, function (props) {
|
|
1396
1431
|
return _tokens.colors[props.theme].table.RowHoverColor;
|
|
1397
1432
|
}, Table.Card, function (props) {
|
|
1398
|
-
if (typeof props.theme ===
|
|
1433
|
+
if (typeof props.theme === "string") return "background:" + _tokens.colors[props.theme].table.innerTableBackground;
|
|
1399
1434
|
});
|
|
1400
|
-
Table.Cell = _styledComponents["default"].td(
|
|
1435
|
+
Table.Cell = _styledComponents["default"].td(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", "; \n padding: 7px 14px;\n // border-top: 1px solid ", "; \n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: ", ";\n max-width: ", ";\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #FF6C56;\n }\n }\n & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: ", ";\n path{\n fill: ", ";\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: ", ";\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid ", ";\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid ", ";\n }\n\n\n"])), function (props) {
|
|
1401
1436
|
return _tokens.colors[props.theme].table.tdColor;
|
|
1402
1437
|
}, function (props) {
|
|
1403
1438
|
return _tokens.colors[props.theme].table.border;
|
|
1404
1439
|
}, function (props) {
|
|
1405
1440
|
return props.column.width;
|
|
1406
1441
|
}, function (props) {
|
|
1407
|
-
return props.maxWidth ||
|
|
1442
|
+
return props.maxWidth || "175px";
|
|
1408
1443
|
}, function (props) {
|
|
1409
1444
|
return _tokens.colors[props.theme].table.CellHoverFocusColor;
|
|
1410
1445
|
}, function (props) {
|
|
@@ -1420,21 +1455,21 @@ Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObje
|
|
|
1420
1455
|
}, function (props) {
|
|
1421
1456
|
return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
|
|
1422
1457
|
});
|
|
1423
|
-
var TableTitleLoadingInitial = _styledComponents["default"].div(
|
|
1424
|
-
var DubbingStatusStyles = _styledComponents["default"].div(
|
|
1458
|
+
var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -1px;\n"])));
|
|
1459
|
+
var DubbingStatusStyles = _styledComponents["default"].div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: ", ";\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"])), function (props) {
|
|
1425
1460
|
return _tokens.colors[props.theme].table.ApprovedBackground;
|
|
1426
1461
|
});
|
|
1427
|
-
var SelectAllButton = _styledComponents["default"].div(
|
|
1428
|
-
return props.isActive ?
|
|
1462
|
+
var SelectAllButton = _styledComponents["default"].div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"])), function (props) {
|
|
1463
|
+
return props.isActive ? "1px solid #9E9E9E" : "";
|
|
1429
1464
|
}, function (props) {
|
|
1430
|
-
return !props.isActive ?
|
|
1465
|
+
return !props.isActive ? "#49dad0" : "";
|
|
1431
1466
|
}, function (props) {
|
|
1432
|
-
return props.isActive ?
|
|
1467
|
+
return props.isActive ? "inline" : "";
|
|
1433
1468
|
}, function (props) {
|
|
1434
|
-
return !props.isActive ?
|
|
1469
|
+
return !props.isActive ? "checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards" : "";
|
|
1435
1470
|
});
|
|
1436
1471
|
Table.propTypes = {
|
|
1437
|
-
theme: _propTypes["default"].oneOf([
|
|
1472
|
+
theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
|
|
1438
1473
|
items: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
|
|
1439
1474
|
tableTitle: _propTypes["default"].string,
|
|
1440
1475
|
onSort: _propTypes["default"].func,
|
|
@@ -1448,7 +1483,7 @@ Table.propTypes = {
|
|
|
1448
1483
|
pageDropdown: _propTypes["default"].instanceOf(Object)
|
|
1449
1484
|
};
|
|
1450
1485
|
Table.defaultProps = {
|
|
1451
|
-
theme:
|
|
1486
|
+
theme: "dark",
|
|
1452
1487
|
videoPlayBtn: false,
|
|
1453
1488
|
showActions: true,
|
|
1454
1489
|
onSort: function onSort() {
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.26",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "9.1.
|
|
10
|
+
"@desynova-digital/tokens": "9.1.26",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|