@xyo-network/react-shared 2.37.0 → 2.37.2

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 (30) hide show
  1. package/dist/cjs/components/TableCell/EllipsisTableCell.d.ts +11 -4
  2. package/dist/cjs/components/TableCell/EllipsisTableCell.d.ts.map +1 -1
  3. package/dist/cjs/components/TableCell/EllipsisTableCell.js +41 -61
  4. package/dist/cjs/components/TableCell/EllipsisTableCell.js.map +1 -1
  5. package/dist/cjs/components/TableCell/EllipsisTableCellDeprecated.d.ts +12 -0
  6. package/dist/cjs/components/TableCell/EllipsisTableCellDeprecated.d.ts.map +1 -0
  7. package/dist/cjs/components/TableCell/EllipsisTableCellDeprecated.js +73 -0
  8. package/dist/cjs/components/TableCell/EllipsisTableCellDeprecated.js.map +1 -0
  9. package/dist/cjs/components/TableCell/HashTableCell.d.ts +0 -1
  10. package/dist/cjs/components/TableCell/HashTableCell.d.ts.map +1 -1
  11. package/dist/cjs/components/TableCell/HashTableCell.js +2 -2
  12. package/dist/cjs/components/TableCell/HashTableCell.js.map +1 -1
  13. package/dist/docs.json +371 -308
  14. package/dist/esm/components/TableCell/EllipsisTableCell.d.ts +11 -4
  15. package/dist/esm/components/TableCell/EllipsisTableCell.d.ts.map +1 -1
  16. package/dist/esm/components/TableCell/EllipsisTableCell.js +42 -61
  17. package/dist/esm/components/TableCell/EllipsisTableCell.js.map +1 -1
  18. package/dist/esm/components/TableCell/EllipsisTableCellDeprecated.d.ts +12 -0
  19. package/dist/esm/components/TableCell/EllipsisTableCellDeprecated.d.ts.map +1 -0
  20. package/dist/esm/components/TableCell/EllipsisTableCellDeprecated.js +66 -0
  21. package/dist/esm/components/TableCell/EllipsisTableCellDeprecated.js.map +1 -0
  22. package/dist/esm/components/TableCell/HashTableCell.d.ts +0 -1
  23. package/dist/esm/components/TableCell/HashTableCell.d.ts.map +1 -1
  24. package/dist/esm/components/TableCell/HashTableCell.js +2 -2
  25. package/dist/esm/components/TableCell/HashTableCell.js.map +1 -1
  26. package/package.json +6 -6
  27. package/src/components/TableCell/EllipsisTableCell.tsx +69 -93
  28. package/src/components/TableCell/EllipsisTableCellDeprecated.tsx +106 -0
  29. package/src/components/TableCell/EllipsizeTableCell.stories.tsx +99 -0
  30. package/src/components/TableCell/HashTableCell.tsx +1 -3
@@ -1,11 +1,18 @@
1
1
  /// <reference types="react" />
2
2
  import { TableCellProps } from '@mui/material';
3
+ import { WithChildren } from '@xylabs/react-shared';
3
4
  import { To } from 'react-router-dom';
4
5
  export interface EllipsisTableCellProps extends TableCellProps {
6
+ /**
7
+ * Width of the table cell.
8
+ *
9
+ * Note: When using percentages, this value can be different than what you expect
10
+ * if used on a cell that is not the first cell in the first row.
11
+ */
12
+ width?: string | number;
13
+ href?: string;
14
+ to?: To;
5
15
  value?: string;
6
- to?: To | undefined;
7
- href?: string | undefined;
8
- forCell?: number;
9
16
  }
10
- export declare const EllipsisTableCell: React.FC<EllipsisTableCellProps>;
17
+ export declare const EllipsisTableCell: React.FC<WithChildren<EllipsisTableCellProps>>;
11
18
  //# sourceMappingURL=EllipsisTableCell.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"EllipsisTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAY,MAAM,eAAe,CAAA;AAGnE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAOrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuF9D,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;AA8CrC,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,CAkB5E,CAAA"}
@@ -5,68 +5,48 @@ 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
- const react_1 = require("react");
9
- const lib_1 = require("../../lib");
10
- const findParent_1 = require("./findParent");
11
- const getRemainingRowWidth_1 = require("./getRemainingRowWidth");
12
- const getSmallestParentWidth_1 = require("./getSmallestParentWidth");
8
+ /**
9
+ * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
10
+ */
11
+ const ComponentName = 'EllipsisTableCell';
12
+ const EllipsisTableCellRoot = (0, material_1.styled)(material_1.TableCell, {
13
+ name: ComponentName,
14
+ shouldForwardProp: (prop) => prop !== 'width',
15
+ slot: 'Root',
16
+ })(({ 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',
46
+ }));
13
47
  const EllipsisTableCell = (_a) => {
14
- var { children, value, to, forCell, href } = _a, props = tslib_1.__rest(_a, ["children", "value", "to", "forCell", "href"]);
15
- const [calcCellWidth, setCalcCellWidth] = (0, react_1.useState)(0);
16
- const hashDivRef = (0, react_1.useRef)(null);
17
- const theme = (0, material_1.useTheme)();
18
- (0, react_1.useEffect)(() => {
19
- var _a;
20
- const currentElement = (_a = hashDivRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
21
- const cell = (0, findParent_1.findParent)('td', currentElement);
22
- const row = (0, findParent_1.findParent)('tr', currentElement);
23
- const checkWidth = (cell) => {
24
- const smallestParentWidth = (0, getSmallestParentWidth_1.getSmallestParentWidth)(cell);
25
- if (smallestParentWidth && row) {
26
- const remainingWidth = (0, getRemainingRowWidth_1.getRemainingRowWidth)(row, forCell);
27
- const actualPaddingX = (0, lib_1.getActualPaddingX)(cell);
28
- const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
29
- cell.style.width = `${remainderWidth}`;
30
- setCalcCellWidth(remainderWidth);
31
- }
32
- };
33
- const onResize = () => {
34
- if (cell) {
35
- checkWidth(cell);
36
- }
37
- };
38
- if (cell) {
39
- checkWidth(cell);
40
- window.addEventListener('resize', onResize);
41
- row === null || row === void 0 ? void 0 : row.addEventListener('resize', onResize);
42
- }
43
- return () => {
44
- window.removeEventListener('resize', onResize);
45
- row === null || row === void 0 ? void 0 : row.removeEventListener('resize', onResize);
46
- };
47
- }, [forCell, 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 }, { children: children ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: {
49
- display: 'block',
50
- maxWidth: calcCellWidth,
51
- minWidth: theme.spacing(10),
52
- overflow: 'hidden',
53
- textOverflow: 'ellipsis',
54
- whiteSpace: 'nowrap',
55
- } }, { children: children }))) : href || to ? ((0, jsx_runtime_1.jsx)(react_link_1.LinkEx, Object.assign({ style: {
56
- display: 'block',
57
- maxWidth: calcCellWidth,
58
- minWidth: theme.spacing(10),
59
- overflow: 'hidden',
60
- textOverflow: 'ellipsis',
61
- whiteSpace: 'nowrap',
62
- }, to: to, href: href, target: href ? '_blank' : undefined }, { children: value }))) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: {
63
- display: 'block',
64
- maxWidth: calcCellWidth,
65
- minWidth: theme.spacing(10),
66
- overflow: 'hidden',
67
- textOverflow: 'ellipsis',
68
- whiteSpace: 'nowrap',
69
- } }, { children: value }))) })) })));
48
+ 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)(EllipsisTableCellInnerWrap, { children: (0, jsx_runtime_1.jsx)(EllipsisTableCellContentWrap, { 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) }) }) })));
70
50
  };
71
51
  exports.EllipsisTableCell = EllipsisTableCell;
72
52
  //# sourceMappingURL=EllipsisTableCell.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiE;AACjE,mDAA2C;AAI3C;;GAEG;AAEH,MAAM,aAAa,GAAG,mBAAmB,CAAA;AAEzC,MAAM,qBAAqB,GAAG,IAAA,iBAAM,EAAC,oBAAS,EAAE;IAC9C,IAAI,EAAE,aAAa;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAyB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAClD,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;QACD,KAAK;KACN;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,0BAA0B,GAAG,IAAA,iBAAM,EAAC,KAAK,EAAE;IAC/C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,4BAA4B,GAAG,IAAA,iBAAM,EAAC,MAAM,EAAE;IAClD,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,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,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,0BAA0B,cACzB,uBAAC,4BAA4B,cAC1B,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,GAC4B,GACJ,IACP,CACzB,CAAA;AACH,CAAC,CAAA;AAlBY,QAAA,iBAAiB,qBAkB7B"}
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { TableCellProps } from '@mui/material';
3
+ import { To } from 'react-router-dom';
4
+ export interface EllipsisTableCellProps extends TableCellProps {
5
+ value?: string;
6
+ to?: To | undefined;
7
+ href?: string | undefined;
8
+ forCell?: number;
9
+ }
10
+ /** @deprecated - use new EllipsisTableCell */
11
+ export declare const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps>;
12
+ //# sourceMappingURL=EllipsisTableCellDeprecated.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EllipsisTableCellDeprecated.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCellDeprecated.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAY,MAAM,eAAe,CAAA;AAGnE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAOrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,EAAE,GAAG,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,8CAA8C;AAC9C,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuFxE,CAAA"}
@@ -0,0 +1,73 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.EllipsisTableCellDeprecated = 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
+ const react_link_1 = require("@xylabs/react-link");
8
+ const react_1 = require("react");
9
+ const lib_1 = require("../../lib");
10
+ const findParent_1 = require("./findParent");
11
+ const getRemainingRowWidth_1 = require("./getRemainingRowWidth");
12
+ const getSmallestParentWidth_1 = require("./getSmallestParentWidth");
13
+ /** @deprecated - use new EllipsisTableCell */
14
+ const EllipsisTableCellDeprecated = (_a) => {
15
+ var { children, value, to, forCell, href } = _a, props = tslib_1.__rest(_a, ["children", "value", "to", "forCell", "href"]);
16
+ const [calcCellWidth, setCalcCellWidth] = (0, react_1.useState)(0);
17
+ const hashDivRef = (0, react_1.useRef)(null);
18
+ const theme = (0, material_1.useTheme)();
19
+ (0, react_1.useEffect)(() => {
20
+ var _a;
21
+ const currentElement = (_a = hashDivRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
22
+ const cell = (0, findParent_1.findParent)('td', currentElement);
23
+ const row = (0, findParent_1.findParent)('tr', currentElement);
24
+ const checkWidth = (cell) => {
25
+ const smallestParentWidth = (0, getSmallestParentWidth_1.getSmallestParentWidth)(cell);
26
+ if (smallestParentWidth && row) {
27
+ const remainingWidth = (0, getRemainingRowWidth_1.getRemainingRowWidth)(row, forCell);
28
+ const actualPaddingX = (0, lib_1.getActualPaddingX)(cell);
29
+ const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
30
+ cell.style.width = `${remainderWidth}`;
31
+ setCalcCellWidth(remainderWidth);
32
+ }
33
+ };
34
+ const onResize = () => {
35
+ if (cell) {
36
+ checkWidth(cell);
37
+ }
38
+ };
39
+ if (cell) {
40
+ checkWidth(cell);
41
+ window.addEventListener('resize', onResize);
42
+ row === null || row === void 0 ? void 0 : row.addEventListener('resize', onResize);
43
+ }
44
+ return () => {
45
+ window.removeEventListener('resize', onResize);
46
+ row === null || row === void 0 ? void 0 : row.removeEventListener('resize', onResize);
47
+ };
48
+ }, [forCell, hashDivRef]);
49
+ return ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: hashDivRef }, { children: children ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: {
50
+ display: 'block',
51
+ maxWidth: calcCellWidth,
52
+ minWidth: theme.spacing(10),
53
+ overflow: 'hidden',
54
+ textOverflow: 'ellipsis',
55
+ whiteSpace: 'nowrap',
56
+ } }, { children: children }))) : href || to ? ((0, jsx_runtime_1.jsx)(react_link_1.LinkEx, Object.assign({ style: {
57
+ display: 'block',
58
+ maxWidth: calcCellWidth,
59
+ minWidth: theme.spacing(10),
60
+ overflow: 'hidden',
61
+ textOverflow: 'ellipsis',
62
+ whiteSpace: 'nowrap',
63
+ }, to: to, href: href, target: href ? '_blank' : undefined }, { children: value }))) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: {
64
+ display: 'block',
65
+ maxWidth: calcCellWidth,
66
+ minWidth: theme.spacing(10),
67
+ overflow: 'hidden',
68
+ textOverflow: 'ellipsis',
69
+ whiteSpace: 'nowrap',
70
+ } }, { children: value }))) })) })));
71
+ };
72
+ exports.EllipsisTableCellDeprecated = EllipsisTableCellDeprecated;
73
+ //# sourceMappingURL=EllipsisTableCellDeprecated.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EllipsisTableCellDeprecated.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCellDeprecated.tsx"],"names":[],"mappings":"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"}
@@ -5,7 +5,6 @@ export interface HashTableCellProps extends EllipsisTableCellProps {
5
5
  dataType?: 'block' | 'payload';
6
6
  exploreDomain?: string;
7
7
  network?: string;
8
- forCell?: number;
9
8
  }
10
9
  export declare const HashTableCell: React.FC<HashTableCellProps>;
11
10
  //# sourceMappingURL=HashTableCell.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"HashTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/HashTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAE/E,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAYtD,CAAA"}
1
+ {"version":3,"file":"HashTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/HashTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAE/E,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAWtD,CAAA"}
@@ -5,10 +5,10 @@ const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const EllipsisTableCell_1 = require("./EllipsisTableCell");
7
7
  const HashTableCell = (_a) => {
8
- var { value, archive, forCell, dataType, network, exploreDomain } = _a, props = tslib_1.__rest(_a, ["value", "archive", "forCell", "dataType", "network", "exploreDomain"]);
8
+ var { value, archive, dataType, network, exploreDomain } = _a, props = tslib_1.__rest(_a, ["value", "archive", "dataType", "network", "exploreDomain"]);
9
9
  const hashPath = `/${dataType}/hash/${value}?network=${network !== null && network !== void 0 ? network : 'main'}`;
10
10
  const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath;
11
- return ((0, jsx_runtime_1.jsx)(EllipsisTableCell_1.EllipsisTableCell, Object.assign({ forCell: forCell, value: value, href: exploreDomain ? `${exploreDomain}${explorePath}}` : undefined, to: exploreDomain ? undefined : explorePath }, props)));
11
+ return ((0, jsx_runtime_1.jsx)(EllipsisTableCell_1.EllipsisTableCell, Object.assign({ value: value, href: exploreDomain ? `${exploreDomain}${explorePath}}` : undefined, to: exploreDomain ? undefined : explorePath }, props)));
12
12
  };
13
13
  exports.HashTableCell = HashTableCell;
14
14
  //# sourceMappingURL=HashTableCell.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"HashTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/HashTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,2DAA+E;AAUxE,MAAM,aAAa,GAAiC,CAAC,EAAuE,EAAE,EAAE;QAA3E,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,OAAY,EAAP,KAAK,sBAArE,uEAAuE,CAAF;IAC/H,MAAM,QAAQ,GAAG,IAAI,QAAQ,SAAS,KAAK,YAAY,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,MAAM,EAAE,CAAA;IAC1E,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzE,OAAO,CACL,uBAAC,qCAAiB,kBAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,SAAS,EACnE,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IACvC,KAAK,EACT,CACH,CAAA;AACH,CAAC,CAAA;AAZY,QAAA,aAAa,iBAYzB"}
1
+ {"version":3,"file":"HashTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/HashTableCell.tsx"],"names":[],"mappings":";;;;;AAAA,2DAA+E;AASxE,MAAM,aAAa,GAAiC,CAAC,EAA8D,EAAE,EAAE;QAAlE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,OAAY,EAAP,KAAK,sBAA5D,4DAA8D,CAAF;IACtH,MAAM,QAAQ,GAAG,IAAI,QAAQ,SAAS,KAAK,YAAY,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,MAAM,EAAE,CAAA;IAC1E,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzE,OAAO,CACL,uBAAC,qCAAiB,kBAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,SAAS,EACnE,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IACvC,KAAK,EACT,CACH,CAAA;AACH,CAAC,CAAA;AAXY,QAAA,aAAa,iBAWzB"}