@desynova-digital/components 9.1.25 → 9.1.27
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 +172 -143
- 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,63 +50,57 @@ 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
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
return
|
|
57
|
+
if (_this.props.preserveActionPosition) {
|
|
58
|
+
_this.columns = _this.columns.filter(function (item) {
|
|
59
|
+
if (item.type === "table") {
|
|
60
|
+
_this.nestedTable.push(item);
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
return true;
|
|
64
|
+
});
|
|
65
|
+
var allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
|
|
66
|
+
_this.defaultShowColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
|
|
67
|
+
_this.extraColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
|
|
68
|
+
var maxRegularColumns = _this.props.maxShowNoOfColumns;
|
|
69
|
+
var needsTruncation = _this.columns.length > maxRegularColumns;
|
|
70
|
+
if (needsTruncation) {
|
|
71
|
+
_this.defaultShowColumns.splice(maxRegularColumns);
|
|
72
|
+
_this.defaultShowColumns.push(extraColumnsSchema);
|
|
73
|
+
_this.extraColumns.splice(0, maxRegularColumns);
|
|
74
|
+
}
|
|
75
|
+
} else {
|
|
76
|
+
_this.columns = _this.columns.filter(function (item) {
|
|
77
|
+
if (item.type === "action_icon") {
|
|
78
|
+
_this.actionIconCol.push(item);
|
|
79
|
+
return false;
|
|
80
|
+
} else if (item.type === "table") {
|
|
81
|
+
_this.nestedTable.push(item);
|
|
82
|
+
return false;
|
|
83
|
+
}
|
|
84
|
+
return true;
|
|
85
|
+
});
|
|
86
|
+
var _allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
|
|
87
|
+
_this.defaultShowColumns = (0, _toConsumableArray2["default"])(_allRegularColumns);
|
|
88
|
+
_this.extraColumns = (0, _toConsumableArray2["default"])(_allRegularColumns);
|
|
89
|
+
var _maxRegularColumns = _this.props.showActions ? _this.props.maxShowNoOfColumns - 1 : _this.props.maxShowNoOfColumns;
|
|
90
|
+
var _needsTruncation = _this.columns.length > _maxRegularColumns;
|
|
91
|
+
if (_needsTruncation) {
|
|
92
|
+
_this.defaultShowColumns.splice(_maxRegularColumns);
|
|
93
|
+
if (_this.props.showActions && _this.actionIconCol.length > 0) {
|
|
94
|
+
var _this$defaultShowColu;
|
|
95
|
+
(_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, (0, _toConsumableArray2["default"])(_this.actionIconCol));
|
|
96
|
+
}
|
|
97
|
+
_this.defaultShowColumns.push(extraColumnsSchema);
|
|
98
|
+
_this.extraColumns.splice(0, _maxRegularColumns);
|
|
99
|
+
} else if (_this.props.showActions && _this.actionIconCol.length > 0) {
|
|
100
|
+
var _this$defaultShowColu2;
|
|
101
|
+
(_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
|
|
64
102
|
}
|
|
65
|
-
});
|
|
66
|
-
_this.defaultShowColumns = JSON.parse(JSON.stringify(_this.columns));
|
|
67
|
-
_this.extraColumns = JSON.parse(JSON.stringify(_this.columns));
|
|
68
|
-
if (_this.columns.length <= _this.props.maxShowNoOfColumns && !_this.props.showActions) {} else if (_this.columns.length <= _this.props.maxShowNoOfColumns - 1 && _this.props.showActions) {
|
|
69
|
-
var _this$defaultShowColu;
|
|
70
|
-
/*
|
|
71
|
-
* console.log(this.columns);
|
|
72
|
-
* this.defaultShowColumns.push({ title: '', field: 'video_src' });
|
|
73
|
-
*/
|
|
74
|
-
if (_this.actionIconCol.length > 0) (_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, (0, _toConsumableArray2["default"])(_this.actionIconCol));
|
|
75
|
-
} else if (_this.columns.length > _this.props.maxShowNoOfColumns - 1 && _this.props.showActions) {
|
|
76
|
-
var _this$defaultShowColu2;
|
|
77
|
-
_this.defaultShowColumns.splice(_this.props.maxShowNoOfColumns - 1, _this.defaultShowColumns.length);
|
|
78
|
-
|
|
79
|
-
// this.defaultShowColumns.push({ title: '', field: 'video_src' });
|
|
80
|
-
if (_this.actionIconCol.length > 0) (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
|
|
81
|
-
_this.defaultShowColumns.push(extraColumnsSchema);
|
|
82
|
-
_this.extraColumns.splice(0, _this.props.maxShowNoOfColumns - 1);
|
|
83
|
-
} else if (_this.columns.length > _this.props.maxShowNoOfColumns && !_this.props.showActions) {
|
|
84
|
-
_this.defaultShowColumns.splice(_this.props.maxShowNoOfColumns, _this.defaultShowColumns.length);
|
|
85
|
-
_this.defaultShowColumns.push(extraColumnsSchema);
|
|
86
|
-
_this.extraColumns.splice(0, _this.props.maxShowNoOfColumns);
|
|
87
103
|
}
|
|
88
|
-
|
|
89
|
-
/*
|
|
90
|
-
* if (this.props.selectable) {
|
|
91
|
-
* this.defaultShowColumns.splice(0, 0, {
|
|
92
|
-
* title: (
|
|
93
|
-
* <div>
|
|
94
|
-
* <input type="checkbox" id={"forAll"} />
|
|
95
|
-
* <label
|
|
96
|
-
* onClick={(e) => {
|
|
97
|
-
* this.allRowCheckChange(e, !this.state.isAllRowsSelected);
|
|
98
|
-
* }}
|
|
99
|
-
* htmlFor="forAll"
|
|
100
|
-
* >
|
|
101
|
-
* <span />
|
|
102
|
-
* </label>{" "}
|
|
103
|
-
* </div>
|
|
104
|
-
* ),
|
|
105
|
-
* field: "select_row",
|
|
106
|
-
* });
|
|
107
|
-
* }
|
|
108
|
-
*/
|
|
109
|
-
|
|
110
104
|
return {
|
|
111
105
|
defaultShowColumns: _this.defaultShowColumns,
|
|
112
106
|
extraColumns: _this.extraColumns,
|
|
@@ -133,6 +127,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
133
127
|
console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
|
|
134
128
|
}
|
|
135
129
|
});
|
|
130
|
+
(0, _defineProperty2["default"])(_this, "editColumnsAction", function (e) {
|
|
131
|
+
var actionClickHandler = _this.props.actionClickHandler;
|
|
132
|
+
if (actionClickHandler) {
|
|
133
|
+
actionClickHandler("edit_columns");
|
|
134
|
+
_this.setState({
|
|
135
|
+
isAllRowsSelected: false
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
});
|
|
136
139
|
// actions elements
|
|
137
140
|
(0, _defineProperty2["default"])(_this, "actionElements", function (item, column, idx) {
|
|
138
141
|
if (item[column.field] === undefined) {
|
|
@@ -143,7 +146,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
143
146
|
}
|
|
144
147
|
var arrLength = item[column.field].length;
|
|
145
148
|
var elements = item[column.field].reduce(function (acc, curr) {
|
|
146
|
-
if (curr ===
|
|
149
|
+
if (curr === "play") {
|
|
147
150
|
arrLength -= 1;
|
|
148
151
|
return acc;
|
|
149
152
|
}
|
|
@@ -159,10 +162,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
159
162
|
});
|
|
160
163
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
161
164
|
className: "action-icons-cell"
|
|
162
|
-
}, item[column.field] && (0, _typeof2["default"])(item[column.field]) ===
|
|
165
|
+
}, item[column.field] && (0, _typeof2["default"])(item[column.field]) === "object" ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
163
166
|
style: {
|
|
164
|
-
display:
|
|
165
|
-
alignItems:
|
|
167
|
+
display: "flex",
|
|
168
|
+
alignItems: "center"
|
|
166
169
|
}
|
|
167
170
|
}, elements.first.map(function (action, i) {
|
|
168
171
|
return /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
@@ -170,7 +173,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
170
173
|
key: action,
|
|
171
174
|
className: "action-item-btn",
|
|
172
175
|
style: {
|
|
173
|
-
border:
|
|
176
|
+
border: "none"
|
|
174
177
|
},
|
|
175
178
|
appearance: "cta",
|
|
176
179
|
width: 20,
|
|
@@ -214,9 +217,9 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
214
217
|
(0, _defineProperty2["default"])(_this, "defaultCellRenderer", function (item, column, idx) {
|
|
215
218
|
var tableLoading = _this.props.tableLoading;
|
|
216
219
|
switch (column.type) {
|
|
217
|
-
case
|
|
220
|
+
case "video_src":
|
|
218
221
|
{
|
|
219
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
222
|
+
return /*#__PURE__*/_react["default"].createElement("div", {}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
220
223
|
className: "video-button-box"
|
|
221
224
|
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
222
225
|
theme: _this.props.theme,
|
|
@@ -232,7 +235,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
232
235
|
iconHeight: 10
|
|
233
236
|
}))));
|
|
234
237
|
}
|
|
235
|
-
case
|
|
238
|
+
case "extra_columns":
|
|
236
239
|
{
|
|
237
240
|
if (tableLoading) {
|
|
238
241
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -240,12 +243,12 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
240
243
|
width: "100%"
|
|
241
244
|
});
|
|
242
245
|
} else {
|
|
243
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
246
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
244
247
|
onClick: function onClick(e) {
|
|
245
248
|
_this.toggleExtraDetails(e, idx);
|
|
246
249
|
}
|
|
247
250
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
248
|
-
className: _this.state.showExtraRow === idx ?
|
|
251
|
+
className: _this.state.showExtraRow === idx ? "show-row" : "hide-row"
|
|
249
252
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
250
253
|
className: "open-close-extra"
|
|
251
254
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
@@ -260,7 +263,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
260
263
|
/**
|
|
261
264
|
* In link text we expect actions array in our items array to perform click functionality and data
|
|
262
265
|
*/
|
|
263
|
-
case
|
|
266
|
+
case "link_text":
|
|
264
267
|
{
|
|
265
268
|
if (tableLoading) {
|
|
266
269
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -276,10 +279,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
276
279
|
} else {
|
|
277
280
|
var isPlayable = Array.isArray(item.actions) ? item.actions.includes("play") : false;
|
|
278
281
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
279
|
-
className: "text-box ".concat(isPlayable ?
|
|
282
|
+
className: "text-box ".concat(isPlayable ? "asset-play" : ""),
|
|
280
283
|
title: item[column.field],
|
|
281
284
|
onClick: function onClick(e) {
|
|
282
|
-
return isPlayable ? _this.actionClickEvents(e,
|
|
285
|
+
return isPlayable ? _this.actionClickEvents(e, "play", idx) : e.preventDefault();
|
|
283
286
|
}
|
|
284
287
|
}, item[column.field].toString());
|
|
285
288
|
}
|
|
@@ -288,7 +291,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
288
291
|
/**
|
|
289
292
|
* In link field we don't expect any actions in our items array it always have click functionality
|
|
290
293
|
*/
|
|
291
|
-
case
|
|
294
|
+
case "link_field":
|
|
292
295
|
{
|
|
293
296
|
if (tableLoading) {
|
|
294
297
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -298,15 +301,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
298
301
|
} else {
|
|
299
302
|
var _isPlayable = true;
|
|
300
303
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
301
|
-
className: "text-box ".concat(_isPlayable ?
|
|
304
|
+
className: "text-box ".concat(_isPlayable ? "asset-play" : ""),
|
|
302
305
|
title: item[column.field],
|
|
303
306
|
onClick: function onClick(e) {
|
|
304
|
-
return _isPlayable ? _this.actionClickEvents(e,
|
|
307
|
+
return _isPlayable ? _this.actionClickEvents(e, "play", idx) : e.preventDefault();
|
|
305
308
|
}
|
|
306
309
|
}, item[column.field].toString());
|
|
307
310
|
}
|
|
308
311
|
}
|
|
309
|
-
case
|
|
312
|
+
case "action_icon":
|
|
310
313
|
if (tableLoading) {
|
|
311
314
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
312
315
|
height: "16px",
|
|
@@ -315,9 +318,9 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
315
318
|
} else {
|
|
316
319
|
return _this.actionElements(item, column, idx);
|
|
317
320
|
}
|
|
318
|
-
case
|
|
321
|
+
case "avatar":
|
|
319
322
|
return _this.getAvatar(item[column.field]);
|
|
320
|
-
case
|
|
323
|
+
case "date":
|
|
321
324
|
if (tableLoading) {
|
|
322
325
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
323
326
|
height: "16px",
|
|
@@ -327,11 +330,11 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
327
330
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
328
331
|
className: "text-box",
|
|
329
332
|
style: {
|
|
330
|
-
whiteSpace:
|
|
333
|
+
whiteSpace: "nowrap"
|
|
331
334
|
}
|
|
332
|
-
}, item[column.field] ? _dateTime["default"].toDateString(new Date(item[column.field]),
|
|
335
|
+
}, item[column.field] ? _dateTime["default"].toDateString(new Date(item[column.field]), "DD/MM/YYYY") : null);
|
|
333
336
|
}
|
|
334
|
-
case
|
|
337
|
+
case "time":
|
|
335
338
|
if (tableLoading) {
|
|
336
339
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
337
340
|
height: "16px",
|
|
@@ -341,11 +344,11 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
341
344
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
342
345
|
className: "text-box",
|
|
343
346
|
style: {
|
|
344
|
-
whiteSpace:
|
|
347
|
+
whiteSpace: "nowrap"
|
|
345
348
|
}
|
|
346
|
-
}, item[column.field] ? _dateTime["default"].toTimeString(new Date(item[column.field]),
|
|
349
|
+
}, item[column.field] ? _dateTime["default"].toTimeString(new Date(item[column.field]), "HH:MM AP") : null);
|
|
347
350
|
}
|
|
348
|
-
case
|
|
351
|
+
case "datetime":
|
|
349
352
|
if (tableLoading) {
|
|
350
353
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
351
354
|
height: "16px",
|
|
@@ -355,11 +358,11 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
355
358
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
356
359
|
className: "text-box",
|
|
357
360
|
style: {
|
|
358
|
-
whiteSpace:
|
|
361
|
+
whiteSpace: "nowrap"
|
|
359
362
|
}
|
|
360
363
|
}, item[column.field] ? _dateTime["default"].toDateTimeString(new Date(item[column.field])) : null);
|
|
361
364
|
}
|
|
362
|
-
case
|
|
365
|
+
case "icon":
|
|
363
366
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
364
367
|
return item[column.field].map(function (iconItem) {
|
|
365
368
|
return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
@@ -367,12 +370,12 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
367
370
|
name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
|
|
368
371
|
width: 18,
|
|
369
372
|
height: 18,
|
|
370
|
-
color: column.iconColorMap && column.iconColorMap[iconItem] ? column.iconColorMap[iconItem] :
|
|
373
|
+
color: column.iconColorMap && column.iconColorMap[iconItem] ? column.iconColorMap[iconItem] : "#FFF"
|
|
371
374
|
});
|
|
372
375
|
});
|
|
373
376
|
}
|
|
374
377
|
return null;
|
|
375
|
-
case
|
|
378
|
+
case "icon_circle":
|
|
376
379
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
377
380
|
return item[column.field].map(function (iconItem) {
|
|
378
381
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -395,12 +398,12 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
395
398
|
name: column.valueIconMap && column.valueIconMap[iconItem] ? column.valueIconMap[iconItem] : iconItem,
|
|
396
399
|
width: 14,
|
|
397
400
|
height: 14,
|
|
398
|
-
color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color :
|
|
401
|
+
color: column.iconColorMap && column.iconColorMap[iconItem] && column.iconColorMap[iconItem].color ? column.iconColorMap[iconItem].color : "#FFF"
|
|
399
402
|
}));
|
|
400
403
|
});
|
|
401
404
|
}
|
|
402
405
|
return null;
|
|
403
|
-
case
|
|
406
|
+
case "label":
|
|
404
407
|
{
|
|
405
408
|
if (tableLoading) {
|
|
406
409
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -418,7 +421,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
418
421
|
}
|
|
419
422
|
return null;
|
|
420
423
|
}
|
|
421
|
-
case
|
|
424
|
+
case "dubbing_status":
|
|
422
425
|
{
|
|
423
426
|
if (tableLoading) {
|
|
424
427
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -443,7 +446,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
443
446
|
}
|
|
444
447
|
break;
|
|
445
448
|
}
|
|
446
|
-
case
|
|
449
|
+
case "rowChecked":
|
|
447
450
|
{
|
|
448
451
|
if (tableLoading) {
|
|
449
452
|
return /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
@@ -468,10 +471,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
468
471
|
width: "100%"
|
|
469
472
|
});
|
|
470
473
|
} else {
|
|
471
|
-
if (typeof item[column.field] ===
|
|
472
|
-
var className =
|
|
474
|
+
if (typeof item[column.field] === "string" || typeof item[column.field] === "number" || Array.isArray(item[column.field])) {
|
|
475
|
+
var className = "text-box";
|
|
473
476
|
if (item[column.field]) {
|
|
474
|
-
className = className +
|
|
477
|
+
className = className + " text-" + item[column.field].toString().toLowerCase().split(" ").join("");
|
|
475
478
|
}
|
|
476
479
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
477
480
|
className: className,
|
|
@@ -513,13 +516,13 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
513
516
|
});
|
|
514
517
|
(0, _defineProperty2["default"])(_this, "getAvatar", function (data) {
|
|
515
518
|
var returnDom = null;
|
|
516
|
-
if (data && data.user_image && data.user_image !==
|
|
519
|
+
if (data && data.user_image && data.user_image !== "") {
|
|
517
520
|
returnDom = /*#__PURE__*/_react["default"].createElement("div", null, "image");
|
|
518
521
|
} else {
|
|
519
522
|
returnDom = data && data.name ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
520
523
|
className: "initial-placeholder",
|
|
521
524
|
title: data.name
|
|
522
|
-
}, data.name ? data.name.split(
|
|
525
|
+
}, 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
526
|
className: "avatar-details"
|
|
524
527
|
}, "FUll NAme ", /*#__PURE__*/_react["default"].createElement("br", null), "email@address.com")) : null;
|
|
525
528
|
}
|
|
@@ -555,7 +558,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
555
558
|
* This function reset Search & filters.
|
|
556
559
|
*/
|
|
557
560
|
(0, _defineProperty2["default"])(_this, "resetSearchTextAndFilters", function () {
|
|
558
|
-
_this.handleInputChange(
|
|
561
|
+
_this.handleInputChange("");
|
|
559
562
|
_this._filterRef && _this._filterRef.current && this_filterRef.current.resetSelectedUserFilter();
|
|
560
563
|
});
|
|
561
564
|
/**
|
|
@@ -575,15 +578,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
575
578
|
refreshDashboard = _this$props.refreshDashboard,
|
|
576
579
|
getSearchedRows = _this$props.getSearchedRows;
|
|
577
580
|
_this.setState({
|
|
578
|
-
searchedText:
|
|
581
|
+
searchedText: ""
|
|
579
582
|
});
|
|
580
583
|
switch (operation) {
|
|
581
|
-
case
|
|
584
|
+
case "refresh":
|
|
582
585
|
_this.props.tableLoadingActionFunc(true);
|
|
583
586
|
refreshDashboard();
|
|
584
587
|
break;
|
|
585
|
-
case
|
|
586
|
-
getSearchedRows(
|
|
588
|
+
case "clearInput":
|
|
589
|
+
getSearchedRows("");
|
|
587
590
|
break;
|
|
588
591
|
}
|
|
589
592
|
});
|
|
@@ -599,7 +602,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
599
602
|
selectedRows: [],
|
|
600
603
|
showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : [],
|
|
601
604
|
isAllRowsSelected: false,
|
|
602
|
-
searchedText: props.searchValue ||
|
|
605
|
+
searchedText: props.searchValue || "",
|
|
603
606
|
commonActionsSelected: [],
|
|
604
607
|
ingestedDbIdArray: []
|
|
605
608
|
};
|
|
@@ -620,6 +623,17 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
620
623
|
isAllRowsSelected: false
|
|
621
624
|
});
|
|
622
625
|
}
|
|
626
|
+
// Recalculate split columns if maxShowNoOfColumns or showActions change
|
|
627
|
+
if (prevProps.maxShowNoOfColumns !== this.props.maxShowNoOfColumns || prevProps.showActions !== this.props.showActions) {
|
|
628
|
+
this.columns = this.getColumns(this.props);
|
|
629
|
+
var spiltColumns = this.spiltColumns();
|
|
630
|
+
this.setState({
|
|
631
|
+
defaultShowColumns: spiltColumns.defaultShowColumns,
|
|
632
|
+
extraColumns: spiltColumns.extraColumns,
|
|
633
|
+
nestedTable: spiltColumns.nestedTable,
|
|
634
|
+
showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : []
|
|
635
|
+
});
|
|
636
|
+
}
|
|
623
637
|
}
|
|
624
638
|
}, {
|
|
625
639
|
key: "toggleExtraDetails",
|
|
@@ -685,7 +699,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
685
699
|
items.sort(function (row1, row2) {
|
|
686
700
|
return comparator(sortColumn, row1, row2);
|
|
687
701
|
});
|
|
688
|
-
if (sortColumn.sort ===
|
|
702
|
+
if (sortColumn.sort === "desc") items.reverse();
|
|
689
703
|
return items;
|
|
690
704
|
}
|
|
691
705
|
}, {
|
|
@@ -693,7 +707,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
693
707
|
value: function guessComparator(firstItem, sortColumn) {
|
|
694
708
|
// If a comparator isn't specified, try to guess based on the type of the data.
|
|
695
709
|
var sampleValue = firstItem[sortColumn.field];
|
|
696
|
-
if (typeof sampleValue ===
|
|
710
|
+
if (typeof sampleValue === "number") return Table.compare.numbers;
|
|
697
711
|
return Table.compare.strings;
|
|
698
712
|
}
|
|
699
713
|
/**
|
|
@@ -780,7 +794,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
780
794
|
var _this$props2 = this.props,
|
|
781
795
|
dashboard_common_actions = _this$props2.dashboard_common_actions,
|
|
782
796
|
common_actions = _this$props2.common_actions;
|
|
783
|
-
var table = e.target.closest(
|
|
797
|
+
var table = e.target.closest("table");
|
|
784
798
|
var checkboxNodes = table.querySelectorAll('thead tr th input[type="checkbox"]');
|
|
785
799
|
if (value) {
|
|
786
800
|
items.map(function (itemSelectedRows, i) {
|
|
@@ -946,10 +960,10 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
946
960
|
return /*#__PURE__*/_react["default"].createElement("div", null, divArray.map(function (_, index) {
|
|
947
961
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
948
962
|
style: {
|
|
949
|
-
display:
|
|
950
|
-
alignItems:
|
|
951
|
-
justifyContent:
|
|
952
|
-
marginBottom:
|
|
963
|
+
display: "flex",
|
|
964
|
+
alignItems: "center",
|
|
965
|
+
justifyContent: "space-between",
|
|
966
|
+
marginBottom: "15px"
|
|
953
967
|
}
|
|
954
968
|
}, /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
955
969
|
height: "16px",
|
|
@@ -987,7 +1001,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
987
1001
|
if (this.props.tableLoading && !this.props.tableLoadingAction) {
|
|
988
1002
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
989
1003
|
style: {
|
|
990
|
-
padding:
|
|
1004
|
+
padding: "10px"
|
|
991
1005
|
}
|
|
992
1006
|
}, this.tableLoadingFirst());
|
|
993
1007
|
} else {
|
|
@@ -1007,7 +1021,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1007
1021
|
onSort: this.props.onSort
|
|
1008
1022
|
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1009
1023
|
style: {
|
|
1010
|
-
padding:
|
|
1024
|
+
padding: "10px"
|
|
1011
1025
|
}
|
|
1012
1026
|
}, this.tableLoadingFirst()), ";");
|
|
1013
1027
|
}
|
|
@@ -1044,7 +1058,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1044
1058
|
}, /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1045
1059
|
theme: _this4.props.theme,
|
|
1046
1060
|
key: index,
|
|
1047
|
-
className: item.rowChecked ?
|
|
1061
|
+
className: item.rowChecked ? "selected-row " + (item._divider_ ? "divider-row" : "") : item._divider_ ? "divider-row" : ""
|
|
1048
1062
|
}, _this4.defaultShowColumns.map(function (column) {
|
|
1049
1063
|
var cellRenderer = column.children || _this4.defaultCellRenderer;
|
|
1050
1064
|
if (_this4.state.showColumnArr.indexOf(column.field) > -1) {
|
|
@@ -1055,13 +1069,13 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1055
1069
|
maxWidth: column.maxWidth,
|
|
1056
1070
|
column: {
|
|
1057
1071
|
column: column,
|
|
1058
|
-
width: column.field ===
|
|
1072
|
+
width: column.field === "extra_columns" ? "40px" : "auto"
|
|
1059
1073
|
}
|
|
1060
1074
|
}, cellRenderer(item, column, index));
|
|
1061
1075
|
}
|
|
1062
1076
|
})), _this4.state.showExtraRow === index ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1063
1077
|
theme: _this4.props.theme,
|
|
1064
|
-
key:
|
|
1078
|
+
key: "row-" + index + "extra"
|
|
1065
1079
|
}, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
|
|
1066
1080
|
className: "table-inner-cell",
|
|
1067
1081
|
theme: _this4.props.theme,
|
|
@@ -1088,7 +1102,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1088
1102
|
var cellRenderer = inner.children || _this4.defaultCellRenderer;
|
|
1089
1103
|
return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
|
|
1090
1104
|
theme: _this4.props.theme,
|
|
1091
|
-
key: inner.title +
|
|
1105
|
+
key: inner.title + "n",
|
|
1092
1106
|
column: inner
|
|
1093
1107
|
}, cellRenderer(element, inner, i));
|
|
1094
1108
|
})));
|
|
@@ -1105,19 +1119,19 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1105
1119
|
onSort: _this4.props.onSort
|
|
1106
1120
|
}), /*#__PURE__*/_react["default"].createElement(Table.Body, null, /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1107
1121
|
theme: _this4.props.theme,
|
|
1108
|
-
key:
|
|
1122
|
+
key: "row-" + index + "child"
|
|
1109
1123
|
}, _this4.extraColumns.map(function (column) {
|
|
1110
1124
|
var cellRenderer = column.children || _this4.defaultCellRenderer;
|
|
1111
1125
|
return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
|
|
1112
1126
|
theme: _this4.props.theme,
|
|
1113
|
-
key: column.title +
|
|
1127
|
+
key: column.title + "c",
|
|
1114
1128
|
column: column
|
|
1115
1129
|
}, cellRenderer(item, column, index));
|
|
1116
1130
|
}))))))) : null);
|
|
1117
1131
|
});
|
|
1118
1132
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showTableHeader && /*#__PURE__*/_react["default"].createElement(Table.Title, {
|
|
1119
1133
|
style: {
|
|
1120
|
-
display:
|
|
1134
|
+
display: "flex"
|
|
1121
1135
|
},
|
|
1122
1136
|
className: "table-title-holder",
|
|
1123
1137
|
theme: this.props.theme,
|
|
@@ -1151,7 +1165,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1151
1165
|
}), searchedText && searchedText.length && /*#__PURE__*/_react["default"].createElement("span", {
|
|
1152
1166
|
className: "close-icon-wrapper",
|
|
1153
1167
|
onClick: function onClick() {
|
|
1154
|
-
return _this4.tableOperation(
|
|
1168
|
+
return _this4.tableOperation("clearInput");
|
|
1155
1169
|
}
|
|
1156
1170
|
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
1157
1171
|
theme: this.props.theme,
|
|
@@ -1174,7 +1188,20 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1174
1188
|
height: 34,
|
|
1175
1189
|
iconWidth: 16,
|
|
1176
1190
|
iconHeight: 16
|
|
1177
|
-
})) : null, /*#__PURE__*/_react["default"].createElement("
|
|
1191
|
+
})) : null, (!tableLoading || tableLoading && tableLoadingAction) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(EditableColumn, {
|
|
1192
|
+
onClick: this.editColumnsAction
|
|
1193
|
+
}, /*#__PURE__*/_react["default"].createElement(Tooltip, {
|
|
1194
|
+
className: "tooltip"
|
|
1195
|
+
}, "Edit Columns"), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
1196
|
+
theme: this.props.theme,
|
|
1197
|
+
name: "customize-columns",
|
|
1198
|
+
width: 18,
|
|
1199
|
+
height: 15,
|
|
1200
|
+
color: "#afb2ba"
|
|
1201
|
+
}))) || (downloadHandle ? null : /*#__PURE__*/_react["default"].createElement(_Shimmer["default"], {
|
|
1202
|
+
height: "24px",
|
|
1203
|
+
width: "30px"
|
|
1204
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1178
1205
|
className: "refresh-section"
|
|
1179
1206
|
}, isRefreshActivated && /*#__PURE__*/_react["default"].createElement("div", {
|
|
1180
1207
|
className: "tooltip"
|
|
@@ -1183,7 +1210,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1183
1210
|
}), (!tableLoading || tableLoadingAction) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
1184
1211
|
className: "".concat(isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
|
|
1185
1212
|
onClick: function onClick() {
|
|
1186
|
-
return _this4.tableOperation(
|
|
1213
|
+
return _this4.tableOperation("refresh");
|
|
1187
1214
|
}
|
|
1188
1215
|
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
1189
1216
|
theme: this.props.theme,
|
|
@@ -1266,7 +1293,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1266
1293
|
theme: _this4.props.theme,
|
|
1267
1294
|
value: item.field
|
|
1268
1295
|
}, item.title);
|
|
1269
|
-
}) : null)))))))), rows.length && this.state.showColumnArr[0] ===
|
|
1296
|
+
}) : null)))))))), rows.length && this.state.showColumnArr[0] === "rowChecked" && this.props.selectAllRows && !tableLoading ? /*#__PURE__*/_react["default"].createElement(SelectAllButton, {
|
|
1270
1297
|
theme: this.props.theme,
|
|
1271
1298
|
isActive: !this.state.isAllRowsSelected,
|
|
1272
1299
|
onClick: function onClick(e) {
|
|
@@ -1287,13 +1314,13 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1287
1314
|
radius: 2
|
|
1288
1315
|
}), this.state.commonActionsSelected.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Table.SelectedAction, {
|
|
1289
1316
|
theme: this.props.theme,
|
|
1290
|
-
className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ?
|
|
1317
|
+
className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ? "selectedAction show" : "selectedAction"
|
|
1291
1318
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
1292
1319
|
className: "action-icons-common"
|
|
1293
1320
|
}, this.state.commonActionsSelected.map(function (item, idx) {
|
|
1294
|
-
return item !==
|
|
1321
|
+
return item !== "play" ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
1295
1322
|
theme: _this4.props.theme,
|
|
1296
|
-
className:
|
|
1323
|
+
className: "action-button " + (item === "play" ? "play" : "default"),
|
|
1297
1324
|
key: idx,
|
|
1298
1325
|
onClick: function onClick(e) {
|
|
1299
1326
|
if (_this4.props.commonActionClickHandler) {
|
|
@@ -1306,7 +1333,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1306
1333
|
commonActionsSelected: [],
|
|
1307
1334
|
selectedRows: []
|
|
1308
1335
|
});
|
|
1309
|
-
_this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray,
|
|
1336
|
+
_this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray, "common-action");
|
|
1310
1337
|
} else {
|
|
1311
1338
|
console.log("pass func as props named 'commonActionClickHandler'... receive args as actionItem name and event obj. ");
|
|
1312
1339
|
}
|
|
@@ -1333,17 +1360,19 @@ Table.Header = _tableHeader["default"];
|
|
|
1333
1360
|
Table.Column = _tableColumn["default"];
|
|
1334
1361
|
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
1362
|
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
|
-
|
|
1363
|
+
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 transition: all 0.2s ease;\n\n &:hover {\n svg path {\n fill: white;\n }\n .tooltip {\n display: flex;\n }\n }\n"])));
|
|
1364
|
+
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"])));
|
|
1365
|
+
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
1366
|
return _tokens.colors[props.theme].table.background;
|
|
1338
1367
|
}, function (props) {
|
|
1339
1368
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1340
1369
|
}, function (props) {
|
|
1341
1370
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1342
1371
|
});
|
|
1343
|
-
Table.Card = (0, _styledComponents["default"])(_card["default"])(
|
|
1372
|
+
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
1373
|
// console.log(props.theme);
|
|
1345
1374
|
});
|
|
1346
|
-
Table.Title = _styledComponents["default"].div(
|
|
1375
|
+
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
1376
|
return _tokens.colors[props.theme].table.titleColor;
|
|
1348
1377
|
}, function (props) {
|
|
1349
1378
|
return _tokens.colors[props.theme].table.titleBackgroundColor;
|
|
@@ -1379,32 +1408,32 @@ Table.compare = {
|
|
|
1379
1408
|
return String(row1[column.field]) - String(row2[column.field]);
|
|
1380
1409
|
}
|
|
1381
1410
|
};
|
|
1382
|
-
Table.Element = _styledComponents["default"].table(
|
|
1411
|
+
Table.Element = _styledComponents["default"].table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
1383
1412
|
var TableInner = {};
|
|
1384
|
-
TableInner.Element = _styledComponents["default"].table(
|
|
1385
|
-
TableInner.Cell = _styledComponents["default"].td(
|
|
1413
|
+
TableInner.Element = _styledComponents["default"].table(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
1414
|
+
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
1415
|
return _tokens.colors[props.theme].table.InnerTdColor;
|
|
1387
1416
|
}, function (props) {
|
|
1388
1417
|
return _tokens.colors[props.theme].table.border;
|
|
1389
1418
|
});
|
|
1390
|
-
Table.Body = _styledComponents["default"].tbody(
|
|
1391
|
-
Table.Row = _styledComponents["default"].tr(
|
|
1419
|
+
Table.Body = _styledComponents["default"].tbody(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
1420
|
+
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
1421
|
return _tokens.colors[props.theme].table.rowSelectedBackground;
|
|
1393
1422
|
}, function (props) {
|
|
1394
1423
|
return _tokens.colors[props.theme].table.evenRowBackground;
|
|
1395
1424
|
}, function (props) {
|
|
1396
1425
|
return _tokens.colors[props.theme].table.RowHoverColor;
|
|
1397
1426
|
}, Table.Card, function (props) {
|
|
1398
|
-
if (typeof props.theme ===
|
|
1427
|
+
if (typeof props.theme === "string") return "background:" + _tokens.colors[props.theme].table.innerTableBackground;
|
|
1399
1428
|
});
|
|
1400
|
-
Table.Cell = _styledComponents["default"].td(
|
|
1429
|
+
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
1430
|
return _tokens.colors[props.theme].table.tdColor;
|
|
1402
1431
|
}, function (props) {
|
|
1403
1432
|
return _tokens.colors[props.theme].table.border;
|
|
1404
1433
|
}, function (props) {
|
|
1405
1434
|
return props.column.width;
|
|
1406
1435
|
}, function (props) {
|
|
1407
|
-
return props.maxWidth ||
|
|
1436
|
+
return props.maxWidth || "175px";
|
|
1408
1437
|
}, function (props) {
|
|
1409
1438
|
return _tokens.colors[props.theme].table.CellHoverFocusColor;
|
|
1410
1439
|
}, function (props) {
|
|
@@ -1420,21 +1449,21 @@ Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObje
|
|
|
1420
1449
|
}, function (props) {
|
|
1421
1450
|
return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
|
|
1422
1451
|
});
|
|
1423
|
-
var TableTitleLoadingInitial = _styledComponents["default"].div(
|
|
1424
|
-
var DubbingStatusStyles = _styledComponents["default"].div(
|
|
1452
|
+
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"])));
|
|
1453
|
+
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
1454
|
return _tokens.colors[props.theme].table.ApprovedBackground;
|
|
1426
1455
|
});
|
|
1427
|
-
var SelectAllButton = _styledComponents["default"].div(
|
|
1428
|
-
return props.isActive ?
|
|
1456
|
+
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) {
|
|
1457
|
+
return props.isActive ? "1px solid #9E9E9E" : "";
|
|
1429
1458
|
}, function (props) {
|
|
1430
|
-
return !props.isActive ?
|
|
1459
|
+
return !props.isActive ? "#49dad0" : "";
|
|
1431
1460
|
}, function (props) {
|
|
1432
|
-
return props.isActive ?
|
|
1461
|
+
return props.isActive ? "inline" : "";
|
|
1433
1462
|
}, function (props) {
|
|
1434
|
-
return !props.isActive ?
|
|
1463
|
+
return !props.isActive ? "checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards" : "";
|
|
1435
1464
|
});
|
|
1436
1465
|
Table.propTypes = {
|
|
1437
|
-
theme: _propTypes["default"].oneOf([
|
|
1466
|
+
theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
|
|
1438
1467
|
items: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
|
|
1439
1468
|
tableTitle: _propTypes["default"].string,
|
|
1440
1469
|
onSort: _propTypes["default"].func,
|
|
@@ -1448,7 +1477,7 @@ Table.propTypes = {
|
|
|
1448
1477
|
pageDropdown: _propTypes["default"].instanceOf(Object)
|
|
1449
1478
|
};
|
|
1450
1479
|
Table.defaultProps = {
|
|
1451
|
-
theme:
|
|
1480
|
+
theme: "dark",
|
|
1452
1481
|
videoPlayBtn: false,
|
|
1453
1482
|
showActions: true,
|
|
1454
1483
|
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.27",
|
|
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.27",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|