@xyo-network/react-shared 2.36.3 → 2.37.0

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.
@@ -5,6 +5,7 @@ export interface EllipsisTableCellProps extends TableCellProps {
5
5
  value?: string;
6
6
  to?: To | undefined;
7
7
  href?: string | undefined;
8
+ forCell?: number;
8
9
  }
9
10
  export declare const EllipsisTableCell: React.FC<EllipsisTableCellProps>;
10
11
  //# 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,EAAE,MAAM,eAAe,CAAA;AAGzD,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;CAC1B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmF9D,CAAA"}
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,14 +1,15 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { TableCell } from '@mui/material';
2
+ import { TableCell, useTheme } from '@mui/material';
3
3
  import { LinkEx } from '@xylabs/react-link';
4
4
  import { useEffect, useRef, useState } from 'react';
5
5
  import { getActualPaddingX } from '../../lib';
6
6
  import { findParent } from './findParent';
7
7
  import { getRemainingRowWidth } from './getRemainingRowWidth';
8
8
  import { getSmallestParentWidth } from './getSmallestParentWidth';
9
- export const EllipsisTableCell = ({ children, value, to, href, ...props }) => {
9
+ export const EllipsisTableCell = ({ children, value, to, forCell, href, ...props }) => {
10
10
  const [calcCellWidth, setCalcCellWidth] = useState(0);
11
11
  const hashDivRef = useRef(null);
12
+ const theme = useTheme();
12
13
  useEffect(() => {
13
14
  const currentElement = hashDivRef.current?.parentElement;
14
15
  const cell = findParent('td', currentElement);
@@ -16,7 +17,7 @@ export const EllipsisTableCell = ({ children, value, to, href, ...props }) => {
16
17
  const checkWidth = (cell) => {
17
18
  const smallestParentWidth = getSmallestParentWidth(cell);
18
19
  if (smallestParentWidth && row) {
19
- const remainingWidth = getRemainingRowWidth(row);
20
+ const remainingWidth = getRemainingRowWidth(row, forCell);
20
21
  const actualPaddingX = getActualPaddingX(cell);
21
22
  const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX;
22
23
  cell.style.width = `${remainderWidth}`;
@@ -37,22 +38,25 @@ export const EllipsisTableCell = ({ children, value, to, href, ...props }) => {
37
38
  window.removeEventListener('resize', onResize);
38
39
  row?.removeEventListener('resize', onResize);
39
40
  };
40
- }, [hashDivRef]);
41
+ }, [forCell, hashDivRef]);
41
42
  return (_jsx(TableCell, { ...props, children: _jsx("div", { ref: hashDivRef, children: children ? (_jsx("span", { style: {
42
43
  display: 'block',
43
44
  maxWidth: calcCellWidth,
45
+ minWidth: theme.spacing(10),
44
46
  overflow: 'hidden',
45
47
  textOverflow: 'ellipsis',
46
48
  whiteSpace: 'nowrap',
47
49
  }, children: children })) : href || to ? (_jsx(LinkEx, { style: {
48
50
  display: 'block',
49
51
  maxWidth: calcCellWidth,
52
+ minWidth: theme.spacing(10),
50
53
  overflow: 'hidden',
51
54
  textOverflow: 'ellipsis',
52
55
  whiteSpace: 'nowrap',
53
56
  }, to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (_jsx("span", { style: {
54
57
  display: 'block',
55
58
  maxWidth: calcCellWidth,
59
+ minWidth: theme.spacing(10),
56
60
  overflow: 'hidden',
57
61
  textOverflow: 'ellipsis',
58
62
  whiteSpace: 'nowrap',
@@ -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":"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"}
@@ -5,6 +5,7 @@ export interface HashTableCellProps extends EllipsisTableCellProps {
5
5
  dataType?: 'block' | 'payload';
6
6
  exploreDomain?: string;
7
7
  network?: string;
8
+ forCell?: number;
8
9
  }
9
10
  export declare const HashTableCell: React.FC<HashTableCellProps>;
10
11
  //# 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;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAWtD,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;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAYtD,CAAA"}
@@ -1,8 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { EllipsisTableCell } from './EllipsisTableCell';
3
- export const HashTableCell = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
3
+ export const HashTableCell = ({ value, archive, forCell, dataType, network, exploreDomain, ...props }) => {
4
4
  const hashPath = `/${dataType}/hash/${value}?network=${network ?? 'main'}`;
5
5
  const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath;
6
- return (_jsx(EllipsisTableCell, { value: value, href: exploreDomain ? `${exploreDomain}${explorePath}}` : undefined, to: exploreDomain ? undefined : explorePath, ...props }));
6
+ return (_jsx(EllipsisTableCell, { forCell: forCell, value: value, href: exploreDomain ? `${exploreDomain}${explorePath}}` : undefined, to: exploreDomain ? undefined : explorePath, ...props }));
7
7
  };
8
8
  //# sourceMappingURL=HashTableCell.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"HashTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/HashTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAA;AAS/E,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5H,MAAM,QAAQ,GAAG,IAAI,QAAQ,SAAS,KAAK,YAAY,OAAO,IAAI,MAAM,EAAE,CAAA;IAC1E,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzE,OAAO,CACL,KAAC,iBAAiB,IAChB,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,KACvC,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"HashTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/HashTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAA;AAU/E,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrI,MAAM,QAAQ,GAAG,IAAI,QAAQ,SAAS,KAAK,YAAY,OAAO,IAAI,MAAM,EAAE,CAAA;IAC1E,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,YAAY,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzE,OAAO,CACL,KAAC,iBAAiB,IAChB,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,KACvC,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAA"}
package/package.json CHANGED
@@ -69,5 +69,5 @@
69
69
  },
70
70
  "sideEffects": false,
71
71
  "types": "dist/esm/index.d.ts",
72
- "version": "2.36.3"
72
+ "version": "2.37.0"
73
73
  }
@@ -1,4 +1,4 @@
1
- import { TableCell, TableCellProps } from '@mui/material'
1
+ import { TableCell, TableCellProps, useTheme } from '@mui/material'
2
2
  import { LinkEx } from '@xylabs/react-link'
3
3
  import { useEffect, useRef, useState } from 'react'
4
4
  import { To } from 'react-router-dom'
@@ -12,11 +12,13 @@ export interface EllipsisTableCellProps extends TableCellProps {
12
12
  value?: string
13
13
  to?: To | undefined
14
14
  href?: string | undefined
15
+ forCell?: number //cell index for ellipsized table cell
15
16
  }
16
17
 
17
- export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children, value, to, href, ...props }) => {
18
+ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children, value, to, forCell, href, ...props }) => {
18
19
  const [calcCellWidth, setCalcCellWidth] = useState<number>(0)
19
20
  const hashDivRef = useRef<HTMLDivElement>(null)
21
+ const theme = useTheme()
20
22
 
21
23
  useEffect(() => {
22
24
  const currentElement = hashDivRef.current?.parentElement
@@ -26,7 +28,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children,
26
28
  const checkWidth = (cell: HTMLElement) => {
27
29
  const smallestParentWidth = getSmallestParentWidth(cell)
28
30
  if (smallestParentWidth && row) {
29
- const remainingWidth = getRemainingRowWidth(row)
31
+ const remainingWidth = getRemainingRowWidth(row, forCell)
30
32
  const actualPaddingX = getActualPaddingX(cell)
31
33
  const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX
32
34
  cell.style.width = `${remainderWidth}`
@@ -49,7 +51,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children,
49
51
  window.removeEventListener('resize', onResize)
50
52
  row?.removeEventListener('resize', onResize)
51
53
  }
52
- }, [hashDivRef])
54
+ }, [forCell, hashDivRef])
53
55
 
54
56
  return (
55
57
  <TableCell {...props}>
@@ -59,6 +61,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children,
59
61
  style={{
60
62
  display: 'block',
61
63
  maxWidth: calcCellWidth,
64
+ minWidth: theme.spacing(10),
62
65
  overflow: 'hidden',
63
66
  textOverflow: 'ellipsis',
64
67
  whiteSpace: 'nowrap',
@@ -71,6 +74,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children,
71
74
  style={{
72
75
  display: 'block',
73
76
  maxWidth: calcCellWidth,
77
+ minWidth: theme.spacing(10),
74
78
  overflow: 'hidden',
75
79
  textOverflow: 'ellipsis',
76
80
  whiteSpace: 'nowrap',
@@ -86,6 +90,7 @@ export const EllipsisTableCell: React.FC<EllipsisTableCellProps> = ({ children,
86
90
  style={{
87
91
  display: 'block',
88
92
  maxWidth: calcCellWidth,
93
+ minWidth: theme.spacing(10),
89
94
  overflow: 'hidden',
90
95
  textOverflow: 'ellipsis',
91
96
  whiteSpace: 'nowrap',
@@ -5,13 +5,15 @@ export interface HashTableCellProps extends EllipsisTableCellProps {
5
5
  dataType?: 'block' | 'payload'
6
6
  exploreDomain?: string
7
7
  network?: string
8
+ forCell?: number //cell index for ellipsized table cell
8
9
  }
9
10
 
10
- export const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
11
+ export const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, forCell, dataType, network, exploreDomain, ...props }) => {
11
12
  const hashPath = `/${dataType}/hash/${value}?network=${network ?? 'main'}`
12
13
  const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath
13
14
  return (
14
15
  <EllipsisTableCell
16
+ forCell={forCell}
15
17
  value={value}
16
18
  href={exploreDomain ? `${exploreDomain}${explorePath}}` : undefined}
17
19
  to={exploreDomain ? undefined : explorePath}