next-helios-fe 1.4.12 → 1.4.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/table/index.tsx +57 -15
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { useState, useEffect, useMemo } from "react";
|
|
2
|
+
import React, { useState, useEffect, useRef, useMemo } from "react";
|
|
3
3
|
import { Icon } from "@iconify/react";
|
|
4
4
|
import { exportToExcel } from "react-json-to-excel";
|
|
5
5
|
import dayjs from "dayjs";
|
|
@@ -72,6 +72,7 @@ export const Table: TableComponentProps = ({
|
|
|
72
72
|
checkbox,
|
|
73
73
|
actionColumn,
|
|
74
74
|
}) => {
|
|
75
|
+
const paginationRef = useRef<HTMLDivElement>(null);
|
|
75
76
|
const [search, setSearch] = useState<string>("");
|
|
76
77
|
const [filter, setFilter] = useState<any[]>([]);
|
|
77
78
|
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
|
|
@@ -134,6 +135,36 @@ export const Table: TableComponentProps = ({
|
|
|
134
135
|
});
|
|
135
136
|
}, [header, data]);
|
|
136
137
|
|
|
138
|
+
const handleOnPreviousClick = () => {
|
|
139
|
+
if (page - 1 === 1) {
|
|
140
|
+
paginationRef.current?.scrollTo({
|
|
141
|
+
left: 0,
|
|
142
|
+
behavior: "smooth",
|
|
143
|
+
});
|
|
144
|
+
} else {
|
|
145
|
+
document.getElementById(`pagination-page-${page - 1}`)?.scrollIntoView({
|
|
146
|
+
behavior: "smooth",
|
|
147
|
+
block: "nearest",
|
|
148
|
+
inline: "end",
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
const handleOnNextClick = () => {
|
|
154
|
+
if (page === Math.ceil(data.length / maxRow)) {
|
|
155
|
+
paginationRef.current?.scrollTo({
|
|
156
|
+
left: paginationRef.current.scrollWidth,
|
|
157
|
+
behavior: "smooth",
|
|
158
|
+
});
|
|
159
|
+
} else {
|
|
160
|
+
document.getElementById(`pagination-page-${page + 1}`)?.scrollIntoView({
|
|
161
|
+
behavior: "smooth",
|
|
162
|
+
block: "nearest",
|
|
163
|
+
inline: "end",
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
|
|
137
168
|
const filteredData = useMemo(() => {
|
|
138
169
|
const tempData = data
|
|
139
170
|
?.filter((item) => {
|
|
@@ -220,14 +251,14 @@ export const Table: TableComponentProps = ({
|
|
|
220
251
|
{item.title}
|
|
221
252
|
<Icon
|
|
222
253
|
icon={`mi:${
|
|
223
|
-
item.key === sortBy
|
|
254
|
+
item.key === sortBy.column && sortBy.order === "asc"
|
|
224
255
|
? "arrow-up"
|
|
225
|
-
: item.key === sortBy
|
|
256
|
+
: item.key === sortBy.column && sortBy.order === "desc"
|
|
226
257
|
? "arrow-down"
|
|
227
258
|
: "sort"
|
|
228
259
|
}`}
|
|
229
260
|
className={`group-hover/header:visible ${
|
|
230
|
-
item.key === sortBy
|
|
261
|
+
item.key === sortBy.column ? "visible" : "invisible"
|
|
231
262
|
}`}
|
|
232
263
|
/>
|
|
233
264
|
</button>
|
|
@@ -617,39 +648,45 @@ export const Table: TableComponentProps = ({
|
|
|
617
648
|
} to ${
|
|
618
649
|
page * maxRow > data.length ? data.length : page * maxRow
|
|
619
650
|
} of ${data.length} entries`}</span>
|
|
620
|
-
<div className="flex items-center gap-2 text-xs
|
|
651
|
+
<div className="flex items-center gap-2 text-xs">
|
|
621
652
|
<button
|
|
622
653
|
type="button"
|
|
623
|
-
className="flex justify-center items-center
|
|
654
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
624
655
|
disabled={page === 1}
|
|
625
656
|
onClick={() => {
|
|
626
657
|
setPage(1);
|
|
658
|
+
paginationRef.current?.scrollTo({
|
|
659
|
+
left: 0,
|
|
660
|
+
behavior: "smooth",
|
|
661
|
+
});
|
|
627
662
|
}}
|
|
628
663
|
>
|
|
629
664
|
<Icon icon="gravity-ui:chevrons-left" />
|
|
630
665
|
</button>
|
|
631
666
|
<button
|
|
632
667
|
type="button"
|
|
633
|
-
className="hidden md:flex justify-center items-center
|
|
668
|
+
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
634
669
|
disabled={page === 1}
|
|
635
670
|
onClick={() => {
|
|
636
671
|
setPage((prev) => prev - 1);
|
|
672
|
+
handleOnPreviousClick();
|
|
637
673
|
}}
|
|
638
674
|
>
|
|
639
675
|
<Icon icon="gravity-ui:chevron-left" />
|
|
640
676
|
</button>
|
|
641
|
-
<div
|
|
677
|
+
<div
|
|
678
|
+
ref={paginationRef}
|
|
679
|
+
className="flex gap-2 max-w-20 overflow-auto [&::-webkit-scrollbar]:hidden"
|
|
680
|
+
>
|
|
642
681
|
{Array.from({ length: Math.ceil(data.length / maxRow) }).map(
|
|
643
682
|
(_, index) => {
|
|
644
683
|
return (
|
|
645
684
|
<button
|
|
646
685
|
key={index}
|
|
686
|
+
id={`pagination-page-${index}`}
|
|
647
687
|
type="button"
|
|
648
|
-
className=
|
|
649
|
-
|
|
650
|
-
? "bg-primary-light text-primary"
|
|
651
|
-
: "bg-secondary-bg hover:bg-secondary-light"
|
|
652
|
-
}`}
|
|
688
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md select-none hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
689
|
+
disabled={page === index + 1}
|
|
653
690
|
onClick={() => {
|
|
654
691
|
setPage(index + 1);
|
|
655
692
|
}}
|
|
@@ -662,20 +699,25 @@ export const Table: TableComponentProps = ({
|
|
|
662
699
|
</div>
|
|
663
700
|
<button
|
|
664
701
|
type="button"
|
|
665
|
-
className="hidden md:flex justify-center items-center
|
|
702
|
+
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
666
703
|
disabled={data.length <= page * maxRow}
|
|
667
704
|
onClick={() => {
|
|
668
705
|
setPage((prev) => prev + 1);
|
|
706
|
+
handleOnNextClick();
|
|
669
707
|
}}
|
|
670
708
|
>
|
|
671
709
|
<Icon icon="gravity-ui:chevron-right" />
|
|
672
710
|
</button>
|
|
673
711
|
<button
|
|
674
712
|
type="button"
|
|
675
|
-
className="flex justify-center items-center
|
|
713
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
676
714
|
disabled={data.length <= page * maxRow}
|
|
677
715
|
onClick={() => {
|
|
678
716
|
setPage(Math.ceil(data.length / maxRow));
|
|
717
|
+
paginationRef.current?.scrollTo({
|
|
718
|
+
left: paginationRef.current.scrollWidth,
|
|
719
|
+
behavior: "smooth",
|
|
720
|
+
});
|
|
679
721
|
}}
|
|
680
722
|
>
|
|
681
723
|
<Icon icon="gravity-ui:chevrons-right" />
|