@farmzone/fz-react-ui 1.0.15 → 1.0.17

package/dist/index.d.cts

@@ -331,7 +331,7 @@ interface PaginationProps {
     onPageChange?: (page: number) => void;
     showTotalCount?: boolean;
 }
-declare function Pagination(props: PaginationProps): react.JSX.Element | null;
+declare function Pagination(props: PaginationProps): react.JSX.Element;
 
 type BreadCrumbItem = {
     label: string;
@@ -652,6 +652,7 @@ interface Column<T> {
     sortable?: boolean;
     sort?: "asc" | "desc" | null;
     fixed?: TableFixed;
+    tooltipText?: (value: unknown, record: T, index: number) => ReactNode;
 }
 
 interface CheckboxInfo {
@@ -970,6 +971,7 @@ type SelectOption<P> = BaseOption<P> & {
     placeholder?: string;
     containerClassName?: string;
     canReset?: boolean;
+    autoSubmit?: boolean;
 };
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";

package/dist/index.d.ts

@@ -331,7 +331,7 @@ interface PaginationProps {
     onPageChange?: (page: number) => void;
     showTotalCount?: boolean;
 }
-declare function Pagination(props: PaginationProps): react.JSX.Element | null;
+declare function Pagination(props: PaginationProps): react.JSX.Element;
 
 type BreadCrumbItem = {
     label: string;
@@ -652,6 +652,7 @@ interface Column<T> {
     sortable?: boolean;
     sort?: "asc" | "desc" | null;
     fixed?: TableFixed;
+    tooltipText?: (value: unknown, record: T, index: number) => ReactNode;
 }
 
 interface CheckboxInfo {
@@ -970,6 +971,7 @@ type SelectOption<P> = BaseOption<P> & {
     placeholder?: string;
     containerClassName?: string;
     canReset?: boolean;
+    autoSubmit?: boolean;
 };
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";

package/dist/index.js

@@ -1397,7 +1397,8 @@ function getVisiblePageRange(currentPage, totalPages) {
   return { start, end };
 }
 function Pagination(props) {
-  const { page = 0, totalPages = 50, onPageChange } = props;
+  const { page = 0, totalPages: rawTotalPages = 0, onPageChange } = props;
+  const totalPages = Math.max(1, rawTotalPages);
   const [displayPage, setDisplayPage] = useState(page);
   useEffect(() => {
     setDisplayPage(page);
@@ -1409,6 +1410,7 @@ function Pagination(props) {
     },
     [onPageChange]
   );
+  const isEmpty = rawTotalPages === 0;
   const pageButtons = useMemo(() => {
     const { start, end } = getVisiblePageRange(displayPage, totalPages);
     const buttons = [];
@@ -1420,9 +1422,10 @@ function Pagination(props) {
           "button",
           {
             type: "button",
+            disabled: isEmpty,
             className: cn(
-              "min-w-7 min-h-7 rounded-[4px] text-[14px] px-[5px] font-medium cursor-pointer",
-              isActive ? "bg-[#2675e2] text-white font-bold" : "bg-white text-[#000000] font-normal hover:bg-gray-50"
+              "min-w-7 min-h-7 rounded-[4px] text-[14px] px-[5px] font-medium",
+              isEmpty ? "bg-[#2675e2] text-white font-bold cursor-default" : isActive ? "bg-[#2675e2] text-white font-bold cursor-pointer" : "bg-white text-[#000000] font-normal hover:bg-gray-50 cursor-pointer"
             ),
             onClick: () => handlePageChange(pageIndex),
             children: displayPageNumber
@@ -1432,7 +1435,7 @@ function Pagination(props) {
       );
     }
     return buttons;
-  }, [displayPage, totalPages, handlePageChange]);
+  }, [displayPage, totalPages, handlePageChange, isEmpty]);
   const isFirstDisabled = displayPage <= 0;
   const isPreviousDisabled = displayPage <= 0;
   const isNextDisabled = displayPage >= totalPages - 1;
@@ -1452,9 +1455,6 @@ function Pagination(props) {
       children
     }
   );
-  if (!totalPages || totalPages === 0) {
-    return null;
-  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-1.5", children: [
     renderNavButton(
       () => handlePageChange(0),
@@ -2794,7 +2794,7 @@ function DatePickerSingle(props) {
         "div",
         {
           role: "button",
-          tabIndex: disabled ? -1 : 0,
+          tabIndex: -1,
           "aria-hidden": disabled,
           onClick: () => {
             if (!disabled) toggleCalendar(inputValue);
@@ -4706,7 +4706,13 @@ function Table(props) {
     showHorizontalDivider = true,
     showVerticalDivider = true
   } = props;
-  const { fixed = false, onSelectionChange, selectedKeys = [], disabledKeys = [], disabledTooltip } = checkboxInfo ?? {};
+  const {
+    fixed = false,
+    onSelectionChange,
+    selectedKeys = [],
+    disabledKeys = [],
+    disabledTooltip
+  } = checkboxInfo ?? {};
   const scrollRef = useRef(null);
   const footerRef = useRef(null);
   const [tableHeight, setTableHeight] = useState(500);
@@ -5095,7 +5101,7 @@ function Table(props) {
             TableCellContent,
             {
               cellContent,
-              tooltipText: String(record[col.key] ?? ""),
+              tooltipText: col.tooltipText ? col.tooltipText(record[col.key], record, rowIdx) : String(record[col.key] ?? ""),
               align: align ?? "",
               tooltipConfig: col.key === "__checkbox__" ? false : tooltipConfig,
               onCellClick: col.key !== "__checkbox__" && onRowClickRef.current ? () => onRowClickRef.current?.(record, rowIdx) : void 0
@@ -5228,7 +5234,7 @@ function Table(props) {
         ] })
       }
     ),
-    !showEmpty && !showSkeleton && (paginationInfo || renderFooter?.renderLeft || renderFooter?.renderRight) && /* @__PURE__ */ jsx("div", { ref: footerRef, children: /* @__PURE__ */ jsx(
+    !showSkeleton && (paginationInfo || renderFooter?.renderLeft || renderFooter?.renderRight) && /* @__PURE__ */ jsx("div", { ref: footerRef, children: /* @__PURE__ */ jsx(
       TableFooter,
       {
         paginationInfo,
@@ -7747,8 +7753,9 @@ function PageFilter(props) {
   const handleInputChange = (key) => (e) => {
     onChange({ [key]: e.target.value });
   };
-  const handleSelectChange = (key) => (value) => {
+  const handleSelectChange = (key, autoSubmit) => (value) => {
     onChange({ [key]: value });
+    if (autoSubmit) onSubmit();
   };
   const handleRadioChange = (key) => (value) => {
     onChange({ [key]: value });
@@ -7791,7 +7798,7 @@ function PageFilter(props) {
           Select2,
           {
             value: currentValue,
-            onChange: handleSelectChange(optionKey),
+            onChange: handleSelectChange(optionKey, option.autoSubmit),
             options: option.options,
             placeholder: option.placeholder || "\uC120\uD0DD",
             canReset: option.canReset ?? true,