@applica-software-guru/react-admin 1.5.364 → 1.5.365

package/package.json

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

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import DownloadIcon from '@mui/icons-material/GetApp';
+import {
+  Exporter,
+  FilterPayload,
+  fetchRelatedRecords,
+  useDataProvider,
+  useListContext,
+  useNotify,
+  useResourceContext
+} from 'ra-core';
+import { Button, ButtonProps } from './Button';
+
+/**
+ * Custom ExportButton that exports data.
+ *
+ *
+ * @example
+ * import { ExportButton } from '@applica-software-guru/react-admin';
+ * import { TopToolbar } from 'react-admin';
+ *
+ * const ListActions = () => (
+ *   <TopToolbar>
+ *     <ExportButton />
+ *   </TopToolbar>
+ * );
+ */
+function _ExportButton(props: ExportButtonProps) {
+  const {
+    maxResults = 1000,
+    onClick,
+    label = 'ra.action.export',
+    icon = defaultIcon,
+    exporter: customExporter,
+    meta,
+    sort,
+    ...rest
+  } = props;
+  const { filter, filterValues, exporter: exportContext, total } = useListContext(props);
+  const resource = useResourceContext(props);
+  const exporter = customExporter || exportContext;
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent) => {
+      dataProvider
+        .getList(resource, {
+          sort: { field: '_id', order: 'ASC' },
+          filter: filter ? { ...filterValues, ...filter } : filterValues,
+          pagination: { page: 1, perPage: maxResults },
+          meta
+        })
+        .then(({ data }) => exporter && exporter(data, fetchRelatedRecords(dataProvider), dataProvider, resource))
+        .catch((error) => {
+          console.error(error);
+          notify('ra.notification.http_error', { type: 'error' });
+        });
+      if (typeof onClick === 'function') {
+        onClick(event as any);
+      }
+    },
+    [dataProvider, exporter, filter, filterValues, maxResults, notify, onClick, resource, meta]
+  );
+
+  return (
+    <Button onClick={handleClick} label={label} disabled={total === 0} {...rest}>
+      {icon}
+    </Button>
+  );
+}
+
+interface Props {
+  exporter?: Exporter;
+  filterValues?: FilterPayload;
+  icon?: JSX.Element;
+  label?: string;
+  maxResults?: number;
+  onClick?: (e: Event) => void;
+  resource?: string;
+  meta?: any;
+  sort?: any;
+}
+
+type ExportButtonProps = Props & ButtonProps;
+
+_ExportButton.propTypes = {
+  exporter: PropTypes.func,
+  filterValues: PropTypes.object,
+  label: PropTypes.string,
+  maxResults: PropTypes.number,
+  resource: PropTypes.string,
+  icon: PropTypes.element,
+  meta: PropTypes.any
+};
+
+const defaultIcon = <DownloadIcon />;
+
+const ExportButton = React.memo(_ExportButton);
+
+export { ExportButton };
+export type { ExportButtonProps };

package/src/components/ra-buttons/index.ts

@@ -4,5 +4,6 @@ export * from './CreateButton';
 export * from './CreateInDialogButton';
 export * from './DeleteWithConfirmButton';
 export * from './EditInDialogButton';
+export * from './ExportButton';
 export * from './GoogleLoginButton';
 export * from './ImpersonateUserButton';

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

@@ -5,17 +5,8 @@ import clsx from 'clsx';
 import difference from 'lodash/difference';
 import union from 'lodash/union';
 import { Identifier, sanitizeListRestProps, useListContext, useTranslate } from 'ra-core';
-import {
-  FC,
-  cloneElement,
-  createElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import { FC, cloneElement, createElement, isValidElement, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import * as React from 'react';
 import {
   BulkDeleteButton,
@@ -134,29 +125,54 @@ const Datagrid = React.forwardRef((props, ref) => {
   } = props;
 
   const translate = useTranslate();
-  const { sort, data, isLoading, onSelect, onToggleItem, selectedIds, setSort, total } = useListContext(props);
-  const [multiSort, setMultiSort] = useState<SortItem[]>([]);
+  const listContext = useListContext(props);
+  const { sort, data, isLoading, onSelect, onToggleItem, selectedIds, setSort, total } = listContext;
+  const navigate = useNavigate();
+  const location = useLocation();
 
-  const prevMultiSortKeyRef = useRef<string>('');
-  const multiSortKey = useMemo(() => multiSort.map((s) => `${s.field}:${s.order}`).join('|'), [multiSort]);
+  const clickedFields = useRef<Set<string>>(new Set());
 
-  useEffect(() => {
-    const prevKey = prevMultiSortKeyRef.current;
-    if (prevKey === multiSortKey) return;
+  function handleHeaderSortClick(field: string) {
+    if (field) clickedFields.current.add(field);
+  }
 
-    if (multiSort.length > 0) {
-      setSort({
-        field: multiSort.map((s) => s.field).join(','),
-        order: multiSort.map((s) => s.order).join(',') as 'ASC' | 'DESC'
-      });
+  const multiSort = useMemo<SortItem[]>(() => {
+    if (!sort || !sort.field) return [];
+    if (sort.field === 'id' && !clickedFields.current.has('id')) {
+      return [];
     }
+    const fields = sort.field.split(',');
+    const orders = (sort.order || '').split(',');
+    return fields.map((field, i) => ({
+      field,
+      order: (orders[i] || 'ASC') as 'ASC' | 'DESC'
+    }));
+  }, [sort]);
+
+  const onMultiSortChange = useCallback(
+    (newMultiSort: SortItem[]) => {
+      const newField = newMultiSort.map((s) => s.field).join(',');
+      const newOrder = newMultiSort.length > 0 ? newMultiSort.map((s) => s.order).join(',') : 'ASC';
+
+      if (newMultiSort.length > 1) {
+        const searchParams = new URLSearchParams(
+          location.search.startsWith('?') ? location.search.slice(1) : location.search
+        );
 
-    prevMultiSortKeyRef.current = multiSortKey;
-  }, [multiSortKey, multiSort, setSort]);
+        searchParams.set('sort', newField);
+        searchParams.set('order', newOrder);
 
-  const onMultiSortChange = useCallback((newMultiSort: SortItem[]) => {
-    setMultiSort(newMultiSort);
-  }, []);
+        const url = searchParams.toString();
+        navigate(`${location.pathname}${url ? `?${url}` : ''}`, { replace: true });
+      } else {
+        setSort({
+          field: newField,
+          order: newOrder as 'ASC' | 'DESC'
+        });
+      }
+    },
+    [location, navigate, setSort]
+  );
 
   const hasBulkActions = !!bulkActionButtons !== false;
   const contextValue = useMemo(() => ({ isRowExpandable, expandSingle }), [isRowExpandable, expandSingle]);
@@ -260,7 +276,8 @@ const Datagrid = React.forwardRef((props, ref) => {
                 onSelect,
                 resource,
                 selectedIds,
-                setSort
+                setSort,
+                onSortClick: handleHeaderSortClick
               },
               children
             )}

package/src/components/ra-lists/Datagrid/DatagridHeader.tsx

@@ -9,8 +9,9 @@ type SortItem = {
 };
 
 interface MultiSortDatagridHeaderProps extends Omit<DatagridHeaderProps, 'setSort'> {
-  setMultiSort?: (sort: SortItem[]) => void;
   multiSort?: SortItem[];
+  onSortClick?: (field: string) => void;
+  setMultiSort?: (sort: SortItem[]) => void;
 }
 
 function DatagridHeader(props: MultiSortDatagridHeaderProps): ReactElement {
@@ -24,6 +25,7 @@ function DatagridHeader(props: MultiSortDatagridHeaderProps): ReactElement {
     data = [],
     multiSort = [],
     setMultiSort,
+    onSortClick,
     resource
   } = props;
   const { setSort } = useListContext();
@@ -31,9 +33,10 @@ function DatagridHeader(props: MultiSortDatagridHeaderProps): ReactElement {
 
   const updateSort = useCallback(
     (field: string, isMultiSort: boolean = false) => {
+      if (onSortClick) onSortClick(field);
       if (!setMultiSort) {
-        const currentSortForField = multiSort.find((s) => s.field === field);
-        const newOrder = currentSortForField?.order === 'ASC' ? 'DESC' : 'ASC';
+        const currentSort = multiSort.find((s) => s.field === field);
+        const newOrder = currentSort?.order === 'ASC' ? 'DESC' : 'ASC';
         setSort({ field, order: newOrder });
         return;
       }
@@ -69,7 +72,7 @@ function DatagridHeader(props: MultiSortDatagridHeaderProps): ReactElement {
 
       setMultiSort(newMultiSort);
     },
-    [multiSort, setMultiSort, setSort]
+    [multiSort, setMultiSort, setSort, onSortClick]
   );
 
   const handleSelectAll = useCallback(

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

@@ -8,18 +8,31 @@ import { RaRecord, useListContext } from 'ra-core';
 import { ElementType, ReactElement, ReactNode, cloneElement } from 'react';
 import * as React from 'react';
 import {
-  ListActions as DefaultActions,
+  CreateButton,
   Pagination as DefaultPagination,
+  FilterButton,
   SavedQueriesListClasses,
-  Title
+  Title,
+  TopToolbar
 } from 'react-admin';
+import { ExportButton } from '@/components/ra-buttons/ExportButton';
 import { ListToolbar } from './ListToolbar';
 import { FilterSidebar } from './FilterSidebar';
 import { MainCard } from '@/components/MainCard';
 import { Empty } from '@/components/ra-lists/Empty';
 import { type ListTabToolbarConfig } from './ListTabsToolbar';
 
-const defaultActions = <DefaultActions />;
+function DefaultListActions() {
+  return (
+    <TopToolbar>
+      <FilterButton />
+      <CreateButton />
+      <ExportButton />
+    </TopToolbar>
+  );
+}
+
+const defaultActions = <DefaultListActions />;
 const defaultPagination = <DefaultPagination />;
 const defaultEmpty = <Empty />;
 const DefaultComponent = Card;