@apia/table 4.0.28 → 4.0.29

package/dist/index.d.ts

@@ -3,7 +3,8 @@ import React__default, { FunctionComponent, ReactNode, FC } from 'react';
 import { BoxProps } from '@apia/theme';
 import { IconType } from '@meronex/icons';
 import * as _apia_util from '@apia/util';
-import { TApiaFilter, TModify, TId, TRequireOnlyOne, EventEmitter } from '@apia/util';
+import { TApiaFilter, TModify, TRequireOnlyOne, EventEmitter } from '@apia/util';
+import { IPagination } from '@apia/components';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as _apia_store from '@apia/store';
@@ -546,48 +547,9 @@ declare const Responsive: React__default.MemoExoticComponent<({ tableName }: {
     tableName?: string;
 }) => React__default.JSX.Element>;
 
-interface IPagination {
-    appliedFilters?: number;
-    /**
-     * Este valor determina si el boton de eliminar filtros debe mostrarse como si hubieran filtros sin aplicar (en caso de que haya filtros aplicados por defecto) o si debe mostrarse como si todos los filtros con valor estan aplicados a la busqueda actual. Se deberia verificar con el slice de redux correspondiente a la tabla.
-     */
-    areAllFiltersApplied?: boolean;
-    className?: string;
-    currentPage: number | string;
-    disabled?: boolean;
-    disableReduced?: boolean;
-    hideInfo?: boolean;
-    hideMaximizeButton?: boolean;
-    hideRefreshButton?: boolean;
-    isLoading?: boolean;
-    /**
-     * Valor obtenido del buttonsSlice para bloquear los botones de la paginacion mientras se estan ejecutando acciones
-     */
-    isPerforming?: boolean;
-    /**
-     * Se usa principalmente en grillas de ejecución para indicar al pagination
-     * que debe usar el fieldId de la misma y no el de un listado global.
-     */
-    listId?: TId;
-    /**
-     * Si se pasa un método onDeleteFilters, aparece el botón "Eliminar filtros"
-     * cerca del refresh
-     */
-    onDeleteFilters?: () => unknown;
-    onPageChange: (page: number) => unknown;
-    onRefresh: (page: number) => unknown;
-    pageCount: number | string;
-    reachedMax?: boolean | undefined;
-    hasMore?: boolean | undefined;
-    /**
-     * Si la cantidad de registros se obtiene desde un lugar distinto de Redux,
-     * se puede pasar como number directamente
-     */
-    recordsCount?: number;
-    showMaximizeOnSmallBreakpoints?: boolean;
-    variant?: 'primary' | 'secondary' | 'datagrid';
-}
-declare const Pagination: React__default.MemoExoticComponent<({ appliedFilters, areAllFiltersApplied, className, currentPage, disabled, disableReduced, hasMore, hideInfo, hideMaximizeButton, hideRefreshButton, isLoading, isPerforming, listId: outerListId, onDeleteFilters, onPageChange, onRefresh, pageCount, recordsCount: outerRecordsCount, reachedMax, showMaximizeOnSmallBreakpoints, variant, }: IPagination) => React__default.JSX.Element>;
+declare const Pagination: React__default.MemoExoticComponent<({ listId: outerListId, ...props }: Omit<IPagination, "isMaximized" | "onMaximize"> & {
+    listId: string;
+}) => React__default.JSX.Element>;
 
 declare const Grouped: React__default.MemoExoticComponent<({ group, tableName, }: {
     group: string;

package/dist/index.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
-import React, { useMemo, useRef, useState, createContext, useContext, memo, useEffect, useCallback, createRef, forwardRef } from 'react';
+import React, { useMemo, useRef, useState, createContext, useContext, memo, forwardRef, useCallback } from 'react';
 import { Box, getVariant, Input, Select, useBreakpointIndex, Label, Link, Spinner } from '@apia/theme';
 import { useMount, useUpdateEffect, useUnmount, useThrottleFn } from 'ahooks';
 import uniqueId from 'lodash-es/uniqueId';
 import { injectReducers, createSlice, shallowEqual as shallowEqual$1 } from '@apia/store';
-import { addBoundary, useLatest, useUpdateEffect as useUpdateEffect$1, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, persistentStorage, EventEmitter, debugDispatcher, usePrevious, useIntermediateValue, getLabel, formatMessage, getDateFormat, noNaN, getIndex, downloadUrl, arrayOrArray, useMount as useMount$1 } from '@apia/util';
+import { addBoundary, useLatest, useUpdateEffect as useUpdateEffect$1, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, persistentStorage, EventEmitter, debugDispatcher, usePrevious, useIntermediateValue, getLabel, formatMessage, getDateFormat, getIndex, noNaN, downloadUrl, arrayOrArray, useMount as useMount$1 } from '@apia/util';
 import { shallowEqual } from 'react-redux';
-import { useOtherTagButton, AutoEllipsis, ApiaFilter, IconButton, AccordionItem, Accordion, RequiredMark, ApiaUtil, SimpleButton } from '@apia/components';
+import { useOtherTagButton, AutoEllipsis, ApiaFilter, IconButton, AccordionItem, Accordion, RequiredMark, Pagination as Pagination$1 } from '@apia/components';
 import { Icon } from '@apia/icons';
 import { FaSortUp, FaSortDown, FaSort, FaSquare } from '@meronex/icons/fa';
 import { MdKeyboardArrowDown, MdKeyboardArrowRight } from '@meronex/icons/md/';
@@ -2765,292 +2765,14 @@ function useIsMaximized(id) {
 }
 
 const NoMemoPagination = ({
-  appliedFilters,
-  areAllFiltersApplied,
-  className,
-  currentPage,
-  disabled,
-  disableReduced,
-  hasMore,
-  hideInfo,
-  hideMaximizeButton,
-  hideRefreshButton,
-  isLoading,
-  isPerforming,
   listId: outerListId,
-  onDeleteFilters,
-  onPageChange,
-  onRefresh,
-  pageCount,
-  recordsCount: outerRecordsCount,
-  reachedMax,
-  showMaximizeOnSmallBreakpoints,
-  variant = "primary"
+  ...props
 }) => {
-  const numberPageCount = Number(pageCount);
-  const breakPoint = useBreakpointIndex();
-  const numberCurrentPage = Number(currentPage);
-  const recordsCount = outerRecordsCount;
-  const [internCurrentPage, setCurrentPage] = useState(
-    numberCurrentPage ?? 1
-  );
-  const [lastEmittedPage, setLastEmittedPage] = useState(
-    numberCurrentPage ?? 1
-  );
-  const [hasNoValue, setHasNoValue] = useState(false);
-  useEffect(() => {
-    setCurrentPage(numberCurrentPage);
-  }, [numberCurrentPage]);
-  const setCurrentAndDispatch = useCallback(
-    (page) => {
-      setCurrentPage(page);
-      onPageChange(page);
-      setLastEmittedPage(page);
-    },
-    [onPageChange]
-  );
-  const InputRef = createRef();
   const listId = useResponsiveTableContext().name;
   const { isMaximized, toggleIsMaximized } = useIsMaximized(
     outerListId ?? listId
   );
-  const options = [];
-  for (let i = 1; i <= numberPageCount; i++) {
-    options.push(i);
-  }
-  const [infoButtonRef, setInfoButtonRef] = React.useState(
-    null
-  );
-  const recordsCountLabel = `${window.GNR_TOT_RECORDS}: ${recordsCount}`;
-  const tooltipProps = React.useMemo(
-    () => ({
-      text: breakPoint <= 3 ? `${recordsCountLabel}.${!reachedMax && !hasMore ? "" : reachedMax && window.GNR_TOT_RECORDS_REACHED || hasMore && window.QUERY_MORE_DATA}` : `${!reachedMax && !hasMore ? "" : reachedMax && window.GNR_TOT_RECORDS_REACHED || hasMore && window.QUERY_MORE_DATA}`,
-      attachToElement: { current: infoButtonRef },
-      closeOnClickOut: true
-      // closeOnClickOutChecker(element) {
-      //   return !getSpecificParent(element, (current) =>
-      //     current.classList.contains('pagination__information'),
-      //   );
-      // },
-    }),
-    [breakPoint, hasMore, infoButtonRef, reachedMax, recordsCountLabel]
-  );
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      as: "nav",
-      variant: `layout.common.components.pagination.${variant}`,
-      "aria-label": getLabel("lblQryParamPag").text,
-      className: `pagination ${numberPageCount <= 1 && !disableReduced ? "onlyRefresh" : ""} ${className ?? ""}`,
-      children: [
-        /* @__PURE__ */ jsxs(Box, { className: "pagination__leftToolbar", children: [
-          !hideMaximizeButton && (showMaximizeOnSmallBreakpoints || breakPoint > 4) && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              variant: "icon",
-              className: "pagination__fullScreenButton",
-              onClick: toggleIsMaximized.bind(toggleIsMaximized, void 0),
-              icon: !isMaximized ? "Maximize" : "Minimize",
-              title: !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
-              "aria-label": !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
-              iconSize: "Md"
-            }
-          ),
-          !hideInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
-            ((reachedMax || hasMore) && breakPoint > 3 || breakPoint <= 3) && className !== "grid__pagination" ? /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                variant: "icon-primary",
-                icon: "Info",
-                className: `pagination__information ${reachedMax || hasMore ? "pagination__alertInfo" : ""}`,
-                onClick: () => ApiaUtil.instance.tooltips.open(tooltipProps),
-                ref: setInfoButtonRef,
-                iconSize: "Md",
-                "aria-label": window.BTN_FILE_INFO_TOOLTIP,
-                title: window.BTN_FILE_INFO_TOOLTIP
-              }
-            ) : "",
-            breakPoint > 3 && /* @__PURE__ */ jsx(
-              Box,
-              {
-                as: "span",
-                className: "recordsCounter pagination__deleteLabels",
-                title: recordsCountLabel,
-                children: recordsCount !== -1 && `${window.GNR_TOT_RECORDS}: ${recordsCount} `
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Box, { className: "pagination__controls", children: (numberPageCount > 0 || disableReduced) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          breakPoint > 2 && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              variant: "icon-primary",
-              disabled: disabled || internCurrentPage === 1 || isLoading || isPerforming,
-              "aria-label": window.NAV_FIRST_PAGE,
-              type: "button",
-              onClick: () => {
-                setCurrentAndDispatch(1);
-              },
-              icon: "First",
-              iconSize: "Sm"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              variant: "icon-primary",
-              disabled: disabled || internCurrentPage <= 1 || isLoading || isPerforming,
-              "aria-label": window.NAV_PREVIOUS_PAGE,
-              type: "button",
-              onClick: () => {
-                setCurrentAndDispatch(internCurrentPage - 1);
-              },
-              icon: "Previous",
-              iconSize: "Sm"
-            }
-          ),
-          breakPoint > 2 && /* @__PURE__ */ jsxs(Box, { className: "input", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                className: "pagination__controls__input",
-                "aria-label": window.NAV_INPUT_LABEL,
-                title: `${window.PAGE}: ${internCurrentPage} `,
-                ref: InputRef,
-                value: hasNoValue ? "" : internCurrentPage,
-                onKeyDown: (ev) => {
-                  const regex = /([0-9])|(Backspace)|(Tab)/;
-                  if (!ev.key.match(regex)) {
-                    ev.stopPropagation();
-                    ev.preventDefault();
-                  }
-                  if (ev.key === "Enter") {
-                    ev.stopPropagation();
-                    ev.preventDefault();
-                    setCurrentAndDispatch(internCurrentPage);
-                  }
-                },
-                onBlur: () => {
-                  if (lastEmittedPage !== internCurrentPage) {
-                    setCurrentAndDispatch(internCurrentPage);
-                  }
-                },
-                onFocus: (ev) => {
-                  ev.currentTarget.select();
-                },
-                onChange: (ev) => {
-                  setHasNoValue(ev.target.value === "");
-                  setCurrentPage(
-                    Math.max(
-                      1,
-                      Math.min(
-                        noNaN(Number(ev.currentTarget.value)),
-                        pageCount
-                      )
-                    )
-                  );
-                },
-                disabled: disabled || isLoading || isPerforming
-              }
-            ),
-            " ",
-            "/",
-            " ",
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                as: "span",
-                title: recordsCount !== -1 ? `${window.GNR_TOT_RECORDS} ${recordsCount}` : window.NAV_INPUT_LABEL,
-                children: pageCount
-              }
-            )
-          ] }),
-          breakPoint <= 2 && /* @__PURE__ */ jsxs(
-            Select,
-            {
-              className: "pagination__selectPage",
-              value: internCurrentPage,
-              onChange: (e) => {
-                setCurrentAndDispatch(Number(e.target.value));
-              },
-              children: [
-                /* @__PURE__ */ jsxs("option", { disabled: true, children: [
-                  "Total: ",
-                  numberPageCount
-                ] }),
-                options.map((current) => {
-                  return /* @__PURE__ */ jsx("option", { children: current }, current);
-                })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              variant: "icon-primary",
-              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
-              "aria-label": window.NAV_NEXT_PAGE,
-              type: "button",
-              onClick: () => {
-                setCurrentAndDispatch(internCurrentPage + 1);
-              },
-              icon: "Next",
-              iconSize: "Sm"
-            }
-          ),
-          breakPoint > 2 && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              variant: "icon-primary",
-              type: "button",
-              "aria-label": window.NAV_LAST_PAGE,
-              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
-              onClick: () => {
-                setCurrentAndDispatch(numberPageCount);
-              },
-              icon: "Last",
-              iconSize: "Sm"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsx(Box, { className: "pagination__rightToolbar", children: (!hideRefreshButton || onDeleteFilters) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          onDeleteFilters && /* @__PURE__ */ jsxs(
-            SimpleButton,
-            {
-              disabled: isPerforming,
-              className: "pagination__deleteFiltersButton",
-              onClick: onDeleteFilters,
-              children: [
-                breakPoint > 3 && /* @__PURE__ */ jsx(Box, { as: "span", className: "pagination__deleteLabels", children: window.BTN_DELETE_FILTERS }),
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    as: "span",
-                    className: `pagination__appliedFiltersLabel ${areAllFiltersApplied ? "" : "withFilters"}`,
-                    children: appliedFilters
-                  }
-                )
-              ]
-            }
-          ),
-          !hideRefreshButton && /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              "aria-label": window.NAV_REFRESH,
-              onClick: () => onRefresh(numberCurrentPage),
-              icon: "Refresh",
-              iconSize: "Md",
-              disabled: disabled || isLoading,
-              variant: "icon-primary",
-              isLoading: isPerforming,
-              className: "pagiantion__refreshIcon"
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx(Pagination$1, { ...{ ...props, isMaximized, onMaximize: toggleIsMaximized } });
 };
 const Pagination = React.memo(NoMemoPagination);