@oneblink/apps-react 9.0.0 → 9.0.1-beta.3
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.
|
@@ -106,6 +106,7 @@ function OneBlinkFormStoreTable() {
|
|
|
106
106
|
const columnSizingInfo = getState().columnSizingInfo;
|
|
107
107
|
const columnSizing = getState().columnSizing;
|
|
108
108
|
const visibleColumns = getState().columnVisibility;
|
|
109
|
+
const flatHeaders = getFlatHeaders();
|
|
109
110
|
/**
|
|
110
111
|
* Pinched from
|
|
111
112
|
* https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant
|
|
@@ -120,11 +121,10 @@ function OneBlinkFormStoreTable() {
|
|
|
120
121
|
columnSizingInfo;
|
|
121
122
|
columnSizing;
|
|
122
123
|
/* eslint-enable @typescript-eslint/no-unused-expressions */
|
|
123
|
-
const headers = getFlatHeaders();
|
|
124
124
|
const colSizes = {};
|
|
125
|
-
for (const header of
|
|
125
|
+
for (const header of flatHeaders) {
|
|
126
126
|
// This check isn't actually necessary, but `visibleColumns` is required as a dependency
|
|
127
|
-
// to force a re-calculation of the memo when the columns are hidden/show,
|
|
127
|
+
// to force a re-calculation of the memo when the columns are hidden/show,
|
|
128
128
|
// so we use it here do get around having to ignore eslint dep reules
|
|
129
129
|
if (visibleColumns[header.column.id] === false) {
|
|
130
130
|
continue;
|
|
@@ -133,7 +133,7 @@ function OneBlinkFormStoreTable() {
|
|
|
133
133
|
colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
|
|
134
134
|
}
|
|
135
135
|
return colSizes;
|
|
136
|
-
}, [
|
|
136
|
+
}, [flatHeaders, columnSizingInfo, columnSizing, visibleColumns]);
|
|
137
137
|
if (!parentHeaderGroup) {
|
|
138
138
|
return null;
|
|
139
139
|
}
|
|
@@ -226,7 +226,9 @@ function OneBlinkFormStoreTable() {
|
|
|
226
226
|
// Apply the cell props
|
|
227
227
|
return (_jsx(IsHoveringProvider, { className: clsx('td tc ob-form-store-table-row-cell', {
|
|
228
228
|
'is-resizing': cell.column.getIsResizing(),
|
|
229
|
-
}), style: {
|
|
229
|
+
}), style: {
|
|
230
|
+
width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
|
|
231
|
+
}, children:
|
|
230
232
|
// Render the cell contents
|
|
231
233
|
flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.column.id));
|
|
232
234
|
}) }, row.id));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OneBlinkFormStoreTable.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { styled, Tooltip } from '@mui/material'\nimport { flexRender } from '@tanstack/react-table'\nimport { formStoreService } from '../../apps'\nimport { IsHoveringProvider } from '../../hooks/useIsHovering'\nimport HeaderCellMoreButton from './table/HeaderCellMoreButton'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport MaterialIcon from '../MaterialIcon'\n\nconst SortingIcon = styled(MaterialIcon)(({ theme }) => ({\n transition: theme.transitions.create('transform'),\n}))\n\nconst Table = styled('div')(({ theme }) => ({\n display: 'inline-block',\n backgroundColor: theme.palette.background.paper,\n fontSize: theme.typography.body2.fontSize,\n '& .ob-form-store-table-row__alternate': {\n backgroundColor: theme.palette.action.hover,\n },\n '& .tc': {\n padding: theme.spacing(1),\n borderBottom: '1px solid',\n borderBottomColor: theme.palette.divider,\n display: 'flex',\n alignItems: 'center',\n '&.is-clickable': {\n cursor: 'pointer',\n transition: theme.transitions.create('transform'),\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n },\n '& .td': {\n position: 'relative',\n borderRight: '1px solid',\n borderRightColor: theme.palette.divider,\n overflowX: 'hidden',\n // minus 1 to cater for the border\n minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,\n '&.is-resizing': {\n borderRightStyle: 'dashed',\n },\n },\n '& .th': {\n position: 'relative',\n fontWeight: theme.typography.fontWeightBold,\n paddingRight: 0,\n borderBottomWidth: '2px',\n '& .th-content': {\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n borderRight: '1px solid',\n borderRightColor: theme.palette.divider,\n paddingRight: theme.spacing(),\n '& .th-label': {\n display: 'inline-flex',\n alignItems: 'center',\n '& .th-icon': {\n marginLeft: theme.spacing(),\n },\n },\n },\n '& .resizer': {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 0,\n borderLeftStyle: 'solid',\n borderRightStyle: 'solid',\n borderColor: theme.palette.divider,\n paddingTop: theme.spacing(),\n paddingBottom: theme.spacing(),\n paddingRight: `calc(${theme.spacing(1)} + 1px)`,\n position: 'absolute',\n right: 0,\n top: theme.spacing(0.5),\n bottom: theme.spacing(0.5),\n transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,\n cursor: 'col-resize',\n zIndex: 1,\n // prevents from scrolling while dragging on touch devices\n touchAction: 'none',\n '&:hover': {\n borderWidth: '1px',\n },\n '&.is-resizing': {\n borderWidth: '1px',\n borderColor: theme.palette.grey[700],\n },\n },\n },\n}))\n\nconst HeaderRow = styled('div')(() => ({\n display: 'flex',\n}))\n\nconst CellRow = styled('div')(() => ({\n display: 'flex',\n}))\n\nfunction OneBlinkFormStoreTable() {\n const {\n getHeaderGroups,\n getCoreRowModel,\n getFlatHeaders,\n getState,\n onChangeParameters,\n } = useFormStoreTableContext()\n\n const [parentHeaderGroup] = getHeaderGroups()\n const rows = getCoreRowModel().rows\n\n const columnSizingInfo = getState().columnSizingInfo\n const columnSizing = getState().columnSizing\n const visibleColumns = getState().columnVisibility\n\n /**\n * Pinched from\n * https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant\n * Instead of calling `column.getSize()` on every render for every header and\n * especially every data cell (very expensive), we will calculate all column\n * sizes at once at the root table level in a useMemo and pass the column\n * sizes down as CSS variables to the <table> element.\n */\n\n const columnSizeVars = React.useMemo(() => {\n // we want the memo to recalculate if these change, dropping them here so the linter doesn't complain about unused dependencies\n /* eslint-disable @typescript-eslint/no-unused-expressions */\n columnSizingInfo\n columnSizing\n /* eslint-enable @typescript-eslint/no-unused-expressions */\n const headers = getFlatHeaders()\n const colSizes: { [key: string]: number } = {}\n for (const header of headers) {\n // This check isn't actually necessary, but `visibleColumns` is required as a dependency\n // to force a re-calculation of the memo when the columns are hidden/show, \n // so we use it here do get around having to ignore eslint dep reules\n if (visibleColumns[header.column.id] === false) {\n continue\n }\n colSizes[`--header-${header.id}-size`] = header.getSize()\n colSizes[`--col-${header.column.id}-size`] = header.column.getSize()\n }\n return colSizes\n }, [getFlatHeaders, columnSizingInfo, columnSizing, visibleColumns])\n\n if (!parentHeaderGroup) {\n return null\n }\n\n const rowBackground = { alternate: false }\n\n return (\n <>\n <Table className=\"ob-form-store-table\" style={{ ...columnSizeVars }}>\n <div className=\"thead\">\n <HeaderRow className=\"tr ob-form-store-table-header-row\">\n {\n // Loop over the headers in each row\n parentHeaderGroup.headers.map((header) => {\n const sortingProperty =\n header.column.columnDef.meta?.sorting?.property\n const sortingDirection = header.column.getIsSorted()\n\n if (!header.column.getIsVisible()) {\n return null\n }\n\n return (\n <Tooltip\n title={header.column.columnDef?.meta?.tooltip || ''}\n arrow\n key={header.id}\n slotProps={{\n popper: {\n sx: {\n zIndex: 'drawer',\n },\n },\n }}\n >\n <div\n className={clsx('th tc ob-form-store-table-header-cell', {\n 'is-clickable': !!sortingProperty,\n })}\n onClick={\n sortingProperty\n ? () => {\n onChangeParameters(\n (\n currentParameters: formStoreService.FormStoreParameters,\n ) => {\n const sortingMeta =\n header.column.columnDef.meta?.sorting\n ?.property\n if (!sortingMeta) {\n return currentParameters\n }\n switch (sortingDirection) {\n case 'asc': {\n return {\n ...currentParameters,\n sorting: [\n {\n property: sortingMeta,\n direction: 'descending',\n },\n ],\n }\n }\n case 'desc': {\n return {\n ...currentParameters,\n sorting: undefined,\n }\n }\n default: {\n return {\n ...currentParameters,\n sorting: [\n {\n property: sortingMeta,\n direction: 'ascending',\n },\n ],\n }\n }\n }\n },\n false,\n )\n }\n : undefined\n }\n style={{\n width: `calc(var(--header-${header?.id}-size) * 1px)`,\n }}\n >\n <IsHoveringProvider className=\"th-content\">\n <div className=\"th-label\">\n <span>\n {typeof header.column.columnDef?.header === 'string'\n ? header.column.columnDef?.header\n : ''}\n </span>\n {sortingDirection && (\n <SortingIcon\n fontSize=\"small\"\n color=\"primary\"\n sx={\n sortingDirection === 'asc'\n ? {\n transform: 'rotate(180deg)',\n }\n : undefined\n }\n className=\"th-icon\"\n >\n arrow_downward\n </SortingIcon>\n )}\n\n {header.column.columnDef.meta?.filter?.isInvalid ? (\n <Tooltip\n title={\n header.column.columnDef.meta?.filter\n ?.validationMessage || ''\n }\n >\n <MaterialIcon\n fontSize=\"small\"\n color=\"error\"\n className=\"th-icon\"\n >\n warning\n </MaterialIcon>\n </Tooltip>\n ) : header.column.columnDef.meta?.filter?.value ? (\n <MaterialIcon\n fontSize=\"small\"\n color=\"primary\"\n className=\"th-icon\"\n >\n filter_list\n </MaterialIcon>\n ) : null}\n </div>\n <HeaderCellMoreButton\n header={header}\n onHide={() => header.column.toggleVisibility()}\n />\n <div\n className={clsx('resizer', {\n 'is-resizing': header.column.getIsResizing(),\n })}\n onClick={(event) => {\n event.stopPropagation()\n }}\n onDoubleClick={() => header.column.resetSize()}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n />\n </IsHoveringProvider>\n </div>\n </Tooltip>\n )\n })\n }\n </HeaderRow>\n </div>\n <div className=\"tbody\">\n {\n // Loop over the table rows\n rows.map((row, index) => {\n if (\n rows[index - 1]?.original.submissionId !==\n row.original.submissionId\n ) {\n rowBackground.alternate = !rowBackground.alternate\n }\n return (\n // Apply the row props\n <CellRow\n key={row.id}\n className={clsx('tr ob-form-store-table-row', {\n 'ob-form-store-table-row__alternate': rowBackground.alternate,\n })}\n >\n {\n // Loop over the rows cells\n row.getVisibleCells().map((cell) => {\n // Apply the cell props\n return (\n <IsHoveringProvider\n key={cell.column.id}\n className={clsx(\n 'td tc ob-form-store-table-row-cell',\n {\n 'is-resizing': cell.column.getIsResizing(),\n },\n )}\n style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }}\n >\n {\n // Render the cell contents\n flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )\n }\n </IsHoveringProvider>\n )\n })\n }\n </CellRow>\n )\n })\n }\n </div>\n </Table>\n </>\n )\n}\n\n/**\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreTable)\n"]}
|
|
1
|
+
{"version":3,"file":"OneBlinkFormStoreTable.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { styled, Tooltip } from '@mui/material'\nimport { flexRender } from '@tanstack/react-table'\nimport { formStoreService } from '../../apps'\nimport { IsHoveringProvider } from '../../hooks/useIsHovering'\nimport HeaderCellMoreButton from './table/HeaderCellMoreButton'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport MaterialIcon from '../MaterialIcon'\n\nconst SortingIcon = styled(MaterialIcon)(({ theme }) => ({\n transition: theme.transitions.create('transform'),\n}))\n\nconst Table = styled('div')(({ theme }) => ({\n display: 'inline-block',\n backgroundColor: theme.palette.background.paper,\n fontSize: theme.typography.body2.fontSize,\n '& .ob-form-store-table-row__alternate': {\n backgroundColor: theme.palette.action.hover,\n },\n '& .tc': {\n padding: theme.spacing(1),\n borderBottom: '1px solid',\n borderBottomColor: theme.palette.divider,\n display: 'flex',\n alignItems: 'center',\n '&.is-clickable': {\n cursor: 'pointer',\n transition: theme.transitions.create('transform'),\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n },\n '& .td': {\n position: 'relative',\n borderRight: '1px solid',\n borderRightColor: theme.palette.divider,\n overflowX: 'hidden',\n // minus 1 to cater for the border\n minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,\n '&.is-resizing': {\n borderRightStyle: 'dashed',\n },\n },\n '& .th': {\n position: 'relative',\n fontWeight: theme.typography.fontWeightBold,\n paddingRight: 0,\n borderBottomWidth: '2px',\n '& .th-content': {\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n borderRight: '1px solid',\n borderRightColor: theme.palette.divider,\n paddingRight: theme.spacing(),\n '& .th-label': {\n display: 'inline-flex',\n alignItems: 'center',\n '& .th-icon': {\n marginLeft: theme.spacing(),\n },\n },\n },\n '& .resizer': {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 0,\n borderLeftStyle: 'solid',\n borderRightStyle: 'solid',\n borderColor: theme.palette.divider,\n paddingTop: theme.spacing(),\n paddingBottom: theme.spacing(),\n paddingRight: `calc(${theme.spacing(1)} + 1px)`,\n position: 'absolute',\n right: 0,\n top: theme.spacing(0.5),\n bottom: theme.spacing(0.5),\n transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,\n cursor: 'col-resize',\n zIndex: 1,\n // prevents from scrolling while dragging on touch devices\n touchAction: 'none',\n '&:hover': {\n borderWidth: '1px',\n },\n '&.is-resizing': {\n borderWidth: '1px',\n borderColor: theme.palette.grey[700],\n },\n },\n },\n}))\n\nconst HeaderRow = styled('div')(() => ({\n display: 'flex',\n}))\n\nconst CellRow = styled('div')(() => ({\n display: 'flex',\n}))\n\nfunction OneBlinkFormStoreTable() {\n const {\n getHeaderGroups,\n getCoreRowModel,\n getFlatHeaders,\n getState,\n onChangeParameters,\n } = useFormStoreTableContext()\n\n const [parentHeaderGroup] = getHeaderGroups()\n const rows = getCoreRowModel().rows\n\n const columnSizingInfo = getState().columnSizingInfo\n const columnSizing = getState().columnSizing\n const visibleColumns = getState().columnVisibility\n const flatHeaders = getFlatHeaders()\n\n /**\n * Pinched from\n * https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant\n * Instead of calling `column.getSize()` on every render for every header and\n * especially every data cell (very expensive), we will calculate all column\n * sizes at once at the root table level in a useMemo and pass the column\n * sizes down as CSS variables to the <table> element.\n */\n\n const columnSizeVars = React.useMemo(() => {\n // we want the memo to recalculate if these change, dropping them here so the linter doesn't complain about unused dependencies\n /* eslint-disable @typescript-eslint/no-unused-expressions */\n columnSizingInfo\n columnSizing\n /* eslint-enable @typescript-eslint/no-unused-expressions */\n const colSizes: { [key: string]: number } = {}\n for (const header of flatHeaders) {\n // This check isn't actually necessary, but `visibleColumns` is required as a dependency\n // to force a re-calculation of the memo when the columns are hidden/show,\n // so we use it here do get around having to ignore eslint dep reules\n if (visibleColumns[header.column.id] === false) {\n continue\n }\n colSizes[`--header-${header.id}-size`] = header.getSize()\n colSizes[`--col-${header.column.id}-size`] = header.column.getSize()\n }\n return colSizes\n }, [flatHeaders, columnSizingInfo, columnSizing, visibleColumns])\n\n if (!parentHeaderGroup) {\n return null\n }\n\n const rowBackground = { alternate: false }\n\n return (\n <>\n <Table className=\"ob-form-store-table\" style={{ ...columnSizeVars }}>\n <div className=\"thead\">\n <HeaderRow className=\"tr ob-form-store-table-header-row\">\n {\n // Loop over the headers in each row\n parentHeaderGroup.headers.map((header) => {\n const sortingProperty =\n header.column.columnDef.meta?.sorting?.property\n const sortingDirection = header.column.getIsSorted()\n\n if (!header.column.getIsVisible()) {\n return null\n }\n\n return (\n <Tooltip\n title={header.column.columnDef?.meta?.tooltip || ''}\n arrow\n key={header.id}\n slotProps={{\n popper: {\n sx: {\n zIndex: 'drawer',\n },\n },\n }}\n >\n <div\n className={clsx('th tc ob-form-store-table-header-cell', {\n 'is-clickable': !!sortingProperty,\n })}\n onClick={\n sortingProperty\n ? () => {\n onChangeParameters(\n (\n currentParameters: formStoreService.FormStoreParameters,\n ) => {\n const sortingMeta =\n header.column.columnDef.meta?.sorting\n ?.property\n if (!sortingMeta) {\n return currentParameters\n }\n switch (sortingDirection) {\n case 'asc': {\n return {\n ...currentParameters,\n sorting: [\n {\n property: sortingMeta,\n direction: 'descending',\n },\n ],\n }\n }\n case 'desc': {\n return {\n ...currentParameters,\n sorting: undefined,\n }\n }\n default: {\n return {\n ...currentParameters,\n sorting: [\n {\n property: sortingMeta,\n direction: 'ascending',\n },\n ],\n }\n }\n }\n },\n false,\n )\n }\n : undefined\n }\n style={{\n width: `calc(var(--header-${header?.id}-size) * 1px)`,\n }}\n >\n <IsHoveringProvider className=\"th-content\">\n <div className=\"th-label\">\n <span>\n {typeof header.column.columnDef?.header === 'string'\n ? header.column.columnDef?.header\n : ''}\n </span>\n {sortingDirection && (\n <SortingIcon\n fontSize=\"small\"\n color=\"primary\"\n sx={\n sortingDirection === 'asc'\n ? {\n transform: 'rotate(180deg)',\n }\n : undefined\n }\n className=\"th-icon\"\n >\n arrow_downward\n </SortingIcon>\n )}\n\n {header.column.columnDef.meta?.filter?.isInvalid ? (\n <Tooltip\n title={\n header.column.columnDef.meta?.filter\n ?.validationMessage || ''\n }\n >\n <MaterialIcon\n fontSize=\"small\"\n color=\"error\"\n className=\"th-icon\"\n >\n warning\n </MaterialIcon>\n </Tooltip>\n ) : header.column.columnDef.meta?.filter?.value ? (\n <MaterialIcon\n fontSize=\"small\"\n color=\"primary\"\n className=\"th-icon\"\n >\n filter_list\n </MaterialIcon>\n ) : null}\n </div>\n <HeaderCellMoreButton\n header={header}\n onHide={() => header.column.toggleVisibility()}\n />\n <div\n className={clsx('resizer', {\n 'is-resizing': header.column.getIsResizing(),\n })}\n onClick={(event) => {\n event.stopPropagation()\n }}\n onDoubleClick={() => header.column.resetSize()}\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n />\n </IsHoveringProvider>\n </div>\n </Tooltip>\n )\n })\n }\n </HeaderRow>\n </div>\n <div className=\"tbody\">\n {\n // Loop over the table rows\n rows.map((row, index) => {\n if (\n rows[index - 1]?.original.submissionId !==\n row.original.submissionId\n ) {\n rowBackground.alternate = !rowBackground.alternate\n }\n return (\n // Apply the row props\n <CellRow\n key={row.id}\n className={clsx('tr ob-form-store-table-row', {\n 'ob-form-store-table-row__alternate':\n rowBackground.alternate,\n })}\n >\n {\n // Loop over the rows cells\n row.getVisibleCells().map((cell) => {\n // Apply the cell props\n return (\n <IsHoveringProvider\n key={cell.column.id}\n className={clsx(\n 'td tc ob-form-store-table-row-cell',\n {\n 'is-resizing': cell.column.getIsResizing(),\n },\n )}\n style={{\n width: `calc(var(--col-${cell.column.id}-size) * 1px)`,\n }}\n >\n {\n // Render the cell contents\n flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )\n }\n </IsHoveringProvider>\n )\n })\n }\n </CellRow>\n )\n })\n }\n </div>\n </Table>\n </>\n )\n}\n\n/**\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreTable)\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "9.0.
|
|
4
|
+
"version": "9.0.1-beta.3",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|