@applica-software-guru/react-admin 1.5.280 → 1.5.282

package/package.json

@@ -106,5 +106,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.280"
+  "version": "1.5.282"
 }

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,184 @@
+import { FC, ReactElement, memo, useCallback, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { TablePagination, TablePaginationBaseProps, Theme, Toolbar, useMediaQuery } from '@mui/material';
+import {
+  ComponentPropType,
+  ListPaginationContextValue,
+  sanitizeListRestProps,
+  useListPaginationContext,
+  useTranslate
+} from 'ra-core';
+
+import { PaginationActions, PaginationActionsProps } from './PaginationActions';
+import { debounce } from 'lodash';
+
+const Pagination: FC<PaginationProps> = memo((props) => {
+  const { rowsPerPageOptions = DefaultRowsPerPageOptions, actions, limit = null, ...rest } = props;
+  const { isLoading, hasNextPage, page, perPage, total, setPage, setPerPage } = useListPaginationContext(props);
+  const translate = useTranslate();
+  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const [currentPage, setCurrentPage] = useState(0); // Stato per la UI
+
+  const totalPages = useMemo(() => {
+    return total != null ? Math.ceil(total / perPage) : undefined;
+  }, [perPage, total]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedPageChange = useCallback(
+    debounce((page) => {
+      setPage(page + 1);
+    }, 500),
+    [setPage]
+  );
+
+  /**
+   * Warning: Material UI's page is 0-based
+   */
+  const handlePageChange = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, page: number) => {
+      if (!event) {
+        return;
+      }
+
+      event.preventDefault();
+      if (page < 0 || (totalPages !== undefined && page > totalPages - 1)) {
+        throw new Error(
+          translate('ra.navigation.page_out_of_boundaries', {
+            page: page + 1
+          })
+        );
+      }
+
+      const arrowSelected =
+        ((event.target as HTMLElement).dataset?.testid || (event.target as HTMLElement).classList?.value) ?? '';
+      // check if user is clicking on the arrows or on the numbers
+      const isArrowClick =
+        arrowSelected.includes('MuiPaginationItem-previousNext') ||
+        arrowSelected.includes('NavigateBeforeIcon') ||
+        arrowSelected.includes('NavigateNextIcon') ||
+        arrowSelected.includes('KeyboardArrowLeftIcon') ||
+        arrowSelected.includes('KeyboardArrowRightIcon');
+
+      setCurrentPage(page);
+
+      if (isArrowClick) {
+        // apply debounced API call for arrows clicks
+        debouncedPageChange(page);
+      } else {
+        // apply immediate API call for number clicks
+        setPage(page + 1);
+      }
+    },
+    [debouncedPageChange, setPage, translate, totalPages]
+  );
+
+  const handlePerPageChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+      setPerPage(Number(event.target.value));
+    },
+    [setPerPage]
+  );
+
+  const labelDisplayedRows = useCallback(
+    ({ from, to, count }: { from: number; to: number; count: number }) =>
+      count === -1 && hasNextPage
+        ? translate('ra.navigation.partial_page_range_info', {
+            offsetBegin: from,
+            offsetEnd: to,
+            _: `%{from}-%{to} of more than %{to}`
+          })
+        : translate('ra.navigation.page_range_info', {
+            offsetBegin: from,
+            offsetEnd: to,
+            total: count === -1 ? to : count,
+            _: `%{from}-%{to} of %{count === -1 ? to : count}`
+          }),
+    [translate, hasNextPage]
+  );
+
+  const labelItem = useCallback(
+    (type: string) => translate(`ra.navigation.${type}`, { _: `Go to ${type} page` }),
+    [translate]
+  );
+
+  if (isLoading) {
+    return <Toolbar variant="dense" />;
+  }
+
+  // Avoid rendering TablePagination if "page" value is invalid
+  if (total === 0 || page < 1 || (totalPages !== undefined && page > totalPages)) {
+    if (limit != null && process.env.NODE_ENV === 'development') {
+      console.warn(
+        'The Pagination limit prop is deprecated. Empty state should be handled by the component displaying data (Datagrid, SimpleList).'
+      );
+    }
+    return null;
+  }
+
+  if (isSmall) {
+    return (
+      <TablePagination
+        count={total == null ? -1 : total}
+        rowsPerPage={perPage}
+        page={currentPage}
+        onPageChange={handlePageChange}
+        rowsPerPageOptions={emptyArray}
+        component="span"
+        labelDisplayedRows={labelDisplayedRows}
+        {...sanitizeListRestProps(rest)}
+      />
+    );
+  }
+
+  const ActionsComponent = actions
+    ? actions // overridden by caller
+    : !isLoading && total != null
+    ? PaginationActions // regular navigation
+    : undefined; // partial navigation (uses default TablePaginationActions)
+
+  return (
+    <TablePagination
+      count={total == null ? -1 : total}
+      rowsPerPage={perPage}
+      page={currentPage}
+      onPageChange={handlePageChange}
+      onRowsPerPageChange={handlePerPageChange}
+      // @ts-ignore
+      ActionsComponent={ActionsComponent}
+      nextIconButtonProps={{
+        disabled: !hasNextPage
+      }}
+      component="span"
+      labelRowsPerPage={translate('ra.navigation.page_rows_per_page')}
+      labelDisplayedRows={labelDisplayedRows}
+      getItemAriaLabel={labelItem}
+      rowsPerPageOptions={rowsPerPageOptions}
+      {...sanitizeListRestProps(rest)}
+    />
+  );
+});
+
+Pagination.propTypes = {
+  actions: ComponentPropType,
+  limit: PropTypes.element,
+  rowsPerPageOptions: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.number.isRequired
+      })
+    ])
+  ) as PropTypes.Validator<(number | { label: string; value: number })[] | null | undefined>
+};
+
+const DefaultRowsPerPageOptions = [5, 10, 25, 50];
+const emptyArray: any[] = [];
+
+interface PaginationProps extends TablePaginationBaseProps, Partial<ListPaginationContextValue> {
+  rowsPerPageOptions?: Array<number | { label: string; value: number }>;
+  actions?: FC<PaginationActionsProps>;
+  limit?: ReactElement;
+}
+
+export { Pagination };

package/src/components/Pagination/PaginationActions.tsx

@@ -0,0 +1,84 @@
+import { FC, memo } from 'react';
+import { styled } from '@mui/material/styles';
+import { Pagination, PaginationProps } from '@mui/material';
+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 translate = useTranslate();
+
+  const nbPages = Math.ceil(count / rowsPerPage) || 1;
+
+  if (nbPages === 1) {
+    return <Root className={className} />;
+  }
+
+  function getItemAriaLabel(type: 'page' | 'first' | 'last' | 'next' | 'previous', page: number, selected: boolean) {
+    if (type === 'page') {
+      return selected
+        ? translate('ra.navigation.current_page', {
+            page,
+            _: `page ${page}`
+          })
+        : translate('ra.navigation.page', {
+            page,
+            _: `Go to page ${page}`
+          });
+    }
+    return translate(`ra.navigation.${type}`, { _: `Go to ${type} page` });
+  }
+
+  return (
+    <Root className={className}>
+      <Pagination
+        size={size}
+        count={nbPages}
+        // <TablePagination>, the parent, uses 0-based pagination
+        // while <Pagination> uses 1-based pagination
+        page={page + 1}
+        onChange={(e: any, page) => onPageChange(e, page - 1)}
+        {...sanitizeRestProps(rest)}
+        getItemAriaLabel={getItemAriaLabel}
+      />
+    </Root>
+  );
+});
+
+interface PaginationActionsProps extends PaginationProps {
+  page: number;
+  rowsPerPage: number;
+  count: number;
+  onPageChange: (event: MouseEvent, page: number) => void;
+}
+/**
+ * PaginationActions propTypes are copied over from Material UI’s
+ * TablePaginationActions propTypes. See
+ * https://github.com/mui/material-ui/blob/869692ecf3812bc4577ed4dde81a9911c5949695/packages/material-ui/src/TablePaginationActions/TablePaginationActions.js#L53-L85
+ * for reference.
+ */
+PaginationActions.propTypes = {
+  count: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  rowsPerPage: PropTypes.number.isRequired,
+  color: PropTypes.oneOf(['primary', 'secondary', 'standard']),
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+
+const PREFIX = 'RaPaginationActions';
+
+const Root = styled('div', {
+  name: PREFIX,
+  overridesResolver: (styles) => styles.root
+})(() => ({
+  flexShrink: 0,
+  ml: 4
+}));
+
+function sanitizeRestProps({ nextIconButtonProps, backIconButtonProps, slotProps, ...rest }: any) {
+  return rest;
+}
+
+export { PaginationActions };
+export type { PaginationActionsProps };

package/src/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export * from './Pagination';
+export * from './PaginationActions';

package/src/components/ra-buttons/EditInDialogButton.tsx

@@ -66,11 +66,11 @@ type EditInDialogButtonProps = PropsWithChildren &
      *  console.log(values); // { title: 'Hello World' }
      *  closeDialog();
      * }
-     * <CreateInDialogButton onSubmit={handleSubmit}>
+     * <EditInDialogButton onSubmit={handleSubmit}>
      *  <SimpleForm>
      *    <TextInput source="title" />
      *  </SimpleForm>
-     * </CreateInDialogButton>
+     * </EditInDialogButton>
      *
      */
     onSubmit?: SubmitFunction;

package/src/components/ra-lists/List.tsx

@@ -4,6 +4,7 @@ import { styled } from '@mui/system';
 import { ListBase, RaRecord } from 'ra-core';
 import { ReactElement } from 'react';
 import { ListProps } from 'react-admin';
+import { Pagination } from '@/components/Pagination/Pagination';
 
 /**
  * List page component
@@ -191,7 +192,7 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
 function List(props: ListProps): ReactElement {
   return (
     <MainCard content={false}>
-      <StyledList {...props} />
+      <StyledList {...props} pagination={<Pagination />} />
     </MainCard>
   );
 }

package/src/playground/App.jsx

@@ -9,7 +9,7 @@ import { ApplicaDataProvider, createAttachmentsParser } from '@applica-software-
 import { ApplicaAuthProvider, LocalStorage } from '@applica-software-guru/iam-client';
 import { CustomRoutes } from 'ra-core';
 import { Route } from 'react-router-dom';
-import { createJsonI18nProvider } from '@/i18n';
+import { createI18nProvider, createJsonI18nProvider } from '@/i18n';
 
 const authProvider = new ApplicaAuthProvider(API_URL, new LocalStorage());
 const dataProvider = new ApplicaDataProvider({
@@ -20,7 +20,7 @@ const dataProvider = new ApplicaDataProvider({
   attachmentsParser: createAttachmentsParser(),
   HttpErrorClass: HttpError
 });
-const i18nProvider = createJsonI18nProvider({ path: `//${document.location.host}/i18n`, defaultLocale: 'en' });
+const i18nProvider = createI18nProvider({ apiUrl: API_URL, allowMissing: true, defaultLocale: 'it' });
 function App() {
   return (
     <ApplicaAdmin