@xyo-network/react-table 3.0.14 → 3.0.16
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/context/TableHeight/Provider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/context/TableHeight/Provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AACvE,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB,EAAE,YAAY;IAEpF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA0BlE,CAAA"}
|
package/dist/browser/index.mjs
CHANGED
|
@@ -55,23 +55,14 @@ import { createContextEx } from "@xyo-network/react-shared";
|
|
|
55
55
|
var TableHeightContext = createContextEx();
|
|
56
56
|
|
|
57
57
|
// src/context/TableHeight/Provider.tsx
|
|
58
|
-
import
|
|
58
|
+
import { useResetState } from "@xylabs/react-hooks";
|
|
59
|
+
import React3, { useMemo, useState } from "react";
|
|
59
60
|
var TableHeightProvider = /* @__PURE__ */ __name(({ children, additionalRows = 0, defaultVisibleRows, heightFormat = "px" }) => {
|
|
60
|
-
const [visibleRows, setVisibleRows] =
|
|
61
|
-
const [height, setHeight] = useState();
|
|
61
|
+
const [visibleRows, setVisibleRows] = useResetState(defaultVisibleRows);
|
|
62
62
|
const [rowHeight, setRowHeight] = useState();
|
|
63
|
-
const
|
|
64
|
-
height,
|
|
65
|
-
heightFormat
|
|
66
|
-
]);
|
|
67
|
-
useEffect(() => {
|
|
68
|
-
setVisibleRows(defaultVisibleRows);
|
|
69
|
-
}, [
|
|
70
|
-
defaultVisibleRows
|
|
71
|
-
]);
|
|
72
|
-
useEffect(() => {
|
|
63
|
+
const height = useMemo(() => {
|
|
73
64
|
if (rowHeight !== void 0 && visibleRows !== void 0) {
|
|
74
|
-
|
|
65
|
+
return rowHeight * (visibleRows + additionalRows);
|
|
75
66
|
}
|
|
76
67
|
}, [
|
|
77
68
|
defaultVisibleRows,
|
|
@@ -79,6 +70,10 @@ var TableHeightProvider = /* @__PURE__ */ __name(({ children, additionalRows = 0
|
|
|
79
70
|
visibleRows,
|
|
80
71
|
additionalRows
|
|
81
72
|
]);
|
|
73
|
+
const formattedHeight = useMemo(() => height === void 0 ? void 0 : `${height}${heightFormat}`, [
|
|
74
|
+
height,
|
|
75
|
+
heightFormat
|
|
76
|
+
]);
|
|
82
77
|
const value = useMemo(() => ({
|
|
83
78
|
height: formattedHeight,
|
|
84
79
|
provided: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/TableEx/TableCellEx.tsx","../../src/components/TableEx/TableEx.tsx","../../src/components/TableEx/TableFooterEx.tsx","../../src/context/TableHeight/Context.ts","../../src/context/TableHeight/Provider.tsx","../../src/context/TableHeight/use.ts"],"sourcesContent":["import type { TableCellProps } from '@mui/material'\nimport { styled, TableCell } from '@mui/material'\n\nexport interface TableCellExProps extends TableCellProps {\n noBgColor?: boolean\n}\n\nexport const TableCellEx = styled(TableCell, { name: 'TableCellNoBgColor', shouldForwardProp: prop => prop !== 'noBgColor' })<TableCellExProps>(\n ({ noBgColor = true }) => ({ ...(noBgColor && { backgroundColor: 'transparent' }) }),\n)\n","import type { TableProps } from '@mui/material'\nimport { Table } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React, { forwardRef } from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nexport interface TableExProps extends PropsWithChildren, TableProps {\n variant?: TableExVariants\n}\n\nconst TableExInner = forwardRef<HTMLTableElement, TableExProps>(({ children, ...props }, ref) => {\n return (\n <Table ref={ref} {...props}>\n {children}\n </Table>\n )\n})\n\nTableExInner.displayName = 'TableExInner'\n\nexport const TableExWithRef = forwardRef<HTMLTableElement, TableExProps>(({\n variant, children, ...props\n}, ref) => {\n return (\n <TableExInner stickyHeader={variant === 'scrollable'} ref={ref} {...props}>\n {children}\n </TableExInner>\n )\n})\n\nTableExWithRef.displayName = 'TableEx'\n\nexport const TableEx = TableExWithRef\n","import type { TableFooterProps } from '@mui/material'\nimport { styled, TableFooter } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nconst TableFooterExRoot = styled(TableFooter, {\n name: 'TableFooterEx',\n shouldForwardProp: propName => propName !== 'scrollable',\n slot: 'Root',\n})<TableFooterExProps>(({ variant, theme }) => ({\n backgroundColor: theme.palette.background.default,\n bottom: 'unset',\n position: 'relative',\n ...(variant === 'scrollable' && {\n bottom: 0,\n position: 'sticky',\n }),\n}))\n\nexport interface TableFooterExProps extends PropsWithChildren, TableFooterProps {\n variant?: TableExVariants\n}\n\nexport const TableFooterEx: React.FC<TableFooterExProps> = ({ children, ...props }) => <TableFooterExRoot {...props}>{children}</TableFooterExRoot>\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport type { TableHeightState } from './State.ts'\n\nexport const TableHeightContext = createContextEx<TableHeightState>()\n","import type { WithChildren } from '@xylabs/react-shared'\nimport type { ContextExProviderProps } from '@xyo-network/react-shared'\nimport React, {
|
|
1
|
+
{"version":3,"sources":["../../src/components/TableEx/TableCellEx.tsx","../../src/components/TableEx/TableEx.tsx","../../src/components/TableEx/TableFooterEx.tsx","../../src/context/TableHeight/Context.ts","../../src/context/TableHeight/Provider.tsx","../../src/context/TableHeight/use.ts"],"sourcesContent":["import type { TableCellProps } from '@mui/material'\nimport { styled, TableCell } from '@mui/material'\n\nexport interface TableCellExProps extends TableCellProps {\n noBgColor?: boolean\n}\n\nexport const TableCellEx = styled(TableCell, { name: 'TableCellNoBgColor', shouldForwardProp: prop => prop !== 'noBgColor' })<TableCellExProps>(\n ({ noBgColor = true }) => ({ ...(noBgColor && { backgroundColor: 'transparent' }) }),\n)\n","import type { TableProps } from '@mui/material'\nimport { Table } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React, { forwardRef } from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nexport interface TableExProps extends PropsWithChildren, TableProps {\n variant?: TableExVariants\n}\n\nconst TableExInner = forwardRef<HTMLTableElement, TableExProps>(({ children, ...props }, ref) => {\n return (\n <Table ref={ref} {...props}>\n {children}\n </Table>\n )\n})\n\nTableExInner.displayName = 'TableExInner'\n\nexport const TableExWithRef = forwardRef<HTMLTableElement, TableExProps>(({\n variant, children, ...props\n}, ref) => {\n return (\n <TableExInner stickyHeader={variant === 'scrollable'} ref={ref} {...props}>\n {children}\n </TableExInner>\n )\n})\n\nTableExWithRef.displayName = 'TableEx'\n\nexport const TableEx = TableExWithRef\n","import type { TableFooterProps } from '@mui/material'\nimport { styled, TableFooter } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nconst TableFooterExRoot = styled(TableFooter, {\n name: 'TableFooterEx',\n shouldForwardProp: propName => propName !== 'scrollable',\n slot: 'Root',\n})<TableFooterExProps>(({ variant, theme }) => ({\n backgroundColor: theme.palette.background.default,\n bottom: 'unset',\n position: 'relative',\n ...(variant === 'scrollable' && {\n bottom: 0,\n position: 'sticky',\n }),\n}))\n\nexport interface TableFooterExProps extends PropsWithChildren, TableFooterProps {\n variant?: TableExVariants\n}\n\nexport const TableFooterEx: React.FC<TableFooterExProps> = ({ children, ...props }) => <TableFooterExRoot {...props}>{children}</TableFooterExRoot>\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport type { TableHeightState } from './State.ts'\n\nexport const TableHeightContext = createContextEx<TableHeightState>()\n","import { useResetState } from '@xylabs/react-hooks'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport type { ContextExProviderProps } from '@xyo-network/react-shared'\nimport React, { useMemo, useState } from 'react'\n\nimport { TableHeightContext } from './Context.ts'\n\nexport interface TableHeightProviderProps extends ContextExProviderProps, WithChildren {\n /** @field Account for optional header and footer rows */\n additionalRows?: number\n defaultVisibleRows?: number\n heightFormat?: string\n}\n\nexport const TableHeightProvider: React.FC<TableHeightProviderProps> = ({\n children,\n additionalRows = 0,\n defaultVisibleRows,\n heightFormat = 'px',\n}) => {\n const [visibleRows, setVisibleRows] = useResetState(defaultVisibleRows)\n const [rowHeight, setRowHeight] = useState<number | undefined>()\n\n const height = useMemo(() => {\n if (rowHeight !== undefined && visibleRows !== undefined) {\n return rowHeight * (visibleRows + additionalRows)\n }\n }, [defaultVisibleRows, rowHeight, visibleRows, additionalRows])\n\n const formattedHeight = useMemo(() => (height === undefined ? undefined : `${height}${heightFormat}`), [height, heightFormat])\n\n const value = useMemo(() => ({\n height: formattedHeight, provided: true, rowHeight, setRowHeight, setVisibleRows, visibleRows,\n }), [formattedHeight, rowHeight, setRowHeight, setVisibleRows, visibleRows])\n\n return (\n <TableHeightContext.Provider value={value}>\n {children}\n </TableHeightContext.Provider>\n )\n}\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { TableHeightContext } from './Context.ts'\n\nexport const useTableHeight = (required = false) => useContextEx(TableHeightContext, 'TableHeight', required)\n"],"mappings":";;;;AACA,SAASA,QAAQC,iBAAiB;AAM3B,IAAMC,cAAcC,OAAOC,WAAW;EAAEC,MAAM;EAAsBC,mBAAmBC,wBAAAA,SAAQA,SAAS,aAAjBA;AAA6B,CAAA,EACzH,CAAC,EAAEC,YAAY,KAAI,OAAQ;EAAE,GAAIA,aAAa;IAAEC,iBAAiB;EAAc;AAAG,EAAA;;;ACPpF,SAASC,aAAa;AAEtB,OAAOC,SAASC,kBAAkB;AAQlC,IAAMC,eAAeD,2BAA2C,CAAC,EAAEE,UAAU,GAAGC,MAAAA,GAASC,QAAAA;AACvF,SACE,sBAAA,cAACN,OAAAA;IAAMM;IAAW,GAAGD;KAClBD,QAAAA;AAGP,CAAA;AAEAD,aAAaI,cAAc;AAEpB,IAAMC,iBAAiBN,2BAA2C,CAAC,EACxEO,SAASL,UAAU,GAAGC,MAAAA,GACrBC,QAAAA;AACD,SACE,sBAAA,cAACH,cAAAA;IAAaO,cAAcD,YAAY;IAAcH;IAAW,GAAGD;KACjED,QAAAA;AAGP,CAAA;AAEAI,eAAeD,cAAc;AAEtB,IAAMI,UAAUH;;;AChCvB,SAASI,UAAAA,SAAQC,mBAAmB;AAEpC,OAAOC,YAAW;AAIlB,IAAMC,oBAAoBC,QAAOC,aAAa;EAC5CC,MAAM;EACNC,mBAAmBC,wBAAAA,aAAYA,aAAa,cAAzBA;EACnBC,MAAM;AACR,CAAA,EAAuB,CAAC,EAAEC,SAASC,MAAK,OAAQ;EAC9CC,iBAAiBD,MAAME,QAAQC,WAAWC;EAC1CC,QAAQ;EACRC,UAAU;EACV,GAAIP,YAAY,gBAAgB;IAC9BM,QAAQ;IACRC,UAAU;EACZ;AACF,EAAA;AAMO,IAAMC,gBAA8C,wBAAC,EAAEC,UAAU,GAAGC,MAAAA,MAAY,gBAAAC,OAAA,cAAClB,mBAAsBiB,OAAQD,QAAAA,GAA3D;;;ACzB3D,SAASG,uBAAuB;AAIzB,IAAMC,qBAAqBD,gBAAAA;;;ACJlC,SAASE,qBAAqB;AAG9B,OAAOC,UAASC,SAASC,gBAAgB;AAWlC,IAAMC,sBAA0D,wBAAC,EACtEC,UACAC,iBAAiB,GACjBC,oBACAC,eAAe,KAAI,MACpB;AACC,QAAM,CAACC,aAAaC,cAAAA,IAAkBC,cAAcJ,kBAAAA;AACpD,QAAM,CAACK,WAAWC,YAAAA,IAAgBC,SAAAA;AAElC,QAAMC,SAASC,QAAQ,MAAA;AACrB,QAAIJ,cAAcK,UAAaR,gBAAgBQ,QAAW;AACxD,aAAOL,aAAaH,cAAcH;IACpC;EACF,GAAG;IAACC;IAAoBK;IAAWH;IAAaH;GAAe;AAE/D,QAAMY,kBAAkBF,QAAQ,MAAOD,WAAWE,SAAYA,SAAY,GAAGF,MAAAA,GAASP,YAAAA,IAAiB;IAACO;IAAQP;GAAa;AAE7H,QAAMW,QAAQH,QAAQ,OAAO;IAC3BD,QAAQG;IAAiBE,UAAU;IAAMR;IAAWC;IAAcH;IAAgBD;EACpF,IAAI;IAACS;IAAiBN;IAAWC;IAAcH;IAAgBD;GAAY;AAE3E,SACE,gBAAAY,OAAA,cAACC,mBAAmBC,UAAQ;IAACJ;KAC1Bd,QAAAA;AAGP,GA1BuE;;;ACdvE,SAASmB,oBAAoB;AAItB,IAAMC,iBAAiB,wBAACC,WAAW,UAAUC,aAAaC,oBAAoB,eAAeF,QAAAA,GAAtE;","names":["styled","TableCell","TableCellEx","styled","TableCell","name","shouldForwardProp","prop","noBgColor","backgroundColor","Table","React","forwardRef","TableExInner","children","props","ref","displayName","TableExWithRef","variant","stickyHeader","TableEx","styled","TableFooter","React","TableFooterExRoot","styled","TableFooter","name","shouldForwardProp","propName","slot","variant","theme","backgroundColor","palette","background","default","bottom","position","TableFooterEx","children","props","React","createContextEx","TableHeightContext","useResetState","React","useMemo","useState","TableHeightProvider","children","additionalRows","defaultVisibleRows","heightFormat","visibleRows","setVisibleRows","useResetState","rowHeight","setRowHeight","useState","height","useMemo","undefined","formattedHeight","value","provided","React","TableHeightContext","Provider","useContextEx","useTableHeight","required","useContextEx","TableHeightContext"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-table",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.16",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -43,8 +43,9 @@
|
|
|
43
43
|
"lint-pkg": "npmPkgJsonLint ."
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@xylabs/react-
|
|
47
|
-
"@
|
|
46
|
+
"@xylabs/react-hooks": "^4.2.10",
|
|
47
|
+
"@xylabs/react-shared": "^4.2.10",
|
|
48
|
+
"@xyo-network/react-shared": "^3.0.16"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
50
51
|
"@mui/icons-material": "^5.16.7",
|
|
@@ -53,7 +54,7 @@
|
|
|
53
54
|
"@storybook/react": "^8.2.9",
|
|
54
55
|
"@xylabs/ts-scripts-yarn3": "^4.0.7",
|
|
55
56
|
"@xylabs/tsconfig-react": "^4.0.7",
|
|
56
|
-
"@xyo-network/react-storybook": "^3.0.
|
|
57
|
+
"@xyo-network/react-storybook": "^3.0.16",
|
|
57
58
|
"react": "^18.3.1",
|
|
58
59
|
"react-dom": "^18.3.1",
|
|
59
60
|
"storybook": "^8.2.9",
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
+
import { useResetState } from '@xylabs/react-hooks'
|
|
1
2
|
import type { WithChildren } from '@xylabs/react-shared'
|
|
2
3
|
import type { ContextExProviderProps } from '@xyo-network/react-shared'
|
|
3
|
-
import React, {
|
|
4
|
-
useEffect, useMemo, useState,
|
|
5
|
-
} from 'react'
|
|
4
|
+
import React, { useMemo, useState } from 'react'
|
|
6
5
|
|
|
7
6
|
import { TableHeightContext } from './Context.ts'
|
|
8
7
|
|
|
@@ -19,22 +18,17 @@ export const TableHeightProvider: React.FC<TableHeightProviderProps> = ({
|
|
|
19
18
|
defaultVisibleRows,
|
|
20
19
|
heightFormat = 'px',
|
|
21
20
|
}) => {
|
|
22
|
-
const [visibleRows, setVisibleRows] =
|
|
23
|
-
const [height, setHeight] = useState<number | undefined>()
|
|
21
|
+
const [visibleRows, setVisibleRows] = useResetState(defaultVisibleRows)
|
|
24
22
|
const [rowHeight, setRowHeight] = useState<number | undefined>()
|
|
25
23
|
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
setVisibleRows(defaultVisibleRows)
|
|
30
|
-
}, [defaultVisibleRows])
|
|
31
|
-
|
|
32
|
-
useEffect(() => {
|
|
24
|
+
const height = useMemo(() => {
|
|
33
25
|
if (rowHeight !== undefined && visibleRows !== undefined) {
|
|
34
|
-
|
|
26
|
+
return rowHeight * (visibleRows + additionalRows)
|
|
35
27
|
}
|
|
36
28
|
}, [defaultVisibleRows, rowHeight, visibleRows, additionalRows])
|
|
37
29
|
|
|
30
|
+
const formattedHeight = useMemo(() => (height === undefined ? undefined : `${height}${heightFormat}`), [height, heightFormat])
|
|
31
|
+
|
|
38
32
|
const value = useMemo(() => ({
|
|
39
33
|
height: formattedHeight, provided: true, rowHeight, setRowHeight, setVisibleRows, visibleRows,
|
|
40
34
|
}), [formattedHeight, rowHeight, setRowHeight, setVisibleRows, visibleRows])
|