@economic/taco 2.3.0 → 2.4.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Header/components/Agreement/types.d.ts +1 -1
- package/dist/components/Menu/Context.d.ts +2 -0
- package/dist/components/Menu/components/Item.d.ts +3 -2
- package/dist/components/Provider/Localization.d.ts +12 -0
- package/dist/components/Provider/Provider.d.ts +6 -1
- package/dist/components/Table2/types.d.ts +1 -1
- package/dist/components/Table3/Table3.d.ts +1 -1
- package/dist/components/Table3/components/toolbar/Filter/filters/components/Filter.d.ts +1 -2
- package/dist/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.d.ts +4 -4
- package/dist/components/Table3/components/toolbar/Filter/filters/components/FilterValue.d.ts +1 -1
- package/dist/components/Table3/hooks/features/useColumnFreezing.d.ts +2 -1
- package/dist/components/Table3/hooks/features/useSettings.d.ts +2 -0
- package/dist/components/Table3/hooks/listeners/useSettingsStateListener.d.ts +2 -2
- package/dist/components/Table3/hooks/useTable.d.ts +2 -1
- package/dist/components/Table3/types.d.ts +24 -12
- package/dist/esm/packages/taco/src/components/Menu/Context.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Menu/Menu.js +1 -0
- package/dist/esm/packages/taco/src/components/Menu/Menu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Menu/components/Content.js +32 -2
- package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Menu/components/Item.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +13 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Provider.js +11 -4
- package/dist/esm/packages/taco/src/components/Provider/Provider.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Edit.js +12 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Edit.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js +1 -1
- package/dist/esm/packages/taco/src/components/Shortcut/Shortcut.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/types.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +2 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Menu.js +4 -19
- package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Menu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js +8 -2
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js +4 -2
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js +2 -24
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.js +68 -17
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.js +31 -2
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Placeholder.js +1 -5
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Placeholder.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js +18 -25
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js +5 -0
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +3 -3
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js +6 -2
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Toolbar.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useColumnFreezing.js +20 -16
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useColumnFreezing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSettings.js +18 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSettings.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +2 -4
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +18 -12
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/types.js +7 -5
- package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/filtering.js +24 -6
- package/dist/esm/packages/taco/src/components/Table3/util/filtering.js.map +1 -1
- package/dist/esm/packages/taco/src/hooks/useLocalStorage.js +34 -0
- package/dist/esm/packages/taco/src/hooks/useLocalStorage.js.map +1 -0
- package/dist/esm/packages/taco/src/hooks/useTacoSettings.js +9 -0
- package/dist/esm/packages/taco/src/hooks/useTacoSettings.js.map +1 -0
- package/dist/esm/packages/taco/src/index.js +1 -1
- package/dist/hooks/useLocalStorage.d.ts +1 -0
- package/dist/hooks/useTacoSettings.d.ts +1 -0
- package/dist/taco.cjs.development.js +358 -178
- 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
- package/types.json +11325 -10524
- package/dist/components/Table3/components/toolbar/Filter/filters/components/Comparator.d.ts +0 -11
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FilterValue.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../../../Input/Input';\nimport { Table3FilterComparator } from '../../../../../types';\nimport { Datepicker } from '../../../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../../../Switch/Switch';\n\nexport type FilterValueProps<TType = unknown> = {\n column
|
1
|
+
{"version":3,"file":"FilterValue.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../../../Input/Input';\nimport { Table3FilterComparator } from '../../../../../types';\nimport { Datepicker } from '../../../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../../../Switch/Switch';\nimport { getInputAppearanceClassnames } from '../../../../columns/styles';\nimport cn from 'classnames';\nimport { useLocalization } from '../../../../../../Provider/Localization';\n\nexport type FilterValueProps<TType = unknown> = {\n column?: RTColumn<TType, unknown>;\n comparator: Table3FilterComparator;\n onChange: (value: any) => void;\n value: any;\n};\n\nexport function FilterValue<TType = unknown>(props: FilterValueProps<TType>) {\n const { column, comparator, onChange: handleChange, value } = props;\n const { texts } = useLocalization();\n if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n return null;\n }\n\n if (comparator === Table3FilterComparator.IsBetween) {\n const fromValue = Array.isArray(value) ? value[0] : undefined;\n const toValue = Array.isArray(value) ? value[1] : undefined;\n\n if (column === undefined) {\n return (\n <Input\n aria-label={texts.table3.filters.emptyFilter.value}\n className=\"flex-grow\"\n disabled\n value={texts.table3.filters.emptyFilter.value}\n />\n );\n }\n\n if (column.columnDef.meta?.dataType === 'datetime') {\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Control column={column} onChange={value => handleChange([value, toValue])} value={fromValue} />\n <Control column={column} onChange={value => handleChange([fromValue, value])} value={toValue} />\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Control\n column={column}\n onChange={value => handleChange([isNaN(value) ? undefined : value, toValue])}\n placeholder=\"from\"\n value={fromValue ?? ''}\n />\n <Control\n column={column}\n onChange={value => handleChange([fromValue, isNaN(value) ? undefined : value])}\n placeholder=\"to\"\n value={toValue ?? ''}\n />\n </div>\n );\n }\n return <Control comparator={comparator} column={column} onChange={handleChange} value={value} />;\n}\n\nfunction Control(props) {\n const { column, comparator, onChange, value, ...attributes } = props;\n const controlRenderer = column.columnDef.meta?.control;\n const dataType = column.columnDef.meta?.dataType;\n\n useEffect(() => {\n if (controlRenderer === 'switch') {\n onChange(false);\n }\n }, []);\n\n if (typeof controlRenderer === 'function') {\n return controlRenderer({\n ...attributes,\n setValue: value => onChange(value),\n value,\n });\n } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {\n return <Datepicker {...attributes} onChange={event => onChange((event as any).detail)} value={value as Date} />;\n } else if (controlRenderer === 'switch') {\n return <Switch {...attributes} className=\"m-1.5\" checked={Boolean(value)} onChange={onChange} />;\n } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {\n return (\n <Input\n {...attributes}\n className={cn(getInputAppearanceClassnames(), 'flex-grow')}\n type=\"number\"\n onChange={event => onChange(event.target.valueAsNumber)}\n value={String(value ?? '')}\n />\n );\n }\n\n return (\n <Input\n {...attributes}\n className=\"flex-grow\"\n onChange={event => onChange(event.target.value)}\n value={String(value ?? '')}\n />\n );\n}\n"],"names":["FilterValue","props","column","comparator","onChange","handleChange","value","texts","useLocalization","Table3FilterComparator","IsEmpty","IsNotEmpty","IsBetween","fromValue","Array","isArray","undefined","toValue","React","Input","table3","filters","emptyFilter","className","disabled","columnDef","meta","dataType","Control","isNaN","placeholder","attributes","controlRenderer","control","useEffect","setValue","Datepicker","event","detail","Switch","checked","Boolean","cn","getInputAppearanceClassnames","type","target","valueAsNumber","String"],"mappings":"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"}
|
@@ -4,7 +4,6 @@ import { useLocalization } from '../../../../../../Provider/Localization.js';
|
|
4
4
|
import { Input } from '../../../../../../Input/Input.js';
|
5
5
|
import { FilterColumn } from './FilterColumn.js';
|
6
6
|
import { FilterComparator } from './FilterComparator.js';
|
7
|
-
import { guessComparatorsBasedOnControl } from './Filter.js';
|
8
7
|
|
9
8
|
function Placeholder(props) {
|
10
9
|
const {
|
@@ -26,10 +25,7 @@ function Placeholder(props) {
|
|
26
25
|
filters: filters,
|
27
26
|
onChange: handleCreate,
|
28
27
|
value: null
|
29
|
-
}), /*#__PURE__*/React__default.createElement(FilterComparator, {
|
30
|
-
disabled: true,
|
31
|
-
validComparators: guessComparatorsBasedOnControl()
|
32
|
-
}), /*#__PURE__*/React__default.createElement(Input, {
|
28
|
+
}), /*#__PURE__*/React__default.createElement(FilterComparator, null), /*#__PURE__*/React__default.createElement(Input, {
|
33
29
|
"aria-label": texts.table3.filters.emptyFilter.value,
|
34
30
|
className: "flex-grow",
|
35
31
|
disabled: true,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Placeholder.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/Placeholder.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, ColumnFiltersState } from '@tanstack/react-table';\nimport { Select2Value } from '../../../../../../Select2/Select2';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { Input } from '../../../../../../Input/Input';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\
|
1
|
+
{"version":3,"file":"Placeholder.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/Placeholder.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, ColumnFiltersState } from '@tanstack/react-table';\nimport { Select2Value } from '../../../../../../Select2/Select2';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { Input } from '../../../../../../Input/Input';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\n\nexport type PlaceholderFilterProps<TType = unknown> = {\n allColumns: RTColumn<TType, unknown>[];\n filters: ColumnFiltersState;\n position: number;\n onCreate?: (value: Select2Value) => void;\n onRemove?: () => void;\n};\n\nexport function Placeholder<TType = unknown>(props: PlaceholderFilterProps<TType>) {\n const { allColumns, filters, onCreate: handleCreate, onRemove: handleRemove, position } = props;\n const { texts } = useLocalization();\n\n return (\n <div className=\"flex gap-2\">\n <div className=\"flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n {position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where}\n </div>\n <FilterColumn allColumns={allColumns} filters={filters} onChange={handleCreate} value={null} />\n <FilterComparator />\n <Input\n aria-label={texts.table3.filters.emptyFilter.value}\n className=\"flex-grow\"\n disabled\n value={texts.table3.filters.emptyFilter.value}\n />\n {handleRemove ? <IconButton appearance=\"discrete\" icon=\"close\" onClick={handleRemove} /> : null}\n </div>\n );\n}\n"],"names":["Placeholder","props","allColumns","filters","onCreate","handleCreate","onRemove","handleRemove","position","texts","useLocalization","React","className","table3","conditions","and","where","FilterColumn","onChange","value","FilterComparator","Input","emptyFilter","disabled","IconButton","appearance","icon","onClick"],"mappings":";;;;;;;SAiBgBA,WAAW,CAAkBC,KAAoC;EAC7E,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,QAAQ,EAAEC,YAAY;IAAEC;GAAU,GAAGP,KAAK;EAC/F,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACIC;IAAKC,SAAS,EAAC;kBACXD;IAAKC,SAAS,EAAC;KACVJ,QAAQ,GAAG,CAAC,GAAGC,KAAK,CAACI,MAAM,CAACV,OAAO,CAACW,UAAU,CAACC,GAAG,GAAGN,KAAK,CAACI,MAAM,CAACV,OAAO,CAACW,UAAU,CAACE,KAAK,CACzF,eACNL,6BAACM,YAAY;IAACf,UAAU,EAAEA,UAAU;IAAEC,OAAO,EAAEA,OAAO;IAAEe,QAAQ,EAAEb,YAAY;IAAEc,KAAK,EAAE;IAAQ,eAC/FR,6BAACS,gBAAgB,OAAG,eACpBT,6BAACU,KAAK;kBACUZ,KAAK,CAACI,MAAM,CAACV,OAAO,CAACmB,WAAW,CAACH,KAAK;IAClDP,SAAS,EAAC,WAAW;IACrBW,QAAQ;IACRJ,KAAK,EAAEV,KAAK,CAACI,MAAM,CAACV,OAAO,CAACmB,WAAW,CAACH;IAC1C,EACDZ,YAAY,gBAAGI,6BAACa,UAAU;IAACC,UAAU,EAAC,UAAU;IAACC,IAAI,EAAC,OAAO;IAACC,OAAO,EAAEpB;IAAgB,GAAG,IAAI,CAC7F;AAEd;;;;"}
|
package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js
CHANGED
@@ -86,30 +86,9 @@ function PrintIFrame({
|
|
86
86
|
}) {
|
87
87
|
const [contentRef, setContentRef] = React__default.useState(null);
|
88
88
|
const [mountNode, setMountNode] = React__default.useState(null);
|
89
|
+
const isFirefoxBrowser = React__default.useMemo(() => navigator.userAgent.toLowerCase().includes('firefox'), []);
|
89
90
|
const iframeWindow = contentRef === null || contentRef === void 0 ? void 0 : contentRef.contentWindow;
|
90
91
|
const stylesReady = useParentStylesheets(iframeWindow);
|
91
|
-
// Adds print events to the iframe window.
|
92
|
-
React__default.useEffect(() => {
|
93
|
-
if (iframeWindow === null || iframeWindow === undefined) {
|
94
|
-
return;
|
95
|
-
}
|
96
|
-
// Add print events to the window
|
97
|
-
if (onAfterPrint) {
|
98
|
-
iframeWindow.addEventListener('afterprint', onAfterPrint);
|
99
|
-
}
|
100
|
-
if (onBeforePrint) {
|
101
|
-
iframeWindow.addEventListener('beforeprint', onBeforePrint);
|
102
|
-
}
|
103
|
-
return () => {
|
104
|
-
// Remove print events from the window
|
105
|
-
if (onAfterPrint) {
|
106
|
-
iframeWindow.removeEventListener('afterprint', onAfterPrint);
|
107
|
-
}
|
108
|
-
if (onBeforePrint) {
|
109
|
-
iframeWindow.removeEventListener('beforeprint', onBeforePrint);
|
110
|
-
}
|
111
|
-
};
|
112
|
-
}, [iframeWindow]);
|
113
92
|
// Calls print method when table has loaded in the iframe.
|
114
93
|
React__default.useEffect(() => {
|
115
94
|
let intervalId;
|
@@ -120,7 +99,8 @@ function PrintIFrame({
|
|
120
99
|
intervalId = setInterval(function () {
|
121
100
|
try {
|
122
101
|
const tableWrapper = mountNode;
|
123
|
-
const
|
102
|
+
const table = tableWrapper.querySelector('[role="table"]');
|
103
|
+
const hasTableRendered = !!table;
|
124
104
|
if (hasTableRendered && intervalId) {
|
125
105
|
var _contentRef$contentWi;
|
126
106
|
clearInterval(intervalId);
|
@@ -129,6 +109,12 @@ function PrintIFrame({
|
|
129
109
|
// Bug - Even though onBeforePrint is called before printing, the execution doesn't finish before
|
130
110
|
// the print dialog shows up, which results into having a visible loading toast.
|
131
111
|
onBeforePrint === null || onBeforePrint === void 0 ? void 0 : onBeforePrint();
|
112
|
+
// By adding height to the tableWrapper, we make sure the content below absolutely positioned table
|
113
|
+
// doesn't hide
|
114
|
+
if (isFirefoxBrowser) {
|
115
|
+
const tableHeight = `${table.offsetHeight}px`;
|
116
|
+
tableWrapper.style.height = tableHeight;
|
117
|
+
}
|
132
118
|
contentRef === null || contentRef === void 0 ? void 0 : (_contentRef$contentWi = contentRef.contentWindow) === null || _contentRef$contentWi === void 0 ? void 0 : _contentRef$contentWi.print();
|
133
119
|
// Calling the onAfterPrint method here as a fallback to do the cleanup, as certain browsers,
|
134
120
|
// like Safari, do not trigger the beforeprint or afterprint events when a confirmation dialog
|
@@ -167,6 +153,11 @@ function PrintIFrame({
|
|
167
153
|
tableWrapper.setAttribute('data-role', 'table-wrapper');
|
168
154
|
// Adding h-fit class makes sure that table is rendered with the whole content.
|
169
155
|
tableWrapper.classList.add('h-fit');
|
156
|
+
tableWrapper.classList.add('[&>[role="table"]]:!h-fit');
|
157
|
+
if (isFirefoxBrowser) {
|
158
|
+
// Fix for firefox bug which adds page-long whitespace between page's top content and table
|
159
|
+
tableWrapper.classList.add('[&>[role="table"]]:!absolute');
|
160
|
+
}
|
170
161
|
// Safari print preview assigns no width to the table when w-screen class is used.
|
171
162
|
// By assigning table a big static width and hiding the horizontal scrollbar, the table on chrome
|
172
163
|
// and safari will always take full page width.
|
@@ -213,10 +204,12 @@ function PrintIFrame({
|
|
213
204
|
};
|
214
205
|
// -top-60 -left-60 styles make sure that iframe is added outside of the viewport
|
215
206
|
return /*#__PURE__*/React__default.createElement("iframe", {
|
216
|
-
ref: setContentRef,
|
217
207
|
className: "fixed -left-60 -top-60 !h-0 !w-0",
|
218
208
|
frameBorder: "0",
|
219
|
-
|
209
|
+
ref: setContentRef,
|
210
|
+
scrolling: "no",
|
211
|
+
// Temporary fix to support printing in firefox: Find another solution while upgrading React
|
212
|
+
src: "javascript:void(0);"
|
220
213
|
}, mountNode && stylesReady ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Table3, Object.assign({}, printTableProps)), mountNode) : null);
|
221
214
|
}
|
222
215
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PrintIFrame.js","sources":["../../../../../../../../../../src/components/Table3/components/toolbar/PrintButton/PrintIFrame.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Table3 } from '../../../../..';\nimport { Table3Props } from '../../../types';\nimport { useParentStylesheets } from './hooks/useParentStylesheets';\n\nexport type PrintIFrameProps<TType = unknown> = {\n onAfterPrint?: () => void;\n onBeforePrint?: () => void;\n tableProps: Table3Props<TType>;\n};\n\nexport function PrintIFrame<TType = unknown>({ onAfterPrint, onBeforePrint, tableProps }: PrintIFrameProps<TType>) {\n const [contentRef, setContentRef] = React.useState<HTMLIFrameElement | null>(null);\n const [mountNode, setMountNode] = React.useState<HTMLElement | null>(null);\n\n const iframeWindow = contentRef?.contentWindow;\n\n const stylesReady = useParentStylesheets(iframeWindow);\n\n // Adds print events to the iframe window.\n React.useEffect(() => {\n if (iframeWindow === null || iframeWindow === undefined) {\n return;\n }\n\n // Add print events to the window\n if (onAfterPrint) {\n iframeWindow.addEventListener('afterprint', onAfterPrint);\n }\n\n if (onBeforePrint) {\n iframeWindow.addEventListener('beforeprint', onBeforePrint);\n }\n\n return () => {\n // Remove print events from the window\n if (onAfterPrint) {\n iframeWindow.removeEventListener('afterprint', onAfterPrint);\n }\n\n if (onBeforePrint) {\n iframeWindow.removeEventListener('beforeprint', onBeforePrint);\n }\n };\n }, [iframeWindow]);\n\n // Calls print method when table has loaded in the iframe.\n React.useEffect(() => {\n let intervalId: NodeJS.Timer;\n let timeoutId: NodeJS.Timer;\n\n // Invoke the print functionality on the window once the table has finished rendering and all print styles are\n // added.\n if (mountNode && stylesReady) {\n intervalId = setInterval(async () => {\n const tableWrapper = mountNode;\n const hasTableRendered = !!tableWrapper.querySelector('[role=\"table\"]');\n\n if (hasTableRendered && intervalId) {\n clearInterval(intervalId);\n\n // Calling the onBeforePrint method here as a fallback because certain browsers, like Safari,\n // do not call the beforeprint event.\n // Bug - Even though onBeforePrint is called before printing, the execution doesn't finish before\n // the print dialog shows up, which results into having a visible loading toast.\n onBeforePrint?.();\n\n contentRef?.contentWindow?.print();\n\n // Calling the onAfterPrint method here as a fallback to do the cleanup, as certain browsers,\n // like Safari, do not trigger the beforeprint or afterprint events when a confirmation dialog\n // asking if the user wants to print the document, is cancelled.\n\n // Added a setTimeout to prevent calling onAfterPrint immediately after the print function\n // to ensure that the print dialog doesn't close abruptly. Although this behavior is uncommon,\n // there are cases where the print function may not run synchronously, causing onAfterPrint to be\n // invoked right after it.\n timeoutId = setTimeout(() => {\n onAfterPrint?.();\n }, 0);\n }\n }, 1000);\n }\n\n return () => {\n clearInterval(intervalId);\n clearTimeout(timeoutId);\n };\n }, [mountNode, stylesReady]);\n\n React.useEffect(() => {\n if (!iframeWindow || !stylesReady) {\n return;\n }\n\n const iframeDocument = iframeWindow.document;\n // Only the content inside the main element will get printed along with the table.\n const parentDocumentContent =\n iframeWindow.parent.document.querySelector('main')?.innerHTML || iframeWindow.parent.document.body?.innerHTML || '';\n\n iframeDocument.body.innerHTML = parentDocumentContent;\n\n const tableElement = iframeDocument.querySelector('[role=\"table\"]');\n const tableColumnFreezingStyles = iframeDocument.querySelector('[data-taco=\"table3-column-freezing-styles\"]');\n const tableWrapper = iframeDocument.createElement('div');\n\n tableWrapper.setAttribute('data-role', 'table-wrapper');\n // Adding h-fit class makes sure that table is rendered with the whole content.\n tableWrapper.classList.add('h-fit');\n // Safari print preview assigns no width to the table when w-screen class is used.\n // By assigning table a big static width and hiding the horizontal scrollbar, the table on chrome\n // and safari will always take full page width.\n tableWrapper.classList.add('w-[10000px]');\n\n if (tableElement) {\n tableElement.parentNode?.insertBefore(tableWrapper, tableElement);\n tableElement.remove();\n } else {\n iframeDocument.body.append(tableWrapper);\n }\n\n // Remove the already existing column freezing styles.\n if (tableColumnFreezingStyles) {\n tableColumnFreezingStyles.remove();\n }\n\n let currentNode = tableWrapper.parentNode as HTMLElement | null;\n\n while (currentNode !== null && currentNode !== iframeDocument.body) {\n // Add the 'h-fit' class to the 'table-wrapper' element's parent chain.\n // This ensures that the table is not cropped and fits within its container.\n currentNode?.classList.add('!h-fit');\n currentNode = currentNode.parentNode as HTMLElement | null;\n }\n\n setMountNode(tableWrapper);\n }, [iframeWindow, stylesReady]);\n\n const printTableProps: Table3Props<TType> = {\n ...tableProps,\n actionsForRow: undefined,\n // Not the best way to remove the active/current row styles, but a temporary solution for now\n defaultCurrentRowIndex: -1,\n defaultSettings: {\n ...tableProps?.defaultSettings,\n rowHeight: 'short',\n },\n enableColumnFreezing: false,\n enableRowHeight: true,\n enableRowSelection: false,\n enableEditing: false,\n enablePrinting: false,\n enableRowDrag: false,\n enableRowDrop: false,\n enableRowSelectionSingle: false,\n preset: undefined,\n };\n\n // -top-60 -left-60 styles make sure that iframe is added outside of the viewport\n return (\n <iframe ref={setContentRef} className=\"fixed -left-60 -top-60 !h-0 !w-0\" frameBorder=\"0\" scrolling=\"no\">\n {mountNode && stylesReady ? ReactDOM.createPortal(<Table3 {...printTableProps} />, mountNode) : null}\n </iframe>\n );\n}\n"],"names":["PrintIFrame","onAfterPrint","onBeforePrint","tableProps","contentRef","setContentRef","React","useState","mountNode","setMountNode","iframeWindow","contentWindow","stylesReady","useParentStylesheets","useEffect","undefined","addEventListener","removeEventListener","intervalId","timeoutId","setInterval","tableWrapper","hasTableRendered","querySelector","clearInterval","print","setTimeout","clearTimeout","iframeDocument","document","parentDocumentContent","parent","innerHTML","body","tableElement","tableColumnFreezingStyles","createElement","setAttribute","classList","add","parentNode","insertBefore","remove","append","currentNode","printTableProps","actionsForRow","defaultCurrentRowIndex","defaultSettings","rowHeight","enableColumnFreezing","enableRowHeight","enableRowSelection","enableEditing","enablePrinting","enableRowDrag","enableRowDrop","enableRowSelectionSingle","preset","ref","className","frameBorder","scrolling","ReactDOM","createPortal","Table3"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"PrintIFrame.js","sources":["../../../../../../../../../../src/components/Table3/components/toolbar/PrintButton/PrintIFrame.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Table3 } from '../../../../..';\nimport { Table3Props } from '../../../types';\nimport { useParentStylesheets } from './hooks/useParentStylesheets';\n\nexport type PrintIFrameProps<TType = unknown> = {\n onAfterPrint?: () => void;\n onBeforePrint?: () => void;\n tableProps: Table3Props<TType>;\n};\n\nexport function PrintIFrame<TType = unknown>({ onAfterPrint, onBeforePrint, tableProps }: PrintIFrameProps<TType>) {\n const [contentRef, setContentRef] = React.useState<HTMLIFrameElement | null>(null);\n const [mountNode, setMountNode] = React.useState<HTMLElement | null>(null);\n\n const isFirefoxBrowser = React.useMemo(() => navigator.userAgent.toLowerCase().includes('firefox'), []);\n\n const iframeWindow = contentRef?.contentWindow;\n\n const stylesReady = useParentStylesheets(iframeWindow);\n\n // Calls print method when table has loaded in the iframe.\n React.useEffect(() => {\n let intervalId: NodeJS.Timer;\n let timeoutId: NodeJS.Timer;\n\n // Invoke the print functionality on the window once the table has finished rendering and all print styles are\n // added.\n if (mountNode && stylesReady) {\n intervalId = setInterval(async () => {\n const tableWrapper = mountNode;\n const table = tableWrapper.querySelector('[role=\"table\"]') as HTMLElement;\n const hasTableRendered = !!table;\n\n if (hasTableRendered && intervalId) {\n clearInterval(intervalId);\n\n // Calling the onBeforePrint method here as a fallback because certain browsers, like Safari,\n // do not call the beforeprint event.\n // Bug - Even though onBeforePrint is called before printing, the execution doesn't finish before\n // the print dialog shows up, which results into having a visible loading toast.\n onBeforePrint?.();\n\n // By adding height to the tableWrapper, we make sure the content below absolutely positioned table\n // doesn't hide\n if (isFirefoxBrowser) {\n const tableHeight = `${table.offsetHeight}px`;\n tableWrapper.style.height = tableHeight;\n }\n\n contentRef?.contentWindow?.print();\n\n // Calling the onAfterPrint method here as a fallback to do the cleanup, as certain browsers,\n // like Safari, do not trigger the beforeprint or afterprint events when a confirmation dialog\n // asking if the user wants to print the document, is cancelled.\n\n // Added a setTimeout to prevent calling onAfterPrint immediately after the print function\n // to ensure that the print dialog doesn't close abruptly. Although this behavior is uncommon,\n // there are cases where the print function may not run synchronously, causing onAfterPrint to be\n // invoked right after it.\n timeoutId = setTimeout(() => {\n onAfterPrint?.();\n }, 0);\n }\n }, 1000);\n }\n\n return () => {\n clearInterval(intervalId);\n clearTimeout(timeoutId);\n };\n }, [mountNode, stylesReady]);\n\n React.useEffect(() => {\n if (!iframeWindow || !stylesReady) {\n return;\n }\n\n const iframeDocument = iframeWindow.document;\n // Only the content inside the main element will get printed along with the table.\n const parentDocumentContent =\n iframeWindow.parent.document.querySelector('main')?.innerHTML || iframeWindow.parent.document.body?.innerHTML || '';\n\n iframeDocument.body.innerHTML = parentDocumentContent;\n\n const tableElement = iframeDocument.querySelector('[role=\"table\"]');\n const tableColumnFreezingStyles = iframeDocument.querySelector('[data-taco=\"table3-column-freezing-styles\"]');\n const tableWrapper = iframeDocument.createElement('div');\n\n tableWrapper.setAttribute('data-role', 'table-wrapper');\n // Adding h-fit class makes sure that table is rendered with the whole content.\n tableWrapper.classList.add('h-fit');\n tableWrapper.classList.add('[&>[role=\"table\"]]:!h-fit');\n\n if (isFirefoxBrowser) {\n // Fix for firefox bug which adds page-long whitespace between page's top content and table\n tableWrapper.classList.add('[&>[role=\"table\"]]:!absolute');\n }\n\n // Safari print preview assigns no width to the table when w-screen class is used.\n // By assigning table a big static width and hiding the horizontal scrollbar, the table on chrome\n // and safari will always take full page width.\n tableWrapper.classList.add('w-[10000px]');\n\n if (tableElement) {\n tableElement.parentNode?.insertBefore(tableWrapper, tableElement);\n tableElement.remove();\n } else {\n iframeDocument.body.append(tableWrapper);\n }\n\n // Remove the already existing column freezing styles.\n if (tableColumnFreezingStyles) {\n tableColumnFreezingStyles.remove();\n }\n\n let currentNode = tableWrapper.parentNode as HTMLElement | null;\n\n while (currentNode !== null && currentNode !== iframeDocument.body) {\n // Add the 'h-fit' class to the 'table-wrapper' element's parent chain.\n // This ensures that the table is not cropped and fits within its container.\n currentNode?.classList.add('!h-fit');\n currentNode = currentNode.parentNode as HTMLElement | null;\n }\n\n setMountNode(tableWrapper);\n }, [iframeWindow, stylesReady]);\n\n const printTableProps: Table3Props<TType> = {\n ...tableProps,\n actionsForRow: undefined,\n // Not the best way to remove the active/current row styles, but a temporary solution for now\n defaultCurrentRowIndex: -1,\n defaultSettings: {\n ...tableProps?.defaultSettings,\n rowHeight: 'short',\n },\n enableColumnFreezing: false,\n enableRowHeight: true,\n enableRowSelection: false,\n enableEditing: false,\n enablePrinting: false,\n enableRowDrag: false,\n enableRowDrop: false,\n enableRowSelectionSingle: false,\n preset: undefined,\n };\n\n // -top-60 -left-60 styles make sure that iframe is added outside of the viewport\n return (\n <iframe\n className=\"fixed -left-60 -top-60 !h-0 !w-0\"\n frameBorder=\"0\"\n ref={setContentRef}\n scrolling=\"no\"\n // Temporary fix to support printing in firefox: Find another solution while upgrading React\n src=\"javascript:void(0);\">\n {mountNode && stylesReady ? ReactDOM.createPortal(<Table3 {...printTableProps} />, mountNode) : null}\n </iframe>\n );\n}\n"],"names":["PrintIFrame","onAfterPrint","onBeforePrint","tableProps","contentRef","setContentRef","React","useState","mountNode","setMountNode","isFirefoxBrowser","useMemo","navigator","userAgent","toLowerCase","includes","iframeWindow","contentWindow","stylesReady","useParentStylesheets","useEffect","intervalId","timeoutId","setInterval","tableWrapper","table","querySelector","hasTableRendered","clearInterval","tableHeight","offsetHeight","style","height","print","setTimeout","clearTimeout","iframeDocument","document","parentDocumentContent","parent","innerHTML","body","tableElement","tableColumnFreezingStyles","createElement","setAttribute","classList","add","parentNode","insertBefore","remove","append","currentNode","printTableProps","actionsForRow","undefined","defaultCurrentRowIndex","defaultSettings","rowHeight","enableColumnFreezing","enableRowHeight","enableRowSelection","enableEditing","enablePrinting","enableRowDrag","enableRowDrop","enableRowSelectionSingle","preset","className","frameBorder","ref","scrolling","src","ReactDOM","createPortal","Table3"],"mappings":"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"}
|
@@ -12,6 +12,11 @@ const PRINT_STYLES = `
|
|
12
12
|
width: auto !important;
|
13
13
|
}
|
14
14
|
|
15
|
+
#root {
|
16
|
+
/* chrome sometimes crops the bottom content of page and this padding will make sure that we see the whole content*/
|
17
|
+
padding-bottom: 20px;
|
18
|
+
}
|
19
|
+
|
15
20
|
[role="table"] {
|
16
21
|
border-width: 0 !important;
|
17
22
|
overflow-y: hidden !important;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useParentStylesheets.js","sources":["../../../../../../../../../../../src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.ts"],"sourcesContent":["import React from 'react';\n\nconst PRINT_STYLES = `\n@page {\n margin: 16px;\n}\n\n@media print {\n html, body, #root {\n overflow: auto !important;\n height: auto !important;\n width: auto !important;\n }\n\n [role=\"table\"] {\n border-width: 0 !important;\n overflow-y: hidden !important;\n }\n\n [role=\"table\"] [role=\"columnheader\"] {\n border-bottom-width: 1px !important;\n }\n\n /*\n * Summary row cells\n */\n [role=\"table\"] [role=\"rowgroup\"]:last-child [role=\"cell\"] {\n border-width: 0 !important;\n }\n\n [role=\"table\"] a {\n color: rgb(28 28 28);\n }\n\n [data-taco=\"alert\"],\n [data-taco=\"banner\"],\n [data-taco=\"hanger\"],\n [data-taco=\"toast\"],\n [data-taco=\"table3-toolbar\"],\n [data-taco=\"tooltip\"],\n /*\n * Tour components\n */\n [id^=\"react-joyride\"]\n {\n display: none !important;\n }\n}\n`;\n\nexport function useParentStylesheets(iframeWindow: Window | null | undefined) {\n const [ready, setReady] = React.useState(false);\n\n React.useEffect(() => {\n if (!iframeWindow) {\n return;\n }\n\n const parentDocument = iframeWindow.parent.document;\n const iframeDocument = iframeWindow.document;\n\n // add our custom print styles\n const customPrintStyles = iframeDocument.createElement('style');\n\n if (customPrintStyles) {\n customPrintStyles.innerHTML = PRINT_STYLES;\n iframeDocument.head.appendChild(customPrintStyles);\n }\n\n // Get style tags from the parent\n const parentStylesheets = Array.from(\n parentDocument.querySelectorAll('style:not([data-taco=\"table3-column-freezing-styles\"])')\n );\n // Get linked stylesheets from the parent\n const linkStylesheets = Array.from(parentDocument.querySelectorAll('[rel=\"stylesheet\"]'));\n\n // We want to add tailwind styles specifically but there is no guarenteed way to know which style tag has\n // tailwind styles, so we add all the styles present in the parent frame\n parentStylesheets.forEach(parentStyle => {\n const styleTag = iframeDocument.createElement('style');\n\n styleTag.innerHTML = parentStyle.innerHTML;\n iframeDocument.head.appendChild(styleTag);\n });\n\n // Add all link tags that are stylesheets, to the iframe head, so that we include the taco and client styles\n linkStylesheets.forEach(linkStylesheet => {\n const linkTag = iframeDocument.createElement('link');\n\n linkTag.setAttribute('rel', 'stylesheet');\n linkTag.setAttribute('href', linkStylesheet.getAttribute('href') ?? '');\n\n iframeDocument.head.appendChild(linkTag);\n });\n\n setReady(true);\n }, [iframeWindow]);\n\n return ready;\n}\n"],"names":["PRINT_STYLES","useParentStylesheets","iframeWindow","ready","setReady","React","useState","useEffect","parentDocument","parent","document","iframeDocument","customPrintStyles","createElement","innerHTML","head","appendChild","parentStylesheets","Array","from","querySelectorAll","linkStylesheets","forEach","parentStyle","styleTag","linkStylesheet","linkTag","setAttribute","getAttribute"],"mappings":";;AAEA,MAAMA,YAAY
|
1
|
+
{"version":3,"file":"useParentStylesheets.js","sources":["../../../../../../../../../../../src/components/Table3/components/toolbar/PrintButton/hooks/useParentStylesheets.ts"],"sourcesContent":["import React from 'react';\n\nconst PRINT_STYLES = `\n@page {\n margin: 16px;\n}\n\n@media print {\n html, body, #root {\n overflow: auto !important;\n height: auto !important;\n width: auto !important;\n }\n\n #root {\n /* chrome sometimes crops the bottom content of page and this padding will make sure that we see the whole content*/\n padding-bottom: 20px;\n }\n\n [role=\"table\"] {\n border-width: 0 !important;\n overflow-y: hidden !important;\n }\n\n [role=\"table\"] [role=\"columnheader\"] {\n border-bottom-width: 1px !important;\n }\n\n /*\n * Summary row cells\n */\n [role=\"table\"] [role=\"rowgroup\"]:last-child [role=\"cell\"] {\n border-width: 0 !important;\n }\n\n [role=\"table\"] a {\n color: rgb(28 28 28);\n }\n\n [data-taco=\"alert\"],\n [data-taco=\"banner\"],\n [data-taco=\"hanger\"],\n [data-taco=\"toast\"],\n [data-taco=\"table3-toolbar\"],\n [data-taco=\"tooltip\"],\n /*\n * Tour components\n */\n [id^=\"react-joyride\"]\n {\n display: none !important;\n }\n}\n`;\n\nexport function useParentStylesheets(iframeWindow: Window | null | undefined) {\n const [ready, setReady] = React.useState(false);\n\n React.useEffect(() => {\n if (!iframeWindow) {\n return;\n }\n\n const parentDocument = iframeWindow.parent.document;\n const iframeDocument = iframeWindow.document;\n\n // add our custom print styles\n const customPrintStyles = iframeDocument.createElement('style');\n\n if (customPrintStyles) {\n customPrintStyles.innerHTML = PRINT_STYLES;\n iframeDocument.head.appendChild(customPrintStyles);\n }\n\n // Get style tags from the parent\n const parentStylesheets = Array.from(\n parentDocument.querySelectorAll('style:not([data-taco=\"table3-column-freezing-styles\"])')\n );\n // Get linked stylesheets from the parent\n const linkStylesheets = Array.from(parentDocument.querySelectorAll('[rel=\"stylesheet\"]'));\n\n // We want to add tailwind styles specifically but there is no guarenteed way to know which style tag has\n // tailwind styles, so we add all the styles present in the parent frame\n parentStylesheets.forEach(parentStyle => {\n const styleTag = iframeDocument.createElement('style');\n\n styleTag.innerHTML = parentStyle.innerHTML;\n iframeDocument.head.appendChild(styleTag);\n });\n\n // Add all link tags that are stylesheets, to the iframe head, so that we include the taco and client styles\n linkStylesheets.forEach(linkStylesheet => {\n const linkTag = iframeDocument.createElement('link');\n\n linkTag.setAttribute('rel', 'stylesheet');\n linkTag.setAttribute('href', linkStylesheet.getAttribute('href') ?? '');\n\n iframeDocument.head.appendChild(linkTag);\n });\n\n setReady(true);\n }, [iframeWindow]);\n\n return ready;\n}\n"],"names":["PRINT_STYLES","useParentStylesheets","iframeWindow","ready","setReady","React","useState","useEffect","parentDocument","parent","document","iframeDocument","customPrintStyles","createElement","innerHTML","head","appendChild","parentStylesheets","Array","from","querySelectorAll","linkStylesheets","forEach","parentStyle","styleTag","linkStylesheet","linkTag","setAttribute","getAttribute"],"mappings":";;AAEA,MAAMA,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDjB;SAEeC,oBAAoB,CAACC,YAAuC;EACxE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAE/CD,cAAK,CAACE,SAAS,CAAC;IACZ,IAAI,CAACL,YAAY,EAAE;MACf;;IAGJ,MAAMM,cAAc,GAAGN,YAAY,CAACO,MAAM,CAACC,QAAQ;IACnD,MAAMC,cAAc,GAAGT,YAAY,CAACQ,QAAQ;;IAG5C,MAAME,iBAAiB,GAAGD,cAAc,CAACE,aAAa,CAAC,OAAO,CAAC;IAE/D,IAAID,iBAAiB,EAAE;MACnBA,iBAAiB,CAACE,SAAS,GAAGd,YAAY;MAC1CW,cAAc,CAACI,IAAI,CAACC,WAAW,CAACJ,iBAAiB,CAAC;;;IAItD,MAAMK,iBAAiB,GAAGC,KAAK,CAACC,IAAI,CAChCX,cAAc,CAACY,gBAAgB,CAAC,wDAAwD,CAAC,CAC5F;;IAED,MAAMC,eAAe,GAAGH,KAAK,CAACC,IAAI,CAACX,cAAc,CAACY,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;;;IAIzFH,iBAAiB,CAACK,OAAO,CAACC,WAAW;MACjC,MAAMC,QAAQ,GAAGb,cAAc,CAACE,aAAa,CAAC,OAAO,CAAC;MAEtDW,QAAQ,CAACV,SAAS,GAAGS,WAAW,CAACT,SAAS;MAC1CH,cAAc,CAACI,IAAI,CAACC,WAAW,CAACQ,QAAQ,CAAC;KAC5C,CAAC;;IAGFH,eAAe,CAACC,OAAO,CAACG,cAAc;;MAClC,MAAMC,OAAO,GAAGf,cAAc,CAACE,aAAa,CAAC,MAAM,CAAC;MAEpDa,OAAO,CAACC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC;MACzCD,OAAO,CAACC,YAAY,CAAC,MAAM,2BAAEF,cAAc,CAACG,YAAY,CAAC,MAAM,CAAC,yEAAI,EAAE,CAAC;MAEvEjB,cAAc,CAACI,IAAI,CAACC,WAAW,CAACU,OAAO,CAAC;KAC3C,CAAC;IAEFtB,QAAQ,CAAC,IAAI,CAAC;GACjB,EAAE,CAACF,YAAY,CAAC,CAAC;EAElB,OAAOC,KAAK;AAChB;;;;"}
|
@@ -119,12 +119,12 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
|
|
119
119
|
table.getRowModel().rows.forEach((row, rowIndex) => {
|
120
120
|
columns.forEach((column, columnIndex) => {
|
121
121
|
try {
|
122
|
-
var _column$columnDef$met,
|
123
|
-
if (
|
122
|
+
var _format, _column$columnDef$met, _format2;
|
123
|
+
if (row.original && globalFilterFn(
|
124
124
|
// if it's a date, format it first
|
125
125
|
isDate(row.original[column.id]) ? (_format = format(row.original[column.id])) !== null && _format !== void 0 ? _format : '' :
|
126
126
|
// if its marked as a date but isn't a date, try to format it
|
127
|
-
column.columnDef.meta.dataType === 'datetime' ? (_format2 = format(parseFromISOString(row.original[column.id]))) !== null && _format2 !== void 0 ? _format2 : '' :
|
127
|
+
((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType) === 'datetime' ? (_format2 = format(parseFromISOString(row.original[column.id]))) !== null && _format2 !== void 0 ? _format2 : '' :
|
128
128
|
// otherwise just string compare
|
129
129
|
String(row.original[column.id]), value)) {
|
130
130
|
indexes.push([rowIndex, columnIndex]);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Search.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Switch } from '../../../Switch/Switch';\nimport { globalFilterFn } from '../../util/filtering';\nimport { isDate } from 'date-fns';\nimport { format, parseFromISOString } from '../../../../utils/date';\nimport { SearchInput2 } from '../../../SearchInput2/SearchInput2';\n\ntype SearchProps<TType = unknown> = {\n scrollToIndex: any;\n table: RTable<TType>;\n};\n\nexport function Search<TType = unknown>(props: SearchProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLInputElement>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n // update the indexes if the row length changes (e.g. when filtering)\n React.useEffect(() => {\n const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, ref.current?.value, table);\n\n if (firstRowIndex) {\n scrollTo(firstRowIndex);\n }\n }, [\n tableMeta.search.query,\n tableMeta.search.excludeUnmatchedResults,\n table.getRowModel().rows.length,\n JSON.stringify(table.getState().sorting),\n JSON.stringify(table.getState().columnVisibility),\n ]);\n\n const handleSearch = async (query: any) => {\n const value = String(query ?? '');\n\n // load all data if that is possible\n if (tableMeta.search.loadAll) {\n // don't pass the search query because we need all data - not filtered data\n await tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined);\n }\n\n if (tableMeta.search.excludeUnmatchedResults) {\n if (value?.length) {\n table.setGlobalFilter(value);\n } else {\n table.resetGlobalFilter();\n }\n }\n\n tableMeta.search.setQuery(value);\n };\n\n const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n tableMeta.search.toggleExcludeUnmatchedResults(enabled);\n\n if (enabled) {\n if (ref.current?.value) {\n table.setGlobalFilter(ref.current?.value);\n } else {\n table.resetGlobalFilter();\n }\n } else {\n table.resetGlobalFilter();\n }\n\n requestAnimationFrame(() => ref.current?.focus());\n };\n\n const handleNextResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined ||\n tableMeta.search.currentHighlightColumnIndex === tableMeta.search.highlightedColumnIndexes.length - 1\n ? 0\n : tableMeta.search.currentHighlightColumnIndex + 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const handlePreviousResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined\n ? 0\n : tableMeta.search.currentHighlightColumnIndex === 0\n ? tableMeta.search.highlightedColumnIndexes.length - 1\n : tableMeta.search.currentHighlightColumnIndex - 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const settings = (\n <Switch\n label={texts.table3.search.excludeUnmatchedResults}\n checked={tableMeta.search.excludeUnmatchedResults}\n onChange={handleToggleExcludeUnmatchedResults}\n />\n );\n\n return (\n <>\n <SearchInput2\n findCurrent={\n tableMeta.search.currentHighlightColumnIndex !== undefined\n ? tableMeta.search.currentHighlightColumnIndex + 1\n : null\n }\n findTotal={tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null}\n onClickFindPrevious={handlePreviousResult}\n onClickFindNext={handleNextResult}\n onSearch={handleSearch}\n placeholder={texts.table3.search.placeholder}\n settingsContent={settings}\n ref={ref}\n shortcut={{ key: 'f', meta: true, shift: false }}\n value={tableMeta.search.query}\n />\n </>\n );\n}\n\nfunction resetHighlightedColumnIndexes<TType = unknown>(enabled: boolean, value: string | undefined, table: RTable<TType>) {\n const tableMeta = table.options.meta as TableMeta<TType>;\n let firstRowIndex: undefined | number;\n\n if (enabled && value) {\n const rowIndexes: number[] = [];\n const indexes: number[][] = [];\n const columns = table.getVisibleLeafColumns();\n\n table.getRowModel().rows.forEach((row, rowIndex) => {\n columns.forEach((column, columnIndex) => {\n try {\n if (\n column.columnDef.meta?.enableSearch &&\n row.original &&\n globalFilterFn(\n // if it's a date, format it first\n isDate(row.original[column.id])\n ? format(row.original[column.id]) ?? ''\n : // if its marked as a date but isn't a date, try to format it\n column.columnDef.meta.dataType === 'datetime'\n ? format(parseFromISOString(row.original[column.id])) ?? ''\n : // otherwise just string compare\n String(row.original[column.id]),\n value\n )\n ) {\n indexes.push([rowIndex, columnIndex]);\n }\n } catch (e) {\n //\n }\n });\n\n if (indexes.length) {\n rowIndexes.push(rowIndex);\n }\n });\n\n tableMeta.search.setHighlightedColumnIndexes(indexes);\n\n if (indexes.length) {\n firstRowIndex = indexes[0][0];\n tableMeta.search.setCurrentHighlightColumnIndex(0);\n } else {\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n } else {\n tableMeta.search.setHighlightedColumnIndexes([]);\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n\n if (firstRowIndex !== undefined) {\n tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);\n }\n\n return firstRowIndex;\n}\n"],"names":["Search","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","scrollTo","rowIndex","align","useEffect","firstRowIndex","resetHighlightedColumnIndexes","search","isHighlightingEnabled","current","value","query","excludeUnmatchedResults","getRowModel","rows","length","JSON","stringify","getState","sorting","columnVisibility","handleSearch","setGlobalFilter","resetGlobalFilter","setQuery","String","loadAll","columnFilters","undefined","handleToggleExcludeUnmatchedResults","enabled","toggleExcludeUnmatchedResults","requestAnimationFrame","focus","handleNextResult","highlightedColumnIndexes","nextIndex","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","table3","checked","onChange","SearchInput2","findCurrent","findTotal","onClickFindPrevious","onClickFindNext","onSearch","placeholder","settingsContent","shortcut","key","shift","indexes","columns","getVisibleLeafColumns","forEach","row","column","columnIndex","columnDef","enableSearch","original","globalFilterFn","isDate","id","format","dataType","parseFromISOString","push","e","setHighlightedColumnIndexes","currentRow","setCurrentRowIndex"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Switch } from '../../../Switch/Switch';\nimport { globalFilterFn } from '../../util/filtering';\nimport { isDate } from 'date-fns';\nimport { format, parseFromISOString } from '../../../../utils/date';\nimport { SearchInput2 } from '../../../SearchInput2/SearchInput2';\n\ntype SearchProps<TType = unknown> = {\n scrollToIndex: any;\n table: RTable<TType>;\n};\n\nexport function Search<TType = unknown>(props: SearchProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLInputElement>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n // update the indexes if the row length changes (e.g. when filtering)\n React.useEffect(() => {\n const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, ref.current?.value, table);\n\n if (firstRowIndex) {\n scrollTo(firstRowIndex);\n }\n }, [\n tableMeta.search.query,\n tableMeta.search.excludeUnmatchedResults,\n table.getRowModel().rows.length,\n JSON.stringify(table.getState().sorting),\n JSON.stringify(table.getState().columnVisibility),\n ]);\n\n const handleSearch = async (query: any) => {\n const value = String(query ?? '');\n\n // load all data if that is possible\n if (tableMeta.search.loadAll) {\n // don't pass the search query because we need all data - not filtered data\n await tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined);\n }\n\n if (tableMeta.search.excludeUnmatchedResults) {\n if (value?.length) {\n table.setGlobalFilter(value);\n } else {\n table.resetGlobalFilter();\n }\n }\n\n tableMeta.search.setQuery(value);\n };\n\n const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n tableMeta.search.toggleExcludeUnmatchedResults(enabled);\n\n if (enabled) {\n if (ref.current?.value) {\n table.setGlobalFilter(ref.current?.value);\n } else {\n table.resetGlobalFilter();\n }\n } else {\n table.resetGlobalFilter();\n }\n\n requestAnimationFrame(() => ref.current?.focus());\n };\n\n const handleNextResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined ||\n tableMeta.search.currentHighlightColumnIndex === tableMeta.search.highlightedColumnIndexes.length - 1\n ? 0\n : tableMeta.search.currentHighlightColumnIndex + 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const handlePreviousResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined\n ? 0\n : tableMeta.search.currentHighlightColumnIndex === 0\n ? tableMeta.search.highlightedColumnIndexes.length - 1\n : tableMeta.search.currentHighlightColumnIndex - 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const settings = (\n <Switch\n label={texts.table3.search.excludeUnmatchedResults}\n checked={tableMeta.search.excludeUnmatchedResults}\n onChange={handleToggleExcludeUnmatchedResults}\n />\n );\n\n return (\n <>\n <SearchInput2\n findCurrent={\n tableMeta.search.currentHighlightColumnIndex !== undefined\n ? tableMeta.search.currentHighlightColumnIndex + 1\n : null\n }\n findTotal={tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null}\n onClickFindPrevious={handlePreviousResult}\n onClickFindNext={handleNextResult}\n onSearch={handleSearch}\n placeholder={texts.table3.search.placeholder}\n settingsContent={settings}\n ref={ref}\n shortcut={{ key: 'f', meta: true, shift: false }}\n value={tableMeta.search.query}\n />\n </>\n );\n}\n\nfunction resetHighlightedColumnIndexes<TType = unknown>(enabled: boolean, value: string | undefined, table: RTable<TType>) {\n const tableMeta = table.options.meta as TableMeta<TType>;\n let firstRowIndex: undefined | number;\n\n if (enabled && value) {\n const rowIndexes: number[] = [];\n const indexes: number[][] = [];\n const columns = table.getVisibleLeafColumns();\n\n table.getRowModel().rows.forEach((row, rowIndex) => {\n columns.forEach((column, columnIndex) => {\n try {\n if (\n row.original &&\n globalFilterFn(\n // if it's a date, format it first\n isDate(row.original[column.id])\n ? format(row.original[column.id]) ?? ''\n : // if its marked as a date but isn't a date, try to format it\n column.columnDef.meta?.dataType === 'datetime'\n ? format(parseFromISOString(row.original[column.id])) ?? ''\n : // otherwise just string compare\n String(row.original[column.id]),\n value\n )\n ) {\n indexes.push([rowIndex, columnIndex]);\n }\n } catch (e) {\n //\n }\n });\n\n if (indexes.length) {\n rowIndexes.push(rowIndex);\n }\n });\n\n tableMeta.search.setHighlightedColumnIndexes(indexes);\n\n if (indexes.length) {\n firstRowIndex = indexes[0][0];\n tableMeta.search.setCurrentHighlightColumnIndex(0);\n } else {\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n } else {\n tableMeta.search.setHighlightedColumnIndexes([]);\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n\n if (firstRowIndex !== undefined) {\n tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);\n }\n\n return firstRowIndex;\n}\n"],"names":["Search","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","scrollTo","rowIndex","align","useEffect","firstRowIndex","resetHighlightedColumnIndexes","search","isHighlightingEnabled","current","value","query","excludeUnmatchedResults","getRowModel","rows","length","JSON","stringify","getState","sorting","columnVisibility","handleSearch","setGlobalFilter","resetGlobalFilter","setQuery","String","loadAll","columnFilters","undefined","handleToggleExcludeUnmatchedResults","enabled","toggleExcludeUnmatchedResults","requestAnimationFrame","focus","handleNextResult","highlightedColumnIndexes","nextIndex","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","table3","checked","onChange","SearchInput2","findCurrent","findTotal","onClickFindPrevious","onClickFindNext","onSearch","placeholder","settingsContent","shortcut","key","shift","indexes","columns","getVisibleLeafColumns","forEach","row","column","columnIndex","original","globalFilterFn","isDate","id","format","columnDef","dataType","parseFromISOString","push","e","setHighlightedColumnIndexes","currentRow","setCurrentRowIndex"],"mappings":"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"}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import React__default from 'react';
|
2
|
+
import { Tooltip } from '../../../Tooltip/Tooltip.js';
|
2
3
|
import { IconButton } from '../../../IconButton/IconButton.js';
|
3
4
|
import { useLocalization } from '../../../Provider/Localization.js';
|
4
5
|
import { Group } from '../../../Group/Group.js';
|
@@ -42,7 +43,10 @@ function Toolbar(props) {
|
|
42
43
|
}) : null, tableMeta.printing.isEnabled ? /*#__PURE__*/React__default.createElement(PrintButton, {
|
43
44
|
table: table,
|
44
45
|
tableProps: tableProps
|
45
|
-
}) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(
|
46
|
+
}) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(Tooltip, {
|
47
|
+
title: texts.table3.otherOptions.tooltip
|
48
|
+
}, /*#__PURE__*/React__default.createElement(IconButton, {
|
49
|
+
"aria-label": texts.table3.otherOptions.tooltip,
|
46
50
|
icon: "more",
|
47
51
|
menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
|
48
52
|
align: "end"
|
@@ -57,7 +61,7 @@ function Toolbar(props) {
|
|
57
61
|
table: table
|
58
62
|
})
|
59
63
|
}, texts.table3.fontSize.tooltip) : null))
|
60
|
-
}) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search, {
|
64
|
+
})) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search, {
|
61
65
|
scrollToIndex: scrollToIndex,
|
62
66
|
table: table
|
63
67
|
}) : null));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { RowHeight } from './RowHeight';\nimport { Search } from './Search';\nimport { Group } from '../../../Group/Group';\nimport { Filters } from './Filter/filters/Filters';\nimport { ColumnSettings } from './ColumnSettings';\nimport { EditButton } from './EditButton';\nimport { PrintButton } from './PrintButton/PrintButton';\nimport { Table3Props } from '../../types';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { IconName } from '../../../Icon/Icon';\nimport { FontSize } from './FontSize';\n\nexport type ToolbarProps<TType = unknown> = {\n left?: JSX.Element;\n right?: JSX.Element;\n scrollToIndex: any;\n table: RTable<TType>;\n tableProps: Table3Props<TType>;\n total: number;\n};\nexport function Toolbar<TType = unknown>(props: ToolbarProps<TType>) {\n const { left, right, scrollToIndex, table, tableProps, total } = props;\n const { texts } = useLocalization();\n\n if (!isToolbarVisible(props)) {\n return null;\n }\n\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n return (\n <div className=\"mb-4 flex flex-shrink flex-grow-0 gap-2\" data-taco=\"table3-toolbar\">\n {left}\n <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n {tableMeta.editing.isEnabled ? <EditButton table={table} /> : null}\n {table.options.enableColumnFilters ? <Filters table={table} total={total} /> : null}\n {table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? <ColumnSettings table={table} /> : null}\n {tableMeta.printing.isEnabled ? <PrintButton table={table} tableProps={tableProps} /> : null}\n {right}\n {isMoreVisible(props) ? (\n <IconButton\n
|
1
|
+
{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { RowHeight } from './RowHeight';\nimport { Search } from './Search';\nimport { Group } from '../../../Group/Group';\nimport { Filters } from './Filter/filters/Filters';\nimport { ColumnSettings } from './ColumnSettings';\nimport { EditButton } from './EditButton';\nimport { PrintButton } from './PrintButton/PrintButton';\nimport { Table3Props } from '../../types';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { IconName } from '../../../Icon/Icon';\nimport { FontSize } from './FontSize';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\n\nexport type ToolbarProps<TType = unknown> = {\n left?: JSX.Element;\n right?: JSX.Element;\n scrollToIndex: any;\n table: RTable<TType>;\n tableProps: Table3Props<TType>;\n total: number;\n};\nexport function Toolbar<TType = unknown>(props: ToolbarProps<TType>) {\n const { left, right, scrollToIndex, table, tableProps, total } = props;\n const { texts } = useLocalization();\n\n if (!isToolbarVisible(props)) {\n return null;\n }\n\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n return (\n <div className=\"mb-4 flex flex-shrink flex-grow-0 gap-2\" data-taco=\"table3-toolbar\">\n {left}\n <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n {tableMeta.editing.isEnabled ? <EditButton table={table} /> : null}\n {table.options.enableColumnFilters ? <Filters table={table} total={total} /> : null}\n {table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? <ColumnSettings table={table} /> : null}\n {tableMeta.printing.isEnabled ? <PrintButton table={table} tableProps={tableProps} /> : null}\n {right}\n {isMoreVisible(props) ? (\n <Tooltip title={texts.table3.otherOptions.tooltip}>\n <IconButton\n aria-label={texts.table3.otherOptions.tooltip}\n icon=\"more\"\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content align=\"end\">\n {tableMeta.rowHeight.isEnabled ? (\n <Menu.Item\n icon={`height-${tableMeta.rowHeight.height}` as IconName}\n subMenu={() => <RowHeight table={table} />}>\n {texts.table3.rowHeight.tooltip}\n </Menu.Item>\n ) : null}\n {tableMeta.fontSize.isEnabled ? (\n <Menu.Item icon=\"font-size\" subMenu={() => <FontSize table={table} />}>\n {texts.table3.fontSize.tooltip}\n </Menu.Item>\n ) : null}\n </Menu.Content>\n </Menu>\n )}\n />\n </Tooltip>\n ) : null}\n {tableMeta.search.isEnabled ? <Search scrollToIndex={scrollToIndex} table={table} /> : null}\n </Group>\n </div>\n );\n}\n\nfunction isMoreVisible<TType = unknown>(props: ToolbarProps<TType>) {\n const { table } = props;\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled;\n}\n\nfunction isToolbarVisible<TType = unknown>(props: ToolbarProps<TType>) {\n const { left, right, table } = props;\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const enableSettingsButton = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n const hasInternalToolbar =\n enableSettingsButton ||\n tableMeta.editing.isEnabled ||\n tableMeta.printing.isEnabled ||\n table.options.enableColumnFilters ||\n tableMeta.fontSize.isEnabled ||\n tableMeta.rowHeight.isEnabled ||\n tableMeta.search.isEnabled;\n\n return hasInternalToolbar || !!left || !!right;\n}\n"],"names":["Toolbar","props","left","right","scrollToIndex","table","tableProps","total","texts","useLocalization","isToolbarVisible","tableMeta","options","meta","React","className","Group","editing","isEnabled","EditButton","enableColumnFilters","Filters","enableHiding","columnOrdering","ColumnSettings","printing","PrintButton","isMoreVisible","Tooltip","title","table3","otherOptions","tooltip","IconButton","icon","menu","menuProps","Menu","Content","align","rowHeight","Item","height","subMenu","RowHeight","fontSize","FontSize","search","Search","enableSettingsButton","hasInternalToolbar"],"mappings":"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"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { isInternalColumn } from '../../util/columns.js';
|
3
3
|
|
4
|
-
function
|
5
|
-
let index =
|
4
|
+
function getFrozenInternalColumnCount(options) {
|
5
|
+
let index = 0;
|
6
6
|
if (options.enableRowDrag) {
|
7
7
|
index++;
|
8
8
|
}
|
@@ -12,7 +12,7 @@ function getDefaultFrozenIndex(options, defaultFrozenIndex = -1) {
|
|
12
12
|
if (options.enableRowExpansion) {
|
13
13
|
index++;
|
14
14
|
}
|
15
|
-
return index
|
15
|
+
return index;
|
16
16
|
}
|
17
17
|
/*
|
18
18
|
Because of the desired behaviour of column freezing we use custom state and just an index.
|
@@ -20,7 +20,7 @@ If a frozen column is, for example, hidden, then the desired behaviour is that t
|
|
20
20
|
If this behaviour were different we would just use the native column pinning functionality
|
21
21
|
*/
|
22
22
|
function useColumnFreezing(defaultFrozenIndex, options) {
|
23
|
-
const [frozenColumnIndex, _setFrozenColumnIndex] = React__default.useState(
|
23
|
+
const [frozenColumnIndex, _setFrozenColumnIndex] = React__default.useState(() => defaultFrozenIndex);
|
24
24
|
const [horizontallyScrolled, setHorizontallyScrolled] = React__default.useState(false);
|
25
25
|
const onScroll = event => {
|
26
26
|
if (event.currentTarget.scrollLeft > 0 && !horizontallyScrolled) {
|
@@ -29,11 +29,13 @@ function useColumnFreezing(defaultFrozenIndex, options) {
|
|
29
29
|
setHorizontallyScrolled(false);
|
30
30
|
}
|
31
31
|
};
|
32
|
-
const
|
33
|
-
|
34
|
-
|
32
|
+
const frozenInternalColumnCount = React__default.useMemo(() => getFrozenInternalColumnCount(options), []);
|
33
|
+
// we must set a value when undefined is explicitly set, otherwise nothing is saved to settings
|
34
|
+
// and the next time the table loads it will fall back to the initial value even though the user changed it
|
35
|
+
const setFrozenColumnIndex = index => _setFrozenColumnIndex(index !== null && index !== void 0 ? index : -1);
|
35
36
|
return {
|
36
37
|
isEnabled: options.enableColumnFreezing,
|
38
|
+
frozenInternalColumnCount,
|
37
39
|
frozenColumnIndex,
|
38
40
|
setFrozenColumnIndex,
|
39
41
|
horizontallyScrolled,
|
@@ -41,6 +43,7 @@ function useColumnFreezing(defaultFrozenIndex, options) {
|
|
41
43
|
};
|
42
44
|
}
|
43
45
|
function useColumnFreezingStyle(tableId, table) {
|
46
|
+
var _tableMeta$columnFree;
|
44
47
|
const {
|
45
48
|
columnOrder,
|
46
49
|
columnSizing,
|
@@ -48,9 +51,10 @@ function useColumnFreezingStyle(tableId, table) {
|
|
48
51
|
columnVisibility
|
49
52
|
} = table.getState();
|
50
53
|
const tableMeta = table.options.meta;
|
54
|
+
const frozenColumnIndex = ((_tableMeta$columnFree = tableMeta.columnFreezing.frozenColumnIndex) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : -1) + tableMeta.columnFreezing.frozenInternalColumnCount;
|
51
55
|
const style = React__default.useMemo(() => {
|
52
|
-
if (tableMeta.columnFreezing.isEnabled &&
|
53
|
-
const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0,
|
56
|
+
if (tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined) {
|
57
|
+
const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1).map(column => column.id);
|
54
58
|
// if all frozen columns haven't had their size set yet, then abort
|
55
59
|
if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {
|
56
60
|
return undefined;
|
@@ -60,28 +64,28 @@ function useColumnFreezingStyle(tableId, table) {
|
|
60
64
|
offsets[columnId] = offset;
|
61
65
|
return offset + columnSizing[columnId];
|
62
66
|
}, 0);
|
63
|
-
const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${
|
67
|
+
const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${frozenColumnIndex + 2})) {
|
64
68
|
position: sticky;
|
65
|
-
z-index: 20;
|
66
|
-
}`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${
|
69
|
+
z-index: 20;
|
70
|
+
}`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
|
67
71
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%), 1px 0px 0px #DDDDDD;
|
68
72
|
}`];
|
69
|
-
const columnId = visibleFrozenColumns[
|
73
|
+
const columnId = visibleFrozenColumns[frozenColumnIndex];
|
70
74
|
// frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId
|
71
75
|
// exists before checking if it is internal.
|
72
76
|
//
|
73
77
|
// only add a border to the edge column if it isn't an internal column
|
74
78
|
if (columnId && !isInternalColumn(columnId)) {
|
75
|
-
styles.push(`#${tableId}[data-horizontally-scrolled="false"] [role="row"] > :nth-child(${
|
79
|
+
styles.push(`#${tableId}[data-horizontally-scrolled="false"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
|
76
80
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 1px 0px 0px #DDDDDD;
|
77
81
|
}`);
|
78
82
|
}
|
79
83
|
return styles.join('\n');
|
80
84
|
}
|
81
85
|
return undefined;
|
82
|
-
}, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled,
|
86
|
+
}, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled, frozenColumnIndex]);
|
83
87
|
return style;
|
84
88
|
}
|
85
89
|
|
86
|
-
export {
|
90
|
+
export { getFrozenInternalColumnCount, useColumnFreezing, useColumnFreezingStyle };
|
87
91
|
//# sourceMappingURL=useColumnFreezing.js.map
|
package/dist/esm/packages/taco/src/components/Table3/hooks/features/useColumnFreezing.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useColumnFreezing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useColumnFreezing.ts"],"sourcesContent":["import { Table, TableMeta } from '@tanstack/react-table';\nimport React from 'react';\nimport { Table3Options } from '../../types';\nimport { isInternalColumn } from '../../util/columns';\n\nexport function
|
1
|
+
{"version":3,"file":"useColumnFreezing.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useColumnFreezing.ts"],"sourcesContent":["import { Table, TableMeta } from '@tanstack/react-table';\nimport React from 'react';\nimport { Table3Options } from '../../types';\nimport { isInternalColumn } from '../../util/columns';\n\nexport function getFrozenInternalColumnCount(options: Table3Options) {\n let index = 0;\n\n if (options.enableRowDrag) {\n index++;\n }\n\n if (options.enableRowSelection) {\n index++;\n }\n\n if (options.enableRowExpansion) {\n index++;\n }\n\n return index;\n}\n\n/*\nBecause of the desired behaviour of column freezing we use custom state and just an index.\nIf a frozen column is, for example, hidden, then the desired behaviour is that the next available column gets frozen.\nIf this behaviour were different we would just use the native column pinning functionality\n*/\nexport function useColumnFreezing(defaultFrozenIndex: number | undefined, options: Table3Options) {\n const [frozenColumnIndex, _setFrozenColumnIndex] = React.useState<number | undefined>(() => defaultFrozenIndex);\n\n const [horizontallyScrolled, setHorizontallyScrolled] = React.useState(false);\n\n const onScroll = (event: React.MouseEvent<HTMLDivElement>) => {\n if (event.currentTarget.scrollLeft > 0 && !horizontallyScrolled) {\n setHorizontallyScrolled(true);\n } else if (event.currentTarget.scrollLeft === 0 && horizontallyScrolled) {\n setHorizontallyScrolled(false);\n }\n };\n\n const frozenInternalColumnCount = React.useMemo(() => getFrozenInternalColumnCount(options), []);\n // we must set a value when undefined is explicitly set, otherwise nothing is saved to settings\n // and the next time the table loads it will fall back to the initial value even though the user changed it\n const setFrozenColumnIndex = (index: number | undefined) => _setFrozenColumnIndex(index ?? -1);\n\n return {\n isEnabled: options.enableColumnFreezing,\n frozenInternalColumnCount,\n frozenColumnIndex,\n setFrozenColumnIndex,\n horizontallyScrolled,\n handleScroll: onScroll,\n };\n}\n\nexport function useColumnFreezingStyle<TType = unknown>(tableId: string, table: Table<TType>) {\n const { columnOrder, columnSizing, columnSizingInfo, columnVisibility } = table.getState();\n const tableMeta = table.options.meta as TableMeta<TType>;\n const frozenColumnIndex =\n (tableMeta.columnFreezing.frozenColumnIndex ?? -1) + tableMeta.columnFreezing.frozenInternalColumnCount;\n\n const style = React.useMemo(() => {\n if (tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined) {\n const visibleFrozenColumns = table\n .getVisibleLeafColumns()\n .slice(0, frozenColumnIndex + 1)\n .map(column => column.id);\n\n // if all frozen columns haven't had their size set yet, then abort\n if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {\n return undefined;\n }\n\n const offsets = {};\n\n visibleFrozenColumns.reduce((offset, columnId) => {\n offsets[columnId] = offset;\n return offset + columnSizing[columnId];\n }, 0);\n\n const styles = [\n Object.values(offsets)\n .map((offset, index) => `#${tableId} [role=\"row\"] > :nth-child(${index + 1}) { left: ${offset}px }`)\n .join('\\n'),\n `#${tableId} [role=\"row\"] > :not(:nth-child(n+${frozenColumnIndex + 2})) {\n position: sticky;\n z-index: 20;\n }`,\n `#${tableId}[data-horizontally-scrolled=\"true\"] [role=\"row\"] > :nth-child(${frozenColumnIndex + 1}) {\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%), 1px 0px 0px #DDDDDD;\n }`,\n ];\n\n const columnId = visibleFrozenColumns[frozenColumnIndex];\n\n // frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId\n // exists before checking if it is internal.\n //\n // only add a border to the edge column if it isn't an internal column\n if (columnId && !isInternalColumn(columnId)) {\n styles.push(`#${tableId}[data-horizontally-scrolled=\"false\"] [role=\"row\"] > :nth-child(${frozenColumnIndex + 1}) {\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 1px 0px 0px #DDDDDD;\n }`);\n }\n\n return styles.join('\\n');\n }\n\n return undefined;\n }, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled, frozenColumnIndex]);\n\n return style;\n}\n"],"names":["getFrozenInternalColumnCount","options","index","enableRowDrag","enableRowSelection","enableRowExpansion","useColumnFreezing","defaultFrozenIndex","frozenColumnIndex","_setFrozenColumnIndex","React","useState","horizontallyScrolled","setHorizontallyScrolled","onScroll","event","currentTarget","scrollLeft","frozenInternalColumnCount","useMemo","setFrozenColumnIndex","isEnabled","enableColumnFreezing","handleScroll","useColumnFreezingStyle","tableId","table","columnOrder","columnSizing","columnSizingInfo","columnVisibility","getState","tableMeta","meta","columnFreezing","style","undefined","visibleFrozenColumns","getVisibleLeafColumns","slice","map","column","id","every","offsets","reduce","offset","columnId","styles","Object","values","join","isInternalColumn","push"],"mappings":"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"}
|