@applica-software-guru/react-admin 1.5.335 → 1.5.337

package/package.json

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

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

@@ -0,0 +1,68 @@
+import { Tab, Tabs } from '@mui/material';
+import { useListContext } from 'react-admin';
+import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useListViewContext } from './ListViewProvider';
+
+type ListTabToolbarConfig = {
+  label: string;
+  key: string;
+  icon?: ReactElement;
+  filter: Record<string, any>;
+  default?: boolean;
+};
+
+interface ListTabsToolbarProps {
+  tabs?: ListTabToolbarConfig[];
+}
+
+function ListTabsToolbar(props: ListTabsToolbarProps) {
+  const { tabs = [] } = props;
+  const { setFilters, filterValues } = useListContext();
+  const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
+  const [currentTab, setCurrentTab] = useState(defaultTabIndex);
+  const initialized = useRef(false);
+  const { setCurrentTabKey } = useListViewContext();
+
+  if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
+    throw new Error('ListTabsToolbar: Each tab must have a unique key.');
+  }
+
+  const buildFilters = useCallback(
+    (index: number, debounce: boolean) => {
+      if (setCurrentTabKey) {
+        setCurrentTabKey(tabs[index].key);
+      }
+      const newFilters = {
+        ...filterValues,
+        ...tabs[index].filter
+      };
+      setFilters(newFilters, {}, debounce);
+    },
+    [filterValues, setFilters, setCurrentTabKey, tabs]
+  );
+
+  useEffect(() => {
+    if (!initialized.current) {
+      buildFilters(defaultTabIndex, false);
+      initialized.current = true;
+    }
+  }, [defaultTabIndex, buildFilters]);
+
+  const handleChange = useCallback(
+    (_: any, newIndex: number) => {
+      setCurrentTab(newIndex);
+      buildFilters(newIndex, true);
+    },
+    [buildFilters]
+  );
+
+  return tabs.length > 0 ? (
+    <Tabs value={currentTab} onChange={handleChange}>
+      {tabs.map((tab) => (
+        <Tab icon={tab.icon} key={tab.label} label={tab.label} />
+      ))}
+    </Tabs>
+  ) : null;
+}
+
+export { type ListTabToolbarConfig, ListTabsToolbar };

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

@@ -17,6 +17,7 @@ import { ListToolbar } from './ListToolbar';
 import { FilterSidebar } from './FilterSidebar';
 import { MainCard } from '@/components/MainCard';
 import { Empty } from '@/components/ra-lists/Empty';
+import { type ListTabToolbarConfig, ListTabsToolbar } from './ListTabsToolbar';
 
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
@@ -37,6 +38,7 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
     component: Content = DefaultComponent,
     title,
     empty = defaultEmpty,
+    tabs,
     ...rest
   } = props;
   const { defaultTitle, data, error, isLoading, filterValues, resource } = useListContext<RecordType>(props);
@@ -63,6 +65,7 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
           backgroundColor: hasAsideSidebar ? theme.palette.background.paper : 'transparent'
         }}
       >
+        {tabs ? <ListTabsToolbar tabs={tabs} /> : null}
         {filters || actions ? (
           <ListToolbar
             className={ListClasses.actions}
@@ -199,6 +202,23 @@ const ListClasses = {
 };
 
 interface ListViewProps {
+  /**
+   * Tabs to display in the toolbar. Each tab is a filter object with a label, key, icon, filter, and an optional default property.
+   *
+   * @example
+   * import { List, ListTabToolbarConfig } from 'react-admin';
+   * const tabs: ListTabToolbarConfig[] = [
+   *    { label: 'Published', key: 'published', icon: <IconPublished />, filter: { status: 'published' }, default: true },
+   *    { label: 'Drafts', key: 'drafts', icon: <IconDrafts />, filter: { status: 'draft' } },
+   * ];
+   *  const PostList = () => (
+   *    <List tabs={tabs}>
+   *        ...
+   *    </List>
+   *  );
+   */
+  tabs?: ListTabToolbarConfig[];
+
   /**
    * The actions to display in the toolbar. defaults to Filter + Create + Export.
    *

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

@@ -1,19 +1,31 @@
 import React, { createContext, useContext } from 'react';
 
 interface ListViewContextType {
+  /* FilterSidebar props */
   sidebarOpen?: boolean;
   setSidebarOpen?: (open: boolean) => void;
+
+  /* ListTabsToolbar props */
+  currentTabKey?: string;
+  setCurrentTabKey?: (key: string) => void;
 }
 
 const ListViewContext = createContext<ListViewContextType>({
   sidebarOpen: false,
-  setSidebarOpen: () => {}
+  setSidebarOpen: () => {},
+  currentTabKey: '',
+  setCurrentTabKey: () => {}
 });
 
 function ListViewProvider(props: { children: React.ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = React.useState(false);
+  const [currentTabKey, setCurrentTabKey] = React.useState('');
 
-  return <ListViewContext.Provider value={{ sidebarOpen, setSidebarOpen }}>{props.children}</ListViewContext.Provider>;
+  return (
+    <ListViewContext.Provider value={{ currentTabKey, setCurrentTabKey, sidebarOpen, setSidebarOpen }}>
+      {props.children}
+    </ListViewContext.Provider>
+  );
 }
 
 function useListViewContext() {

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

@@ -4,6 +4,7 @@ export * from './Datagrid';
 export * from './Empty';
 export * from './FilterSidebar';
 export * from './List';
+export * from './ListTabsToolbar';
 export * from './ListToolbar';
 export * from './ListViewProvider';
 export * from './NotificationList';

package/src/index.ts

@@ -46,6 +46,7 @@ export {
   ValidationError,
   WithListContext,
   choices,
+  downloadCSV,
   email,
   maxLength,
   maxValue,