@applica-software-guru/react-admin 1.5.359 → 1.5.362-alpha1

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.359"
+  "version": "1.5.362-alpha1"
 }

package/src/components/Pagination/Pagination.tsx

@@ -4,6 +4,7 @@ import {
   ComponentPropType,
   ListPaginationContextValue,
   sanitizeListRestProps,
+  useListContext,
   useListPaginationContext,
   useResourceDefinition,
   useTranslate
@@ -16,6 +17,8 @@ import { PaginationActions, PaginationActionsProps } from './PaginationActions';
 const Pagination: FC<PaginationProps> = memo((props) => {
   const { rowsPerPageOptions = DefaultRowsPerPageOptions, actions, limit = null, ...rest } = props;
   const { isLoading, hasNextPage, page, perPage, total, setPage, setPerPage } = useListPaginationContext(props);
+  // Recupera i dati della pagina corrente
+  const { data } = useListContext();
   const translate = useTranslate();
   const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const [currentPage, setCurrentPage] = useState(page - 1); // Stato per la UI
@@ -33,7 +36,12 @@ const Pagination: FC<PaginationProps> = memo((props) => {
     setIsSelectedPage(false);
   }, [page]);
 
+  // Modalità infinito: total === -1
   const totalPages = useMemo(() => {
+    if (total === -1) {
+      // In modalità infinito, non conosciamo il totale
+      return undefined;
+    }
     return total != null ? Math.ceil(total / perPage) : undefined;
   }, [perPage, total]);
 
@@ -55,12 +63,30 @@ const Pagination: FC<PaginationProps> = memo((props) => {
       }
 
       event.preventDefault();
-      if (page < 0 || (totalPages !== undefined && page > totalPages - 1)) {
-        throw new Error(
-          translate('ra.navigation.page_out_of_boundaries', {
-            page: page + 1
-          })
-        );
+      // Modalità infinito: total === -1
+      if (total === -1) {
+        // Puoi andare indietro se page >= 0
+        // Puoi andare avanti solo se la pagina attuale ha rowsPerPage record
+        const canGoForward = data && Array.isArray(data) && data.length === perPage;
+        if (page < 0) {
+          throw new Error(
+            translate('ra.navigation.page_out_of_boundaries', {
+              page: page + 1
+            })
+          );
+        }
+        if (page > currentPage && !canGoForward) {
+          // Non puoi andare avanti se la risposta è minore di rowsPerPage
+          return;
+        }
+      } else {
+        if (page < 0 || (totalPages !== undefined && page > totalPages - 1)) {
+          throw new Error(
+            translate('ra.navigation.page_out_of_boundaries', {
+              page: page + 1
+            })
+          );
+        }
       }
 
       const arrowSelected =
@@ -84,7 +110,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
         setPage(page + 1);
       }
     },
-    [debouncedPageChange, setPage, translate, totalPages, setIsSelectedPage]
+    [debouncedPageChange, setPage, translate, totalPages, setIsSelectedPage, total, data, perPage, currentPage]
   );
 
   const handlePerPageChange = useCallback(
@@ -176,7 +202,7 @@ const Pagination: FC<PaginationProps> = memo((props) => {
       // @ts-ignore
       ActionsComponent={ActionsComponent}
       nextIconButtonProps={{
-        disabled: !hasNextPage
+        disabled: total === -1 ? !(data && Array.isArray(data) && data.length === perPage) : !hasNextPage
       }}
       component="span"
       labelRowsPerPage={translate('ra.navigation.page_rows_per_page')}

package/src/components/Pagination/PaginationActions.tsx

@@ -1,16 +1,22 @@
 import { FC, memo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Pagination, PaginationProps } from '@mui/material';
+import { useListContext, useTranslate } from 'ra-core';
 import PropTypes from 'prop-types';
-import { useTranslate } from 'ra-core';
 
 const PaginationActions: FC<PaginationActionsProps> = memo((props) => {
   const { page, rowsPerPage, count, onPageChange, size = 'small', className, ...rest } = props;
+  const { data } = useListContext();
   const translate = useTranslate();
 
   const nbPages = Math.ceil(count / rowsPerPage) || 1;
 
-  if (nbPages === 1) {
+  // Modalità infinito: total === -1
+  const isInfinite = count === -1;
+  // Disabilita avanti se i record sono meno di rowsPerPage
+  const disableNext = isInfinite ? !(data && Array.isArray(data) && data.length === rowsPerPage) : page + 1 >= nbPages;
+
+  if (nbPages === 1 && !isInfinite) {
     return <Root className={className} />;
   }
 
@@ -33,13 +39,22 @@ const PaginationActions: FC<PaginationActionsProps> = memo((props) => {
     <Root className={className}>
       <Pagination
         size={size}
-        count={nbPages}
-        // <TablePagination>, the parent, uses 0-based pagination
-        // while <Pagination> uses 1-based pagination
+        count={isInfinite ? page + 2 : nbPages}
         page={page + 1}
-        onChange={(e: any, page) => onPageChange(e, page - 1)}
+        onChange={(e: any, newPage) => {
+          // Disabilita avanti in modalità infinito
+          if (isInfinite && newPage - 1 > page && disableNext) return;
+          onPageChange(e, newPage - 1);
+        }}
         {...sanitizeRestProps(rest)}
         getItemAriaLabel={getItemAriaLabel}
+        renderItem={(item) => {
+          // Disabilita il bottone avanti in modalità infinito
+          if (isInfinite && item.type === 'next') {
+            return { ...item, disabled: disableNext };
+          }
+          return item;
+        }}
       />
     </Root>
   );

package/src/components/ra-inputs/AutocompleteInput.tsx

@@ -1,11 +1,12 @@
-import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
+import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
 import { styled } from '@mui/material/styles';
-import { AutocompleteInputProps, AutocompleteInput as RaAutocompleteInput } from 'react-admin';
+import {
+  AutocompleteInput as RaAutocompleteInput,
+  AutocompleteInputProps as RaAutocompleteInputProps
+} from 'react-admin';
 
-// @ts-ignore
-const StyledAutocompleteInput = styled(RaAutocompleteInput, {
-  name: 'StyledAutocompleteInput',
-  root: 'root'
+const StyledAutocompleteInput = styled(RaAutocompleteInput as any, {
+  name: 'StyledAutocompleteInput'
 })(({ label }) => ({
   '& legend': {
     width: label === false ? 0 : 'auto'
@@ -15,6 +16,8 @@ const StyledAutocompleteInput = styled(RaAutocompleteInput, {
   }
 }));
 
+type AutocompleteInputProps = RaAutocompleteInputProps & LabeledInputProps;
+
 function AutocompleteInput({ size = 'small', ...props }: AutocompleteInputProps): JSX.Element {
   // Sanitize props removing "perPage":
   // @ts-ignore