@economic/taco 2.13.0 → 2.14.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Field/Field.d.ts +4 -2
- package/dist/components/Icon/components/Location.d.ts +3 -0
- package/dist/components/Icon/components/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Menu/components/Item.d.ts +1 -1
- package/dist/components/Menu/components/Link.d.ts +1 -1
- package/dist/components/Navigation2/components/Link.d.ts +1 -1
- package/dist/components/Provider/Localization.d.ts +0 -113
- package/dist/components/Select2/components/Option.d.ts +2 -2
- package/dist/components/Select2/components/Search.d.ts +1 -1
- package/dist/components/Table3/components/columns/styles.d.ts +2 -2
- package/dist/components/Table3/components/toolbar/Filter/filters/components/Filter.d.ts +4 -4
- package/dist/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.d.ts +3 -2
- package/dist/components/Table3/components/toolbar/Filter/filters/components/Placeholder.d.ts +3 -2
- package/dist/components/Table3/components/toolbar/FontSize.d.ts +4 -0
- package/dist/components/Table3/hooks/useCssGrid.d.ts +2 -1
- package/dist/components/Table3/hooks/useTable.d.ts +1 -1
- package/dist/components/Table3/types.d.ts +1 -1
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/esm/packages/taco/src/components/Field/Field.js +6 -4
- package/dist/esm/packages/taco/src/components/Field/Field.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Icon/components/Location.js +17 -0
- package/dist/esm/packages/taco/src/components/Icon/components/Location.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js +2 -0
- package/dist/esm/packages/taco/src/components/Icon/components/index.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +0 -110
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Edit.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Edit.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Option.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Option.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Search.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +5 -4
- 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 -5
- 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 +1 -4
- 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.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Menu.js +6 -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 +3 -2
- 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/columns/styles.js +14 -2
- package/dist/esm/packages/taco/src/components/Table3/components/columns/styles.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/Filters.js +15 -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/Filter.js +2 -2
- 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/FilterColumn.js +12 -3
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.js +0 -1
- 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 +5 -3
- 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 +2 -2
- 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/FontSize.js +9 -4
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/FontSize.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js +2 -3
- 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/RowHeight.js +3 -2
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/RowHeight.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Settings.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSettings.js +6 -7
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useSettings.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js +48 -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 +4 -2
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js +6 -5
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js +11 -9
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssVars.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
- package/dist/esm/packages/taco/src/index.js +1 -2
- package/dist/esm/packages/taco/src/index.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/dom.js +1 -2
- package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/taco.cjs.development.js +485 -4052
- 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/tailwind.config.js +3 -0
- package/types.json +13748 -32551
- package/dist/components/Table2/Table2.d.ts +0 -130
- package/dist/components/Table2/components/BatchActionsMenu.d.ts +0 -10
- package/dist/components/Table2/components/ColumnSettingsButton.d.ts +0 -6
- package/dist/components/Table2/components/EditModeButton.d.ts +0 -8
- package/dist/components/Table2/components/RowDensityButton.d.ts +0 -7
- package/dist/components/Table2/components/Search.d.ts +0 -3
- package/dist/components/Table2/components/ShortcutsGuideButton.d.ts +0 -7
- package/dist/components/Table2/components/column/Base.d.ts +0 -14
- package/dist/components/Table2/components/column/Cell.d.ts +0 -15
- package/dist/components/Table2/components/column/Footer.d.ts +0 -9
- package/dist/components/Table2/components/column/Header.d.ts +0 -11
- package/dist/components/Table2/components/column/Indicator.d.ts +0 -17
- package/dist/components/Table2/components/column/ValidationError.d.ts +0 -5
- package/dist/components/Table2/components/column/utils.d.ts +0 -3
- package/dist/components/Table2/components/filters/FiltersButton.d.ts +0 -7
- package/dist/components/Table2/components/filters/components/Column.d.ts +0 -11
- package/dist/components/Table2/components/filters/components/ColumnFilter.d.ts +0 -10
- package/dist/components/Table2/components/filters/components/Comparator.d.ts +0 -11
- package/dist/components/Table2/components/filters/components/EmptyFilter.d.ts +0 -13
- package/dist/components/Table2/components/filters/components/InferredControl.d.ts +0 -10
- package/dist/components/Table2/components/row/Context.d.ts +0 -24
- package/dist/components/Table2/components/row/ExpandedRow.d.ts +0 -6
- package/dist/components/Table2/components/row/Row.d.ts +0 -2
- package/dist/components/Table2/hooks/listeners/useActiveCellStateListener.d.ts +0 -3
- package/dist/components/Table2/hooks/listeners/useActiveRowStateListener.d.ts +0 -3
- package/dist/components/Table2/hooks/listeners/useColumnOffsetStateListener.d.ts +0 -3
- package/dist/components/Table2/hooks/listeners/useFilterStateListener.d.ts +0 -3
- package/dist/components/Table2/hooks/listeners/useRowSelectionListener.d.ts +0 -3
- package/dist/components/Table2/hooks/listeners/useSettingsStateListener.d.ts +0 -3
- package/dist/components/Table2/hooks/useActiveCell.d.ts +0 -26
- package/dist/components/Table2/hooks/useActiveRow.d.ts +0 -10
- package/dist/components/Table2/hooks/useColumnDefinitions.d.ts +0 -37
- package/dist/components/Table2/hooks/useEditMode.d.ts +0 -28
- package/dist/components/Table2/hooks/useGridTemplate.d.ts +0 -2
- package/dist/components/Table2/hooks/useTable.d.ts +0 -46
- package/dist/components/Table2/hooks/useTableShortcuts.d.ts +0 -2
- package/dist/components/Table2/hooks/useVirtualiser.d.ts +0 -23
- package/dist/components/Table2/types.d.ts +0 -148
- package/dist/components/Table2/utilities/cell.d.ts +0 -14
- package/dist/components/Table2/utilities/columns.d.ts +0 -16
- package/dist/components/Table2/utilities/filterFn.d.ts +0 -3
- package/dist/esm/packages/taco/src/components/Table2/Table2.js +0 -422
- package/dist/esm/packages/taco/src/components/Table2/Table2.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/BatchActionsMenu.js +0 -83
- package/dist/esm/packages/taco/src/components/Table2/components/BatchActionsMenu.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js +0 -116
- package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js +0 -81
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js +0 -47
- package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js +0 -62
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Base.js +0 -32
- package/dist/esm/packages/taco/src/components/Table2/components/column/Base.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js +0 -605
- package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Footer.js +0 -32
- package/dist/esm/packages/taco/src/components/Table2/components/column/Footer.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Header.js +0 -243
- package/dist/esm/packages/taco/src/components/Table2/components/column/Header.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Indicator.js +0 -73
- package/dist/esm/packages/taco/src/components/Table2/components/column/Indicator.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/ValidationError.js +0 -30
- package/dist/esm/packages/taco/src/components/Table2/components/column/ValidationError.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/utils.js +0 -39
- package/dist/esm/packages/taco/src/components/Table2/components/column/utils.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js +0 -155
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Column.js +0 -31
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Column.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js +0 -129
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js +0 -68
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/EmptyFilter.js +0 -63
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/EmptyFilter.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/InferredControl.js +0 -99
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/InferredControl.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/row/Context.js +0 -58
- package/dist/esm/packages/taco/src/components/Table2/components/row/Context.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/row/ExpandedRow.js +0 -36
- package/dist/esm/packages/taco/src/components/Table2/components/row/ExpandedRow.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/components/row/Row.js +0 -44
- package/dist/esm/packages/taco/src/components/Table2/components/row/Row.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useActiveRowStateListener.js +0 -19
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useActiveRowStateListener.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js +0 -28
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useColumnOffsetStateListener.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useFilterStateListener.js +0 -12
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useFilterStateListener.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useRowSelectionListener.js +0 -18
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useRowSelectionListener.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useSettingsStateListener.js +0 -25
- package/dist/esm/packages/taco/src/components/Table2/hooks/listeners/useSettingsStateListener.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useActiveRow.js +0 -33
- package/dist/esm/packages/taco/src/components/Table2/hooks/useActiveRow.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js +0 -122
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useEditMode.js +0 -112
- package/dist/esm/packages/taco/src/components/Table2/hooks/useEditMode.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js +0 -34
- package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js +0 -222
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTable.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTableShortcuts.js +0 -46
- package/dist/esm/packages/taco/src/components/Table2/hooks/useTableShortcuts.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useVirtualiser.js +0 -48
- package/dist/esm/packages/taco/src/components/Table2/hooks/useVirtualiser.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/types.js +0 -18
- package/dist/esm/packages/taco/src/components/Table2/types.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/cell.js +0 -41
- package/dist/esm/packages/taco/src/components/Table2/utilities/cell.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js +0 -387
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/filterFn.js +0 -100
- package/dist/esm/packages/taco/src/components/Table2/utilities/filterFn.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Truncate/Truncate.js +0 -32
- package/dist/esm/packages/taco/src/components/Truncate/Truncate.js.map +0 -1
- package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js +0 -20
- package/dist/esm/packages/taco/src/utils/hooks/useTruncated.js.map +0 -1
@@ -1 +1 @@
|
|
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
|
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 disabled={!column}\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","_column$columnDef$met","fromValue","Array","isArray","undefined","toValue","React","Input","table3","filters","emptyFilter","className","disabled","columnDef","meta","dataType","Control","isNaN","placeholder","attributes","controlRenderer","_column$columnDef$met2","control","_column$columnDef$met3","useEffect","setValue","Datepicker","event","detail","Switch","checked","Boolean","cn","getInputAppearanceClassnames","type","target","valueAsNumber","String"],"mappings":"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"}
|
@@ -17,9 +17,9 @@ function Placeholder(props) {
|
|
17
17
|
texts
|
18
18
|
} = useLocalization();
|
19
19
|
return /*#__PURE__*/React__default.createElement("div", {
|
20
|
-
className: "flex gap-2"
|
20
|
+
className: "flex items-start gap-2"
|
21
21
|
}, /*#__PURE__*/React__default.createElement("div", {
|
22
|
-
className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
|
22
|
+
className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
|
23
23
|
}, position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
|
24
24
|
allColumns: allColumns,
|
25
25
|
filters: filters,
|
@@ -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
|
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 } 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';\nimport { Table3Filter } from '../../../../../types';\n\nexport type PlaceholderFilterProps<TType = unknown> = {\n allColumns: RTColumn<TType, unknown>[];\n filters: Table3Filter[];\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 items-start gap-2\">\n <div className=\"flex min-h-[theme(spacing.8)] 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":";;;;;;;SAkBgBA,WAAWA,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;;;;"}
|
@@ -2,6 +2,11 @@ import React__default from 'react';
|
|
2
2
|
import { useLocalization } from '../../../Provider/Localization.js';
|
3
3
|
import { Menu } from '../../../Menu/Menu.js';
|
4
4
|
|
5
|
+
const FONT_SIZE = {
|
6
|
+
small: 'small',
|
7
|
+
medium: 'medium',
|
8
|
+
large: 'large'
|
9
|
+
};
|
5
10
|
function FontSize(props) {
|
6
11
|
const {
|
7
12
|
texts
|
@@ -12,14 +17,14 @@ function FontSize(props) {
|
|
12
17
|
onChange: handleChange,
|
13
18
|
value: meta.fontSize.size
|
14
19
|
}, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
15
|
-
value:
|
20
|
+
value: FONT_SIZE.small
|
16
21
|
}, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
17
|
-
value:
|
22
|
+
value: FONT_SIZE.medium
|
18
23
|
}, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
|
19
24
|
disabled: meta.rowHeight.height === 'short',
|
20
|
-
value:
|
25
|
+
value: FONT_SIZE.large
|
21
26
|
}, texts.table3.fontSize.sizes.large)));
|
22
27
|
}
|
23
28
|
|
24
|
-
export { FontSize };
|
29
|
+
export { FONT_SIZE, FontSize };
|
25
30
|
//# sourceMappingURL=FontSize.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FontSize.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/FontSize.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3FontSize } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\n\ntype FontSizeButtonProps<TType = unknown> = {\n table: RTable<TType>;\n};\n\nexport function FontSize<TType = unknown>(props: FontSizeButtonProps<TType>) {\n const { texts } = useLocalization();\n const meta = props.table.options.meta as TableMeta<unknown>;\n const handleChange = (value: RadioGroupItemValue) => meta.fontSize.setSize(value as Table3FontSize);\n\n return (\n <Menu.SubMenu>\n <Menu.RadioGroup onChange={handleChange} value={meta.fontSize.size}>\n <Menu.RadioGroup.Item value
|
1
|
+
{"version":3,"file":"FontSize.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/FontSize.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3FontSize } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\n\ntype FontSizeButtonProps<TType = unknown> = {\n table: RTable<TType>;\n};\n\nexport const FONT_SIZE: { [FontSize in Table3FontSize]: FontSize } = {\n small: 'small',\n medium: 'medium',\n large: 'large',\n};\n\nexport function FontSize<TType = unknown>(props: FontSizeButtonProps<TType>) {\n const { texts } = useLocalization();\n const meta = props.table.options.meta as TableMeta<unknown>;\n const handleChange = (value: RadioGroupItemValue) => meta.fontSize.setSize(value as Table3FontSize);\n\n return (\n <Menu.SubMenu>\n <Menu.RadioGroup onChange={handleChange} value={meta.fontSize.size}>\n <Menu.RadioGroup.Item value={FONT_SIZE.small}>{texts.table3.fontSize.sizes.small}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item value={FONT_SIZE.medium}>{texts.table3.fontSize.sizes.medium}</Menu.RadioGroup.Item>\n <Menu.RadioGroup.Item disabled={meta.rowHeight.height === 'short'} value={FONT_SIZE.large}>\n {texts.table3.fontSize.sizes.large}\n </Menu.RadioGroup.Item>\n </Menu.RadioGroup>\n </Menu.SubMenu>\n );\n}\n"],"names":["FONT_SIZE","small","medium","large","FontSize","props","texts","useLocalization","meta","table","options","handleChange","value","fontSize","setSize","React","Menu","SubMenu","RadioGroup","onChange","size","Item","table3","sizes","disabled","rowHeight","height"],"mappings":";;;;MAWaA,SAAS,GAA+C;EACjEC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,QAAQ;EAChBC,KAAK,EAAE;;SAGKC,QAAQA,CAAkBC,KAAiC;EACvE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACF,IAA0B;EAC3D,MAAMG,YAAY,GAAIC,KAA0B,IAAKJ,IAAI,CAACK,QAAQ,CAACC,OAAO,CAACF,KAAuB,CAAC;EAEnG,oBACIG,6BAACC,IAAI,CAACC,OAAO,qBACTF,6BAACC,IAAI,CAACE,UAAU;IAACC,QAAQ,EAAER,YAAY;IAAEC,KAAK,EAAEJ,IAAI,CAACK,QAAQ,CAACO;kBAC1DL,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAEZ,SAAS,CAACC;KAAQK,KAAK,CAACgB,MAAM,CAACT,QAAQ,CAACU,KAAK,CAACtB,KAAK,CAAwB,eACxGc,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAEZ,SAAS,CAACE;KAASI,KAAK,CAACgB,MAAM,CAACT,QAAQ,CAACU,KAAK,CAACrB,MAAM,CAAwB,eAC1Ga,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACG,QAAQ,EAAEhB,IAAI,CAACiB,SAAS,CAACC,MAAM,KAAK,OAAO;IAAEd,KAAK,EAAEZ,SAAS,CAACG;KAC/EG,KAAK,CAACgB,MAAM,CAACT,QAAQ,CAACU,KAAK,CAACpB,KAAK,CACf,CACT,CACP;AAEvB;;;;"}
|
package/dist/esm/packages/taco/src/components/Table3/components/toolbar/PrintButton/PrintIFrame.js
CHANGED
@@ -62,10 +62,8 @@ import '../../../../Table/components/PaginatedTable.js';
|
|
62
62
|
import '../../../../Table/components/WindowedTable.js';
|
63
63
|
import '../../../../Table/util/rowIndexPath.js';
|
64
64
|
import '../../../../Table/hooks/useRowCreation.js';
|
65
|
-
import ReactDOM from 'react-dom';
|
66
|
-
import '../../../../../hooks/useBoundaryOverflowDetection.js';
|
67
|
-
import '../../../../Table2/Table2.js';
|
68
65
|
import '../../../../../hooks/useLazyEffect.js';
|
66
|
+
import ReactDOM from 'react-dom';
|
69
67
|
import '../../../../Textarea/Textarea.js';
|
70
68
|
import '../../../../../hooks/useMatchMedia.js';
|
71
69
|
import '../../../../../hooks/useIsLargeScreen.js';
|
@@ -78,6 +76,7 @@ import '../../../../Header/Header.js';
|
|
78
76
|
import '../../../../Layout/Layout.js';
|
79
77
|
import '../../../../Navigation2/components/Link.js';
|
80
78
|
import '../../../../Navigation2/Navigation2.js';
|
79
|
+
import '../../../../../hooks/useBoundaryOverflowDetection.js';
|
81
80
|
import '../../../../../utils/hooks/useOnClickOutside.js';
|
82
81
|
|
83
82
|
function PrintIFrame({
|
@@ -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 isFirefoxBrowser = React.useMemo(() => navigator.userAgent.toLowerCase().includes('firefox'), []);\n const isSafariBrowser = React.useMemo(\n () => navigator.userAgent.toLowerCase().includes('safari') && !navigator.userAgent.toLowerCase().includes('chrome'),\n []\n );\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 (!contentRef || !iframeWindow || !stylesReady) {\n return;\n }\n\n // get the closest parent/container of the table, and the table itself\n const parentElement = contentRef?.closest('[role=dialog], [data-taco=drawer], main') ?? iframeWindow.parent.document.body;\n\n const iframeDocument = iframeWindow.document;\n iframeDocument.body.innerHTML = parentElement?.innerHTML ?? '';\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 // Makes sure table takes the full screen width.\n if (isSafariBrowser) {\n // Safari browser doesn't apply correct width to the columns when w-screen is used.\n tableWrapper.classList.add('w-full');\n } else {\n tableWrapper.classList.add('w-screen');\n }\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 // The presence of the onChangeSettings prop ensures that settings won't be stored in local storage.\n onChangeSettings: () => 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-[6000px] -top-[6000px] -z-50 !h-0 !w-0\"\n ref={setContentRef}\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","isSafariBrowser","iframeWindow","contentWindow","stylesReady","useParentStylesheets","useEffect","intervalId","timeoutId","setInterval","tableWrapper","table","querySelector","hasTableRendered","_contentRef$contentWi","clearInterval","tableHeight","offsetHeight","style","height","print","setTimeout","Promise","resolve","e","reject","clearTimeout","parentElement","_contentRef$closest","closest","parent","document","body","iframeDocument","innerHTML","_parentElement$innerH","tableElement","tableColumnFreezingStyles","createElement","setAttribute","classList","add","_tableElement$parentN","parentNode","insertBefore","remove","append","currentNode","_currentNode","printTableProps","actionsForRow","undefined","defaultCurrentRowIndex","defaultSettings","rowHeight","enableColumnFreezing","enableRowHeight","enableRowSelection","enableEditing","enablePrinting","enableRowDrag","enableRowDrop","enableRowSelectionSingle","preset","onChangeSettings","className","ref","src","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 const isSafariBrowser = React.useMemo(\n () => navigator.userAgent.toLowerCase().includes('safari') && !navigator.userAgent.toLowerCase().includes('chrome'),\n []\n );\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 (!contentRef || !iframeWindow || !stylesReady) {\n return;\n }\n\n // get the closest parent/container of the table, and the table itself\n const parentElement = contentRef?.closest('[role=dialog], [data-taco=drawer], main') ?? iframeWindow.parent.document.body;\n\n const iframeDocument = iframeWindow.document;\n iframeDocument.body.innerHTML = parentElement?.innerHTML ?? '';\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 // Makes sure table takes the full screen width.\n if (isSafariBrowser) {\n // Safari browser doesn't apply correct width to the columns when w-screen is used.\n tableWrapper.classList.add('w-full');\n } else {\n tableWrapper.classList.add('w-screen');\n }\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 // The presence of the onChangeSettings prop ensures that settings won't be stored in local storage.\n onChangeSettings: () => 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-[6000px] -top-[6000px] -z-50 !h-0 !w-0\"\n ref={setContentRef}\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","isSafariBrowser","iframeWindow","contentWindow","stylesReady","useParentStylesheets","useEffect","intervalId","timeoutId","setInterval","tableWrapper","table","querySelector","hasTableRendered","_contentRef$contentWi","clearInterval","tableHeight","offsetHeight","style","height","print","setTimeout","Promise","resolve","e","reject","clearTimeout","parentElement","_contentRef$closest","closest","parent","document","body","iframeDocument","innerHTML","_parentElement$innerH","tableElement","tableColumnFreezingStyles","createElement","setAttribute","classList","add","_tableElement$parentN","parentNode","insertBefore","remove","append","currentNode","_currentNode","printTableProps","actionsForRow","undefined","defaultCurrentRowIndex","defaultSettings","rowHeight","enableColumnFreezing","enableRowHeight","enableRowSelection","enableEditing","enablePrinting","enableRowDrag","enableRowDrop","enableRowSelectionSingle","preset","onChangeSettings","className","ref","src","ReactDOM","createPortal","Table3"],"mappings":"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"}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { useLocalization } from '../../../Provider/Localization.js';
|
3
3
|
import { Menu } from '../../../Menu/Menu.js';
|
4
|
+
import { FONT_SIZE } from './FontSize.js';
|
4
5
|
|
5
6
|
function RowHeight(props) {
|
6
7
|
const {
|
@@ -10,8 +11,8 @@ function RowHeight(props) {
|
|
10
11
|
const handleChange = value => {
|
11
12
|
const height = value;
|
12
13
|
meta.rowHeight.setHeight(height);
|
13
|
-
if (height === 'short' && meta.fontSize.size ===
|
14
|
-
meta.fontSize.setSize(
|
14
|
+
if (height === 'short' && meta.fontSize.size === FONT_SIZE.large) {
|
15
|
+
meta.fontSize.setSize(FONT_SIZE.medium);
|
15
16
|
}
|
16
17
|
};
|
17
18
|
return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RowHeight.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/RowHeight.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3RowHeight } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\n\ntype RowHeightButtonProps<TType = unknown> = {\n table: RTable<TType>;\n};\n\nexport function RowHeight<TType = unknown>(props: RowHeightButtonProps<TType>) {\n const { texts } = useLocalization();\n const meta = props.table.options.meta as TableMeta<unknown>;\n const handleChange = (value: RadioGroupItemValue) => {\n const height = value as Table3RowHeight;\n\n meta.rowHeight.setHeight(height);\n\n if (height === 'short' && meta.fontSize.size ===
|
1
|
+
{"version":3,"file":"RowHeight.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/RowHeight.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Table3RowHeight } from '../../types';\nimport { RadioGroupItemValue } from '../../../..';\nimport { FONT_SIZE } from './FontSize';\n\ntype RowHeightButtonProps<TType = unknown> = {\n table: RTable<TType>;\n};\n\nexport function RowHeight<TType = unknown>(props: RowHeightButtonProps<TType>) {\n const { texts } = useLocalization();\n const meta = props.table.options.meta as TableMeta<unknown>;\n const handleChange = (value: RadioGroupItemValue) => {\n const height = value as Table3RowHeight;\n\n meta.rowHeight.setHeight(height);\n\n if (height === 'short' && meta.fontSize.size === FONT_SIZE.large) {\n meta.fontSize.setSize(FONT_SIZE.medium);\n }\n };\n\n return (\n <Menu.SubMenu>\n <Menu.RadioGroup onChange={handleChange} value={meta.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":["RowHeight","props","texts","useLocalization","meta","table","options","handleChange","value","height","rowHeight","setHeight","fontSize","size","FONT_SIZE","large","setSize","medium","React","Menu","SubMenu","RadioGroup","onChange","Item","table3","sizes","short","tall","extraTall"],"mappings":";;;;;SAYgBA,SAASA,CAAkBC,KAAkC;EACzE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACF,IAA0B;EAC3D,MAAMG,YAAY,GAAIC,KAA0B;IAC5C,MAAMC,MAAM,GAAGD,KAAwB;IAEvCJ,IAAI,CAACM,SAAS,CAACC,SAAS,CAACF,MAAM,CAAC;IAEhC,IAAIA,MAAM,KAAK,OAAO,IAAIL,IAAI,CAACQ,QAAQ,CAACC,IAAI,KAAKC,SAAS,CAACC,KAAK,EAAE;MAC9DX,IAAI,CAACQ,QAAQ,CAACI,OAAO,CAACF,SAAS,CAACG,MAAM,CAAC;;GAE9C;EAED,oBACIC,6BAACC,IAAI,CAACC,OAAO,qBACTF,6BAACC,IAAI,CAACE,UAAU;IAACC,QAAQ,EAAEf,YAAY;IAAEC,KAAK,EAAEJ,IAAI,CAACM,SAAS,CAACD;kBAC3DS,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAASN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACC,KAAK,CAAwB,eAC/FR,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAAUN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACR,MAAM,CAAwB,eACjGC,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAAQN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACE,IAAI,CAAwB,eAC7FT,6BAACC,IAAI,CAACE,UAAU,CAACE,IAAI;IAACf,KAAK,EAAC;KAAcN,KAAK,CAACsB,MAAM,CAACd,SAAS,CAACe,KAAK,CAACG,SAAS,CAAwB,CAC1F,CACP;AAEvB;;;;"}
|
@@ -2,9 +2,9 @@ import React__default from 'react';
|
|
2
2
|
import { IconButton } from '../../../IconButton/IconButton.js';
|
3
3
|
import { useLocalization } from '../../../Provider/Localization.js';
|
4
4
|
import { Menu } from '../../../Menu/Menu.js';
|
5
|
+
import { FontSize } from './FontSize.js';
|
5
6
|
import { RowHeight } from './RowHeight.js';
|
6
7
|
import { ColumnSettingsPopover } from './ColumnSettings.js';
|
7
|
-
import { FontSize } from './FontSize.js';
|
8
8
|
|
9
9
|
function SettingsButton(props) {
|
10
10
|
const {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import { useLazyEffect } from '../../../../hooks/useLazyEffect.js';
|
2
2
|
import { useLocalStorage } from '../../../../hooks/useLocalStorage.js';
|
3
3
|
import { useTacoSettings } from '../../../../hooks/useTacoSettings.js';
|
4
4
|
|
@@ -10,14 +10,13 @@ function useSettings(id, defaultSettings = {}, onChangeSettings) {
|
|
10
10
|
const uniqueId = useUniqueTableId(id);
|
11
11
|
// If the onChangeSettings prop is provided, we intend to handle settings changes externally rather than saving them
|
12
12
|
// to local storage.
|
13
|
-
const
|
14
|
-
|
15
|
-
return React__default.useMemo(() => {
|
13
|
+
const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, defaultSettings);
|
14
|
+
useLazyEffect(() => {
|
16
15
|
if (onChangeSettings) {
|
17
|
-
|
16
|
+
onChangeSettings(persistedSettings);
|
18
17
|
}
|
19
|
-
|
20
|
-
|
18
|
+
}, [persistedSettings]);
|
19
|
+
return [persistedSettings, setPersistedSettings];
|
21
20
|
}
|
22
21
|
|
23
22
|
export { useSettings, useUniqueTableId };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useSettings.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useSettings.ts"],"sourcesContent":["import
|
1
|
+
{"version":3,"file":"useSettings.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useSettings.ts"],"sourcesContent":["import { useLocalStorage } from '../../../../hooks/useLocalStorage';\nimport { useTacoSettings } from '../../../../hooks/useTacoSettings';\nimport { Table3Settings, Table3SettingsHandler } from '../../types';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\n\nexport function useUniqueTableId(tableId: string) {\n const tacoSettings = useTacoSettings();\n\n return `taco.${tacoSettings.uniqueUserIdentifier}.table3.${tableId}.settings`;\n}\n\nexport function useSettings(\n id: string,\n defaultSettings: Table3Settings | undefined = {},\n onChangeSettings: Table3SettingsHandler | undefined\n): [Table3Settings, Table3SettingsHandler] {\n const uniqueId = useUniqueTableId(id);\n // If the onChangeSettings prop is provided, we intend to handle settings changes externally rather than saving them\n // to local storage.\n const [persistedSettings, setPersistedSettings] = useLocalStorage<Table3Settings>(uniqueId, defaultSettings);\n\n useLazyEffect(() => {\n if (onChangeSettings) {\n onChangeSettings(persistedSettings);\n }\n }, [persistedSettings]);\n\n return [persistedSettings, setPersistedSettings];\n}\n"],"names":["useUniqueTableId","tableId","tacoSettings","useTacoSettings","uniqueUserIdentifier","useSettings","id","defaultSettings","onChangeSettings","uniqueId","persistedSettings","setPersistedSettings","useLocalStorage","useLazyEffect"],"mappings":";;;;SAKgBA,gBAAgBA,CAACC,OAAe;EAC5C,MAAMC,YAAY,GAAGC,eAAe,EAAE;EAEtC,eAAeD,YAAY,CAACE,+BAA+BH,kBAAkB;AACjF;SAEgBI,WAAWA,CACvBC,EAAU,EACVC,kBAA8C,EAAE,EAChDC,gBAAmD;EAEnD,MAAMC,QAAQ,GAAGT,gBAAgB,CAACM,EAAE,CAAC;;;EAGrC,MAAM,CAACI,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,eAAe,CAAiBH,QAAQ,EAAEF,eAAe,CAAC;EAE5GM,aAAa,CAAC;IACV,IAAIL,gBAAgB,EAAE;MAClBA,gBAAgB,CAACE,iBAAiB,CAAC;;GAE1C,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,OAAO,CAACA,iBAAiB,EAAEC,oBAAoB,CAAC;AACpD;;;;"}
|
package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js
CHANGED
@@ -1,8 +1,56 @@
|
|
1
1
|
import React__default from 'react';
|
2
|
+
import { FONT_SIZE } from '../../components/toolbar/FontSize.js';
|
3
|
+
import { getFontBasedMinColumnSize } from '../../components/columns/styles.js';
|
2
4
|
|
3
5
|
function useSettingsStateListener(table, onChangeSettings) {
|
4
6
|
const meta = table.options.meta;
|
5
7
|
const state = table.getState();
|
8
|
+
const prevFontSize = React__default.useRef(meta.fontSize.size);
|
9
|
+
React__default.useEffect(() => {
|
10
|
+
const newFontSize = meta.fontSize.size;
|
11
|
+
const oldFontSize = prevFontSize.current;
|
12
|
+
const {
|
13
|
+
small,
|
14
|
+
medium,
|
15
|
+
large
|
16
|
+
} = FONT_SIZE;
|
17
|
+
let columnSizeChange = 0;
|
18
|
+
switch (`${oldFontSize}-${newFontSize}`) {
|
19
|
+
case `${small}-${medium}`:
|
20
|
+
columnSizeChange = 8;
|
21
|
+
break;
|
22
|
+
case `${small}-${large}`:
|
23
|
+
columnSizeChange = 16;
|
24
|
+
break;
|
25
|
+
case `${medium}-${small}`:
|
26
|
+
columnSizeChange = -8;
|
27
|
+
break;
|
28
|
+
case `${medium}-${large}`:
|
29
|
+
columnSizeChange = 8;
|
30
|
+
break;
|
31
|
+
case `${large}-${small}`:
|
32
|
+
columnSizeChange = -16;
|
33
|
+
break;
|
34
|
+
case `${large}-${medium}`:
|
35
|
+
columnSizeChange = -8;
|
36
|
+
break;
|
37
|
+
default:
|
38
|
+
columnSizeChange = 0;
|
39
|
+
break;
|
40
|
+
}
|
41
|
+
prevFontSize.current = newFontSize;
|
42
|
+
if (columnSizeChange === 0) {
|
43
|
+
return;
|
44
|
+
}
|
45
|
+
table.setColumnSizing(sizes => {
|
46
|
+
const minColumnSize = getFontBasedMinColumnSize(newFontSize);
|
47
|
+
return Object.fromEntries(Object.entries(sizes).map(([columnName, prevColumnSize]) => {
|
48
|
+
// Prevents width value in the setting to go below the minColumnSize
|
49
|
+
const newSize = Math.max(minColumnSize, prevColumnSize + columnSizeChange);
|
50
|
+
return [columnName, newSize];
|
51
|
+
}));
|
52
|
+
});
|
53
|
+
}, [meta.fontSize.size]);
|
6
54
|
React__default.useEffect(() => {
|
7
55
|
let handler;
|
8
56
|
if (typeof onChangeSettings === 'function') {
|
package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useSettingsStateListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useSettingsStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Table3SettingsHandler } from '../../types';\n\nexport function useSettingsStateListener<TType = unknown>(\n table: RTable<TType>,\n onChangeSettings: Table3SettingsHandler | undefined\n) {\n const meta = table.options.meta as TableMeta<TType>;\n const state = table.getState();\n\n React.useEffect(() => {\n let handler;\n\n if (typeof onChangeSettings === 'function') {\n handler = setTimeout(() => {\n onChangeSettings(meta.getSettings());\n }, 250);\n }\n\n return () => clearTimeout(handler);\n }, [\n meta.columnFreezing.frozenColumnIndex,\n state.columnOrder,\n state.columnSizing,\n state.columnVisibility,\n meta.search.excludeUnmatchedResults,\n meta.fontSize.size,\n meta.rowHeight.height,\n meta.printing.printWarningDialogVisibility,\n state.sorting,\n ]);\n}\n"],"names":["useSettingsStateListener","table","onChangeSettings","meta","options","state","getState","React","useEffect","handler","setTimeout","getSettings","clearTimeout","columnFreezing","frozenColumnIndex","columnOrder","columnSizing","columnVisibility","search","excludeUnmatchedResults","
|
1
|
+
{"version":3,"file":"useSettingsStateListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useSettingsStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Table3SettingsHandler } from '../../types';\nimport { FONT_SIZE } from '../../components/toolbar/FontSize';\nimport { getFontBasedMinColumnSize } from '../../components/columns/styles';\n\nexport function useSettingsStateListener<TType = unknown>(\n table: RTable<TType>,\n onChangeSettings: Table3SettingsHandler | undefined\n) {\n const meta = table.options.meta as TableMeta<TType>;\n const state = table.getState();\n\n const prevFontSize = React.useRef(meta.fontSize.size);\n\n React.useEffect(() => {\n const newFontSize = meta.fontSize.size;\n const oldFontSize = prevFontSize.current;\n const { small, medium, large } = FONT_SIZE;\n let columnSizeChange = 0;\n\n switch (`${oldFontSize}-${newFontSize}`) {\n case `${small}-${medium}`:\n columnSizeChange = 8;\n break;\n case `${small}-${large}`:\n columnSizeChange = 16;\n break;\n case `${medium}-${small}`:\n columnSizeChange = -8;\n break;\n case `${medium}-${large}`:\n columnSizeChange = 8;\n break;\n case `${large}-${small}`:\n columnSizeChange = -16;\n break;\n case `${large}-${medium}`:\n columnSizeChange = -8;\n break;\n default:\n columnSizeChange = 0;\n break;\n }\n\n prevFontSize.current = newFontSize;\n\n if (columnSizeChange === 0) {\n return;\n }\n\n table.setColumnSizing(sizes => {\n const minColumnSize = getFontBasedMinColumnSize(newFontSize);\n\n return Object.fromEntries(\n Object.entries(sizes).map(([columnName, prevColumnSize]) => {\n // Prevents width value in the setting to go below the minColumnSize\n const newSize = Math.max(minColumnSize, prevColumnSize + columnSizeChange);\n\n return [columnName, newSize];\n })\n );\n });\n }, [meta.fontSize.size]);\n\n React.useEffect(() => {\n let handler;\n\n if (typeof onChangeSettings === 'function') {\n handler = setTimeout(() => {\n onChangeSettings(meta.getSettings());\n }, 250);\n }\n\n return () => clearTimeout(handler);\n }, [\n meta.columnFreezing.frozenColumnIndex,\n state.columnOrder,\n state.columnSizing,\n state.columnVisibility,\n meta.search.excludeUnmatchedResults,\n meta.fontSize.size,\n meta.rowHeight.height,\n meta.printing.printWarningDialogVisibility,\n state.sorting,\n ]);\n}\n"],"names":["useSettingsStateListener","table","onChangeSettings","meta","options","state","getState","prevFontSize","React","useRef","fontSize","size","useEffect","newFontSize","oldFontSize","current","small","medium","large","FONT_SIZE","columnSizeChange","setColumnSizing","sizes","minColumnSize","getFontBasedMinColumnSize","Object","fromEntries","entries","map","columnName","prevColumnSize","newSize","Math","max","handler","setTimeout","getSettings","clearTimeout","columnFreezing","frozenColumnIndex","columnOrder","columnSizing","columnVisibility","search","excludeUnmatchedResults","rowHeight","height","printing","printWarningDialogVisibility","sorting"],"mappings":";;;;SAMgBA,wBAAwBA,CACpCC,KAAoB,EACpBC,gBAAmD;EAEnD,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAwB;EACnD,MAAME,KAAK,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAE9B,MAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAACN,IAAI,CAACO,QAAQ,CAACC,IAAI,CAAC;EAErDH,cAAK,CAACI,SAAS,CAAC;IACZ,MAAMC,WAAW,GAAGV,IAAI,CAACO,QAAQ,CAACC,IAAI;IACtC,MAAMG,WAAW,GAAGP,YAAY,CAACQ,OAAO;IACxC,MAAM;MAAEC,KAAK;MAAEC,MAAM;MAAEC;KAAO,GAAGC,SAAS;IAC1C,IAAIC,gBAAgB,GAAG,CAAC;IAExB,WAAWN,eAAeD,aAAa;MACnC,QAAQG,SAASC,QAAQ;QACrBG,gBAAgB,GAAG,CAAC;QACpB;MACJ,QAAQJ,SAASE,OAAO;QACpBE,gBAAgB,GAAG,EAAE;QACrB;MACJ,QAAQH,UAAUD,OAAO;QACrBI,gBAAgB,GAAG,CAAC,CAAC;QACrB;MACJ,QAAQH,UAAUC,OAAO;QACrBE,gBAAgB,GAAG,CAAC;QACpB;MACJ,QAAQF,SAASF,OAAO;QACpBI,gBAAgB,GAAG,CAAC,EAAE;QACtB;MACJ,QAAQF,SAASD,QAAQ;QACrBG,gBAAgB,GAAG,CAAC,CAAC;QACrB;MACJ;QACIA,gBAAgB,GAAG,CAAC;QACpB;;IAGRb,YAAY,CAACQ,OAAO,GAAGF,WAAW;IAElC,IAAIO,gBAAgB,KAAK,CAAC,EAAE;MACxB;;IAGJnB,KAAK,CAACoB,eAAe,CAACC,KAAK;MACvB,MAAMC,aAAa,GAAGC,yBAAyB,CAACX,WAAW,CAAC;MAE5D,OAAOY,MAAM,CAACC,WAAW,CACrBD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,GAAG,CAAC,CAAC,CAACC,UAAU,EAAEC,cAAc,CAAC;;QAEnD,MAAMC,OAAO,GAAGC,IAAI,CAACC,GAAG,CAACV,aAAa,EAAEO,cAAc,GAAGV,gBAAgB,CAAC;QAE1E,OAAO,CAACS,UAAU,EAAEE,OAAO,CAAC;OAC/B,CAAC,CACL;KACJ,CAAC;GACL,EAAE,CAAC5B,IAAI,CAACO,QAAQ,CAACC,IAAI,CAAC,CAAC;EAExBH,cAAK,CAACI,SAAS,CAAC;IACZ,IAAIsB,OAAO;IAEX,IAAI,OAAOhC,gBAAgB,KAAK,UAAU,EAAE;MACxCgC,OAAO,GAAGC,UAAU,CAAC;QACjBjC,gBAAgB,CAACC,IAAI,CAACiC,WAAW,EAAE,CAAC;OACvC,EAAE,GAAG,CAAC;;IAGX,OAAO,MAAMC,YAAY,CAACH,OAAO,CAAC;GACrC,EAAE,CACC/B,IAAI,CAACmC,cAAc,CAACC,iBAAiB,EACrClC,KAAK,CAACmC,WAAW,EACjBnC,KAAK,CAACoC,YAAY,EAClBpC,KAAK,CAACqC,gBAAgB,EACtBvC,IAAI,CAACwC,MAAM,CAACC,uBAAuB,EACnCzC,IAAI,CAACO,QAAQ,CAACC,IAAI,EAClBR,IAAI,CAAC0C,SAAS,CAACC,MAAM,EACrB3C,IAAI,CAAC4C,QAAQ,CAACC,4BAA4B,EAC1C3C,KAAK,CAAC4C,OAAO,CAChB,CAAC;AACN;;;;"}
|
@@ -3,7 +3,7 @@ import { createColumnHelper } from '@tanstack/react-table';
|
|
3
3
|
import { Header } from '../components/columns/header/Header.js';
|
4
4
|
import { Footer } from '../components/columns/footer/Footer.js';
|
5
5
|
import { createRowActionsColumn } from '../components/columns/internal/Actions.js';
|
6
|
-
import {
|
6
|
+
import { getFontBasedMinColumnSize } from '../components/columns/styles.js';
|
7
7
|
import { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions.js';
|
8
8
|
import { Cell } from '../components/columns/cell/Cell.js';
|
9
9
|
import { createRowSelectionColumn } from '../components/columns/internal/Selection.js';
|
@@ -27,6 +27,8 @@ function getSortingFn(dataType, customFnOrBuiltIn) {
|
|
27
27
|
return 'auto';
|
28
28
|
}
|
29
29
|
function useConvertChildrenToColumns(props, options, editing) {
|
30
|
+
var _props$defaultSetting;
|
31
|
+
const minColumnSize = getFontBasedMinColumnSize(props === null || props === void 0 ? void 0 : (_props$defaultSetting = props.defaultSettings) === null || _props$defaultSetting === void 0 ? void 0 : _props$defaultSetting.fontSize);
|
30
32
|
// It's important to memoise column definitions, because it prevents columns like "Drag column" to re-render on every state change,
|
31
33
|
// and break dragging at the moment it happens.
|
32
34
|
return React__default.useMemo(() => {
|
@@ -59,7 +61,7 @@ function useConvertChildrenToColumns(props, options, editing) {
|
|
59
61
|
cell: Cell,
|
60
62
|
footer: Footer,
|
61
63
|
// sizing
|
62
|
-
minSize:
|
64
|
+
minSize: minColumnSize,
|
63
65
|
enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
|
64
66
|
// filtering
|
65
67
|
enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
|
package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useConvertChildrenToColumns.js","sources":["../../../../../../../../src/components/Table3/hooks/useConvertChildrenToColumns.tsx"],"sourcesContent":["import React from 'react';\nimport {\n ColumnDef,\n ColumnSizingState,\n createColumnHelper,\n ColumnSort,\n VisibilityState,\n GroupColumnDef,\n} from '@tanstack/react-table';\nimport { Table3ColumnProps, Table3Props, Table3Options, Table3ColumnDataType, Table3SortFn, Table3GroupProps } from '../types';\nimport { Header } from '../components/columns/header/Header';\nimport { Footer } from '../components/columns/footer/Footer';\nimport { Cell } from '../components/columns/cell/Cell';\nimport { createRowSelectionColumn } from '../components/columns/internal/Selection';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { createRowActionsColumn } from '../components/columns/internal/Actions';\nimport { createRowExpansionColumn } from '../components/columns/internal/Expansion';\nimport { createRowDragColumn } from '../components/columns/internal/Drag';\nimport { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions';\nimport { useEditing } from './features/useEditing';\nimport { Group } from '../components/columns/header/Group';\n\nfunction getSortingFn<TType = unknown>(dataType?: Table3ColumnDataType, customFnOrBuiltIn?: Table3SortFn<TType>) {\n if (typeof customFnOrBuiltIn === 'function') {\n return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);\n }\n\n // if a built in is being used, just return that\n if (customFnOrBuiltIn) {\n return customFnOrBuiltIn;\n }\n\n // some times we alias based on the type\n if (dataType && dataType !== 'boolean' && dataType !== 'number') {\n return dataType;\n }\n\n // otherwise fall back to auto\n return 'auto';\n}\n\nexport function useConvertChildrenToColumns<TType = unknown>(\n props: Table3Props<TType>,\n options: Table3Options,\n editing: ReturnType<typeof useEditing>\n) {\n // It's important to memoise column definitions, because it prevents columns like \"Drag column\" to re-render on every state change,\n // and break dragging at the moment it happens.\n return React.useMemo(() => {\n const columnHelper = createColumnHelper<TType>();\n\n const defaultColumnSizing: ColumnSizingState = {};\n const defaultColumnVisibility: VisibilityState = {};\n const defaultSorting: ColumnSort[] = [];\n\n function processChild<TType>(child: React.ReactChild | React.ReactFragment | React.ReactPortal) {\n if (\n React.isValidElement<Table3ColumnProps<TType>>(child) &&\n (child as any).type?.displayName === 'Table3Column' &&\n child.props.accessor\n ) {\n if (child.props.defaultWidth) {\n defaultColumnSizing[child.props.accessor as string] =\n child.props.defaultWidth === 'grow' ? '1fr' : (child.props.defaultWidth as any);\n }\n\n if (child.props.defaultHidden && options.enableColumnHiding) {\n defaultColumnVisibility[child.props.accessor as string] = false;\n }\n\n if (child.props.sort !== undefined) {\n defaultSorting.push({\n id: child.props.accessor as string,\n desc: child.props.sort === 'desc',\n });\n }\n\n // return regular column definition\n return {\n accessorKey: child.props.accessor,\n id: child.props.accessor as string,\n header: Header,\n cell: Cell,\n footer: Footer,\n // sizing\n minSize: MIN_COLUMN_SIZE,\n enableResizing: child.props.enableResizing ?? true,\n // filtering\n enableColumnFilter: child.props.enableFiltering ?? true,\n filterFn: 'tacoFilter' as any,\n // sorting\n enableSorting: child.props.enableSorting ?? true,\n sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n sortDescFirst: false,\n sortUndefined: 1,\n // visibility\n enableHiding: child.props.enableHiding ?? true,\n // custom options\n meta: {\n align: child.props.align,\n className: child.props.className,\n control: child.props.control,\n dataType: child.props.dataType,\n enableOrdering: child.props.enableOrdering ?? true,\n enablePrinting: child.props.enablePrinting ?? true,\n enableSearch: child.props.enableSearch ?? true,\n enableTruncate: child.props.enableTruncate ?? false,\n filters: child.props.filters,\n footer: child.props.footer,\n header: child.props.header,\n headerClassName: child.props.headerClassName,\n menu: child.props.menu,\n renderer: child.props.renderer,\n tooltip: child.props.tooltip,\n },\n };\n } else if (\n React.isValidElement<Table3GroupProps>(child) &&\n (child as any).type?.displayName === 'Table3Group' &&\n child.props.children\n ) {\n // return column group definition\n return columnHelper.group({\n id: child.props.id,\n header: Group,\n columns: processChildren(child.props.children),\n meta: {\n align: 'center',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: child.props.header,\n },\n });\n }\n return;\n }\n\n function processChildren<TType = unknown>(\n children: (JSX.Element | boolean | null | undefined)[]\n ): Array<ColumnDef<TType> | GroupColumnDef<TType>> {\n return (\n React.Children.toArray(children)\n .map(processChild)\n // compiler cannot get filtering out undefined items, so using the type casting here\n .filter(child => !!child) as Array<ColumnDef<TType> | GroupColumnDef<TType>>\n ); // need to remove undefined array items after processing the children\n }\n\n const columns: ColumnDef<TType>[] = processChildren(props.children);\n\n if (options.enableRowExpansion && props.expandedRowRenderer) {\n columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));\n }\n\n if (options.enableRowSelection) {\n columns.unshift(\n columnHelper.display(\n createRowSelectionColumn<TType>(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)\n )\n );\n }\n\n if (options.enableRowDrag && props.onRowDrag) {\n columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));\n }\n\n if (props.actionsForRow?.length) {\n columns.push(columnHelper.display(createRowActionsColumn<TType>()));\n }\n\n if (editing.isEnabled && editing.isEditing) {\n columns.push(columnHelper.display(createRowEditingActionsColumn<TType>()));\n }\n\n return { columns, defaultColumnSizing, defaultColumnVisibility, defaultSorting };\n }, [editing.isEditing]);\n}\n"],"names":["getSortingFn","dataType","customFnOrBuiltIn","rowA","rowB","columnId","original","useConvertChildrenToColumns","props","options","editing","React","useMemo","columnHelper","createColumnHelper","defaultColumnSizing","defaultColumnVisibility","defaultSorting","processChild","child","isValidElement","_child$type","type","displayName","accessor","_child$props$enableRe","_child$props$enableFi","_child$props$enableSo","_child$props$enableHi","_child$props$enableOr","_child$props$enablePr","_child$props$enableSe","_child$props$enableTr","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","accessorKey","header","Header","cell","Cell","footer","Footer","minSize","MIN_COLUMN_SIZE","enableResizing","enableColumnFilter","enableFiltering","filterFn","enableSorting","sortingFn","sortFn","sortDescFirst","sortUndefined","enableHiding","meta","align","className","control","enableOrdering","enablePrinting","enableSearch","enableTruncate","filters","headerClassName","menu","renderer","tooltip","_child$type2","children","group","Group","columns","processChildren","Children","toArray","map","filter","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableRowDrag","onRowDrag","createRowDragColumn","_props$actionsForRow","actionsForRow","length","createRowActionsColumn","isEnabled","isEditing","createRowEditingActionsColumn"],"mappings":";;;;;;;;;;;;;AAsBA,SAASA,YAAYA,CAAkBC,QAA+B,EAAEC,iBAAuC;EAC3G,IAAI,OAAOA,iBAAiB,KAAK,UAAU,EAAE;IACzC,OAAO,CAACC,IAAI,EAAEC,IAAI,EAAEC,QAAQ,KAAKH,iBAAiB,CAACC,IAAI,CAACG,QAAQ,EAAEF,IAAI,CAACE,QAAQ,EAAED,QAAQ,CAAC;;;EAI9F,IAAIH,iBAAiB,EAAE;IACnB,OAAOA,iBAAiB;;;EAI5B,IAAID,QAAQ,IAAIA,QAAQ,KAAK,SAAS,IAAIA,QAAQ,KAAK,QAAQ,EAAE;IAC7D,OAAOA,QAAQ;;;EAInB,OAAO,MAAM;AACjB;SAEgBM,2BAA2BA,CACvCC,KAAyB,EACzBC,OAAsB,EACtBC,OAAsC;;;EAItC,OAAOC,cAAK,CAACC,OAAO,CAAC;;IACjB,MAAMC,YAAY,GAAGC,kBAAkB,EAAS;IAEhD,MAAMC,mBAAmB,GAAsB,EAAE;IACjD,MAAMC,uBAAuB,GAAoB,EAAE;IACnD,MAAMC,cAAc,GAAiB,EAAE;IAEvC,SAASC,YAAYA,CAAQC,KAAiE;;MAC1F,kBACIR,cAAK,CAACS,cAAc,CAA2BD,KAAK,CAAC,IACpD,EAAAE,WAAA,GAAAF,KAAa,CAACG,IAAI,cAAAD,WAAA,uBAAlBA,WAAA,CAAoBE,WAAW,MAAK,cAAc,IACnDJ,KAAK,CAACX,KAAK,CAACgB,QAAQ,EACtB;QAAA,IAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA,EAAAC,qBAAA;QACE,IAAIb,KAAK,CAACX,KAAK,CAACyB,YAAY,EAAE;UAC1BlB,mBAAmB,CAACI,KAAK,CAACX,KAAK,CAACgB,QAAkB,CAAC,GAC/CL,KAAK,CAACX,KAAK,CAACyB,YAAY,KAAK,MAAM,GAAG,KAAK,GAAId,KAAK,CAACX,KAAK,CAACyB,YAAoB;;QAGvF,IAAId,KAAK,CAACX,KAAK,CAAC0B,aAAa,IAAIzB,OAAO,CAAC0B,kBAAkB,EAAE;UACzDnB,uBAAuB,CAACG,KAAK,CAACX,KAAK,CAACgB,QAAkB,CAAC,GAAG,KAAK;;QAGnE,IAAIL,KAAK,CAACX,KAAK,CAAC4B,IAAI,KAAKC,SAAS,EAAE;UAChCpB,cAAc,CAACqB,IAAI,CAAC;YAChBC,EAAE,EAAEpB,KAAK,CAACX,KAAK,CAACgB,QAAkB;YAClCgB,IAAI,EAAErB,KAAK,CAACX,KAAK,CAAC4B,IAAI,KAAK;WAC9B,CAAC;;;QAIN,OAAO;UACHK,WAAW,EAAEtB,KAAK,CAACX,KAAK,CAACgB,QAAQ;UACjCe,EAAE,EAAEpB,KAAK,CAACX,KAAK,CAACgB,QAAkB;UAClCkB,MAAM,EAAEC,MAAM;UACdC,IAAI,EAAEC,IAAI;UACVC,MAAM,EAAEC,MAAM;;UAEdC,OAAO,EAAEC,eAAe;UACxBC,cAAc,GAAAzB,qBAAA,GAAEN,KAAK,CAACX,KAAK,CAAC0C,cAAc,cAAAzB,qBAAA,cAAAA,qBAAA,GAAI,IAAI;;UAElD0B,kBAAkB,GAAAzB,qBAAA,GAAEP,KAAK,CAACX,KAAK,CAAC4C,eAAe,cAAA1B,qBAAA,cAAAA,qBAAA,GAAI,IAAI;UACvD2B,QAAQ,EAAE,YAAmB;;UAE7BC,aAAa,GAAA3B,qBAAA,GAAER,KAAK,CAACX,KAAK,CAAC8C,aAAa,cAAA3B,qBAAA,cAAAA,qBAAA,GAAI,IAAI;UAChD4B,SAAS,EAAEvD,YAAY,CAAQmB,KAAK,CAACX,KAAK,CAACP,QAAQ,EAAEkB,KAAK,CAACX,KAAK,CAACgD,MAAM,CAAC;UACxEC,aAAa,EAAE,KAAK;UACpBC,aAAa,EAAE,CAAC;;UAEhBC,YAAY,GAAA/B,qBAAA,GAAET,KAAK,CAACX,KAAK,CAACmD,YAAY,cAAA/B,qBAAA,cAAAA,qBAAA,GAAI,IAAI;;UAE9CgC,IAAI,EAAE;YACFC,KAAK,EAAE1C,KAAK,CAACX,KAAK,CAACqD,KAAK;YACxBC,SAAS,EAAE3C,KAAK,CAACX,KAAK,CAACsD,SAAS;YAChCC,OAAO,EAAE5C,KAAK,CAACX,KAAK,CAACuD,OAAO;YAC5B9D,QAAQ,EAAEkB,KAAK,CAACX,KAAK,CAACP,QAAQ;YAC9B+D,cAAc,GAAAnC,qBAAA,GAAEV,KAAK,CAACX,KAAK,CAACwD,cAAc,cAAAnC,qBAAA,cAAAA,qBAAA,GAAI,IAAI;YAClDoC,cAAc,GAAAnC,qBAAA,GAAEX,KAAK,CAACX,KAAK,CAACyD,cAAc,cAAAnC,qBAAA,cAAAA,qBAAA,GAAI,IAAI;YAClDoC,YAAY,GAAAnC,qBAAA,GAAEZ,KAAK,CAACX,KAAK,CAAC0D,YAAY,cAAAnC,qBAAA,cAAAA,qBAAA,GAAI,IAAI;YAC9CoC,cAAc,GAAAnC,qBAAA,GAAEb,KAAK,CAACX,KAAK,CAAC2D,cAAc,cAAAnC,qBAAA,cAAAA,qBAAA,GAAI,KAAK;YACnDoC,OAAO,EAAEjD,KAAK,CAACX,KAAK,CAAC4D,OAAO;YAC5BtB,MAAM,EAAE3B,KAAK,CAACX,KAAK,CAACsC,MAAM;YAC1BJ,MAAM,EAAEvB,KAAK,CAACX,KAAK,CAACkC,MAAM;YAC1B2B,eAAe,EAAElD,KAAK,CAACX,KAAK,CAAC6D,eAAe;YAC5CC,IAAI,EAAEnD,KAAK,CAACX,KAAK,CAAC8D,IAAI;YACtBC,QAAQ,EAAEpD,KAAK,CAACX,KAAK,CAAC+D,QAAQ;YAC9BC,OAAO,EAAErD,KAAK,CAACX,KAAK,CAACgE;;SAE5B;OACJ,MAAM,kBACH7D,cAAK,CAACS,cAAc,CAAmBD,KAAK,CAAC,IAC5C,EAAAsD,YAAA,GAAAtD,KAAa,CAACG,IAAI,cAAAmD,YAAA,uBAAlBA,YAAA,CAAoBlD,WAAW,MAAK,aAAa,IAClDJ,KAAK,CAACX,KAAK,CAACkE,QAAQ,EACtB;;QAEE,OAAO7D,YAAY,CAAC8D,KAAK,CAAC;UACtBpC,EAAE,EAAEpB,KAAK,CAACX,KAAK,CAAC+B,EAAE;UAClBG,MAAM,EAAEkC,KAAK;UACbC,OAAO,EAAEC,eAAe,CAAC3D,KAAK,CAACX,KAAK,CAACkE,QAAQ,CAAC;UAC9Cd,IAAI,EAAE;YACFC,KAAK,EAAE,QAAQ;YACfG,cAAc,EAAE,KAAK;YACrBE,YAAY,EAAE,KAAK;YACnBC,cAAc,EAAE,KAAK;YACrBzB,MAAM,EAAEvB,KAAK,CAACX,KAAK,CAACkC;;SAE3B,CAAC;;MAEN;;IAGJ,SAASoC,eAAeA,CACpBJ,QAAsD;MAEtD,OACI/D,cAAK,CAACoE,QAAQ,CAACC,OAAO,CAACN,QAAQ,CAAC,CAC3BO,GAAG,CAAC/D,YAAY;;OAEhBgE,MAAM,CAAC/D,KAAK,IAAI,CAAC,CAACA,KAAK,CAC/B,CAAC;;;IAGN,MAAM0D,OAAO,GAAuBC,eAAe,CAACtE,KAAK,CAACkE,QAAQ,CAAC;IAEnE,IAAIjE,OAAO,CAAC0E,kBAAkB,IAAI3E,KAAK,CAAC4E,mBAAmB,EAAE;MACzDP,OAAO,CAACQ,OAAO,CAACxE,YAAY,CAACyE,OAAO,CAACC,wBAAwB,CAAC/E,KAAK,CAAC4E,mBAAmB,CAAC,CAAC,CAAC;;IAG9F,IAAI3E,OAAO,CAAC+E,kBAAkB,EAAE;MAC5BX,OAAO,CAACQ,OAAO,CACXxE,YAAY,CAACyE,OAAO,CAChBG,wBAAwB,CAAQ,CAAC,EAAEhF,OAAO,CAACiF,aAAa,IAAIlF,KAAK,CAACmF,SAAS,CAAC,EAAE,CAAC,CAACnF,KAAK,CAAC4E,mBAAmB,CAAC,CAC7G,CACJ;;IAGL,IAAI3E,OAAO,CAACiF,aAAa,IAAIlF,KAAK,CAACmF,SAAS,EAAE;MAC1Cd,OAAO,CAACQ,OAAO,CAACxE,YAAY,CAACyE,OAAO,CAACM,mBAAmB,CAACpF,KAAK,CAACmF,SAAS,CAAC,CAAC,CAAC;;IAG/E,KAAAE,oBAAA,GAAIrF,KAAK,CAACsF,aAAa,cAAAD,oBAAA,eAAnBA,oBAAA,CAAqBE,MAAM,EAAE;MAC7BlB,OAAO,CAACvC,IAAI,CAACzB,YAAY,CAACyE,OAAO,CAACU,sBAAsB,EAAS,CAAC,CAAC;;IAGvE,IAAItF,OAAO,CAACuF,SAAS,IAAIvF,OAAO,CAACwF,SAAS,EAAE;MACxCrB,OAAO,CAACvC,IAAI,CAACzB,YAAY,CAACyE,OAAO,CAACa,6BAA6B,EAAS,CAAC,CAAC;;IAG9E,OAAO;MAAEtB,OAAO;MAAE9D,mBAAmB;MAAEC,uBAAuB;MAAEC;KAAgB;GACnF,EAAE,CAACP,OAAO,CAACwF,SAAS,CAAC,CAAC;AAC3B;;;;"}
|
1
|
+
{"version":3,"file":"useConvertChildrenToColumns.js","sources":["../../../../../../../../src/components/Table3/hooks/useConvertChildrenToColumns.tsx"],"sourcesContent":["import React from 'react';\nimport {\n ColumnDef,\n ColumnSizingState,\n createColumnHelper,\n ColumnSort,\n VisibilityState,\n GroupColumnDef,\n} from '@tanstack/react-table';\nimport { Table3ColumnProps, Table3Props, Table3Options, Table3ColumnDataType, Table3SortFn, Table3GroupProps } from '../types';\nimport { Header } from '../components/columns/header/Header';\nimport { Footer } from '../components/columns/footer/Footer';\nimport { Cell } from '../components/columns/cell/Cell';\nimport { createRowSelectionColumn } from '../components/columns/internal/Selection';\nimport { getFontBasedMinColumnSize } from '../components/columns/styles';\nimport { createRowActionsColumn } from '../components/columns/internal/Actions';\nimport { createRowExpansionColumn } from '../components/columns/internal/Expansion';\nimport { createRowDragColumn } from '../components/columns/internal/Drag';\nimport { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions';\nimport { useEditing } from './features/useEditing';\nimport { Group } from '../components/columns/header/Group';\n\nfunction getSortingFn<TType = unknown>(dataType?: Table3ColumnDataType, customFnOrBuiltIn?: Table3SortFn<TType>) {\n if (typeof customFnOrBuiltIn === 'function') {\n return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);\n }\n\n // if a built in is being used, just return that\n if (customFnOrBuiltIn) {\n return customFnOrBuiltIn;\n }\n\n // some times we alias based on the type\n if (dataType && dataType !== 'boolean' && dataType !== 'number') {\n return dataType;\n }\n\n // otherwise fall back to auto\n return 'auto';\n}\n\nexport function useConvertChildrenToColumns<TType = unknown>(\n props: Table3Props<TType>,\n options: Table3Options,\n editing: ReturnType<typeof useEditing>\n) {\n const minColumnSize = getFontBasedMinColumnSize(props?.defaultSettings?.fontSize);\n // It's important to memoise column definitions, because it prevents columns like \"Drag column\" to re-render on every state change,\n // and break dragging at the moment it happens.\n return React.useMemo(() => {\n const columnHelper = createColumnHelper<TType>();\n\n const defaultColumnSizing: ColumnSizingState = {};\n const defaultColumnVisibility: VisibilityState = {};\n const defaultSorting: ColumnSort[] = [];\n\n function processChild<TType>(child: React.ReactChild | React.ReactFragment | React.ReactPortal) {\n if (\n React.isValidElement<Table3ColumnProps<TType>>(child) &&\n (child as any).type?.displayName === 'Table3Column' &&\n child.props.accessor\n ) {\n if (child.props.defaultWidth) {\n defaultColumnSizing[child.props.accessor as string] =\n child.props.defaultWidth === 'grow' ? '1fr' : (child.props.defaultWidth as any);\n }\n\n if (child.props.defaultHidden && options.enableColumnHiding) {\n defaultColumnVisibility[child.props.accessor as string] = false;\n }\n\n if (child.props.sort !== undefined) {\n defaultSorting.push({\n id: child.props.accessor as string,\n desc: child.props.sort === 'desc',\n });\n }\n\n // return regular column definition\n return {\n accessorKey: child.props.accessor,\n id: child.props.accessor as string,\n header: Header,\n cell: Cell,\n footer: Footer,\n // sizing\n minSize: minColumnSize,\n enableResizing: child.props.enableResizing ?? true,\n // filtering\n enableColumnFilter: child.props.enableFiltering ?? true,\n filterFn: 'tacoFilter' as any,\n // sorting\n enableSorting: child.props.enableSorting ?? true,\n sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n sortDescFirst: false,\n sortUndefined: 1,\n // visibility\n enableHiding: child.props.enableHiding ?? true,\n // custom options\n meta: {\n align: child.props.align,\n className: child.props.className,\n control: child.props.control,\n dataType: child.props.dataType,\n enableOrdering: child.props.enableOrdering ?? true,\n enablePrinting: child.props.enablePrinting ?? true,\n enableSearch: child.props.enableSearch ?? true,\n enableTruncate: child.props.enableTruncate ?? false,\n filters: child.props.filters,\n footer: child.props.footer,\n header: child.props.header,\n headerClassName: child.props.headerClassName,\n menu: child.props.menu,\n renderer: child.props.renderer,\n tooltip: child.props.tooltip,\n },\n };\n } else if (\n React.isValidElement<Table3GroupProps>(child) &&\n (child as any).type?.displayName === 'Table3Group' &&\n child.props.children\n ) {\n // return column group definition\n return columnHelper.group({\n id: child.props.id,\n header: Group,\n columns: processChildren(child.props.children),\n meta: {\n align: 'center',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: child.props.header,\n },\n });\n }\n return;\n }\n\n function processChildren<TType = unknown>(\n children: (JSX.Element | boolean | null | undefined)[]\n ): Array<ColumnDef<TType> | GroupColumnDef<TType>> {\n return (\n React.Children.toArray(children)\n .map(processChild)\n // compiler cannot get filtering out undefined items, so using the type casting here\n .filter(child => !!child) as Array<ColumnDef<TType> | GroupColumnDef<TType>>\n ); // need to remove undefined array items after processing the children\n }\n\n const columns: ColumnDef<TType>[] = processChildren(props.children);\n\n if (options.enableRowExpansion && props.expandedRowRenderer) {\n columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));\n }\n\n if (options.enableRowSelection) {\n columns.unshift(\n columnHelper.display(\n createRowSelectionColumn<TType>(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)\n )\n );\n }\n\n if (options.enableRowDrag && props.onRowDrag) {\n columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));\n }\n\n if (props.actionsForRow?.length) {\n columns.push(columnHelper.display(createRowActionsColumn<TType>()));\n }\n\n if (editing.isEnabled && editing.isEditing) {\n columns.push(columnHelper.display(createRowEditingActionsColumn<TType>()));\n }\n\n return { columns, defaultColumnSizing, defaultColumnVisibility, defaultSorting };\n }, [editing.isEditing]);\n}\n"],"names":["getSortingFn","dataType","customFnOrBuiltIn","rowA","rowB","columnId","original","useConvertChildrenToColumns","props","options","editing","minColumnSize","getFontBasedMinColumnSize","_props$defaultSetting","defaultSettings","fontSize","React","useMemo","columnHelper","createColumnHelper","defaultColumnSizing","defaultColumnVisibility","defaultSorting","processChild","child","isValidElement","_child$type","type","displayName","accessor","_child$props$enableRe","_child$props$enableFi","_child$props$enableSo","_child$props$enableHi","_child$props$enableOr","_child$props$enablePr","_child$props$enableSe","_child$props$enableTr","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","accessorKey","header","Header","cell","Cell","footer","Footer","minSize","enableResizing","enableColumnFilter","enableFiltering","filterFn","enableSorting","sortingFn","sortFn","sortDescFirst","sortUndefined","enableHiding","meta","align","className","control","enableOrdering","enablePrinting","enableSearch","enableTruncate","filters","headerClassName","menu","renderer","tooltip","_child$type2","children","group","Group","columns","processChildren","Children","toArray","map","filter","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableRowDrag","onRowDrag","createRowDragColumn","_props$actionsForRow","actionsForRow","length","createRowActionsColumn","isEnabled","isEditing","createRowEditingActionsColumn"],"mappings":"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"}
|
@@ -1,14 +1,15 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { COLUMN_ID } from '../components/columns/internal/Actions.js';
|
3
3
|
import { isInternalColumn } from '../util/columns.js';
|
4
|
-
import {
|
4
|
+
import { getFontBasedMinColumnSize, PRINT_MIN_COLUMN_SIZE } from '../components/columns/styles.js';
|
5
5
|
|
6
|
-
const useCssGrid = (table, isPrintTable = false, actionsForRowLength = 0) => {
|
6
|
+
const useCssGrid = (table, isPrintTable = false, actionsForRowLength = 0, fontSize) => {
|
7
7
|
const allVisibleColumns = table.getVisibleLeafColumns();
|
8
8
|
const columnSizing = table.getState().columnSizing;
|
9
9
|
const rowsLength = table.getRowModel().rows.length;
|
10
10
|
const expandedRowsLength = Object.keys(table.getState().expanded).length;
|
11
11
|
const length = rowsLength + expandedRowsLength;
|
12
|
+
const minColumnSize = getFontBasedMinColumnSize(fontSize);
|
12
13
|
const gridTemplateColumns = React__default.useMemo(() => {
|
13
14
|
return allVisibleColumns.reduce((accum, column, index) => {
|
14
15
|
let size;
|
@@ -34,10 +35,10 @@ const useCssGrid = (table, isPrintTable = false, actionsForRowLength = 0) => {
|
|
34
35
|
size = 'minmax(max-content, 1fr)';
|
35
36
|
} else if (isLastColumn) {
|
36
37
|
size = `minmax(${width}px, auto)`;
|
37
|
-
} else if (width <
|
38
|
+
} else if (width < minColumnSize) {
|
38
39
|
// the react-table getResizeHandler function does not respect the minSize property on columns, it is possible
|
39
40
|
// to go below the minSize - so we have to prevent it entirely on the grid layout
|
40
|
-
size = `${
|
41
|
+
size = `${minColumnSize}px`;
|
41
42
|
} else {
|
42
43
|
size = `${width}px`;
|
43
44
|
}
|
@@ -46,7 +47,7 @@ const useCssGrid = (table, isPrintTable = false, actionsForRowLength = 0) => {
|
|
46
47
|
}
|
47
48
|
return `${accum} ${size}`.trim();
|
48
49
|
}, '');
|
49
|
-
}, [allVisibleColumns, columnSizing]);
|
50
|
+
}, [allVisibleColumns, columnSizing, minColumnSize]);
|
50
51
|
const gridTemplateRows = React__default.useMemo(() => {
|
51
52
|
// 1fr makes sure that there is always a free space between the rows and footer when table height exceeds the
|
52
53
|
// cumulative height of all rows
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport {
|
1
|
+
{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\n\nimport { isInternalColumn } from '../util/columns';\nimport { getFontBasedMinColumnSize, PRINT_MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\nimport { Table3FontSize } from '../types';\n\nexport const useCssGrid = <TType = unknown>(\n table: RTable<TType>,\n isPrintTable = false,\n actionsForRowLength = 0,\n fontSize: Table3FontSize\n) => {\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const rowsLength = table.getRowModel().rows.length;\n const expandedRowsLength = Object.keys(table.getState().expanded).length;\n const length = rowsLength + expandedRowsLength;\n const minColumnSize = getFontBasedMinColumnSize(fontSize);\n const gridTemplateColumns = React.useMemo(() => {\n return allVisibleColumns.reduce((accum, column, index) => {\n let size;\n const isLastColumn = index === allVisibleColumns.length - 1;\n // column has a getSize function, but it always returns a default value (150), and we want the\n // first render to use auto layout - so we get the size directly from table state where it is undefined\n const width = columnSizing[column.id] as number | '1fr';\n const isColumnInternal = isInternalColumn(column.id);\n\n if (isPrintTable) {\n const maxWidth = isColumnInternal ? `${column.getSize()}px` : '1fr';\n\n size = `minmax(${PRINT_MIN_COLUMN_SIZE}px, ${maxWidth})`;\n } else if (isColumnInternal) {\n if (column.id === ACTIONS_COLUMN_ID) {\n const minWidth = actionsForRowLength * 32 + 8 /* button margins l+r */ + 8; /* cell padding l+r */\n size = `minmax(${minWidth}px, auto)`;\n } else {\n // getSize method is used instead of columnSizing state because columnSizing state doesn't have\n // sizes of internal columns.\n size = `${column.getSize()}px`;\n }\n } else if (width !== undefined) {\n if (width === '1fr') {\n size = 'minmax(max-content, 1fr)';\n } else if (isLastColumn) {\n size = `minmax(${width}px, auto)`;\n } else if (width < minColumnSize) {\n // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n // to go below the minSize - so we have to prevent it entirely on the grid layout\n size = `${minColumnSize}px`;\n } else {\n size = `${width}px`;\n }\n } else {\n size = 'minmax(max-content, auto)';\n }\n\n return `${accum} ${size}`.trim();\n }, '');\n }, [allVisibleColumns, columnSizing, minColumnSize]);\n\n const gridTemplateRows = React.useMemo(() => {\n // 1fr makes sure that there is always a free space between the rows and footer when table height exceeds the\n // cumulative height of all rows\n return `min-content repeat(${length}, min-content) 1fr min-content`;\n }, [length]);\n\n const style: React.CSSProperties = {\n gridTemplateColumns,\n gridTemplateRows,\n };\n\n return { style };\n};\n"],"names":["useCssGrid","table","isPrintTable","actionsForRowLength","fontSize","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","rowsLength","getRowModel","rows","length","expandedRowsLength","Object","keys","expanded","minColumnSize","getFontBasedMinColumnSize","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isColumnInternal","isInternalColumn","maxWidth","getSize","PRINT_MIN_COLUMN_SIZE","ACTIONS_COLUMN_ID","minWidth","undefined","trim","gridTemplateRows","style"],"mappings":";;;;;MAQaA,UAAU,GAAGA,CACtBC,KAAoB,EACpBC,YAAY,GAAG,KAAK,EACpBC,mBAAmB,GAAG,CAAC,EACvBC,QAAwB;EAExB,MAAMC,iBAAiB,GAAGJ,KAAK,CAACK,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGN,KAAK,CAACO,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,UAAU,GAAGR,KAAK,CAACS,WAAW,EAAE,CAACC,IAAI,CAACC,MAAM;EAClD,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,IAAI,CAACd,KAAK,CAACO,QAAQ,EAAE,CAACQ,QAAQ,CAAC,CAACJ,MAAM;EACxE,MAAMA,MAAM,GAAGH,UAAU,GAAGI,kBAAkB;EAC9C,MAAMI,aAAa,GAAGC,yBAAyB,CAACd,QAAQ,CAAC;EACzD,MAAMe,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOhB,iBAAiB,CAACiB,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKpB,iBAAiB,CAACO,MAAM,GAAG,CAAC;;;MAG3D,MAAMgB,KAAK,GAAGrB,YAAY,CAACiB,MAAM,CAACK,EAAE,CAAmB;MACvD,MAAMC,gBAAgB,GAAGC,gBAAgB,CAACP,MAAM,CAACK,EAAE,CAAC;MAEpD,IAAI3B,YAAY,EAAE;QACd,MAAM8B,QAAQ,GAAGF,gBAAgB,MAAMN,MAAM,CAACS,OAAO,MAAM,GAAG,KAAK;QAEnEP,IAAI,aAAaQ,4BAA4BF,WAAW;OAC3D,MAAM,IAAIF,gBAAgB,EAAE;QACzB,IAAIN,MAAM,CAACK,EAAE,KAAKM,SAAiB,EAAE;UACjC,MAAMC,QAAQ,GAAGjC,mBAAmB,GAAG,EAAE,GAAG,CAAC,4BAA4B,CAAC,CAAC;UAC3EuB,IAAI,aAAaU,mBAAmB;SACvC,MAAM;;;UAGHV,IAAI,MAAMF,MAAM,CAACS,OAAO,MAAM;;OAErC,MAAM,IAAIL,KAAK,KAAKS,SAAS,EAAE;QAC5B,IAAIT,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGX,aAAa,EAAE;;;UAG9BS,IAAI,MAAMT,iBAAiB;SAC9B,MAAM;UACHS,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACY,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAACjC,iBAAiB,EAAEE,YAAY,EAAEU,aAAa,CAAC,CAAC;EAEpD,MAAMsB,gBAAgB,GAAGnB,cAAK,CAACC,OAAO,CAAC;;;IAGnC,6BAA6BT,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAM4B,KAAK,GAAwB;IAC/BrB,mBAAmB;IACnBoB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}
|