@desynova-digital/components 9.3.8 → 9.3.9
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 +314 -61
- 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,95 @@ 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, "autofitColumn", function (column) {
|
|
1187
|
+
if (!column || !_this.props.resizableColumns || _this.props.tableLoading) {
|
|
1188
|
+
return;
|
|
1189
|
+
}
|
|
1190
|
+
var field = column.field;
|
|
1191
|
+
if (!field || FIXED_COLUMN_WIDTHS[field]) {
|
|
1192
|
+
return;
|
|
1193
|
+
}
|
|
1194
|
+
var table = _this.tableElementRef.current;
|
|
1195
|
+
if (!table) {
|
|
1196
|
+
return;
|
|
1197
|
+
}
|
|
1198
|
+
var escaped = window.CSS && window.CSS.escape ? window.CSS.escape(field) : field;
|
|
1199
|
+
var cells;
|
|
1200
|
+
try {
|
|
1201
|
+
cells = table.querySelectorAll('tbody > tr > td[data-field="' + escaped + '"]');
|
|
1202
|
+
} catch (err) {
|
|
1203
|
+
return;
|
|
1204
|
+
}
|
|
1205
|
+
var probe = document.createElement("span");
|
|
1206
|
+
probe.setAttribute("aria-hidden", "true");
|
|
1207
|
+
probe.style.cssText = "position:absolute;top:-9999px;left:-9999px;visibility:hidden;white-space:nowrap";
|
|
1208
|
+
document.body.appendChild(probe);
|
|
1209
|
+
var measure = function measure(el) {
|
|
1210
|
+
if (!el) {
|
|
1211
|
+
return 0;
|
|
1212
|
+
}
|
|
1213
|
+
var width = 0;
|
|
1214
|
+
var text = el.textContent || "";
|
|
1215
|
+
if (text.trim()) {
|
|
1216
|
+
var cs = window.getComputedStyle(el);
|
|
1217
|
+
probe.style.fontStyle = cs.fontStyle;
|
|
1218
|
+
probe.style.fontVariant = cs.fontVariant;
|
|
1219
|
+
probe.style.fontWeight = cs.fontWeight;
|
|
1220
|
+
probe.style.fontSize = cs.fontSize;
|
|
1221
|
+
probe.style.fontFamily = cs.fontFamily;
|
|
1222
|
+
probe.style.letterSpacing = cs.letterSpacing;
|
|
1223
|
+
probe.style.wordSpacing = cs.wordSpacing;
|
|
1224
|
+
probe.style.textTransform = cs.textTransform;
|
|
1225
|
+
probe.textContent = text;
|
|
1226
|
+
width = probe.getBoundingClientRect().width;
|
|
1227
|
+
}
|
|
1228
|
+
if (el.scrollWidth > el.clientWidth) {
|
|
1229
|
+
width = Math.max(width, el.scrollWidth);
|
|
1230
|
+
}
|
|
1231
|
+
return width;
|
|
1232
|
+
};
|
|
1233
|
+
var content = 0;
|
|
1234
|
+
var headerNeeds = 0;
|
|
1235
|
+
try {
|
|
1236
|
+
for (var i = 0; i < cells.length; i += 1) {
|
|
1237
|
+
var cell = cells[i];
|
|
1238
|
+
var width = measure(cell.firstElementChild || cell);
|
|
1239
|
+
if (width > content) {
|
|
1240
|
+
content = width;
|
|
1241
|
+
}
|
|
1242
|
+
}
|
|
1243
|
+
var headerCell = table.querySelector('thead > tr > th[data-field="' + escaped + '"]');
|
|
1244
|
+
if (headerCell) {
|
|
1245
|
+
var cs = window.getComputedStyle(headerCell);
|
|
1246
|
+
probe.style.fontStyle = cs.fontStyle;
|
|
1247
|
+
probe.style.fontVariant = cs.fontVariant;
|
|
1248
|
+
probe.style.fontWeight = cs.fontWeight;
|
|
1249
|
+
probe.style.fontSize = cs.fontSize;
|
|
1250
|
+
probe.style.fontFamily = cs.fontFamily;
|
|
1251
|
+
probe.style.letterSpacing = cs.letterSpacing;
|
|
1252
|
+
probe.style.wordSpacing = cs.wordSpacing;
|
|
1253
|
+
probe.style.textTransform = cs.textTransform;
|
|
1254
|
+
probe.textContent = column.title || headerCell.textContent || "";
|
|
1255
|
+
headerNeeds = probe.getBoundingClientRect().width + HEADER_CHROME_WIDTH;
|
|
1256
|
+
}
|
|
1257
|
+
} finally {
|
|
1258
|
+
if (probe.parentNode) {
|
|
1259
|
+
probe.parentNode.removeChild(probe);
|
|
1260
|
+
}
|
|
1261
|
+
}
|
|
1262
|
+
var tableWidth = _this.state.viewportWidth || table.clientWidth || 0;
|
|
1263
|
+
var ceiling = tableWidth ? Math.min(MAX_AUTOFIT_COLUMN_WIDTH, tableWidth * MAX_AUTOFIT_TABLE_SHARE) : MAX_AUTOFIT_COLUMN_WIDTH;
|
|
1264
|
+
var desired = Math.max(content, headerNeeds) + CELL_HORIZONTAL_PADDING + 1;
|
|
1265
|
+
var floor = MIN_AUTOFIT_COLUMN_WIDTH;
|
|
1266
|
+
var next = Math.ceil(Math.min(Math.max(desired, floor), Math.max(ceiling, floor)));
|
|
1267
|
+
if (next > 0) {
|
|
1268
|
+
_this.handleColumnResizeEnd(field, next);
|
|
1269
|
+
}
|
|
1270
|
+
});
|
|
1030
1271
|
(0, _defineProperty2["default"])(_this, "getColumnResizeProps", function () {
|
|
1031
1272
|
return {
|
|
1032
1273
|
resizableColumns: _this.props.resizableColumns,
|
|
@@ -1035,7 +1276,8 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1035
1276
|
getColumnClassName: _this.getColumnClassName,
|
|
1036
1277
|
getPinnedPlacement: _this.getPinnedPlacement,
|
|
1037
1278
|
onColumnResize: _this.handleColumnResize,
|
|
1038
|
-
onColumnResizeEnd: _this.handleColumnResizeEnd
|
|
1279
|
+
onColumnResizeEnd: _this.handleColumnResizeEnd,
|
|
1280
|
+
onColumnAutofit: _this.autofitColumn
|
|
1039
1281
|
};
|
|
1040
1282
|
});
|
|
1041
1283
|
_this.tableElementRef = /*#__PURE__*/_react["default"].createRef();
|
|
@@ -1100,6 +1342,15 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1100
1342
|
showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : []
|
|
1101
1343
|
});
|
|
1102
1344
|
}
|
|
1345
|
+
if (prevProps.scrollResetKey !== this.props.scrollResetKey) {
|
|
1346
|
+
if (this.scrollContainer) {
|
|
1347
|
+
this.scrollContainer.scrollLeft = 0;
|
|
1348
|
+
}
|
|
1349
|
+
var proxy = this.scrollProxyRef.current;
|
|
1350
|
+
if (proxy) {
|
|
1351
|
+
proxy.scrollLeft = 0;
|
|
1352
|
+
}
|
|
1353
|
+
}
|
|
1103
1354
|
this.syncScrollContainer();
|
|
1104
1355
|
}
|
|
1105
1356
|
}, {
|
|
@@ -1561,7 +1812,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1561
1812
|
scrollContentWidth = _this$state3.scrollContentWidth;
|
|
1562
1813
|
var frozenLeft = this.frozenWidths ? this.frozenWidths.left : 0;
|
|
1563
1814
|
var frozenRight = this.frozenWidths ? this.frozenWidths.right : 0;
|
|
1564
|
-
var showScrollProxy = !!(viewportWidth && scrollContentWidth && scrollContentWidth > viewportWidth);
|
|
1815
|
+
var showScrollProxy = !!(viewportWidth && scrollContentWidth && scrollContentWidth > viewportWidth) && this.props.resizableColumns;
|
|
1565
1816
|
var proxyWidth = Math.max(viewportWidth - frozenLeft - frozenRight, 0);
|
|
1566
1817
|
var proxyContentWidth = Math.max(scrollContentWidth - frozenLeft - frozenRight, 0);
|
|
1567
1818
|
var rows = this.state.items.map(function (item, index) {
|
|
@@ -1579,6 +1830,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1579
1830
|
key: index + "-" + column.title
|
|
1580
1831
|
}, filler, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
|
|
1581
1832
|
className: _this5.getColumnClassName(column, "table-cell"),
|
|
1833
|
+
"data-field": column.field,
|
|
1582
1834
|
theme: _this5.props.theme,
|
|
1583
1835
|
maxWidth: column.maxWidth,
|
|
1584
1836
|
column: {
|
|
@@ -1892,22 +2144,22 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1892
2144
|
}(_react.Component);
|
|
1893
2145
|
Table.Header = _tableHeader["default"];
|
|
1894
2146
|
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(
|
|
2147
|
+
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"])));
|
|
2148
|
+
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"])));
|
|
2149
|
+
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"])));
|
|
2150
|
+
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"])));
|
|
2151
|
+
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"])));
|
|
2152
|
+
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
2153
|
return _tokens.colors[props.theme].table.background;
|
|
1902
2154
|
}, function (props) {
|
|
1903
2155
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1904
2156
|
}, function (props) {
|
|
1905
2157
|
return _tokens.colors[props.theme].table.otherThemeShade;
|
|
1906
2158
|
});
|
|
1907
|
-
Table.Card = (0, _styledComponents["default"])(_card["default"])(
|
|
2159
|
+
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
2160
|
// console.log(props.theme);
|
|
1909
2161
|
});
|
|
1910
|
-
Table.Title = _styledComponents["default"].div(
|
|
2162
|
+
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
2163
|
return _tokens.colors[props.theme].table.titleColor;
|
|
1912
2164
|
}, function (props) {
|
|
1913
2165
|
return _tokens.colors[props.theme].table.titleBackgroundColor;
|
|
@@ -1943,12 +2195,12 @@ Table.compare = {
|
|
|
1943
2195
|
return String(row1[column.field]) - String(row2[column.field]);
|
|
1944
2196
|
}
|
|
1945
2197
|
};
|
|
1946
|
-
Table.Element = _styledComponents["default"].table(
|
|
2198
|
+
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
2199
|
return props.resizableColumns ? "table-layout: fixed;" : "";
|
|
1948
2200
|
});
|
|
1949
2201
|
var TableInner = {};
|
|
1950
|
-
TableInner.Element = _styledComponents["default"].table(
|
|
1951
|
-
TableInner.Cell = _styledComponents["default"].td(
|
|
2202
|
+
TableInner.Element = _styledComponents["default"].table(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
2203
|
+
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
2204
|
return _tokens.colors[props.theme].table.InnerTdColor;
|
|
1953
2205
|
}, function (props) {
|
|
1954
2206
|
return _tokens.colors[props.theme].table.border;
|
|
@@ -1957,8 +2209,8 @@ TableInner.Cell = _styledComponents["default"].td(_templateObject1 || (_template
|
|
|
1957
2209
|
}, function (props) {
|
|
1958
2210
|
return props.maxWidth || "175px";
|
|
1959
2211
|
});
|
|
1960
|
-
var ExpandToggle = _styledComponents["default"].div(
|
|
1961
|
-
var NestedReveal = _styledComponents["default"].div(
|
|
2212
|
+
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"])));
|
|
2213
|
+
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
2214
|
var NestedRowReveal = /*#__PURE__*/function (_Component2) {
|
|
1963
2215
|
function NestedRowReveal(props) {
|
|
1964
2216
|
var _this6;
|
|
@@ -2036,10 +2288,10 @@ var NestedRowReveal = /*#__PURE__*/function (_Component2) {
|
|
|
2036
2288
|
}
|
|
2037
2289
|
}]);
|
|
2038
2290
|
}(_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(
|
|
2291
|
+
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"])));
|
|
2292
|
+
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"])));
|
|
2293
|
+
Table.Body = _styledComponents["default"].tbody(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
2294
|
+
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
2295
|
return _tokens.colors[props.theme].table.rowSelectedBackground;
|
|
2044
2296
|
}, function (props) {
|
|
2045
2297
|
return _tokens.colors[props.theme].table.evenRowBackground;
|
|
@@ -2048,7 +2300,7 @@ Table.Row = _styledComponents["default"].tr(_templateObject15 || (_templateObjec
|
|
|
2048
2300
|
}, Table.Card, function (props) {
|
|
2049
2301
|
if (typeof props.theme === "string") return "background:" + _tokens.colors[props.theme].table.innerTableBackground;
|
|
2050
2302
|
});
|
|
2051
|
-
Table.Cell = _styledComponents["default"].td(
|
|
2303
|
+
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\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
2304
|
return _tokens.colors[props.theme].table.tdColor;
|
|
2053
2305
|
}, function (props) {
|
|
2054
2306
|
return _tokens.colors[props.theme].table.border;
|
|
@@ -2073,11 +2325,11 @@ Table.Cell = _styledComponents["default"].td(_templateObject16 || (_templateObje
|
|
|
2073
2325
|
}, function (props) {
|
|
2074
2326
|
return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
|
|
2075
2327
|
});
|
|
2076
|
-
var TableTitleLoadingInitial = _styledComponents["default"].div(
|
|
2077
|
-
var DubbingStatusStyles = _styledComponents["default"].div(
|
|
2328
|
+
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"])));
|
|
2329
|
+
var DubbingStatusStyles = _styledComponents["default"].div(_templateObject19 || (_templateObject19 = (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) {
|
|
2078
2330
|
return _tokens.colors[props.theme].table.ApprovedBackground;
|
|
2079
2331
|
});
|
|
2080
|
-
var SelectAllButton = _styledComponents["default"].div(
|
|
2332
|
+
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
2333
|
return props.isActive ? "1px solid #9E9E9E" : "";
|
|
2082
2334
|
}, function (props) {
|
|
2083
2335
|
return !props.isActive ? "#49dad0" : "";
|
|
@@ -2100,7 +2352,8 @@ Table.propTypes = {
|
|
|
2100
2352
|
userIdsList: _propTypes["default"].instanceOf(Object),
|
|
2101
2353
|
pageDropdown: _propTypes["default"].instanceOf(Object),
|
|
2102
2354
|
resizableColumns: _propTypes["default"].bool,
|
|
2103
|
-
onColumnResize: _propTypes["default"].func
|
|
2355
|
+
onColumnResize: _propTypes["default"].func,
|
|
2356
|
+
scrollResetKey: _propTypes["default"].string
|
|
2104
2357
|
};
|
|
2105
2358
|
Table.defaultProps = {
|
|
2106
2359
|
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.9",
|
|
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.9",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|