fix(app-headless-cms): add dz template provider (#4056)

webiny · Mar 26, 2024 · 68dde34 · 68dde34
1 parent 2a32c4d
commit 68dde34
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 24 deletions.
diff --git a/...s/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx b/...s/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx
@@ -19,6 +19,7 @@ import {
     CmsModelField
 } from "~/types";
 import { makeDecoratable } from "@webiny/react-composition";
+import { TemplateProvider } from "~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider";
 
 const BottomMargin = styled.div`
     margin-bottom: 20px;
@@ -66,12 +67,14 @@ export const MultiValueItem = makeDecoratable(
         const { template, Bind, contentModel } = props;
 
         return (
-            <Fields
-                fields={template.fields}
-                layout={template.layout || []}
-                contentModel={contentModel}
-                Bind={Bind}
-            />
+            <TemplateProvider template={template}>
+                <Fields
+                    fields={template.fields}
+                    layout={template.layout || []}
+                    contentModel={contentModel}
+                    Bind={Bind}
+                />
+            </TemplateProvider>
         );
     }
 );
@@ -156,15 +159,16 @@ export interface MultiValueContainerProps extends MultiValueDynamicZoneProps {
     children: React.ReactNode;
 }
 
-export const MultiValueContainer = makeDecoratable<
-    React.FunctionComponent<MultiValueContainerProps>
->("MultiValueContainer", ({ children }) => {
-    return (
-        <Accordion>
-            <>{children}</>
-        </Accordion>
-    );
-});
+export const MultiValueContainer = makeDecoratable(
+    "MultiValueContainer",
+    ({ children }: MultiValueContainerProps) => {
+        return (
+            <Accordion>
+                <>{children}</>
+            </Accordion>
+        );
+    }
+);
 
 interface MultiValueDynamicZoneProps {
     // TODO: this prop might be useless, because we now have a `useModelField` hook.

diff --git a/.../app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx b/.../app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.tsx
@@ -1,16 +1,17 @@
 import React from "react";
 import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
 import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
-import { Fields } from "~/admin/components/ContentEntryForm/Fields";
 import { AddTemplateButton } from "./AddTemplate";
-import { TemplateIcon } from "~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon";
+import { TemplateIcon } from "./TemplateIcon";
+import { TemplateProvider } from "./TemplateProvider";
 import {
     BindComponentRenderProp,
     CmsDynamicZoneTemplate,
     CmsModelFieldRendererProps,
     CmsModel,
     CmsModelField
 } from "~/types";
+import { Fields } from "~/admin/components/ContentEntryForm/Fields";
 import { ParentFieldProvider } from "~/admin/components/ContentEntryForm/ParentValue";
 
 type GetBind = CmsModelFieldRendererProps["getBind"];
@@ -64,12 +65,14 @@ export const SingleValueDynamicZone = ({
                                 </AccordionItem.Actions>
                             }
                         >
-                            <Fields
-                                fields={template.fields}
-                                layout={template.layout || []}
-                                contentModel={contentModel}
-                                Bind={Bind}
-                            />
+                            <TemplateProvider template={template}>
+                                <Fields
+                                    fields={template.fields}
+                                    layout={template.layout || []}
+                                    contentModel={contentModel}
+                                    Bind={Bind}
+                                />
+                            </TemplateProvider>
                         </AccordionItem>
                     </Accordion>
                 </ParentFieldProvider>

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.tsx
@@ -0,0 +1,22 @@
+import React, { useMemo } from "react";
+import { CmsDynamicZoneTemplate } from "@webiny/app-headless-cms-common/types";
+
+export interface TemplateContext {
+    template: CmsDynamicZoneTemplate;
+}
+
+const TemplateContext = React.createContext<TemplateContext | undefined>(undefined);
+
+export interface TemplateProviderProps {
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+
+export const TemplateProvider = ({ template, children }: TemplateProviderProps) => {
+    const context = useMemo(() => ({ template }), [template.id]);
+    return <TemplateContext.Provider value={context}>{children}</TemplateContext.Provider>;
+};
+
+export function useTemplate() {
+    return React.useContext(TemplateContext);
+}
diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/index.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/dynamicZone/index.tsx
@@ -5,3 +5,4 @@ export {
     MultiValueContainer,
     MultiValueItem
 } from "./MultiValueDynamicZone";
+export * from "./TemplateProvider";
diff --git a/packages/app-headless-cms/src/components.ts b/packages/app-headless-cms/src/components.ts
@@ -3,12 +3,16 @@ import {
     MultiValueContainer,
     MultiValueItemContainer,
     MultiValueItem,
-    TemplateGallery
+    TemplateGallery,
+    useTemplate
 } from "~/admin/plugins/fieldRenderers/dynamicZone";
 
 export const Components = {
     FieldRenderers: {
         DynamicZone: {
+            Template: {
+                useTemplate
+            },
             Container: DynamicZoneContainer,
             // SingleValue: {
             //     Container: null,