@g4rcez/components 0.0.43 → 0.0.45
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.css +1 -1
- package/dist/index.js +21 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1624 -1524
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +41 -41
- package/dist/index.umd.js.map +1 -1
- package/dist/preset/preset.tailwind.d.ts +2 -2
- package/dist/preset/preset.tailwind.d.ts.map +1 -1
- package/dist/preset/preset.tailwind.js +5 -5
- package/dist/preset/src/styles/dark.d.ts.map +1 -1
- package/dist/preset/src/styles/dark.js +37 -0
- package/dist/preset/src/styles/light.d.ts.map +1 -1
- package/dist/preset/src/styles/light.js +37 -0
- package/dist/preset/src/styles/theme.types.d.ts +5 -0
- package/dist/preset/src/styles/theme.types.d.ts.map +1 -1
- package/dist/preset.tailwind.d.ts +2 -2
- package/dist/preset.tailwind.d.ts.map +1 -1
- package/dist/preset.tailwind.js +5 -5
- package/dist/src/components/core/button.d.ts +1 -1
- package/dist/src/components/core/button.d.ts.map +1 -1
- package/dist/src/components/core/button.js +10 -4
- package/dist/src/components/display/alert.d.ts +4 -3
- package/dist/src/components/display/alert.d.ts.map +1 -1
- package/dist/src/components/display/alert.js +12 -9
- package/dist/src/components/form/autocomplete.d.ts +1 -2
- package/dist/src/components/form/autocomplete.d.ts.map +1 -1
- package/dist/src/components/form/autocomplete.js +4 -3
- package/dist/src/components/form/input-field.js +1 -1
- package/dist/src/hooks/use-form.d.ts +2 -7
- package/dist/src/hooks/use-form.d.ts.map +1 -1
- package/dist/src/hooks/use-form.js +13 -3
- package/dist/src/styles/dark.d.ts.map +1 -1
- package/dist/src/styles/dark.js +37 -0
- package/dist/src/styles/light.d.ts.map +1 -1
- package/dist/src/styles/light.js +37 -0
- package/dist/src/styles/theme.types.d.ts +5 -0
- package/dist/src/styles/theme.types.d.ts.map +1 -1
- package/package.json +8 -2
- package/dist/components/core/button.d.ts +0 -16
- package/dist/components/core/button.d.ts.map +0 -1
- package/dist/components/core/button.js +0 -43
- package/dist/components/core/polymorph.d.ts +0 -10
- package/dist/components/core/polymorph.d.ts.map +0 -1
- package/dist/components/core/polymorph.js +0 -8
- package/dist/components/core/resizable.d.ts +0 -3
- package/dist/components/core/resizable.d.ts.map +0 -1
- package/dist/components/core/resizable.js +0 -50
- package/dist/components/core/tag.d.ts +0 -19
- package/dist/components/core/tag.d.ts.map +0 -1
- package/dist/components/core/tag.js +0 -45
- package/dist/components/display/alert.d.ts +0 -19
- package/dist/components/display/alert.d.ts.map +0 -1
- package/dist/components/display/alert.js +0 -34
- package/dist/components/display/calendar.d.ts +0 -42
- package/dist/components/display/calendar.d.ts.map +0 -1
- package/dist/components/display/calendar.js +0 -215
- package/dist/components/display/card.d.ts +0 -10
- package/dist/components/display/card.d.ts.map +0 -1
- package/dist/components/display/card.js +0 -8
- package/dist/components/display/list.d.ts +0 -16
- package/dist/components/display/list.d.ts.map +0 -1
- package/dist/components/display/list.js +0 -31
- package/dist/components/display/notifications.d.ts +0 -25
- package/dist/components/display/notifications.d.ts.map +0 -1
- package/dist/components/display/notifications.js +0 -70
- package/dist/components/display/stats.d.ts +0 -10
- package/dist/components/display/stats.d.ts.map +0 -1
- package/dist/components/display/stats.js +0 -5
- package/dist/components/display/tabs.d.ts +0 -20
- package/dist/components/display/tabs.d.ts.map +0 -1
- package/dist/components/display/tabs.js +0 -67
- package/dist/components/display/timeline.d.ts +0 -32
- package/dist/components/display/timeline.d.ts.map +0 -1
- package/dist/components/display/timeline.js +0 -21
- package/dist/components/floating/dropdown.d.ts +0 -14
- package/dist/components/floating/dropdown.d.ts.map +0 -1
- package/dist/components/floating/dropdown.js +0 -39
- package/dist/components/floating/expand.d.ts +0 -9
- package/dist/components/floating/expand.d.ts.map +0 -1
- package/dist/components/floating/expand.js +0 -25
- package/dist/components/floating/menu.d.ts +0 -52
- package/dist/components/floating/menu.d.ts.map +0 -1
- package/dist/components/floating/menu.js +0 -126
- package/dist/components/floating/modal.d.ts +0 -19
- package/dist/components/floating/modal.d.ts.map +0 -1
- package/dist/components/floating/modal.js +0 -102
- package/dist/components/floating/toolbar.d.ts +0 -6
- package/dist/components/floating/toolbar.d.ts.map +0 -1
- package/dist/components/floating/toolbar.js +0 -4
- package/dist/components/floating/tooltip.d.ts +0 -12
- package/dist/components/floating/tooltip.d.ts.map +0 -1
- package/dist/components/floating/tooltip.js +0 -28
- package/dist/components/form/autocomplete.d.ts +0 -17
- package/dist/components/form/autocomplete.d.ts.map +0 -1
- package/dist/components/form/autocomplete.js +0 -152
- package/dist/components/form/checkbox.d.ts +0 -11
- package/dist/components/form/checkbox.d.ts.map +0 -1
- package/dist/components/form/checkbox.js +0 -8
- package/dist/components/form/date-picker.d.ts +0 -61
- package/dist/components/form/date-picker.d.ts.map +0 -1
- package/dist/components/form/date-picker.js +0 -78
- package/dist/components/form/file-upload.d.ts +0 -12
- package/dist/components/form/file-upload.d.ts.map +0 -1
- package/dist/components/form/file-upload.js +0 -62
- package/dist/components/form/form.d.ts +0 -4
- package/dist/components/form/form.d.ts.map +0 -1
- package/dist/components/form/form.js +0 -28
- package/dist/components/form/input-field.d.ts +0 -30
- package/dist/components/form/input-field.d.ts.map +0 -1
- package/dist/components/form/input-field.js +0 -14
- package/dist/components/form/input.d.ts +0 -9
- package/dist/components/form/input.d.ts.map +0 -1
- package/dist/components/form/input.js +0 -38
- package/dist/components/form/radiobox.d.ts +0 -7
- package/dist/components/form/radiobox.d.ts.map +0 -1
- package/dist/components/form/radiobox.js +0 -7
- package/dist/components/form/select.d.ts +0 -13
- package/dist/components/form/select.d.ts.map +0 -1
- package/dist/components/form/select.js +0 -33
- package/dist/components/form/switch.d.ts +0 -8
- package/dist/components/form/switch.d.ts.map +0 -1
- package/dist/components/form/switch.js +0 -39
- package/dist/components/form/task-list.d.ts +0 -3
- package/dist/components/form/task-list.d.ts.map +0 -1
- package/dist/components/form/task-list.js +0 -26
- package/dist/components/form/transfer-list.d.ts +0 -14
- package/dist/components/form/transfer-list.d.ts.map +0 -1
- package/dist/components/form/transfer-list.js +0 -21
- package/dist/components/index.d.ts +0 -30
- package/dist/components/index.d.ts.map +0 -1
- package/dist/components/index.js +0 -29
- package/dist/components/table/filter.d.ts +0 -41
- package/dist/components/table/filter.d.ts.map +0 -1
- package/dist/components/table/filter.js +0 -91
- package/dist/components/table/group.d.ts +0 -17
- package/dist/components/table/group.d.ts.map +0 -1
- package/dist/components/table/group.js +0 -43
- package/dist/components/table/index.d.ts +0 -38
- package/dist/components/table/index.d.ts.map +0 -1
- package/dist/components/table/index.js +0 -145
- package/dist/components/table/metadata.d.ts +0 -3
- package/dist/components/table/metadata.d.ts.map +0 -1
- package/dist/components/table/metadata.js +0 -10
- package/dist/components/table/pagination.d.ts +0 -3
- package/dist/components/table/pagination.d.ts.map +0 -1
- package/dist/components/table/pagination.js +0 -43
- package/dist/components/table/sort.d.ts +0 -28
- package/dist/components/table/sort.d.ts.map +0 -1
- package/dist/components/table/sort.js +0 -79
- package/dist/components/table/table-lib.d.ts +0 -122
- package/dist/components/table/table-lib.d.ts.map +0 -1
- package/dist/components/table/table-lib.js +0 -51
- package/dist/components/table/thead.d.ts +0 -8
- package/dist/components/table/thead.d.ts.map +0 -1
- package/dist/components/table/thead.js +0 -29
- package/dist/constants.d.ts +0 -3
- package/dist/constants.d.ts.map +0 -1
- package/dist/constants.js +0 -2
- package/dist/hooks/use-callback-ref.d.ts +0 -3
- package/dist/hooks/use-callback-ref.d.ts.map +0 -1
- package/dist/hooks/use-callback-ref.js +0 -8
- package/dist/hooks/use-click-outside.d.ts +0 -3
- package/dist/hooks/use-click-outside.d.ts.map +0 -1
- package/dist/hooks/use-click-outside.js +0 -17
- package/dist/hooks/use-debounce.d.ts +0 -4
- package/dist/hooks/use-debounce.d.ts.map +0 -1
- package/dist/hooks/use-debounce.js +0 -12
- package/dist/hooks/use-form.d.ts +0 -41
- package/dist/hooks/use-form.d.ts.map +0 -1
- package/dist/hooks/use-form.js +0 -169
- package/dist/hooks/use-hover.d.ts +0 -3
- package/dist/hooks/use-hover.d.ts.map +0 -1
- package/dist/hooks/use-hover.js +0 -18
- package/dist/hooks/use-media-query.d.ts +0 -2
- package/dist/hooks/use-media-query.d.ts.map +0 -1
- package/dist/hooks/use-media-query.js +0 -25
- package/dist/hooks/use-mutable-state.d.ts +0 -2
- package/dist/hooks/use-mutable-state.d.ts.map +0 -1
- package/dist/hooks/use-mutable-state.js +0 -8
- package/dist/hooks/use-on-event.d.ts +0 -4
- package/dist/hooks/use-on-event.d.ts.map +0 -1
- package/dist/hooks/use-on-event.js +0 -7
- package/dist/hooks/use-parent.d.ts +0 -3
- package/dist/hooks/use-parent.d.ts.map +0 -1
- package/dist/hooks/use-parent.js +0 -21
- package/dist/hooks/use-previous.d.ts +0 -2
- package/dist/hooks/use-previous.d.ts.map +0 -1
- package/dist/hooks/use-previous.js +0 -8
- package/dist/hooks/use-reactive.d.ts +0 -2
- package/dist/hooks/use-reactive.d.ts.map +0 -1
- package/dist/hooks/use-reactive.js +0 -8
- package/dist/hooks/use-stable-ref.d.ts +0 -2
- package/dist/hooks/use-stable-ref.d.ts.map +0 -1
- package/dist/hooks/use-stable-ref.js +0 -8
- package/dist/hooks/use-translate-context.d.ts +0 -99
- package/dist/hooks/use-translate-context.d.ts.map +0 -1
- package/dist/hooks/use-translate-context.js +0 -53
- package/dist/index.d.ts +0 -12
- package/dist/index.d.ts.map +0 -1
- package/dist/lib/dom.d.ts +0 -9
- package/dist/lib/dom.d.ts.map +0 -1
- package/dist/lib/dom.js +0 -34
- package/dist/lib/fns.d.ts +0 -7
- package/dist/lib/fns.d.ts.map +0 -1
- package/dist/lib/fns.js +0 -26
- package/dist/styles/design-tokens.d.ts +0 -19
- package/dist/styles/design-tokens.d.ts.map +0 -1
- package/dist/styles/design-tokens.js +0 -52
- package/dist/styles/theme.d.ts +0 -4
- package/dist/styles/theme.d.ts.map +0 -1
- package/dist/styles/theme.js +0 -294
- package/dist/styles/theme.types.d.ts +0 -101
- package/dist/styles/theme.types.d.ts.map +0 -1
- package/dist/styles/theme.types.js +0 -1
- package/dist/types.d.ts +0 -10
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -1
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { LayoutGroup, Reorder, useDragControls, useMotionValue } from "framer-motion";
|
|
4
|
-
import Linq from "linq-arrays";
|
|
5
|
-
import { GripVerticalIcon, Trash2Icon, UngroupIcon } from "lucide-react";
|
|
6
|
-
import { Fragment, useState } from "react";
|
|
7
|
-
import { keys } from "sidekicker";
|
|
8
|
-
import { useTranslations } from "../../hooks/use-translate-context";
|
|
9
|
-
import { uuid } from "../../lib/fns";
|
|
10
|
-
import { Button } from "../core/button";
|
|
11
|
-
import { Dropdown } from "../floating/dropdown";
|
|
12
|
-
import { Select } from "../form/select";
|
|
13
|
-
import { createOptionCols } from "./table-lib";
|
|
14
|
-
const Item = ({ item, onPointerDown }) => {
|
|
15
|
-
const y = useMotionValue(0);
|
|
16
|
-
return (_jsxs(Reorder.Item, { onPointerDown: onPointerDown, id: item.groupId, className: "flex flex-row items-center gap-2", value: item, style: { y }, children: [_jsx("button", { type: "button", className: "cursor-grab", children: _jsx(GripVerticalIcon, { size: 14 }) }), _jsx("span", { children: item.groupName })] }, item.groupId));
|
|
17
|
-
};
|
|
18
|
-
export const Group = (props) => {
|
|
19
|
-
var _a;
|
|
20
|
-
const translations = useTranslations();
|
|
21
|
-
const options = createOptionCols(props.cols);
|
|
22
|
-
const controls = useDragControls();
|
|
23
|
-
const [group, setGroup] = useState(((_a = props.groups[0]) === null || _a === void 0 ? void 0 : _a.thead) || "");
|
|
24
|
-
const onChange = (e) => {
|
|
25
|
-
var _a;
|
|
26
|
-
const select = e.target;
|
|
27
|
-
const key = select.value;
|
|
28
|
-
const index = select.options.selectedIndex;
|
|
29
|
-
const label = ((_a = select.options.item(index)) === null || _a === void 0 ? void 0 : _a.label) || "";
|
|
30
|
-
setGroup(label);
|
|
31
|
-
const groupBy = new Linq(props.rows).GroupBy(key);
|
|
32
|
-
const col = props.cols.find((x) => x.id === key);
|
|
33
|
-
props.setGroups(keys(groupBy).map((groupName, index) => {
|
|
34
|
-
const rows = groupBy[groupName];
|
|
35
|
-
return Object.assign(Object.assign({}, col), { groupId: uuid(), groupKey: key, index, rows, groupName: groupName });
|
|
36
|
-
}));
|
|
37
|
-
};
|
|
38
|
-
const onDelete = () => props.setGroups([]);
|
|
39
|
-
return (_jsx(Fragment, { children: _jsxs(Dropdown, { arrow: false, title: translations.tableGroupLabel, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(UngroupIcon, { size: 14 }), translations.tableGroupLabelWithCount, props.groups.length > 0 ? ` - ${group}(${props.groups.length})` : ""] }), children: [_jsxs("div", { className: "flex flex-nowrap items-center", children: [_jsx(Select, { value: group, title: "Tipo de agrupamento", onChange: onChange, options: options, placeholder: "Agrupar por..." }), _jsx(Button, { className: "mt-4", onClick: onDelete, theme: "raw", "data-id": group, children: _jsx(Trash2Icon, { size: 16, className: "text-danger" }) })] }), props.groups.length > 0 ? (_jsxs("section", { className: "my-4", children: [_jsx("header", { children: _jsx("h2", { className: "text-xl font-medium", children: "Order groups" }) }), _jsx(LayoutGroup, { children: _jsx(Reorder.Group, { axis: "y", className: "relative space-y-2", drag: true, dragControls: controls, dragListener: false, layoutScroll: true, onReorder: props.setGroups, values: props.groups, children: props.groups.map((item) => (_jsx(Item, { item: item, onPointerDown: (e) => {
|
|
40
|
-
controls.start(e);
|
|
41
|
-
props.setGroups([...props.groups]);
|
|
42
|
-
} }, item.groupId))) }) })] })) : null] }) }));
|
|
43
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React, { HTMLAttributes } from "react";
|
|
2
|
-
import { OptionProps } from "../form/select";
|
|
3
|
-
import { FilterConfig } from "./filter";
|
|
4
|
-
import { GroupItem } from "./group";
|
|
5
|
-
import { Sorter } from "./sort";
|
|
6
|
-
import { Col, TableOperationProps } from "./table-lib";
|
|
7
|
-
type InnerTableProps<T extends {}> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
|
|
8
|
-
border?: boolean;
|
|
9
|
-
useControl?: boolean;
|
|
10
|
-
loading?: boolean;
|
|
11
|
-
group?: GroupItem<T>;
|
|
12
|
-
groups?: GroupItem<T>[];
|
|
13
|
-
optionCols: OptionProps[];
|
|
14
|
-
index: number;
|
|
15
|
-
rows: T[];
|
|
16
|
-
cols: Col<T>[];
|
|
17
|
-
sorters?: Sorter<T>[];
|
|
18
|
-
showMetadata?: boolean;
|
|
19
|
-
filters?: FilterConfig<T>[];
|
|
20
|
-
setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
|
|
21
|
-
onScrollEnd?: () => void;
|
|
22
|
-
loadingMore?: boolean;
|
|
23
|
-
};
|
|
24
|
-
export type TableProps<T extends {}> = Pick<InnerTableProps<T>, "cols" | "rows" | "loadingMore" | "border"> & {
|
|
25
|
-
name: string;
|
|
26
|
-
} & Partial<TableOperationProps<T> & {
|
|
27
|
-
inlineFilter: boolean;
|
|
28
|
-
inlineSorter: boolean;
|
|
29
|
-
loading: boolean;
|
|
30
|
-
onScrollEnd: () => void;
|
|
31
|
-
operations: boolean;
|
|
32
|
-
reference: keyof T;
|
|
33
|
-
sticky: number;
|
|
34
|
-
useControl: boolean;
|
|
35
|
-
}>;
|
|
36
|
-
export declare const Table: <T extends {}>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
-
export {};
|
|
38
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2B,cAAc,EAAoD,MAAM,OAAO,CAAC;AAMzH,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAoB,GAAG,EAA+B,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAStG,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACjE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AA6KN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GAAG;IAC1G,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACH,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;CACvB,CACJ,CAAC;AASN,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,4CA6GvD,CAAC"}
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
import { __rest } from "tslib";
|
|
2
|
-
import { createElement as _createElement } from "react";
|
|
3
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { AnimatePresence, motion } from "framer-motion";
|
|
5
|
-
import Linq from "linq-arrays";
|
|
6
|
-
import React, { createContext, Fragment, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
7
|
-
import { TableVirtuoso } from "react-virtuoso";
|
|
8
|
-
import { Is } from "sidekicker";
|
|
9
|
-
import { useReducer } from "use-typed-reducer";
|
|
10
|
-
import { useCallbackRef } from "../../hooks/use-callback-ref";
|
|
11
|
-
import { path } from "../../lib/fns";
|
|
12
|
-
import { Metadata } from "./metadata";
|
|
13
|
-
import { Pagination } from "./pagination";
|
|
14
|
-
import { multiSort } from "./sort";
|
|
15
|
-
import { createOptionCols } from "./table-lib";
|
|
16
|
-
import { TableHeader } from "./thead";
|
|
17
|
-
const TableContext = createContext({});
|
|
18
|
-
const useTable = () => useContext(TableContext);
|
|
19
|
-
const TableBody = React.forwardRef((props, ref) => {
|
|
20
|
-
var _a;
|
|
21
|
-
return (_jsx("tbody", Object.assign({}, props, { role: "rowgroup", className: `divide-y divide-table-border ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) })));
|
|
22
|
-
});
|
|
23
|
-
const VirtualTable = React.forwardRef((props, ref) => {
|
|
24
|
-
var _a;
|
|
25
|
-
return (_jsx("table", Object.assign({}, props, { ref: ref, role: "table", className: `table min-w-full table-auto divide-y divide-table-border text-left ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
|
|
26
|
-
});
|
|
27
|
-
const Thead = React.forwardRef((_a, ref) => {
|
|
28
|
-
var _b;
|
|
29
|
-
var { context } = _a, props = __rest(_a, ["context"]);
|
|
30
|
-
const ctx = useTable();
|
|
31
|
-
const style = Object.assign(Object.assign({}, props.style), { sticky: Is.number(ctx.sticky) ? `${ctx.sticky}px` : (_b = props.style) === null || _b === void 0 ? void 0 : _b.sticky });
|
|
32
|
-
return _jsx("thead", Object.assign({}, props, { style: style, role: "rowgroup", className: "shadow-xs group:sticky top-0 bg-card-background", ref: ref }));
|
|
33
|
-
});
|
|
34
|
-
const TRow = React.forwardRef((_a, ref) => {
|
|
35
|
-
var _b;
|
|
36
|
-
var { context, item } = _a, props = __rest(_a, ["context", "item"]);
|
|
37
|
-
return (_jsx("tr", Object.assign({}, props, { role: "row", ref: ref, className: `table-row ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` })));
|
|
38
|
-
});
|
|
39
|
-
const TFoot = React.forwardRef((props, ref) => {
|
|
40
|
-
if (props.context.loadingMore) {
|
|
41
|
-
return (_jsx("tfoot", Object.assign({}, props, { ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "h-14 bg-card-background px-2", children: _jsx("span", { className: "block h-2 w-full animate-pulse rounded bg-foreground opacity-60" }) }) }) })));
|
|
42
|
-
}
|
|
43
|
-
return null;
|
|
44
|
-
});
|
|
45
|
-
const components = {
|
|
46
|
-
TableHead: Thead,
|
|
47
|
-
Table: VirtualTable,
|
|
48
|
-
TableBody: TableBody,
|
|
49
|
-
TableRow: TRow,
|
|
50
|
-
TableFoot: TFoot,
|
|
51
|
-
};
|
|
52
|
-
const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
|
53
|
-
const ItemContent = (index, row, context) => {
|
|
54
|
-
const cols = context.cols;
|
|
55
|
-
const loading = context.loading;
|
|
56
|
-
return (_jsx(Fragment, { children: cols.map((col, colIndex) => {
|
|
57
|
-
var _a;
|
|
58
|
-
const matrix = `${colIndex},${index}`;
|
|
59
|
-
const value = path(row, col.id);
|
|
60
|
-
const Component = col.Element;
|
|
61
|
-
const className = ((_a = col.cellProps) === null || _a === void 0 ? void 0 : _a.className) || "";
|
|
62
|
-
return (_createElement("td", Object.assign({}, col.cellProps, { role: "cell", "data-matrix": matrix, key: `accessor-${index}-${colIndex}`, className: `hidden h-14 border-none px-2 first:table-cell md:table-cell ${className}` }), loading ? (_jsx("div", { className: "h-2 w-10/12 animate-pulse rounded bg-table-border" })) : Component ? (_jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value }))));
|
|
63
|
-
}) }));
|
|
64
|
-
};
|
|
65
|
-
const Frag = () => _jsx(Fragment, {});
|
|
66
|
-
const InnerTable = (_a) => {
|
|
67
|
-
var { filters, pagination = null, onScrollEnd, useControl = false, setCols, setFilters, sorters, cols, border = false, setSorters } = _a, props = __rest(_a, ["filters", "pagination", "onScrollEnd", "useControl", "setCols", "setFilters", "sorters", "cols", "border", "setSorters"]);
|
|
68
|
-
const ref = useRef(null);
|
|
69
|
-
const [showLoadingFooter, setShowLoadingFooter] = useState(false);
|
|
70
|
-
const onScrollEndRef = useCallbackRef(onScrollEnd);
|
|
71
|
-
const loadingMoreRef = useCallbackRef(props.loadingMore);
|
|
72
|
-
const rows = useMemo(() => {
|
|
73
|
-
if (props.loading)
|
|
74
|
-
return loadingArray;
|
|
75
|
-
if (useControl)
|
|
76
|
-
return props.rows;
|
|
77
|
-
const linq = new Linq(props.rows);
|
|
78
|
-
if (filters.length > 0) {
|
|
79
|
-
filters.forEach((x) => x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value));
|
|
80
|
-
}
|
|
81
|
-
if (sorters.length === 0)
|
|
82
|
-
return linq.Select();
|
|
83
|
-
return multiSort(linq.Select(), sorters);
|
|
84
|
-
}, [props.rows, filters, sorters, props.loading]);
|
|
85
|
-
useEffect(() => {
|
|
86
|
-
if (ref.current === null) {
|
|
87
|
-
return () => { };
|
|
88
|
-
}
|
|
89
|
-
const div = ref.current;
|
|
90
|
-
const observer = new IntersectionObserver((entries) => {
|
|
91
|
-
var _a;
|
|
92
|
-
const endOfPage = entries[entries.length - 1];
|
|
93
|
-
const condition = endOfPage.isIntersecting && loadingMoreRef.current;
|
|
94
|
-
if (condition) {
|
|
95
|
-
(_a = onScrollEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onScrollEndRef);
|
|
96
|
-
return void setShowLoadingFooter(true);
|
|
97
|
-
}
|
|
98
|
-
return setShowLoadingFooter(false);
|
|
99
|
-
});
|
|
100
|
-
observer.observe(div);
|
|
101
|
-
return () => observer.disconnect();
|
|
102
|
-
}, []);
|
|
103
|
-
return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group rounded-lg px-1 ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { data: rows, useWindowScroll: true, components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { filters: filters, headers: cols, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, loading: !!props.loading, setCols: setCols, setFilters: setFilters, setSorters: setSorters, sorters: sorters })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, Object.assign({}, pagination)) : null] }));
|
|
104
|
-
};
|
|
105
|
-
const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
|
|
106
|
-
const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec === null || exec === void 0 ? void 0 : exec(state));
|
|
107
|
-
export const Table = (props) => {
|
|
108
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
109
|
-
const contextState = useMemo(() => ({ sticky: props.sticky }), [props.sticky]);
|
|
110
|
-
const operations = (_a = props.operations) !== null && _a !== void 0 ? _a : true;
|
|
111
|
-
const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);
|
|
112
|
-
const [state, dispatch] = useReducer({
|
|
113
|
-
cols: props.cols,
|
|
114
|
-
filters: ((_b = props.filters) !== null && _b !== void 0 ? _b : []),
|
|
115
|
-
groups: ((_c = props.groups) !== null && _c !== void 0 ? _c : []),
|
|
116
|
-
sorters: ((_d = props.sorters) !== null && _d !== void 0 ? _d : []),
|
|
117
|
-
}, (get) => {
|
|
118
|
-
const create = (key) => (arg) => {
|
|
119
|
-
const state = get.state();
|
|
120
|
-
return Object.assign(Object.assign({}, state), { [key]: dispatcherFun(state[key], arg) });
|
|
121
|
-
};
|
|
122
|
-
return {
|
|
123
|
-
cols: create("cols"),
|
|
124
|
-
filters: create("filters"),
|
|
125
|
-
groups: create("groups"),
|
|
126
|
-
sorters: create("sorters"),
|
|
127
|
-
};
|
|
128
|
-
}, {
|
|
129
|
-
postMiddleware: [
|
|
130
|
-
(state, prev) => {
|
|
131
|
-
var _a;
|
|
132
|
-
(_a = props.set) === null || _a === void 0 ? void 0 : _a.call(props, state);
|
|
133
|
-
compareAndExec(prev.filters, state.filters, props.setFilters);
|
|
134
|
-
compareAndExec(prev.sorters, state.sorters, props.setSorters);
|
|
135
|
-
compareAndExec(prev.groups, state.groups, props.setGroups);
|
|
136
|
-
compareAndExec(prev.cols, state.cols, props.setCols);
|
|
137
|
-
return state;
|
|
138
|
-
},
|
|
139
|
-
],
|
|
140
|
-
});
|
|
141
|
-
return (_jsx(TableContext.Provider, { value: contextState, children: _jsxs("div", { className: "relative min-w-full", children: [operations ? (_jsx(Metadata, { cols: state.cols, filters: state.filters, groups: state.groups, inlineFilter: (_e = props.inlineFilter) !== null && _e !== void 0 ? _e : true, inlineSorter: (_f = props.inlineSorter) !== null && _f !== void 0 ? _f : true, options: optionCols, pagination: (_g = props.pagination) !== null && _g !== void 0 ? _g : null, rows: props.rows, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters })) : null, state.groups.length === 0 ? (_jsx(InnerTable, Object.assign({}, props, { inlineFilter: (_h = props.inlineFilter) !== null && _h !== void 0 ? _h : true, inlineSorter: (_j = props.inlineSorter) !== null && _j !== void 0 ? _j : true, onScrollEnd: props.onScrollEnd, cols: state.cols, filters: state.filters, groups: state.groups, index: 0, optionCols: optionCols, options: optionCols, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters, pagination: (_k = props.pagination) !== null && _k !== void 0 ? _k : null }))) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => {
|
|
142
|
-
var _a, _b;
|
|
143
|
-
return (_jsx(motion.div, { className: "min-w-full", children: _jsx(InnerTable, Object.assign({}, props, { inlineFilter: (_a = props.inlineFilter) !== null && _a !== void 0 ? _a : true, inlineSorter: (_b = props.inlineSorter) !== null && _b !== void 0 ? _b : true, pagination: null, onScrollEnd: props.onScrollEnd, cols: state.cols, filters: state.filters, group: group, groups: state.groups, index: index, optionCols: optionCols, options: optionCols, rows: group.rows, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters })) }, `group-${group.groupId}`));
|
|
144
|
-
}) }))] }) }));
|
|
145
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/table/metadata.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAiB,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,EAAE,SAAS,mBAAmB,CAAC,CAAC,CAAC,4CAiDnE,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Filter } from "./filter";
|
|
3
|
-
import { Group } from "./group";
|
|
4
|
-
import { Sort } from "./sort";
|
|
5
|
-
import { valueFromType } from "./table-lib";
|
|
6
|
-
export const Metadata = (props) => (_jsx("header", { className: "min-w-full mb-1", children: _jsxs("div", { className: "flex flex-wrap min-w-full items-center justify-between gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex w-fit items-centeend gap-4 whitespace-nowrap py-2", children: [_jsx("span", { children: _jsx(Filter, { cols: props.cols, options: props.options, filters: props.filters, set: props.setFilters }) }), _jsx("span", { children: _jsx(Sort, { options: props.options, cols: props.cols, sorters: props.sorters, set: props.setSorters }) }), _jsx("span", { children: _jsx(Group, { rows: props.rows, groups: props.groups, setGroups: props.setGroups, options: props.options, cols: props.cols }) })] }), _jsx("ul", { className: "flex flex-wrap w-full flex-1 flex-grow flex-row items-center md:justify-end gap-4", children: props.filters.map((x) => (_jsxs("li", { className: "flex gap-1 items-center rounded-xl border border-card-border px-4 py-0.5", children: [_jsxs("span", { children: [_jsx("span", { className: "size-3 mr-2 aspect-square bg-primary inline-block rounded-full", "aria-hidden": "true" }), x.label, " ", x.operation.label.toLowerCase(), ":"] }), _jsxs("div", { className: "relative w-min min-w-[1ch]", children: [_jsx("span", { "aria-hidden": "true", className: "invisible whitespace-pre p-0", children: x.value || " " }), _jsx("input", { type: x.type, value: x.value, className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", onChange: (e) => {
|
|
7
|
-
const value = valueFromType(e.target);
|
|
8
|
-
props.setFilters((prev) => prev.map((item) => x.id === item.id
|
|
9
|
-
? Object.assign(Object.assign({}, item), { value }) : item));
|
|
10
|
-
} })] })] }, `filter-table-${x.id}`))) })] }) }));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAwB9C,eAAO,MAAM,UAAU,eAAgB,eAAe,4CAyErD,CAAC"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Fragment, useId, useMemo } from "react";
|
|
3
|
-
import { useTranslations } from "../../hooks/use-translate-context";
|
|
4
|
-
function createPaginationItems(current, max) {
|
|
5
|
-
if (!current || !max)
|
|
6
|
-
return [];
|
|
7
|
-
const items = [1];
|
|
8
|
-
if (current === 1 && max === 1)
|
|
9
|
-
return items;
|
|
10
|
-
if (current > 4)
|
|
11
|
-
items.push("-");
|
|
12
|
-
let r = 2;
|
|
13
|
-
const r1 = current - r;
|
|
14
|
-
const r2 = current + r;
|
|
15
|
-
for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++)
|
|
16
|
-
items.push(i);
|
|
17
|
-
const p2 = max - 2;
|
|
18
|
-
if (r2 + 1 !== p2) {
|
|
19
|
-
if (r2 + 1 < max)
|
|
20
|
-
items.push("_");
|
|
21
|
-
}
|
|
22
|
-
if (r2 < max) {
|
|
23
|
-
items.push(max - 2);
|
|
24
|
-
items.push(max - 1);
|
|
25
|
-
items.push(max);
|
|
26
|
-
}
|
|
27
|
-
return Array.from(new Set(items));
|
|
28
|
-
}
|
|
29
|
-
export const Pagination = (pagination) => {
|
|
30
|
-
const id = useId();
|
|
31
|
-
const translation = useTranslations();
|
|
32
|
-
const Render = pagination.asLink || "button";
|
|
33
|
-
const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
|
|
34
|
-
const hasNext = pagination.current < pagination.pages;
|
|
35
|
-
return (_jsxs("footer", { className: "flex px-1 py-4 items-center justify-center gap-4 lg:justify-between flex-wrap lg:flex-nowrap", children: [_jsx("p", { children: _jsx(translation.tablePaginationFooter, Object.assign({}, pagination, { sizes: pagination.sizes, select: pagination.onChangeSize && Array.isArray(pagination.sizes) ? (_jsxs(Fragment, { children: [_jsx("label", { htmlFor: id, children: translation.tablePaginationSelectLabel }), _jsx("select", { id: id, value: pagination.size, className: "cursor-pointer bg-transparent", onChange: (e) => {
|
|
36
|
-
var _a;
|
|
37
|
-
(_a = pagination.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(pagination, Number(e.target.value));
|
|
38
|
-
}, children: pagination.sizes.map((value) => (_jsx("option", { value: value, children: value }, `pagination-opt-${value}`))) }), " "] })) : null })) }), _jsx("nav", { children: _jsxs("ul", { className: "flex items-center gap-2", children: [pagination.current > 1 ? (_jsx("li", { children: _jsx(Render, { href: "previous", className: "", children: translation.tablePaginationPrevious }) })) : null, pageNavigation.map((x) => {
|
|
39
|
-
if (x === null)
|
|
40
|
-
return null;
|
|
41
|
-
return (_jsx(Fragment, { children: typeof x === "string" ? (_jsx("li", { children: "..." })) : (_jsx("li", { children: _jsx(Render, { href: x, className: `cursor-pointer px-3 py-1 transition-colors border-b-2 hover:text-primary-subtle hover:border-primary-subtle proportional-nums ${x === pagination.current ? "text-primary border-primary" : "border-transparent"}`, children: x }) })) }, `pagination-${x}`));
|
|
42
|
-
}), hasNext ? (_jsx("li", { children: _jsx(Render, { href: "next", className: "", children: translation.tablePaginationNext }) })) : null] }) })] }));
|
|
43
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Label } from "../../types";
|
|
3
|
-
import { Col, TableConfiguration, TableOperationProps } from "./table-lib";
|
|
4
|
-
type Keyof<T extends {}> = keyof T extends infer R extends string ? R : never;
|
|
5
|
-
declare enum Order {
|
|
6
|
-
Asc = "asc",
|
|
7
|
-
Desc = "desc",
|
|
8
|
-
Undefined = "undefined"
|
|
9
|
-
}
|
|
10
|
-
export type Sorter<T extends {}> = {
|
|
11
|
-
value: Keyof<T>;
|
|
12
|
-
type: Order;
|
|
13
|
-
label: Label;
|
|
14
|
-
id: string;
|
|
15
|
-
};
|
|
16
|
-
export declare const multiSort: <T extends {}>(array: T[], fields: Sorter<T>[]) => T[];
|
|
17
|
-
type Props<T extends {}> = TableConfiguration<T, {
|
|
18
|
-
cols: Col<T>[];
|
|
19
|
-
sorters: Sorter<T>[];
|
|
20
|
-
set: React.Dispatch<React.SetStateAction<Sorter<T>[]>>;
|
|
21
|
-
}>;
|
|
22
|
-
export declare const Sort: <T extends {}>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
type SorterHeadProps<T extends {}> = Pick<TableOperationProps<T>, "sorters" | "setSorters"> & {
|
|
24
|
-
col: Col<T>;
|
|
25
|
-
};
|
|
26
|
-
export declare const SorterHead: <T extends {}>(props: SorterHeadProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export {};
|
|
28
|
-
//# sourceMappingURL=sort.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE9E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY9F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,QAA2C,CAAC;AAEnH,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA0EjD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE9G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,4CAkCjE,CAAC"}
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { ArrowDown01Icon, ArrowUp01Icon, ArrowUpDownIcon, PlusIcon, Trash2Icon } from "lucide-react";
|
|
4
|
-
import { Fragment, useEffect, useState } from "react";
|
|
5
|
-
import { useTranslations } from "../../hooks/use-translate-context";
|
|
6
|
-
import { uuid } from "../../lib/fns";
|
|
7
|
-
import { Dropdown } from "../floating/dropdown";
|
|
8
|
-
import { Select } from "../form/select";
|
|
9
|
-
import { getLabel } from "./table-lib";
|
|
10
|
-
var Order;
|
|
11
|
-
(function (Order) {
|
|
12
|
-
Order["Asc"] = "asc";
|
|
13
|
-
Order["Desc"] = "desc";
|
|
14
|
-
Order["Undefined"] = "undefined";
|
|
15
|
-
})(Order || (Order = {}));
|
|
16
|
-
const createSorterFn = (fields) => (a, b) => fields.reduce((acc, x) => {
|
|
17
|
-
const reverse = x.type === "desc" ? -1 : 1;
|
|
18
|
-
const property = x.value;
|
|
19
|
-
const p = a[property] > b[property] ? reverse : a[property] < b[property] ? -reverse : 0;
|
|
20
|
-
return acc !== 0 ? acc : p;
|
|
21
|
-
}, 0);
|
|
22
|
-
export const multiSort = (array, fields) => array.toSorted(createSorterFn(fields));
|
|
23
|
-
const createSorter = (col, label, order) => ({
|
|
24
|
-
id: uuid(),
|
|
25
|
-
type: order,
|
|
26
|
-
value: col.id,
|
|
27
|
-
label,
|
|
28
|
-
});
|
|
29
|
-
export const Sort = (props) => {
|
|
30
|
-
const translation = useTranslations();
|
|
31
|
-
const orders = {
|
|
32
|
-
asc: { label: translation.tableSortAsc, value: Order.Asc },
|
|
33
|
-
desc: { label: translation.tableSortDesc, value: Order.Desc },
|
|
34
|
-
};
|
|
35
|
-
const orderOptions = [orders.asc, orders.desc];
|
|
36
|
-
const onAddSorter = () => {
|
|
37
|
-
const col = props.cols[0];
|
|
38
|
-
if (col)
|
|
39
|
-
props.set((prev) => [...prev, createSorter(col, orders.asc.label, orders.asc.value)]);
|
|
40
|
-
};
|
|
41
|
-
const onSetSorter = (id) => (e) => {
|
|
42
|
-
const value = e.target.value;
|
|
43
|
-
props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { value: value }) : x)));
|
|
44
|
-
};
|
|
45
|
-
const onSortOrderType = (id) => (e) => {
|
|
46
|
-
const type = e.target.value;
|
|
47
|
-
props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { type: type }) : x)));
|
|
48
|
-
};
|
|
49
|
-
const onDelete = (e) => {
|
|
50
|
-
const id = e.currentTarget.dataset.id || "";
|
|
51
|
-
props.set((prev) => prev.filter((x) => x.id !== id));
|
|
52
|
-
};
|
|
53
|
-
return (_jsx(Fragment, { children: _jsx(Dropdown, { title: translation.tableSortDropdownTitle, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ArrowUpDownIcon, { size: 14 }), translation.tableSortOrderByLabel, " ", props.sorters.length === 0 ? "" : ` (${props.sorters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.sorters.map((sorter) => {
|
|
54
|
-
return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { options: props.options, value: sorter.value, onChange: onSetSorter(sorter.id), title: translation.tableSortOrderInputTitle, placeholder: translation.tableSortOrderInputPlaceholder }), _jsx(Select, { onChange: onSortOrderType(sorter.id), value: sorter.type, options: orderOptions, title: translation.tableSortTypeInputTitle, placeholder: translation.tableSortTypeInputPlaceholder }), _jsx("button", { className: "mt-4", "data-id": sorter.id, onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }, `sorter-select-${sorter.id}`));
|
|
55
|
-
}), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddSorter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableSortAddButton] }) })] }) }) }));
|
|
56
|
-
};
|
|
57
|
-
export const SorterHead = (props) => {
|
|
58
|
-
const translations = useTranslations();
|
|
59
|
-
const [status, setStatus] = useState(() => {
|
|
60
|
-
const sorter = props.sorters.find((sort) => sort.value === props.col.id);
|
|
61
|
-
return sorter ? sorter.type : Order.Undefined;
|
|
62
|
-
});
|
|
63
|
-
const onClick = () => setStatus((prev) => (prev === Order.Undefined ? Order.Asc : prev === Order.Asc ? Order.Desc : Order.Undefined));
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
props.setSorters((prev) => {
|
|
66
|
-
if (status === Order.Undefined)
|
|
67
|
-
return prev.filter((x) => x.value !== props.col.id);
|
|
68
|
-
const findIndex = prev.findIndex((p) => p.value === props.col.id);
|
|
69
|
-
const sorter = createSorter(props.col, status, status);
|
|
70
|
-
if (findIndex === -1)
|
|
71
|
-
return [...prev, sorter];
|
|
72
|
-
prev[findIndex] = sorter;
|
|
73
|
-
return [...prev];
|
|
74
|
-
});
|
|
75
|
-
}, [status, props.col]);
|
|
76
|
-
const labelId = `${props.col.id}-sorter-id`;
|
|
77
|
-
const label = getLabel(props.col);
|
|
78
|
-
return (_jsxs("button", { "aria-labelledby": labelId, className: "isolate flex items-center", onClick: onClick, type: "button", children: [_jsxs("span", { id: labelId, className: "sr-only", children: [translations.tableSortDropdownTitle, " ", label] }), status === Order.Asc ? _jsx(ArrowUp01Icon, { size: 14 }) : null, status === Order.Desc ? _jsx(ArrowDown01Icon, { size: 14 }) : null, status === Order.Undefined ? _jsx(ArrowUpDownIcon, { size: 14 }) : null] }));
|
|
79
|
-
};
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { AllPaths } from "sidekicker";
|
|
3
|
-
import { POJO, SetState } from "../../types";
|
|
4
|
-
import { OptionProps } from "../form/select";
|
|
5
|
-
import { FilterConfig } from "./filter";
|
|
6
|
-
import { GroupItem } from "./group";
|
|
7
|
-
import { Sorter } from "./sort";
|
|
8
|
-
export declare const getLabel: <T extends POJO>(col: Col<T>) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
|
|
9
|
-
export type TableConfiguration<T extends POJO, M extends POJO = {}> = M & {
|
|
10
|
-
cols: Col<T>[];
|
|
11
|
-
options: OptionProps[];
|
|
12
|
-
};
|
|
13
|
-
export declare const createOptionCols: <T extends POJO>(cols: Col<T>[]) => OptionProps[];
|
|
14
|
-
export declare enum ColType {
|
|
15
|
-
Boolean = "boolean",
|
|
16
|
-
Number = "number",
|
|
17
|
-
Select = "select",
|
|
18
|
-
Text = "text"
|
|
19
|
-
}
|
|
20
|
-
export declare const valueFromType: (input: HTMLInputElement) => string | number;
|
|
21
|
-
type THead = React.ReactElement | React.ReactNode;
|
|
22
|
-
export type ColMatrix = `${number},${number}`;
|
|
23
|
-
type ParsePath<path, output extends string[] = [], currentChunk extends string = ""> = path extends number ? [`${path}`] : path extends `${infer first}${infer rest}` ? first extends "." | "[" | "]" ? ParsePath<rest, [...output, ...(currentChunk extends "" ? [] : [currentChunk])], ""> : ParsePath<rest, output, `${currentChunk}${first}`> : [...output, ...(currentChunk extends "" ? [] : [currentChunk])];
|
|
24
|
-
type RecursiveGet<Obj, pathList> = Obj extends any ? pathList extends [infer first, ...infer rest] ? first extends keyof Obj ? RecursiveGet<Obj[first], rest> : [first, Obj] extends [`${number}` | "number", readonly any[]] ? RecursiveGet<Extract<Obj, any[]>[number], rest> : undefined : Obj : never;
|
|
25
|
-
type GetFromPath<Obj, path> = RecursiveGet<Obj, ParsePath<path>>;
|
|
26
|
-
export type CellPropsElement<T extends POJO, K extends AllPaths<T>> = {
|
|
27
|
-
row: T;
|
|
28
|
-
value: GetFromPath<T, K>;
|
|
29
|
-
rowIndex: number;
|
|
30
|
-
matrix: ColMatrix;
|
|
31
|
-
col: ColOptions<T, K> & {
|
|
32
|
-
id: K;
|
|
33
|
-
thead: THead;
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
type ColOptions<T extends POJO, K extends AllPaths<T>> = Partial<{
|
|
37
|
-
type: ColType;
|
|
38
|
-
headerLabel: string;
|
|
39
|
-
allowFilter: boolean;
|
|
40
|
-
thProps: React.HTMLAttributes<HTMLTableCellElement>;
|
|
41
|
-
cellProps: React.HTMLAttributes<HTMLTableCellElement>;
|
|
42
|
-
Element: (props: CellPropsElement<T, K>) => React.ReactNode;
|
|
43
|
-
}>;
|
|
44
|
-
export type ColConstructor<T extends POJO> = {
|
|
45
|
-
remove: <K extends AllPaths<T>>(id: K) => void;
|
|
46
|
-
add: <K extends AllPaths<T>>(id: K, thead: THead, props?: ColOptions<T, K>) => void;
|
|
47
|
-
};
|
|
48
|
-
declare const cols: <T extends POJO>() => <K extends AllPaths<T>>(id: K, thead: THead, options: ColOptions<T, K>) => {
|
|
49
|
-
id: K;
|
|
50
|
-
thead: THead;
|
|
51
|
-
type?: ColType | undefined;
|
|
52
|
-
headerLabel?: string | undefined;
|
|
53
|
-
allowFilter?: boolean | undefined;
|
|
54
|
-
thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
|
|
55
|
-
cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
|
|
56
|
-
Element?: ((props: CellPropsElement<T, K>) => React.ReactNode) | undefined;
|
|
57
|
-
};
|
|
58
|
-
export type Col<T extends POJO> = ReturnType<ReturnType<typeof cols<T>>>;
|
|
59
|
-
export type TablePagination = {
|
|
60
|
-
sizes?: number[];
|
|
61
|
-
onChangeSize?: (size: number) => void;
|
|
62
|
-
size: number;
|
|
63
|
-
pages: number;
|
|
64
|
-
current: number;
|
|
65
|
-
hasNext: boolean;
|
|
66
|
-
totalItems: number;
|
|
67
|
-
hasPrevious: boolean;
|
|
68
|
-
asLink?: React.FC<React.PropsWithChildren<{
|
|
69
|
-
href: number | "previous" | "next";
|
|
70
|
-
className: string;
|
|
71
|
-
}>>;
|
|
72
|
-
};
|
|
73
|
-
type TableGetters<T extends POJO> = {
|
|
74
|
-
rows: T[];
|
|
75
|
-
cols: Col<T>[];
|
|
76
|
-
sorters: Sorter<T>[];
|
|
77
|
-
groups: GroupItem<T>[];
|
|
78
|
-
filters: FilterConfig<T>[];
|
|
79
|
-
pagination: TablePagination | null;
|
|
80
|
-
};
|
|
81
|
-
type TableSetters<T extends POJO> = {
|
|
82
|
-
setCols: SetState<Col<T>[]>;
|
|
83
|
-
setSorters: SetState<Sorter<T>[]>;
|
|
84
|
-
setGroups: SetState<GroupItem<T>[]>;
|
|
85
|
-
setFilters: SetState<FilterConfig<T>[]>;
|
|
86
|
-
};
|
|
87
|
-
export type TableOperationProps<T extends POJO> = TableConfiguration<T, TableSetters<T> & TableGetters<T> & {
|
|
88
|
-
set?: (v: TableGetters<T>) => void;
|
|
89
|
-
} & {
|
|
90
|
-
inlineSorter: boolean;
|
|
91
|
-
inlineFilter: boolean;
|
|
92
|
-
}>;
|
|
93
|
-
export declare const createColumns: <T extends POJO>(callback: (o: ColConstructor<T>) => void) => {
|
|
94
|
-
id: AllPaths<T, never>;
|
|
95
|
-
thead: THead;
|
|
96
|
-
type?: ColType | undefined;
|
|
97
|
-
headerLabel?: string | undefined;
|
|
98
|
-
allowFilter?: boolean | undefined;
|
|
99
|
-
thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
|
|
100
|
-
cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
|
|
101
|
-
Element?: ((props: CellPropsElement<T, AllPaths<T, never>>) => React.ReactNode) | undefined;
|
|
102
|
-
}[];
|
|
103
|
-
export declare const useTablePreferences: <T extends POJO>(name: string, options?: Partial<TableGetters<T>>) => {
|
|
104
|
-
name: string;
|
|
105
|
-
set: (getters: TableGetters<T>) => void;
|
|
106
|
-
cols: {
|
|
107
|
-
id: AllPaths<T, never>;
|
|
108
|
-
thead: THead;
|
|
109
|
-
type?: ColType | undefined;
|
|
110
|
-
headerLabel?: string | undefined;
|
|
111
|
-
allowFilter?: boolean | undefined;
|
|
112
|
-
thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
|
|
113
|
-
cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
|
|
114
|
-
Element?: ((props: CellPropsElement<T, AllPaths<T, never>>) => React.ReactNode) | undefined;
|
|
115
|
-
}[];
|
|
116
|
-
groups: GroupItem<T>[];
|
|
117
|
-
sorters: Sorter<T>[];
|
|
118
|
-
filters: FilterConfig<T>[];
|
|
119
|
-
pagination: TablePagination | null;
|
|
120
|
-
};
|
|
121
|
-
export {};
|
|
122
|
-
//# sourceMappingURL=table-lib.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-lib.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,+HAAuD,CAAC;AAE5G,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,IAAI,GAAG,EAAE,IAAI,CAAC,GAAG;IACtE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,IAAI,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,KAAG,WAAW,EAItE,CAAC;AAER,oBAAY,OAAO;IACf,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;CAChB;AAED,eAAO,MAAM,aAAa,UAAW,gBAAgB,oBAAkE,CAAC;AAExH,KAAK,KAAK,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,CAAC;AAG9C,KAAK,SAAS,CAAC,IAAI,EAAE,MAAM,SAAS,MAAM,EAAE,GAAG,EAAE,EAAE,YAAY,SAAS,MAAM,GAAG,EAAE,IAAI,IAAI,SAAS,MAAM,GACpG,CAAC,GAAG,IAAI,EAAE,CAAC,GACX,IAAI,SAAS,GAAG,MAAM,KAAK,GAAG,MAAM,IAAI,EAAE,GACxC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GACzB,SAAS,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,EAAE,GAAG,CAAC,YAAY,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GACpF,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,YAAY,GAAG,KAAK,EAAE,CAAC,GACtD,CAAC,GAAG,MAAM,EAAE,GAAG,CAAC,YAAY,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;AAExE,KAAK,YAAY,CAAC,GAAG,EAAE,QAAQ,IAAI,GAAG,SAAS,GAAG,GAC5C,QAAQ,SAAS,CAAC,MAAM,KAAK,EAAE,GAAG,MAAM,IAAI,CAAC,GACzC,KAAK,SAAS,MAAM,GAAG,GACnB,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAC9B,CAAC,KAAK,EAAE,GAAG,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,GAAG,QAAQ,EAAE,SAAS,GAAG,EAAE,CAAC,GAC3D,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,GAC/C,SAAS,GACf,GAAG,GACP,KAAK,CAAC;AAEZ,KAAK,WAAW,CAAC,GAAG,EAAE,IAAI,IAAI,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAEjE,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI;IAClE,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,EAAE,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC;CACnD,CAAC;AAEF,KAAK,UAAU,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC;IAC7D,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACtD,OAAO,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;CAC/D,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,IAAI,IAAI;IACzC,MAAM,EAAE,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C,GAAG,EAAE,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;CACvF,CAAC;AAEF,QAAA,MAAM,IAAI,GACL,CAAC,SAAS,IAAI,QACd,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,KAAK,WAAW,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC;;;;;;;;kDAV1B,KAAK,CAAC,SAAS;CAU2C,CAAC;AAE3G,MAAM,MAAM,GAAG,CAAC,CAAC,SAAS,IAAI,IAAI,UAAU,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAEzE,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;QAAE,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CACzG,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,IAAI,IAAI;IAChC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;CACtC,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,IAAI,IAAI;IAChC,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5B,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAClC,SAAS,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACpC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,IAAI,IAAI,kBAAkB,CAChE,CAAC,EACD,YAAY,CAAC,CAAC,CAAC,GACX,YAAY,CAAC,CAAC,CAAC,GAAG;IACd,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACtC,GAAG;IACA,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;CACzB,CACR,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,IAAI,YAAY,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI;;;;;;;;mEArDtC,KAAK,CAAC,SAAS;GA2D9D,CAAC;AAYF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,IAAI,QAAQ,MAAM,YAAW,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;uEAvEnD,KAAK,CAAC,SAAS;;;;;gBAgC/C,eAAe,GAAG,IAAI;CA8DrC,CAAC"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { LocalStorage } from "storage-manager-js";
|
|
3
|
-
import { useReducer } from "use-typed-reducer";
|
|
4
|
-
import { isSsr } from "../../lib/fns";
|
|
5
|
-
export const getLabel = (col) => { var _a, _b; return (_b = (_a = col.headerLabel) !== null && _a !== void 0 ? _a : col.thead) !== null && _b !== void 0 ? _b : col.id; };
|
|
6
|
-
export const createOptionCols = (cols) => cols.map((opt) => {
|
|
7
|
-
var _a, _b;
|
|
8
|
-
return ({
|
|
9
|
-
value: opt.id,
|
|
10
|
-
label: ((_b = (_a = opt.thead) !== null && _a !== void 0 ? _a : opt.headerLabel) !== null && _b !== void 0 ? _b : opt.id),
|
|
11
|
-
});
|
|
12
|
-
});
|
|
13
|
-
export var ColType;
|
|
14
|
-
(function (ColType) {
|
|
15
|
-
ColType["Boolean"] = "boolean";
|
|
16
|
-
ColType["Number"] = "number";
|
|
17
|
-
ColType["Select"] = "select";
|
|
18
|
-
ColType["Text"] = "text";
|
|
19
|
-
})(ColType || (ColType = {}));
|
|
20
|
-
export const valueFromType = (input) => (input.type === "number" ? input.valueAsNumber : input.value);
|
|
21
|
-
const cols = () => (id, thead, options) => (Object.assign(Object.assign({}, options), { id, thead }));
|
|
22
|
-
export const createColumns = (callback) => {
|
|
23
|
-
let items = [];
|
|
24
|
-
const add = (id, thead, options) => items.push(Object.assign(Object.assign({}, options), { id, thead }));
|
|
25
|
-
const remove = (id) => (items = items.filter((x) => x.id !== id));
|
|
26
|
-
callback({ add, remove });
|
|
27
|
-
return items;
|
|
28
|
-
};
|
|
29
|
-
const noop = {};
|
|
30
|
-
export const useTablePreferences = (name, options = noop) => {
|
|
31
|
-
const init = isSsr() ? null : LocalStorage.get(`@unamed/table-${name}`) || null;
|
|
32
|
-
const [state, dispatch] = useReducer({
|
|
33
|
-
name,
|
|
34
|
-
groups: options.groups || (init === null || init === void 0 ? void 0 : init.groups) || [],
|
|
35
|
-
sorters: options.sorters || (init === null || init === void 0 ? void 0 : init.sorters) || [],
|
|
36
|
-
filters: options.filters || (init === null || init === void 0 ? void 0 : init.filters) || [],
|
|
37
|
-
cols: options.cols || (init === null || init === void 0 ? void 0 : init.cols) || [],
|
|
38
|
-
}, (get) => {
|
|
39
|
-
const intercept = (partial) => {
|
|
40
|
-
const prev = get.state();
|
|
41
|
-
const result = Object.assign(Object.assign({}, prev), partial);
|
|
42
|
-
if (!isSsr())
|
|
43
|
-
LocalStorage.set(`@unamed/table-${prev.name}`, result);
|
|
44
|
-
return result;
|
|
45
|
-
};
|
|
46
|
-
return {
|
|
47
|
-
set: (getters) => intercept(getters),
|
|
48
|
-
};
|
|
49
|
-
});
|
|
50
|
-
return Object.assign(Object.assign(Object.assign({}, state), dispatch), { name });
|
|
51
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { Col, TableOperationProps } from "./table-lib";
|
|
2
|
-
type TableHeaderProps<T extends {}> = {
|
|
3
|
-
loading: boolean;
|
|
4
|
-
headers: Col<T>[];
|
|
5
|
-
} & Pick<TableOperationProps<T>, "filters" | "setFilters" | "setCols" | "setSorters" | "sorters" | "inlineSorter" | "inlineFilter">;
|
|
6
|
-
export declare const TableHeader: <T extends {}>(props: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
8
|
-
//# sourceMappingURL=thead.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/components/table/thead.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEjE,KAAK,gBAAgB,CAAC,CAAC,SAAS,EAAE,IAAI;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AA8FpI,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,4CA8BnE,CAAC"}
|