@firecms/core 3.0.0-canary.21 → 3.0.0-canary.210

package/src/core/SideDialogs.tsx

@@ -1,19 +1,22 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
-import { UnsavedChangesDialog, useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
+import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
 import { ErrorBoundary } from "../components";
+import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 
-export type SideDialogContextProps = {
+export type SideDialogController = {
     blocked: boolean,
     setBlocked: (blocked: boolean) => void,
     setBlockedNavigationMessage: (message?: React.ReactNode) => void,
     width?: string,
-    close: (force?: boolean) => void
+    close: (force?: boolean) => void;
+    pendingClose: boolean,
+    setPendingClose: (pendingClose: boolean) => void
 }
 
-const SideDialogContext = React.createContext<SideDialogContextProps>({
+const SideDialogContext = React.createContext<SideDialogController>({
     width: "",
     blocked: false,
     setBlocked: (blocked: boolean) => {
@@ -21,6 +24,10 @@ const SideDialogContext = React.createContext<SideDialogContextProps>({
     setBlockedNavigationMessage: (message?: React.ReactNode) => {
     },
     close: () => {
+    },
+    pendingClose: false,
+    setPendingClose: () => {
+
     }
 });
 
@@ -29,7 +36,7 @@ const SideDialogContext = React.createContext<SideDialogContextProps>({
  * in contrast with {@link useSideDialogsController} which handles the
  * state of all the dialogs.
  */
-export const useSideDialogContext = () => useContext<SideDialogContextProps>(SideDialogContext);
+export const useSideDialogContext = () => useContext<SideDialogController>(SideDialogContext);
 
 /**
  * This is the component in charge of rendering the side dialogs used
@@ -72,6 +79,8 @@ function SideDialogView({
     const [blocked, setBlocked] = useState(false);
     const [blockedNavigationMessage, setBlockedNavigationMessage] = useState<React.ReactNode | undefined>();
 
+    const [pendingClose, setPendingClose] = useState(false);
+
     const widthRef = React.useRef<string | undefined>(panel?.width);
     const width = widthRef.current;
 
@@ -111,8 +120,6 @@ function SideDialogView({
         }
     };
 
-    // const offsetClass = offsetPosition > 0 ? `transform translate-x-${offsetPosition}` : "";
-
     return (
         <SideDialogContext.Provider
             value={{
@@ -120,19 +127,22 @@ function SideDialogView({
                 setBlocked,
                 setBlockedNavigationMessage,
                 width,
-                close: onCloseRequest
+                close: onCloseRequest,
+                pendingClose,
+                setPendingClose
             }}>
 
             <Sheet
                 open={Boolean(panel)}
                 onOpenChange={(open) => !open && onCloseRequest()}
+                title={"Side dialog " + panel?.key}
             >
                 {panel &&
                     <div
-                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-gray-900 "}
+                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 "}
                         style={{
                             width: panel.width,
-                            transform: `translateX(-${offsetPosition * 200}px)`
+                            transform: `translateX(-${offsetPosition * 200}px)`,
                         }}
                     >
                         <ErrorBoundary>
@@ -145,7 +155,7 @@ function SideDialogView({
             </Sheet>
 
             <UnsavedChangesDialog
-                open={navigationWasBlocked || drawerCloseRequested}
+                open={drawerCloseRequested}
                 handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
                 handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
                 body={blockedNavigationMessage}/>

package/src/core/field_configs.tsx

@@ -8,8 +8,8 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownFieldBinding,
-    MultiSelectBinding,
+    MarkdownEditorFieldBinding,
+    MultiSelectFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
@@ -23,7 +23,6 @@ import {
     AddLinkIcon,
     BallotIcon,
     DriveFolderUploadIcon,
-    EmailIcon,
     FlagIcon,
     FormatListNumberedIcon,
     FormatQuoteIcon,
@@ -31,6 +30,7 @@ import {
     LinkIcon,
     ListAltIcon,
     ListIcon,
+    MailIcon,
     NumbersIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -77,7 +77,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         property: {
             dataType: "string",
             markdown: true,
-            Field: MarkdownFieldBinding
+            Field: MarkdownEditorFieldBinding
         }
     },
     url: {
@@ -96,7 +96,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         key: "email",
         name: "Email",
         description: "Text with email validation",
-        Icon: EmailIcon,
+        Icon: MailIcon,
         color: "#154fb3",
         property: {
             dataType: "string",
@@ -129,7 +129,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     },
     multi_select: {
         key: "multi_select",
-        name: "Multi select",
+        name: "Multi select (enum)",
         description: "Select multiple text values from within an enumeration",
         Icon: ListAltIcon,
         color: "#4223c9",
@@ -139,7 +139,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "string",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     number_input: {
@@ -177,7 +177,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "number",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     file_upload: {
@@ -300,7 +300,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
     block: {
         key: "block",
         name: "Block",
-        description: "A complex field that allows the user to compose different fields together, with a key->value format",
+        description: "A complex field that allows the user to compose different fields together, with a key/value format",
         Icon: ViewStreamIcon,
         color: "#ff9408",
         property: {
@@ -331,7 +331,7 @@ export function getFieldConfig(property: Property | ResolvedProperty, propertyCo
     }
     const defaultFieldConfig = DEFAULT_FIELD_CONFIGS[defaultFieldId];
     const customField = fieldId ? propertyConfigs[fieldId] : undefined;
-    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {});
+    return mergeDeep(defaultFieldConfig ?? {}, customField ?? {} as PropertyConfig);
 }
 
 export function getDefaultFieldId(property: Property | ResolvedProperty) {
@@ -359,8 +359,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
     } else if (property.dataType === "map") {
         if (property.keyValue)
             return "key_value";
-        if (property.properties)
-            return "group";
+        return "group";
     } else if (property.dataType === "array") {
         const of = (property as ArrayProperty).of;
         const oneOf = (property as ArrayProperty).oneOf;

package/src/core/index.tsx

@@ -1,12 +1,13 @@
 export * from "./FireCMS";
 
-export type { ScaffoldProps } from "./Scaffold";
-export { Scaffold } from "./Scaffold";
-
-export type { DrawerProps } from "./Drawer";
-export { Drawer, DrawerNavigationItem } from "./Drawer";
+export * from "./DefaultDrawer";
+export * from "./DrawerNavigationItem";
 
 export * from "./field_configs";
 
 export * from "./SideDialogs";
 export * from "./NavigationRoutes";
+
+export * from "./FireCMSRouter";
+
+export * from "../app";