@coveord/plasma-mantine 55.3.3 → 55.4.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 +48 -45
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.d.ts.map +1 -1
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js +21 -3
- package/dist/cjs/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/cjs/components/table/use-table.d.ts +10 -4
- package/dist/cjs/components/table/use-table.d.ts.map +1 -1
- package/dist/cjs/components/table/use-table.js +184 -12
- package/dist/cjs/components/table/use-table.js.map +1 -1
- package/dist/cjs/components/table/use-url-synced-state.d.ts +29 -0
- package/dist/cjs/components/table/use-url-synced-state.d.ts.map +1 -0
- package/dist/cjs/components/table/use-url-synced-state.js +58 -0
- package/dist/cjs/components/table/use-url-synced-state.js.map +1 -0
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.d.ts.map +1 -1
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js +15 -2
- package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map +1 -1
- package/dist/esm/components/table/use-table.d.ts +10 -4
- package/dist/esm/components/table/use-table.d.ts.map +1 -1
- package/dist/esm/components/table/use-table.js +127 -8
- package/dist/esm/components/table/use-table.js.map +1 -1
- package/dist/esm/components/table/use-url-synced-state.d.ts +29 -0
- package/dist/esm/components/table/use-url-synced-state.d.ts.map +1 -0
- package/dist/esm/components/table/use-url-synced-state.js +41 -0
- package/dist/esm/components/table/use-url-synced-state.js.map +1 -0
- package/package.json +8 -8
- package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx +15 -1
- package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx +6 -4
- package/src/components/table/__tests__/TableColumnsSelector.spec.tsx +51 -0
- package/src/components/table/__tests__/TableDateRangePicker.spec.tsx +53 -1
- package/src/components/table/__tests__/TableFilter.spec.tsx +43 -0
- package/src/components/table/__tests__/TablePagination.spec.tsx +54 -0
- package/src/components/table/__tests__/TablePerPage.spec.tsx +55 -0
- package/src/components/table/__tests__/TablePredicate.spec.tsx +69 -0
- package/src/components/table/__tests__/Th.spec.tsx +35 -0
- package/src/components/table/__tests__/use-url-synced-state.unit.spec.ts +113 -0
- package/src/components/table/use-table.ts +120 -15
- package/src/components/table/use-url-synced-state.ts +70 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAM/D,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAC9D,MAAM,WAAW,kCACb,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IACrE;;OAEG;IACH,YAAY,EAAE,oBAAoB,CAAC;IACnC;;;;OAIG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAOD,eAAO,MAAM,6BAA6B,4FAQvC,kCAAkC,4CAoEpC,CAAC"}
|
|
@@ -15,10 +15,17 @@ var _jsxruntime = require("react/jsx-runtime");
|
|
|
15
15
|
var _core = require("@mantine/core");
|
|
16
16
|
var _dates = require("@mantine/dates");
|
|
17
17
|
var _form = require("@mantine/form");
|
|
18
|
+
var _dayjs = /*#__PURE__*/ _interop_require_default._(require("dayjs"));
|
|
18
19
|
var _button = require("../button");
|
|
19
20
|
var _DateRangemodulecss = /*#__PURE__*/ _interop_require_default._(require("./DateRange.module.css"));
|
|
20
21
|
var _DateRangePickerPresetSelect = require("./DateRangePickerPresetSelect");
|
|
21
22
|
var _EditableDateRangePicker = require("./EditableDateRangePicker");
|
|
23
|
+
var isDateRangePickerValue = function(value) {
|
|
24
|
+
return Array.isArray(value) && value.length === 2;
|
|
25
|
+
};
|
|
26
|
+
var endOfDay = function(value) {
|
|
27
|
+
return value ? (0, _dayjs.default)(value).endOf('day').toDate() : value;
|
|
28
|
+
};
|
|
22
29
|
var DateRangePickerInlineCalendar = function(param) {
|
|
23
30
|
var initialRange = param.initialRange, onApply = param.onApply, onCancel = param.onCancel, presets = param.presets, startProps = param.startProps, endProps = param.endProps, rangeCalendarProps = param.rangeCalendarProps;
|
|
24
31
|
var form = (0, _form.useForm)({
|
|
@@ -27,9 +34,18 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
27
34
|
}
|
|
28
35
|
});
|
|
29
36
|
var calendarInputProps = form.getInputProps('dates');
|
|
37
|
+
var onCalendarChange = function(range) {
|
|
38
|
+
var normalized = isDateRangePickerValue(range) && range[1] ? [
|
|
39
|
+
range[0],
|
|
40
|
+
endOfDay(range[1])
|
|
41
|
+
] : range;
|
|
42
|
+
calendarInputProps.onChange(normalized);
|
|
43
|
+
};
|
|
30
44
|
var onCalendarApply = function() {
|
|
45
|
+
// In case the user only clicked the start date, but not the end date,
|
|
46
|
+
// assume a single day was meant to be selected.
|
|
31
47
|
if (!form.values.dates[1]) {
|
|
32
|
-
form.values.dates[1] = form.values.dates[0];
|
|
48
|
+
form.values.dates[1] = endOfDay(form.values.dates[0]);
|
|
33
49
|
}
|
|
34
50
|
onApply(form.values.dates);
|
|
35
51
|
};
|
|
@@ -71,7 +87,7 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
71
87
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
|
|
72
88
|
py: "sm",
|
|
73
89
|
px: "md",
|
|
74
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DatePicker, _object_spread._({
|
|
90
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dates.DatePicker, _object_spread_props._(_object_spread._({
|
|
75
91
|
numberOfColumns: 2,
|
|
76
92
|
columnsToScroll: 1,
|
|
77
93
|
type: "range",
|
|
@@ -82,7 +98,9 @@ var DateRangePickerInlineCalendar = function(param) {
|
|
|
82
98
|
},
|
|
83
99
|
firstDayOfWeek: 0,
|
|
84
100
|
allowSingleDateInRange: true
|
|
85
|
-
}, rangeCalendarProps, calendarInputProps)
|
|
101
|
+
}, rangeCalendarProps, calendarInputProps), {
|
|
102
|
+
onChange: onCalendarChange
|
|
103
|
+
}))
|
|
86
104
|
}),
|
|
87
105
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
|
|
88
106
|
justify: "right",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n /**\n * Initial selected range\n */\n initialRange: DateRangePickerValue;\n /**\n * Function called when the user applies the new date range\n *\n * @param range the newly selected dates\n */\n onApply: (range: DateRangePickerValue) => void;\n /**\n * Function called when the user click on the cancel button\n */\n onCancel: () => void;\n /**\n * The presets to display\n *\n * @default {}\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 */\n presets?: Record<string, DateRangePickerPreset>;\n /**\n * Props for RangeCalendar displayed in the popover\n */\n rangeCalendarProps?: Omit<\n DatePickerBaseProps,\n 'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n >;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n initialRange,\n onApply,\n onCancel,\n presets,\n startProps,\n endProps,\n rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n const form = useForm({\n initialValues: {\n dates: initialRange,\n },\n });\n const calendarInputProps = form.getInputProps('dates');\n\n const onCalendarApply = () => {\n if (!form.values.dates[1]) {\n form.values.dates[1] = form.values.dates[0]
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport dayjs from 'dayjs';\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n /**\n * Initial selected range\n */\n initialRange: DateRangePickerValue;\n /**\n * Function called when the user applies the new date range\n *\n * @param range the newly selected dates\n */\n onApply: (range: DateRangePickerValue) => void;\n /**\n * Function called when the user click on the cancel button\n */\n onCancel: () => void;\n /**\n * The presets to display\n *\n * @default {}\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 */\n presets?: Record<string, DateRangePickerPreset>;\n /**\n * Props for RangeCalendar displayed in the popover\n */\n rangeCalendarProps?: Omit<\n DatePickerBaseProps,\n 'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n >;\n}\n\nconst isDateRangePickerValue = (value: unknown): value is DateRangePickerValue =>\n Array.isArray(value) && value.length === 2;\n\nconst endOfDay = (value: Date): Date => (value ? dayjs(value).endOf('day').toDate() : value);\n\nexport const DateRangePickerInlineCalendar = ({\n initialRange,\n onApply,\n onCancel,\n presets,\n startProps,\n endProps,\n rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n const form = useForm({\n initialValues: {\n dates: initialRange,\n },\n });\n const calendarInputProps = form.getInputProps('dates');\n\n const onCalendarChange = (range: Date | Date[] | DateRangePickerValue): void => {\n const normalized = isDateRangePickerValue(range) && range[1] ? [range[0], endOfDay(range[1])] : range;\n calendarInputProps.onChange(normalized);\n };\n\n const onCalendarApply = () => {\n // In case the user only clicked the start date, but not the end date,\n // assume a single day was meant to be selected.\n if (!form.values.dates[1]) {\n form.values.dates[1] = endOfDay(form.values.dates[0]);\n }\n onApply(form.values.dates);\n };\n\n return (\n <>\n <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n <EditableDateRangePicker\n value={calendarInputProps.value}\n {...calendarInputProps}\n startProps={startProps}\n endProps={endProps}\n />\n {presets ? (\n <>\n <Space w=\"sm\" />\n <DateRangePickerPresetSelect\n value={calendarInputProps.value}\n presets={presets}\n {...calendarInputProps}\n selectProps={{comboboxProps: {withinPortal: false}}}\n />\n </>\n ) : null}\n </Group>\n\n <Center py=\"sm\" px=\"md\">\n <DatePicker\n numberOfColumns={2}\n columnsToScroll={1}\n type=\"range\"\n styles={{day: {textAlign: 'center'}}}\n firstDayOfWeek={0}\n allowSingleDateInRange\n {...rangeCalendarProps}\n {...calendarInputProps}\n onChange={onCalendarChange}\n />\n </Center>\n\n <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n Cancel\n </Button>\n <Button size=\"xs\" onClick={onCalendarApply}>\n Apply\n </Button>\n </Group>\n </>\n );\n};\n"],"names":["DateRangePickerInlineCalendar","isDateRangePickerValue","value","Array","isArray","length","endOfDay","dayjs","endOf","toDate","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","useForm","initialValues","dates","calendarInputProps","getInputProps","onCalendarChange","range","normalized","onChange","onCalendarApply","values","Group","align","gap","grow","px","py","className","DateRangeClasses","picker","EditableDateRangePicker","Space","w","DateRangePickerPresetSelect","selectProps","comboboxProps","withinPortal","Center","DatePicker","numberOfColumns","columnsToScroll","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","Button","variant","size","onClick"],"mappings":";;;;+BAoDaA;;;eAAAA;;;;;;;oBApDsB;qBACW;oBACxB;8DAEJ;sBACG;2EACQ;2CACoC;uCACG;AAuCpE,IAAMC,yBAAyB,SAACC;WAC5BC,MAAMC,OAAO,CAACF,UAAUA,MAAMG,MAAM,KAAK;;AAE7C,IAAMC,WAAW,SAACJ;WAAuBA,QAAQK,IAAAA,cAAK,EAACL,OAAOM,KAAK,CAAC,OAAOC,MAAM,KAAKP;;AAE/E,IAAMF,gCAAgC;QACzCU,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOC,IAAAA,aAAO,EAAC;QACjBC,eAAe;YACXC,OAAOV;QACX;IACJ;IACA,IAAMW,qBAAqBJ,KAAKK,aAAa,CAAC;IAE9C,IAAMC,mBAAmB,SAACC;QACtB,IAAMC,aAAaxB,uBAAuBuB,UAAUA,KAAK,CAAC,EAAE,GAAG;YAACA,KAAK,CAAC,EAAE;YAAElB,SAASkB,KAAK,CAAC,EAAE;SAAE,GAAGA;QAChGH,mBAAmBK,QAAQ,CAACD;IAChC;IAEA,IAAME,kBAAkB;QACpB,sEAAsE;QACtE,gDAAgD;QAChD,IAAI,CAACV,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE,EAAE;YACvBH,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE,GAAGd,SAASW,KAAKW,MAAM,CAACR,KAAK,CAAC,EAAE;QACxD;QACAT,QAAQM,KAAKW,MAAM,CAACR,KAAK;IAC7B;IAEA,qBACI;;0BACI,sBAACS,WAAK;gBAACC,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACC,MAAM;;kCAClF,qBAACC,gDAAuB;wBACpBpC,OAAOmB,mBAAmBnB,KAAK;uBAC3BmB;wBACJP,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,qBAAC0B,WAAK;gCAACC,GAAE;;0CACT,qBAACC,wDAA2B;gCACxBvC,OAAOmB,mBAAmBnB,KAAK;gCAC/BW,SAASA;+BACLQ;gCACJqB,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,qBAACC,YAAM;gBAACX,IAAG;gBAAKD,IAAG;0BACf,cAAA,qBAACa,iBAAU;oBACPC,iBAAiB;oBACjBC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;mBAClBtC,oBACAK;oBACJK,UAAUH;;;0BAIlB,sBAACM,WAAK;gBAAC0B,SAAQ;gBAAQxB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWC,2BAAgB,CAACoB,IAAI;;kCAC5E,qBAACC,cAAM;wBAACC,SAAQ;wBAAUC,MAAK;wBAAKC,SAAShD;kCAAU;;kCAGvD,qBAAC6C,cAAM;wBAACE,MAAK;wBAAKC,SAASjC;kCAAiB;;;;;;AAM5D"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type ExpandedState, type PaginationState, type SortingState } from '@tanstack/table-core';
|
|
2
2
|
import { Dispatch, SetStateAction } from 'react';
|
|
3
3
|
import { type DateRangePickerValue } from '../date-range-picker';
|
|
4
|
-
type
|
|
5
|
-
[P in keyof T]?:
|
|
6
|
-
}
|
|
4
|
+
type DeepPartial<T> = {
|
|
5
|
+
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
6
|
+
};
|
|
7
7
|
export interface TableState<TData = unknown> {
|
|
8
8
|
/**
|
|
9
9
|
* Current pagination state
|
|
@@ -156,7 +156,7 @@ export interface UseTableOptions<TData = unknown> {
|
|
|
156
156
|
/**
|
|
157
157
|
* Initial state of the table.
|
|
158
158
|
*/
|
|
159
|
-
initialState?:
|
|
159
|
+
initialState?: DeepPartial<TableState<TData>>;
|
|
160
160
|
/**
|
|
161
161
|
* Whether rows can be selected.
|
|
162
162
|
*
|
|
@@ -176,6 +176,12 @@ export interface UseTableOptions<TData = unknown> {
|
|
|
176
176
|
* @default false
|
|
177
177
|
*/
|
|
178
178
|
forceSelection?: boolean;
|
|
179
|
+
/**
|
|
180
|
+
* Whether to sync the table state with the URL.
|
|
181
|
+
*
|
|
182
|
+
* @default false
|
|
183
|
+
*/
|
|
184
|
+
syncWithUrl?: boolean;
|
|
179
185
|
}
|
|
180
186
|
export declare const useTable: <TData>(userOptions?: UseTableOptions<TData>) => TableStore<TData>;
|
|
181
187
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-table.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEjG,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAiC,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAC,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-table.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEjG,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAiC,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAC,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAI/D,KAAK,WAAW,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAClE,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,KAAK,GAAG,OAAO;IACvC;;;;OAIG;IACH,UAAU,EAAE,eAAe,CAAC;IAC5B;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;;;OAIG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,QAAQ,EAAE,aAAa,CAAC;IACxB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;OAIG;IACH,SAAS,EAAE,oBAAoB,CAAC;IAChC;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpC;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU,CAAC,KAAK,GAAG,OAAO;IACvC;;OAEG;IACH,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACzB;;OAEG;IACH,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACzE;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnE;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrE;;OAEG;IACH,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACzE;;OAEG;IACH,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACjE;;OAEG;IACH,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACvE;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,eAAe,EAAE,MAAM,KAAK,EAAE,CAAC;IAC/B;;OAEG;IACH,cAAc,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IACnC;;OAEG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe,CAAC,KAAK,GAAG,OAAO;IAC5C;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAwBD,eAAO,MAAM,QAAQ,GAAI,KAAK,gBAAe,eAAe,CAAC,KAAK,CAAC,KAAQ,UAAU,CAAC,KAAK,CAgN1F,CAAC"}
|
|
@@ -14,10 +14,12 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
|
14
14
|
var _hooks = require("@mantine/hooks");
|
|
15
15
|
var _lodashdefaultsdeep = /*#__PURE__*/ _interop_require_default._(require("lodash.defaultsdeep"));
|
|
16
16
|
var _react = require("react");
|
|
17
|
+
var _useurlsyncedstate = require("./use-url-synced-state");
|
|
17
18
|
var defaultOptions = {
|
|
18
19
|
enableRowSelection: true,
|
|
19
20
|
enableMultiRowSelection: false,
|
|
20
|
-
forceSelection: false
|
|
21
|
+
forceSelection: false,
|
|
22
|
+
syncWithUrl: false
|
|
21
23
|
};
|
|
22
24
|
var defaultState = {
|
|
23
25
|
pagination: {
|
|
@@ -40,17 +42,187 @@ var useTable = function() {
|
|
|
40
42
|
var userOptions = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
41
43
|
var options = (0, _lodashdefaultsdeep.default)({}, userOptions, defaultOptions);
|
|
42
44
|
var initialState = (0, _lodashdefaultsdeep.default)({}, options.initialState, defaultState);
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
45
|
+
// synced with url
|
|
46
|
+
var _useUrlSyncedState = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)({
|
|
47
|
+
initialState: initialState.pagination,
|
|
48
|
+
serializer: function(param) {
|
|
49
|
+
var pageIndex = param.pageIndex, pageSize = param.pageSize;
|
|
50
|
+
return [
|
|
51
|
+
[
|
|
52
|
+
'page',
|
|
53
|
+
(pageIndex + 1).toString()
|
|
54
|
+
],
|
|
55
|
+
[
|
|
56
|
+
'pageSize',
|
|
57
|
+
pageSize.toString()
|
|
58
|
+
]
|
|
59
|
+
];
|
|
60
|
+
},
|
|
61
|
+
deserializer: function(params) {
|
|
62
|
+
return (0, _lodashdefaultsdeep.default)({
|
|
63
|
+
pageIndex: params.get('page') ? parseInt(params.get('page'), 10) - 1 : undefined,
|
|
64
|
+
pageSize: params.get('pageSize') ? parseInt(params.get('pageSize'), 10) : undefined
|
|
65
|
+
}, initialState.pagination);
|
|
66
|
+
},
|
|
67
|
+
sync: options.syncWithUrl
|
|
68
|
+
}), 2), pagination = _useUrlSyncedState[0], setPagination = _useUrlSyncedState[1];
|
|
69
|
+
var _useUrlSyncedState1 = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)({
|
|
70
|
+
initialState: initialState.sorting,
|
|
71
|
+
serializer: function(_sorting) {
|
|
72
|
+
return [
|
|
73
|
+
[
|
|
74
|
+
'sortBy',
|
|
75
|
+
_sorting.map(function(param) {
|
|
76
|
+
var id = param.id, desc = param.desc;
|
|
77
|
+
return "".concat(id, ".").concat(desc ? 'desc' : 'asc');
|
|
78
|
+
}).join(',')
|
|
79
|
+
]
|
|
80
|
+
];
|
|
81
|
+
},
|
|
82
|
+
deserializer: function(params) {
|
|
83
|
+
var _params_get;
|
|
84
|
+
if (!params.has('sortBy')) {
|
|
85
|
+
return initialState.sorting;
|
|
86
|
+
}
|
|
87
|
+
var _params_get_split;
|
|
88
|
+
var sorts = (_params_get_split = (_params_get = params.get('sortBy')) === null || _params_get === void 0 ? void 0 : _params_get.split(',')) !== null && _params_get_split !== void 0 ? _params_get_split : [];
|
|
89
|
+
return sorts.map(function(sort) {
|
|
90
|
+
var _sort_split = _sliced_to_array._(sort.split('.'), 2), id = _sort_split[0], order = _sort_split[1];
|
|
91
|
+
return {
|
|
92
|
+
id: id,
|
|
93
|
+
desc: order === 'desc'
|
|
94
|
+
};
|
|
95
|
+
});
|
|
96
|
+
},
|
|
97
|
+
sync: options.syncWithUrl
|
|
98
|
+
}), 2), sorting = _useUrlSyncedState1[0], setSorting = _useUrlSyncedState1[1];
|
|
99
|
+
var _useUrlSyncedState2 = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)({
|
|
100
|
+
initialState: initialState.globalFilter,
|
|
101
|
+
serializer: function(filter) {
|
|
102
|
+
return [
|
|
103
|
+
[
|
|
104
|
+
'filter',
|
|
105
|
+
filter
|
|
106
|
+
]
|
|
107
|
+
];
|
|
108
|
+
},
|
|
109
|
+
deserializer: function(params) {
|
|
110
|
+
var _params_get;
|
|
111
|
+
return (_params_get = params.get('filter')) !== null && _params_get !== void 0 ? _params_get : initialState.globalFilter;
|
|
112
|
+
},
|
|
113
|
+
sync: options.syncWithUrl
|
|
114
|
+
}), 2), globalFilter = _useUrlSyncedState2[0], setGlobalFilter = _useUrlSyncedState2[1];
|
|
115
|
+
var _useUrlSyncedState3 = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)({
|
|
116
|
+
initialState: initialState.predicates,
|
|
117
|
+
serializer: function(_predicates) {
|
|
118
|
+
return Object.entries(_predicates).map(function(param) {
|
|
119
|
+
var _param = _sliced_to_array._(param, 2), key = _param[0], value = _param[1];
|
|
120
|
+
return [
|
|
121
|
+
key,
|
|
122
|
+
value
|
|
123
|
+
];
|
|
124
|
+
});
|
|
125
|
+
},
|
|
126
|
+
deserializer: function(params) {
|
|
127
|
+
return Object.keys(initialState.predicates).reduce(function(acc, predicateKey) {
|
|
128
|
+
var _params_get;
|
|
129
|
+
acc[predicateKey] = (_params_get = params.get(predicateKey)) !== null && _params_get !== void 0 ? _params_get : initialState.predicates[predicateKey];
|
|
130
|
+
return acc;
|
|
131
|
+
}, {});
|
|
132
|
+
},
|
|
133
|
+
sync: options.syncWithUrl
|
|
134
|
+
}), 2), predicates = _useUrlSyncedState3[0], setPredicates = _useUrlSyncedState3[1];
|
|
135
|
+
var _useUrlSyncedState4 = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)({
|
|
136
|
+
initialState: initialState.layout,
|
|
137
|
+
serializer: function(_layout) {
|
|
138
|
+
return [
|
|
139
|
+
[
|
|
140
|
+
'layout',
|
|
141
|
+
_layout
|
|
142
|
+
]
|
|
143
|
+
];
|
|
144
|
+
},
|
|
145
|
+
deserializer: function(params) {
|
|
146
|
+
var _params_get;
|
|
147
|
+
return (_params_get = params.get('layout')) !== null && _params_get !== void 0 ? _params_get : initialState.layout;
|
|
148
|
+
},
|
|
149
|
+
sync: options.syncWithUrl
|
|
150
|
+
}), 2), layout = _useUrlSyncedState4[0], setLayout = _useUrlSyncedState4[1];
|
|
151
|
+
var _useUrlSyncedState5 = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)({
|
|
152
|
+
initialState: initialState.dateRange,
|
|
153
|
+
serializer: function(param) {
|
|
154
|
+
var _param = _sliced_to_array._(param, 2), from = _param[0], to = _param[1];
|
|
155
|
+
var _from_toISOString, _to_toISOString;
|
|
156
|
+
return [
|
|
157
|
+
[
|
|
158
|
+
'from',
|
|
159
|
+
(_from_toISOString = from === null || from === void 0 ? void 0 : from.toISOString()) !== null && _from_toISOString !== void 0 ? _from_toISOString : ''
|
|
160
|
+
],
|
|
161
|
+
[
|
|
162
|
+
'to',
|
|
163
|
+
(_to_toISOString = to === null || to === void 0 ? void 0 : to.toISOString()) !== null && _to_toISOString !== void 0 ? _to_toISOString : ''
|
|
164
|
+
]
|
|
165
|
+
];
|
|
166
|
+
},
|
|
167
|
+
deserializer: function(params) {
|
|
168
|
+
return [
|
|
169
|
+
params.get('from') ? new Date(params.get('from')) : initialState.dateRange[0],
|
|
170
|
+
params.get('to') ? new Date(params.get('to')) : initialState.dateRange[1]
|
|
171
|
+
];
|
|
172
|
+
},
|
|
173
|
+
sync: options.syncWithUrl
|
|
174
|
+
}), 2), dateRange = _useUrlSyncedState5[0], setDateRange = _useUrlSyncedState5[1];
|
|
175
|
+
var _useUrlSyncedState6 = _sliced_to_array._((0, _useurlsyncedstate.useUrlSyncedState)({
|
|
176
|
+
initialState: initialState.columnVisibility,
|
|
177
|
+
serializer: function(columns) {
|
|
178
|
+
return [
|
|
179
|
+
[
|
|
180
|
+
'show',
|
|
181
|
+
Object.entries(columns).filter(function(param) {
|
|
182
|
+
var _param = _sliced_to_array._(param, 2), visible = _param[1];
|
|
183
|
+
return visible === true;
|
|
184
|
+
}).map(function(param) {
|
|
185
|
+
var _param = _sliced_to_array._(param, 1), columnName = _param[0];
|
|
186
|
+
return columnName;
|
|
187
|
+
}).join(',')
|
|
188
|
+
],
|
|
189
|
+
[
|
|
190
|
+
'hide',
|
|
191
|
+
Object.entries(columns).filter(function(param) {
|
|
192
|
+
var _param = _sliced_to_array._(param, 2), visible = _param[1];
|
|
193
|
+
return visible === false;
|
|
194
|
+
}).map(function(param) {
|
|
195
|
+
var _param = _sliced_to_array._(param, 1), columnName = _param[0];
|
|
196
|
+
return columnName;
|
|
197
|
+
}).join(',')
|
|
198
|
+
]
|
|
199
|
+
];
|
|
200
|
+
},
|
|
201
|
+
deserializer: function(params) {
|
|
202
|
+
var _params_get, _params_get1;
|
|
203
|
+
if (!params.has('show') && !params.has('hide')) {
|
|
204
|
+
return initialState.columnVisibility;
|
|
205
|
+
}
|
|
206
|
+
var _params_get_split;
|
|
207
|
+
var visible = (_params_get_split = (_params_get = params.get('show')) === null || _params_get === void 0 ? void 0 : _params_get.split(',')) !== null && _params_get_split !== void 0 ? _params_get_split : [];
|
|
208
|
+
var _params_get_split1;
|
|
209
|
+
var invisible = (_params_get_split1 = (_params_get1 = params.get('hide')) === null || _params_get1 === void 0 ? void 0 : _params_get1.split(',')) !== null && _params_get_split1 !== void 0 ? _params_get_split1 : [];
|
|
210
|
+
var columns = {};
|
|
211
|
+
visible.forEach(function(column) {
|
|
212
|
+
columns[column] = true;
|
|
213
|
+
});
|
|
214
|
+
invisible.forEach(function(column) {
|
|
215
|
+
columns[column] = false;
|
|
216
|
+
});
|
|
217
|
+
return columns;
|
|
218
|
+
},
|
|
219
|
+
sync: options.syncWithUrl
|
|
220
|
+
}), 2), columnVisibility = _useUrlSyncedState6[0], setColumnVisibility = _useUrlSyncedState6[1];
|
|
221
|
+
// unsynced
|
|
222
|
+
var _useState = _sliced_to_array._((0, _react.useState)(initialState.totalEntries), 2), totalEntries = _useState[0], _setTotalEntries = _useState[1];
|
|
223
|
+
var _useState1 = _sliced_to_array._((0, _react.useState)(initialState.totalEntries), 2), unfilteredTotalEntries = _useState1[0], setUnfilteredTotalEntries = _useState1[1];
|
|
224
|
+
var _useState2 = _sliced_to_array._((0, _react.useState)(initialState.expanded), 2), expanded = _useState2[0], setExpanded = _useState2[1];
|
|
225
|
+
var _useState3 = _sliced_to_array._((0, _react.useState)(initialState.rowSelection), 2), rowSelection = _useState3[0], setRowSelection = _useState3[1];
|
|
54
226
|
var isFiltered = !!globalFilter || Object.keys(predicates).some(function(predicate) {
|
|
55
227
|
return !!predicates[predicate];
|
|
56
228
|
}) || !!(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]) || !!(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/use-table.ts"],"sourcesContent":["import {useDidUpdate} from '@mantine/hooks';\nimport {type ExpandedState, type PaginationState, type SortingState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';\nimport {type DateRangePickerValue} from '../date-range-picker';\n\n// Create a deeply optional version of another type\ntype PartialDeep<T> = T extends object\n ? {\n [P in keyof T]?: PartialDeep<T[P]>;\n }\n : T;\n\nexport interface TableState<TData = unknown> {\n /**\n * Current pagination state\n *\n * @default { pageIndex: 0, pageSize: 50 }\n */\n pagination: PaginationState;\n /**\n * Total number of entries in the table.\n * This number is used to calculate the number of pages in the pagination.\n * When null, the number of pages is calculated using the current data length.\n *\n * @default null\n */\n totalEntries: number | null;\n /**\n * Current sorting state\n *\n * @default []\n */\n sorting: SortingState;\n /**\n * Current global filter value\n *\n * @default ''\n */\n globalFilter: string;\n\n /**\n * Current expanded state\n *\n * @default {}\n */\n expanded: ExpandedState;\n /**\n * Predicates and their current value\n *\n * @default {}\n */\n predicates: Record<string, string>;\n /**\n * Layout currently selected. When null, the first layout is used.\n *\n * @default null\n */\n layout: string | null;\n /**\n * Currently selected date range\n *\n * @default [null, null]\n */\n dateRange: DateRangePickerValue;\n /**\n * Currently selected rows\n *\n * @default {}\n */\n rowSelection: Record<string, TData>;\n /**\n * Columns that are currently visible\n *\n * @default {}\n */\n columnVisibility: Record<string, boolean>;\n}\n\nexport interface TableStore<TData = unknown> {\n /**\n * Current state of the table.\n */\n state: TableState<TData>;\n /**\n * Allows to change the pagination state.\n */\n setPagination: Dispatch<SetStateAction<TableState<TData>['pagination']>>;\n /**\n * Allows to change the total number of entries.\n */\n setTotalEntries: Dispatch<SetStateAction<TableState<TData>['totalEntries']>>;\n /**\n * Allows to change the sorting state.\n */\n setSorting: Dispatch<SetStateAction<TableState<TData>['sorting']>>;\n /**\n * Allows to change the global filter value.\n */\n setGlobalFilter: Dispatch<SetStateAction<TableState<TData>['globalFilter']>>;\n /**\n * Allows to change the rows expanded state.\n */\n setExpanded: Dispatch<SetStateAction<TableState<TData>['expanded']>>;\n /**\n * Allows to change the predicates values.\n */\n setPredicates: Dispatch<SetStateAction<TableState<TData>['predicates']>>;\n /**\n * Allows to change the selected layout.\n */\n setLayout: Dispatch<SetStateAction<TableState<TData>['layout']>>;\n /**\n * Allows to change the selected date range.\n */\n setDateRange: Dispatch<SetStateAction<TableState<TData>['dateRange']>>;\n /**\n * Allows to change the current row selection.\n */\n setRowSelection: Dispatch<SetStateAction<TableState<TData>['rowSelection']>>;\n /**\n * Allows to change the visible columns.\n */\n setColumnVisibility: Dispatch<SetStateAction<TableState<TData>['columnVisibility']>>;\n /**\n * Whether the table is currently filtered.\n */\n isFiltered: boolean;\n /**\n * Whether the table has data when unfiltered.\n *\n * This is derived from the totalEntries so make sure you set that number correctly, even if you're using a client side table.\n */\n isVacant: boolean;\n /**\n * Clear currently applied filters.\n */\n clearFilters: () => void;\n /**\n * Deselects all currently selected rows.\n */\n clearRowSelection: () => void;\n /**\n * Get currently selected rows.\n */\n getSelectedRows: () => TData[];\n /**\n * Get currently selected row\n */\n getSelectedRow: () => TData | null;\n /**\n * Whether the user can select multiple rows at the same time.\n */\n multiRowSelectionEnabled: boolean;\n /**\n * Whether rows can be selected.\n */\n rowSelectionEnabled: boolean;\n /**\n * Whether row selection is forced.\n */\n rowSelectionForced: boolean;\n}\n\nexport interface UseTableOptions<TData = unknown> {\n /**\n * Initial state of the table.\n */\n initialState?: PartialDeep<TableState<TData>>;\n /**\n * Whether rows can be selected.\n *\n * @default true\n */\n enableRowSelection?: boolean;\n /**\n * Whether multiple rows can be selected at the same time.\n *\n * @default false\n */\n enableMultiRowSelection?: boolean;\n /**\n * Forces the user to always have one row selected.\n * When activating that setting, a good practice is to have a row already selected in the initial state.\n *\n * @default false\n */\n forceSelection?: boolean;\n}\n\nconst defaultOptions: UseTableOptions = {\n enableRowSelection: true,\n enableMultiRowSelection: false,\n forceSelection: false,\n};\n\nconst defaultState: Partial<TableState> = {\n pagination: {\n pageIndex: 0,\n pageSize: 50,\n },\n totalEntries: null,\n sorting: [],\n globalFilter: '',\n predicates: {},\n layout: null,\n dateRange: [null, null],\n rowSelection: {},\n columnVisibility: {},\n};\n\nexport const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {\n const options = defaultsDeep({}, userOptions, defaultOptions) as UseTableOptions<TData>;\n const initialState = defaultsDeep({}, options.initialState, defaultState) as TableState<TData>;\n\n const [pagination, setPagination] = useState<TableState<TData>['pagination']>(initialState.pagination);\n const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);\n const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(\n initialState.totalEntries,\n );\n const [sorting, setSorting] = useState<TableState<TData>['sorting']>(initialState.sorting);\n const [globalFilter, setGlobalFilter] = useState<TableState<TData>['globalFilter']>(initialState.globalFilter);\n const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded);\n const [predicates, setPredicates] = useState<TableState<TData>['predicates']>(initialState.predicates);\n const [layout, setLayout] = useState<TableState<TData>['layout']>(initialState.layout);\n const [dateRange, setDateRange] = useState<TableState<TData>['dateRange']>(initialState.dateRange);\n const [rowSelection, setRowSelection] = useState<TableState<TData>['rowSelection']>(initialState.rowSelection);\n const [columnVisibility, setColumnVisibility] = useState<TableState<TData>['columnVisibility']>(\n initialState.columnVisibility,\n );\n\n const isFiltered =\n !!globalFilter ||\n Object.keys(predicates).some((predicate) => !!predicates[predicate]) ||\n !!dateRange?.[0] ||\n !!dateRange?.[1];\n\n const isVacant = unfilteredTotalEntries === 0;\n\n const setTotalEntries: typeof _setTotalEntries = useCallback(\n (updater) => {\n _setTotalEntries((old) => {\n const newTotalEntries = updater instanceof Function ? updater(old) : updater;\n if (!isFiltered) {\n setUnfilteredTotalEntries(newTotalEntries);\n }\n return newTotalEntries;\n });\n },\n [isFiltered],\n );\n\n const clearFilters = useCallback(() => {\n setPredicates(initialState.predicates);\n setGlobalFilter('');\n }, []);\n\n const clearRowSelection = useCallback(() => {\n setRowSelection({});\n }, []);\n\n const getSelectedRows = useCallback(() => Object.values(rowSelection), [rowSelection]);\n\n const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n useDidUpdate(() => {\n if (!options.enableMultiRowSelection) {\n clearRowSelection();\n }\n }, [globalFilter, pagination, sorting, dateRange, predicates]);\n\n const state = useMemo(\n () => ({\n pagination,\n totalEntries,\n sorting,\n globalFilter,\n expanded,\n predicates,\n layout,\n dateRange,\n rowSelection,\n columnVisibility,\n }),\n [\n pagination,\n totalEntries,\n sorting,\n globalFilter,\n expanded,\n predicates,\n layout,\n dateRange,\n rowSelection,\n columnVisibility,\n ],\n );\n\n return {\n state,\n setPagination,\n setTotalEntries,\n setSorting,\n setGlobalFilter,\n setExpanded,\n setPredicates,\n setLayout,\n setDateRange,\n setRowSelection,\n setColumnVisibility,\n isFiltered,\n isVacant,\n clearFilters,\n clearRowSelection,\n getSelectedRows,\n getSelectedRow,\n rowSelectionEnabled: options.enableRowSelection,\n rowSelectionForced: options.forceSelection,\n multiRowSelectionEnabled: options.enableMultiRowSelection,\n };\n};\n"],"names":["useTable","defaultOptions","enableRowSelection","enableMultiRowSelection","forceSelection","defaultState","pagination","pageIndex","pageSize","totalEntries","sorting","globalFilter","predicates","layout","dateRange","rowSelection","columnVisibility","userOptions","options","defaultsDeep","initialState","useState","setPagination","_setTotalEntries","unfilteredTotalEntries","setUnfilteredTotalEntries","setSorting","setGlobalFilter","expanded","setExpanded","setPredicates","setLayout","setDateRange","setRowSelection","setColumnVisibility","isFiltered","Object","keys","some","predicate","isVacant","setTotalEntries","useCallback","updater","old","newTotalEntries","Function","clearFilters","clearRowSelection","getSelectedRows","values","getSelectedRow","useDidUpdate","state","useMemo","rowSelectionEnabled","rowSelectionForced","multiRowSelectionEnabled"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/use-table.ts"],"sourcesContent":["import {useDidUpdate} from '@mantine/hooks';\nimport {type ExpandedState, type PaginationState, type SortingState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';\nimport {type DateRangePickerValue} from '../date-range-picker';\nimport {useUrlSyncedState} from './use-url-synced-state';\n\n// Create a deeply optional version of another type\ntype DeepPartial<T> = {\n [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];\n};\n\nexport interface TableState<TData = unknown> {\n /**\n * Current pagination state\n *\n * @default { pageIndex: 0, pageSize: 50 }\n */\n pagination: PaginationState;\n /**\n * Total number of entries in the table.\n * This number is used to calculate the number of pages in the pagination.\n * When null, the number of pages is calculated using the current data length.\n *\n * @default null\n */\n totalEntries: number | null;\n /**\n * Current sorting state\n *\n * @default []\n */\n sorting: SortingState;\n /**\n * Current global filter value\n *\n * @default ''\n */\n globalFilter: string;\n\n /**\n * Current expanded state\n *\n * @default {}\n */\n expanded: ExpandedState;\n /**\n * Predicates and their current value\n *\n * @default {}\n */\n predicates: Record<string, string>;\n /**\n * Layout currently selected. When null, the first layout is used.\n *\n * @default null\n */\n layout: string | null;\n /**\n * Currently selected date range\n *\n * @default [null, null]\n */\n dateRange: DateRangePickerValue;\n /**\n * Currently selected rows\n *\n * @default {}\n */\n rowSelection: Record<string, TData>;\n /**\n * Columns that are currently visible\n *\n * @default {}\n */\n columnVisibility: Record<string, boolean>;\n}\n\nexport interface TableStore<TData = unknown> {\n /**\n * Current state of the table.\n */\n state: TableState<TData>;\n /**\n * Allows to change the pagination state.\n */\n setPagination: Dispatch<SetStateAction<TableState<TData>['pagination']>>;\n /**\n * Allows to change the total number of entries.\n */\n setTotalEntries: Dispatch<SetStateAction<TableState<TData>['totalEntries']>>;\n /**\n * Allows to change the sorting state.\n */\n setSorting: Dispatch<SetStateAction<TableState<TData>['sorting']>>;\n /**\n * Allows to change the global filter value.\n */\n setGlobalFilter: Dispatch<SetStateAction<TableState<TData>['globalFilter']>>;\n /**\n * Allows to change the rows expanded state.\n */\n setExpanded: Dispatch<SetStateAction<TableState<TData>['expanded']>>;\n /**\n * Allows to change the predicates values.\n */\n setPredicates: Dispatch<SetStateAction<TableState<TData>['predicates']>>;\n /**\n * Allows to change the selected layout.\n */\n setLayout: Dispatch<SetStateAction<TableState<TData>['layout']>>;\n /**\n * Allows to change the selected date range.\n */\n setDateRange: Dispatch<SetStateAction<TableState<TData>['dateRange']>>;\n /**\n * Allows to change the current row selection.\n */\n setRowSelection: Dispatch<SetStateAction<TableState<TData>['rowSelection']>>;\n /**\n * Allows to change the visible columns.\n */\n setColumnVisibility: Dispatch<SetStateAction<TableState<TData>['columnVisibility']>>;\n /**\n * Whether the table is currently filtered.\n */\n isFiltered: boolean;\n /**\n * Whether the table has data when unfiltered.\n *\n * This is derived from the totalEntries so make sure you set that number correctly, even if you're using a client side table.\n */\n isVacant: boolean;\n /**\n * Clear currently applied filters.\n */\n clearFilters: () => void;\n /**\n * Deselects all currently selected rows.\n */\n clearRowSelection: () => void;\n /**\n * Get currently selected rows.\n */\n getSelectedRows: () => TData[];\n /**\n * Get currently selected row\n */\n getSelectedRow: () => TData | null;\n /**\n * Whether the user can select multiple rows at the same time.\n */\n multiRowSelectionEnabled: boolean;\n /**\n * Whether rows can be selected.\n */\n rowSelectionEnabled: boolean;\n /**\n * Whether row selection is forced.\n */\n rowSelectionForced: boolean;\n}\n\nexport interface UseTableOptions<TData = unknown> {\n /**\n * Initial state of the table.\n */\n initialState?: DeepPartial<TableState<TData>>;\n /**\n * Whether rows can be selected.\n *\n * @default true\n */\n enableRowSelection?: boolean;\n /**\n * Whether multiple rows can be selected at the same time.\n *\n * @default false\n */\n enableMultiRowSelection?: boolean;\n /**\n * Forces the user to always have one row selected.\n * When activating that setting, a good practice is to have a row already selected in the initial state.\n *\n * @default false\n */\n forceSelection?: boolean;\n /**\n * Whether to sync the table state with the URL.\n *\n * @default false\n */\n syncWithUrl?: boolean;\n}\n\nconst defaultOptions: UseTableOptions = {\n enableRowSelection: true,\n enableMultiRowSelection: false,\n forceSelection: false,\n syncWithUrl: false,\n};\n\nconst defaultState: Partial<TableState> = {\n pagination: {\n pageIndex: 0,\n pageSize: 50,\n },\n totalEntries: null,\n sorting: [],\n globalFilter: '',\n predicates: {},\n layout: null,\n dateRange: [null, null],\n rowSelection: {},\n columnVisibility: {},\n};\n\nexport const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {\n const options = defaultsDeep({}, userOptions, defaultOptions) as UseTableOptions<TData>;\n const initialState = defaultsDeep({}, options.initialState, defaultState) as TableState<TData>;\n\n // synced with url\n const [pagination, setPagination] = useUrlSyncedState<TableState<TData>['pagination']>({\n initialState: initialState.pagination,\n serializer: ({pageIndex, pageSize}) => [\n ['page', (pageIndex + 1).toString()],\n ['pageSize', pageSize.toString()],\n ],\n deserializer: (params) =>\n defaultsDeep(\n {\n pageIndex: params.get('page') ? parseInt(params.get('page'), 10) - 1 : undefined,\n pageSize: params.get('pageSize') ? parseInt(params.get('pageSize'), 10) : undefined,\n },\n initialState.pagination,\n ),\n sync: options.syncWithUrl,\n });\n const [sorting, setSorting] = useUrlSyncedState<TableState<TData>['sorting']>({\n initialState: initialState.sorting,\n serializer: (_sorting) => [\n ['sortBy', _sorting.map(({id, desc}) => `${id}.${desc ? 'desc' : 'asc'}`).join(',')],\n ],\n deserializer: (params) => {\n if (!params.has('sortBy')) {\n return initialState.sorting;\n }\n const sorts = params.get('sortBy')?.split(',') ?? [];\n return sorts.map((sort) => {\n const [id, order] = sort.split('.');\n return {id, desc: order === 'desc'};\n });\n },\n sync: options.syncWithUrl,\n });\n const [globalFilter, setGlobalFilter] = useUrlSyncedState<TableState<TData>['globalFilter']>({\n initialState: initialState.globalFilter,\n serializer: (filter) => [['filter', filter]],\n deserializer: (params) => params.get('filter') ?? initialState.globalFilter,\n sync: options.syncWithUrl,\n });\n const [predicates, setPredicates] = useUrlSyncedState<TableState<TData>['predicates']>({\n initialState: initialState.predicates,\n serializer: (_predicates) => Object.entries(_predicates).map(([key, value]) => [key, value]),\n deserializer: (params) =>\n Object.keys(initialState.predicates).reduce(\n (acc, predicateKey) => {\n acc[predicateKey] = params.get(predicateKey) ?? initialState.predicates[predicateKey];\n return acc;\n },\n {} as TableState<TData>['predicates'],\n ),\n sync: options.syncWithUrl,\n });\n const [layout, setLayout] = useUrlSyncedState<TableState<TData>['layout']>({\n initialState: initialState.layout,\n serializer: (_layout) => [['layout', _layout]],\n deserializer: (params) => params.get('layout') ?? initialState.layout,\n sync: options.syncWithUrl,\n });\n const [dateRange, setDateRange] = useUrlSyncedState<TableState<TData>['dateRange']>({\n initialState: initialState.dateRange,\n serializer: ([from, to]) => [\n ['from', from?.toISOString() ?? ''],\n ['to', to?.toISOString() ?? ''],\n ],\n deserializer: (params) => [\n params.get('from') ? new Date(params.get('from') as string) : initialState.dateRange[0],\n params.get('to') ? new Date(params.get('to') as string) : initialState.dateRange[1],\n ],\n sync: options.syncWithUrl,\n });\n const [columnVisibility, setColumnVisibility] = useUrlSyncedState<TableState<TData>['columnVisibility']>({\n initialState: initialState.columnVisibility,\n serializer: (columns) => [\n [\n 'show',\n Object.entries(columns)\n .filter(([, visible]) => visible === true)\n .map(([columnName]) => columnName)\n .join(','),\n ],\n [\n 'hide',\n Object.entries(columns)\n .filter(([, visible]) => visible === false)\n .map(([columnName]) => columnName)\n .join(','),\n ],\n ],\n deserializer: (params) => {\n if (!params.has('show') && !params.has('hide')) {\n return initialState.columnVisibility;\n }\n const visible = params.get('show')?.split(',') ?? [];\n const invisible = params.get('hide')?.split(',') ?? [];\n const columns = {} as TableState<TData>['columnVisibility'];\n visible.forEach((column) => {\n columns[column] = true;\n });\n invisible.forEach((column) => {\n columns[column] = false;\n });\n return columns;\n },\n sync: options.syncWithUrl,\n });\n\n // unsynced\n const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);\n const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(\n initialState.totalEntries,\n );\n const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded);\n const [rowSelection, setRowSelection] = useState<TableState<TData>['rowSelection']>(initialState.rowSelection);\n\n const isFiltered =\n !!globalFilter ||\n Object.keys(predicates).some((predicate) => !!predicates[predicate]) ||\n !!dateRange?.[0] ||\n !!dateRange?.[1];\n\n const isVacant = unfilteredTotalEntries === 0;\n\n const setTotalEntries: typeof _setTotalEntries = useCallback(\n (updater) => {\n _setTotalEntries((old) => {\n const newTotalEntries = updater instanceof Function ? updater(old) : updater;\n if (!isFiltered) {\n setUnfilteredTotalEntries(newTotalEntries);\n }\n return newTotalEntries;\n });\n },\n [isFiltered],\n );\n\n const clearFilters = useCallback(() => {\n setPredicates(initialState.predicates);\n setGlobalFilter('');\n }, []);\n\n const clearRowSelection = useCallback(() => {\n setRowSelection({});\n }, []);\n\n const getSelectedRows = useCallback(() => Object.values(rowSelection), [rowSelection]);\n\n const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n useDidUpdate(() => {\n if (!options.enableMultiRowSelection) {\n clearRowSelection();\n }\n }, [globalFilter, pagination, sorting, dateRange, predicates]);\n\n const state = useMemo(\n () => ({\n pagination,\n totalEntries,\n sorting,\n globalFilter,\n expanded,\n predicates,\n layout,\n dateRange,\n rowSelection,\n columnVisibility,\n }),\n [\n pagination,\n totalEntries,\n sorting,\n globalFilter,\n expanded,\n predicates,\n layout,\n dateRange,\n rowSelection,\n columnVisibility,\n ],\n );\n\n return {\n state,\n setPagination,\n setTotalEntries,\n setSorting,\n setGlobalFilter,\n setExpanded,\n setPredicates,\n setLayout,\n setDateRange,\n setRowSelection,\n setColumnVisibility,\n isFiltered,\n isVacant,\n clearFilters,\n clearRowSelection,\n getSelectedRows,\n getSelectedRow,\n rowSelectionEnabled: options.enableRowSelection,\n rowSelectionForced: options.forceSelection,\n multiRowSelectionEnabled: options.enableMultiRowSelection,\n };\n};\n"],"names":["useTable","defaultOptions","enableRowSelection","enableMultiRowSelection","forceSelection","syncWithUrl","defaultState","pagination","pageIndex","pageSize","totalEntries","sorting","globalFilter","predicates","layout","dateRange","rowSelection","columnVisibility","userOptions","options","defaultsDeep","initialState","useUrlSyncedState","serializer","toString","deserializer","params","get","parseInt","undefined","sync","setPagination","_sorting","map","id","desc","join","has","sorts","split","sort","order","setSorting","filter","setGlobalFilter","_predicates","Object","entries","key","value","keys","reduce","acc","predicateKey","setPredicates","_layout","setLayout","from","to","toISOString","Date","setDateRange","columns","visible","columnName","invisible","forEach","column","setColumnVisibility","useState","_setTotalEntries","unfilteredTotalEntries","setUnfilteredTotalEntries","expanded","setExpanded","setRowSelection","isFiltered","some","predicate","isVacant","setTotalEntries","useCallback","updater","old","newTotalEntries","Function","clearFilters","clearRowSelection","getSelectedRows","values","getSelectedRow","useDidUpdate","state","useMemo","rowSelectionEnabled","rowSelectionForced","multiRowSelectionEnabled"],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface UseUrlSyncedStateOptions<T> {
|
|
2
|
+
/**
|
|
3
|
+
* The initial state
|
|
4
|
+
*/
|
|
5
|
+
initialState: T;
|
|
6
|
+
/**
|
|
7
|
+
* The serializer function is used to determine how the state is translated to url search parameters.
|
|
8
|
+
* Called each time the state changes.
|
|
9
|
+
* @param stateValue The new state value to serialize.
|
|
10
|
+
* @returns A list of [key, value] to set as url search parameters.
|
|
11
|
+
* @example (filterValue) => [['filter', filterValue]] // ?filter=filterValue
|
|
12
|
+
*/
|
|
13
|
+
serializer: (stateValue: T) => Array<[string, string]>;
|
|
14
|
+
/**
|
|
15
|
+
* The deserializer function is used to determine how the url parameters influence the initial state.
|
|
16
|
+
* Called only once when initializing the state.
|
|
17
|
+
* @param params All the search parameters of the current url.
|
|
18
|
+
* @returns The initial state based on the current url.
|
|
19
|
+
* @example (params) => params.get('filter') ?? '',
|
|
20
|
+
*/
|
|
21
|
+
deserializer: (params: URLSearchParams) => T;
|
|
22
|
+
/**
|
|
23
|
+
* Whether the state should be synced with the url.
|
|
24
|
+
* When set to false, the hook behaves just like a regular useState hook from react.
|
|
25
|
+
*/
|
|
26
|
+
sync?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export declare const useUrlSyncedState: <T>({ initialState, serializer, deserializer, sync }: UseUrlSyncedStateOptions<T>) => readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
|
|
29
|
+
//# sourceMappingURL=use-url-synced-state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-url-synced-state.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-url-synced-state.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACvC;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC;IAChB;;;;;;OAMG;IACH,UAAU,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACvD;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,CAAC,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,oDAAkD,wBAAwB,CAAC,CAAC,CAAC,8EAwB/G,CAAC"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useUrlSyncedState", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return useUrlSyncedState;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var _instanceof = require("@swc/helpers/_/_instanceof");
|
|
12
|
+
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
13
|
+
var _react = require("react");
|
|
14
|
+
var setSearchParam = function(key, value, initial) {
|
|
15
|
+
var url = new URL(window.location.href);
|
|
16
|
+
if (value === '' || value === initial) {
|
|
17
|
+
url.searchParams.delete(key);
|
|
18
|
+
} else {
|
|
19
|
+
url.searchParams.set(key, value);
|
|
20
|
+
}
|
|
21
|
+
window.history.replaceState(null, '', url.toString());
|
|
22
|
+
};
|
|
23
|
+
var getSearchParams = function() {
|
|
24
|
+
var url = new URL(window.location.href);
|
|
25
|
+
return url.searchParams;
|
|
26
|
+
};
|
|
27
|
+
var useUrlSyncedState = function(param) {
|
|
28
|
+
var initialState = param.initialState, serializer = param.serializer, deserializer = param.deserializer, sync = param.sync;
|
|
29
|
+
var _useState = _sliced_to_array._((0, _react.useState)(sync ? deserializer(getSearchParams()) : initialState), 2), state = _useState[0], setState = _useState[1];
|
|
30
|
+
var enhancedSetState = (0, _react.useMemo)(function() {
|
|
31
|
+
if (sync) {
|
|
32
|
+
var initialSerialized = serializer(initialState).reduce(function(acc, param) {
|
|
33
|
+
var _param = _sliced_to_array._(param, 2), key = _param[0], value = _param[1];
|
|
34
|
+
acc[key] = value;
|
|
35
|
+
return acc;
|
|
36
|
+
}, {});
|
|
37
|
+
return function(updater) {
|
|
38
|
+
setState(function(old) {
|
|
39
|
+
var newValue = _instanceof._(updater, Function) ? updater(old) : updater;
|
|
40
|
+
serializer(newValue).forEach(function(param) {
|
|
41
|
+
var _param = _sliced_to_array._(param, 2), key = _param[0], value = _param[1];
|
|
42
|
+
return setSearchParam(key, value, initialSerialized[key]);
|
|
43
|
+
});
|
|
44
|
+
return newValue;
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
return setState;
|
|
49
|
+
}, [
|
|
50
|
+
sync
|
|
51
|
+
]);
|
|
52
|
+
return [
|
|
53
|
+
state,
|
|
54
|
+
enhancedSetState
|
|
55
|
+
];
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
//# sourceMappingURL=use-url-synced-state.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/use-url-synced-state.ts"],"sourcesContent":["import {useMemo, useState} from 'react';\n\nconst setSearchParam = (key: string, value: string, initial: string) => {\n const url = new URL(window.location.href);\n if (value === '' || value === initial) {\n url.searchParams.delete(key);\n } else {\n url.searchParams.set(key, value);\n }\n window.history.replaceState(null, '', url.toString());\n};\n\nconst getSearchParams = (): URLSearchParams => {\n const url = new URL(window.location.href);\n return url.searchParams;\n};\n\nexport interface UseUrlSyncedStateOptions<T> {\n /**\n * The initial state\n */\n initialState: T;\n /**\n * The serializer function is used to determine how the state is translated to url search parameters.\n * Called each time the state changes.\n * @param stateValue The new state value to serialize.\n * @returns A list of [key, value] to set as url search parameters.\n * @example (filterValue) => [['filter', filterValue]] // ?filter=filterValue\n */\n serializer: (stateValue: T) => Array<[string, string]>;\n /**\n * The deserializer function is used to determine how the url parameters influence the initial state.\n * Called only once when initializing the state.\n * @param params All the search parameters of the current url.\n * @returns The initial state based on the current url.\n * @example (params) => params.get('filter') ?? '',\n */\n deserializer: (params: URLSearchParams) => T;\n /**\n * Whether the state should be synced with the url.\n * When set to false, the hook behaves just like a regular useState hook from react.\n */\n sync?: boolean;\n}\n\nexport const useUrlSyncedState = <T>({initialState, serializer, deserializer, sync}: UseUrlSyncedStateOptions<T>) => {\n const [state, setState] = useState<T>(sync ? deserializer(getSearchParams()) : initialState);\n const enhancedSetState = useMemo(() => {\n if (sync) {\n const initialSerialized = serializer(initialState).reduce(\n (acc, [key, value]) => {\n acc[key] = value;\n return acc;\n },\n {} as Record<string, string>,\n );\n return (updater: T | ((old: T) => T)) => {\n setState((old) => {\n const newValue = updater instanceof Function ? updater(old) : updater;\n serializer(newValue).forEach(([key, value]) => setSearchParam(key, value, initialSerialized[key]));\n return newValue;\n });\n };\n }\n\n return setState;\n }, [sync]);\n\n return [state, enhancedSetState] as const;\n};\n"],"names":["useUrlSyncedState","setSearchParam","key","value","initial","url","URL","window","location","href","searchParams","delete","set","history","replaceState","toString","getSearchParams","initialState","serializer","deserializer","sync","useState","state","setState","enhancedSetState","useMemo","initialSerialized","reduce","acc","updater","old","newValue","Function","forEach"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;qBA7CmB;AAEhC,IAAMC,iBAAiB,SAACC,KAAaC,OAAeC;IAChD,IAAMC,MAAM,IAAIC,IAAIC,OAAOC,QAAQ,CAACC,IAAI;IACxC,IAAIN,UAAU,MAAMA,UAAUC,SAAS;QACnCC,IAAIK,YAAY,CAACC,MAAM,CAACT;IAC5B,OAAO;QACHG,IAAIK,YAAY,CAACE,GAAG,CAACV,KAAKC;IAC9B;IACAI,OAAOM,OAAO,CAACC,YAAY,CAAC,MAAM,IAAIT,IAAIU,QAAQ;AACtD;AAEA,IAAMC,kBAAkB;IACpB,IAAMX,MAAM,IAAIC,IAAIC,OAAOC,QAAQ,CAACC,IAAI;IACxC,OAAOJ,IAAIK,YAAY;AAC3B;AA8BO,IAAMV,oBAAoB;QAAKiB,qBAAAA,cAAcC,mBAAAA,YAAYC,qBAAAA,cAAcC,aAAAA;IAC1E,IAA0BC,+BAAAA,IAAAA,eAAQ,EAAID,OAAOD,aAAaH,qBAAqBC,mBAAxEK,QAAmBD,cAAZE,WAAYF;IAC1B,IAAMG,mBAAmBC,IAAAA,cAAO,EAAC;QAC7B,IAAIL,MAAM;YACN,IAAMM,oBAAoBR,WAAWD,cAAcU,MAAM,CACrD,SAACC;2DAAM1B,iBAAKC;gBACRyB,GAAG,CAAC1B,IAAI,GAAGC;gBACX,OAAOyB;YACX,GACA,CAAC;YAEL,OAAO,SAACC;gBACJN,SAAS,SAACO;oBACN,IAAMC,WAAWF,AAAO,aAAYG,CAAnBH,SAAmBG,YAAWH,QAAQC,OAAOD;oBAC9DX,WAAWa,UAAUE,OAAO,CAAC;mEAAE/B,iBAAKC;+BAAWF,eAAeC,KAAKC,OAAOuB,iBAAiB,CAACxB,IAAI;;oBAChG,OAAO6B;gBACX;YACJ;QACJ;QAEA,OAAOR;IACX,GAAG;QAACH;KAAK;IAET,OAAO;QAACE;QAAOE;KAAiB;AACpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DateRangePickerInlineCalendar.d.ts","sourceRoot":"","sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAM/D,OAAO,EAAC,qBAAqB,EAA8B,MAAM,+BAA+B,CAAC;AACjG,OAAO,EAA0B,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAC9D,MAAM,WAAW,kCACb,SAAQ,IAAI,CAAC,4BAA4B,EAAE,YAAY,GAAG,UAAU,CAAC;IACrE;;OAEG;IACH,YAAY,EAAE,oBAAoB,CAAC;IACnC;;;;OAIG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAChD;;OAEG;IACH,kBAAkB,CAAC,EAAE,IAAI,CACrB,mBAAmB,EACnB,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,oBAAoB,GAAG,mBAAmB,CACtF,CAAC;CACL;AAOD,eAAO,MAAM,6BAA6B,4FAQvC,kCAAkC,4CAoEpC,CAAC"}
|
|
@@ -2,10 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { Center, Group, Space } from '@mantine/core';
|
|
3
3
|
import { DatePicker } from '@mantine/dates';
|
|
4
4
|
import { useForm } from '@mantine/form';
|
|
5
|
+
import dayjs from 'dayjs';
|
|
5
6
|
import { Button } from '../button';
|
|
6
7
|
import DateRangeClasses from './DateRange.module.css';
|
|
7
8
|
import { DateRangePickerPresetSelect } from './DateRangePickerPresetSelect';
|
|
8
9
|
import { EditableDateRangePicker } from './EditableDateRangePicker';
|
|
10
|
+
const isDateRangePickerValue = (value)=>Array.isArray(value) && value.length === 2;
|
|
11
|
+
const endOfDay = (value)=>value ? dayjs(value).endOf('day').toDate() : value;
|
|
9
12
|
export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel, presets, startProps, endProps, rangeCalendarProps })=>{
|
|
10
13
|
const form = useForm({
|
|
11
14
|
initialValues: {
|
|
@@ -13,9 +16,18 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
|
|
|
13
16
|
}
|
|
14
17
|
});
|
|
15
18
|
const calendarInputProps = form.getInputProps('dates');
|
|
19
|
+
const onCalendarChange = (range)=>{
|
|
20
|
+
const normalized = isDateRangePickerValue(range) && range[1] ? [
|
|
21
|
+
range[0],
|
|
22
|
+
endOfDay(range[1])
|
|
23
|
+
] : range;
|
|
24
|
+
calendarInputProps.onChange(normalized);
|
|
25
|
+
};
|
|
16
26
|
const onCalendarApply = ()=>{
|
|
27
|
+
// In case the user only clicked the start date, but not the end date,
|
|
28
|
+
// assume a single day was meant to be selected.
|
|
17
29
|
if (!form.values.dates[1]) {
|
|
18
|
-
form.values.dates[1] = form.values.dates[0];
|
|
30
|
+
form.values.dates[1] = endOfDay(form.values.dates[0]);
|
|
19
31
|
}
|
|
20
32
|
onApply(form.values.dates);
|
|
21
33
|
};
|
|
@@ -69,7 +81,8 @@ export const DateRangePickerInlineCalendar = ({ initialRange, onApply, onCancel,
|
|
|
69
81
|
firstDayOfWeek: 0,
|
|
70
82
|
allowSingleDateInRange: true,
|
|
71
83
|
...rangeCalendarProps,
|
|
72
|
-
...calendarInputProps
|
|
84
|
+
...calendarInputProps,
|
|
85
|
+
onChange: onCalendarChange
|
|
73
86
|
})
|
|
74
87
|
}),
|
|
75
88
|
/*#__PURE__*/ _jsxs(Group, {
|