@xyo-network/react-shared 2.25.28 → 2.25.29
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/dist/cjs/components/TableCell/EllipsisTableCell.js +12 -15
- package/dist/cjs/components/TableCell/EllipsisTableCell.js.map +1 -1
- package/dist/cjs/components/TableCell/getRemainingRowWidth.d.ts +1 -0
- package/dist/cjs/components/TableCell/getRemainingRowWidth.js +5 -9
- package/dist/cjs/components/TableCell/getRemainingRowWidth.js.map +1 -1
- package/dist/cjs/components/TableCell/getSmallestParentWidth.js +1 -1
- package/dist/cjs/components/TableCell/getSmallestParentWidth.js.map +1 -1
- package/dist/docs.json +11 -11
- package/dist/esm/components/TableCell/EllipsisTableCell.js +12 -15
- package/dist/esm/components/TableCell/EllipsisTableCell.js.map +1 -1
- package/dist/esm/components/TableCell/getRemainingRowWidth.d.ts +1 -0
- package/dist/esm/components/TableCell/getRemainingRowWidth.js +5 -8
- package/dist/esm/components/TableCell/getRemainingRowWidth.js.map +1 -1
- package/dist/esm/components/TableCell/getSmallestParentWidth.js +1 -1
- package/dist/esm/components/TableCell/getSmallestParentWidth.js.map +1 -1
- package/package.json +2 -2
- package/src/components/TableCell/EllipsisTableCell.tsx +20 -22
- package/src/components/TableCell/getRemainingRowWidth.ts +5 -11
- package/src/components/TableCell/getSmallestParentWidth.ts +1 -1
|
@@ -9,16 +9,19 @@ const react_1 = require("react");
|
|
|
9
9
|
const findParent_1 = require("./findParent");
|
|
10
10
|
const getRemainingRowWidth_1 = require("./getRemainingRowWidth");
|
|
11
11
|
const getSmallestParentWidth_1 = require("./getSmallestParentWidth");
|
|
12
|
-
const TableCellValue = ({ value, hashCellWidth }) =>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
const TableCellValue = ({ value, hashCellWidth }) => {
|
|
13
|
+
console.log(`hashCellWidth: ${hashCellWidth}`);
|
|
14
|
+
return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", fontFamily: "monospace", style: {
|
|
15
|
+
display: 'block',
|
|
16
|
+
overflow: 'hidden',
|
|
17
|
+
textOverflow: 'ellipsis',
|
|
18
|
+
whiteSpace: 'nowrap',
|
|
19
|
+
width: hashCellWidth,
|
|
20
|
+
} }, { children: value })));
|
|
21
|
+
};
|
|
19
22
|
const EllipsisTableCell = (_a) => {
|
|
20
23
|
var { value, to, href } = _a, props = tslib_1.__rest(_a, ["value", "to", "href"]);
|
|
21
|
-
const [hashCellWidth, setHashCellWidth] = (0, react_1.useState)();
|
|
24
|
+
const [hashCellWidth, setHashCellWidth] = (0, react_1.useState)(0);
|
|
22
25
|
const hashDivRef = (0, react_1.useRef)(null);
|
|
23
26
|
const theme = (0, material_1.useTheme)();
|
|
24
27
|
const spacing = parseInt(theme.spacing(2).substring(-2));
|
|
@@ -31,12 +34,7 @@ const EllipsisTableCell = (_a) => {
|
|
|
31
34
|
const smallestParentWidth = (0, getSmallestParentWidth_1.getSmallestParentWidth)(cell);
|
|
32
35
|
if (smallestParentWidth && row) {
|
|
33
36
|
const remainderWidth = smallestParentWidth - (0, getRemainingRowWidth_1.getRemainingRowWidth)(row) - spacing;
|
|
34
|
-
|
|
35
|
-
setHashCellWidth(remainderWidth);
|
|
36
|
-
}
|
|
37
|
-
else if (hashCellWidth === undefined) {
|
|
38
|
-
setHashCellWidth(cell.clientWidth);
|
|
39
|
-
}
|
|
37
|
+
setHashCellWidth(remainderWidth);
|
|
40
38
|
}
|
|
41
39
|
};
|
|
42
40
|
const onResize = () => {
|
|
@@ -51,7 +49,6 @@ const EllipsisTableCell = (_a) => {
|
|
|
51
49
|
return () => {
|
|
52
50
|
window.removeEventListener('resize', onResize);
|
|
53
51
|
};
|
|
54
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
55
52
|
}, [hashDivRef, spacing]);
|
|
56
53
|
return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: hashDivRef }, { children: href || to ? ((0, jsx_runtime_1.jsx)(sdk_react_1.LinkEx, Object.assign({ to: to, href: href, target: href ? '_blank' : undefined }, { children: (0, jsx_runtime_1.jsx)(TableCellValue, { hashCellWidth: hashCellWidth, value: value }) }))) : ((0, jsx_runtime_1.jsx)(TableCellValue, { hashCellWidth: hashCellWidth, value: value })) })) })));
|
|
57
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA+E;AAC/E,iDAA0C;AAC1C,iCAAmD;AAGnD,6CAAyC;AACzC,iEAA6D;AAC7D,qEAAiE;AAOjE,MAAM,cAAc,GAAkC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,25 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getRemainingRowWidth = void 0;
|
|
4
|
-
|
|
5
|
-
var _a, _b, _c, _d;
|
|
6
|
-
const computedStyles = window.getComputedStyle(item, null);
|
|
7
|
-
return (parseInt((_b = (_a = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('padding-left')) === null || _a === void 0 ? void 0 : _a.replaceAll('px', '')) !== null && _b !== void 0 ? _b : 0) + parseInt((_d = (_c = computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.getPropertyValue('padding-right')) === null || _c === void 0 ? void 0 : _c.replaceAll('px', '')) !== null && _d !== void 0 ? _d : 0));
|
|
8
|
-
};
|
|
4
|
+
/** @description This is the width of all the cells (except the one passed) in the row combined */
|
|
9
5
|
const getRemainingRowWidth = (row, forCell = 0) => {
|
|
10
6
|
var _a, _b;
|
|
11
7
|
let width = 0;
|
|
12
|
-
let padding = 0;
|
|
13
8
|
for (let i = 0; i < ((_a = row === null || row === void 0 ? void 0 : row.childElementCount) !== null && _a !== void 0 ? _a : 0); i++) {
|
|
14
9
|
const item = row === null || row === void 0 ? void 0 : row.children.item(i);
|
|
15
10
|
if (item) {
|
|
16
11
|
if (i !== forCell) {
|
|
17
|
-
|
|
12
|
+
const boundingRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
|
|
13
|
+
console.log(`getRemainingRowWidth:rect: ${boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width}`);
|
|
14
|
+
width += (_b = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width) !== null && _b !== void 0 ? _b : 0;
|
|
18
15
|
}
|
|
19
|
-
padding += getPadding(item);
|
|
20
16
|
}
|
|
21
17
|
}
|
|
22
|
-
return width
|
|
18
|
+
return width;
|
|
23
19
|
};
|
|
24
20
|
exports.getRemainingRowWidth = getRemainingRowWidth;
|
|
25
21
|
//# sourceMappingURL=getRemainingRowWidth.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":";;;AAAA,kGAAkG;AAC3F,MAAM,oBAAoB,GAAG,CAAC,GAAgB,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;;IACpE,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,iBAAiB,mCAAI,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,OAAO,EAAE;gBACjB,MAAM,YAAY,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,EAAE,CAAA;gBAClD,OAAO,CAAC,GAAG,CAAC,8BAA8B,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,EAAE,CAAC,CAAA;gBAChE,KAAK,IAAI,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,mCAAI,CAAC,CAAA;aAClC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAdY,QAAA,oBAAoB,wBAchC"}
|
|
@@ -4,7 +4,7 @@ exports.getSmallestParentWidth = void 0;
|
|
|
4
4
|
const getSmallestParentWidth = (element, maxDepth = 4) => {
|
|
5
5
|
var _a, _b, _c;
|
|
6
6
|
let currentElement = element === null || element === void 0 ? void 0 : element.parentElement;
|
|
7
|
-
let width = (_a = currentElement === null || currentElement === void 0 ? void 0 : currentElement.clientWidth) !== null && _a !== void 0 ? _a :
|
|
7
|
+
let width = (_a = currentElement === null || currentElement === void 0 ? void 0 : currentElement.clientWidth) !== null && _a !== void 0 ? _a : screen.width;
|
|
8
8
|
let maxDepthCounter = maxDepth;
|
|
9
9
|
while (currentElement && maxDepthCounter > 0) {
|
|
10
10
|
if (width > ((_b = currentElement.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b['width'])) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":";;;AAAO,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;;IAC3E,IAAI,cAAc,GAAuB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,mCAAI,
|
|
1
|
+
{"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":";;;AAAO,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;;IAC3E,IAAI,cAAc,GAAuB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,WAAW,mCAAI,MAAM,CAAC,KAAK,CAAA;IACvD,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,IAAG,MAAA,cAAc,CAAC,qBAAqB,EAAE,0CAAG,OAAO,CAAC,CAAA,EAAE;YAC7D,KAAK,GAAG,MAAA,cAAc,CAAC,qBAAqB,EAAE,0CAAG,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAZY,QAAA,sBAAsB,0BAYlC"}
|
package/dist/docs.json
CHANGED
|
@@ -5920,7 +5920,7 @@
|
|
|
5920
5920
|
"sources": [
|
|
5921
5921
|
{
|
|
5922
5922
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
5923
|
-
"line":
|
|
5923
|
+
"line": 37,
|
|
5924
5924
|
"character": 2
|
|
5925
5925
|
}
|
|
5926
5926
|
],
|
|
@@ -12667,7 +12667,7 @@
|
|
|
12667
12667
|
"sources": [
|
|
12668
12668
|
{
|
|
12669
12669
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
12670
|
-
"line":
|
|
12670
|
+
"line": 36,
|
|
12671
12671
|
"character": 2
|
|
12672
12672
|
}
|
|
12673
12673
|
],
|
|
@@ -12833,7 +12833,7 @@
|
|
|
12833
12833
|
"sources": [
|
|
12834
12834
|
{
|
|
12835
12835
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
12836
|
-
"line":
|
|
12836
|
+
"line": 35,
|
|
12837
12837
|
"character": 2
|
|
12838
12838
|
}
|
|
12839
12839
|
],
|
|
@@ -141877,7 +141877,7 @@
|
|
|
141877
141877
|
"sources": [
|
|
141878
141878
|
{
|
|
141879
141879
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
141880
|
-
"line":
|
|
141880
|
+
"line": 37,
|
|
141881
141881
|
"character": 2
|
|
141882
141882
|
}
|
|
141883
141883
|
],
|
|
@@ -148427,7 +148427,7 @@
|
|
|
148427
148427
|
"sources": [
|
|
148428
148428
|
{
|
|
148429
148429
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
148430
|
-
"line":
|
|
148430
|
+
"line": 36,
|
|
148431
148431
|
"character": 2
|
|
148432
148432
|
}
|
|
148433
148433
|
],
|
|
@@ -148584,7 +148584,7 @@
|
|
|
148584
148584
|
"sources": [
|
|
148585
148585
|
{
|
|
148586
148586
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
148587
|
-
"line":
|
|
148587
|
+
"line": 35,
|
|
148588
148588
|
"character": 2
|
|
148589
148589
|
}
|
|
148590
148590
|
],
|
|
@@ -148979,7 +148979,7 @@
|
|
|
148979
148979
|
"sources": [
|
|
148980
148980
|
{
|
|
148981
148981
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
148982
|
-
"line":
|
|
148982
|
+
"line": 34,
|
|
148983
148983
|
"character": 17
|
|
148984
148984
|
}
|
|
148985
148985
|
],
|
|
@@ -211037,7 +211037,7 @@
|
|
|
211037
211037
|
"sources": [
|
|
211038
211038
|
{
|
|
211039
211039
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
211040
|
-
"line":
|
|
211040
|
+
"line": 37,
|
|
211041
211041
|
"character": 2
|
|
211042
211042
|
}
|
|
211043
211043
|
],
|
|
@@ -217804,7 +217804,7 @@
|
|
|
217804
217804
|
"sources": [
|
|
217805
217805
|
{
|
|
217806
217806
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
217807
|
-
"line":
|
|
217807
|
+
"line": 36,
|
|
217808
217808
|
"character": 2
|
|
217809
217809
|
}
|
|
217810
217810
|
],
|
|
@@ -217970,7 +217970,7 @@
|
|
|
217970
217970
|
"sources": [
|
|
217971
217971
|
{
|
|
217972
217972
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
217973
|
-
"line":
|
|
217973
|
+
"line": 35,
|
|
217974
217974
|
"character": 2
|
|
217975
217975
|
}
|
|
217976
217976
|
],
|
|
@@ -391356,7 +391356,7 @@
|
|
|
391356
391356
|
"sources": [
|
|
391357
391357
|
{
|
|
391358
391358
|
"fileName": "packages/shared/src/components/TableCell/EllipsisTableCell.tsx",
|
|
391359
|
-
"line":
|
|
391359
|
+
"line": 40,
|
|
391360
391360
|
"character": 13
|
|
391361
391361
|
}
|
|
391362
391362
|
],
|
|
@@ -5,15 +5,18 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
5
5
|
import { findParent } from './findParent';
|
|
6
6
|
import { getRemainingRowWidth } from './getRemainingRowWidth';
|
|
7
7
|
import { getSmallestParentWidth } from './getSmallestParentWidth';
|
|
8
|
-
const TableCellValue = ({ value, hashCellWidth }) =>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
const TableCellValue = ({ value, hashCellWidth }) => {
|
|
9
|
+
console.log(`hashCellWidth: ${hashCellWidth}`);
|
|
10
|
+
return (_jsx(Typography, { variant: "body2", fontFamily: "monospace", style: {
|
|
11
|
+
display: 'block',
|
|
12
|
+
overflow: 'hidden',
|
|
13
|
+
textOverflow: 'ellipsis',
|
|
14
|
+
whiteSpace: 'nowrap',
|
|
15
|
+
width: hashCellWidth,
|
|
16
|
+
}, children: value }));
|
|
17
|
+
};
|
|
15
18
|
export const EllipsisTableCell = ({ value, to, href, ...props }) => {
|
|
16
|
-
const [hashCellWidth, setHashCellWidth] = useState();
|
|
19
|
+
const [hashCellWidth, setHashCellWidth] = useState(0);
|
|
17
20
|
const hashDivRef = useRef(null);
|
|
18
21
|
const theme = useTheme();
|
|
19
22
|
const spacing = parseInt(theme.spacing(2).substring(-2));
|
|
@@ -25,12 +28,7 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
|
|
|
25
28
|
const smallestParentWidth = getSmallestParentWidth(cell);
|
|
26
29
|
if (smallestParentWidth && row) {
|
|
27
30
|
const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing;
|
|
28
|
-
|
|
29
|
-
setHashCellWidth(remainderWidth);
|
|
30
|
-
}
|
|
31
|
-
else if (hashCellWidth === undefined) {
|
|
32
|
-
setHashCellWidth(cell.clientWidth);
|
|
33
|
-
}
|
|
31
|
+
setHashCellWidth(remainderWidth);
|
|
34
32
|
}
|
|
35
33
|
};
|
|
36
34
|
const onResize = () => {
|
|
@@ -45,7 +43,6 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
|
|
|
45
43
|
return () => {
|
|
46
44
|
window.removeEventListener('resize', onResize);
|
|
47
45
|
};
|
|
48
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
46
|
}, [hashDivRef, spacing]);
|
|
50
47
|
return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: _jsx(TableCellValue, { hashCellWidth: hashCellWidth, value: value }) })) : (_jsx(TableCellValue, { hashCellWidth: hashCellWidth, value: value })) }) }));
|
|
51
48
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAOjE,MAAM,cAAc,GAAkC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
const computedStyles = window.getComputedStyle(item, null);
|
|
3
|
-
return (parseInt(computedStyles?.getPropertyValue('padding-left')?.replaceAll('px', '') ?? 0) + parseInt(computedStyles?.getPropertyValue('padding-right')?.replaceAll('px', '') ?? 0));
|
|
4
|
-
};
|
|
1
|
+
/** @description This is the width of all the cells (except the one passed) in the row combined */
|
|
5
2
|
export const getRemainingRowWidth = (row, forCell = 0) => {
|
|
6
3
|
let width = 0;
|
|
7
|
-
let padding = 0;
|
|
8
4
|
for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
|
|
9
5
|
const item = row?.children.item(i);
|
|
10
6
|
if (item) {
|
|
11
7
|
if (i !== forCell) {
|
|
12
|
-
|
|
8
|
+
const boundingRect = item?.getBoundingClientRect();
|
|
9
|
+
console.log(`getRemainingRowWidth:rect: ${boundingRect?.width}`);
|
|
10
|
+
width += boundingRect?.width ?? 0;
|
|
13
11
|
}
|
|
14
|
-
padding += getPadding(item);
|
|
15
12
|
}
|
|
16
13
|
}
|
|
17
|
-
return width
|
|
14
|
+
return width;
|
|
18
15
|
};
|
|
19
16
|
//# sourceMappingURL=getRemainingRowWidth.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"getRemainingRowWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAgB,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;IACpE,IAAI,KAAK,GAAG,CAAC,CAAA;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,iBAAiB,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtD,MAAM,IAAI,GAAG,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QAClC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,KAAK,OAAO,EAAE;gBACjB,MAAM,YAAY,GAAG,IAAI,EAAE,qBAAqB,EAAE,CAAA;gBAClD,OAAO,CAAC,GAAG,CAAC,8BAA8B,YAAY,EAAE,KAAK,EAAE,CAAC,CAAA;gBAChE,KAAK,IAAI,YAAY,EAAE,KAAK,IAAI,CAAC,CAAA;aAClC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const getSmallestParentWidth = (element, maxDepth = 4) => {
|
|
2
2
|
let currentElement = element?.parentElement;
|
|
3
|
-
let width = currentElement?.clientWidth ??
|
|
3
|
+
let width = currentElement?.clientWidth ?? screen.width;
|
|
4
4
|
let maxDepthCounter = maxDepth;
|
|
5
5
|
while (currentElement && maxDepthCounter > 0) {
|
|
6
6
|
if (width > currentElement.getBoundingClientRect()?.['width']) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;IAC3E,IAAI,cAAc,GAAuB,OAAO,EAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,cAAc,EAAE,WAAW,IAAI,
|
|
1
|
+
{"version":3,"file":"getSmallestParentWidth.js","sourceRoot":"","sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAE,QAAQ,GAAG,CAAC,EAAE,EAAE;IAC3E,IAAI,cAAc,GAAuB,OAAO,EAAE,aAAa,CAAA;IAC/D,IAAI,KAAK,GAAG,cAAc,EAAE,WAAW,IAAI,MAAM,CAAC,KAAK,CAAA;IACvD,IAAI,eAAe,GAAG,QAAQ,CAAA;IAC9B,OAAO,cAAc,IAAI,eAAe,GAAG,CAAC,EAAE;QAC5C,IAAI,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE;YAC7D,KAAK,GAAG,cAAc,CAAC,qBAAqB,EAAE,EAAE,CAAC,OAAO,CAAC,CAAA;SAC1D;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC7C,eAAe,EAAE,CAAA;KAClB;IACD,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"@xyo-network/api": "^2.20.38",
|
|
23
23
|
"@xyo-network/core": "^2.20.38",
|
|
24
24
|
"@xyo-network/network": "^2.20.38",
|
|
25
|
-
"@xyo-network/react-theme": "^2.25.
|
|
25
|
+
"@xyo-network/react-theme": "^2.25.29",
|
|
26
26
|
"lodash": "^4.17.21",
|
|
27
27
|
"luxon": "^2.4.0",
|
|
28
28
|
"react": "^18.1.0",
|
|
@@ -113,6 +113,6 @@
|
|
|
113
113
|
},
|
|
114
114
|
"sideEffects": false,
|
|
115
115
|
"types": "dist/esm/index.d.ts",
|
|
116
|
-
"version": "2.25.
|
|
116
|
+
"version": "2.25.29",
|
|
117
117
|
"packageManager": "yarn@3.1.1"
|
|
118
118
|
}
|
|
@@ -12,21 +12,24 @@ interface TableCellValueProps {
|
|
|
12
12
|
hashCellWidth: number | undefined
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
const TableCellValue: React.FC<TableCellValueProps> = ({ value, hashCellWidth }) =>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
15
|
+
const TableCellValue: React.FC<TableCellValueProps> = ({ value, hashCellWidth }) => {
|
|
16
|
+
console.log(`hashCellWidth: ${hashCellWidth}`)
|
|
17
|
+
return (
|
|
18
|
+
<Typography
|
|
19
|
+
variant="body2"
|
|
20
|
+
fontFamily="monospace"
|
|
21
|
+
style={{
|
|
22
|
+
display: 'block',
|
|
23
|
+
overflow: 'hidden',
|
|
24
|
+
textOverflow: 'ellipsis',
|
|
25
|
+
whiteSpace: 'nowrap',
|
|
26
|
+
width: hashCellWidth,
|
|
27
|
+
}}
|
|
28
|
+
>
|
|
29
|
+
{value}
|
|
30
|
+
</Typography>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
30
33
|
|
|
31
34
|
export interface EllipsisTableCellProps extends TableCellProps {
|
|
32
35
|
value?: string
|
|
@@ -35,7 +38,7 @@ export interface EllipsisTableCellProps extends TableCellProps {
|
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to, href, ...props }) => {
|
|
38
|
-
const [hashCellWidth, setHashCellWidth] = useState<number>()
|
|
41
|
+
const [hashCellWidth, setHashCellWidth] = useState<number>(0)
|
|
39
42
|
const hashDivRef = useRef<HTMLDivElement>(null)
|
|
40
43
|
|
|
41
44
|
const theme = useTheme()
|
|
@@ -50,11 +53,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
|
|
|
50
53
|
const smallestParentWidth = getSmallestParentWidth(cell)
|
|
51
54
|
if (smallestParentWidth && row) {
|
|
52
55
|
const remainderWidth = smallestParentWidth - getRemainingRowWidth(row) - spacing
|
|
53
|
-
|
|
54
|
-
setHashCellWidth(remainderWidth)
|
|
55
|
-
} else if (hashCellWidth === undefined) {
|
|
56
|
-
setHashCellWidth(cell.clientWidth)
|
|
57
|
-
}
|
|
56
|
+
setHashCellWidth(remainderWidth)
|
|
58
57
|
}
|
|
59
58
|
}
|
|
60
59
|
|
|
@@ -71,7 +70,6 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
|
|
|
71
70
|
return () => {
|
|
72
71
|
window.removeEventListener('resize', onResize)
|
|
73
72
|
}
|
|
74
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
75
73
|
}, [hashDivRef, spacing])
|
|
76
74
|
|
|
77
75
|
return (
|
|
@@ -1,22 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
const computedStyles = window.getComputedStyle(item, null)
|
|
3
|
-
return (
|
|
4
|
-
parseInt(computedStyles?.getPropertyValue('padding-left')?.replaceAll('px', '') ?? 0) + parseInt(computedStyles?.getPropertyValue('padding-right')?.replaceAll('px', '') ?? 0)
|
|
5
|
-
)
|
|
6
|
-
}
|
|
7
|
-
|
|
1
|
+
/** @description This is the width of all the cells (except the one passed) in the row combined */
|
|
8
2
|
export const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {
|
|
9
3
|
let width = 0
|
|
10
|
-
let padding = 0
|
|
11
4
|
for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
|
|
12
5
|
const item = row?.children.item(i)
|
|
13
6
|
if (item) {
|
|
14
7
|
if (i !== forCell) {
|
|
15
|
-
|
|
8
|
+
const boundingRect = item?.getBoundingClientRect()
|
|
9
|
+
console.log(`getRemainingRowWidth:rect: ${boundingRect?.width}`)
|
|
10
|
+
width += boundingRect?.width ?? 0
|
|
16
11
|
}
|
|
17
|
-
padding += getPadding(item)
|
|
18
12
|
}
|
|
19
13
|
}
|
|
20
14
|
|
|
21
|
-
return width
|
|
15
|
+
return width
|
|
22
16
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {
|
|
2
2
|
let currentElement: HTMLElement | null = element?.parentElement
|
|
3
|
-
let width = currentElement?.clientWidth ??
|
|
3
|
+
let width = currentElement?.clientWidth ?? screen.width
|
|
4
4
|
let maxDepthCounter = maxDepth
|
|
5
5
|
while (currentElement && maxDepthCounter > 0) {
|
|
6
6
|
if (width > currentElement.getBoundingClientRect()?.['width']) {
|