@manufac/react-components-potli 1.0.4 → 1.0.6
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/dist/index.js +1 -1
- package/dist/tsc/components/CustomDateTimePicker/index.js +34 -0
- package/dist/tsc/components/CustomDateTimePicker/index.js.map +1 -0
- package/dist/tsc/components/CustomDateTimePicker/index.stories.js +19 -0
- package/dist/tsc/components/CustomDateTimePicker/index.stories.js.map +1 -0
- package/dist/tsc/components/CustomDateTimePicker/utils.js +13 -0
- package/dist/tsc/components/CustomDateTimePicker/utils.js.map +1 -0
- package/dist/tsc/components/CustomEventTimelineChart/index.js +6 -6
- package/dist/tsc/components/CustomTable/index.js +22 -11
- package/dist/tsc/components/CustomTable/index.js.map +1 -1
- package/dist/tsc/components/CustomTable/index.stories.js +7 -0
- package/dist/tsc/components/CustomTable/index.stories.js.map +1 -1
- package/dist/tsc/components/CustomTable/utils.js +12 -1
- package/dist/tsc/components/CustomTable/utils.js.map +1 -1
- package/dist/tsc/index.js +1 -0
- package/dist/tsc/index.js.map +1 -1
- package/dist/tsc/tsconfig.tsbuildinfo +1 -1
- package/dist/types/components/CustomDateTimePicker/index.d.ts +12 -0
- package/dist/types/components/CustomDateTimePicker/index.d.ts.map +1 -0
- package/dist/types/components/CustomDateTimePicker/index.stories.d.ts +6 -0
- package/dist/types/components/CustomDateTimePicker/index.stories.d.ts.map +1 -0
- package/dist/types/components/CustomDateTimePicker/utils.d.ts +3 -0
- package/dist/types/components/CustomDateTimePicker/utils.d.ts.map +1 -0
- package/dist/types/components/CustomTable/index.d.ts.map +1 -1
- package/dist/types/components/CustomTable/index.stories.d.ts.map +1 -1
- package/dist/types/components/CustomTable/utils.d.ts +3 -1
- package/dist/types/components/CustomTable/utils.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +4 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { customDateFormatter } from "./utils";
|
|
3
|
+
import { InputWrapper } from "@mantine/core";
|
|
4
|
+
import { DatePickerInput, TimePicker } from "@mantine/dates";
|
|
5
|
+
import dayjs from "dayjs";
|
|
6
|
+
export function CustomDateTimePicker({ wrapperProps, datePickerInputProps, timePickerInputProps, onChange, value, }) {
|
|
7
|
+
const onDateChange = (date) => {
|
|
8
|
+
if (typeof date === "string") {
|
|
9
|
+
const existingHour = value.getHours();
|
|
10
|
+
const existingMinute = value.getMinutes();
|
|
11
|
+
onChange(dayjs(date).hour(existingHour).minute(existingMinute).toDate());
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
const onTimeChange = (time) => {
|
|
15
|
+
const timePart = time.split(":");
|
|
16
|
+
const parsedHours = Number.parseInt(timePart[0], 10);
|
|
17
|
+
const parsedMinutes = Number.parseInt(timePart[1], 10);
|
|
18
|
+
if (Number.isFinite(parsedHours) === true && Number.isFinite(parsedMinutes) === true) {
|
|
19
|
+
onChange(dayjs(value).hour(parsedHours).minute(parsedMinutes).toDate());
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
return (_jsx(InputWrapper, { ...wrapperProps, children: _jsx(DatePickerInput, { ...datePickerInputProps, value: new Date(value), onChange: onDateChange, valueFormatter: customDateFormatter, rightSection: _jsx(TimePicker, { ...timePickerInputProps, value: dayjs(value).format("HH:mm"), onChange: onTimeChange, w: "100%", withDropdown: true, format: "12h", styles: {
|
|
23
|
+
input: {
|
|
24
|
+
borderTopLeftRadius: "0px",
|
|
25
|
+
borderBottomLeftRadius: "0px",
|
|
26
|
+
borderRight: "none",
|
|
27
|
+
},
|
|
28
|
+
} }), rightSectionProps: {
|
|
29
|
+
style: {
|
|
30
|
+
width: "110px",
|
|
31
|
+
},
|
|
32
|
+
} }) }));
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,MAAM,UAAU,oBAAoB,CAAC,EACnC,YAAY,EACZ,oBAAoB,EACpB,oBAAoB,EACpB,QAAQ,EACR,KAAK,GACqB;IAC1B,MAAM,YAAY,GAAqC,CAAC,IAAI,EAAE,EAAE;QAC9D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,EAAE,CAAC;YAC1C,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAgC,CAAC,IAAI,EAAE,EAAE;QACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACrD,MAAM,aAAa,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;QACvD,IAAI,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,IAAI,EAAE,CAAC;YACrF,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,OAAK,YAAY,YAC5B,KAAC,eAAe,OACV,oBAAoB,EACxB,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,EACtB,QAAQ,EAAE,YAAY,EACtB,cAAc,EAAE,mBAAmB,EACnC,YAAY,EACV,KAAC,UAAU,OACL,oBAAoB,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACnC,QAAQ,EAAE,YAAY,EACtB,CAAC,EAAC,MAAM,EACR,YAAY,QACZ,MAAM,EAAC,KAAK,EACZ,MAAM,EAAE;oBACN,KAAK,EAAE;wBACL,mBAAmB,EAAE,KAAK;wBAC1B,sBAAsB,EAAE,KAAK;wBAC7B,WAAW,EAAE,MAAM;qBACpB;iBACF,GACD,EAEJ,iBAAiB,EAAE;gBACjB,KAAK,EAAE;oBACL,KAAK,EAAE,OAAO;iBACf;aACF,GACD,GACW,CAChB,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { CustomDateTimePicker } from ".";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
export default {
|
|
5
|
+
title: "CustomDateTimePicker",
|
|
6
|
+
component: CustomDateTimePicker,
|
|
7
|
+
args: {
|
|
8
|
+
wrapperProps: {
|
|
9
|
+
label: "Date & Time",
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
export const Template = {
|
|
14
|
+
render: (args) => {
|
|
15
|
+
const [dateTime, setDateTime] = useState(new Date());
|
|
16
|
+
return _jsx(CustomDateTimePicker, { ...args, value: dateTime, onChange: setDateTime });
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=index.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,oBAAoB;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE;YACZ,KAAK,EAAE,aAAa;SACrB;KACF;CACmC,CAAC;AAEvC,MAAM,CAAC,MAAM,QAAQ,GAA0C;IAC7D,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAO,IAAI,IAAI,EAAE,CAAC,CAAC;QAC3D,OAAO,KAAC,oBAAoB,OAAK,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAI,CAAC;IACpF,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export const customDateFormatter = ({ date }) => {
|
|
2
|
+
let result = "Invalid date";
|
|
3
|
+
if (date instanceof Date || typeof date === "string") {
|
|
4
|
+
const dateValue = date instanceof Date ? date : new Date(date);
|
|
5
|
+
result = dateValue.toLocaleString(undefined, {
|
|
6
|
+
month: "short",
|
|
7
|
+
day: "2-digit",
|
|
8
|
+
year: "numeric",
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
return result;
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomDateTimePicker/utils.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,mBAAmB,GAAkB,CAAC,EAAE,IAAI,EAAE,EAAU,EAAE;IACrE,IAAI,MAAM,GAAG,cAAc,CAAC;IAC5B,IAAI,IAAI,YAAY,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACrD,MAAM,SAAS,GAAG,IAAI,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAE/D,MAAM,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE;YAC3C,KAAK,EAAE,OAAO;YACd,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;IACL,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
|
|
@@ -49,12 +49,12 @@ export function EventTimelineChart({ theme, data }) {
|
|
|
49
49
|
hour: "2-digit",
|
|
50
50
|
minute: "2-digit",
|
|
51
51
|
});
|
|
52
|
-
return `
|
|
53
|
-
<div style="padding:6px">
|
|
54
|
-
<b>${format.encodeHTML(event.event.toUpperCase())}</b><br/>
|
|
55
|
-
Start: ${format.encodeHTML(startTime)}<br/>
|
|
56
|
-
End: ${format.encodeHTML(endTime)}<br/>
|
|
57
|
-
</div>
|
|
52
|
+
return `
|
|
53
|
+
<div style="padding:6px">
|
|
54
|
+
<b>${format.encodeHTML(event.event.toUpperCase())}</b><br/>
|
|
55
|
+
Start: ${format.encodeHTML(startTime)}<br/>
|
|
56
|
+
End: ${format.encodeHTML(endTime)}<br/>
|
|
57
|
+
</div>
|
|
58
58
|
`;
|
|
59
59
|
},
|
|
60
60
|
},
|
|
@@ -1,29 +1,40 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { getSortingIcon, getTableBody, Sort } from "./utils";
|
|
2
|
+
import { getSortingIcon, getTableBody, Sort, getColumnFilterInput, FuzzyFilter } from "./utils";
|
|
3
3
|
import { ActionIcon, Group, ScrollArea, Table } from "@mantine/core";
|
|
4
|
-
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
|
|
4
|
+
import { flexRender, getCoreRowModel, getSortedRowModel, getFilteredRowModel, useReactTable, } from "@tanstack/react-table";
|
|
5
5
|
import { useState } from "react";
|
|
6
6
|
export function CustomTable({ data, isLoading, error, columns, }) {
|
|
7
7
|
const [sorting, setSorting] = useState([]);
|
|
8
|
+
const [columnFilters, setColumnFilters] = useState([]);
|
|
8
9
|
const table = useReactTable({
|
|
9
10
|
data,
|
|
10
11
|
columns,
|
|
11
12
|
getCoreRowModel: getCoreRowModel(),
|
|
12
13
|
getSortedRowModel: getSortedRowModel(),
|
|
14
|
+
getFilteredRowModel: getFilteredRowModel(),
|
|
13
15
|
onSortingChange: setSorting,
|
|
16
|
+
onColumnFiltersChange: setColumnFilters,
|
|
14
17
|
state: {
|
|
15
18
|
sorting,
|
|
19
|
+
columnFilters,
|
|
20
|
+
},
|
|
21
|
+
filterFns: {
|
|
22
|
+
fuzzyFilter: FuzzyFilter,
|
|
16
23
|
},
|
|
17
24
|
});
|
|
18
|
-
return (_jsx(ScrollArea, { children: _jsxs(Table, { highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
return (_jsx(ScrollArea, { children: _jsxs(Table, { highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [_jsxs(Table.Thead, { children: [table.getHeaderGroups().map((headerGroup) => {
|
|
26
|
+
return (_jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
|
|
27
|
+
return (_jsx(Table.Th, { onClick: header.column.getToggleSortingHandler(), children: _jsxs(Group, { gap: "xs", wrap: "nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), _jsx(ActionIcon, { variant: "subtle", size: "sm", children: (() => {
|
|
28
|
+
const sortState = header.column.getIsSorted();
|
|
29
|
+
const sortOrder = sortState === false ? Sort.Default : sortState;
|
|
30
|
+
return getSortingIcon(sortOrder, header.column.getCanSort());
|
|
31
|
+
})() })] }) }, header.id));
|
|
32
|
+
}) }, headerGroup.id));
|
|
33
|
+
}), table.getHeaderGroups().map((headerGroup) => {
|
|
34
|
+
return (_jsx(Table.Tr, { children: headerGroup.headers.map((header) => {
|
|
35
|
+
return _jsx(Table.Th, { children: getColumnFilterInput(header.column) }, header.id);
|
|
36
|
+
}) }, headerGroup.id));
|
|
37
|
+
})] }), _jsx(Table.Tbody, { children: getTableBody({
|
|
27
38
|
isLoading,
|
|
28
39
|
error,
|
|
29
40
|
tableRows: table.getRowModel().rows,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,12 +15,17 @@ const ColumnHelper = createColumnHelper();
|
|
|
15
15
|
const Columns = [
|
|
16
16
|
ColumnHelper.accessor("id", {
|
|
17
17
|
header: "ID",
|
|
18
|
+
enableColumnFilter: false,
|
|
18
19
|
}),
|
|
19
20
|
ColumnHelper.accessor("name", {
|
|
20
21
|
header: "Name",
|
|
22
|
+
enableColumnFilter: true,
|
|
23
|
+
filterFn: "fuzzyFilter",
|
|
21
24
|
}),
|
|
22
25
|
ColumnHelper.accessor("email", {
|
|
23
26
|
header: "Email",
|
|
27
|
+
enableColumnFilter: true,
|
|
28
|
+
filterFn: "fuzzyFilter",
|
|
24
29
|
}),
|
|
25
30
|
ColumnHelper.accessor("createdAt", {
|
|
26
31
|
id: "createdAtDate",
|
|
@@ -28,6 +33,8 @@ const Columns = [
|
|
|
28
33
|
cell: ({ getValue }) => {
|
|
29
34
|
return new Date(getValue()).toLocaleString();
|
|
30
35
|
},
|
|
36
|
+
enableColumnFilter: true,
|
|
37
|
+
filterFn: "fuzzyFilter",
|
|
31
38
|
}),
|
|
32
39
|
];
|
|
33
40
|
export default {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU3D,MAAM,SAAS,GAAgB;IAC7B,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAChG,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAC5F;QACE,EAAE,EAAE,CAAC;QACL,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;KAC3C;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,EAAa,CAAC;AAErD,MAAM,OAAO,GAAG;IACd,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC1B,MAAM,EAAE,IAAI;
|
|
1
|
+
{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/index.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAU3D,MAAM,SAAS,GAAgB;IAC7B,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAChG,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC,EAAE;IAC5F;QACE,EAAE,EAAE,CAAC;QACL,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE,IAAI,IAAI,CAAC,qBAAqB,CAAC;KAC3C;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,EAAa,CAAC;AAErD,MAAM,OAAO,GAAG;IACd,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC1B,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,KAAK;KAC1B,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;QAC5B,MAAM,EAAE,MAAM;QACd,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,aAAa;KACxB,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,OAAO,EAAE;QAC7B,MAAM,EAAE,OAAO;QACf,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,aAAa;KACxB,CAAC;IAEF,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE;QACjC,EAAE,EAAE,eAAe;QACnB,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACrB,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QAC/C,CAAC;QACD,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,aAAa;KACxB,CAAC;CACH,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,IAAI;KACZ;CAC0B,CAAC;AAE9B,MAAM,CAAC,MAAM,OAAO,GAAiC;IACnD,MAAM,EAAE,SAAS,OAAO,CAAC,IAAI;QAC3B,OAAO,KAAC,WAAW,OAAK,IAAI,GAAI,CAAC;IACnC,CAAC;CACF,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Alert, Skeleton, Table } from "@mantine/core";
|
|
2
|
+
import { Alert, Skeleton, Table, TextInput } from "@mantine/core";
|
|
3
3
|
import { IconChevronUp, IconChevronDown, IconSelector } from "@tabler/icons-react";
|
|
4
|
+
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
4
5
|
import { flexRender } from "@tanstack/react-table";
|
|
5
6
|
export const Sort = {
|
|
6
7
|
Ascending: "asc",
|
|
@@ -43,4 +44,14 @@ export function getTableBody({ isLoading, error, tableRows, columnCount, }) {
|
|
|
43
44
|
}
|
|
44
45
|
return tableBody;
|
|
45
46
|
}
|
|
47
|
+
export function getColumnFilterInput(column) {
|
|
48
|
+
return column.getCanFilter() ? (_jsx(TextInput, { placeholder: typeof column.columnDef.header === "string" ? `Filter ${column.columnDef.header}` : "Filter", value: (column.getFilterValue() ?? ""), onChange: (event) => {
|
|
49
|
+
column.setFilterValue(event.target.value);
|
|
50
|
+
} })) : null;
|
|
51
|
+
}
|
|
52
|
+
export const FuzzyFilter = (row, columnId, filterValue, addMeta) => {
|
|
53
|
+
const itemRank = rankItem(row.getValue(columnId), (filterValue ?? ""));
|
|
54
|
+
addMeta({ itemRank });
|
|
55
|
+
return itemRank.passed;
|
|
56
|
+
};
|
|
46
57
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/utils.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/CustomTable/utils.tsx"],"names":[],"mappings":"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"}
|
package/dist/tsc/index.js
CHANGED
package/dist/tsc/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}
|