next-helios-fe 1.4.13 → 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.
Files changed (3) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
  3. package/src/components/table/index.tsx +55 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "next-helios-fe",
3
- "version": "1.4.13",
3
+ "version": "1.4.14",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/table/index.tsx 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) => {
@@ -335,7 +366,7 @@ export const Table: TableComponentProps = ({
335
366
  ?.slice((page - 1) * maxRow, page * maxRow)
336
367
  ?.map((item, index) => {
337
368
  return (
338
- <tr key={item.id} className="hover:bg-secondary-transparent">
369
+ <tr key={item.id}>
339
370
  {checkbox && (
340
371
  <td className="sticky left-0 w-8 px-4 py-1 border-b bg-secondary-bg">
341
372
  <Form.Checkbox
@@ -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 font-light">
651
+ <div className="flex items-center gap-2 text-xs">
621
652
  <button
622
653
  type="button"
623
- className="flex justify-center items-center border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
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 border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
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 className="flex gap-2 max-w-20 overflow-auto [&::-webkit-scrollbar]:hidden">
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={`flex justify-center items-center border rounded-md min-w-9 h-9 ${
649
- page === index + 1
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 border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
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 border rounded-md min-w-9 h-9 bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
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" />