@xyo-network/react-shared 2.37.2 → 2.37.4
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/Ellipsize.d.ts +5 -0
- package/dist/cjs/components/Ellipsize.d.ts.map +1 -0
- package/dist/cjs/components/Ellipsize.js +50 -0
- package/dist/cjs/components/Ellipsize.js.map +1 -0
- package/dist/cjs/components/TableCell/EllipsisTableCell.d.ts.map +1 -1
- package/dist/cjs/components/TableCell/EllipsisTableCell.js +4 -35
- package/dist/cjs/components/TableCell/EllipsisTableCell.js.map +1 -1
- package/dist/docs.json +233 -233
- package/dist/esm/components/Ellipsize.d.ts +5 -0
- package/dist/esm/components/Ellipsize.d.ts.map +1 -0
- package/dist/esm/components/Ellipsize.js +44 -0
- package/dist/esm/components/Ellipsize.js.map +1 -0
- package/dist/esm/components/TableCell/EllipsisTableCell.d.ts.map +1 -1
- package/dist/esm/components/TableCell/EllipsisTableCell.js +4 -35
- package/dist/esm/components/TableCell/EllipsisTableCell.js.map +1 -1
- package/package.json +6 -6
- package/src/components/Ellipsize.tsx +55 -0
- package/src/components/TableCell/EllipsisTableCell.tsx +15 -51
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Ellipsize.d.ts","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,QAAQ,EAAU,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AA6CnD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAQtD,CAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Ellipsize = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const material_1 = require("@mui/material");
|
|
7
|
+
/**
|
|
8
|
+
* Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
|
|
9
|
+
*/
|
|
10
|
+
const ComponentName = 'Ellipsize';
|
|
11
|
+
const EllipsizeRoot = (0, material_1.styled)(material_1.Box, {
|
|
12
|
+
name: ComponentName,
|
|
13
|
+
slot: 'Root',
|
|
14
|
+
})(() => ({
|
|
15
|
+
'&': {
|
|
16
|
+
// because the cell content ends up absolutely positioned, the cell doesn't know the content height.
|
|
17
|
+
// the pseudo element with a hidden character establishes the proper height of the content and hides it
|
|
18
|
+
':before': {
|
|
19
|
+
content: "'nbsp;'",
|
|
20
|
+
display: 'block',
|
|
21
|
+
// take the pseudo element out of the `display: block` flow so it won't push against our actual content
|
|
22
|
+
float: 'left',
|
|
23
|
+
visibility: 'hidden',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
}));
|
|
27
|
+
const EllipsizeInnerWrap = (0, material_1.styled)(material_1.Box, {
|
|
28
|
+
name: ComponentName,
|
|
29
|
+
slot: 'innerWrap',
|
|
30
|
+
})(() => ({
|
|
31
|
+
position: 'relative',
|
|
32
|
+
}));
|
|
33
|
+
const EllipsizeContentWrap = (0, material_1.styled)('span', {
|
|
34
|
+
name: ComponentName,
|
|
35
|
+
slot: 'contentWrap',
|
|
36
|
+
})(() => ({
|
|
37
|
+
fontFamily: 'monospace',
|
|
38
|
+
left: 0,
|
|
39
|
+
overflow: 'hidden',
|
|
40
|
+
position: 'absolute',
|
|
41
|
+
right: 0,
|
|
42
|
+
textOverflow: 'ellipsis',
|
|
43
|
+
whiteSpace: 'nowrap',
|
|
44
|
+
}));
|
|
45
|
+
const Ellipsize = (_a) => {
|
|
46
|
+
var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)(EllipsizeRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(EllipsizeInnerWrap, { children: (0, jsx_runtime_1.jsx)(EllipsizeContentWrap, { children: children }) }) })));
|
|
48
|
+
};
|
|
49
|
+
exports.Ellipsize = Ellipsize;
|
|
50
|
+
//# sourceMappingURL=Ellipsize.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAqD;AAGrD;;GAEG;AAEH,MAAM,aAAa,GAAG,WAAW,CAAA;AAEjC,MAAM,aAAa,GAAG,IAAA,iBAAM,EAAC,cAAG,EAAE;IAChC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,GAAG,EAAE;QACH,oGAAoG;QACpG,uGAAuG;QACvG,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,OAAO;YAChB,uGAAuG;YACvG,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,QAAQ;SACrB;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,kBAAkB,GAAG,IAAA,iBAAM,EAAC,cAAG,EAAE;IACrC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,oBAAoB,GAAG,IAAA,iBAAM,EAAC,MAAM,EAAE;IAC1C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,WAAW;IACvB,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC,CAAA;AAEI,MAAM,SAAS,GAAqC,CAAC,EAAsB,EAAE,EAAE;QAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAApB,YAAsB,CAAF;IAC9E,OAAO,CACL,uBAAC,aAAa,oBAAK,KAAK,cACtB,uBAAC,kBAAkB,cACjB,uBAAC,oBAAoB,cAAE,QAAQ,GAAwB,GACpC,IACP,CACjB,CAAA;AACH,CAAC,CAAA;AARY,QAAA,SAAS,aAQrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EllipsisTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,cAAc,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"EllipsisTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,cAAc,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAYrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAgB5E,CAAA"}
|
|
@@ -5,48 +5,17 @@ const tslib_1 = require("tslib");
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const material_1 = require("@mui/material");
|
|
7
7
|
const react_link_1 = require("@xylabs/react-link");
|
|
8
|
-
|
|
9
|
-
* Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
|
|
10
|
-
*/
|
|
11
|
-
const ComponentName = 'EllipsisTableCell';
|
|
8
|
+
const Ellipsize_1 = require("../Ellipsize");
|
|
12
9
|
const EllipsisTableCellRoot = (0, material_1.styled)(material_1.TableCell, {
|
|
13
|
-
name:
|
|
10
|
+
name: 'EllipsisTableCell',
|
|
14
11
|
shouldForwardProp: (prop) => prop !== 'width',
|
|
15
12
|
slot: 'Root',
|
|
16
13
|
})(({ width = '100%' }) => ({
|
|
17
|
-
|
|
18
|
-
// because the cell content ends up absolutely positioned, the cell doesn't know the content height.
|
|
19
|
-
// the pseudo element with a hidden character establishes the proper height of the content and hides it
|
|
20
|
-
':before': {
|
|
21
|
-
content: "'nbsp;'",
|
|
22
|
-
display: 'block',
|
|
23
|
-
// take the pseudo element out of the `display: block` flow so it won't push against our actual content
|
|
24
|
-
float: 'left',
|
|
25
|
-
visibility: 'hidden',
|
|
26
|
-
},
|
|
27
|
-
width,
|
|
28
|
-
},
|
|
29
|
-
}));
|
|
30
|
-
const EllipsisTableCellInnerWrap = (0, material_1.styled)('div', {
|
|
31
|
-
name: ComponentName,
|
|
32
|
-
slot: 'innerWrap',
|
|
33
|
-
})(() => ({
|
|
34
|
-
position: 'relative',
|
|
35
|
-
}));
|
|
36
|
-
const EllipsisTableCellContentWrap = (0, material_1.styled)('span', {
|
|
37
|
-
name: ComponentName,
|
|
38
|
-
slot: 'contentWrap',
|
|
39
|
-
})(() => ({
|
|
40
|
-
left: 0,
|
|
41
|
-
overflow: 'hidden',
|
|
42
|
-
position: 'absolute',
|
|
43
|
-
right: 0,
|
|
44
|
-
textOverflow: 'ellipsis',
|
|
45
|
-
whiteSpace: 'nowrap',
|
|
14
|
+
width,
|
|
46
15
|
}));
|
|
47
16
|
const EllipsisTableCell = (_a) => {
|
|
48
17
|
var { children, href, to, value } = _a, props = tslib_1.__rest(_a, ["children", "href", "to", "value"]);
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)(EllipsisTableCellRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)(EllipsisTableCellRoot, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(Ellipsize_1.Ellipsize, { children: children ? (children) : href || to ? ((0, jsx_runtime_1.jsx)(react_link_1.LinkEx, Object.assign({ to: to, href: href, target: href ? '_blank' : undefined }, { children: value }))) : (value) }) })));
|
|
50
19
|
};
|
|
51
20
|
exports.EllipsisTableCell = EllipsisTableCell;
|
|
52
21
|
//# sourceMappingURL=EllipsisTableCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiE;AACjE,mDAA2C;AAI3C
|
|
1
|
+
{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiE;AACjE,mDAA2C;AAI3C,4CAAwC;AAExC,MAAM,qBAAqB,GAAG,IAAA,iBAAM,EAAC,oBAAS,EAAE;IAC9C,IAAI,EAAE,mBAAmB;IACzB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1B,KAAK;CACN,CAAC,CAAC,CAAA;AAeI,MAAM,iBAAiB,GAAmD,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,OAAY,EAAP,KAAK,sBAArC,mCAAuC,CAAF;IACrH,OAAO,CACL,uBAAC,qBAAqB,oBAAK,KAAK,cAC9B,uBAAC,qBAAS,cACP,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACf,uBAAC,mBAAM,kBAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,gBAC5D,KAAK,IACC,CACV,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACS,IACU,CACzB,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,iBAAiB,qBAgB7B"}
|