@economic/taco 2.26.6 → 2.26.8
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/esm/packages/taco/src/components/Report/Report.js +11 -1
- package/dist/esm/packages/taco/src/components/Report/Report.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +11 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableStyleGrid.js +49 -46
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableStyleGrid.js.map +1 -1
- package/dist/primitives/Table/Core/features/useTableStyle.d.ts +60 -60
- package/dist/taco.cjs.development.js +70 -48
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -9,7 +9,7 @@ function Column(_) {
|
|
|
9
9
|
function Group(_) {
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
12
|
-
const
|
|
12
|
+
const BaseReport = /*#__PURE__*/fixedForwardRef(function BaseReport(props, ref) {
|
|
13
13
|
const report = useReport(props, ref);
|
|
14
14
|
return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
|
|
15
15
|
table: report
|
|
@@ -18,6 +18,16 @@ const Report = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
|
|
|
18
18
|
table: report
|
|
19
19
|
}));
|
|
20
20
|
});
|
|
21
|
+
const Report = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
|
|
22
|
+
const stringifiedChildren = String(props.children);
|
|
23
|
+
// we force a remount (using key) when the child columns change because there are too many places to add children as an effect
|
|
24
|
+
// this is cheaper from a complexity perspective, and probably performance wise as well
|
|
25
|
+
const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
|
|
26
|
+
return /*#__PURE__*/React__default.createElement(BaseReport, Object.assign({}, props, {
|
|
27
|
+
key: key,
|
|
28
|
+
ref: ref
|
|
29
|
+
}));
|
|
30
|
+
});
|
|
21
31
|
Report.Column = Column;
|
|
22
32
|
Report.Group = Group;
|
|
23
33
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Report.js","sources":["../../../../../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useReport } from './useReport';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n\nfunction Column<TType = unknown>(_: ReportColumnProps<TType>) {\n return null;\n}\n\nfunction Group(_: ReportGroupProps) {\n return null;\n}\n\
|
|
1
|
+
{"version":3,"file":"Report.js","sources":["../../../../../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useReport } from './useReport';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n\nfunction Column<TType = unknown>(_: ReportColumnProps<TType>) {\n return null;\n}\n\nfunction Group(_: ReportGroupProps) {\n return null;\n}\n\nconst BaseReport = fixedForwardRef(function BaseReport<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n const report = useReport<TType>(props, ref);\n\n return (\n <Table>\n <Table.Toolbar<TType> table={report} />\n <Table.Grid<TType> data-taco=\"table-report\" table={report} />\n </Table>\n );\n});\n\nexport const Report = fixedForwardRef(function Report<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n const stringifiedChildren = String(props.children);\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n return <BaseReport<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => JSX.Element) & {\n Column: typeof Column;\n Group: typeof Group;\n};\nReport.Column = Column;\nReport.Group = Group;\n\nexport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n"],"names":["Column","_","Group","BaseReport","fixedForwardRef","props","ref","report","useReport","React","Table","Toolbar","table","Grid","Report","stringifiedChildren","String","children","key","useMemo"],"mappings":";;;;;AAMA,SAASA,MAAMA,CAAkBC,CAA2B;EACxD,OAAO,IAAI;AACf;AAEA,SAASC,KAAKA,CAACD,CAAmB;EAC9B,OAAO,IAAI;AACf;AAEA,MAAME,UAAU,gBAAGC,eAAe,CAAC,SAASD,UAAUA,CAAkBE,KAAyB,EAAEC,GAAyB;EACxH,MAAMC,MAAM,GAAGC,SAAS,CAAQH,KAAK,EAAEC,GAAG,CAAC;EAE3C,oBACIG,6BAACC,KAAK,qBACFD,6BAACC,KAAK,CAACC,OAAO;IAAQC,KAAK,EAAEL;IAAU,eACvCE,6BAACC,KAAK,CAACG,IAAI;iBAAkB,cAAc;IAACD,KAAK,EAAEL;IAAU,CACzD;AAEhB,CAAC,CAAC;MAEWO,MAAM,gBAAGV,eAAe,CAAC,SAASU,MAAMA,CAAkBT,KAAyB,EAAEC,GAAyB;EACvH,MAAMS,mBAAmB,GAAGC,MAAM,CAACX,KAAK,CAACY,QAAQ,CAAC;;;EAGlD,MAAMC,GAAG,GAAGT,cAAK,CAACU,OAAO,CAAC,MAAMH,MAAM,CAAC,WAAW,GAAGD,mBAAmB,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EACjG,oBAAON,6BAACN,UAAU,oBAAYE,KAAK;IAAEa,GAAG,EAAEA,GAAG;IAAEZ,GAAG,EAAEA;KAAO;AAC/D,CAAC;AAIDQ,MAAM,CAACd,MAAM,GAAGA,MAAM;AACtBc,MAAM,CAACZ,KAAK,GAAGA,KAAK;;;;"}
|
|
@@ -13,7 +13,7 @@ function Group(_) {
|
|
|
13
13
|
return null;
|
|
14
14
|
}
|
|
15
15
|
Group.displayName = 'Table3Group';
|
|
16
|
-
const
|
|
16
|
+
const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref) {
|
|
17
17
|
var _table3$meta$editing, _table3$meta$editing2;
|
|
18
18
|
const table3 = useTable3(props, ref);
|
|
19
19
|
const handleBlur = event => {
|
|
@@ -42,6 +42,16 @@ const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
|
|
|
42
42
|
table: table3
|
|
43
43
|
})));
|
|
44
44
|
});
|
|
45
|
+
const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
|
|
46
|
+
const stringifiedChildren = String(props.children);
|
|
47
|
+
// we force a remount (using key) when the child columns change because there are too many places to add children as an effect
|
|
48
|
+
// this is cheaper from a complexity perspective, and probably performance wise as well
|
|
49
|
+
const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
|
|
50
|
+
return /*#__PURE__*/React__default.createElement(BaseTable3, Object.assign({}, props, {
|
|
51
|
+
key: key,
|
|
52
|
+
ref: ref
|
|
53
|
+
}));
|
|
54
|
+
});
|
|
45
55
|
Table3.Column = Column;
|
|
46
56
|
Table3.Group = Group;
|
|
47
57
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n return null;\n}\nGroup.displayName = 'Table3Group';\n\
|
|
1
|
+
{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const table3 = useTable3<TType>(props, ref);\n\n const handleBlur = (event: React.FocusEvent<HTMLTableElement>) => {\n if (table3.meta.editing.isEditing) {\n table3.meta.editing.handleBlur(event);\n }\n };\n\n const gridAttributes = {\n 'data-table-editing-mode': table3.meta.editing?.isEditing\n ? table3.meta.editing?.isDetailedMode\n ? 'detailed'\n : 'normal'\n : undefined,\n enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n onBlur: handleBlur,\n };\n\n const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);\n\n return (\n <Table>\n <Table.Toolbar<TType> table={table3}>\n {table3.meta.editing.isEnabled ? (\n <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n ) : null}\n </Table.Toolbar>\n {hasValidationErrors ? (\n <Alert\n className=\"mb-4\"\n scrollToIndex={table3.renderer.scrollToIndex}\n table={table3.instance}\n tableRef={table3.ref}\n />\n ) : null}\n <Table.Grid<TType> {...gridAttributes} data-taco=\"table3\" table={table3} />\n </Table>\n );\n});\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n const stringifiedChildren = String(props.children);\n // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n // this is cheaper from a complexity perspective, and probably performance wise as well\n const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n return <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n Column: typeof Column;\n Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n Table3Props,\n Table3Ref,\n Table3ColumnProps,\n Table3GroupProps,\n Table3EditingSaveHandler,\n Table3EditingValidatorFn,\n Table3FeatureProps,\n Table3Texts,\n} from './types';\n"],"names":["Column","_","displayName","Group","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","handleBlur","event","meta","editing","isEditing","gridAttributes","_table3$meta$editing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","onBlur","hasValidationErrors","hasErrors","instance","React","Table","Toolbar","table","isEnabled","Editing","scrollToIndex","renderer","Alert","className","tableRef","Grid","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":";;;;;;;AASA,SAASA,MAAMA,CAAkBC,CAA2B;EACxD,OAAO,IAAI;AACf;AACAD,MAAM,CAACE,WAAW,GAAG,cAAc;AAEnC,SAASC,KAAKA,CAACF,CAAmB;EAC9B,OAAO,IAAI;AACf;AACAE,KAAK,CAACD,WAAW,GAAG,aAAa;AAEjC,MAAME,UAAU,gBAAGC,eAAe,CAAC,SAASD,UAAUA,CAAkBE,KAAyB,EAAEC,GAAyB;;EACxH,MAAMC,MAAM,GAAGC,SAAS,CAAQH,KAAK,EAAEC,GAAG,CAAC;EAE3C,MAAMG,UAAU,GAAIC,KAAyC;IACzD,IAAIH,MAAM,CAACI,IAAI,CAACC,OAAO,CAACC,SAAS,EAAE;MAC/BN,MAAM,CAACI,IAAI,CAACC,OAAO,CAACH,UAAU,CAACC,KAAK,CAAC;;GAE5C;EAED,MAAMI,cAAc,GAAG;IACnB,yBAAyB,EAAE,CAAAC,oBAAA,GAAAR,MAAM,CAACI,IAAI,CAACC,OAAO,cAAAG,oBAAA,eAAnBA,oBAAA,CAAqBF,SAAS,GACnD,CAAAG,qBAAA,GAAAT,MAAM,CAACI,IAAI,CAACC,OAAO,cAAAI,qBAAA,eAAnBA,qBAAA,CAAqBC,cAAc,GAC/B,UAAU,GACV,QAAQ,GACZC,SAAS;IACfC,kCAAkC,EAAEZ,MAAM,CAACI,IAAI,CAACC,OAAO,CAACC,SAAS;IACjEO,MAAM,EAAEX;GACX;EAED,MAAMY,mBAAmB,GAAGd,MAAM,CAACI,IAAI,CAACC,OAAO,CAACU,SAAS,CAACf,MAAM,CAACgB,QAAQ,EAAEhB,MAAM,CAACD,GAAG,CAAC;EAEtF,oBACIkB,6BAACC,KAAK,qBACFD,6BAACC,KAAK,CAACC,OAAO;IAAQC,KAAK,EAAEpB;KACxBA,MAAM,CAACI,IAAI,CAACC,OAAO,CAACgB,SAAS,kBAC1BJ,6BAACK,OAAO;IAACC,aAAa,EAAEvB,MAAM,CAACwB,QAAQ,CAACD,aAAa;IAAEH,KAAK,EAAEpB,MAAM,CAACgB;IAAY,IACjF,IAAI,CACI,EACfF,mBAAmB,kBAChBG,6BAACQ,KAAK;IACFC,SAAS,EAAC,MAAM;IAChBH,aAAa,EAAEvB,MAAM,CAACwB,QAAQ,CAACD,aAAa;IAC5CH,KAAK,EAAEpB,MAAM,CAACgB,QAAQ;IACtBW,QAAQ,EAAE3B,MAAM,CAACD;IACnB,IACF,IAAI,eACRkB,6BAACC,KAAK,CAACU,IAAI,oBAAYrB,cAAc;iBAAY,QAAQ;IAACa,KAAK,EAAEpB;KAAU,CACvE;AAEhB,CAAC,CAAC;MAEW6B,MAAM,gBAAGhC,eAAe,CAAC,SAASgC,MAAMA,CAAkB/B,KAAyB,EAAEC,GAAyB;EACvH,MAAM+B,mBAAmB,GAAGC,MAAM,CAACjC,KAAK,CAACkC,QAAQ,CAAC;;;EAGlD,MAAMC,GAAG,GAAGhB,cAAK,CAACiB,OAAO,CAAC,MAAMH,MAAM,CAAC,WAAW,GAAGD,mBAAmB,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EACjG,oBAAOb,6BAACrB,UAAU,oBAAYE,KAAK;IAAEmC,GAAG,EAAEA,GAAG;IAAElC,GAAG,EAAEA;KAAO;AAC/D,CAAC;AAID8B,MAAM,CAACrC,MAAM,GAAGA,MAAM;AACtBqC,MAAM,CAAClC,KAAK,GAAGA,KAAK;;;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
1
2
|
import { getCellMinWidth } from '../../useTableManager/util/columns.js';
|
|
2
3
|
|
|
3
4
|
function useTableStyleGrid(tableId, table, fontSize) {
|
|
@@ -7,55 +8,57 @@ function useTableStyleGrid(tableId, table, fontSize) {
|
|
|
7
8
|
const globalMinSize = getCellMinWidth(fontSize);
|
|
8
9
|
// header body ?footer
|
|
9
10
|
const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const minWidth = width < minSize ? minSize : width;
|
|
30
|
-
if (isLastColumn) {
|
|
31
|
-
size = `minmax(${minWidth}px, auto)`;
|
|
11
|
+
return React__default.useMemo(() => {
|
|
12
|
+
let printGridTemplateColumns = '';
|
|
13
|
+
const printHiddenColumns = [];
|
|
14
|
+
const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {
|
|
15
|
+
var _column$columnDef$min, _column$columnDef$met;
|
|
16
|
+
if (table.options.enableGrouping && column.getIsGrouped()) {
|
|
17
|
+
return accum;
|
|
18
|
+
}
|
|
19
|
+
const minSize = (_column$columnDef$min = column.columnDef.minSize) !== null && _column$columnDef$min !== void 0 ? _column$columnDef$min : globalMinSize;
|
|
20
|
+
const width = columnSizing[column.id];
|
|
21
|
+
let size;
|
|
22
|
+
let printSize;
|
|
23
|
+
if (column.id === '__actions') {
|
|
24
|
+
const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
|
|
25
|
+
size = `minmax(${minWidth}px, auto)`;
|
|
26
|
+
} else if (width !== undefined) {
|
|
27
|
+
const isLastColumn = index === allVisibleColumns.length - 1;
|
|
28
|
+
if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
|
|
29
|
+
size = `minmax(max-content, 1fr)`;
|
|
32
30
|
} else {
|
|
33
|
-
|
|
31
|
+
const minWidth = width < minSize ? minSize : width;
|
|
32
|
+
if (isLastColumn) {
|
|
33
|
+
size = `minmax(${minWidth}px, auto)`;
|
|
34
|
+
} else {
|
|
35
|
+
size = `${minWidth}px`;
|
|
36
|
+
}
|
|
34
37
|
}
|
|
38
|
+
} else {
|
|
39
|
+
size = `minmax(max-content, auto)`;
|
|
40
|
+
}
|
|
41
|
+
if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enablePrinting) === false) {
|
|
42
|
+
printSize = '';
|
|
43
|
+
printHiddenColumns.push(column.id);
|
|
44
|
+
} else {
|
|
45
|
+
printSize = 'auto';
|
|
35
46
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
return
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
gridTemplateColumns,
|
|
52
|
-
gridTemplateRows
|
|
53
|
-
};
|
|
54
|
-
const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''}}`;
|
|
55
|
-
return {
|
|
56
|
-
style,
|
|
57
|
-
stylesheet
|
|
58
|
-
};
|
|
47
|
+
printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();
|
|
48
|
+
return `${accum} ${size}`.trim();
|
|
49
|
+
}, '');
|
|
50
|
+
// we have to be specific so that nested tables don't inherit the same css
|
|
51
|
+
const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
|
|
52
|
+
const style = {
|
|
53
|
+
gridTemplateColumns,
|
|
54
|
+
gridTemplateRows
|
|
55
|
+
};
|
|
56
|
+
const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''}}`;
|
|
57
|
+
return {
|
|
58
|
+
style,
|
|
59
|
+
stylesheet
|
|
60
|
+
};
|
|
61
|
+
}, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);
|
|
59
62
|
}
|
|
60
63
|
|
|
61
64
|
export { useTableStyleGrid };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableStyleGrid.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableStyleGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableFontSize } from '../../types';\nimport { getCellMinWidth } from '../../useTableManager/util/columns';\n\nexport function useTableStyleGrid<TType = unknown>(tableId: string, table: ReactTable<TType>, fontSize: TableFontSize) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const globalMinSize = getCellMinWidth(fontSize);\n\n // header body ?footer\n const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';\n\n let printGridTemplateColumns = '';\n
|
|
1
|
+
{"version":3,"file":"useTableStyleGrid.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableStyleGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableFontSize } from '../../types';\nimport { getCellMinWidth } from '../../useTableManager/util/columns';\n\nexport function useTableStyleGrid<TType = unknown>(tableId: string, table: ReactTable<TType>, fontSize: TableFontSize) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const globalMinSize = getCellMinWidth(fontSize);\n\n // header body ?footer\n const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';\n\n return React.useMemo(() => {\n let printGridTemplateColumns = '';\n const printHiddenColumns: string[] = [];\n\n const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {\n if (table.options.enableGrouping && column.getIsGrouped()) {\n return accum;\n }\n\n const minSize = column.columnDef.minSize ?? globalMinSize;\n const width = columnSizing[column.id] as number | 'grow';\n\n let size;\n let printSize;\n\n if (column.id === '__actions') {\n const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */\n size = `minmax(${minWidth}px, auto)`;\n } else if (width !== undefined) {\n const isLastColumn = index === allVisibleColumns.length - 1;\n\n if (width === 'grow' || (Number.isNaN(width) && !isLastColumn)) {\n size = `minmax(max-content, 1fr)`;\n } else {\n const minWidth = width < minSize ? minSize : width;\n\n if (isLastColumn) {\n size = `minmax(${minWidth}px, auto)`;\n } else {\n size = `${minWidth}px`;\n }\n }\n } else {\n size = `minmax(max-content, auto)`;\n }\n\n if (column.columnDef.meta?.enablePrinting === false) {\n printSize = '';\n printHiddenColumns.push(column.id);\n } else {\n printSize = 'auto';\n }\n\n printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();\n\n return `${accum} ${size}`.trim();\n }, '');\n\n // we have to be specific so that nested tables don't inherit the same css\n const hiddenColumns = printHiddenColumns\n .map(\n id =>\n `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\\n`\n )\n .join(',');\n\n const style: React.CSSProperties = {\n gridTemplateColumns,\n gridTemplateRows,\n };\n\n const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${\n hiddenColumns ? `${hiddenColumns} { display: none; }` : ''\n }}`;\n\n return { style, stylesheet };\n }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);\n}\n"],"names":["useTableStyleGrid","tableId","table","fontSize","tableMeta","options","meta","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","globalMinSize","getCellMinWidth","gridTemplateRows","getRowModel","rows","length","React","useMemo","printGridTemplateColumns","printHiddenColumns","gridTemplateColumns","reduce","accum","column","index","enableGrouping","getIsGrouped","minSize","_column$columnDef$min","columnDef","width","id","size","printSize","minWidth","rowActions","rowActionsLength","undefined","isLastColumn","Number","isNaN","_column$columnDef$met","enablePrinting","push","trim","hiddenColumns","map","join","style","stylesheet"],"mappings":"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"}
|