@firecms/core 3.0.0-canary.7 → 3.0.0-canary.70

package/src/app/Scaffold.tsx

@@ -0,0 +1,249 @@
+import React, { PropsWithChildren, useCallback } from "react";
+import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import equal from "react-fast-compare"
+import { useLargeLayout } from "../hooks";
+import { ErrorBoundary } from "../components";
+import { AppContext } from "./useApp";
+
+export const DRAWER_WIDTH = 280;
+
+/**
+ * @group Core
+ */
+export interface ScaffoldProps {
+
+    /**
+     * Open the drawer on hover
+     */
+    autoOpenDrawer?: boolean;
+
+    /**
+     * Logo to be displayed in the top bar and drawer.
+     * Note that this has no effect if you are using a custom AppBar or Drawer.
+     */
+    logo?: string;
+
+    className?: string;
+
+    style?: React.CSSProperties;
+}
+
+/**
+ * This view acts as a scaffold for FireCMS.
+ *
+ * It is in charge of displaying the navigation drawer, top bar and main
+ * collection views.
+ * This component needs a parent {@link FireCMS}
+ *
+ * @param props
+ * @constructor
+ * @group Core
+ */
+export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
+    function Scaffold(props: PropsWithChildren<ScaffoldProps>) {
+
+        const {
+            children,
+            autoOpenDrawer,
+            logo,
+            className,
+            style
+        } = props;
+
+        const drawerChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "Drawer");
+        if (drawerChildren.length > 1) {
+            throw Error("Only one Drawer component is allowed in Scaffold");
+        }
+        const appBarChildren = React.Children.toArray(children).filter((child: any) => child.type.componentType === "AppBar");
+        if (appBarChildren.length > 1) {
+            throw Error("Only one AppBar component is allowed in Scaffold");
+        }
+        const otherChildren = React.Children.toArray(children)
+            .filter((child: any) => child.type.componentType !== "Drawer" && child.type.componentType !== "AppBar");
+        const includeDrawer = drawerChildren.length > 0;
+        const largeLayout = useLargeLayout();
+
+        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [onHover, setOnHover] = React.useState(false);
+
+        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+
+        const handleDrawerOpen = useCallback(() => {
+            setDrawerOpen(true);
+        }, []);
+
+        const handleDrawerClose = useCallback(() => {
+            setDrawerOpen(false);
+        }, []);
+
+        const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+
+        return (
+            <AppContext.Provider value={{
+                logo,
+                hasDrawer: includeDrawer,
+                drawerHovered: onHover,
+                drawerOpen: computedDrawerOpen,
+                closeDrawer: handleDrawerClose,
+                openDrawer: handleDrawerOpen,
+                autoOpenDrawer
+            }}>
+                <div
+                    className={cls("flex h-screen w-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white overflow-hidden", className)}
+                    style={{
+                        paddingTop: "env(safe-area-inset-top)",
+                        paddingLeft: "env(safe-area-inset-left)",
+                        paddingRight: "env(safe-area-inset-right)",
+                        paddingBottom: "env(safe-area-inset-bottom)",
+                        height: "100dvh",
+                        ...style
+                    }}>
+
+                    {appBarChildren}
+
+                    <DrawerWrapper
+                        displayed={includeDrawer}
+                        onMouseEnter={setOnHoverTrue}
+                        onMouseMove={setOnHoverTrue}
+                        onMouseLeave={setOnHoverFalse}
+                        open={computedDrawerOpen}
+                        hovered={onHover}
+                        setDrawerOpen={setDrawerOpen}>
+                        {includeDrawer && drawerChildren}
+                    </DrawerWrapper>
+
+                    <main
+                        className="flex flex-col flex-grow overflow-auto">
+                        <DrawerHeader/>
+                        <div
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+
+                            <ErrorBoundary>
+                                {otherChildren}
+                            </ErrorBoundary>
+
+                        </div>
+                    </main>
+                </div>
+            </AppContext.Provider>
+        );
+    },
+    equal
+)
+
+const DrawerHeader = () => {
+    return (
+        <div className="flex flex-col min-h-[68px]"></div>
+    );
+};
+
+function DrawerWrapper(props: {
+    children: React.ReactNode,
+    displayed: boolean,
+    open: boolean,
+    logo?: string,
+    hovered: boolean,
+    setDrawerOpen: (open: boolean) => void,
+    onMouseEnter: () => void,
+    onMouseMove: () => void,
+    onMouseLeave: () => void
+}) {
+
+    const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const innerDrawer = <div
+        className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
+        style={{
+            width,
+            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+        }}
+    >
+
+        {!props.open && props.displayed && (
+            <Tooltip title="Open menu"
+                     side="right"
+                     sideOffset={12}
+                     className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20"
+            >
+                <IconButton
+                    color="inherit"
+                    aria-label="Open menu"
+                    className="sticky top-2 left-3 "
+                    onClick={() => props.setDrawerOpen(true)}
+                    size="large"
+                >
+                    <MenuIcon/>
+                </IconButton>
+            </Tooltip>
+        )}
+
+        <div
+            className={`z-20 absolute right-0 top-4 ${
+                props.open ? "opacity-100" : "opacity-0 invisible"
+            } transition-opacity duration-200 ease-in-out`}>
+            <IconButton
+                aria-label="Close drawer"
+                onClick={() => props.setDrawerOpen(false)}
+            >
+                <ChevronLeftIcon/>
+            </IconButton>
+        </div>
+
+        <div className={"flex flex-col h-full"}>
+            {props.children}
+        </div>
+
+    </div>;
+
+    const largeLayout = useLargeLayout();
+    if (!largeLayout) {
+        if (!props.displayed)
+            return null;
+        return <>
+            <IconButton
+                color="inherit"
+                aria-label="Open drawer"
+                onClick={() => props.setDrawerOpen(true)}
+                size="large"
+                className="absolute top-2 left-6"
+            >
+                <MenuIcon/>
+            </IconButton>
+            <Sheet side={"left"}
+                   transparent={true}
+                   open={props.open}
+                   onOpenChange={props.setDrawerOpen}
+            >
+                {innerDrawer}
+            </Sheet>
+        </>;
+    }
+
+    return (
+        <div
+            className="z-20 relative"
+            onMouseEnter={props.onMouseEnter}
+            onMouseMove={props.onMouseMove}
+            onMouseLeave={props.onMouseLeave}
+            style={{
+                width,
+                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            }}>
+
+            {innerDrawer}
+
+            {/*<div*/}
+            {/*    className={`z-20 absolute right-0 top-4 ${*/}
+            {/*        props.open ? "opacity-100" : "opacity-0 invisible"*/}
+            {/*    } transition-opacity duration-1000 ease-in-out`}>*/}
+            {/*    <IconButton*/}
+            {/*        aria-label="Close drawer"*/}
+            {/*        onClick={() => props.setDrawerOpen(false)}*/}
+            {/*    >*/}
+            {/*        <ChevronLeftIcon/>*/}
+            {/*    </IconButton>*/}
+            {/*</div>*/}
+
+        </div>
+    );
+}

package/src/app/index.ts

@@ -0,0 +1,4 @@
+export * from "./Drawer";
+export * from "./AppBar";
+export * from "./Scaffold";
+export * from "./useApp";

package/src/app/useApp.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+/**
+ * This context represents the state of the app in terms of layout.
+ * @group Core
+ */
+export type AppState = {
+    hasDrawer: boolean,
+    drawerHovered: boolean,
+    drawerOpen: boolean,
+    openDrawer: () => void,
+    closeDrawer: () => void,
+    autoOpenDrawer?: boolean,
+    logo?: string
+}
+
+export const AppContext = React.createContext<AppState>({
+    hasDrawer: false,
+    drawerHovered: false,
+    drawerOpen: false,
+    openDrawer: () => {
+        throw new Error("openDrawer not implemented");
+    },
+    closeDrawer: () => {
+        throw new Error("closeDrawer not implemented");
+    },
+    autoOpenDrawer: false
+});
+
+export function useApp() {
+    return React.useContext(AppContext);
+}

package/src/components/ClearFilterSortButton.tsx

@@ -0,0 +1,41 @@
+import { Button, FilterListOffIcon } from "@firecms/ui";
+import { EntityTableController } from "../types";
+
+export function ClearFilterSortButton({
+                                          tableController,
+                                          enabled
+                                      }: {
+    enabled: boolean;
+    tableController: EntityTableController
+}) {
+    if (!enabled) {
+        return null;
+    }
+
+    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
+    const sortIsSet = !!tableController.sortBy && tableController.sortBy.length > 0;
+
+    if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
+        let label;
+        if (filterIsSet && sortIsSet) {
+            label = "Clear filter and sort";
+        } else if (filterIsSet) {
+            label = "Clear filter";
+        } else {
+            label = "Clear sort";
+        }
+        return <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={() => {
+                tableController.clearFilter?.();
+                tableController.setSortBy?.(undefined);
+            }}
+            size={"small"}>
+            <FilterListOffIcon/>
+            {label}
+        </Button>
+    }
+    return null;
+}

package/src/components/DeleteEntityDialog.tsx

@@ -9,7 +9,7 @@ import {
     useSnackbarController
 } from "../hooks";
 import { resolveCollection } from "../util";
-import { EntityPreview } from "./EntityPreview";
+import { EntityView } from "./EntityView";
 
 export interface DeleteEntityDialogProps<M extends Record<string, any>> {
     entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
@@ -35,7 +35,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                                                                       path
                                                                   }: DeleteEntityDialogProps<M>) {
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = useState(false);
@@ -163,7 +163,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     } else {
         const entity = entityOrEntities as Entity<M> | undefined;
         content = entity
-            ? <EntityPreview
+            ? <EntityView
                 entity={entity}
                 collection={collection}
                 path={path}/>
@@ -176,7 +176,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
 
     return (
         <Dialog
-            maxWidth={"2xl"}
+            maxWidth={multipleEntities ? "lg" : "2xl"}
             aria-labelledby="delete-dialog"
             open={open}
             onOpenChange={(open) => !open ? onClose() : undefined}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -72,7 +72,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             onClick={onClick}
-            className={cn(
+            className={cls(
                 "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
@@ -99,7 +99,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                         selectionController,
                                         highlightEntity,
                                         unhighlightEntity,
-                                        onCollectionChange
+                                        onCollectionChange,
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -127,7 +127,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             selectionController,
                                             highlightEntity,
                                             unhighlightEntity,
-                                            onCollectionChange
+                                            onCollectionChange,
                                         });
                                     }}>
                                     {action.icon}