@redi.run/redi-components 0.0.21 → 0.0.23
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.d.ts +28 -9
- package/dist/redi-components.js +54 -40
- package/dist/redi-components.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
|
|
|
2
2
|
|
|
3
3
|
export declare const AdvancedTable: <T extends Record<string, unknown>>({ data, columns, defaultSort, defaultFilters, defaultPageSize, pageSizeOptions, enableSorting, enableFiltering, enablePagination, enableExport, persistConfig, configKey, className, labels, }: AdvancedTableProps<T>) => JSX.Element;
|
|
4
4
|
|
|
5
|
-
declare interface AdvancedTableProps<T = any> {
|
|
5
|
+
export declare interface AdvancedTableProps<T = any> {
|
|
6
6
|
data: T[];
|
|
7
7
|
columns: Column<T>[];
|
|
8
8
|
defaultSort?: SortConfig;
|
|
@@ -28,9 +28,9 @@ declare interface AdvancedTableProps<T = any> {
|
|
|
28
28
|
/** Primary UI component for user interaction */
|
|
29
29
|
export declare const Button: ({ level, size, type, posIcon, disabled, label, icon, children, ...props }: ButtonProps) => JSX.Element;
|
|
30
30
|
|
|
31
|
-
declare type ButtonLevel = 'primary' | 'secondary' | 'tertiary' | 'link' | 'icon';
|
|
31
|
+
export declare type ButtonLevel = 'primary' | 'secondary' | 'tertiary' | 'link' | 'icon';
|
|
32
32
|
|
|
33
|
-
declare interface ButtonProps {
|
|
33
|
+
export declare interface ButtonProps {
|
|
34
34
|
level?: ButtonLevel;
|
|
35
35
|
color?: string;
|
|
36
36
|
backgroundColor?: string;
|
|
@@ -44,7 +44,7 @@ declare interface ButtonProps {
|
|
|
44
44
|
children?: React.ReactNode;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
declare interface Column<T = any> {
|
|
47
|
+
export declare interface Column<T = any> {
|
|
48
48
|
id: string;
|
|
49
49
|
label: string;
|
|
50
50
|
accessor: keyof T | ((row: T) => any);
|
|
@@ -57,7 +57,7 @@ declare interface Column<T = any> {
|
|
|
57
57
|
hidden?: boolean;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
declare interface FilterConfig {
|
|
60
|
+
export declare interface FilterConfig {
|
|
61
61
|
[columnId: string]: {
|
|
62
62
|
type: 'text' | 'select' | 'multiselect';
|
|
63
63
|
value: string | string[];
|
|
@@ -66,7 +66,14 @@ declare interface FilterConfig {
|
|
|
66
66
|
};
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
declare interface
|
|
69
|
+
export declare interface IconsProps {
|
|
70
|
+
color?: string;
|
|
71
|
+
size?: number;
|
|
72
|
+
width?: number;
|
|
73
|
+
height?: number;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export declare interface LabelsProps {
|
|
70
77
|
configuration?: string;
|
|
71
78
|
columnVisibility?: string;
|
|
72
79
|
clearAllFilters?: string;
|
|
@@ -80,18 +87,18 @@ declare interface LabelsProps {
|
|
|
80
87
|
};
|
|
81
88
|
}
|
|
82
89
|
|
|
83
|
-
declare interface PaginationConfig {
|
|
90
|
+
export declare interface PaginationConfig {
|
|
84
91
|
page: number;
|
|
85
92
|
pageSize: number;
|
|
86
93
|
total: number;
|
|
87
94
|
}
|
|
88
95
|
|
|
89
|
-
declare interface SortConfig {
|
|
96
|
+
export declare interface SortConfig {
|
|
90
97
|
column: string;
|
|
91
98
|
direction: 'asc' | 'desc';
|
|
92
99
|
}
|
|
93
100
|
|
|
94
|
-
declare interface TableConfig {
|
|
101
|
+
export declare interface TableConfig {
|
|
95
102
|
columns: Column[];
|
|
96
103
|
sort?: SortConfig;
|
|
97
104
|
filters: FilterConfig;
|
|
@@ -100,4 +107,16 @@ declare interface TableConfig {
|
|
|
100
107
|
hiddenColumns: string[];
|
|
101
108
|
}
|
|
102
109
|
|
|
110
|
+
export declare interface TableState<T = any> {
|
|
111
|
+
data: T[];
|
|
112
|
+
filteredData: T[];
|
|
113
|
+
paginatedData: T[];
|
|
114
|
+
sortConfig: SortConfig | undefined;
|
|
115
|
+
filters: FilterConfig;
|
|
116
|
+
pagination: PaginationConfig;
|
|
117
|
+
columnOrder: string[];
|
|
118
|
+
hiddenColumns: string[];
|
|
119
|
+
loading: boolean;
|
|
120
|
+
}
|
|
121
|
+
|
|
103
122
|
export { }
|
package/dist/redi-components.js
CHANGED
|
@@ -335,7 +335,15 @@ const useAdvancedTable = (r) => {
|
|
|
335
335
|
page: 1,
|
|
336
336
|
pageSize: g?.pagination?.pageSize || l,
|
|
337
337
|
total: a.length
|
|
338
|
-
})
|
|
338
|
+
});
|
|
339
|
+
useEffect(() => {
|
|
340
|
+
let e = o.map((e) => e.id);
|
|
341
|
+
w((t) => {
|
|
342
|
+
let n = t.filter((t) => e.includes(t)), r = e.filter((e) => !n.includes(e));
|
|
343
|
+
return [...n, ...r];
|
|
344
|
+
}), E((t) => t.filter((t) => e.includes(t)));
|
|
345
|
+
}, [o]);
|
|
346
|
+
let k = useMemo(() => {
|
|
339
347
|
let e = [...a];
|
|
340
348
|
return Object.entries(y).forEach(([t, n]) => {
|
|
341
349
|
let r = o.find((e) => e.id === t);
|
|
@@ -504,7 +512,7 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
504
512
|
},
|
|
505
513
|
clearAllFilters: "Limpiar todos los filtros"
|
|
506
514
|
} }) => {
|
|
507
|
-
let [D, O] = useState(null), [k, A] = useState(null), [j, M] = useState(!1), [N, P] = useState(null), F = useRef(null), { state: I, orderedColumns: L, handleSort: R, handleFilter: z, clearAllFilters: B, handlePageChange: V, handlePageSizeChange: H, handleColumnReorder:
|
|
515
|
+
let [D, O] = useState(null), [k, A] = useState(null), [j, M] = useState(!1), [N, P] = useState(null), F = useRef(null), { state: I, orderedColumns: L, handleSort: R, handleFilter: z, clearAllFilters: B, handlePageChange: V, handlePageSizeChange: H, handleColumnReorder: ee, handleToggleColumn: U, allColumns: W } = useAdvancedTable({
|
|
508
516
|
data: e,
|
|
509
517
|
columns: n,
|
|
510
518
|
defaultSort: a,
|
|
@@ -513,25 +521,31 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
513
521
|
pageSizeOptions: _,
|
|
514
522
|
persistConfig: C,
|
|
515
523
|
configKey: w
|
|
516
|
-
}), { paginatedData:
|
|
524
|
+
}), { paginatedData: te, sortConfig: G, filters: K, pagination: q, hiddenColumns: J } = I;
|
|
525
|
+
useEffect(() => {
|
|
526
|
+
W.forEach((e) => {
|
|
527
|
+
n.find((t) => t.id === e.id) || n.push(e);
|
|
528
|
+
});
|
|
529
|
+
}, [W, n]);
|
|
530
|
+
let Y = (e, t) => {
|
|
517
531
|
O(t), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/html", "");
|
|
518
|
-
},
|
|
532
|
+
}, X = (e, t) => {
|
|
519
533
|
e.preventDefault(), e.dataTransfer.dropEffect = "move", A(t);
|
|
520
|
-
},
|
|
534
|
+
}, Z = () => {
|
|
521
535
|
A(null);
|
|
522
|
-
},
|
|
536
|
+
}, Q = (e, t) => {
|
|
523
537
|
if (e.preventDefault(), D !== null) {
|
|
524
538
|
if (D !== t) {
|
|
525
539
|
let e = [...I.columnOrder], [n] = e.splice(D, 1);
|
|
526
|
-
e.splice(t, 0, n),
|
|
540
|
+
e.splice(t, 0, n), ee(e);
|
|
527
541
|
}
|
|
528
542
|
O(null), A(null);
|
|
529
543
|
}
|
|
530
|
-
},
|
|
544
|
+
}, ne = () => {
|
|
531
545
|
O(null), A(null);
|
|
532
|
-
},
|
|
546
|
+
}, re = () => {}, ie = (e) => {
|
|
533
547
|
P(N === e ? null : e);
|
|
534
|
-
},
|
|
548
|
+
}, ae = (t) => {
|
|
535
549
|
let r = n.find((e) => e.id === t);
|
|
536
550
|
if (!r) return [];
|
|
537
551
|
let i = /* @__PURE__ */ new Map();
|
|
@@ -543,7 +557,7 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
543
557
|
count: t,
|
|
544
558
|
label: `${e} (${t})`
|
|
545
559
|
})).sort((e, t) => e.value.localeCompare(t.value));
|
|
546
|
-
},
|
|
560
|
+
}, oe = Object.values(K).some((e) => e.type === "text" && e.value || e.type === "select" && e.value || e.type === "multiselect" && Array.isArray(e.value) && e.value.length > 0);
|
|
547
561
|
useEffect(() => {
|
|
548
562
|
let e = (e) => {
|
|
549
563
|
F.current && !F.current.contains(e.target) && M(!1);
|
|
@@ -552,7 +566,7 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
552
566
|
document.removeEventListener("mousedown", e);
|
|
553
567
|
};
|
|
554
568
|
}, [j]);
|
|
555
|
-
let $ = Math.ceil(
|
|
569
|
+
let $ = Math.ceil(q.total / q.pageSize);
|
|
556
570
|
return /* @__PURE__ */ jsxs("div", {
|
|
557
571
|
className: `w-full bg-redi-background border border-solid border-gray-500 rounded-xl overflow-hidden font-family-base shadow ${T}`,
|
|
558
572
|
children: [
|
|
@@ -584,14 +598,14 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
584
598
|
children: [/* @__PURE__ */ jsx("input", {
|
|
585
599
|
type: "checkbox",
|
|
586
600
|
className: "w-4 h-4 accent-redi-primary",
|
|
587
|
-
checked: !
|
|
588
|
-
onChange: () =>
|
|
601
|
+
checked: !J.includes(e.id),
|
|
602
|
+
onChange: () => U(e.id)
|
|
589
603
|
}), /* @__PURE__ */ jsx("label", { children: e.label })]
|
|
590
604
|
}, e.id))
|
|
591
605
|
})]
|
|
592
606
|
})
|
|
593
607
|
})]
|
|
594
|
-
}), y &&
|
|
608
|
+
}), y && oe && /* @__PURE__ */ jsx(Button_default, {
|
|
595
609
|
level: "icon",
|
|
596
610
|
onClick: B,
|
|
597
611
|
label: E.clearAllFilters,
|
|
@@ -601,7 +615,7 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
601
615
|
className: "flex items-center gap-2",
|
|
602
616
|
children: x && /* @__PURE__ */ jsx(Button_default, {
|
|
603
617
|
level: "secondary",
|
|
604
|
-
onClick:
|
|
618
|
+
onClick: re,
|
|
605
619
|
children: /* @__PURE__ */ jsx(DownloadIcon, { size: 18 })
|
|
606
620
|
})
|
|
607
621
|
})]
|
|
@@ -613,11 +627,11 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
613
627
|
children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: L.map((e, t) => /* @__PURE__ */ jsx("th", {
|
|
614
628
|
className: `bg-gray-50 border-b border-solid border-gray-200 text-left font-semibold text-redi-text p-0 sticky top-0 z-10 select-none hover:bg-gray-200 ${D === t ? "opacity-50 bg-gray-300" : ""} ${k === t ? "bg-redi-primary-bg border-l border-solid border-redi-primary" : ""}`,
|
|
615
629
|
draggable: !0,
|
|
616
|
-
onDragStart: (e) =>
|
|
617
|
-
onDragOver: (e) =>
|
|
618
|
-
onDragLeave:
|
|
619
|
-
onDrop: (e) =>
|
|
620
|
-
onDragEnd:
|
|
630
|
+
onDragStart: (e) => Y(e, t),
|
|
631
|
+
onDragOver: (e) => X(e, t),
|
|
632
|
+
onDragLeave: Z,
|
|
633
|
+
onDrop: (e) => Q(e, t),
|
|
634
|
+
onDragEnd: ne,
|
|
621
635
|
children: /* @__PURE__ */ jsxs("div", {
|
|
622
636
|
className: "flex items-center py-3 px-4 gap-2 min-h-12",
|
|
623
637
|
children: [/* @__PURE__ */ jsx("div", {
|
|
@@ -630,24 +644,24 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
630
644
|
onClick: (t) => {
|
|
631
645
|
t.stopPropagation(), v && R(e.id);
|
|
632
646
|
},
|
|
633
|
-
children: [e.label, v &&
|
|
647
|
+
children: [e.label, v && G?.column === e.id && /* @__PURE__ */ jsx("span", {
|
|
634
648
|
className: "font-bold text-redi-link-text text-base",
|
|
635
|
-
children:
|
|
649
|
+
children: G.direction === "asc" ? " ↑" : " ↓"
|
|
636
650
|
})]
|
|
637
651
|
}), y && /* @__PURE__ */ jsxs("div", {
|
|
638
652
|
className: "relative",
|
|
639
653
|
children: [/* @__PURE__ */ jsx(Button_default, {
|
|
640
654
|
level: "icon",
|
|
641
655
|
onClick: (t) => {
|
|
642
|
-
t.stopPropagation(),
|
|
656
|
+
t.stopPropagation(), ie(e.id);
|
|
643
657
|
},
|
|
644
658
|
children: /* @__PURE__ */ jsx(FilterIcon, { size: 16 })
|
|
645
659
|
}), N === e.id && /* @__PURE__ */ jsx(AdvancedFilter_default, {
|
|
646
660
|
columnId: e.id,
|
|
647
661
|
label: e.label,
|
|
648
|
-
options:
|
|
649
|
-
textValue:
|
|
650
|
-
selectedValues:
|
|
662
|
+
options: ae(e.id),
|
|
663
|
+
textValue: K[e.id]?.type === "text" ? String(K[e.id].value || "") : "",
|
|
664
|
+
selectedValues: K[e.id]?.type === "multiselect" && Array.isArray(K[e.id]?.value) ? K[e.id].value : [],
|
|
651
665
|
onTextChange: (t) => z(e.id, t, "text"),
|
|
652
666
|
onSelectionChange: (t) => z(e.id, t, "multiselect"),
|
|
653
667
|
onClose: () => P(null)
|
|
@@ -655,7 +669,7 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
655
669
|
})]
|
|
656
670
|
})]
|
|
657
671
|
})
|
|
658
|
-
}, e.id)) }) }), /* @__PURE__ */ jsx("tbody", { children:
|
|
672
|
+
}, e.id)) }) }), /* @__PURE__ */ jsx("tbody", { children: te.map((e, t) => /* @__PURE__ */ jsx("tr", {
|
|
659
673
|
className: "even:bg-gray-50 hover:bg-gray-100 border-b border-solid border-b-gray-100 odd:bg-white",
|
|
660
674
|
children: L.map((n) => {
|
|
661
675
|
let r = typeof n.accessor == "function" ? n.accessor(e) : e[n.accessor];
|
|
@@ -677,15 +691,15 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
677
691
|
children: /* @__PURE__ */ jsxs("span", { children: [
|
|
678
692
|
E.pagination?.showingItems,
|
|
679
693
|
" ",
|
|
680
|
-
(
|
|
694
|
+
(q.page - 1) * q.pageSize + 1,
|
|
681
695
|
" ",
|
|
682
696
|
E.pagination?.to,
|
|
683
697
|
" ",
|
|
684
|
-
Math.min(
|
|
698
|
+
Math.min(q.page * q.pageSize, q.total),
|
|
685
699
|
" ",
|
|
686
700
|
E.pagination?.of,
|
|
687
701
|
" ",
|
|
688
|
-
|
|
702
|
+
q.total,
|
|
689
703
|
" ",
|
|
690
704
|
E.pagination?.items
|
|
691
705
|
] })
|
|
@@ -696,7 +710,7 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
696
710
|
children: [
|
|
697
711
|
E.pagination?.showPerPage,
|
|
698
712
|
/* @__PURE__ */ jsx("select", {
|
|
699
|
-
value:
|
|
713
|
+
value: q.pageSize,
|
|
700
714
|
onChange: (e) => H(Number(e.target.value)),
|
|
701
715
|
className: "py-1.5 px-2.5 border border-solid border-gray-300 rounded-md bg-white text-redi-text focus:outline-none focus:ring-2 focus:ring-redi-primary",
|
|
702
716
|
children: _.map((e) => /* @__PURE__ */ jsx("option", {
|
|
@@ -712,33 +726,33 @@ var AdvancedTable_default = ({ data: e, columns: n, defaultSort: a, defaultFilte
|
|
|
712
726
|
/* @__PURE__ */ jsx(Button_default, {
|
|
713
727
|
level: "icon",
|
|
714
728
|
onClick: () => V(1),
|
|
715
|
-
disabled:
|
|
729
|
+
disabled: q.page === 1,
|
|
716
730
|
children: "<<"
|
|
717
731
|
}),
|
|
718
732
|
/* @__PURE__ */ jsx(Button_default, {
|
|
719
733
|
level: "icon",
|
|
720
|
-
onClick: () => V(
|
|
721
|
-
disabled:
|
|
734
|
+
onClick: () => V(q.page - 1),
|
|
735
|
+
disabled: q.page === 1,
|
|
722
736
|
children: "<"
|
|
723
737
|
}),
|
|
724
738
|
Array.from({ length: Math.min(3, $) }, (e, t) => {
|
|
725
739
|
let n;
|
|
726
|
-
return n = $ <= 3 ||
|
|
727
|
-
level:
|
|
740
|
+
return n = $ <= 3 || q.page <= 2 ? t + 1 : q.page > $ - 2 ? $ - 2 + t : q.page - 1 + t, /* @__PURE__ */ jsx(Button_default, {
|
|
741
|
+
level: q.page === n ? "primary" : "secondary",
|
|
728
742
|
onClick: () => V(n),
|
|
729
743
|
children: n
|
|
730
744
|
}, n);
|
|
731
745
|
}),
|
|
732
746
|
/* @__PURE__ */ jsx(Button_default, {
|
|
733
747
|
level: "icon",
|
|
734
|
-
onClick: () => V(
|
|
735
|
-
disabled:
|
|
748
|
+
onClick: () => V(q.page + 1),
|
|
749
|
+
disabled: q.page === $,
|
|
736
750
|
children: ">"
|
|
737
751
|
}),
|
|
738
752
|
/* @__PURE__ */ jsx(Button_default, {
|
|
739
753
|
level: "icon",
|
|
740
754
|
onClick: () => V($),
|
|
741
|
-
disabled:
|
|
755
|
+
disabled: q.page === $,
|
|
742
756
|
children: ">>"
|
|
743
757
|
})
|
|
744
758
|
]
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`redi-components`]={},e.React,e[`react/jsxRuntime`]))})(this,function(e,t,n){var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e},u=(e,t,n)=>(n=e==null?{}:r(s(e)),l(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e));t=u(t),n=u(n);let d=({color:e,size:t=24})=>(0,n.jsx)(`svg`,{width:t,height:t,viewBox:`0 0 20 20`,fill:e,children:(0,n.jsx)(`path`,{fillRule:`evenodd`,d:`M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z`,clipRule:`evenodd`,fill:`currentColor`})}),f=({color:e,size:t=20})=>(0,n.jsxs)(`svg`,{viewBox:`0 0 20 20`,fill:e,width:t,height:t,children:[(0,n.jsx)(`path`,{d:`M10 12a2 2 0 100-4 2 2 0 000 4z`,fill:`currentColor`}),(0,n.jsx)(`path`,{fillRule:`evenodd`,d:`M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z`,clipRule:`evenodd`,fill:`currentColor`})]}),p=({color:e,size:t=24})=>(0,n.jsx)(`svg`,{fill:e,stroke:`currentColor`,viewBox:`0 0 24 24`,width:t,height:t,children:(0,n.jsx)(`path`,{fillRule:`evenodd`,d:`M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z`,clipRule:`evenodd`,fill:`currentColor`})}),m=e=>e==null?``:typeof e==`boolean`?e?`Sí`:`No`:typeof e==`number`?e.toLocaleString():e instanceof Date?e.toLocaleDateString():String(e),h=({color:e,size:t=20})=>(0,n.jsx)(`svg`,{fill:e,width:t,height:t,viewBox:`0 0 20 20`,children:(0,n.jsx)(`path`,{fillRule:`evenodd`,d:`M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z`,clipRule:`evenodd`,fill:`currentColor`})});var g=({level:e=`primary`,size:t=`medium`,type:r=`button`,posIcon:i=`left`,disabled:a=!1,label:o,icon:s,children:c,...l})=>{let u=`disabled:text-redi-disabled-text disabled:border-redi-disabled-border disabled:cursor-not-allowed`,d={primary:`bg-redi-primary-bg hover:bg-redi-primary-bg-hover text-redi-primary-text active:ring-2 active:ring-redi-primary-bg-active active:border-[1px] active:border-white active:border-solid disabled:bg-redi-disabled-bg ${u}`,secondary:`bg-redi-secondary-bg hover:bg-redi-secondary-bg-hover text-redi-secondary-text active:ring-2 active:ring-redi-secondary-bg-active active:border-[1px] active:border-white active:border-solid border-1 border-solid disabled:bg-redi-disabled-bg ${u}`,tertiary:`bg-redi-tertiary-bg hover:bg-redi-tertiary-bg-hover text-redi-tertiary-text active:ring-2 active:ring-redi-tertiary-bg-active active:border-[1px] active:border-white active:border-solid disabled:bg-redi-disabled-bg ${u}`,link:`bg-transparent hover:bg-redi-link-bg text-redi-link-text active:ring-2 active:ring-redi-link-bg-active active:border-[1px] active:border-white active:border-solid underline underline-offset-4 ${u}`,icon:`bg-transparent hover:bg-redi-icon-bg text-redi-icon-text active:ring-2 active:ring-redi-icon-bg-active active:border-[1px] active:border-white active:border-solid ${u}`};return(0,n.jsx)(`button`,{type:r,name:`button-${o}`,disabled:a,className:`cursor-pointer rounded-lg font-family-base transition-all duration-200 ${d[e]} ${{small:`px-3 py-1 text-sm`,medium:`px-4 py-2 text-xs`,large:`px-6 py-3 text-lg`}[t]} flex gap-x-1 items-center justify-center`,...l,children:c||(0,n.jsxs)(n.Fragment,{children:[s&&i===`left`&&s,o&&e!==`icon`&&(0,n.jsx)(`span`,{children:o}),s&&i===`right`&&s]})})},_={controls:`_controls_1pwn9_1`,leftControls:`_leftControls_1pwn9_10`,rightControls:`_rightControls_1pwn9_16`,configButton:`_configButton_1pwn9_23`,configIcon:`_configIcon_1pwn9_42`,configSection:`_configSection_1pwn9_49`,configSectionTitle:`_configSectionTitle_1pwn9_57`,configOptions:`_configOptions_1pwn9_66`,configOption:`_configOption_1pwn9_66`,actionButton:`_actionButton_1pwn9_91`,export:`_export_1pwn9_110`,reset:`_reset_1pwn9_120`,buttonIcon:`_buttonIcon_1pwn9_130`,filtersContainer:`_filtersContainer_1pwn9_137`,active:`_active_1pwn9_145`,filtersRow:`_filtersRow_1pwn9_149`,filterGroup:`_filterGroup_1pwn9_156`,filterLabel:`_filterLabel_1pwn9_162`,filterDropdown:`_filterDropdown_1pwn9_172`,filterDropdownButton:`_filterDropdownButton_1pwn9_177`,filterDropdownIcon:`_filterDropdownIcon_1pwn9_200`,filterModalHeader:`_filterModalHeader_1pwn9_212`,filterSearchInput:`_filterSearchInput_1pwn9_217`,filterOptions:`_filterOptions_1pwn9_231`,filterOption:`_filterOption_1pwn9_231`,selected:`_selected_1pwn9_250`,filterOptionCheckbox:`_filterOptionCheckbox_1pwn9_254`,filterOptionLabel:`_filterOptionLabel_1pwn9_260`,filterOptionCount:`_filterOptionCount_1pwn9_266`,filterModalActions:`_filterModalActions_1pwn9_275`,filterClearButton:`_filterClearButton_1pwn9_284`,filterApplyButton:`_filterApplyButton_1pwn9_285`,tableWrapper:`_tableWrapper_1pwn9_315`,table:`_table_1pwn9_315`,header:`_header_1pwn9_332`,dragging:`_dragging_1pwn9_349`,dragOver:`_dragOver_1pwn9_354`,headerContent:`_headerContent_1pwn9_359`,dragHandle:`_dragHandle_1pwn9_367`,columnTitle:`_columnTitle_1pwn9_384`,sortable:`_sortable_1pwn9_391`,sortIcon:`_sortIcon_1pwn9_408`,filterButton:`_filterButton_1pwn9_415`,filterButtonIcon:`_filterButtonIcon_1pwn9_451`,filterModal:`_filterModal_1pwn9_212`,row:`_row_1pwn9_474`,cell:`_cell_1pwn9_486`,statusBadge:`_statusBadge_1pwn9_507`,statusActive:`_statusActive_1pwn9_517`,statusInactive:`_statusInactive_1pwn9_522`,statusPending:`_statusPending_1pwn9_527`,statusCompleted:`_statusCompleted_1pwn9_532`,statusDraft:`_statusDraft_1pwn9_537`,pagination:`_pagination_1pwn9_543`,paginationInfo:`_paginationInfo_1pwn9_553`,paginationControls:`_paginationControls_1pwn9_560`,pageSizeSelect:`_pageSizeSelect_1pwn9_575`,pageButtons:`_pageButtons_1pwn9_591`,pageButton:`_pageButton_1pwn9_591`,exportButton:`_exportButton_1pwn9_659`,resetButton:`_resetButton_1pwn9_660`,filterModalSlideIn:`_filterModalSlideIn_1pwn9_1`,shimmer:`_shimmer_1pwn9_1`,columnCheckboxes:`_columnCheckboxes_1pwn9_1195`},v=({option:e,selectedValues:t,handleOptionToggle:r})=>(0,n.jsxs)(`div`,{className:`${_.filterOption} ${t.includes(e.value)?_.selected:``}`,onClick:()=>r(e),children:[(0,n.jsx)(`input`,{type:`checkbox`,className:_.filterOptionCheckbox,checked:t.includes(e.value),onChange:()=>r(e),onClick:e=>e.stopPropagation()}),(0,n.jsx)(`span`,{className:_.filterOptionLabel,children:e.value}),(0,n.jsx)(`span`,{className:_.filterOptionCount,children:e.count})]},e.value),y=({label:e,options:r,textValue:i,selectedValues:a,onTextChange:o,onSelectionChange:s,onClose:c})=>{let[l,u]=(0,t.useState)(``),d=(0,t.useRef)(null),f=r.filter(e=>e.value.toLowerCase().includes(l.toLowerCase())||e.label.toLowerCase().includes(l.toLowerCase())),p=e=>{let t=a.includes(e.value)?a.filter(t=>t!==e.value):[...a,e.value];s(t)},m=()=>{let e=f.map(e=>e.value);s(e)},h=()=>{s([]),o(``)};return(0,t.useEffect)(()=>{let e=e=>{d.current&&!d.current.contains(e.target)&&c()};return document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[c]),(0,n.jsxs)(`div`,{className:_.filterModal,ref:d,children:[(0,n.jsxs)(`div`,{className:_.filterModalHeader,children:[(0,n.jsx)(`input`,{type:`text`,className:_.filterSearchInput,placeholder:`Buscar texto en ${e.toLowerCase()}...`,value:i,onChange:e=>o(e.target.value),autoFocus:!0}),(0,n.jsx)(`input`,{type:`text`,className:_.filterSearchInput,placeholder:`Buscar opciones...`,value:l,onChange:e=>u(e.target.value),style:{marginTop:`8px`}})]}),(0,n.jsxs)(`div`,{className:_.filterOptions,children:[(0,n.jsxs)(`div`,{className:_.filterOption,style:{borderBottom:`1px solid #e5e7eb`,marginBottom:`4px`,paddingBottom:`8px`},children:[(0,n.jsx)(g,{onClick:m,size:`small`,level:`tertiary`,children:`Seleccionar todo`}),(0,n.jsx)(g,{onClick:h,size:`small`,level:`tertiary`,children:`Limpiar todo`})]}),f.map(e=>(0,n.jsx)(v,{option:e,selectedValues:a,handleOptionToggle:p},e.value)),f.length===0&&(0,n.jsx)(`div`,{className:_.filterOption,children:(0,n.jsx)(`span`,{className:_.filterOptionLabel,children:`No se encontraron opciones`})})]}),(0,n.jsxs)(`div`,{className:_.filterModalActions,children:[(0,n.jsx)(g,{onClick:h,level:`tertiary`,children:`Limpiar todo`}),(0,n.jsxs)(g,{onClick:c,level:`primary`,children:[`Aplicar (`,a.length+(i?1:0),`)`]})]})]})};
|
|
2
2
|
/*! js-cookie v3.0.5 | MIT */
|
|
3
|
-
function b(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)e[r]=n[r]}return e}var x={read:function(e){return e[0]===`"`&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};function S(e,t){function n(n,r,i){if(!(typeof document>`u`)){i=b({},t,i),typeof i.expires==`number`&&(i.expires=new Date(Date.now()+i.expires*864e5)),i.expires&&=i.expires.toUTCString(),n=encodeURIComponent(n).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var a=``;for(var o in i)i[o]&&(a+=`; `+o,i[o]!==!0&&(a+=`=`+i[o].split(`;`)[0]));return document.cookie=n+`=`+e.write(r,n)+a}}function r(t){if(!(typeof document>`u`||arguments.length&&!t)){for(var n=document.cookie?document.cookie.split(`; `):[],r={},i=0;i<n.length;i++){var a=n[i].split(`=`),o=a.slice(1).join(`=`);try{var s=decodeURIComponent(a[0]);if(r[s]=e.read(o,s),t===s)break}catch{}}return t?r[t]:r}}return Object.create({set:n,get:r,remove:function(e,t){n(e,``,b({},t,{expires:-1}))},withAttributes:function(e){return S(this.converter,b({},this.attributes,e))},withConverter:function(e){return S(b({},this.converter,e),this.attributes)}},{attributes:{value:Object.freeze(t)},converter:{value:Object.freeze(e)}})}var C=S(x,{path:`/`}),w=30;let T=e=>{let{data:n,columns:r,defaultSort:i,defaultFilters:a={},defaultPageSize:o=10,pageSizeOptions:s=[10,25,50,100,200,300,400,500],persistConfig:c=!0,configKey:l=`advanced-table-config`,onConfigChange:u}=e,d=(0,t.useCallback)(()=>{if(!c)return null;try{let e=C.get(l);return e?JSON.parse(e):null}catch(e){return console.warn(`Error loading table config from cookies:`,e),null}},[c,l]),f=(0,t.useCallback)(e=>{if(c)try{C.set(l,JSON.stringify(e),{expires:w})}catch(e){console.warn(`Error saving table config to cookies:`,e)}},[c,l]),p=d(),[m,h]=(0,t.useState)(p?.sortConfig||i||void 0),[g,_]=(0,t.useState)(p?.filters||a),[v,y]=(0,t.useState)(p?.columnOrder||r.map(e=>e.id)),[b,x]=(0,t.useState)(p?.hiddenColumns||[]),[S,T]=(0,t.useState)({page:1,pageSize:p?.pagination?.pageSize||o,total:n.length}),E=(0,t.useMemo)(()=>{let e=[...n];return Object.entries(g).forEach(([t,n])=>{let i=r.find(e=>e.id===t);i&&(e=e.filter(e=>{let t=typeof i.accessor==`function`?i.accessor(e):e[i.accessor],r=String(t||``).toLowerCase(),a=!0;return n.type===`text`&&n.value&&(a&&=r.includes(String(n.value).toLowerCase())),n.type===`select`&&n.value&&(a&&=r===String(n.value).toLowerCase()),n.type===`multiselect`&&Array.isArray(n.value)&&n.value.length>0&&(a&&=n.value.some(e=>r===String(e).toLowerCase())),a}))}),e},[n,g,r]),D=(0,t.useMemo)(()=>{if(!m)return E;let e=r.find(e=>e.id===m.column);return e?[...E].sort((t,n)=>{let r=typeof e.accessor==`function`?e.accessor(t):t[e.accessor],i=typeof e.accessor==`function`?e.accessor(n):n[e.accessor];if(r==null)return 1;if(i==null)return-1;let a=0;if(typeof r==`number`&&typeof i==`number`)a=r-i;else if(typeof r==`boolean`&&typeof i==`boolean`)a=r===i?0:r?1:-1;else if(r instanceof Date&&i instanceof Date)a=r.getTime()-i.getTime();else{let e=String(r).toLowerCase(),t=String(i).toLowerCase();a=e.localeCompare(t)}return m.direction===`desc`?a*-1:a}):E},[E,m,r]),O=(0,t.useMemo)(()=>{let e=(S.page-1)*S.pageSize,t=e+S.pageSize;return D.slice(e,t)},[D,S.page,S.pageSize]);(0,t.useEffect)(()=>{T(e=>({...e,total:E.length,page:Math.min(e.page,Math.ceil(E.length/e.pageSize)||1)}))},[E.length]),(0,t.useEffect)(()=>{let e={sort:m,filters:g,columnOrder:v,hiddenColumns:b,pageSize:S.pageSize};f(e),u?.({sort:m,filters:g,pagination:S,columnOrder:v,hiddenColumns:b,columns:r})},[m,g,v,b,S.pageSize,f,u,S,r]);let k=(0,t.useCallback)(e=>{h(t=>t?.column===e?t.direction===`asc`?{column:e,direction:`desc`}:void 0:{column:e,direction:`asc`})},[]),A=(0,t.useCallback)((e,t,n=`text`)=>{_(r=>({...r,[e]:{type:n,value:t,options:r[e]?.options}})),T(e=>({...e,page:1}))},[]),j=(0,t.useCallback)(e=>{_(t=>{let n={...t};return delete n[e],n})},[]),M=(0,t.useCallback)(()=>{_({})},[]),N=(0,t.useCallback)(e=>{T(t=>({...t,page:e}))},[]),P=(0,t.useCallback)(e=>{T(t=>({...t,pageSize:e,page:1}))},[]),F=(0,t.useCallback)(e=>{y(e)},[]),I=(0,t.useCallback)(e=>{x(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},[]),L=(0,t.useMemo)(()=>v.map(e=>r.find(t=>t.id===e)).filter(Boolean).filter(e=>!b.includes(e.id)),[v,r,b]);return{state:{data:n,filteredData:E,paginatedData:O,sortConfig:m,filters:g,pagination:S,columnOrder:v,hiddenColumns:b,loading:!1},orderedColumns:L,pageSizeOptions:s,handleSort:k,handleFilter:A,clearFilter:j,clearAllFilters:M,handlePageChange:N,handlePageSizeChange:P,handleColumnReorder:F,handleToggleColumn:I,allColumns:r}};e.AdvancedTable=({data:e,columns:r,defaultSort:i,defaultFilters:a={},defaultPageSize:o=10,pageSizeOptions:s=[10,25,50,100,200,300,400,500],enableSorting:c=!0,enableFiltering:l=!0,enablePagination:u=!0,enableExport:_=!0,persistConfig:v=!0,configKey:b=`advancedTable`,className:x=``,labels:S={configuration:`Configuración`,columnVisibility:`Columnas visibles`,pagination:{showingItems:`Mostrando`,to:`a`,of:`de`,items:`elementos`,showPerPage:`Mostrar`,perPageItems:`elementos`},clearAllFilters:`Limpiar todos los filtros`}})=>{let[C,w]=(0,t.useState)(null),[E,D]=(0,t.useState)(null),[O,k]=(0,t.useState)(!1),[A,j]=(0,t.useState)(null),M=(0,t.useRef)(null),{state:N,orderedColumns:P,handleSort:F,handleFilter:I,clearAllFilters:L,handlePageChange:R,handlePageSizeChange:z,handleColumnReorder:B,handleToggleColumn:V}=T({data:e,columns:r,defaultSort:i,defaultFilters:a,defaultPageSize:o,pageSizeOptions:s,persistConfig:v,configKey:b}),{paginatedData:H,sortConfig:U,filters:W,pagination:G,hiddenColumns:K}=N,q=(e,t)=>{w(t),e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`text/html`,``)},J=(e,t)=>{e.preventDefault(),e.dataTransfer.dropEffect=`move`,D(t)},Y=()=>{D(null)},X=(e,t)=>{if(e.preventDefault(),C!==null){if(C!==t){let e=[...N.columnOrder],[n]=e.splice(C,1);e.splice(t,0,n),B(e)}w(null),D(null)}},Z=()=>{w(null),D(null)},Q=()=>{},ee=e=>{j(A===e?null:e)},te=t=>{let n=r.find(e=>e.id===t);if(!n)return[];let i=new Map;return e.forEach(e=>{let t=typeof n.accessor==`function`?n.accessor(e):e[n.accessor],r=m(t);i.set(r,(i.get(r)||0)+1)}),Array.from(i.entries()).map(([e,t])=>({value:e,count:t,label:`${e} (${t})`})).sort((e,t)=>e.value.localeCompare(t.value))},ne=Object.values(W).some(e=>e.type===`text`&&e.value||e.type===`select`&&e.value||e.type===`multiselect`&&Array.isArray(e.value)&&e.value.length>0);(0,t.useEffect)(()=>{let e=e=>{M.current&&!M.current.contains(e.target)&&k(!1)};return O&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[O]);let $=Math.ceil(G.total/G.pageSize);return(0,n.jsxs)(`div`,{className:`w-full bg-redi-background border border-solid border-gray-500 rounded-xl overflow-hidden font-family-base shadow ${x}`,children:[(0,n.jsxs)(`div`,{className:`flex items-center justify-between p-4 bg-transparent border-b border-solid border-gray-400`,children:[(0,n.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,n.jsxs)(`div`,{className:`relative`,children:[(0,n.jsxs)(g,{level:`secondary`,onClick:()=>k(!O),children:[(0,n.jsx)(f,{}),(0,n.jsx)(`span`,{className:`hidden md:block`,children:S.configuration})]}),O&&(0,n.jsx)(`div`,{className:`absolute top-full left-0 bg-white border border-solid border-gray-300 rounded-md shadow-lg z-1000 mt-2 min-w-2xs max-w-xs opacity-100 visible p-4`,ref:M,children:(0,n.jsxs)(`div`,{className:`mb-4 last:mb-0`,children:[(0,n.jsx)(`div`,{className:`text-sm font-semibold text-redi-text mb-2 uppercase`,children:S.columnVisibility}),(0,n.jsx)(`div`,{className:`flex flex-col gap-2`,children:r.map(e=>(0,n.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,n.jsx)(`input`,{type:`checkbox`,className:`w-4 h-4 accent-redi-primary`,checked:!K.includes(e.id),onChange:()=>V(e.id)}),(0,n.jsx)(`label`,{children:e.label})]},e.id))})]})})]}),l&&ne&&(0,n.jsx)(g,{level:`icon`,onClick:L,label:S.clearAllFilters,children:(0,n.jsx)(h,{color:`white`})})]}),(0,n.jsx)(`div`,{className:`flex items-center gap-2`,children:_&&(0,n.jsx)(g,{level:`secondary`,onClick:Q,children:(0,n.jsx)(d,{size:18})})})]}),(0,n.jsx)(`div`,{className:`overflow-x-auto max-h-[600px] min-h-[500px] overflow-y-auto bg-white relative`,children:(0,n.jsxs)(`table`,{className:`w-full border-collapse table-auto text-sm relative`,children:[(0,n.jsx)(`thead`,{children:(0,n.jsx)(`tr`,{children:P.map((e,t)=>(0,n.jsx)(`th`,{className:`bg-gray-50 border-b border-solid border-gray-200 text-left font-semibold text-redi-text p-0 sticky top-0 z-10 select-none hover:bg-gray-200 ${C===t?`opacity-50 bg-gray-300`:``} ${E===t?`bg-redi-primary-bg border-l border-solid border-redi-primary`:``}`,draggable:!0,onDragStart:e=>q(e,t),onDragOver:e=>J(e,t),onDragLeave:Y,onDrop:e=>X(e,t),onDragEnd:Z,children:(0,n.jsxs)(`div`,{className:`flex items-center py-3 px-4 gap-2 min-h-12`,children:[(0,n.jsx)(`div`,{className:`text-gray-600 cursor-grab opacity-70 hover:opacity-100 text-base`,children:`⋮⋮`}),(0,n.jsxs)(`div`,{className:`flex flex-1 items-center gap-2`,children:[(0,n.jsxs)(`span`,{className:c?`cursor-pointer py-1 px-1.5 rounded-sm flex items-center gap-1.5 text-sm font-semibold text-redi-text uppercase hover:bg-redi-text hover:text-redi-link-text`:``,onClick:t=>{t.stopPropagation(),c&&F(e.id)},children:[e.label,c&&U?.column===e.id&&(0,n.jsx)(`span`,{className:`font-bold text-redi-link-text text-base`,children:U.direction===`asc`?` ↑`:` ↓`})]}),l&&(0,n.jsxs)(`div`,{className:`relative`,children:[(0,n.jsx)(g,{level:`icon`,onClick:t=>{t.stopPropagation(),ee(e.id)},children:(0,n.jsx)(p,{size:16})}),A===e.id&&(0,n.jsx)(y,{columnId:e.id,label:e.label,options:te(e.id),textValue:W[e.id]?.type===`text`?String(W[e.id].value||``):``,selectedValues:W[e.id]?.type===`multiselect`&&Array.isArray(W[e.id]?.value)?W[e.id].value:[],onTextChange:t=>I(e.id,t,`text`),onSelectionChange:t=>I(e.id,t,`multiselect`),onClose:()=>j(null)})]})]})]})},e.id))})}),(0,n.jsx)(`tbody`,{children:H.map((e,t)=>(0,n.jsx)(`tr`,{className:`even:bg-gray-50 hover:bg-gray-100 border-b border-solid border-b-gray-100 odd:bg-white`,children:P.map(r=>{let i=typeof r.accessor==`function`?r.accessor(e):e[r.accessor];return r.render?(0,n.jsx)(`td`,{className:`py-3 px-4 text-redi-text font-normal leading-6 align-middle border-r border-solid border-r-gray-300 static table-cell last:border-r-0 first:font-medium`,children:r.render(i,e,t)},r.id):(0,n.jsx)(`td`,{className:`py-3 px-4 text-redi-text font-normal leading-6 align-middle border-r border-solid border-r-gray-300 static table-cell last:border-r-0 first:font-medium`,children:m(i)},r.id)})},t))})]})}),u&&(0,n.jsxs)(`div`,{className:`flex items-center justify-between py-4 px-6 bg-white border-t-gray-300 border-solid border-t gap-4`,children:[(0,n.jsx)(`div`,{className:`text-redi-text text-base font-medium shrink-0`,children:(0,n.jsxs)(`span`,{children:[S.pagination?.showingItems,` `,(G.page-1)*G.pageSize+1,` `,S.pagination?.to,` `,Math.min(G.page*G.pageSize,G.total),` `,S.pagination?.of,` `,G.total,` `,S.pagination?.items]})}),(0,n.jsxs)(`div`,{className:`flex items-center gap-5`,children:[(0,n.jsxs)(`label`,{className:`flex items-center gap-3 text-sm font-semibold text-redi-text`,children:[S.pagination?.showPerPage,(0,n.jsx)(`select`,{value:G.pageSize,onChange:e=>z(Number(e.target.value)),className:`py-1.5 px-2.5 border border-solid border-gray-300 rounded-md bg-white text-redi-text focus:outline-none focus:ring-2 focus:ring-redi-primary`,children:s.map(e=>(0,n.jsx)(`option`,{value:e,children:e},e))}),S.pagination?.perPageItems]}),(0,n.jsxs)(`div`,{className:`flex gap-1 items-center`,children:[(0,n.jsx)(g,{level:`icon`,onClick:()=>R(1),disabled:G.page===1,children:`<<`}),(0,n.jsx)(g,{level:`icon`,onClick:()=>R(G.page-1),disabled:G.page===1,children:`<`}),Array.from({length:Math.min(3,$)},(e,t)=>{let r;return r=$<=3||G.page<=2?t+1:G.page>$-2?$-2+t:G.page-1+t,(0,n.jsx)(g,{level:G.page===r?`primary`:`secondary`,onClick:()=>R(r),children:r},r)}),(0,n.jsx)(g,{level:`icon`,onClick:()=>R(G.page+1),disabled:G.page===$,children:`>`}),(0,n.jsx)(g,{level:`icon`,onClick:()=>R($),disabled:G.page===$,children:`>>`})]})]})]})]})},e.Button=g});
|
|
3
|
+
function b(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)e[r]=n[r]}return e}var x={read:function(e){return e[0]===`"`&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};function S(e,t){function n(n,r,i){if(!(typeof document>`u`)){i=b({},t,i),typeof i.expires==`number`&&(i.expires=new Date(Date.now()+i.expires*864e5)),i.expires&&=i.expires.toUTCString(),n=encodeURIComponent(n).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var a=``;for(var o in i)i[o]&&(a+=`; `+o,i[o]!==!0&&(a+=`=`+i[o].split(`;`)[0]));return document.cookie=n+`=`+e.write(r,n)+a}}function r(t){if(!(typeof document>`u`||arguments.length&&!t)){for(var n=document.cookie?document.cookie.split(`; `):[],r={},i=0;i<n.length;i++){var a=n[i].split(`=`),o=a.slice(1).join(`=`);try{var s=decodeURIComponent(a[0]);if(r[s]=e.read(o,s),t===s)break}catch{}}return t?r[t]:r}}return Object.create({set:n,get:r,remove:function(e,t){n(e,``,b({},t,{expires:-1}))},withAttributes:function(e){return S(this.converter,b({},this.attributes,e))},withConverter:function(e){return S(b({},this.converter,e),this.attributes)}},{attributes:{value:Object.freeze(t)},converter:{value:Object.freeze(e)}})}var C=S(x,{path:`/`}),w=30;let T=e=>{let{data:n,columns:r,defaultSort:i,defaultFilters:a={},defaultPageSize:o=10,pageSizeOptions:s=[10,25,50,100,200,300,400,500],persistConfig:c=!0,configKey:l=`advanced-table-config`,onConfigChange:u}=e,d=(0,t.useCallback)(()=>{if(!c)return null;try{let e=C.get(l);return e?JSON.parse(e):null}catch(e){return console.warn(`Error loading table config from cookies:`,e),null}},[c,l]),f=(0,t.useCallback)(e=>{if(c)try{C.set(l,JSON.stringify(e),{expires:w})}catch(e){console.warn(`Error saving table config to cookies:`,e)}},[c,l]),p=d(),[m,h]=(0,t.useState)(p?.sortConfig||i||void 0),[g,_]=(0,t.useState)(p?.filters||a),[v,y]=(0,t.useState)(p?.columnOrder||r.map(e=>e.id)),[b,x]=(0,t.useState)(p?.hiddenColumns||[]),[S,T]=(0,t.useState)({page:1,pageSize:p?.pagination?.pageSize||o,total:n.length});(0,t.useEffect)(()=>{let e=r.map(e=>e.id);y(t=>{let n=t.filter(t=>e.includes(t)),r=e.filter(e=>!n.includes(e));return[...n,...r]}),x(t=>t.filter(t=>e.includes(t)))},[r]);let E=(0,t.useMemo)(()=>{let e=[...n];return Object.entries(g).forEach(([t,n])=>{let i=r.find(e=>e.id===t);i&&(e=e.filter(e=>{let t=typeof i.accessor==`function`?i.accessor(e):e[i.accessor],r=String(t||``).toLowerCase(),a=!0;return n.type===`text`&&n.value&&(a&&=r.includes(String(n.value).toLowerCase())),n.type===`select`&&n.value&&(a&&=r===String(n.value).toLowerCase()),n.type===`multiselect`&&Array.isArray(n.value)&&n.value.length>0&&(a&&=n.value.some(e=>r===String(e).toLowerCase())),a}))}),e},[n,g,r]),D=(0,t.useMemo)(()=>{if(!m)return E;let e=r.find(e=>e.id===m.column);return e?[...E].sort((t,n)=>{let r=typeof e.accessor==`function`?e.accessor(t):t[e.accessor],i=typeof e.accessor==`function`?e.accessor(n):n[e.accessor];if(r==null)return 1;if(i==null)return-1;let a=0;if(typeof r==`number`&&typeof i==`number`)a=r-i;else if(typeof r==`boolean`&&typeof i==`boolean`)a=r===i?0:r?1:-1;else if(r instanceof Date&&i instanceof Date)a=r.getTime()-i.getTime();else{let e=String(r).toLowerCase(),t=String(i).toLowerCase();a=e.localeCompare(t)}return m.direction===`desc`?a*-1:a}):E},[E,m,r]),O=(0,t.useMemo)(()=>{let e=(S.page-1)*S.pageSize,t=e+S.pageSize;return D.slice(e,t)},[D,S.page,S.pageSize]);(0,t.useEffect)(()=>{T(e=>({...e,total:E.length,page:Math.min(e.page,Math.ceil(E.length/e.pageSize)||1)}))},[E.length]),(0,t.useEffect)(()=>{let e={sort:m,filters:g,columnOrder:v,hiddenColumns:b,pageSize:S.pageSize};f(e),u?.({sort:m,filters:g,pagination:S,columnOrder:v,hiddenColumns:b,columns:r})},[m,g,v,b,S.pageSize,f,u,S,r]);let k=(0,t.useCallback)(e=>{h(t=>t?.column===e?t.direction===`asc`?{column:e,direction:`desc`}:void 0:{column:e,direction:`asc`})},[]),A=(0,t.useCallback)((e,t,n=`text`)=>{_(r=>({...r,[e]:{type:n,value:t,options:r[e]?.options}})),T(e=>({...e,page:1}))},[]),j=(0,t.useCallback)(e=>{_(t=>{let n={...t};return delete n[e],n})},[]),M=(0,t.useCallback)(()=>{_({})},[]),N=(0,t.useCallback)(e=>{T(t=>({...t,page:e}))},[]),P=(0,t.useCallback)(e=>{T(t=>({...t,pageSize:e,page:1}))},[]),F=(0,t.useCallback)(e=>{y(e)},[]),I=(0,t.useCallback)(e=>{x(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},[]),L=(0,t.useMemo)(()=>v.map(e=>r.find(t=>t.id===e)).filter(Boolean).filter(e=>!b.includes(e.id)),[v,r,b]);return{state:{data:n,filteredData:E,paginatedData:O,sortConfig:m,filters:g,pagination:S,columnOrder:v,hiddenColumns:b,loading:!1},orderedColumns:L,pageSizeOptions:s,handleSort:k,handleFilter:A,clearFilter:j,clearAllFilters:M,handlePageChange:N,handlePageSizeChange:P,handleColumnReorder:F,handleToggleColumn:I,allColumns:r}};e.AdvancedTable=({data:e,columns:r,defaultSort:i,defaultFilters:a={},defaultPageSize:o=10,pageSizeOptions:s=[10,25,50,100,200,300,400,500],enableSorting:c=!0,enableFiltering:l=!0,enablePagination:u=!0,enableExport:_=!0,persistConfig:v=!0,configKey:b=`advancedTable`,className:x=``,labels:S={configuration:`Configuración`,columnVisibility:`Columnas visibles`,pagination:{showingItems:`Mostrando`,to:`a`,of:`de`,items:`elementos`,showPerPage:`Mostrar`,perPageItems:`elementos`},clearAllFilters:`Limpiar todos los filtros`}})=>{let[C,w]=(0,t.useState)(null),[E,D]=(0,t.useState)(null),[O,k]=(0,t.useState)(!1),[A,j]=(0,t.useState)(null),M=(0,t.useRef)(null),{state:N,orderedColumns:P,handleSort:F,handleFilter:I,clearAllFilters:L,handlePageChange:R,handlePageSizeChange:z,handleColumnReorder:B,handleToggleColumn:V,allColumns:H}=T({data:e,columns:r,defaultSort:i,defaultFilters:a,defaultPageSize:o,pageSizeOptions:s,persistConfig:v,configKey:b}),{paginatedData:U,sortConfig:W,filters:G,pagination:K,hiddenColumns:q}=N;(0,t.useEffect)(()=>{H.forEach(e=>{r.find(t=>t.id===e.id)||r.push(e)})},[H,r]);let J=(e,t)=>{w(t),e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`text/html`,``)},Y=(e,t)=>{e.preventDefault(),e.dataTransfer.dropEffect=`move`,D(t)},X=()=>{D(null)},Z=(e,t)=>{if(e.preventDefault(),C!==null){if(C!==t){let e=[...N.columnOrder],[n]=e.splice(C,1);e.splice(t,0,n),B(e)}w(null),D(null)}},Q=()=>{w(null),D(null)},ee=()=>{},te=e=>{j(A===e?null:e)},ne=t=>{let n=r.find(e=>e.id===t);if(!n)return[];let i=new Map;return e.forEach(e=>{let t=typeof n.accessor==`function`?n.accessor(e):e[n.accessor],r=m(t);i.set(r,(i.get(r)||0)+1)}),Array.from(i.entries()).map(([e,t])=>({value:e,count:t,label:`${e} (${t})`})).sort((e,t)=>e.value.localeCompare(t.value))},re=Object.values(G).some(e=>e.type===`text`&&e.value||e.type===`select`&&e.value||e.type===`multiselect`&&Array.isArray(e.value)&&e.value.length>0);(0,t.useEffect)(()=>{let e=e=>{M.current&&!M.current.contains(e.target)&&k(!1)};return O&&document.addEventListener(`mousedown`,e),()=>{document.removeEventListener(`mousedown`,e)}},[O]);let $=Math.ceil(K.total/K.pageSize);return(0,n.jsxs)(`div`,{className:`w-full bg-redi-background border border-solid border-gray-500 rounded-xl overflow-hidden font-family-base shadow ${x}`,children:[(0,n.jsxs)(`div`,{className:`flex items-center justify-between p-4 bg-transparent border-b border-solid border-gray-400`,children:[(0,n.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,n.jsxs)(`div`,{className:`relative`,children:[(0,n.jsxs)(g,{level:`secondary`,onClick:()=>k(!O),children:[(0,n.jsx)(f,{}),(0,n.jsx)(`span`,{className:`hidden md:block`,children:S.configuration})]}),O&&(0,n.jsx)(`div`,{className:`absolute top-full left-0 bg-white border border-solid border-gray-300 rounded-md shadow-lg z-1000 mt-2 min-w-2xs max-w-xs opacity-100 visible p-4`,ref:M,children:(0,n.jsxs)(`div`,{className:`mb-4 last:mb-0`,children:[(0,n.jsx)(`div`,{className:`text-sm font-semibold text-redi-text mb-2 uppercase`,children:S.columnVisibility}),(0,n.jsx)(`div`,{className:`flex flex-col gap-2`,children:r.map(e=>(0,n.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,n.jsx)(`input`,{type:`checkbox`,className:`w-4 h-4 accent-redi-primary`,checked:!q.includes(e.id),onChange:()=>V(e.id)}),(0,n.jsx)(`label`,{children:e.label})]},e.id))})]})})]}),l&&re&&(0,n.jsx)(g,{level:`icon`,onClick:L,label:S.clearAllFilters,children:(0,n.jsx)(h,{color:`white`})})]}),(0,n.jsx)(`div`,{className:`flex items-center gap-2`,children:_&&(0,n.jsx)(g,{level:`secondary`,onClick:ee,children:(0,n.jsx)(d,{size:18})})})]}),(0,n.jsx)(`div`,{className:`overflow-x-auto max-h-[600px] min-h-[500px] overflow-y-auto bg-white relative`,children:(0,n.jsxs)(`table`,{className:`w-full border-collapse table-auto text-sm relative`,children:[(0,n.jsx)(`thead`,{children:(0,n.jsx)(`tr`,{children:P.map((e,t)=>(0,n.jsx)(`th`,{className:`bg-gray-50 border-b border-solid border-gray-200 text-left font-semibold text-redi-text p-0 sticky top-0 z-10 select-none hover:bg-gray-200 ${C===t?`opacity-50 bg-gray-300`:``} ${E===t?`bg-redi-primary-bg border-l border-solid border-redi-primary`:``}`,draggable:!0,onDragStart:e=>J(e,t),onDragOver:e=>Y(e,t),onDragLeave:X,onDrop:e=>Z(e,t),onDragEnd:Q,children:(0,n.jsxs)(`div`,{className:`flex items-center py-3 px-4 gap-2 min-h-12`,children:[(0,n.jsx)(`div`,{className:`text-gray-600 cursor-grab opacity-70 hover:opacity-100 text-base`,children:`⋮⋮`}),(0,n.jsxs)(`div`,{className:`flex flex-1 items-center gap-2`,children:[(0,n.jsxs)(`span`,{className:c?`cursor-pointer py-1 px-1.5 rounded-sm flex items-center gap-1.5 text-sm font-semibold text-redi-text uppercase hover:bg-redi-text hover:text-redi-link-text`:``,onClick:t=>{t.stopPropagation(),c&&F(e.id)},children:[e.label,c&&W?.column===e.id&&(0,n.jsx)(`span`,{className:`font-bold text-redi-link-text text-base`,children:W.direction===`asc`?` ↑`:` ↓`})]}),l&&(0,n.jsxs)(`div`,{className:`relative`,children:[(0,n.jsx)(g,{level:`icon`,onClick:t=>{t.stopPropagation(),te(e.id)},children:(0,n.jsx)(p,{size:16})}),A===e.id&&(0,n.jsx)(y,{columnId:e.id,label:e.label,options:ne(e.id),textValue:G[e.id]?.type===`text`?String(G[e.id].value||``):``,selectedValues:G[e.id]?.type===`multiselect`&&Array.isArray(G[e.id]?.value)?G[e.id].value:[],onTextChange:t=>I(e.id,t,`text`),onSelectionChange:t=>I(e.id,t,`multiselect`),onClose:()=>j(null)})]})]})]})},e.id))})}),(0,n.jsx)(`tbody`,{children:U.map((e,t)=>(0,n.jsx)(`tr`,{className:`even:bg-gray-50 hover:bg-gray-100 border-b border-solid border-b-gray-100 odd:bg-white`,children:P.map(r=>{let i=typeof r.accessor==`function`?r.accessor(e):e[r.accessor];return r.render?(0,n.jsx)(`td`,{className:`py-3 px-4 text-redi-text font-normal leading-6 align-middle border-r border-solid border-r-gray-300 static table-cell last:border-r-0 first:font-medium`,children:r.render(i,e,t)},r.id):(0,n.jsx)(`td`,{className:`py-3 px-4 text-redi-text font-normal leading-6 align-middle border-r border-solid border-r-gray-300 static table-cell last:border-r-0 first:font-medium`,children:m(i)},r.id)})},t))})]})}),u&&(0,n.jsxs)(`div`,{className:`flex items-center justify-between py-4 px-6 bg-white border-t-gray-300 border-solid border-t gap-4`,children:[(0,n.jsx)(`div`,{className:`text-redi-text text-base font-medium shrink-0`,children:(0,n.jsxs)(`span`,{children:[S.pagination?.showingItems,` `,(K.page-1)*K.pageSize+1,` `,S.pagination?.to,` `,Math.min(K.page*K.pageSize,K.total),` `,S.pagination?.of,` `,K.total,` `,S.pagination?.items]})}),(0,n.jsxs)(`div`,{className:`flex items-center gap-5`,children:[(0,n.jsxs)(`label`,{className:`flex items-center gap-3 text-sm font-semibold text-redi-text`,children:[S.pagination?.showPerPage,(0,n.jsx)(`select`,{value:K.pageSize,onChange:e=>z(Number(e.target.value)),className:`py-1.5 px-2.5 border border-solid border-gray-300 rounded-md bg-white text-redi-text focus:outline-none focus:ring-2 focus:ring-redi-primary`,children:s.map(e=>(0,n.jsx)(`option`,{value:e,children:e},e))}),S.pagination?.perPageItems]}),(0,n.jsxs)(`div`,{className:`flex gap-1 items-center`,children:[(0,n.jsx)(g,{level:`icon`,onClick:()=>R(1),disabled:K.page===1,children:`<<`}),(0,n.jsx)(g,{level:`icon`,onClick:()=>R(K.page-1),disabled:K.page===1,children:`<`}),Array.from({length:Math.min(3,$)},(e,t)=>{let r;return r=$<=3||K.page<=2?t+1:K.page>$-2?$-2+t:K.page-1+t,(0,n.jsx)(g,{level:K.page===r?`primary`:`secondary`,onClick:()=>R(r),children:r},r)}),(0,n.jsx)(g,{level:`icon`,onClick:()=>R(K.page+1),disabled:K.page===$,children:`>`}),(0,n.jsx)(g,{level:`icon`,onClick:()=>R($),disabled:K.page===$,children:`>>`})]})]})]})]})},e.Button=g});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redi.run/redi-components",
|
|
3
3
|
"description": "This project was created to define the style of the UI and improve the UX in all projects from REDI",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.23",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Jonathan Manchego Sosa",
|