@coveord/plasma-mantine 52.5.0 → 52.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +31 -30
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/blank-slate/BlankSlate.js.map +1 -1
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/ButtonWithDisabledTooltip.js.map +1 -1
- package/dist/cjs/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/cjs/components/code-editor/languages/xml.js.map +1 -1
- package/dist/cjs/components/collection/Collection.js.map +1 -1
- package/dist/cjs/components/collection/Collection.styles.js.map +1 -1
- package/dist/cjs/components/collection/CollectionItem.js.map +1 -1
- package/dist/cjs/components/copyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js +5 -5
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPopoverCalendar.js.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerPresetSelect.js.map +1 -1
- package/dist/cjs/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/header/Header.d.ts.map +1 -1
- package/dist/cjs/components/header/Header.js +3 -0
- package/dist/cjs/components/header/Header.js.map +1 -1
- package/dist/cjs/components/header/__tests__/__snapshots__/Header.spec.tsx.snap +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmContext.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmMenuItem.js.map +1 -1
- package/dist/cjs/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/cjs/components/inline-confirm/useInlineConfirm.js.map +1 -1
- package/dist/cjs/components/menu/Menu.js.map +1 -1
- package/dist/cjs/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/cjs/components/modal-wizard/ModalWizardStep.js.map +1 -1
- package/dist/cjs/components/prompt/Prompt.js.map +1 -1
- package/dist/cjs/components/prompt/PromptFooter.js.map +1 -1
- package/dist/cjs/components/sticky-footer/StickyFooter.js.map +1 -1
- package/dist/cjs/components/table/Table.d.ts.map +1 -1
- package/dist/cjs/components/table/Table.js +33 -84
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/Table.styles.d.ts +2 -4
- package/dist/cjs/components/table/Table.styles.d.ts.map +1 -1
- package/dist/cjs/components/table/Table.styles.js +7 -25
- package/dist/cjs/components/table/Table.styles.js.map +1 -1
- package/dist/cjs/components/table/Table.types.d.ts +68 -2
- package/dist/cjs/components/table/Table.types.d.ts.map +1 -1
- package/dist/cjs/components/table/TableActions.d.ts +12 -2
- package/dist/cjs/components/table/TableActions.d.ts.map +1 -1
- package/dist/cjs/components/table/TableActions.js +29 -7
- package/dist/cjs/components/table/TableActions.js.map +1 -1
- package/dist/cjs/components/table/TableCollapsibleColumn.js.map +1 -1
- package/dist/cjs/components/table/TableContext.js.map +1 -1
- package/dist/cjs/components/table/TableDateRangePicker.d.ts +12 -1
- package/dist/cjs/components/table/TableDateRangePicker.d.ts.map +1 -1
- package/dist/cjs/components/table/TableDateRangePicker.js +38 -12
- package/dist/cjs/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/table/TableFilter.d.ts +1 -0
- package/dist/cjs/components/table/TableFilter.d.ts.map +1 -1
- package/dist/cjs/components/table/TableFilter.js +3 -1
- package/dist/cjs/components/table/TableFilter.js.map +1 -1
- package/dist/cjs/components/table/TableFooter.js.map +1 -1
- package/dist/cjs/components/table/TableHeader.d.ts.map +1 -1
- package/dist/cjs/components/table/TableHeader.js +5 -2
- package/dist/cjs/components/table/TableHeader.js.map +1 -1
- package/dist/cjs/components/table/TableLayoutControl.d.ts +3 -0
- package/dist/cjs/components/table/TableLayoutControl.d.ts.map +1 -0
- package/dist/cjs/components/table/TableLayoutControl.js +50 -0
- package/dist/cjs/components/table/TableLayoutControl.js.map +1 -0
- package/dist/cjs/components/table/TableLoading.d.ts +4 -0
- package/dist/cjs/components/table/TableLoading.d.ts.map +1 -0
- package/dist/cjs/components/table/TableLoading.js +28 -0
- package/dist/cjs/components/table/TableLoading.js.map +1 -0
- package/dist/cjs/components/table/TablePagination.js.map +1 -1
- package/dist/cjs/components/table/TablePerPage.js.map +1 -1
- package/dist/cjs/components/table/TablePredicate.d.ts +12 -2
- package/dist/cjs/components/table/TablePredicate.d.ts.map +1 -1
- package/dist/cjs/components/table/TablePredicate.js +29 -4
- package/dist/cjs/components/table/TablePredicate.js.map +1 -1
- package/dist/cjs/components/table/TableSelectableColumn.js.map +1 -1
- package/dist/cjs/components/table/Th.d.ts.map +1 -1
- package/dist/cjs/components/table/Th.js +2 -1
- package/dist/cjs/components/table/Th.js.map +1 -1
- package/dist/cjs/components/table/index.d.ts +1 -0
- package/dist/cjs/components/table/index.d.ts.map +1 -1
- package/dist/cjs/components/table/index.js +12 -3
- package/dist/cjs/components/table/index.js.map +1 -1
- package/dist/cjs/components/table/layouts/RowLayout.d.ts +3 -0
- package/dist/cjs/components/table/layouts/RowLayout.d.ts.map +1 -0
- package/dist/cjs/components/table/layouts/RowLayout.js +156 -0
- package/dist/cjs/components/table/layouts/RowLayout.js.map +1 -0
- package/dist/cjs/components/table/layouts/TableLayouts.d.ts +4 -0
- package/dist/cjs/components/table/layouts/TableLayouts.d.ts.map +1 -0
- package/dist/cjs/components/table/layouts/TableLayouts.js +16 -0
- package/dist/cjs/components/table/layouts/TableLayouts.js.map +1 -0
- package/dist/cjs/components/table/useRowSelection.js.map +1 -1
- package/dist/cjs/form/FormProvider.js.map +1 -1
- package/dist/cjs/form/useForm.js.map +1 -1
- package/dist/cjs/hooks/useControlledList.js.map +1 -1
- package/dist/cjs/hooks/useParentHeight.js.map +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/theme/PlasmaColors.js.map +1 -1
- package/dist/cjs/theme/Plasmantine.js.map +1 -1
- package/dist/cjs/theme/Theme.js +12 -10
- package/dist/cjs/theme/Theme.js.map +1 -1
- package/dist/cjs/utils/createPolymorphicComponent.js.map +1 -1
- package/dist/cjs/utils/overrideComponent.js.map +1 -1
- package/dist/esm/components/blank-slate/BlankSlate.js.map +1 -1
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/ButtonWithDisabledTooltip.js.map +1 -1
- package/dist/esm/components/code-editor/CodeEditor.js.map +1 -1
- package/dist/esm/components/code-editor/languages/xml.js.map +1 -1
- package/dist/esm/components/collection/Collection.js.map +1 -1
- package/dist/esm/components/collection/Collection.styles.js.map +1 -1
- package/dist/esm/components/collection/CollectionItem.js.map +1 -1
- package/dist/esm/components/copyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js +5 -5
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js.map +1 -1
- package/dist/esm/components/date-range-picker/EditableDateRangePicker.js.map +1 -1
- package/dist/esm/components/header/Header.d.ts.map +1 -1
- package/dist/esm/components/header/Header.js +3 -0
- package/dist/esm/components/header/Header.js.map +1 -1
- package/dist/esm/components/header/__tests__/__snapshots__/Header.spec.tsx.snap +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirm.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmButton.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmContext.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js.map +1 -1
- package/dist/esm/components/inline-confirm/InlineConfirmPrompt.js.map +1 -1
- package/dist/esm/components/inline-confirm/useInlineConfirm.js.map +1 -1
- package/dist/esm/components/menu/Menu.js.map +1 -1
- package/dist/esm/components/modal-wizard/ModalWizard.js.map +1 -1
- package/dist/esm/components/modal-wizard/ModalWizardStep.js.map +1 -1
- package/dist/esm/components/prompt/Prompt.js.map +1 -1
- package/dist/esm/components/prompt/PromptFooter.js.map +1 -1
- package/dist/esm/components/sticky-footer/StickyFooter.js.map +1 -1
- package/dist/esm/components/table/Table.d.ts.map +1 -1
- package/dist/esm/components/table/Table.js +36 -87
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/Table.styles.d.ts +2 -4
- package/dist/esm/components/table/Table.styles.d.ts.map +1 -1
- package/dist/esm/components/table/Table.styles.js +7 -25
- package/dist/esm/components/table/Table.styles.js.map +1 -1
- package/dist/esm/components/table/Table.types.d.ts +68 -2
- package/dist/esm/components/table/Table.types.d.ts.map +1 -1
- package/dist/esm/components/table/Table.types.js.map +1 -1
- package/dist/esm/components/table/TableActions.d.ts +12 -2
- package/dist/esm/components/table/TableActions.d.ts.map +1 -1
- package/dist/esm/components/table/TableActions.js +30 -8
- package/dist/esm/components/table/TableActions.js.map +1 -1
- package/dist/esm/components/table/TableCollapsibleColumn.js.map +1 -1
- package/dist/esm/components/table/TableContext.js.map +1 -1
- package/dist/esm/components/table/TableDateRangePicker.d.ts +12 -1
- package/dist/esm/components/table/TableDateRangePicker.d.ts.map +1 -1
- package/dist/esm/components/table/TableDateRangePicker.js +39 -13
- package/dist/esm/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/esm/components/table/TableFilter.d.ts +1 -0
- package/dist/esm/components/table/TableFilter.d.ts.map +1 -1
- package/dist/esm/components/table/TableFilter.js +3 -1
- package/dist/esm/components/table/TableFilter.js.map +1 -1
- package/dist/esm/components/table/TableFooter.js.map +1 -1
- package/dist/esm/components/table/TableHeader.d.ts.map +1 -1
- package/dist/esm/components/table/TableHeader.js +5 -2
- package/dist/esm/components/table/TableHeader.js.map +1 -1
- package/dist/esm/components/table/TableLayoutControl.d.ts +3 -0
- package/dist/esm/components/table/TableLayoutControl.d.ts.map +1 -0
- package/dist/esm/components/table/TableLayoutControl.js +40 -0
- package/dist/esm/components/table/TableLayoutControl.js.map +1 -0
- package/dist/esm/components/table/TableLoading.d.ts +4 -0
- package/dist/esm/components/table/TableLoading.d.ts.map +1 -0
- package/dist/esm/components/table/TableLoading.js +18 -0
- package/dist/esm/components/table/TableLoading.js.map +1 -0
- package/dist/esm/components/table/TablePagination.js.map +1 -1
- package/dist/esm/components/table/TablePerPage.js.map +1 -1
- package/dist/esm/components/table/TablePredicate.d.ts +12 -2
- package/dist/esm/components/table/TablePredicate.d.ts.map +1 -1
- package/dist/esm/components/table/TablePredicate.js +30 -5
- package/dist/esm/components/table/TablePredicate.js.map +1 -1
- package/dist/esm/components/table/TableSelectableColumn.js.map +1 -1
- package/dist/esm/components/table/Th.d.ts.map +1 -1
- package/dist/esm/components/table/Th.js +2 -1
- package/dist/esm/components/table/Th.js.map +1 -1
- package/dist/esm/components/table/index.d.ts +1 -0
- package/dist/esm/components/table/index.d.ts.map +1 -1
- package/dist/esm/components/table/index.js +1 -0
- package/dist/esm/components/table/index.js.map +1 -1
- package/dist/esm/components/table/layouts/RowLayout.d.ts +3 -0
- package/dist/esm/components/table/layouts/RowLayout.d.ts.map +1 -0
- package/dist/esm/components/table/layouts/RowLayout.js +146 -0
- package/dist/esm/components/table/layouts/RowLayout.js.map +1 -0
- package/dist/esm/components/table/layouts/TableLayouts.d.ts +4 -0
- package/dist/esm/components/table/layouts/TableLayouts.d.ts.map +1 -0
- package/dist/esm/components/table/layouts/TableLayouts.js +6 -0
- package/dist/esm/components/table/layouts/TableLayouts.js.map +1 -0
- package/dist/esm/components/table/useRowSelection.js.map +1 -1
- package/dist/esm/form/FormProvider.js.map +1 -1
- package/dist/esm/form/useForm.js.map +1 -1
- package/dist/esm/hooks/useControlledList.js.map +1 -1
- package/dist/esm/hooks/useParentHeight.js.map +1 -1
- package/dist/esm/theme/PlasmaColors.js.map +1 -1
- package/dist/esm/theme/Theme.js +12 -10
- package/dist/esm/theme/Theme.js.map +1 -1
- package/dist/esm/utils/overrideComponent.js.map +1 -1
- package/package.json +10 -10
- package/src/__tests__/VitestSetup.ts +7 -5
- package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx +3 -3
- package/src/components/header/Header.tsx +5 -1
- package/src/components/header/__tests__/Header.spec.tsx +1 -1
- package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap +1 -1
- package/src/components/table/Table.styles.ts +33 -63
- package/src/components/table/Table.tsx +42 -83
- package/src/components/table/Table.types.ts +71 -2
- package/src/components/table/TableActions.tsx +22 -6
- package/src/components/table/TableDateRangePicker.tsx +34 -12
- package/src/components/table/TableFilter.tsx +4 -3
- package/src/components/table/TableHeader.tsx +10 -2
- package/src/components/table/TableLayoutControl.tsx +29 -0
- package/src/components/table/TableLoading.tsx +8 -0
- package/src/components/table/TablePredicate.tsx +24 -7
- package/src/components/table/Th.tsx +1 -0
- package/src/components/table/__tests__/Table.spec.tsx +140 -316
- package/src/components/table/__tests__/TableDateRangePicker.spec.tsx +41 -14
- package/src/components/table/index.ts +1 -0
- package/src/components/table/layouts/RowLayout.tsx +150 -0
- package/src/components/table/layouts/TableLayouts.tsx +5 -0
- package/src/components/table/layouts/__tests__/RowLayout.spec.tsx +296 -0
- package/src/theme/Theme.tsx +10 -10
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import { UseFormReturnType } from '@mantine/form';
|
|
2
|
-
import { ColumnDef, CoreOptions, InitialTableState as TanstackInitialTableState,
|
|
2
|
+
import { ColumnDef, CoreOptions, Table, TableOptions, InitialTableState as TanstackInitialTableState, TableState as TanstackTableState } from '@tanstack/table-core';
|
|
3
3
|
import { Dispatch, ReactElement, ReactNode, RefObject } from 'react';
|
|
4
|
+
import { Icon } from '@coveord/plasma-react-icons';
|
|
4
5
|
import { DateRangePickerValue } from '../date-range-picker/DateRangePickerInlineCalendar';
|
|
5
6
|
import { TableActions } from './TableActions';
|
|
6
7
|
import { TableAccordionColumn, TableCollapsibleColumn } from './TableCollapsibleColumn';
|
|
8
|
+
import { TableConsumer } from './TableConsumer';
|
|
7
9
|
import { TableDateRangePicker } from './TableDateRangePicker';
|
|
8
10
|
import { TableFilter } from './TableFilter';
|
|
9
11
|
import { TableFooter } from './TableFooter';
|
|
10
12
|
import { TableHeader } from './TableHeader';
|
|
13
|
+
import { TableLoading } from './TableLoading';
|
|
11
14
|
import { TablePagination } from './TablePagination';
|
|
12
15
|
import { TablePerPage } from './TablePerPage';
|
|
13
16
|
import { TablePredicate } from './TablePredicate';
|
|
14
|
-
import {
|
|
17
|
+
import { TableLayouts } from './layouts/TableLayouts';
|
|
15
18
|
export type RowSelectionWithData<TData> = Record<string, TData>;
|
|
16
19
|
export interface RowSelectionState<TData> {
|
|
17
20
|
rowSelection: RowSelectionWithData<TData>;
|
|
@@ -21,6 +24,43 @@ export interface TableState<TData> extends Omit<TanstackTableState, 'rowSelectio
|
|
|
21
24
|
export interface InitialTableState<TData> extends Omit<TanstackInitialTableState, 'rowSelection'>, Partial<RowSelectionState<TData>>, Partial<TableFormType> {
|
|
22
25
|
}
|
|
23
26
|
export type onTableChangeEvent<TData> = (params: TableState<TData> & TableFormType) => void;
|
|
27
|
+
export interface TableLayout {
|
|
28
|
+
/**
|
|
29
|
+
* Name of the layout.
|
|
30
|
+
* Will be displayed in the layout control
|
|
31
|
+
*/
|
|
32
|
+
name: string;
|
|
33
|
+
/**
|
|
34
|
+
* Icon illustrating the layout.
|
|
35
|
+
* Will be displayed in the layout control
|
|
36
|
+
*/
|
|
37
|
+
icon?: Icon;
|
|
38
|
+
/**
|
|
39
|
+
* Header portion of the table.
|
|
40
|
+
* In the standard row layout that is where column headers would be displayed.
|
|
41
|
+
*/
|
|
42
|
+
Header: <T>(props: TableLayoutProps<T>) => ReactElement;
|
|
43
|
+
/**
|
|
44
|
+
* Body portion of the table.
|
|
45
|
+
* In the standard row layout that is where the rows would be displayed.
|
|
46
|
+
*/
|
|
47
|
+
Body: <T>(props: TableLayoutProps<T>) => ReactElement;
|
|
48
|
+
}
|
|
49
|
+
export interface TableLayoutProps<T = unknown> {
|
|
50
|
+
table: Table<T>;
|
|
51
|
+
loading?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Action passed when user double clicks on a row
|
|
54
|
+
*/
|
|
55
|
+
doubleClickAction?: (datum: T) => void;
|
|
56
|
+
/**
|
|
57
|
+
* Function that generates the expandable content of a row
|
|
58
|
+
* Return null for rows that don't need to be expandable
|
|
59
|
+
*
|
|
60
|
+
* @param datum the row for which the children should be generated.
|
|
61
|
+
*/
|
|
62
|
+
getExpandChildren?: (datum: T) => ReactNode;
|
|
63
|
+
}
|
|
24
64
|
export type TableFormType = {
|
|
25
65
|
/**
|
|
26
66
|
* Object containing the table predicates and their selected values
|
|
@@ -34,6 +74,10 @@ export type TableFormType = {
|
|
|
34
74
|
* @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]
|
|
35
75
|
*/
|
|
36
76
|
dateRange: DateRangePickerValue;
|
|
77
|
+
/**
|
|
78
|
+
* Selected layout name
|
|
79
|
+
*/
|
|
80
|
+
layout: TableLayout['name'];
|
|
37
81
|
};
|
|
38
82
|
export type TableContextType<TData> = {
|
|
39
83
|
/**
|
|
@@ -83,10 +127,18 @@ export type TableContextType<TData> = {
|
|
|
83
127
|
* Whether multi row selection is activated
|
|
84
128
|
*/
|
|
85
129
|
multiRowSelectionEnabled: boolean;
|
|
130
|
+
/**
|
|
131
|
+
* Whether row selection is enabled or not
|
|
132
|
+
*/
|
|
133
|
+
disableRowSelection: boolean;
|
|
86
134
|
/**
|
|
87
135
|
* Function that returns the number of pages
|
|
88
136
|
*/
|
|
89
137
|
getPageCount: () => number;
|
|
138
|
+
/**
|
|
139
|
+
* Available layouts. When more than one layout is provided, it will display a layout control to switch between them.
|
|
140
|
+
*/
|
|
141
|
+
layouts: TableLayout[];
|
|
90
142
|
};
|
|
91
143
|
export interface TableProps<T> {
|
|
92
144
|
/**
|
|
@@ -103,6 +155,12 @@ export interface TableProps<T> {
|
|
|
103
155
|
* @see https://tanstack.com/table/v8/docs/guide/column-defs
|
|
104
156
|
*/
|
|
105
157
|
columns: Array<ColumnDef<T>>;
|
|
158
|
+
/**
|
|
159
|
+
* Available layouts
|
|
160
|
+
*
|
|
161
|
+
* @default [Table.Layouts.Rows]
|
|
162
|
+
*/
|
|
163
|
+
layouts?: TableLayout[];
|
|
106
164
|
/**
|
|
107
165
|
* Function called when the table mounts
|
|
108
166
|
*
|
|
@@ -163,6 +221,12 @@ export interface TableProps<T> {
|
|
|
163
221
|
* @default false
|
|
164
222
|
*/
|
|
165
223
|
multiRowSelectionEnabled?: boolean;
|
|
224
|
+
/**
|
|
225
|
+
* Whether row selection is enabled or not
|
|
226
|
+
*
|
|
227
|
+
* @default false
|
|
228
|
+
*/
|
|
229
|
+
disableRowSelection?: boolean;
|
|
166
230
|
/**
|
|
167
231
|
* Additional options that can be passed to the table
|
|
168
232
|
*/
|
|
@@ -181,5 +245,7 @@ export interface TableType {
|
|
|
181
245
|
CollapsibleColumn: typeof TableCollapsibleColumn;
|
|
182
246
|
AccordionColumn: typeof TableAccordionColumn;
|
|
183
247
|
Consumer: typeof TableConsumer;
|
|
248
|
+
Loading: typeof TableLoading;
|
|
249
|
+
Layouts: typeof TableLayouts;
|
|
184
250
|
}
|
|
185
251
|
//# sourceMappingURL=Table.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAChD,OAAO,EACH,SAAS,EACT,WAAW,EACX,iBAAiB,IAAI,yBAAyB,EAC9C,
|
|
1
|
+
{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,15 @@
|
|
|
1
|
+
import { DefaultProps, Selectors } from '@mantine/core';
|
|
1
2
|
import { ReactElement, ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
+
declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
|
|
4
|
+
classes: {
|
|
5
|
+
root: string;
|
|
6
|
+
wrapper: string;
|
|
7
|
+
};
|
|
8
|
+
cx: (...args: any) => string;
|
|
9
|
+
theme: import("@mantine/core").MantineTheme;
|
|
10
|
+
};
|
|
11
|
+
type TableActionsStylesNames = Selectors<typeof useStyles>;
|
|
12
|
+
interface TableActionsProps<T> extends DefaultProps<TableActionsStylesNames> {
|
|
3
13
|
/**
|
|
4
14
|
* Function that return components for the selected row or selected rows when multi row selection is enabled
|
|
5
15
|
*
|
|
@@ -21,6 +31,6 @@ interface TableActionsProps<T> {
|
|
|
21
31
|
*/
|
|
22
32
|
children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);
|
|
23
33
|
}
|
|
24
|
-
export declare const TableActions: <T>({ children }: TableActionsProps<T>) => ReactElement;
|
|
34
|
+
export declare const TableActions: <T>({ children, classNames, styles, unstyled, ...others }: TableActionsProps<T>) => ReactElement;
|
|
25
35
|
export {};
|
|
26
36
|
//# sourceMappingURL=TableActions.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableActions.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAe,SAAS,EAAC,MAAM,eAAe,CAAC;AACjF,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAK9C,QAAA,MAAM,SAAS;;;;;;;CAKZ,CAAC;AAEJ,KAAK,uBAAuB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3D,UAAU,iBAAiB,CAAC,CAAC,CAAE,SAAQ,YAAY,CAAC,uBAAuB,CAAC;IACxE;;;;;;;;;;;;;;;;;;OAkBG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,YAAY,sFAMC,YAkBzB,CAAC"}
|
|
@@ -8,29 +8,51 @@ Object.defineProperty(exports, "TableActions", {
|
|
|
8
8
|
return TableActions;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
12
|
+
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
13
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
11
14
|
var _jsxruntime = require("react/jsx-runtime");
|
|
12
15
|
var _core = require("@mantine/core");
|
|
13
16
|
var _Tablestyles = require("./Table.styles");
|
|
14
17
|
var _TableContext = require("./TableContext");
|
|
15
|
-
var
|
|
16
|
-
|
|
18
|
+
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
19
|
+
return {
|
|
20
|
+
root: {},
|
|
21
|
+
wrapper: {
|
|
22
|
+
display: "inline-flex"
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
var TableActions = function(_param) {
|
|
27
|
+
var children = _param.children, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties._(_param, [
|
|
28
|
+
"children",
|
|
29
|
+
"classNames",
|
|
30
|
+
"styles",
|
|
31
|
+
"unstyled"
|
|
32
|
+
]);
|
|
33
|
+
var classes = useStyles(null, {
|
|
34
|
+
name: "TableActions",
|
|
35
|
+
classNames: classNames,
|
|
36
|
+
styles: styles,
|
|
37
|
+
unstyled: unstyled
|
|
38
|
+
}).classes;
|
|
17
39
|
var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
|
|
18
40
|
var selectedRows = getSelectedRows();
|
|
19
41
|
if (selectedRows.length <= 0) {
|
|
20
42
|
return null;
|
|
21
43
|
}
|
|
22
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
|
|
44
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
|
|
23
45
|
span: "content",
|
|
24
46
|
order: _Tablestyles.TableComponentsOrder.Actions,
|
|
25
47
|
py: "sm",
|
|
48
|
+
className: classes.root
|
|
49
|
+
}, others), {
|
|
26
50
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
|
|
27
51
|
spacing: "xs",
|
|
28
|
-
|
|
29
|
-
display: "inline-flex"
|
|
30
|
-
},
|
|
52
|
+
className: classes.wrapper,
|
|
31
53
|
children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
|
|
32
54
|
})
|
|
33
|
-
});
|
|
55
|
+
}));
|
|
34
56
|
};
|
|
35
57
|
|
|
36
58
|
//# sourceMappingURL=TableActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Grid, Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Grid, Group, Selectors} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n root: {},\n wrapper: {\n display: 'inline-flex',\n },\n}));\n\ntype TableActionsStylesNames = Selectors<typeof useStyles>;\n\ninterface TableActionsProps<T> extends DefaultProps<TableActionsStylesNames> {\n /**\n * Function that return components for the selected row or selected rows when multi row selection is enabled\n *\n * @param datum the data of the selected row(s)\n * @example\n * <Table.Actions<MyType>>\n * {(datum: MyType) => (\n * <Button\n * component={Link}\n * to={`edit/${datum.id}`}\n * leftIcon={<EditSize24Px />}\n * variant=\"subtle\"\n * color=\"navyBlue.8\"\n * >\n * Edit\n * </Button>\n * )}\n * </Table.Actions>\n */\n children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({\n children,\n classNames,\n styles,\n unstyled,\n ...others\n}: TableActionsProps<T>): ReactElement => {\n const {classes} = useStyles(null, {name: 'TableActions', classNames, styles, unstyled});\n const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return (\n <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} py=\"sm\" className={classes.root} {...others}>\n <Group spacing=\"xs\" className={classes.wrapper}>\n {multiRowSelectionEnabled\n ? (children as (data: T[]) => ReactNode)(selectedRows)\n : (children as (datum: T) => ReactNode)(selectedRows[0])}\n </Group>\n </Grid.Col>\n );\n};\n"],"names":["TableActions","useStyles","createStyles","theme","root","wrapper","display","children","classNames","styles","unstyled","others","classes","name","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Grid","Col","span","order","TableComponentsOrder","Actions","py","className","Group","spacing"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;oBAtCoD;2BAG9B;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS;YACLC,SAAS;QACb;IACJ;;AA2BO,IAAMN,eAAe;QACxBO,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWX,UAAU,MAAM;QAACY,MAAM;QAAgBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA9EE;IACP,IAAoDE,YAAAA,IAAAA,2BAA7CC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,UAAU,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,qBAACC,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAASC,IAAG;QAAKC,WAAWd,QAAQR;OAAUO;kBAC/F,cAAA,qBAACgB;YAAMC,SAAQ;YAAKF,WAAWd,QAAQP;sBAClCW,2BACK,AAACT,SAAsCU,gBACvC,AAACV,SAAqCU,YAAY,CAAC,EAAE;;;AAI3E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n id: 'collapsible',\n enableSorting: false,\n header: '',\n size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => {\n const onToggle = () => {\n // close all other rows when the current row not is expanded\n if (!info.row.getIsExpanded()) {\n info.table.toggleAllRowsExpanded(false);\n }\n };\n\n return <CollapsibleIcon onToggle={onToggle} info={info} />;\n },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n info: CellContext<unknown, unknown>;\n onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onToggle?.(e);\n handler();\n };\n return info.row.getCanExpand() ? (\n <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </ActionIcon>\n ) : null;\n};\n"],"names":["TableCollapsibleColumn","TableAccordionColumn","defaultProps","id","enableSorting","header","size","cell","info","CollapsibleIcon","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","ActionIcon","variant","radius","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":";;;;;;;;;;;IAeaA,sBAAsB;eAAtBA;;IAQAC,oBAAoB;eAApBA;;;;;;gCAvB4C;oBAChC;AAIzB,IAAMC,eAAmC;IACrCC,IAAI;IACJC,eAAe
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n id: 'collapsible',\n enableSorting: false,\n header: '',\n size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n ...defaultProps,\n cell: (info) => {\n const onToggle = () => {\n // close all other rows when the current row not is expanded\n if (!info.row.getIsExpanded()) {\n info.table.toggleAllRowsExpanded(false);\n }\n };\n\n return <CollapsibleIcon onToggle={onToggle} info={info} />;\n },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n info: CellContext<unknown, unknown>;\n onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onToggle?.(e);\n handler();\n };\n return info.row.getCanExpand() ? (\n <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </ActionIcon>\n ) : null;\n};\n"],"names":["TableCollapsibleColumn","TableAccordionColumn","defaultProps","id","enableSorting","header","size","cell","info","CollapsibleIcon","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","ActionIcon","variant","radius","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":";;;;;;;;;;;IAeaA,sBAAsB;eAAtBA;;IAQAC,oBAAoB;eAApBA;;;;;;gCAvB4C;oBAChC;AAIzB,IAAMC,eAAmC;IACrCC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,MAAM;AACV;AAKO,IAAMN,yBAA6C,4CACnDE;IACHK,MAAM,SAACC;6BAAS,qBAACC;YAAgBD,MAAMA;;;;AAMpC,IAAMP,uBAA2C,4CACjDC;IACHK,MAAM,SAACC;QACH,IAAME,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACF,KAAKG,IAAIC,iBAAiB;gBAC3BJ,KAAKK,MAAMC,sBAAsB;YACrC;QACJ;QAEA,qBAAO,qBAACL;YAAgBC,UAAUA;YAAUF,MAAMA;;IACtD;;AAGJ,IAAMC,kBAGD;QAAED,aAAAA,MAAME,iBAAAA;IACT,IAAMK,UAAUP,KAAKG,IAAIK;IACzB,IAAMC,UAAU,SAACC;QACbA,EAAEC;QACFT,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWQ;QACXH;IACJ;IACA,OAAOP,KAAKG,IAAIS,+BACZ,qBAACC;QAAWJ,SAASA;QAASK,SAAQ;QAASC,QAAO;kBACjDf,KAAKG,IAAIC,gCAAkB,qBAACY,2DAAyB,qBAACC;SAE3D;AACR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {createContext, useContext} from 'react';\n\nimport {TableContextType} from './Table.types';\n\nexport const TableContext = createContext<TableContextType<any> | null>(null);\n\nexport const useTable = <T,>(): TableContextType<T> => {\n const ctx = useContext(TableContext);\n if (ctx === null) {\n throw new Error('useTable must be used inside of a TableContext.Provider');\n }\n\n return ctx;\n};\n"],"names":["TableContext","useTable","createContext","ctx","useContext","Error"],"mappings":";;;;;;;;;;;IAIaA,YAAY;eAAZA;;IAEAC,QAAQ;eAARA;;;qBAN2B;AAIjC,IAAMD,6BAAeE,IAAAA,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {createContext, useContext} from 'react';\n\nimport {TableContextType} from './Table.types';\n\nexport const TableContext = createContext<TableContextType<any> | null>(null);\n\nexport const useTable = <T,>(): TableContextType<T> => {\n const ctx = useContext(TableContext);\n if (ctx === null) {\n throw new Error('useTable must be used inside of a TableContext.Provider');\n }\n\n return ctx;\n};\n"],"names":["TableContext","useTable","createContext","ctx","useContext","Error"],"mappings":";;;;;;;;;;;IAIaA,YAAY;eAAZA;;IAEAC,QAAQ;eAARA;;;qBAN2B;AAIjC,IAAMD,6BAAeE,IAAAA,sBAA4C;AAEjE,IAAMD,WAAW;IACpB,IAAME,MAAMC,IAAAA,mBAAWJ;IACvB,IAAIG,QAAQ,MAAM;QACd,MAAM,IAAIE,MAAM;IACpB;IAEA,OAAOF;AACX"}
|
|
@@ -1,6 +1,17 @@
|
|
|
1
|
+
import { DefaultProps, Selectors } from '@mantine/core';
|
|
1
2
|
import { FunctionComponent } from 'react';
|
|
2
3
|
import { DateRangePickerInlineCalendarProps, DateRangePickerPreset } from '../date-range-picker';
|
|
3
|
-
|
|
4
|
+
declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
|
|
5
|
+
classes: {
|
|
6
|
+
root: string;
|
|
7
|
+
wrapper: string;
|
|
8
|
+
label: string;
|
|
9
|
+
};
|
|
10
|
+
cx: (...args: any) => string;
|
|
11
|
+
theme: import("@mantine/core").MantineTheme;
|
|
12
|
+
};
|
|
13
|
+
type TableDateRangePickerStylesNames = Selectors<typeof useStyles>;
|
|
14
|
+
interface TableDateRangePickerProps extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'>, DefaultProps<TableDateRangePickerStylesNames> {
|
|
4
15
|
/**
|
|
5
16
|
* An object containing date presets.
|
|
6
17
|
* If empty the preset dropdown won't be shown
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,YAAY,EAAwB,SAAS,EAAO,MAAM,eAAe,CAAC;AAGhG,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,OAAO,EAEH,kCAAkC,EAClC,qBAAqB,EAExB,MAAM,sBAAsB,CAAC;AAI9B,QAAA,MAAM,SAAS;;;;;;;;CAIZ,CAAC;AAEJ,KAAK,+BAA+B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AACnE,UAAU,yBACN,SAAQ,IAAI,CAAC,kCAAkC,EAAE,YAAY,GAAG,UAAU,GAAG,oBAAoB,CAAC,EAC9F,YAAY,CAAC,+BAA+B,CAAC;IACjD;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CAsD7E,CAAC"}
|
|
@@ -9,45 +9,71 @@ Object.defineProperty(exports, "TableDateRangePicker", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
12
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
13
|
+
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
14
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
12
15
|
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
13
16
|
var _jsxruntime = require("react/jsx-runtime");
|
|
14
17
|
var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
15
18
|
var _core = require("@mantine/core");
|
|
19
|
+
var _hooks = require("@mantine/hooks");
|
|
16
20
|
var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
|
|
17
|
-
var _react = require("react");
|
|
18
21
|
var _button = require("../button");
|
|
19
22
|
var _daterangepicker = require("../date-range-picker");
|
|
20
23
|
var _Tablestyles = require("./Table.styles");
|
|
21
24
|
var _TableContext = require("./TableContext");
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
26
|
+
return {
|
|
27
|
+
root: {},
|
|
28
|
+
wrapper: {},
|
|
29
|
+
label: {}
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
var TableDateRangePicker = function(_param) {
|
|
33
|
+
var _param_presets = _param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = _param.rangeCalendarProps, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties._(_param, [
|
|
34
|
+
"presets",
|
|
35
|
+
"rangeCalendarProps",
|
|
36
|
+
"classNames",
|
|
37
|
+
"styles",
|
|
38
|
+
"unstyled"
|
|
39
|
+
]);
|
|
40
|
+
var classes = useStyles(null, {
|
|
41
|
+
name: "TableDateRangePicker",
|
|
42
|
+
classNames: classNames,
|
|
43
|
+
styles: styles,
|
|
44
|
+
unstyled: unstyled
|
|
45
|
+
}).classes;
|
|
46
|
+
var _useToggle = _sliced_to_array._((0, _hooks.useToggle)(), 2), opened = _useToggle[0], toggleOpened = _useToggle[1];
|
|
25
47
|
var form = (0, _TableContext.useTable)().form;
|
|
26
48
|
var onApply = function(dates) {
|
|
27
49
|
form.setFieldValue("dateRange", dates);
|
|
28
|
-
|
|
50
|
+
toggleOpened(false);
|
|
29
51
|
};
|
|
30
52
|
var onCancel = function() {
|
|
31
|
-
|
|
53
|
+
toggleOpened(false);
|
|
32
54
|
};
|
|
33
55
|
var formatDate = function(date) {
|
|
34
56
|
return (0, _dayjs.default)(date).format("MMM DD, YYYY");
|
|
35
57
|
};
|
|
36
|
-
var
|
|
37
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
|
|
58
|
+
var formattedRange = "".concat(formatDate(form.values.dateRange[0]), " - ").concat(formatDate(form.values.dateRange[1]));
|
|
59
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
|
|
38
60
|
span: "content",
|
|
39
61
|
order: _Tablestyles.TableComponentsOrder.DateRangePicker,
|
|
40
62
|
py: "sm",
|
|
63
|
+
className: classes.root
|
|
64
|
+
}, others), {
|
|
41
65
|
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
|
|
42
66
|
spacing: "xs",
|
|
67
|
+
className: classes.wrapper,
|
|
43
68
|
children: [
|
|
44
69
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
|
|
45
70
|
span: true,
|
|
46
|
-
|
|
71
|
+
className: classes.label,
|
|
72
|
+
children: formattedRange
|
|
47
73
|
}),
|
|
48
74
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
|
|
49
75
|
opened: opened,
|
|
50
|
-
onChange:
|
|
76
|
+
onChange: toggleOpened,
|
|
51
77
|
withinPortal: true,
|
|
52
78
|
children: [
|
|
53
79
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
|
|
@@ -55,7 +81,7 @@ var TableDateRangePicker = function(param) {
|
|
|
55
81
|
variant: "outline",
|
|
56
82
|
color: "gray",
|
|
57
83
|
onClick: function() {
|
|
58
|
-
return
|
|
84
|
+
return toggleOpened();
|
|
59
85
|
},
|
|
60
86
|
px: "xs",
|
|
61
87
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CalendarSize24Px, {
|
|
@@ -78,7 +104,7 @@ var TableDateRangePicker = function(param) {
|
|
|
78
104
|
})
|
|
79
105
|
]
|
|
80
106
|
})
|
|
81
|
-
});
|
|
107
|
+
}));
|
|
82
108
|
};
|
|
83
109
|
|
|
84
110
|
//# sourceMappingURL=TableDateRangePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Grid, Group, Popover, Text} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Grid, Group, Popover, Selectors, Text} from '@mantine/core';\nimport {useToggle} from '@mantine/hooks';\nimport dayjs from 'dayjs';\nimport {FunctionComponent} from 'react';\n\nimport {Button} from '../button';\nimport {\n DateRangePickerInlineCalendar,\n DateRangePickerInlineCalendarProps,\n DateRangePickerPreset,\n DateRangePickerValue,\n} from '../date-range-picker';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n root: {},\n wrapper: {},\n label: {},\n}));\n\ntype TableDateRangePickerStylesNames = Selectors<typeof useStyles>;\ninterface TableDateRangePickerProps\n extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'>,\n DefaultProps<TableDateRangePickerStylesNames> {\n /**\n * An object containing date presets.\n * If empty the preset dropdown won't be shown\n *\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n * @default {}\n */\n presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n presets = {},\n rangeCalendarProps,\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableDateRangePicker', classNames, styles, unstyled});\n const [opened, toggleOpened] = useToggle();\n const {form} = useTable();\n\n const onApply = (dates: DateRangePickerValue) => {\n form.setFieldValue('dateRange', dates);\n toggleOpened(false);\n };\n const onCancel = () => {\n toggleOpened(false);\n };\n\n const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n return (\n <Grid.Col\n span=\"content\"\n order={TableComponentsOrder.DateRangePicker}\n py=\"sm\"\n className={classes.root}\n {...others}\n >\n <Group spacing=\"xs\" className={classes.wrapper}>\n <Text span className={classes.label}>\n {formattedRange}\n </Text>\n <Popover opened={opened} onChange={toggleOpened} withinPortal>\n <Popover.Target>\n <Button variant=\"outline\" color=\"gray\" onClick={() => toggleOpened()} px=\"xs\">\n <CalendarSize24Px width={24} height={24} />\n </Button>\n </Popover.Target>\n <Popover.Dropdown p={0}>\n <DateRangePickerInlineCalendar\n initialRange={form.values.dateRange}\n onApply={onApply}\n onCancel={onCancel}\n presets={presets}\n rangeCalendarProps={rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </Group>\n </Grid.Col>\n );\n};\n"],"names":["TableDateRangePicker","useStyles","createStyles","theme","root","wrapper","label","presets","rangeCalendarProps","classNames","styles","unstyled","others","classes","name","useToggle","opened","toggleOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formattedRange","values","dateRange","Grid","Col","span","order","TableComponentsOrder","DateRangePicker","py","className","Group","spacing","Text","Popover","onChange","withinPortal","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;;;gCAxCkB;oBACiD;qBACxD;8DACN;sBAGG;+BAMd;2BAC4B;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;IACZ;;AAoBO,IAAMN,uBAAqE;gCAC9EO,SAAAA,sCAAU,CAAC,oBACXC,4BAAAA,oBACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWZ,UAAU,MAAM;QAACa,MAAM;QAAwBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAtFE;IACP,IAA+BE,gCAAAA,IAAAA,yBAAxBC,SAAwBD,eAAhBE,eAAgBF;IAC/B,IAAM,AAACG,OAAQC,IAAAA,0BAARD;IAEP,IAAME,UAAU,SAACC;QACbH,KAAKI,cAAc,aAAaD;QAChCJ,aAAa;IACjB;IACA,IAAMM,WAAW;QACbN,aAAa;IACjB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,gBAAMD,MAAME,OAAO;;IACtD,IAAMC,iBAAiB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,OAAOC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,OAAOC,SAAS,CAAC,EAAE;IAEvG,qBACI,qBAACC,WAAKC;QACFC,MAAK;QACLC,OAAOC,kCAAqBC;QAC5BC,IAAG;QACHC,WAAWzB,QAAQT;OACfQ;kBAEJ,cAAA,sBAAC2B;YAAMC,SAAQ;YAAKF,WAAWzB,QAAQR;;8BACnC,qBAACoC;oBAAKR,IAAI;oBAACK,WAAWzB,QAAQP;8BACzBsB;;8BAEL,sBAACc;oBAAQ1B,QAAQA;oBAAQ2B,UAAU1B;oBAAc2B,YAAY;;sCACzD,qBAACF,cAAQG;sCACL,cAAA,qBAACC;gCAAOC,SAAQ;gCAAUC,OAAM;gCAAOC,SAAS;2CAAMhC;;gCAAgBiC,IAAG;0CACrE,cAAA,qBAACC;oCAAiBC,OAAO;oCAAIC,QAAQ;;;;sCAG7C,qBAACX,cAAQY;4BAASC,GAAG;sCACjB,cAAA,qBAACC;gCACGC,cAAcvC,KAAKW,OAAOC;gCAC1BV,SAASA;gCACTG,UAAUA;gCACVhB,SAASA;gCACTC,oBAAoBA;;;;;;;;AAOhD"}
|
|
@@ -2,6 +2,7 @@ import { DefaultProps, Selectors } from '@mantine/core';
|
|
|
2
2
|
import { FunctionComponent } from 'react';
|
|
3
3
|
declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
|
|
4
4
|
classes: {
|
|
5
|
+
root: string;
|
|
5
6
|
wrapper: string;
|
|
6
7
|
empty: string;
|
|
7
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAQ,SAAS,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAK/E,QAAA,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAQ,SAAS,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAK/E,QAAA,MAAM,SAAS;;;;;;;;CAQZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkD3D,CAAC"}
|
|
@@ -18,6 +18,7 @@ var _Tablestyles = require("./Table.styles");
|
|
|
18
18
|
var _TableContext = require("./TableContext");
|
|
19
19
|
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
20
20
|
return {
|
|
21
|
+
root: {},
|
|
21
22
|
wrapper: {
|
|
22
23
|
marginBottom: "0 !important"
|
|
23
24
|
},
|
|
@@ -34,7 +35,7 @@ var TableFilter = function(_param) {
|
|
|
34
35
|
"unstyled"
|
|
35
36
|
]);
|
|
36
37
|
var classes = useStyles(null, {
|
|
37
|
-
name: "
|
|
38
|
+
name: "TableFilter",
|
|
38
39
|
classNames: classNames,
|
|
39
40
|
styles: styles,
|
|
40
41
|
unstyled: unstyled
|
|
@@ -62,6 +63,7 @@ var TableFilter = function(_param) {
|
|
|
62
63
|
span: "content",
|
|
63
64
|
order: _Tablestyles.TableComponentsOrder.Filter,
|
|
64
65
|
py: "sm",
|
|
66
|
+
className: classes.root,
|
|
65
67
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, _object_spread._({
|
|
66
68
|
className: classes.wrapper,
|
|
67
69
|
placeholder: placeholder,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n root: {},\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const changeFilterValue = (value: string) => {\n setState((prevState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n changeFilterValue(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n changeFilterValue('');\n };\n\n return (\n <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={\n state.globalFilter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={14} className={classes.empty} />\n )\n }\n value={state.globalFilter}\n onChange={handleChange}\n {...others}\n />\n </Grid.Col>\n );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","root","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","Grid","Col","span","order","TableComponentsOrder","Filter","py","className","TextInput","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;gCA3B+B;oBACqC;2BAG9C;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOL,MAAMM,OAAOC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMV,cAAmD;oCAC5DW,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWf,UAAU,MAAM;QAACgB,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,YAAAA,IAAAA,2BAAnBC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,oBAAoB,SAACC;QACvBF,SAAS,SAACG;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,aAChB;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,WAAWE;gBAAQ,IACtDH,UAAUC;gBAChBG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC;QACxD,IAAM,AAACP,QAASO,MAAMC,cAAfR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD;QACtDV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,WAAKC;QAAIC,MAAK;QAAUC,OAAOC,kCAAqBC;QAAQC,IAAG;QAAKC,WAAWvB,QAAQZ;kBACpF,cAAA,qBAACoC;YACGD,WAAWvB,QAAQX;YACnBM,aAAaA;YACb8B,IAAG;YACHC,cACIvB,MAAMQ,6BACF,qBAACgB;gBAAWC,SAASb;0BACjB,cAAA,qBAACc;oBAAcC,QAAQ;;+BAG3B,qBAACC;gBAAeD,QAAQ;gBAAIP,WAAWvB,QAAQT;;YAGvDe,OAAOH,MAAMQ;YACbqB,UAAUpB;WACNb;;AAIpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import {Group, DefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\ninterface TableFooterProps extends DefaultProps {\n children?: ReactNode;\n}\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (\n <Group position=\"apart\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n);\n"],"names":["TableFooter","children","others","Group","position","px","py"],"mappings":";;;;+BAMaA;;;eAAAA;;;;;;;oBANqB;AAM3B,IAAMA,cAAmD
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import {Group, DefaultProps} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\ninterface TableFooterProps extends DefaultProps {\n children?: ReactNode;\n}\nexport const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (\n <Group position=\"apart\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n);\n"],"names":["TableFooter","children","others","Group","position","px","py"],"mappings":";;;;+BAMaA;;;eAAAA;;;;;;;oBANqB;AAM3B,IAAMA,cAAmD;QAAEC,kBAAAA,UAAaC;QAAbD;;WAC9D,qBAACE;QAAMC,UAAS;QAAQC,IAAG;QAAKC,IAAG;OAASJ;kBACvCD;;AACE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,YAAY,EAAQ,SAAS,EAAU,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,YAAY,EAAQ,SAAS,EAAU,MAAM,eAAe,CAAC;AACnF,OAAO,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAOnD,QAAA,MAAM,SAAS;;;;;;;CAUZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IAEnE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AACD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA8C3D,CAAC"}
|
|
@@ -17,6 +17,7 @@ var _core = require("@mantine/core");
|
|
|
17
17
|
var _button = require("../button");
|
|
18
18
|
var _Tablestyles = require("./Table.styles");
|
|
19
19
|
var _TableContext = require("./TableContext");
|
|
20
|
+
var _TableLayoutControl = require("./TableLayoutControl");
|
|
20
21
|
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
21
22
|
return {
|
|
22
23
|
root: {
|
|
@@ -37,7 +38,7 @@ var TableHeader = function(_param) {
|
|
|
37
38
|
"unstyled",
|
|
38
39
|
"children"
|
|
39
40
|
]);
|
|
40
|
-
var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection;
|
|
41
|
+
var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection, disableRowSelection = _useTable.disableRowSelection;
|
|
41
42
|
var classes = useStyles(null, {
|
|
42
43
|
name: "TableHeader",
|
|
43
44
|
classNames: classNames,
|
|
@@ -66,6 +67,7 @@ var TableHeader = function(_param) {
|
|
|
66
67
|
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_button.Button, {
|
|
67
68
|
onClick: clearSelection,
|
|
68
69
|
variant: "subtle",
|
|
70
|
+
disabled: disableRowSelection,
|
|
69
71
|
leftIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
|
|
70
72
|
height: 16
|
|
71
73
|
}),
|
|
@@ -76,7 +78,8 @@ var TableHeader = function(_param) {
|
|
|
76
78
|
})
|
|
77
79
|
})
|
|
78
80
|
}) : null,
|
|
79
|
-
children
|
|
81
|
+
children,
|
|
82
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLayoutControl.TableLayoutControl, {})
|
|
80
83
|
]
|
|
81
84
|
}));
|
|
82
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Grid, Selectors, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n flexDirection: 'row-reverse',\n flexWrap: 'wrap-reverse',\n background: `repeating-linear-gradient(${theme.colors.gray[1]}, ${theme.colors.gray[1]} 68px, ${theme.colors.gray[3]} 68px, ${theme.colors.gray[3]} 69px)`,\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n },\n multiSelectInfo: {\n justifySelf: 'flex-start',\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const selectedRows = getSelectedRows();\n return (\n <Grid\n justify=\"flex-start\"\n align=\"center\"\n gutter=\"sm\"\n p={0}\n pl=\"md\"\n pr=\"lg\"\n m={0}\n className={classes.root}\n {...others}\n >\n {multiRowSelectionEnabled && selectedRows.length > 0 ? (\n <Grid.Col\n span=\"auto\"\n py=\"sm\"\n className={classes.multiSelectInfo}\n order={TableComponentsOrder.MultiSelectInfo}\n >\n <Tooltip label=\"Unselect all\">\n <Button
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Grid, Selectors, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\nimport {TableLayoutControl} from './TableLayoutControl';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n flexDirection: 'row-reverse',\n flexWrap: 'wrap-reverse',\n background: `repeating-linear-gradient(${theme.colors.gray[1]}, ${theme.colors.gray[1]} 68px, ${theme.colors.gray[3]} 68px, ${theme.colors.gray[3]} 69px)`,\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n },\n multiSelectInfo: {\n justifySelf: 'flex-start',\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const selectedRows = getSelectedRows();\n\n return (\n <Grid\n justify=\"flex-start\"\n align=\"center\"\n gutter=\"sm\"\n p={0}\n pl=\"md\"\n pr=\"lg\"\n m={0}\n className={classes.root}\n {...others}\n >\n {multiRowSelectionEnabled && selectedRows.length > 0 ? (\n <Grid.Col\n span=\"auto\"\n py=\"sm\"\n className={classes.multiSelectInfo}\n order={TableComponentsOrder.MultiSelectInfo}\n >\n <Tooltip label=\"Unselect all\">\n <Button\n onClick={clearSelection}\n variant=\"subtle\"\n disabled={disableRowSelection}\n leftIcon={<CrossSize16Px height={16} />}\n >\n {selectedRows.length} selected\n </Button>\n </Tooltip>\n </Grid.Col>\n ) : null}\n {children}\n <TableLayoutControl />\n </Grid>\n );\n};\n"],"names":["TableHeader","useStyles","createStyles","theme","root","flexDirection","flexWrap","background","colors","gray","borderBottom","multiSelectInfo","justifySelf","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","disableRowSelection","classes","name","selectedRows","Grid","justify","align","gutter","p","pl","pr","m","className","length","Col","span","py","order","TableComponentsOrder","MultiSelectInfo","Tooltip","label","Button","onClick","variant","disabled","leftIcon","CrossSize16Px","height","TableLayoutControl"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;gCA1Be;oBACuC;sBAG9C;2BACc;4BACZ;kCACU;AAEjC,IAAMC,YAAYC,IAAAA,oBAAa,SAACC;WAAW;QACvCC,MAAM;YACFC,eAAe;YACfC,UAAU;YACVC,YAAY,AAAC,6BAAqDJ,OAAzBA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,MAAkCN,OAA9BA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,WAAuCN,OAA9BA,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC,WAA8B,OAArBN,MAAMK,OAAOC,IAAI,CAAC,EAAE,EAAC;YACnJC,cAAc,AAAC,aAAiC,OAArBP,MAAMK,OAAOC,IAAI,CAAC,EAAE;QACnD;QACAE,iBAAiB;YACbC,aAAa;QACjB;IACJ;;AAOO,IAAMZ,cAAmD;QAC5Da,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAyFE,YAAAA,IAAAA,2BAAlFC,kBAAkFD,UAAlFC,iBAAiBC,2BAAiEF,UAAjEE,0BAA0BC,iBAAuCH,UAAvCG,gBAAgBC,sBAAuBJ,UAAvBI;IAClE,IAAM,AAACC,UAAWtB,UAAU,MAAM;QAACuB,MAAM;QAAeX,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EQ;IACP,IAAME,eAAeN;IAErB,qBACI,sBAACO;QACGC,SAAQ;QACRC,OAAM;QACNC,QAAO;QACPC,GAAG;QACHC,IAAG;QACHC,IAAG;QACHC,GAAG;QACHC,WAAWX,QAAQnB;OACfa;;YAEHG,4BAA4BK,aAAaU,SAAS,kBAC/C,qBAACT,WAAKU;gBACFC,MAAK;gBACLC,IAAG;gBACHJ,WAAWX,QAAQZ;gBACnB4B,OAAOC,kCAAqBC;0BAE5B,cAAA,qBAACC;oBAAQC,OAAM;8BACX,cAAA,sBAACC;wBACGC,SAASxB;wBACTyB,SAAQ;wBACRC,UAAUzB;wBACV0B,wBAAU,qBAACC;4BAAcC,QAAQ;;;4BAEhCzB,aAAaU;4BAAO;;;;iBAIjC;YACHnB;0BACD,qBAACmC;;;AAGb"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableLayoutControl.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableLayoutControl.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}
|