@xyo-network/react-shared 2.25.71 → 2.25.74
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 +21 -12
- package/dist/cjs/components/TableCell/EllipsisTableCell.js.map +1 -1
- package/dist/cjs/components/TableCell/getRemainingRowWidth.d.ts +1 -1
- package/dist/cjs/components/TableCell/getRemainingRowWidth.js +2 -3
- package/dist/cjs/components/TableCell/getRemainingRowWidth.js.map +1 -1
- package/dist/cjs/lib/getActualPaddingX.d.ts +13 -0
- package/dist/cjs/lib/getActualPaddingX.js +70 -0
- package/dist/cjs/lib/getActualPaddingX.js.map +1 -0
- package/dist/cjs/lib/index.d.ts +1 -0
- package/dist/cjs/lib/index.js +1 -0
- package/dist/cjs/lib/index.js.map +1 -1
- package/dist/esm/components/TableCell/EllipsisTableCell.js +16 -7
- package/dist/esm/components/TableCell/EllipsisTableCell.js.map +1 -1
- package/package.json +1 -1
- package/src/components/TableCell/EllipsisTableCell.tsx +29 -16
|
@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const material_1 = require("@mui/material");
|
|
7
7
|
const react_common_1 = require("@xylabs/react-common");
|
|
8
8
|
const react_1 = require("react");
|
|
9
|
+
const lib_1 = require("../../lib");
|
|
9
10
|
const findParent_1 = require("./findParent");
|
|
10
11
|
const getRemainingRowWidth_1 = require("./getRemainingRowWidth");
|
|
11
12
|
const getSmallestParentWidth_1 = require("./getSmallestParentWidth");
|
|
@@ -17,9 +18,6 @@ const EllipsisTableCell = (_a) => {
|
|
|
17
18
|
var { value, to, href } = _a, props = tslib_1.__rest(_a, ["value", "to", "href"]);
|
|
18
19
|
const [calcCellWidth, setCalcCellWidth] = (0, react_1.useState)(0);
|
|
19
20
|
const hashDivRef = (0, react_1.useRef)(null);
|
|
20
|
-
const theme = (0, material_1.useTheme)();
|
|
21
|
-
// We calulate the spacing since we know that table rows use padding.
|
|
22
|
-
const spacing = parseInt(theme.spacing(4).substring(-2));
|
|
23
21
|
(0, react_1.useEffect)(() => {
|
|
24
22
|
var _a;
|
|
25
23
|
const currentElement = (_a = hashDivRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
@@ -28,7 +26,10 @@ const EllipsisTableCell = (_a) => {
|
|
|
28
26
|
const checkWidth = (cell) => {
|
|
29
27
|
const smallestParentWidth = (0, getSmallestParentWidth_1.getSmallestParentWidth)(cell);
|
|
30
28
|
if (smallestParentWidth && row) {
|
|
31
|
-
const
|
|
29
|
+
const remainingWidth = (0, getRemainingRowWidth_1.getRemainingRowWidth)(row);
|
|
30
|
+
const actualPaddingX = (0, lib_1.getActualPaddingX)(cell);
|
|
31
|
+
const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
|
|
32
|
+
cell.style.width = `${remainderWidth}`;
|
|
32
33
|
setCalcCellWidth(remainderWidth);
|
|
33
34
|
}
|
|
34
35
|
};
|
|
@@ -40,18 +41,26 @@ const EllipsisTableCell = (_a) => {
|
|
|
40
41
|
if (cell) {
|
|
41
42
|
checkWidth(cell);
|
|
42
43
|
window.addEventListener('resize', onResize);
|
|
44
|
+
row === null || row === void 0 ? void 0 : row.addEventListener('resize', onResize);
|
|
43
45
|
}
|
|
44
46
|
return () => {
|
|
45
47
|
window.removeEventListener('resize', onResize);
|
|
48
|
+
row === null || row === void 0 ? void 0 : row.removeEventListener('resize', onResize);
|
|
46
49
|
};
|
|
47
|
-
}, [hashDivRef
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: hashDivRef, style: {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
}, [hashDivRef]);
|
|
51
|
+
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)(react_common_1.LinkEx, Object.assign({ style: {
|
|
52
|
+
display: 'block',
|
|
53
|
+
maxWidth: calcCellWidth,
|
|
54
|
+
overflow: 'hidden',
|
|
55
|
+
textOverflow: 'ellipsis',
|
|
56
|
+
whiteSpace: 'nowrap',
|
|
57
|
+
}, to: to, href: href, target: href ? '_blank' : undefined }, { children: value }))) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: {
|
|
58
|
+
display: 'block',
|
|
59
|
+
maxWidth: calcCellWidth,
|
|
60
|
+
overflow: 'hidden',
|
|
61
|
+
textOverflow: 'ellipsis',
|
|
62
|
+
whiteSpace: 'nowrap',
|
|
63
|
+
} }, { children: value }))) })) })));
|
|
55
64
|
};
|
|
56
65
|
exports.EllipsisTableCell = EllipsisTableCell;
|
|
57
66
|
//# sourceMappingURL=EllipsisTableCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/** @description This is the width of all the cells (except the one passed) in the row combined */
|
|
1
|
+
/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */
|
|
2
2
|
export declare const getRemainingRowWidth: (row: HTMLElement, forCell?: number) => number;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getRemainingRowWidth = void 0;
|
|
4
|
-
/** @description This is the width of all the cells (except the one passed) in the row combined */
|
|
4
|
+
/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */
|
|
5
5
|
const getRemainingRowWidth = (row, forCell = 0) => {
|
|
6
6
|
var _a, _b;
|
|
7
7
|
let width = 0;
|
|
@@ -9,8 +9,7 @@ const getRemainingRowWidth = (row, forCell = 0) => {
|
|
|
9
9
|
const item = row === null || row === void 0 ? void 0 : row.children.item(i);
|
|
10
10
|
if (item) {
|
|
11
11
|
if (i !== forCell) {
|
|
12
|
-
|
|
13
|
-
width += (_b = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.width) !== null && _b !== void 0 ? _b : 0;
|
|
12
|
+
width += (_b = item === null || item === void 0 ? void 0 : item.clientWidth) !== null && _b !== void 0 ? _b : 0;
|
|
14
13
|
}
|
|
15
14
|
}
|
|
16
15
|
}
|
|
@@ -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,mIAAmI;AAC5H,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,KAAK,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,mCAAI,CAAC,CAAA;aAChC;SACF;KACF;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAZY,QAAA,oBAAoB,wBAYhC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const parseMeausureString: (measure?: string, absolute?: number) => number | undefined;
|
|
2
|
+
export declare const parsePadding: (padding: string) => {
|
|
3
|
+
bottom: string;
|
|
4
|
+
left: string;
|
|
5
|
+
right: string;
|
|
6
|
+
top: string;
|
|
7
|
+
} | {
|
|
8
|
+
bottom: string;
|
|
9
|
+
right: string;
|
|
10
|
+
top: string;
|
|
11
|
+
left?: undefined;
|
|
12
|
+
} | undefined;
|
|
13
|
+
export declare const getActualPaddingX: (element: HTMLElement) => number;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getActualPaddingX = exports.parsePadding = exports.parseMeausureString = void 0;
|
|
4
|
+
const parseMeausureString = (measure, absolute) => {
|
|
5
|
+
if (measure !== undefined && measure !== null && measure.length > 0) {
|
|
6
|
+
if (measure.endsWith('px')) {
|
|
7
|
+
return parseFloat(measure.substring(0, measure.length - 2));
|
|
8
|
+
}
|
|
9
|
+
else if (measure.endsWith('%')) {
|
|
10
|
+
if (absolute !== undefined) {
|
|
11
|
+
return (parseFloat(measure.substring(0, measure.length - 1)) / 100) * absolute;
|
|
12
|
+
}
|
|
13
|
+
throw Error('Error Parsing Measure [missing absolute]');
|
|
14
|
+
}
|
|
15
|
+
else if (measure.endsWith('vw')) {
|
|
16
|
+
return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerWidth;
|
|
17
|
+
}
|
|
18
|
+
else if (measure.endsWith('vh')) {
|
|
19
|
+
return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerHeight;
|
|
20
|
+
}
|
|
21
|
+
throw Error(`Error Parsing Measure [${measure}]`);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
exports.parseMeausureString = parseMeausureString;
|
|
25
|
+
const parsePadding = (padding) => {
|
|
26
|
+
const parts = padding.split(' ');
|
|
27
|
+
switch (parts.length) {
|
|
28
|
+
case 4: {
|
|
29
|
+
return {
|
|
30
|
+
bottom: parts[2],
|
|
31
|
+
left: parts[3],
|
|
32
|
+
right: parts[1],
|
|
33
|
+
top: parts[0],
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
case 3: {
|
|
37
|
+
return {
|
|
38
|
+
bottom: parts[2],
|
|
39
|
+
right: parts[1],
|
|
40
|
+
top: parts[0],
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
case 2: {
|
|
44
|
+
return {
|
|
45
|
+
bottom: parts[0],
|
|
46
|
+
left: parts[1],
|
|
47
|
+
right: parts[1],
|
|
48
|
+
top: parts[0],
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
case 1: {
|
|
52
|
+
return {
|
|
53
|
+
bottom: parts[0],
|
|
54
|
+
left: parts[0],
|
|
55
|
+
right: parts[0],
|
|
56
|
+
top: parts[0],
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
exports.parsePadding = parsePadding;
|
|
62
|
+
const getActualPaddingX = (element) => {
|
|
63
|
+
var _a, _b, _c, _d;
|
|
64
|
+
const padding = (0, exports.parsePadding)(window.getComputedStyle(element, null).getPropertyValue('padding'));
|
|
65
|
+
const paddingLeft = (_b = (0, exports.parseMeausureString)((_a = window.getComputedStyle(element, null).getPropertyValue('padding-left')) !== null && _a !== void 0 ? _a : padding === null || padding === void 0 ? void 0 : padding.left, element.clientWidth)) !== null && _b !== void 0 ? _b : 0;
|
|
66
|
+
const paddingRight = (_d = (0, exports.parseMeausureString)((_c = window.getComputedStyle(element, null).getPropertyValue('padding-right')) !== null && _c !== void 0 ? _c : padding === null || padding === void 0 ? void 0 : padding.right, element.clientWidth)) !== null && _d !== void 0 ? _d : 0;
|
|
67
|
+
return paddingLeft + paddingRight;
|
|
68
|
+
};
|
|
69
|
+
exports.getActualPaddingX = getActualPaddingX;
|
|
70
|
+
//# sourceMappingURL=getActualPaddingX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getActualPaddingX.js","sourceRoot":"","sources":["../../../src/lib/getActualPaddingX.ts"],"names":[],"mappings":"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"}
|
package/dist/cjs/lib/index.d.ts
CHANGED
package/dist/cjs/lib/index.js
CHANGED
|
@@ -4,5 +4,6 @@ const tslib_1 = require("tslib");
|
|
|
4
4
|
tslib_1.__exportStar(require("./archivistPresets"), exports);
|
|
5
5
|
tslib_1.__exportStar(require("./assertDefinedEx"), exports);
|
|
6
6
|
tslib_1.__exportStar(require("./divinerPresets"), exports);
|
|
7
|
+
tslib_1.__exportStar(require("./getActualPaddingX"), exports);
|
|
7
8
|
tslib_1.__exportStar(require("./networkComponents"), exports);
|
|
8
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":";;;AAAA,6DAAkC;AAClC,4DAAiC;AACjC,2DAAgC;AAChC,8DAAmC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":";;;AAAA,6DAAkC;AAClC,4DAAiC;AACjC,2DAAgC;AAChC,8DAAmC;AACnC,8DAAmC"}
|
|
@@ -29,6 +29,7 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
|
|
|
29
29
|
const remainingWidth = getRemainingRowWidth(row);
|
|
30
30
|
const actualPaddingX = getActualPaddingX(cell);
|
|
31
31
|
const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
|
|
32
|
+
cell.style.width = `${remainderWidth}`;
|
|
32
33
|
setCalcCellWidth(remainderWidth);
|
|
33
34
|
}
|
|
34
35
|
};
|
|
@@ -40,17 +41,25 @@ export const EllipsisTableCell = ({ value, to, href, ...props }) => {
|
|
|
40
41
|
if (cell) {
|
|
41
42
|
checkWidth(cell);
|
|
42
43
|
window.addEventListener('resize', onResize);
|
|
44
|
+
row?.addEventListener('resize', onResize);
|
|
43
45
|
}
|
|
44
46
|
return () => {
|
|
45
47
|
window.removeEventListener('resize', onResize);
|
|
48
|
+
row?.removeEventListener('resize', onResize);
|
|
46
49
|
};
|
|
47
50
|
}, [hashDivRef]);
|
|
48
|
-
return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, style: {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: href || to ? (_jsx(LinkEx, { style: {
|
|
52
|
+
display: 'block',
|
|
53
|
+
maxWidth: calcCellWidth,
|
|
54
|
+
overflow: 'hidden',
|
|
55
|
+
textOverflow: 'ellipsis',
|
|
56
|
+
whiteSpace: 'nowrap',
|
|
57
|
+
}, to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (_jsx("span", { style: {
|
|
58
|
+
display: 'block',
|
|
59
|
+
maxWidth: calcCellWidth,
|
|
60
|
+
overflow: 'hidden',
|
|
61
|
+
textOverflow: 'ellipsis',
|
|
62
|
+
whiteSpace: 'nowrap',
|
|
63
|
+
}, children: value })) }) }));
|
|
55
64
|
};
|
|
56
65
|
//# sourceMappingURL=EllipsisTableCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,UAAU,
|
|
1
|
+
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,UAAU,EAAmB,MAAM,eAAe,CAAA;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7C,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,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClG,OAAO,CACL,KAAC,UAAU,IACT,OAAO,EAAC,OAAO,EACf,UAAU,EAAC,WAAW,EACtB,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,aAAa;YACvB,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,UAAU,EAAE,QAAQ;YACpB,GAAG,KAAK;SACT,KACG,KAAK,YAER,KAAK,GACK,CACd,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnG,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAC7D,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,EAAE,aAAa,CAAA;QACxD,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,cAAc,CAAC,CAAA;QAC7C,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,EAAE,cAAc,CAAC,CAAA;QAE5C,MAAM,UAAU,GAAG,CAAC,IAAiB,EAAE,EAAE;YACvC,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAA;YACxD,IAAI,mBAAmB,IAAI,GAAG,EAAE;gBAC9B,MAAM,cAAc,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;gBAChD,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAA;gBAC9C,MAAM,cAAc,GAAG,mBAAmB,GAAG,cAAc,GAAG,cAAc,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,cAAc,EAAE,CAAA;gBACtC,gBAAgB,CAAC,cAAc,CAAC,CAAA;aACjC;QACH,CAAC,CAAA;QAED,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,EAAE;gBACR,UAAU,CAAC,IAAI,CAAC,CAAA;aACjB;QACH,CAAC,CAAA;QAED,IAAI,IAAI,EAAE;YACR,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;YAC3C,GAAG,EAAE,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;SAC1C;QACD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;YAC9C,GAAG,EAAE,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC9C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,CACL,KAAC,SAAS,OAAK,KAAK,YAClB,cAAK,GAAG,EAAE,UAAU,YACjB,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,IACL,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,QAAQ,EAAE,aAAa;oBACvB,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;oBACxB,UAAU,EAAE,QAAQ;iBACrB,EACD,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAElC,KAAK,GACC,CACV,CAAC,CAAC,CAAC,CACF,eACE,KAAK,EAAE;oBACL,OAAO,EAAE,OAAO;oBAChB,QAAQ,EAAE,aAAa;oBACvB,QAAQ,EAAE,QAAQ;oBAClB,YAAY,EAAE,UAAU;oBACxB,UAAU,EAAE,QAAQ;iBACrB,YAEA,KAAK,GACD,CACR,GACG,GACI,CACb,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TableCell, TableCellProps, Typography, TypographyProps
|
|
1
|
+
import { TableCell, TableCellProps, Typography, TypographyProps } from '@mui/material'
|
|
2
2
|
import { LinkEx } from '@xylabs/react-common'
|
|
3
3
|
import { useEffect, useRef, useState } from 'react'
|
|
4
4
|
import { To } from 'react-router-dom'
|
|
@@ -54,6 +54,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
|
|
|
54
54
|
const remainingWidth = getRemainingRowWidth(row)
|
|
55
55
|
const actualPaddingX = getActualPaddingX(cell)
|
|
56
56
|
const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX
|
|
57
|
+
cell.style.width = `${remainderWidth}`
|
|
57
58
|
setCalcCellWidth(remainderWidth)
|
|
58
59
|
}
|
|
59
60
|
}
|
|
@@ -66,33 +67,45 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ value, to,
|
|
|
66
67
|
|
|
67
68
|
if (cell) {
|
|
68
69
|
checkWidth(cell)
|
|
69
|
-
row?.addEventListener('resize', onResize)
|
|
70
70
|
window.addEventListener('resize', onResize)
|
|
71
|
+
row?.addEventListener('resize', onResize)
|
|
71
72
|
}
|
|
72
73
|
return () => {
|
|
73
|
-
row?.removeEventListener('resize', onResize)
|
|
74
74
|
window.removeEventListener('resize', onResize)
|
|
75
|
+
row?.removeEventListener('resize', onResize)
|
|
75
76
|
}
|
|
76
77
|
}, [hashDivRef])
|
|
77
78
|
|
|
78
79
|
return (
|
|
79
80
|
<TableCell {...props}>
|
|
80
|
-
<div
|
|
81
|
-
ref={hashDivRef}
|
|
82
|
-
style={{
|
|
83
|
-
display: 'block',
|
|
84
|
-
maxWidth: calcCellWidth,
|
|
85
|
-
overflow: 'hidden',
|
|
86
|
-
textOverflow: 'ellipsis',
|
|
87
|
-
whiteSpace: 'nowrap',
|
|
88
|
-
}}
|
|
89
|
-
>
|
|
81
|
+
<div ref={hashDivRef}>
|
|
90
82
|
{href || to ? (
|
|
91
|
-
<LinkEx
|
|
92
|
-
|
|
83
|
+
<LinkEx
|
|
84
|
+
style={{
|
|
85
|
+
display: 'block',
|
|
86
|
+
maxWidth: calcCellWidth,
|
|
87
|
+
overflow: 'hidden',
|
|
88
|
+
textOverflow: 'ellipsis',
|
|
89
|
+
whiteSpace: 'nowrap',
|
|
90
|
+
}}
|
|
91
|
+
to={to}
|
|
92
|
+
href={href}
|
|
93
|
+
target={href ? '_blank' : undefined}
|
|
94
|
+
>
|
|
95
|
+
{value}
|
|
93
96
|
</LinkEx>
|
|
94
97
|
) : (
|
|
95
|
-
<
|
|
98
|
+
<span
|
|
99
|
+
style={{
|
|
100
|
+
display: 'block',
|
|
101
|
+
maxWidth: calcCellWidth,
|
|
102
|
+
overflow: 'hidden',
|
|
103
|
+
textOverflow: 'ellipsis',
|
|
104
|
+
whiteSpace: 'nowrap',
|
|
105
|
+
}}
|
|
106
|
+
>
|
|
107
|
+
{value}
|
|
108
|
+
</span>
|
|
96
109
|
)}
|
|
97
110
|
</div>
|
|
98
111
|
</TableCell>
|