@desynova-digital/components 9.3.9 → 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.
Files changed (2) hide show
  1. package/molecules/table/table.js +120 -60
  2. package/package.json +2 -2
package/molecules/table/table.js CHANGED
@@ -1183,24 +1183,11 @@ var Table = /*#__PURE__*/function (_Component) {
1183
1183
  * Widen a column to its longest rendered value (double-click on the header).
1184
1184
  * @param {object} column the column definition to fit
1185
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
- }
1186
+ (0, _defineProperty2["default"])(_this, "measureColumnFitWidths", function (columns) {
1187
+ var widths = {};
1194
1188
  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;
1189
+ if (!table || !columns || !columns.length) {
1190
+ return widths;
1204
1191
  }
1205
1192
  var probe = document.createElement("span");
1206
1193
  probe.setAttribute("aria-hidden", "true");
@@ -1211,62 +1198,134 @@ var Table = /*#__PURE__*/function (_Component) {
1211
1198
  return 0;
1212
1199
  }
1213
1200
  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;
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
+ }
1227
1226
  }
1228
1227
  if (el.scrollWidth > el.clientWidth) {
1229
1228
  width = Math.max(width, el.scrollWidth);
1230
1229
  }
1231
1230
  return width;
1232
1231
  };
1233
- var content = 0;
1234
- var headerNeeds = 0;
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;
1235
1234
  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;
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;
1241
1240
  }
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;
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)));
1256
1273
  }
1257
1274
  } finally {
1258
1275
  if (probe.parentNode) {
1259
1276
  probe.parentNode.removeChild(probe);
1260
1277
  }
1261
1278
  }
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)));
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];
1267
1291
  if (next > 0) {
1268
- _this.handleColumnResizeEnd(field, next);
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
+ }
1269
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
+ });
1270
1329
  });
1271
1330
  (0, _defineProperty2["default"])(_this, "getColumnResizeProps", function () {
1272
1331
  return {
@@ -1812,7 +1871,7 @@ var Table = /*#__PURE__*/function (_Component) {
1812
1871
  scrollContentWidth = _this$state3.scrollContentWidth;
1813
1872
  var frozenLeft = this.frozenWidths ? this.frozenWidths.left : 0;
1814
1873
  var frozenRight = this.frozenWidths ? this.frozenWidths.right : 0;
1815
- var showScrollProxy = !!(viewportWidth && scrollContentWidth && scrollContentWidth > viewportWidth) && this.props.resizableColumns;
1874
+ var showScrollProxy = !!(viewportWidth && scrollContentWidth && scrollContentWidth > viewportWidth);
1816
1875
  var proxyWidth = Math.max(viewportWidth - frozenLeft - frozenRight, 0);
1817
1876
  var proxyContentWidth = Math.max(scrollContentWidth - frozenLeft - frozenRight, 0);
1818
1877
  var rows = this.state.items.map(function (item, index) {
@@ -2300,7 +2359,7 @@ Table.Row = _styledComponents["default"].tr(_templateObject16 || (_templateObjec
2300
2359
  }, Table.Card, function (props) {
2301
2360
  if (typeof props.theme === "string") return "background:" + _tokens.colors[props.theme].table.innerTableBackground;
2302
2361
  });
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) {
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) {
2304
2363
  return _tokens.colors[props.theme].table.tdColor;
2305
2364
  }, function (props) {
2306
2365
  return _tokens.colors[props.theme].table.border;
@@ -2326,7 +2385,7 @@ Table.Cell = _styledComponents["default"].td(_templateObject17 || (_templateObje
2326
2385
  return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
2327
2386
  });
2328
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"])));
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) {
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) {
2330
2389
  return _tokens.colors[props.theme].table.ApprovedBackground;
2331
2390
  });
2332
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) {
@@ -2353,6 +2412,7 @@ Table.propTypes = {
2353
2412
  pageDropdown: _propTypes["default"].instanceOf(Object),
2354
2413
  resizableColumns: _propTypes["default"].bool,
2355
2414
  onColumnResize: _propTypes["default"].func,
2415
+ onColumnsResize: _propTypes["default"].func,
2356
2416
  scrollResetKey: _propTypes["default"].string
2357
2417
  };
2358
2418
  Table.defaultProps = {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.3.9",
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.9",
10
+ "@desynova-digital/tokens": "9.3.10",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },