@desynova-digital/components 9.3.8 → 9.3.10
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/molecules/table/table-header.js +25 -2
- package/molecules/table/table.js +373 -60
- package/package.json +2 -2
|
@@ -90,6 +90,17 @@ var _TableHeader = function TableHeader(props) {
|
|
|
90
90
|
document.body.style.userSelect = "none";
|
|
91
91
|
stopDragRef.current = stopDrag;
|
|
92
92
|
}, [props.onColumnResize, props.onColumnResizeEnd]);
|
|
93
|
+
var handleAutofit = (0, _react.useCallback)(function (event, column) {
|
|
94
|
+
if (!props.resizableColumns || isFixedWidthColumn(column)) {
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
event.preventDefault();
|
|
98
|
+
var selection = window.getSelection && window.getSelection();
|
|
99
|
+
if (selection && selection.removeAllRanges) {
|
|
100
|
+
selection.removeAllRanges();
|
|
101
|
+
}
|
|
102
|
+
props.onColumnAutofit(column);
|
|
103
|
+
}, [props.resizableColumns, props.onColumnAutofit]);
|
|
93
104
|
var renderFiller = function renderFiller(key) {
|
|
94
105
|
return /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
|
|
95
106
|
key: key,
|
|
@@ -117,9 +128,13 @@ var _TableHeader = function TableHeader(props) {
|
|
|
117
128
|
}, filler, /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
|
|
118
129
|
theme: props.theme,
|
|
119
130
|
column: column,
|
|
131
|
+
"data-field": column.field,
|
|
120
132
|
displayAs: props.displayAs,
|
|
121
133
|
className: props.getColumnClassName(column),
|
|
122
|
-
style: props.getColumnStyle(column)
|
|
134
|
+
style: props.getColumnStyle(column),
|
|
135
|
+
onDoubleClick: function onDoubleClick(event) {
|
|
136
|
+
return handleAutofit(event, column);
|
|
137
|
+
}
|
|
123
138
|
}, showPinIcon && /*#__PURE__*/_react["default"].createElement(_TableHeader.PinIcon, null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
124
139
|
name: "filled-pin",
|
|
125
140
|
width: 10,
|
|
@@ -129,6 +144,10 @@ var _TableHeader = function TableHeader(props) {
|
|
|
129
144
|
className: "table-header-resize-handle",
|
|
130
145
|
onMouseDown: function onMouseDown(event) {
|
|
131
146
|
return startResize(event, column);
|
|
147
|
+
},
|
|
148
|
+
onDoubleClick: function onDoubleClick(event) {
|
|
149
|
+
event.stopPropagation();
|
|
150
|
+
handleAutofit(event, column);
|
|
132
151
|
}
|
|
133
152
|
})));
|
|
134
153
|
}
|
|
@@ -166,7 +185,8 @@ _TableHeader.propTypes = {
|
|
|
166
185
|
getPinnedPlacement: _propTypes["default"].func,
|
|
167
186
|
fillerColumnIndex: _propTypes["default"].number,
|
|
168
187
|
onColumnResize: _propTypes["default"].func,
|
|
169
|
-
onColumnResizeEnd: _propTypes["default"].func
|
|
188
|
+
onColumnResizeEnd: _propTypes["default"].func,
|
|
189
|
+
onColumnAutofit: _propTypes["default"].func
|
|
170
190
|
};
|
|
171
191
|
_TableHeader.defaultProps = {
|
|
172
192
|
onSort: function onSort(column) {
|
|
@@ -194,6 +214,9 @@ _TableHeader.defaultProps = {
|
|
|
194
214
|
},
|
|
195
215
|
onColumnResizeEnd: function onColumnResizeEnd() {
|
|
196
216
|
return null;
|
|
217
|
+
},
|
|
218
|
+
onColumnAutofit: function onColumnAutofit() {
|
|
219
|
+
return null;
|
|
197
220
|
}
|
|
198
221
|
};
|
|
199
222
|
var _default = exports["default"] = _TableHeader;
|
package/molecules/table/table.js
CHANGED
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
10
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
12
11
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
@@ -16,7 +15,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
16
15
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
17
16
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
18
17
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
18
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
19
20
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
20
22
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
21
23
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
22
24
|
var _lodash = require("lodash");
|
|
@@ -34,12 +36,12 @@ var _permissionIconMap = _interopRequireDefault(require("../../../tokens/permiss
|
|
|
34
36
|
var _TableErrorScreen = _interopRequireDefault(require("../../molecules/errorScreen/TableErrorScreen"));
|
|
35
37
|
var _inputText = _interopRequireDefault(require("../../atoms/inputText"));
|
|
36
38
|
var _Shimmer = _interopRequireDefault(require("../../atoms/loader/ShimmerComponent/Shimmer"));
|
|
37
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
|
|
39
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
38
40
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
39
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
40
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
41
41
|
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)); }
|
|
42
42
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
43
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
44
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
43
45
|
/**
|
|
44
46
|
* Width used for a resizable column that carries no width of its own.
|
|
45
47
|
*/
|
|
@@ -53,6 +55,11 @@ var FIXED_COLUMN_WIDTHS = {
|
|
|
53
55
|
rowChecked: "50px"
|
|
54
56
|
};
|
|
55
57
|
var NESTED_REVEAL_MS = 260;
|
|
58
|
+
var MAX_AUTOFIT_COLUMN_WIDTH = 600;
|
|
59
|
+
var MAX_AUTOFIT_TABLE_SHARE = 0.6;
|
|
60
|
+
var MIN_AUTOFIT_COLUMN_WIDTH = 60;
|
|
61
|
+
var CELL_HORIZONTAL_PADDING = 28;
|
|
62
|
+
var HEADER_CHROME_WIDTH = 26;
|
|
56
63
|
|
|
57
64
|
/**
|
|
58
65
|
* Normalises a column width into a valid CSS length.
|
|
@@ -96,6 +103,163 @@ var STRUCTURAL_LEFT_FIELDS = ["rowChecked", "extra_columns"];
|
|
|
96
103
|
var isPinned = function isPinned(value) {
|
|
97
104
|
return value === true;
|
|
98
105
|
};
|
|
106
|
+
var MORE_MENU_OFFSET_X = 136;
|
|
107
|
+
var MORE_MENU_OFFSET_Y = 2;
|
|
108
|
+
var MORE_MENU_CLOSE_DELAY = 140;
|
|
109
|
+
var MORE_MENU_VIEWPORT_MARGIN = 8;
|
|
110
|
+
var MoreActionsBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n z-index: 2147483000;\n padding-top: 11px;\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", ";\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 .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 &:before {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid\n ", ";\n transform: translate(", "px, -6px);\n }\n\n &.is-adjusted:before {\n display: none;\n }\n"])), function (props) {
|
|
111
|
+
return _tokens.colors[props.theme].table.tdColor;
|
|
112
|
+
}, function (props) {
|
|
113
|
+
return _tokens.colors[props.theme].table.innerTableBackground;
|
|
114
|
+
}, function (props) {
|
|
115
|
+
return _tokens.colors[props.theme].table.CellHoverColor;
|
|
116
|
+
}, function (props) {
|
|
117
|
+
return _tokens.colors[props.theme].table.CellHoverFillColor;
|
|
118
|
+
}, function (props) {
|
|
119
|
+
return _tokens.colors[props.theme].table.CellBeforeBorderBottom;
|
|
120
|
+
}, MORE_MENU_OFFSET_X + 8);
|
|
121
|
+
var MoreActions = function MoreActions(props) {
|
|
122
|
+
var theme = props.theme,
|
|
123
|
+
actions = props.actions,
|
|
124
|
+
actionLable = props.actionLable,
|
|
125
|
+
valueIconMap = props.valueIconMap,
|
|
126
|
+
onAction = props.onAction;
|
|
127
|
+
var holderRef = (0, _react.useRef)(null);
|
|
128
|
+
var menuRef = (0, _react.useRef)(null);
|
|
129
|
+
var closeTimer = (0, _react.useRef)(null);
|
|
130
|
+
var adjusted = (0, _react.useRef)(false);
|
|
131
|
+
var _useState = (0, _react.useState)(null),
|
|
132
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
133
|
+
placement = _useState2[0],
|
|
134
|
+
setPlacement = _useState2[1];
|
|
135
|
+
var cancelClose = (0, _react.useCallback)(function () {
|
|
136
|
+
if (closeTimer.current) {
|
|
137
|
+
clearTimeout(closeTimer.current);
|
|
138
|
+
closeTimer.current = null;
|
|
139
|
+
}
|
|
140
|
+
}, []);
|
|
141
|
+
var close = (0, _react.useCallback)(function () {
|
|
142
|
+
cancelClose();
|
|
143
|
+
setPlacement(null);
|
|
144
|
+
}, [cancelClose]);
|
|
145
|
+
var scheduleClose = (0, _react.useCallback)(function () {
|
|
146
|
+
cancelClose();
|
|
147
|
+
closeTimer.current = setTimeout(function () {
|
|
148
|
+
return setPlacement(null);
|
|
149
|
+
}, MORE_MENU_CLOSE_DELAY);
|
|
150
|
+
}, [cancelClose]);
|
|
151
|
+
var open = (0, _react.useCallback)(function () {
|
|
152
|
+
cancelClose();
|
|
153
|
+
var holder = holderRef.current;
|
|
154
|
+
if (!holder) {
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
var rect = holder.getBoundingClientRect();
|
|
158
|
+
adjusted.current = false;
|
|
159
|
+
setPlacement({
|
|
160
|
+
top: rect.bottom - MORE_MENU_OFFSET_Y,
|
|
161
|
+
left: rect.left - MORE_MENU_OFFSET_X,
|
|
162
|
+
anchorTop: rect.top,
|
|
163
|
+
isAdjusted: false
|
|
164
|
+
});
|
|
165
|
+
}, [cancelClose]);
|
|
166
|
+
(0, _react.useEffect)(function () {
|
|
167
|
+
return cancelClose;
|
|
168
|
+
}, [cancelClose]);
|
|
169
|
+
(0, _react.useEffect)(function () {
|
|
170
|
+
if (!placement) {
|
|
171
|
+
return undefined;
|
|
172
|
+
}
|
|
173
|
+
var handleDismiss = function handleDismiss() {
|
|
174
|
+
return close();
|
|
175
|
+
};
|
|
176
|
+
var handleKey = function handleKey(event) {
|
|
177
|
+
if (event.key === "Escape") {
|
|
178
|
+
close();
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
window.addEventListener("scroll", handleDismiss, true);
|
|
182
|
+
window.addEventListener("resize", handleDismiss);
|
|
183
|
+
document.addEventListener("keydown", handleKey);
|
|
184
|
+
return function () {
|
|
185
|
+
window.removeEventListener("scroll", handleDismiss, true);
|
|
186
|
+
window.removeEventListener("resize", handleDismiss);
|
|
187
|
+
document.removeEventListener("keydown", handleKey);
|
|
188
|
+
};
|
|
189
|
+
}, [placement, close]);
|
|
190
|
+
(0, _react.useLayoutEffect)(function () {
|
|
191
|
+
if (!placement || adjusted.current || !menuRef.current) {
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
194
|
+
adjusted.current = true;
|
|
195
|
+
var box = menuRef.current.getBoundingClientRect();
|
|
196
|
+
var margin = MORE_MENU_VIEWPORT_MARGIN;
|
|
197
|
+
var top = placement.top,
|
|
198
|
+
left = placement.left;
|
|
199
|
+
var moved = false;
|
|
200
|
+
if (left < margin) {
|
|
201
|
+
left = margin;
|
|
202
|
+
moved = true;
|
|
203
|
+
} else if (left + box.width > window.innerWidth - margin) {
|
|
204
|
+
left = Math.max(margin, window.innerWidth - margin - box.width);
|
|
205
|
+
moved = true;
|
|
206
|
+
}
|
|
207
|
+
if (top + box.height > window.innerHeight - margin) {
|
|
208
|
+
var flipped = placement.anchorTop - box.height + MORE_MENU_OFFSET_Y;
|
|
209
|
+
top = flipped >= margin ? flipped : Math.max(margin, window.innerHeight - margin - box.height);
|
|
210
|
+
moved = true;
|
|
211
|
+
}
|
|
212
|
+
if (moved) {
|
|
213
|
+
setPlacement(function (prev) {
|
|
214
|
+
return prev ? _objectSpread(_objectSpread({}, prev), {}, {
|
|
215
|
+
top: top,
|
|
216
|
+
left: left,
|
|
217
|
+
isAdjusted: true
|
|
218
|
+
}) : prev;
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
}, [placement]);
|
|
222
|
+
var menu = placement ? /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement(MoreActionsBox, {
|
|
223
|
+
ref: menuRef,
|
|
224
|
+
theme: theme,
|
|
225
|
+
className: "more-action-list-box portal" + (placement.isAdjusted ? " is-adjusted" : ""),
|
|
226
|
+
style: {
|
|
227
|
+
top: placement.top,
|
|
228
|
+
left: placement.left
|
|
229
|
+
},
|
|
230
|
+
onMouseEnter: cancelClose,
|
|
231
|
+
onMouseLeave: scheduleClose
|
|
232
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
233
|
+
className: "more-action-list"
|
|
234
|
+
}, actions.map(function (action, i) {
|
|
235
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
236
|
+
className: "action-item-btn nested",
|
|
237
|
+
key: i,
|
|
238
|
+
onClick: function onClick(event) {
|
|
239
|
+
close();
|
|
240
|
+
onAction(event, action);
|
|
241
|
+
}
|
|
242
|
+
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
243
|
+
theme: theme,
|
|
244
|
+
name: valueIconMap && valueIconMap[action] ? valueIconMap[action] : _permissionIconMap["default"][action],
|
|
245
|
+
width: 14,
|
|
246
|
+
height: 14
|
|
247
|
+
})), /*#__PURE__*/_react["default"].createElement("div", null, actionLable && actionLable[action]));
|
|
248
|
+
}))), document.body) : null;
|
|
249
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
250
|
+
className: "more-action-holder",
|
|
251
|
+
ref: holderRef,
|
|
252
|
+
onMouseEnter: open,
|
|
253
|
+
onMouseLeave: scheduleClose
|
|
254
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
255
|
+
className: "more-action-icon"
|
|
256
|
+
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
257
|
+
name: "more-ver",
|
|
258
|
+
width: 3,
|
|
259
|
+
height: 13,
|
|
260
|
+
theme: theme
|
|
261
|
+
})), menu);
|
|
262
|
+
};
|
|
99
263
|
var Table = /*#__PURE__*/function (_Component) {
|
|
100
264
|
function Table(props) {
|
|
101
265
|
var _this;
|
|
@@ -345,33 +509,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
345
509
|
return _this.actionClickEvents(e, action, idx);
|
|
346
510
|
}
|
|
347
511
|
});
|
|
348
|
-
}), elements.remaining.length > 0 && /*#__PURE__*/_react["default"].createElement(
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
358
|
-
className: "more-action-list-box"
|
|
359
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
360
|
-
className: "more-action-list"
|
|
361
|
-
}, elements.remaining.map(function (action, i) {
|
|
362
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
363
|
-
className: "action-item-btn nested",
|
|
364
|
-
key: i,
|
|
365
|
-
onClick: function onClick(e) {
|
|
366
|
-
return _this.actionClickEvents(e, action, idx);
|
|
367
|
-
}
|
|
368
|
-
}, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
369
|
-
theme: _this.props.theme,
|
|
370
|
-
name: column.valueIconMap && column.valueIconMap[action] ? column.valueIconMap[action] : _permissionIconMap["default"][action],
|
|
371
|
-
width: 14,
|
|
372
|
-
height: 14
|
|
373
|
-
})), /*#__PURE__*/_react["default"].createElement("div", null, _this.props.actionLable && _this.props.actionLable[action]));
|
|
374
|
-
}))))) : null);
|
|
512
|
+
}), elements.remaining.length > 0 && /*#__PURE__*/_react["default"].createElement(MoreActions, {
|
|
513
|
+
theme: _this.props.theme,
|
|
514
|
+
actions: elements.remaining,
|
|
515
|
+
actionLable: _this.props.actionLable,
|
|
516
|
+
valueIconMap: column.valueIconMap,
|
|
517
|
+
onAction: function onAction(e, action) {
|
|
518
|
+
return _this.actionClickEvents(e, action, idx);
|
|
519
|
+
}
|
|
520
|
+
})) : null);
|
|
375
521
|
});
|
|
376
522
|
(0, _defineProperty2["default"])(_this, "defaultCellRenderer", function (item, column, idx) {
|
|
377
523
|
var tableLoading = _this.props.tableLoading;
|
|
@@ -486,12 +632,14 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
486
632
|
width: "100%"
|
|
487
633
|
});
|
|
488
634
|
} else {
|
|
635
|
+
var dateText = item[column.field] ? _dateTime["default"].toDateString(new Date(item[column.field]), "DD/MM/YYYY") : null;
|
|
489
636
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
490
637
|
className: "text-box",
|
|
491
638
|
style: {
|
|
492
639
|
whiteSpace: "nowrap"
|
|
493
|
-
}
|
|
494
|
-
|
|
640
|
+
},
|
|
641
|
+
title: dateText || undefined
|
|
642
|
+
}, dateText);
|
|
495
643
|
}
|
|
496
644
|
case "time":
|
|
497
645
|
if (tableLoading) {
|
|
@@ -500,12 +648,14 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
500
648
|
width: "100%"
|
|
501
649
|
});
|
|
502
650
|
} else {
|
|
651
|
+
var timeText = item[column.field] ? _dateTime["default"].toTimeString(new Date(item[column.field]), "HH:MM AP") : null;
|
|
503
652
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
504
653
|
className: "text-box",
|
|
505
654
|
style: {
|
|
506
655
|
whiteSpace: "nowrap"
|
|
507
|
-
}
|
|
508
|
-
|
|
656
|
+
},
|
|
657
|
+
title: timeText || undefined
|
|
658
|
+
}, timeText);
|
|
509
659
|
}
|
|
510
660
|
case "datetime":
|
|
511
661
|
if (tableLoading) {
|
|
@@ -514,12 +664,14 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
514
664
|
width: "100%"
|
|
515
665
|
});
|
|
516
666
|
} else {
|
|
667
|
+
var dateTimeText = item[column.field] ? _dateTime["default"].toDateTimeString(new Date(item[column.field])) : null;
|
|
517
668
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
518
669
|
className: "text-box",
|
|
519
670
|
style: {
|
|
520
671
|
whiteSpace: "nowrap"
|
|
521
|
-
}
|
|
522
|
-
|
|
672
|
+
},
|
|
673
|
+
title: dateTimeText || undefined
|
|
674
|
+
}, dateTimeText);
|
|
523
675
|
}
|
|
524
676
|
case "icon":
|
|
525
677
|
if (item[column.field] && Array.isArray(item[column.field])) {
|
|
@@ -1027,6 +1179,154 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1027
1179
|
var total = _this.getVisibleColumnsWidth();
|
|
1028
1180
|
return total !== undefined && total < viewportWidth;
|
|
1029
1181
|
});
|
|
1182
|
+
/**
|
|
1183
|
+
* Widen a column to its longest rendered value (double-click on the header).
|
|
1184
|
+
* @param {object} column the column definition to fit
|
|
1185
|
+
*/
|
|
1186
|
+
(0, _defineProperty2["default"])(_this, "measureColumnFitWidths", function (columns) {
|
|
1187
|
+
var widths = {};
|
|
1188
|
+
var table = _this.tableElementRef.current;
|
|
1189
|
+
if (!table || !columns || !columns.length) {
|
|
1190
|
+
return widths;
|
|
1191
|
+
}
|
|
1192
|
+
var probe = document.createElement("span");
|
|
1193
|
+
probe.setAttribute("aria-hidden", "true");
|
|
1194
|
+
probe.style.cssText = "position:absolute;top:-9999px;left:-9999px;visibility:hidden;white-space:nowrap";
|
|
1195
|
+
document.body.appendChild(probe);
|
|
1196
|
+
var measure = function measure(el) {
|
|
1197
|
+
if (!el) {
|
|
1198
|
+
return 0;
|
|
1199
|
+
}
|
|
1200
|
+
var width = 0;
|
|
1201
|
+
if (el.children && el.children.length) {
|
|
1202
|
+
var origin = el.getBoundingClientRect().left;
|
|
1203
|
+
var right = origin;
|
|
1204
|
+
for (var i = 0; i < el.children.length; i += 1) {
|
|
1205
|
+
var childRight = el.children[i].getBoundingClientRect().right;
|
|
1206
|
+
if (childRight > right) {
|
|
1207
|
+
right = childRight;
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
width = Math.max(width, right - origin);
|
|
1211
|
+
} else {
|
|
1212
|
+
var text = el.textContent || "";
|
|
1213
|
+
if (text.trim()) {
|
|
1214
|
+
var cs = window.getComputedStyle(el);
|
|
1215
|
+
probe.style.fontStyle = cs.fontStyle;
|
|
1216
|
+
probe.style.fontVariant = cs.fontVariant;
|
|
1217
|
+
probe.style.fontWeight = cs.fontWeight;
|
|
1218
|
+
probe.style.fontSize = cs.fontSize;
|
|
1219
|
+
probe.style.fontFamily = cs.fontFamily;
|
|
1220
|
+
probe.style.letterSpacing = cs.letterSpacing;
|
|
1221
|
+
probe.style.wordSpacing = cs.wordSpacing;
|
|
1222
|
+
probe.style.textTransform = cs.textTransform;
|
|
1223
|
+
probe.textContent = text;
|
|
1224
|
+
width = probe.getBoundingClientRect().width;
|
|
1225
|
+
}
|
|
1226
|
+
}
|
|
1227
|
+
if (el.scrollWidth > el.clientWidth) {
|
|
1228
|
+
width = Math.max(width, el.scrollWidth);
|
|
1229
|
+
}
|
|
1230
|
+
return width;
|
|
1231
|
+
};
|
|
1232
|
+
var tableWidth = _this.state.viewportWidth || table.clientWidth || 0;
|
|
1233
|
+
var ceiling = tableWidth ? Math.min(MAX_AUTOFIT_COLUMN_WIDTH, tableWidth * MAX_AUTOFIT_TABLE_SHARE) : MAX_AUTOFIT_COLUMN_WIDTH;
|
|
1234
|
+
try {
|
|
1235
|
+
for (var c = 0; c < columns.length; c += 1) {
|
|
1236
|
+
var column = columns[c];
|
|
1237
|
+
var field = column && column.field;
|
|
1238
|
+
if (!field || FIXED_COLUMN_WIDTHS[field]) {
|
|
1239
|
+
continue;
|
|
1240
|
+
}
|
|
1241
|
+
var escaped = window.CSS && window.CSS.escape ? window.CSS.escape(field) : field;
|
|
1242
|
+
var cells = void 0;
|
|
1243
|
+
try {
|
|
1244
|
+
cells = table.querySelectorAll('tbody > tr > td[data-field="' + escaped + '"]');
|
|
1245
|
+
} catch (err) {
|
|
1246
|
+
continue;
|
|
1247
|
+
}
|
|
1248
|
+
var content = 0;
|
|
1249
|
+
for (var i = 0; i < cells.length; i += 1) {
|
|
1250
|
+
var width = measure(cells[i].firstElementChild || cells[i]);
|
|
1251
|
+
if (width > content) {
|
|
1252
|
+
content = width;
|
|
1253
|
+
}
|
|
1254
|
+
}
|
|
1255
|
+
var headerNeeds = 0;
|
|
1256
|
+
var headerCell = table.querySelector('thead > tr > th[data-field="' + escaped + '"]');
|
|
1257
|
+
if (headerCell) {
|
|
1258
|
+
var cs = window.getComputedStyle(headerCell);
|
|
1259
|
+
probe.style.fontStyle = cs.fontStyle;
|
|
1260
|
+
probe.style.fontVariant = cs.fontVariant;
|
|
1261
|
+
probe.style.fontWeight = cs.fontWeight;
|
|
1262
|
+
probe.style.fontSize = cs.fontSize;
|
|
1263
|
+
probe.style.fontFamily = cs.fontFamily;
|
|
1264
|
+
probe.style.letterSpacing = cs.letterSpacing;
|
|
1265
|
+
probe.style.wordSpacing = cs.wordSpacing;
|
|
1266
|
+
probe.style.textTransform = cs.textTransform;
|
|
1267
|
+
probe.textContent = column.title || headerCell.textContent || "";
|
|
1268
|
+
headerNeeds = probe.getBoundingClientRect().width + HEADER_CHROME_WIDTH;
|
|
1269
|
+
}
|
|
1270
|
+
var desired = Math.max(content, headerNeeds) + CELL_HORIZONTAL_PADDING + 1;
|
|
1271
|
+
var floor = MIN_AUTOFIT_COLUMN_WIDTH;
|
|
1272
|
+
widths[field] = Math.ceil(Math.min(Math.max(desired, floor), Math.max(ceiling, floor)));
|
|
1273
|
+
}
|
|
1274
|
+
} finally {
|
|
1275
|
+
if (probe.parentNode) {
|
|
1276
|
+
probe.parentNode.removeChild(probe);
|
|
1277
|
+
}
|
|
1278
|
+
}
|
|
1279
|
+
return widths;
|
|
1280
|
+
});
|
|
1281
|
+
/**
|
|
1282
|
+
* Widen a column to its longest rendered value (double-click on the header).
|
|
1283
|
+
* @param {object} column the column definition to fit
|
|
1284
|
+
*/
|
|
1285
|
+
(0, _defineProperty2["default"])(_this, "autofitColumn", function (column) {
|
|
1286
|
+
if (!column || !_this.props.resizableColumns || _this.props.tableLoading) {
|
|
1287
|
+
return;
|
|
1288
|
+
}
|
|
1289
|
+
var widths = _this.measureColumnFitWidths([column]);
|
|
1290
|
+
var next = widths[column.field];
|
|
1291
|
+
if (next > 0) {
|
|
1292
|
+
_this.handleColumnResizeEnd(column.field, next);
|
|
1293
|
+
}
|
|
1294
|
+
});
|
|
1295
|
+
(0, _defineProperty2["default"])(_this, "fitColumnsToContent", function () {
|
|
1296
|
+
if (!_this.props.resizableColumns || _this.props.tableLoading) {
|
|
1297
|
+
return;
|
|
1298
|
+
}
|
|
1299
|
+
var columns = _this.getVisibleColumns() || [];
|
|
1300
|
+
var fitted = _this.measureColumnFitWidths(columns);
|
|
1301
|
+
var next = {};
|
|
1302
|
+
for (var i = 0; i < columns.length; i += 1) {
|
|
1303
|
+
var field = columns[i] && columns[i].field;
|
|
1304
|
+
if (!field || !fitted[field]) {
|
|
1305
|
+
continue;
|
|
1306
|
+
}
|
|
1307
|
+
var current = toPxNumber(_this.getColumnWidth(columns[i])) || 0;
|
|
1308
|
+
if (fitted[field] > current) {
|
|
1309
|
+
next[field] = fitted[field];
|
|
1310
|
+
}
|
|
1311
|
+
}
|
|
1312
|
+
if (!Object.keys(next).length) {
|
|
1313
|
+
return;
|
|
1314
|
+
}
|
|
1315
|
+
_this.setState(function (prevState) {
|
|
1316
|
+
return {
|
|
1317
|
+
columnWidths: _objectSpread(_objectSpread({}, prevState.columnWidths), next)
|
|
1318
|
+
};
|
|
1319
|
+
}, function () {
|
|
1320
|
+
if (_this.props.onColumnsResize) {
|
|
1321
|
+
_this.props.onColumnsResize(next);
|
|
1322
|
+
} else if (_this.props.onColumnResize) {
|
|
1323
|
+
var fields = Object.keys(next);
|
|
1324
|
+
for (var _i2 = 0; _i2 < fields.length; _i2 += 1) {
|
|
1325
|
+
_this.props.onColumnResize(fields[_i2], next[fields[_i2]]);
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
});
|
|
1329
|
+
});
|
|
1030
1330
|
(0, _defineProperty2["default"])(_this, "getColumnResizeProps", function () {
|
|
1031
1331
|
return {
|
|
1032
1332
|
resizableColumns: _this.props.resizableColumns,
|
|
@@ -1035,7 +1335,8 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1035
1335
|
getColumnClassName: _this.getColumnClassName,
|
|
1036
1336
|
getPinnedPlacement: _this.getPinnedPlacement,
|
|
1037
1337
|
onColumnResize: _this.handleColumnResize,
|
|
1038
|
-
onColumnResizeEnd: _this.handleColumnResizeEnd
|
|
1338
|
+
onColumnResizeEnd: _this.handleColumnResizeEnd,
|
|
1339
|
+
onColumnAutofit: _this.autofitColumn
|
|
1039
1340
|
};
|
|
1040
1341
|
});
|
|
1041
1342
|
_this.tableElementRef = /*#__PURE__*/_react["default"].createRef();
|
|
@@ -1100,6 +1401,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1100
1401
|
showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : []
|
|
1101
1402
|
});
|
|
1102
1403
|
}
|
|
1404
|
+
if (prevProps.scrollResetKey !== this.props.scrollResetKey) {
|
|
1405
|
+
if (this.scrollContainer) {
|
|
1406
|
+
this.scrollContainer.scrollLeft = 0;
|
|
1407
|
+
}
|
|
1408
|
+
var proxy = this.scrollProxyRef.current;
|
|
1409
|
+
if (proxy) {
|
|
1410
|
+
proxy.scrollLeft = 0;
|
|
1411
|
+
}
|
|
1412
|
+
}
|
|
1103
1413
|
this.syncScrollContainer();
|
|
1104
1414
|
}
|
|
1105
1415
|
}, {
|
|
@@ -1579,6 +1889,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1579
1889
|
key: index + "-" + column.title
|
|
1580
1890
|
}, filler, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
|
|
1581
1891
|
className: _this5.getColumnClassName(column, "table-cell"),
|
|
1892
|
+
"data-field": column.field,
|
|
1582
1893
|
theme: _this5.props.theme,
|
|
1583
1894
|
maxWidth: column.maxWidth,
|
|
1584
1895
|
column: {
|
|
@@ -1892,22 +2203,22 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1892
2203
|
}(_react.Component);
|
|
1893
2204
|
Table.Header = _tableHeader["default"];
|
|
1894
2205
|
Table.Column = _tableColumn["default"];
|
|
1895
|
-
var SearchContainer = _styledComponents["default"].div(
|
|
1896
|
-
var AvatarBox = _styledComponents["default"].div(
|
|
1897
|
-
var EditableColumn = _styledComponents["default"].div(
|
|
1898
|
-
var Tooltip = _styledComponents["default"].div(
|
|
1899
|
-
var SelectedActionRail = _styledComponents["default"].div(
|
|
1900
|
-
Table.SelectedAction = _styledComponents["default"].div(
|
|
2206
|
+
var SearchContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (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"])));
|
|
2207
|
+
var AvatarBox = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (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"])));
|
|
2208
|
+
var EditableColumn = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (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"])));
|
|
2209
|
+
var Tooltip = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (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"])));
|
|
2210
|
+
var SelectedActionRail = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n position: sticky;\n left: 0;\n z-index: 2;\n width: 0;\n height: 0;\n"])));
|
|
2211
|
+
Table.SelectedAction = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (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: ", ";\n display: flex;\n align-items: center;\n &.show{\n width: 146px;\n overflow: visible;\n }\n\n div.action-icons-common{\n display: flex;\n align-items: center;\n position: relative;\n top: -2px;\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) {
|
|
1901
2212
|
return _tokens.colors[props.theme].table.background;
|
|
1902
2213
|
}, function (props) {
|
|
1903
2214
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1904
2215
|
}, function (props) {
|
|
1905
2216
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1906
2217
|
});
|
|
1907
|
-
Table.Card = (0, _styledComponents["default"])(_card["default"])(
|
|
2218
|
+
Table.Card = (0, _styledComponents["default"])(_card["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 100%;\n overflow-x: auto;\n scrollbar-width: thin;\n scrollbar-color: rgba(255, 255, 255, 0.22) transparent;\n &.table-card {\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n\n &.table-card::-webkit-scrollbar {\n display: none;\n }\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) {
|
|
1908
2219
|
// console.log(props.theme);
|
|
1909
2220
|
});
|
|
1910
|
-
Table.Title = _styledComponents["default"].div(
|
|
2221
|
+
Table.Title = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (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) {
|
|
1911
2222
|
return _tokens.colors[props.theme].table.titleColor;
|
|
1912
2223
|
}, function (props) {
|
|
1913
2224
|
return _tokens.colors[props.theme].table.titleBackgroundColor;
|
|
@@ -1943,12 +2254,12 @@ Table.compare = {
|
|
|
1943
2254
|
return String(row1[column.field]) - String(row2[column.field]);
|
|
1944
2255
|
}
|
|
1945
2256
|
};
|
|
1946
|
-
Table.Element = _styledComponents["default"].table(
|
|
2257
|
+
Table.Element = _styledComponents["default"].table(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: separate;\n ", "\n"])), function (props) {
|
|
1947
2258
|
return props.resizableColumns ? "table-layout: fixed;" : "";
|
|
1948
2259
|
});
|
|
1949
2260
|
var TableInner = {};
|
|
1950
|
-
TableInner.Element = _styledComponents["default"].table(
|
|
1951
|
-
TableInner.Cell = _styledComponents["default"].td(
|
|
2261
|
+
TableInner.Element = _styledComponents["default"].table(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
2262
|
+
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 white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: ", ";\n max-width: ", ";\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"])), function (props) {
|
|
1952
2263
|
return _tokens.colors[props.theme].table.InnerTdColor;
|
|
1953
2264
|
}, function (props) {
|
|
1954
2265
|
return _tokens.colors[props.theme].table.border;
|
|
@@ -1957,8 +2268,8 @@ TableInner.Cell = _styledComponents["default"].td(_templateObject1 || (_template
|
|
|
1957
2268
|
}, function (props) {
|
|
1958
2269
|
return props.maxWidth || "175px";
|
|
1959
2270
|
});
|
|
1960
|
-
var ExpandToggle = _styledComponents["default"].div(
|
|
1961
|
-
var NestedReveal = _styledComponents["default"].div(
|
|
2271
|
+
var ExpandToggle = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n svg {\n transform: rotate(0deg);\n transform-origin: 50% 50%;\n transition: transform 0.25s ease-in-out;\n }\n\n &.is-expanded svg {\n transform: rotate(90deg);\n }\n\n\n @media (prefers-reduced-motion: reduce) {\n svg {\n transition: none;\n }\n }\n\n path {\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: stroke 0.3s ease-out;\n }\n\n &:hover path {\n stroke: #60bef8;\n }\n"])));
|
|
2272
|
+
var NestedReveal = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n transition: height ", "ms ease,\n opacity ", "ms ease;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"])), NESTED_REVEAL_MS, NESTED_REVEAL_MS);
|
|
1962
2273
|
var NestedRowReveal = /*#__PURE__*/function (_Component2) {
|
|
1963
2274
|
function NestedRowReveal(props) {
|
|
1964
2275
|
var _this6;
|
|
@@ -2036,10 +2347,10 @@ var NestedRowReveal = /*#__PURE__*/function (_Component2) {
|
|
|
2036
2347
|
}
|
|
2037
2348
|
}]);
|
|
2038
2349
|
}(_react.Component);
|
|
2039
|
-
var NestedTableHolder = _styledComponents["default"].div(
|
|
2040
|
-
var ScrollProxy = _styledComponents["default"].div(
|
|
2041
|
-
Table.Body = _styledComponents["default"].tbody(
|
|
2042
|
-
Table.Row = _styledComponents["default"].tr(
|
|
2350
|
+
var NestedTableHolder = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n position: sticky;\n left: 0;\n box-sizing: border-box;\n max-width: 100%;\n padding: 7px 14px;\n"])));
|
|
2351
|
+
var ScrollProxy = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n position: sticky;\n bottom: 0;\n z-index: 2;\n overflow-x: auto;\n overflow-y: hidden;\n height: 10px;\n scrollbar-width: thin;\n scrollbar-color: rgba(255, 255, 255, 0.22) transparent;\n\n &::-webkit-scrollbar {\n height: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.22);\n border-radius: 4px;\n }\n\n & > div {\n height: 1px;\n }\n"])));
|
|
2352
|
+
Table.Body = _styledComponents["default"].tbody(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
2353
|
+
Table.Row = _styledComponents["default"].tr(_templateObject16 || (_templateObject16 = (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) {
|
|
2043
2354
|
return _tokens.colors[props.theme].table.rowSelectedBackground;
|
|
2044
2355
|
}, function (props) {
|
|
2045
2356
|
return _tokens.colors[props.theme].table.evenRowBackground;
|
|
@@ -2048,7 +2359,7 @@ Table.Row = _styledComponents["default"].tr(_templateObject15 || (_templateObjec
|
|
|
2048
2359
|
}, Table.Card, function (props) {
|
|
2049
2360
|
if (typeof props.theme === "string") return "background:" + _tokens.colors[props.theme].table.innerTableBackground;
|
|
2050
2361
|
});
|
|
2051
|
-
Table.Cell = _styledComponents["default"].td(
|
|
2362
|
+
Table.Cell = _styledComponents["default"].td(_templateObject17 || (_templateObject17 = (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 &.table-inner-cell {\n padding: 0;\n }\n &.pinned-column {\n background: ", ";\n z-index: 1;\n }\n\n &.pinned-column:hover {\n z-index: 3;\n }\n\n &.pinned-left-edge {\n box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);\n }\n\n &.pinned-right-edge {\n box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.55);\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 display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\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) {
|
|
2052
2363
|
return _tokens.colors[props.theme].table.tdColor;
|
|
2053
2364
|
}, function (props) {
|
|
2054
2365
|
return _tokens.colors[props.theme].table.border;
|
|
@@ -2073,11 +2384,11 @@ Table.Cell = _styledComponents["default"].td(_templateObject16 || (_templateObje
|
|
|
2073
2384
|
}, function (props) {
|
|
2074
2385
|
return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
|
|
2075
2386
|
});
|
|
2076
|
-
var TableTitleLoadingInitial = _styledComponents["default"].div(
|
|
2077
|
-
var DubbingStatusStyles = _styledComponents["default"].div(
|
|
2387
|
+
var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject18 || (_templateObject18 = (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"])));
|
|
2388
|
+
var DubbingStatusStyles = _styledComponents["default"].div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n .detail-block {\n display: inline-flex;\n vertical-align: middle;\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) {
|
|
2078
2389
|
return _tokens.colors[props.theme].table.ApprovedBackground;
|
|
2079
2390
|
});
|
|
2080
|
-
var SelectAllButton = _styledComponents["default"].div(
|
|
2391
|
+
var SelectAllButton = _styledComponents["default"].div(_templateObject20 || (_templateObject20 = (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: 73px;\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) {
|
|
2081
2392
|
return props.isActive ? "1px solid #9E9E9E" : "";
|
|
2082
2393
|
}, function (props) {
|
|
2083
2394
|
return !props.isActive ? "#49dad0" : "";
|
|
@@ -2100,7 +2411,9 @@ Table.propTypes = {
|
|
|
2100
2411
|
userIdsList: _propTypes["default"].instanceOf(Object),
|
|
2101
2412
|
pageDropdown: _propTypes["default"].instanceOf(Object),
|
|
2102
2413
|
resizableColumns: _propTypes["default"].bool,
|
|
2103
|
-
onColumnResize: _propTypes["default"].func
|
|
2414
|
+
onColumnResize: _propTypes["default"].func,
|
|
2415
|
+
onColumnsResize: _propTypes["default"].func,
|
|
2416
|
+
scrollResetKey: _propTypes["default"].string
|
|
2104
2417
|
};
|
|
2105
2418
|
Table.defaultProps = {
|
|
2106
2419
|
theme: "dark",
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.10",
|
|
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.3.
|
|
10
|
+
"@desynova-digital/tokens": "9.3.10",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|