@economic/taco 2.21.2 → 2.22.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Report/Report.d.ts +21 -0
- package/dist/components/Report/components/Cell/Cell.d.ts +0 -1
- package/dist/components/Report/components/Cell/DisplayCell.d.ts +1 -1
- package/dist/components/Report/components/Cell/util.d.ts +1 -1
- package/dist/components/Report/components/Row/DisplayRow.d.ts +2 -9
- package/dist/components/Report/components/Toolbar/components/Filters/components/Placeholder.d.ts +5 -5
- package/dist/components/Report/listeners/useTableRowActiveListener.d.ts +3 -0
- package/dist/components/Report/styles/util.d.ts +2 -2
- package/dist/components/Report/types.d.ts +1 -3
- package/dist/components/Report/useReport.d.ts +2 -7
- package/dist/components/Table3/types.d.ts +1 -1
- package/dist/esm/index.css +501 -9
- package/dist/esm/packages/taco/src/components/Card/Card.js +1 -1
- package/dist/esm/packages/taco/src/components/Card/Card.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Group/Group.js +1 -1
- package/dist/esm/packages/taco/src/components/Group/Group.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Input/Input.js +37 -7
- package/dist/esm/packages/taco/src/components/Input/Input.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Input/util.js +3 -1
- package/dist/esm/packages/taco/src/components/Input/util.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Report/Report.js +70 -0
- package/dist/esm/packages/taco/src/components/Report/Report.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Body/Body.js +61 -0
- package/dist/esm/packages/taco/src/components/Report/components/Body/Body.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Body/util.js +22 -0
- package/dist/esm/packages/taco/src/components/Report/components/Body/util.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/Cell.js +32 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/Cell.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/DisplayCell.js +23 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/DisplayCell.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/GroupedCell.js +58 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/GroupedCell.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/util.js +69 -0
- package/dist/esm/packages/taco/src/components/Report/components/Cell/util.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Footer/Footer.js +34 -0
- package/dist/esm/packages/taco/src/components/Report/components/Footer/Footer.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Footer/Summary.js +39 -0
- package/dist/esm/packages/taco/src/components/Report/components/Footer/Summary.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/Header.js +194 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/Header.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/Goto.js +28 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/Goto.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/Menu.js +150 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/Menu.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/Resizer.js +60 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/Resizer.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/SortIndicator.js +41 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/components/SortIndicator.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/util.js +24 -0
- package/dist/esm/packages/taco/src/components/Report/components/Header/util.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Internal/Actions.js +90 -0
- package/dist/esm/packages/taco/src/components/Report/components/Internal/Actions.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Internal/Expansion.js +59 -0
- package/dist/esm/packages/taco/src/components/Report/components/Internal/Expansion.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Internal/Selection.js +118 -0
- package/dist/esm/packages/taco/src/components/Report/components/Internal/Selection.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/DisplayRow.js +102 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/DisplayRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/Row.js +24 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/Row.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/RowContext.js +10 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/RowContext.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/SkeletonRow.js +62 -0
- package/dist/esm/packages/taco/src/components/Report/components/Row/SkeletonRow.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/Toolbar.js +63 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/Toolbar.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/Filters.js +50 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/Filters.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/ManageFiltersPopover.js +136 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/ManageFiltersPopover.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/Filter.js +95 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/Filter.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/FilterColumn.js +49 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/FilterColumn.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/FilterComparator.js +110 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/FilterComparator.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/FilterValue.js +118 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/FilterValue.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/Placeholder.js +41 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/components/Placeholder.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/util.js +7 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Filters/util.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Print/Print.js +123 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Print/Print.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Print/PrintDialog.js +88 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Print/PrintDialog.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Search/Search.js +95 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Search/Search.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Settings/HideOrOrderPopover.js +105 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Settings/HideOrOrderPopover.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Settings/Settings.js +103 -0
- package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Settings/Settings.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/listeners/useTableRowActiveListener.js +24 -0
- package/dist/esm/packages/taco/src/components/Report/listeners/useTableRowActiveListener.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/styles/useColumnPinningStylesheet.js +44 -0
- package/dist/esm/packages/taco/src/components/Report/styles/useColumnPinningStylesheet.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/styles/useCssGridStylesheet.js +54 -0
- package/dist/esm/packages/taco/src/components/Report/styles/useCssGridStylesheet.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/styles/useStylesheet.js +20 -0
- package/dist/esm/packages/taco/src/components/Report/styles/useStylesheet.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/styles/util.js +61 -0
- package/dist/esm/packages/taco/src/components/Report/styles/util.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/useReport.js +51 -0
- package/dist/esm/packages/taco/src/components/Report/useReport.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/util/rows.js +10 -0
- package/dist/esm/packages/taco/src/components/Report/util/rows.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/util/useTableGlobalShortcuts.js +39 -0
- package/dist/esm/packages/taco/src/components/Report/util/useTableGlobalShortcuts.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Report/util/useTableRenderer.js +162 -0
- package/dist/esm/packages/taco/src/components/Report/util/useTableRenderer.js.map +1 -0
- package/dist/esm/packages/taco/src/components/ScrollArea/ScrollArea.js +2 -1
- package/dist/esm/packages/taco/src/components/ScrollArea/ScrollArea.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/Select2.js +2 -2
- package/dist/esm/packages/taco/src/components/Select2/components/Create.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Edit.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Option.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +6 -7
- package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowActions.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +7 -2
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js +6 -6
- package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js +7 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/Cell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +2 -0
- 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/cell/EditingCell.js +6 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js +3 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Summary.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Menu.js +9 -1
- 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/Actions.js +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +2 -0
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js +3 -3
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js +4 -8
- 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/FilterComparator.js +1 -0
- 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/PrintButton/PrintButton.js +19 -14
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js +6 -5
- 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/Search.js +18 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useColumnFreezing.js +8 -14
- 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/useEditing.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSettings.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js +5 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +15 -15
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTablePreset.js +20 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTablePreset.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/columns.js +2 -0
- package/dist/esm/packages/taco/src/components/Table3/util/columns.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Textarea/Textarea.js +1 -1
- package/dist/esm/packages/taco/src/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/packages/taco/src/hooks/useBoundaryOverflowDetection.js +1 -1
- package/dist/esm/packages/taco/src/index.js +7 -6
- package/dist/esm/packages/taco/src/index.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Button.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Button.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/types.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableColumnFreezing.js +21 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableColumnFreezing.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableFooter.js +8 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableFooter.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTablePrinting.js +16 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTablePrinting.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRef.js +17 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRef.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRowActions.js +11 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRowActions.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRowExpansion.js +9 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRowExpansion.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRowGroups.js +9 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableRowGroups.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableSearch.js +38 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableSearch.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableSettings.js +28 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/features/useTableSettings.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableRowHeightListener.js +14 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableRowHeightListener.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableSearchListener.js +15 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableSearchListener.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableSettingsListener.js +26 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/listeners/useTableSettingsListener.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/useTable.js +117 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/useTable.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/columns.js +30 -3
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/columns.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/filtering.js +131 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/filtering.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/presets.js +131 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/presets.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/search.js +43 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/search.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/settings.js +22 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/settings.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/setup.js +270 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/setup.js.map +1 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/sorting.js +18 -0
- package/dist/esm/packages/taco/src/primitives/Table/useTable/util/sorting.js.map +1 -0
- package/dist/esm/packages/taco/src/utils/dom.js +5 -1
- package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/keyboard.js +3 -5
- package/dist/esm/packages/taco/src/utils/keyboard.js.map +1 -1
- package/dist/index.css +501 -9
- package/dist/index.d.ts +1 -0
- package/dist/primitives/Table/types.d.ts +2 -2
- package/dist/primitives/Table/useTable/features/useTablePrinting.d.ts +1 -1
- package/dist/primitives/Table/useTable/util/settings.d.ts +1 -1
- package/dist/primitives/Table/useTable/util/sorting.d.ts +1 -1
- package/dist/taco.cjs.development.js +6380 -2731
- 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/dist/utils/dom.d.ts +1 -0
- package/dist/utils/keyboard.d.ts +0 -1
- package/package.json +2 -2
- package/types.json +4682 -4776
- package/dist/components/Report/features/useReportExport.d.ts +0 -3
package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Search/Search.js
ADDED
@@ -0,0 +1,95 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { useLocalization } from '../../../../../Provider/Localization.js';
|
3
|
+
import { TableServerLoadAllState } from '../../../../../../primitives/Table/types.js';
|
4
|
+
import { SearchInput2 } from '../../../../../SearchInput2/SearchInput2.js';
|
5
|
+
import { Switch } from '../../../../../Switch/Switch.js';
|
6
|
+
|
7
|
+
function Search(props) {
|
8
|
+
var _tableMeta$search$hig, _tableMeta$search$hig2;
|
9
|
+
const {
|
10
|
+
scrollToIndex,
|
11
|
+
table
|
12
|
+
} = props;
|
13
|
+
const {
|
14
|
+
texts
|
15
|
+
} = useLocalization();
|
16
|
+
const ref = React__default.useRef(null);
|
17
|
+
const tableMeta = table.options.meta;
|
18
|
+
const query = table.getState().globalFilter;
|
19
|
+
const scrollTo = rowIndex => scrollToIndex(rowIndex, {
|
20
|
+
align: 'center'
|
21
|
+
});
|
22
|
+
React__default.useEffect(() => {
|
23
|
+
if (tableMeta.search.highlightedColumnIndexes.length) {
|
24
|
+
scrollTo(tableMeta.search.highlightedColumnIndexes[0][0]);
|
25
|
+
}
|
26
|
+
}, [tableMeta.search.highlightedColumnIndexes.length]);
|
27
|
+
const handleFocus = function () {
|
28
|
+
try {
|
29
|
+
const _temp = function () {
|
30
|
+
if (tableMeta.server.loadAllIfNeeded) {
|
31
|
+
// don't pass the search query because we need all data - not filtered data
|
32
|
+
return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
|
33
|
+
}
|
34
|
+
}();
|
35
|
+
// load all data if that is possible
|
36
|
+
return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
|
37
|
+
} catch (e) {
|
38
|
+
return Promise.reject(e);
|
39
|
+
}
|
40
|
+
};
|
41
|
+
const handleChange = query => {
|
42
|
+
table.setGlobalFilter(String(query !== null && query !== void 0 ? query : ''));
|
43
|
+
};
|
44
|
+
const handleToggleExcludeUnmatchedResults = enabled => {
|
45
|
+
tableMeta.search.setEnableGlobalFilter(enabled, table);
|
46
|
+
requestAnimationFrame(() => {
|
47
|
+
var _ref$current;
|
48
|
+
return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
|
49
|
+
});
|
50
|
+
};
|
51
|
+
const handleNextResult = () => {
|
52
|
+
if (!tableMeta.search.highlightedColumnIndexes.length) {
|
53
|
+
return;
|
54
|
+
}
|
55
|
+
const nextIndex = tableMeta.search.currentHighlightColumnIndex === undefined || tableMeta.search.currentHighlightColumnIndex === tableMeta.search.highlightedColumnIndexes.length - 1 ? 0 : tableMeta.search.currentHighlightColumnIndex + 1;
|
56
|
+
tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);
|
57
|
+
// we scroll to the row here, the cell scrolls itself into view
|
58
|
+
scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);
|
59
|
+
};
|
60
|
+
const handlePreviousResult = () => {
|
61
|
+
if (!tableMeta.search.highlightedColumnIndexes.length) {
|
62
|
+
return;
|
63
|
+
}
|
64
|
+
const nextIndex = tableMeta.search.currentHighlightColumnIndex === undefined ? 0 : tableMeta.search.currentHighlightColumnIndex === 0 ? tableMeta.search.highlightedColumnIndexes.length - 1 : tableMeta.search.currentHighlightColumnIndex - 1;
|
65
|
+
tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);
|
66
|
+
// we scroll to the row here, the cell scrolls itself into view
|
67
|
+
scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);
|
68
|
+
};
|
69
|
+
const settings = /*#__PURE__*/React__default.createElement(Switch, {
|
70
|
+
label: texts.table3.search.excludeUnmatchedResults,
|
71
|
+
checked: !!table.options.enableGlobalFilter,
|
72
|
+
onChange: handleToggleExcludeUnmatchedResults
|
73
|
+
});
|
74
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchInput2, {
|
75
|
+
findCurrent: tableMeta.search.currentHighlightColumnIndex !== undefined ? tableMeta.search.currentHighlightColumnIndex + 1 : null,
|
76
|
+
findTotal: (_tableMeta$search$hig = (_tableMeta$search$hig2 = tableMeta.search.highlightedColumnIndexes) === null || _tableMeta$search$hig2 === void 0 ? void 0 : _tableMeta$search$hig2.length) !== null && _tableMeta$search$hig !== void 0 ? _tableMeta$search$hig : null,
|
77
|
+
loading: tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading,
|
78
|
+
onClickFindPrevious: handlePreviousResult,
|
79
|
+
onClickFindNext: handleNextResult,
|
80
|
+
onChange: handleChange,
|
81
|
+
onFocus: handleFocus,
|
82
|
+
placeholder: texts.table3.search.placeholder,
|
83
|
+
settingsContent: settings,
|
84
|
+
ref: ref,
|
85
|
+
shortcut: {
|
86
|
+
key: 'f',
|
87
|
+
meta: true,
|
88
|
+
shift: false
|
89
|
+
},
|
90
|
+
value: query
|
91
|
+
}));
|
92
|
+
}
|
93
|
+
|
94
|
+
export { Search };
|
95
|
+
//# sourceMappingURL=Search.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../../../../../../../../../../src/components/Report/components/Toolbar/components/Search/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { SearchInput2 } from '../../../../../SearchInput2/SearchInput2';\nimport { Switch } from '../../../../../Switch/Switch';\nimport { TableServerLoadAllState } from '../../../../../../primitives/Table/types';\n\ntype SearchProps<TType = unknown> = {\n scrollToIndex: any;\n table: ReactTable<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 ReactTableMeta<TType>;\n const query = table.getState().globalFilter;\n const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n React.useEffect(() => {\n if (tableMeta.search.highlightedColumnIndexes.length) {\n scrollTo(tableMeta.search.highlightedColumnIndexes[0][0]);\n }\n }, [tableMeta.search.highlightedColumnIndexes.length]);\n\n const handleFocus = async () => {\n // load all data if that is possible\n if (tableMeta.server.loadAllIfNeeded) {\n // don't pass the search query because we need all data - not filtered data\n await tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined);\n }\n };\n\n const handleChange = (query: any) => {\n table.setGlobalFilter(String(query ?? ''));\n };\n\n const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n tableMeta.search.setEnableGlobalFilter(enabled, table);\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={!!table.options.enableGlobalFilter}\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?.length ?? null}\n loading={tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading}\n onClickFindPrevious={handlePreviousResult}\n onClickFindNext={handleNextResult}\n onChange={handleChange}\n onFocus={handleFocus}\n placeholder={texts.table3.search.placeholder}\n settingsContent={settings}\n ref={ref}\n shortcut={{ key: 'f', meta: true, shift: false }}\n value={query}\n />\n </>\n );\n}\n"],"names":["Search","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","query","getState","globalFilter","scrollTo","rowIndex","align","useEffect","search","highlightedColumnIndexes","length","handleFocus","server","loadAllIfNeeded","Promise","resolve","sorting","columnFilters","undefined","then","_temp","e","reject","handleChange","setGlobalFilter","String","handleToggleExcludeUnmatchedResults","enabled","setEnableGlobalFilter","requestAnimationFrame","_ref$current","current","focus","handleNextResult","nextIndex","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","table3","excludeUnmatchedResults","checked","enableGlobalFilter","onChange","SearchInput2","findCurrent","findTotal","_tableMeta$search$hig","_tableMeta$search$hig2","loading","loadAllStatus","TableServerLoadAllState","Loading","onClickFindPrevious","onClickFindNext","onFocus","placeholder","settingsContent","shortcut","key","shift","value"],"mappings":"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"}
|
@@ -0,0 +1,105 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import cn from 'clsx';
|
3
|
+
import { Icon } from '../../../../../Icon/Icon.js';
|
4
|
+
import { useLocalization } from '../../../../../Provider/Localization.js';
|
5
|
+
import { Checkbox } from '../../../../../Checkbox/Checkbox.js';
|
6
|
+
import { Input } from '../../../../../Input/Input.js';
|
7
|
+
import { Popover } from '../../../../../Popover/Popover.js';
|
8
|
+
import { isInternalColumn, ensureOrdering } from '../../../../../../primitives/Table/useTable/util/columns.js';
|
9
|
+
import { Container } from '../../../../../../primitives/Sortable/components/Container.js';
|
10
|
+
import { arrayMove } from '@dnd-kit/sortable';
|
11
|
+
import { Item } from '../../../../../../primitives/Sortable/components/Item.js';
|
12
|
+
import { List } from '../../../../../../primitives/Sortable/components/List.js';
|
13
|
+
|
14
|
+
const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
|
15
|
+
var _column$parent, _column$parent$column, _column$columnDef$met;
|
16
|
+
const {
|
17
|
+
column,
|
18
|
+
draggable = false,
|
19
|
+
...dragAttributes
|
20
|
+
} = props;
|
21
|
+
const canHide = column.getCanHide();
|
22
|
+
const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {
|
23
|
+
'hover:bg-grey-200': canHide || draggable,
|
24
|
+
'hover:cursor-pointer': canHide,
|
25
|
+
'active:cursor-move active:bg-grey-300': draggable
|
26
|
+
});
|
27
|
+
const attributes = draggable ? dragAttributes : undefined;
|
28
|
+
const isVisible = column.getIsVisible();
|
29
|
+
const parentHeader = (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header;
|
30
|
+
return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
|
31
|
+
className: className,
|
32
|
+
onClick: () => column.toggleVisibility(!isVisible),
|
33
|
+
ref: ref
|
34
|
+
}), draggable ? /*#__PURE__*/React__default.createElement(Icon, {
|
35
|
+
name: "drag",
|
36
|
+
className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5"
|
37
|
+
}) : null, /*#__PURE__*/React__default.createElement("span", {
|
38
|
+
className: "flex-grow truncate"
|
39
|
+
}, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header, parentHeader ? /*#__PURE__*/React__default.createElement("span", {
|
40
|
+
className: "italic"
|
41
|
+
}, "(", parentHeader, ")") : null), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
|
42
|
+
checked: isVisible,
|
43
|
+
onChange: () => column.toggleVisibility(!isVisible)
|
44
|
+
}) : null);
|
45
|
+
});
|
46
|
+
function HideOrOrderPopover(props) {
|
47
|
+
const {
|
48
|
+
table,
|
49
|
+
trigger,
|
50
|
+
...popoverProps
|
51
|
+
} = props;
|
52
|
+
const {
|
53
|
+
texts
|
54
|
+
} = useLocalization();
|
55
|
+
const [query, setQuery] = React__default.useState('');
|
56
|
+
const allColumns = table.getAllLeafColumns();
|
57
|
+
const tableMeta = table.options.meta;
|
58
|
+
const columns = React__default.useMemo(() => allColumns.filter(column => !isInternalColumn(column.id)).filter(column => {
|
59
|
+
var _column$columnDef$met2, _column$parent2, _column$parent2$colum;
|
60
|
+
return query !== null && query !== void 0 && query.length ? ((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header.toLowerCase().includes(query.toLowerCase())) || ((_column$parent2 = column.parent) === null || _column$parent2 === void 0 ? void 0 : (_column$parent2$colum = _column$parent2.columnDef.meta) === null || _column$parent2$colum === void 0 ? void 0 : _column$parent2$colum.header.toLowerCase().includes(query.toLowerCase())) : true;
|
61
|
+
}), [allColumns, query]);
|
62
|
+
const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
|
63
|
+
const handleReorder = (activeId, overId) => {
|
64
|
+
if (columns.find(column => {
|
65
|
+
var _column$columnDef$met3;
|
66
|
+
return column.id === overId && ((_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.enableOrdering) === false;
|
67
|
+
})) {
|
68
|
+
return;
|
69
|
+
}
|
70
|
+
table.setColumnOrder((currentOrder = []) => ensureOrdering(allColumns, arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
|
71
|
+
};
|
72
|
+
return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
|
73
|
+
anchor: trigger
|
74
|
+
}), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
|
75
|
+
className: "flex max-w-sm flex-col gap-2"
|
76
|
+
}, table.options.enableHiding ? ( /*#__PURE__*/React__default.createElement(Input, {
|
77
|
+
onChange: event => setQuery(event.target.value),
|
78
|
+
placeholder: texts.table3.columnSettings.search,
|
79
|
+
value: query
|
80
|
+
})) : null, tableMeta.columnOrdering.isEnabled && columns.length && !(query !== null && query !== void 0 && query.length) ? ( /*#__PURE__*/React__default.createElement(Container, {
|
81
|
+
reorder: handleReorder
|
82
|
+
}, /*#__PURE__*/React__default.createElement(List, {
|
83
|
+
id: "columns",
|
84
|
+
className: listClassName
|
85
|
+
}, columns.filter(column => !column.getIsGrouped()).map(column => {
|
86
|
+
var _column$columnDef$met4, _column$columnDef$met5;
|
87
|
+
return /*#__PURE__*/React__default.createElement(Item, {
|
88
|
+
key: column.id,
|
89
|
+
id: column.id,
|
90
|
+
disabled: !((_column$columnDef$met4 = column.columnDef.meta) !== null && _column$columnDef$met4 !== void 0 && _column$columnDef$met4.enableOrdering),
|
91
|
+
asChild: true
|
92
|
+
}, /*#__PURE__*/React__default.createElement(Column, {
|
93
|
+
column: column,
|
94
|
+
draggable: (_column$columnDef$met5 = column.columnDef.meta) === null || _column$columnDef$met5 === void 0 ? void 0 : _column$columnDef$met5.enableOrdering
|
95
|
+
}));
|
96
|
+
})))) : ( /*#__PURE__*/React__default.createElement("div", {
|
97
|
+
className: listClassName
|
98
|
+
}, columns.length ? columns.map(column => /*#__PURE__*/React__default.createElement(Column, {
|
99
|
+
column: column,
|
100
|
+
key: column.id
|
101
|
+
})) : texts.table3.columnSettings.noResults)))));
|
102
|
+
}
|
103
|
+
|
104
|
+
export { HideOrOrderPopover };
|
105
|
+
//# sourceMappingURL=HideOrOrderPopover.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"HideOrOrderPopover.js","sources":["../../../../../../../../../../../src/components/Report/components/Toolbar/components/Settings/HideOrOrderPopover.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Table as ReactTable, Column as ReactTableColumn, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Popover, PopoverProps } from '../../../../../Popover/Popover';\nimport { Input } from '../../../../../Input/Input';\nimport * as SortablePrimitive from '../../../../../../primitives/Sortable/Sortable';\nimport { Icon } from '../../../../../Icon/Icon';\nimport { Checkbox } from '../../../../../Checkbox/Checkbox';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { ensureOrdering, isInternalColumn } from '../../../../../../primitives/Table/useTable/util/columns';\n\ntype ColumnProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n column: ReactTableColumn<TType, unknown>;\n draggable?: boolean;\n};\n\nconst Column = React.forwardRef(function Column<TType = unknown>(props: ColumnProps<TType>, ref: React.Ref<HTMLDivElement>) {\n const { column, draggable = false, ...dragAttributes } = props;\n const canHide = column.getCanHide();\n\n const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {\n 'hover:bg-grey-200': canHide || draggable,\n 'hover:cursor-pointer': canHide,\n 'active:cursor-move active:bg-grey-300': draggable,\n });\n\n const attributes = draggable ? dragAttributes : undefined;\n const isVisible = column.getIsVisible();\n const parentHeader = column.parent?.columnDef?.header;\n\n return (\n <div {...attributes} className={className} onClick={() => column.toggleVisibility(!isVisible)} ref={ref}>\n {draggable ? <Icon name=\"drag\" className=\"text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5\" /> : null}\n <span className=\"flex-grow truncate\">\n {column.columnDef.meta?.header}\n {parentHeader ? <span className=\"italic\">({parentHeader})</span> : null}\n </span>\n {canHide ? <Checkbox checked={isVisible} onChange={() => column.toggleVisibility(!isVisible)} /> : null}\n </div>\n );\n});\n\nexport type HideOrOrderPopoverProps<TType = unknown> = PopoverProps & {\n table: ReactTable<TType>;\n};\n\nexport function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>) {\n const { table, trigger, ...popoverProps } = props;\n const { texts } = useLocalization();\n const [query, setQuery] = React.useState('');\n const allColumns = table.getAllLeafColumns();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columns = React.useMemo(\n () =>\n allColumns\n .filter(column => !isInternalColumn(column.id))\n .filter(column =>\n query?.length\n ? column.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase()) ||\n column.parent?.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase())\n : true\n ),\n [allColumns, query]\n );\n\n const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';\n\n const handleReorder = (activeId, overId) => {\n if (columns.find(column => column.id === overId && column.columnDef.meta?.enableOrdering === false)) {\n return;\n }\n\n table.setColumnOrder((currentOrder = []) =>\n ensureOrdering(\n allColumns,\n SortablePrimitive.arrayMove(\n currentOrder,\n currentOrder.findIndex(c => c === activeId),\n currentOrder.findIndex(c => c === overId)\n )\n )\n );\n };\n\n return (\n <Popover {...popoverProps} anchor={trigger}>\n <Popover.Content>\n <div className=\"flex max-w-sm flex-col gap-2\">\n {table.options.enableHiding ? (\n <Input\n onChange={event => setQuery(event.target.value)}\n placeholder={texts.table3.columnSettings.search}\n value={query}\n />\n ) : null}\n {tableMeta.columnOrdering.isEnabled && columns.length && !query?.length ? (\n <SortablePrimitive.Container reorder={handleReorder}>\n <SortablePrimitive.List id=\"columns\" className={listClassName}>\n {columns\n .filter(column => !column.getIsGrouped())\n .map(column => (\n <SortablePrimitive.Item\n key={column.id}\n id={column.id}\n disabled={!column.columnDef.meta?.enableOrdering}\n asChild>\n <Column column={column as any} draggable={column.columnDef.meta?.enableOrdering} />\n </SortablePrimitive.Item>\n ))}\n </SortablePrimitive.List>\n </SortablePrimitive.Container>\n ) : (\n <div className={listClassName}>\n {columns.length\n ? columns.map(column => <Column column={column as any} key={column.id} />)\n : texts.table3.columnSettings.noResults}\n </div>\n )}\n </div>\n </Popover.Content>\n </Popover>\n );\n}\n"],"names":["Column","React","forwardRef","props","ref","column","draggable","dragAttributes","canHide","getCanHide","className","cn","attributes","undefined","isVisible","getIsVisible","parentHeader","_column$parent","parent","_column$parent$column","columnDef","header","onClick","toggleVisibility","Icon","name","meta","_column$columnDef$met","Checkbox","checked","onChange","HideOrOrderPopover","table","trigger","popoverProps","texts","useLocalization","query","setQuery","useState","allColumns","getAllLeafColumns","tableMeta","options","columns","useMemo","filter","isInternalColumn","id","_column$columnDef$met2","_column$parent2","_column$parent2$colum","length","toLowerCase","includes","listClassName","handleReorder","activeId","overId","find","_column$columnDef$met3","enableOrdering","setColumnOrder","currentOrder","ensureOrdering","SortablePrimitive","findIndex","c","Popover","anchor","Content","enableHiding","Input","event","target","value","placeholder","table3","columnSettings","search","columnOrdering","isEnabled","reorder","getIsGrouped","map","_column$columnDef$met4","_column$columnDef$met5","key","disabled","asChild","noResults"],"mappings":"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"}
|
@@ -0,0 +1,103 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { IconButton } from '../../../../../IconButton/IconButton.js';
|
3
|
+
import { useLocalization } from '../../../../../Provider/Localization.js';
|
4
|
+
import { Menu } from '../../../../../Menu/Menu.js';
|
5
|
+
import { FontSizes } from '../../../../../../types.js';
|
6
|
+
import { getSettings } from '../../../../../../primitives/Table/useTable/util/settings.js';
|
7
|
+
import { HideOrOrderPopover } from './HideOrOrderPopover.js';
|
8
|
+
|
9
|
+
function Settings(props) {
|
10
|
+
const {
|
11
|
+
customSettings,
|
12
|
+
table
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
texts
|
16
|
+
} = useLocalization();
|
17
|
+
const tableMeta = table.options.meta;
|
18
|
+
const canHideOrOrder = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;
|
19
|
+
const canChangeFontSize = tableMeta.fontSize.isEnabled;
|
20
|
+
const canChangeRowHeight = tableMeta.rowHeight.isEnabled;
|
21
|
+
const [popover, setPopover] = React__default.useState(undefined);
|
22
|
+
let popoverElement;
|
23
|
+
if (popover) {
|
24
|
+
const handleClosePopover = () => setPopover(undefined);
|
25
|
+
switch (popover) {
|
26
|
+
case 'columnSettings':
|
27
|
+
{
|
28
|
+
if (canHideOrOrder) {
|
29
|
+
popoverElement = popoverProps => ( /*#__PURE__*/React__default.createElement(HideOrOrderPopover, Object.assign({}, popoverProps, {
|
30
|
+
open: true,
|
31
|
+
onChange: handleClosePopover,
|
32
|
+
table: table
|
33
|
+
})));
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
37
|
+
}
|
38
|
+
return /*#__PURE__*/React__default.createElement(IconButton, {
|
39
|
+
"aria-label": texts.table3.otherOptions.tooltip,
|
40
|
+
icon: "sliders",
|
41
|
+
menu: popoverElement ? undefined : menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
|
42
|
+
align: "end"
|
43
|
+
}, canHideOrOrder ? ( /*#__PURE__*/React__default.createElement(Menu.Item, {
|
44
|
+
icon: "columns",
|
45
|
+
onClick: () => setPopover('columnSettings')
|
46
|
+
}, texts.table3.columnSettings.button)) : null, canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? ( /*#__PURE__*/React__default.createElement(Menu.Separator, null)) : null, canChangeRowHeight ? ( /*#__PURE__*/React__default.createElement(Menu.Item, {
|
47
|
+
icon: `height-${tableMeta.rowHeight.height}`,
|
48
|
+
subMenu: () => /*#__PURE__*/React__default.createElement(RowHeightMenuItem, {
|
49
|
+
tableMeta: tableMeta
|
50
|
+
})
|
51
|
+
}, texts.table3.rowHeight.tooltip)) : null, canChangeFontSize ? ( /*#__PURE__*/React__default.createElement(Menu.Item, {
|
52
|
+
icon: "font-size",
|
53
|
+
subMenu: () => /*#__PURE__*/React__default.createElement(FontSizeMenuItem, {
|
54
|
+
tableMeta: tableMeta
|
55
|
+
})
|
56
|
+
}, texts.table3.fontSize.tooltip)) : null, customSettings ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canChangeRowHeight || canChangeFontSize ? /*#__PURE__*/React__default.createElement(Menu.Separator, null) : null, customSettings(getSettings(table)).map((item, index) => ( /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
57
|
+
key: index
|
58
|
+
}, item))))) : null))),
|
59
|
+
popover: popoverElement,
|
60
|
+
onClickCapture: event => event.preventDefault(),
|
61
|
+
tooltip: texts.table3.otherOptions.tooltip
|
62
|
+
});
|
63
|
+
}
|
64
|
+
function FontSizeMenuItem({
|
65
|
+
tableMeta
|
66
|
+
}) {
|
67
|
+
const {
|
68
|
+
texts
|
69
|
+
} = useLocalization();
|
70
|
+
return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
|
71
|
+
onChange: tableMeta.fontSize.setSize,
|
72
|
+
value: tableMeta.fontSize.size
|
73
|
+
}, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
74
|
+
value: FontSizes.small
|
75
|
+
}, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
76
|
+
value: FontSizes.medium
|
77
|
+
}, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
78
|
+
disabled: tableMeta.rowHeight.height === 'short',
|
79
|
+
value: FontSizes.large
|
80
|
+
}, texts.table3.fontSize.sizes.large)));
|
81
|
+
}
|
82
|
+
function RowHeightMenuItem({
|
83
|
+
tableMeta
|
84
|
+
}) {
|
85
|
+
const {
|
86
|
+
texts
|
87
|
+
} = useLocalization();
|
88
|
+
return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
|
89
|
+
onChange: tableMeta.rowHeight.setHeight,
|
90
|
+
value: tableMeta.rowHeight.height
|
91
|
+
}, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
92
|
+
value: "short"
|
93
|
+
}, texts.table3.rowHeight.sizes.short), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
94
|
+
value: "medium"
|
95
|
+
}, texts.table3.rowHeight.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
96
|
+
value: "tall"
|
97
|
+
}, texts.table3.rowHeight.sizes.tall), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
98
|
+
value: "extra-tall"
|
99
|
+
}, texts.table3.rowHeight.sizes.extraTall)));
|
100
|
+
}
|
101
|
+
|
102
|
+
export { Settings };
|
103
|
+
//# sourceMappingURL=Settings.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Settings.js","sources":["../../../../../../../../../../../src/components/Report/components/Toolbar/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Menu } from '../../../../../Menu/Menu';\nimport { HideOrOrderPopover } from './HideOrOrderPopover';\nimport { ReportCustomSettingsRenderer } from '../../../../types';\nimport { getSettings } from '../../../../../../primitives/Table/useTable/util/settings';\nimport { FontSizes } from '../../../../../../types';\nimport { IconName } from '../../../../../Icon/Icon';\n\nexport type SettingsProps<TType = unknown> = {\n customSettings?: ReportCustomSettingsRenderer;\n table: ReactTable<TType>;\n};\n\nexport function Settings<TType = unknown>(props: SettingsProps<TType>) {\n const { customSettings, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const canHideOrOrder = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n const canChangeFontSize = tableMeta.fontSize.isEnabled;\n const canChangeRowHeight = tableMeta.rowHeight.isEnabled;\n\n const [popover, setPopover] = React.useState<string | undefined>(undefined);\n\n let popoverElement;\n\n if (popover) {\n const handleClosePopover = () => setPopover(undefined);\n\n switch (popover) {\n case 'columnSettings': {\n if (canHideOrOrder) {\n popoverElement = popoverProps => (\n <HideOrOrderPopover {...popoverProps} open onChange={handleClosePopover} table={table} />\n );\n }\n }\n }\n }\n\n return (\n <IconButton\n aria-label={texts.table3.otherOptions.tooltip}\n icon=\"sliders\"\n menu={\n popoverElement\n ? undefined\n : menuProps => (\n <Menu {...menuProps}>\n <Menu.Content align=\"end\">\n {canHideOrOrder ? (\n <Menu.Item icon=\"columns\" onClick={() => setPopover('columnSettings')}>\n {texts.table3.columnSettings.button}\n </Menu.Item>\n ) : null}\n {canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? (\n <Menu.Separator />\n ) : null}\n {canChangeRowHeight ? (\n <Menu.Item\n icon={`height-${tableMeta.rowHeight.height}` as IconName}\n subMenu={() => <RowHeightMenuItem tableMeta={tableMeta} />}>\n {texts.table3.rowHeight.tooltip}\n </Menu.Item>\n ) : null}\n {canChangeFontSize ? (\n <Menu.Item icon=\"font-size\" subMenu={() => <FontSizeMenuItem tableMeta={tableMeta} />}>\n {texts.table3.fontSize.tooltip}\n </Menu.Item>\n ) : null}\n\n {customSettings ? (\n <>\n {canChangeRowHeight || canChangeFontSize ? <Menu.Separator /> : null}\n {customSettings(getSettings(table)).map((item, index) => (\n <React.Fragment key={index}>{item}</React.Fragment>\n ))}\n </>\n ) : null}\n </Menu.Content>\n </Menu>\n )\n }\n popover={popoverElement}\n onClickCapture={event => event.preventDefault()}\n tooltip={texts.table3.otherOptions.tooltip}\n />\n );\n}\n\nfunction FontSizeMenuItem<TType = unknown>({ tableMeta }: { tableMeta: ReactTableMeta<TType> }) {\n const { texts } = useLocalization();\n\n return (\n <Menu.SubMenu>\n <Menu.RadioGroup onChange={tableMeta.fontSize.setSize as any} value={tableMeta.fontSize.size}>\n <Menu.RadioGroup.Item value={FontSizes.small}>{texts.table3.fontSize.sizes.small}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value={FontSizes.medium}>{texts.table3.fontSize.sizes.medium}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item disabled={tableMeta.rowHeight.height === 'short'} value={FontSizes.large}>\n {texts.table3.fontSize.sizes.large}\n </Menu.RadioGroup.Item>\n </Menu.RadioGroup>\n </Menu.SubMenu>\n );\n}\n\nfunction RowHeightMenuItem<TType = unknown>({ tableMeta }: { tableMeta: ReactTableMeta<TType> }) {\n const { texts } = useLocalization();\n\n return (\n <Menu.SubMenu>\n <Menu.RadioGroup onChange={tableMeta.rowHeight.setHeight as any} value={tableMeta.rowHeight.height}>\n <Menu.RadioGroup.Item value=\"short\">{texts.table3.rowHeight.sizes.short}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"medium\">{texts.table3.rowHeight.sizes.medium}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"tall\">{texts.table3.rowHeight.sizes.tall}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value=\"extra-tall\">{texts.table3.rowHeight.sizes.extraTall}</Menu.RadioGroup.Item>\n </Menu.RadioGroup>\n </Menu.SubMenu>\n );\n}\n"],"names":["Settings","props","customSettings","table","texts","useLocalization","tableMeta","options","meta","canHideOrOrder","enableHiding","columnOrdering","isEnabled","canChangeFontSize","fontSize","canChangeRowHeight","rowHeight","popover","setPopover","React","useState","undefined","popoverElement","handleClosePopover","popoverProps","HideOrOrderPopover","open","onChange","IconButton","table3","otherOptions","tooltip","icon","menu","menuProps","Menu","Content","align","Item","onClick","columnSettings","button","Separator","height","subMenu","RowHeightMenuItem","FontSizeMenuItem","getSettings","map","item","index","Fragment","key","onClickCapture","event","preventDefault","SubMenu","RadioGroup","setSize","value","size","FontSizes","small","sizes","medium","disabled","large","setHeight","short","tall","extraTall"],"mappings":"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"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { isElementInsideOrTriggeredFromContainer, isEventTriggeredOnInteractiveElement } from '../../../utils/dom.js';
|
3
|
+
|
4
|
+
function useTableRowActiveListener(table, tableRef) {
|
5
|
+
const tableMeta = table.options.meta;
|
6
|
+
// move focus to the row when active row changes, this makes sure we start within the row when tabbing
|
7
|
+
React__default.useEffect(() => {
|
8
|
+
if (tableMeta.rowActive.rowActiveIndex !== undefined) {
|
9
|
+
var _tableRef$current$que, _tableRef$current;
|
10
|
+
const activeRow = (_tableRef$current$que = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector('tbody tr[data-row-active="true"]')) !== null && _tableRef$current$que !== void 0 ? _tableRef$current$que : null;
|
11
|
+
// if the focused element, or it's parent if it's portalled, aren't in the row, then focus the row
|
12
|
+
// this ensures the next tab press starts at the row
|
13
|
+
if (!isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) && !isEventTriggeredOnInteractiveElement(document.activeElement)) {
|
14
|
+
var _activeRow$focus;
|
15
|
+
activeRow === null || activeRow === void 0 ? void 0 : (_activeRow$focus = activeRow.focus) === null || _activeRow$focus === void 0 ? void 0 : _activeRow$focus.call(activeRow, {
|
16
|
+
preventScroll: true
|
17
|
+
});
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}, [tableMeta.rowActive.rowActiveIndex]);
|
21
|
+
}
|
22
|
+
|
23
|
+
export { useTableRowActiveListener };
|
24
|
+
//# sourceMappingURL=useTableRowActiveListener.js.map
|
package/dist/esm/packages/taco/src/components/Report/listeners/useTableRowActiveListener.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useTableRowActiveListener.js","sources":["../../../../../../../../src/components/Report/listeners/useTableRowActiveListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { isElementInsideOrTriggeredFromContainer, isEventTriggeredOnInteractiveElement } from '../../../utils/dom';\n\nexport function useTableRowActiveListener<TType = unknown>(\n table: ReactTable<TType>,\n tableRef: React.RefObject<HTMLTableElement>\n) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n // move focus to the row when active row changes, this makes sure we start within the row when tabbing\n React.useEffect(() => {\n if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n const activeRow = tableRef.current?.querySelector('tbody tr[data-row-active=\"true\"]') ?? null;\n\n // if the focused element, or it's parent if it's portalled, aren't in the row, then focus the row\n // this ensures the next tab press starts at the row\n if (\n !isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) &&\n !isEventTriggeredOnInteractiveElement(document.activeElement)\n ) {\n (activeRow as HTMLElement)?.focus?.({ preventScroll: true });\n }\n }\n }, [tableMeta.rowActive.rowActiveIndex]);\n}\n"],"names":["useTableRowActiveListener","table","tableRef","tableMeta","options","meta","React","useEffect","rowActive","rowActiveIndex","undefined","_tableRef$current$que","_tableRef$current","activeRow","current","querySelector","isElementInsideOrTriggeredFromContainer","document","activeElement","isEventTriggeredOnInteractiveElement","_activeRow$focus","focus","call","preventScroll"],"mappings":";;;SAIgBA,yBAAyBA,CACrCC,KAAwB,EACxBC,QAA2C;EAE3C,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;;EAG7DC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIJ,SAAS,CAACK,SAAS,CAACC,cAAc,KAAKC,SAAS,EAAE;MAAA,IAAAC,qBAAA,EAAAC,iBAAA;MAClD,MAAMC,SAAS,IAAAF,qBAAA,IAAAC,iBAAA,GAAGV,QAAQ,CAACY,OAAO,cAAAF,iBAAA,uBAAhBA,iBAAA,CAAkBG,aAAa,CAAC,kCAAkC,CAAC,cAAAJ,qBAAA,cAAAA,qBAAA,GAAI,IAAI;;;MAI7F,IACI,CAACK,uCAAuC,CAACC,QAAQ,CAACC,aAAa,EAAEL,SAAS,CAAC,IAC3E,CAACM,oCAAoC,CAACF,QAAQ,CAACC,aAAa,CAAC,EAC/D;QAAA,IAAAE,gBAAA;QACGP,SAAyB,aAAzBA,SAAyB,wBAAAO,gBAAA,GAAzBP,SAAyB,CAAEQ,KAAK,cAAAD,gBAAA,uBAAhCA,gBAAA,CAAAE,IAAA,CAAAT,SAAyB,EAAU;UAAEU,aAAa,EAAE;SAAM,CAAC;;;GAGvE,EAAE,CAACpB,SAAS,CAACK,SAAS,CAACC,cAAc,CAAC,CAAC;AAC5C;;;;"}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
|
3
|
+
function useColumnPinningStylesheet(tableId, table) {
|
4
|
+
const {
|
5
|
+
columnPinning
|
6
|
+
} = table.getState();
|
7
|
+
const stylesheet = React__default.useMemo(() => {
|
8
|
+
const styles = [];
|
9
|
+
// might be a better way to get this information, but it wasn't obvious
|
10
|
+
const all = table.getFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
|
11
|
+
const left = table.getLeftFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
|
12
|
+
const right = table.getRightFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
|
13
|
+
if (left.length) {
|
14
|
+
const index = all.indexOf(left[left.length - 1]);
|
15
|
+
// add right border, hide the header seperator and add shadow when scrolled
|
16
|
+
// we have to be specific so that nested tables don't inherit the same css
|
17
|
+
styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}),
|
18
|
+
table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1}) {
|
19
|
+
border-right-width: 1px;
|
20
|
+
}\ntable[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1})[data-cell-id^="__"],
|
21
|
+
table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1})[data-cell-id^="__"] {
|
22
|
+
border-right-color: transparent;
|
23
|
+
}\ntable[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}):after {
|
24
|
+
content: none;
|
25
|
+
}\ntable[data-taco='report'][data-table-horizontally-scrolled="true"]#${tableId} > thead > tr > th:nth-child(${index + 1}),
|
26
|
+
table[data-taco='report'][data-table-horizontally-scrolled="true"]#${tableId} > tbody > tr > td:nth-child(${index + 1}) {
|
27
|
+
border-right-color: rgb(221, 221, 221);
|
28
|
+
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%);
|
29
|
+
}`);
|
30
|
+
}
|
31
|
+
if (right.length) {
|
32
|
+
const index = all.indexOf(right[right.length - 1]);
|
33
|
+
styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}):not([data-cell-id^="__"]),
|
34
|
+
table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1}):not([data-cell-id^="__"]) {
|
35
|
+
border-left-width: 1px;
|
36
|
+
}`);
|
37
|
+
}
|
38
|
+
return styles.join('\n');
|
39
|
+
}, [columnPinning]);
|
40
|
+
return stylesheet;
|
41
|
+
}
|
42
|
+
|
43
|
+
export { useColumnPinningStylesheet };
|
44
|
+
//# sourceMappingURL=useColumnPinningStylesheet.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useColumnPinningStylesheet.js","sources":["../../../../../../../../src/components/Report/styles/useColumnPinningStylesheet.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\n\nexport function useColumnPinningStylesheet<TType = unknown>(tableId: string, table: ReactTable<TType>) {\n const { columnPinning } = table.getState();\n\n const stylesheet = React.useMemo(() => {\n const styles: string[] = [];\n\n // might be a better way to get this information, but it wasn't obvious\n const all = table\n .getFlatHeaders()\n .filter(column => !column.subHeaders.length)\n .map(x => x.id);\n const left = table\n .getLeftFlatHeaders()\n .filter(column => !column.subHeaders.length)\n .map(x => x.id);\n const right = table\n .getRightFlatHeaders()\n .filter(column => !column.subHeaders.length)\n .map(x => x.id);\n\n if (left.length) {\n const index = all.indexOf(left[left.length - 1]);\n\n // add right border, hide the header seperator and add shadow when scrolled\n // we have to be specific so that nested tables don't inherit the same css\n styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}),\n table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1}) {\n border-right-width: 1px;\n }\\ntable[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1})[data-cell-id^=\"__\"],\n table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1})[data-cell-id^=\"__\"] {\n border-right-color: transparent;\n }\\ntable[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}):after {\n content: none;\n }\\ntable[data-taco='report'][data-table-horizontally-scrolled=\"true\"]#${tableId} > thead > tr > th:nth-child(${\n index + 1\n }),\n table[data-taco='report'][data-table-horizontally-scrolled=\"true\"]#${tableId} > tbody > tr > td:nth-child(${\n index + 1\n }) {\n border-right-color: rgb(221, 221, 221);\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%);\n }`);\n }\n\n if (right.length) {\n const index = all.indexOf(right[right.length - 1]);\n\n styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}):not([data-cell-id^=\"__\"]),\n table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1}):not([data-cell-id^=\"__\"]) {\n border-left-width: 1px;\n }`);\n }\n\n return styles.join('\\n');\n }, [columnPinning]);\n\n return stylesheet;\n}\n"],"names":["useColumnPinningStylesheet","tableId","table","columnPinning","getState","stylesheet","React","useMemo","styles","all","getFlatHeaders","filter","column","subHeaders","length","map","x","id","left","getLeftFlatHeaders","right","getRightFlatHeaders","index","indexOf","push","join"],"mappings":";;SAGgBA,0BAA0BA,CAAkBC,OAAe,EAAEC,KAAwB;EACjG,MAAM;IAAEC;GAAe,GAAGD,KAAK,CAACE,QAAQ,EAAE;EAE1C,MAAMC,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC;IAC7B,MAAMC,MAAM,GAAa,EAAE;;IAG3B,MAAMC,GAAG,GAAGP,KAAK,CACZQ,cAAc,EAAE,CAChBC,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,UAAU,CAACC,MAAM,CAAC,CAC3CC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,CAAC;IACnB,MAAMC,IAAI,GAAGhB,KAAK,CACbiB,kBAAkB,EAAE,CACpBR,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,UAAU,CAACC,MAAM,CAAC,CAC3CC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,CAAC;IACnB,MAAMG,KAAK,GAAGlB,KAAK,CACdmB,mBAAmB,EAAE,CACrBV,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,UAAU,CAACC,MAAM,CAAC,CAC3CC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,CAAC;IAEnB,IAAIC,IAAI,CAACJ,MAAM,EAAE;MACb,MAAMQ,KAAK,GAAGb,GAAG,CAACc,OAAO,CAACL,IAAI,CAACA,IAAI,CAACJ,MAAM,GAAG,CAAC,CAAC,CAAC;;;MAIhDN,MAAM,CAACgB,IAAI,8BAA8BvB,uCAAuCqB,KAAK,GAAG;4CACxDrB,wCAAwCqB,KAAK,GAAG;;+CAE7CrB,wCAAwCqB,KAAK,GAAG;4CACnDrB,wCAAwCqB,KAAK,GAAG;;+CAE7CrB,wCAAwCqB,KAAK,GAAG;;wFAEPrB,wCACxEqB,KAAK,GAAG;qFAE6DrB,wCACrEqB,KAAK,GAAG;;;kBAIN,CAAC;;IAGX,IAAIF,KAAK,CAACN,MAAM,EAAE;MACd,MAAMQ,KAAK,GAAGb,GAAG,CAACc,OAAO,CAACH,KAAK,CAACA,KAAK,CAACN,MAAM,GAAG,CAAC,CAAC,CAAC;MAElDN,MAAM,CAACgB,IAAI,8BAA8BvB,uCAAuCqB,KAAK,GAAG;4CACxDrB,uCAAuCqB,KAAK,GAAG;;kBAEzE,CAAC;;IAGX,OAAOd,MAAM,CAACiB,IAAI,CAAC,IAAI,CAAC;GAC3B,EAAE,CAACtB,aAAa,CAAC,CAAC;EAEnB,OAAOE,UAAU;AACrB;;;;"}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { getCellMinWidth } from '../../../primitives/Table/useTable/util/columns.js';
|
3
|
+
|
4
|
+
function useCssGridStylesheet(tableId, table, fontSize) {
|
5
|
+
const tableMeta = table.options.meta;
|
6
|
+
const allVisibleColumns = table.getVisibleLeafColumns();
|
7
|
+
const columnSizing = table.getState().columnSizing;
|
8
|
+
const globalMinSize = getCellMinWidth(fontSize);
|
9
|
+
const gridTemplateRows = 'min-content 1fr min-content'; // header body footer;
|
10
|
+
return React__default.useMemo(() => {
|
11
|
+
let printGridTemplateColumns = '';
|
12
|
+
const printHiddenColumns = [];
|
13
|
+
const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {
|
14
|
+
var _column$columnDef$min, _column$columnDef$met;
|
15
|
+
if (table.options.enableGrouping && column.getIsGrouped()) {
|
16
|
+
return accum;
|
17
|
+
}
|
18
|
+
const minSize = (_column$columnDef$min = column.columnDef.minSize) !== null && _column$columnDef$min !== void 0 ? _column$columnDef$min : globalMinSize;
|
19
|
+
const width = columnSizing[column.id];
|
20
|
+
let size;
|
21
|
+
let printSize;
|
22
|
+
if (column.id === '__actions') {
|
23
|
+
const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
|
24
|
+
size = `minmax(${minWidth}px, auto)`;
|
25
|
+
} else if (width !== undefined) {
|
26
|
+
const isLastColumn = index === allVisibleColumns.length - 1;
|
27
|
+
if (isLastColumn) {
|
28
|
+
size = `minmax(${minSize}px, auto)`;
|
29
|
+
} else if (width === 'grow' || Number.isNaN(width)) {
|
30
|
+
size = `minmax(${minSize}px, 1fr)`;
|
31
|
+
} else {
|
32
|
+
size = `${width < minSize ? minSize : width}px`;
|
33
|
+
}
|
34
|
+
} else {
|
35
|
+
size = `minmax(${minSize}px, auto)`;
|
36
|
+
}
|
37
|
+
if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enablePrinting) === false) {
|
38
|
+
printSize = '';
|
39
|
+
printHiddenColumns.push(column.id);
|
40
|
+
} else {
|
41
|
+
printSize = 'auto';
|
42
|
+
}
|
43
|
+
printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();
|
44
|
+
return `${accum} ${size}`.trim();
|
45
|
+
}, '');
|
46
|
+
// we have to be specific so that nested tables don't inherit the same css
|
47
|
+
const hiddenColumns = printHiddenColumns.map(id => `table[data-taco='report']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco='report']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
|
48
|
+
return `table[data-taco='report']#${tableId} { grid-template-columns: ${gridTemplateColumns}; grid-template-rows: ${gridTemplateRows}; }
|
49
|
+
@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns} { display: none; } }`;
|
50
|
+
}, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);
|
51
|
+
}
|
52
|
+
|
53
|
+
export { useCssGridStylesheet };
|
54
|
+
//# sourceMappingURL=useCssGridStylesheet.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useCssGridStylesheet.js","sources":["../../../../../../../../src/components/Report/styles/useCssGridStylesheet.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableFontSize } from '../../../primitives/Table/types';\nimport { getCellMinWidth } from '../../../primitives/Table/useTable/util/columns';\n\nexport function useCssGridStylesheet<TType = unknown>(\n tableId: string,\n table: ReactTable<TType>,\n fontSize: TableFontSize\n): string {\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 const gridTemplateRows = 'min-content 1fr min-content'; // header body footer;\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 (isLastColumn) {\n size = `minmax(${minSize}px, auto)`;\n } else if (width === 'grow' || Number.isNaN(width)) {\n size = `minmax(${minSize}px, 1fr)`;\n } else {\n size = `${width < minSize ? minSize : width}px`;\n }\n } else {\n size = `minmax(${minSize}px, 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='report']#${tableId} > thead > tr > th[data-cell-id='${id}']\\n,table[data-taco='report']#${tableId} > tbody > tr > td[data-cell-id='${id}']\\n`\n )\n .join(',');\n\n return `table[data-taco='report']#${tableId} { grid-template-columns: ${gridTemplateColumns}; grid-template-rows: ${gridTemplateRows}; }\n@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns} { display: none; } }`;\n }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);\n}\n"],"names":["useCssGridStylesheet","tableId","table","fontSize","tableMeta","options","meta","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","globalMinSize","getCellMinWidth","gridTemplateRows","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","length","Number","isNaN","_column$columnDef$met","enablePrinting","push","trim","hiddenColumns","map","join"],"mappings":";;;SAKgBA,oBAAoBA,CAChCC,OAAe,EACfC,KAAwB,EACxBC,QAAuB;EAEvB,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;EAC7D,MAAMC,iBAAiB,GAAGL,KAAK,CAACM,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGP,KAAK,CAACQ,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,aAAa,GAAGC,eAAe,CAACT,QAAQ,CAAC;EAE/C,MAAMU,gBAAgB,GAAG,6BAA6B,CAAC;EAEvD,OAAOC,cAAK,CAACC,OAAO,CAAC;IACjB,IAAIC,wBAAwB,GAAG,EAAE;IACjC,MAAMC,kBAAkB,GAAa,EAAE;IAEvC,MAAMC,mBAAmB,GAAGX,iBAAiB,CAACY,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;;MACtE,IAAIpB,KAAK,CAACG,OAAO,CAACkB,cAAc,IAAIF,MAAM,CAACG,YAAY,EAAE,EAAE;QACvD,OAAOJ,KAAK;;MAGhB,MAAMK,OAAO,IAAAC,qBAAA,GAAGL,MAAM,CAACM,SAAS,CAACF,OAAO,cAAAC,qBAAA,cAAAA,qBAAA,GAAIf,aAAa;MACzD,MAAMiB,KAAK,GAAGnB,YAAY,CAACY,MAAM,CAACQ,EAAE,CAAoB;MAExD,IAAIC,IAAI;MACR,IAAIC,SAAS;MAEb,IAAIV,MAAM,CAACQ,EAAE,KAAK,WAAW,EAAE;QAC3B,MAAMG,QAAQ,GAAG5B,SAAS,CAAC6B,UAAU,CAACC,gBAAgB,GAAG,EAAE,GAAG,CAAC,CAAC;QAChEJ,IAAI,aAAaE,mBAAmB;OACvC,MAAM,IAAIJ,KAAK,KAAKO,SAAS,EAAE;QAC5B,MAAMC,YAAY,GAAGd,KAAK,KAAKf,iBAAiB,CAAC8B,MAAM,GAAG,CAAC;QAE3D,IAAID,YAAY,EAAE;UACdN,IAAI,aAAaL,kBAAkB;SACtC,MAAM,IAAIG,KAAK,KAAK,MAAM,IAAIU,MAAM,CAACC,KAAK,CAACX,KAAK,CAAC,EAAE;UAChDE,IAAI,aAAaL,iBAAiB;SACrC,MAAM;UACHK,IAAI,MAAMF,KAAK,GAAGH,OAAO,GAAGA,OAAO,GAAGG,SAAS;;OAEtD,MAAM;QACHE,IAAI,aAAaL,kBAAkB;;MAGvC,IAAI,EAAAe,qBAAA,GAAAnB,MAAM,CAACM,SAAS,CAACrB,IAAI,cAAAkC,qBAAA,uBAArBA,qBAAA,CAAuBC,cAAc,MAAK,KAAK,EAAE;QACjDV,SAAS,GAAG,EAAE;QACdd,kBAAkB,CAACyB,IAAI,CAACrB,MAAM,CAACQ,EAAE,CAAC;OACrC,MAAM;QACHE,SAAS,GAAG,MAAM;;MAGtBf,wBAAwB,MAAMA,4BAA4Be,WAAW,CAACY,IAAI,EAAE;MAE5E,UAAUvB,SAASU,MAAM,CAACa,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;;IAGN,MAAMC,aAAa,GAAG3B,kBAAkB,CACnC4B,GAAG,CACAhB,EAAE,iCAC+B5B,2CAA2C4B,oCAAoC5B,2CAA2C4B,QAAQ,CACtK,CACAiB,IAAI,CAAC,GAAG,CAAC;IAEd,oCAAoC7C,oCAAoCiB,4CAA4CL;2CACjFZ,oCAAoCe,+BAA+B4B,oCAAoC;GAC7I,EAAE,CAACrC,iBAAiB,EAAEE,YAAY,EAAEE,aAAa,EAAEP,SAAS,CAAC6B,UAAU,CAACC,gBAAgB,CAAC,CAAC;AAC/F;;;;"}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React__default from 'react';
|
2
|
+
import { useCssGridStylesheet } from './useCssGridStylesheet.js';
|
3
|
+
import { useColumnPinningStylesheet } from './useColumnPinningStylesheet.js';
|
4
|
+
import { getCellWidthPadding, getCellHeightPadding } from './util.js';
|
5
|
+
|
6
|
+
function useStylesheet(tableId, table) {
|
7
|
+
const tableMeta = table.options.meta;
|
8
|
+
const cssGridStylesheet = useCssGridStylesheet(tableId, table, tableMeta.fontSize.size);
|
9
|
+
const columnPinningStylesheet = useColumnPinningStylesheet(tableId, table);
|
10
|
+
const genericStylesheet = `table[data-taco='report']#${tableId} {
|
11
|
+
--table-header-group-depth: ${table.getHeaderGroups().length};
|
12
|
+
--table-cell-padding-x: ${getCellWidthPadding(tableMeta.fontSize.size)};
|
13
|
+
--table-cell-padding-y: ${getCellHeightPadding(tableMeta.rowHeight.height, tableMeta.fontSize.size)};
|
14
|
+
}`;
|
15
|
+
const css = [genericStylesheet, cssGridStylesheet, columnPinningStylesheet].filter(s => !!s).join('\n');
|
16
|
+
return /*#__PURE__*/React__default.createElement("style", null, css);
|
17
|
+
}
|
18
|
+
|
19
|
+
export { useStylesheet };
|
20
|
+
//# sourceMappingURL=useStylesheet.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useStylesheet.js","sources":["../../../../../../../../src/components/Report/styles/useStylesheet.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useCssGridStylesheet } from './useCssGridStylesheet';\nimport { useColumnPinningStylesheet } from './useColumnPinningStylesheet';\nimport { getCellHeightPadding, getCellWidthPadding } from './util';\n\nexport function useStylesheet<TType = unknown>(tableId: string, table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const cssGridStylesheet = useCssGridStylesheet<TType>(tableId, table, tableMeta.fontSize.size);\n const columnPinningStylesheet = useColumnPinningStylesheet(tableId, table);\n\n const genericStylesheet = `table[data-taco='report']#${tableId} {\n --table-header-group-depth: ${table.getHeaderGroups().length};\n --table-cell-padding-x: ${getCellWidthPadding(tableMeta.fontSize.size)};\n --table-cell-padding-y: ${getCellHeightPadding(tableMeta.rowHeight.height, tableMeta.fontSize.size)};\n }`;\n\n const css = [genericStylesheet, cssGridStylesheet, columnPinningStylesheet].filter(s => !!s).join('\\n');\n\n return <style>{css}</style>;\n}\n"],"names":["useStylesheet","tableId","table","tableMeta","options","meta","cssGridStylesheet","useCssGridStylesheet","fontSize","size","columnPinningStylesheet","useColumnPinningStylesheet","genericStylesheet","getHeaderGroups","length","getCellWidthPadding","getCellHeightPadding","rowHeight","height","css","filter","s","join","React"],"mappings":";;;;;SAMgBA,aAAaA,CAAkBC,OAAe,EAAEC,KAAwB;EACpF,MAAMC,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAA6B;EAC7D,MAAMC,iBAAiB,GAAGC,oBAAoB,CAAQN,OAAO,EAAEC,KAAK,EAAEC,SAAS,CAACK,QAAQ,CAACC,IAAI,CAAC;EAC9F,MAAMC,uBAAuB,GAAGC,0BAA0B,CAACV,OAAO,EAAEC,KAAK,CAAC;EAE1E,MAAMU,iBAAiB,gCAAgCX;sCACrBC,KAAK,CAACW,eAAe,EAAE,CAACC;kCAC5BC,mBAAmB,CAACZ,SAAS,CAACK,QAAQ,CAACC,IAAI;kCAC3CO,oBAAoB,CAACb,SAAS,CAACc,SAAS,CAACC,MAAM,EAAEf,SAAS,CAACK,QAAQ,CAACC,IAAI;MACpG;EAEF,MAAMU,GAAG,GAAG,CAACP,iBAAiB,EAAEN,iBAAiB,EAAEI,uBAAuB,CAAC,CAACU,MAAM,CAACC,CAAC,IAAI,CAAC,CAACA,CAAC,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC;EAEvG,oBAAOC,4CAAQJ,GAAG,CAAS;AAC/B;;;;"}
|