@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js

@@ -0,0 +1,170 @@
+import React from "react";
+import cloneDeep from "lodash/cloneDeep";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as CloneIcon } from "@webiny/icons/library_add.svg";
+import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.svg";
+import { AddTemplateButton, AddTemplateIcon } from "./AddTemplate";
+import { TemplateIcon } from "./TemplateIcon";
+import { ParentFieldProvider, useModelField } from "../../../hooks";
+import { Fields } from "../../../components/ContentEntryForm/Fields";
+import { makeDecoratable } from "@webiny/react-composition";
+import { TemplateProvider } from "./TemplateProvider";
+import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider";
+import { useConfirmationDialog } from "@webiny/app-admin";
+import { Accordion, Tooltip } from "@webiny/admin-ui";
+export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({
+  children,
+  ...props
+}) => {
+  const actions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(ArrowUpIcon, null),
+      content: "Move up"
+    }),
+    onClick: props.onMoveUp,
+    disabled: props.isFirst
+  }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(ArrowDownIcon, null),
+      content: "Move down"
+    }),
+    onClick: props.onMoveDown,
+    disabled: props.isLast
+  }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), props.actions ? /*#__PURE__*/React.createElement(React.Fragment, null, props.actions) : null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(CloneIcon, null),
+      content: "Duplicate"
+    }),
+    onClick: () => props.onClone(props.value)
+  }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(DeleteIcon, null),
+      content: "Delete"
+    }),
+    onClick: props.onDelete
+  }));
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
+    title: props.title,
+    description: props.description,
+    icon: props.icon,
+    actions: actions
+  }, children);
+});
+export const MultiValueItem = makeDecoratable("MultiValueItem", props => {
+  const {
+    template,
+    Bind,
+    contentModel
+  } = props;
+  return /*#__PURE__*/React.createElement(TemplateProvider, {
+    template: template
+  }, /*#__PURE__*/React.createElement(Fields, {
+    fields: template.fields,
+    layout: template.layout || [],
+    contentModel: contentModel,
+    Bind: Bind
+  }));
+});
+const TemplateValueForm = ({
+  value,
+  contentModel,
+  Bind,
+  isLast,
+  isFirst,
+  onMoveUp,
+  onMoveDown,
+  onDelete,
+  onClone
+}) => {
+  const {
+    field
+  } = useModelField();
+  const templates = field.settings?.templates || [];
+  const template = templates.find(tpl => tpl.id === value._templateId);
+  if (!template) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(MultiValueItemContainer, {
+    value: value,
+    contentModel: contentModel,
+    isFirst: isFirst,
+    isLast: isLast,
+    onClone: onClone,
+    onDelete: onDelete,
+    onMoveUp: onMoveUp,
+    onMoveDown: onMoveDown,
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
+      icon: template.icon
+    }),
+    template: template
+  }, /*#__PURE__*/React.createElement(MultiValueItem, {
+    template: template,
+    contentModel: contentModel,
+    Bind: Bind
+  }));
+};
+export const MultiValueContainer = makeDecoratable("MultiValueContainer", ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(React.Fragment, null, children));
+});
+export const MultiValueDynamicZone = props => {
+  const {
+    showConfirmation
+  } = useConfirmationDialog({
+    message: `Are you sure you want to delete this item? This action is not reversible.`,
+    acceptLabel: `Yes, I'm sure!`,
+    cancelLabel: `No, leave it.`
+  });
+  const {
+    bind,
+    getBind,
+    contentModel
+  } = props;
+  const onTemplate = template => {
+    bind.appendValue({
+      _templateId: template.id,
+      __typename: template.__typename
+    });
+  };
+  const cloneValue = (value, index) => {
+    bind.appendValue(cloneDeep(value), index + 1);
+  };
+  const values = bind.value || [];
+  const hasValues = values.length > 0;
+  const Bind = getBind();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasValues ? /*#__PURE__*/React.createElement(ParentFieldProvider, {
+    value: bind.value,
+    path: Bind.parentName
+  }, /*#__PURE__*/React.createElement(MultiValueContainer, props, values.map((value, index) => {
+    const Bind = getBind(index);
+    const onDelete = () => {
+      showConfirmation(() => {
+        bind.removeValue(index);
+      });
+    };
+    return /*#__PURE__*/React.createElement(ParentValueIndexProvider, {
+      key: index,
+      index: index
+    }, /*#__PURE__*/React.createElement(Bind, null, () => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(TemplateValueForm, {
+      value: value,
+      contentModel: contentModel,
+      Bind: Bind,
+      isFirst: index === 0,
+      isLast: index === values.length - 1,
+      onMoveUp: () => bind.moveValueUp(index),
+      onMoveDown: () => bind.moveValueDown(index),
+      onDelete: onDelete,
+      onClone: value => cloneValue(value, index)
+    }))));
+  }))) : null, hasValues ? /*#__PURE__*/React.createElement(AddTemplateIcon, {
+    onTemplate: onTemplate
+  }) : /*#__PURE__*/React.createElement(AddTemplateButton, {
+    onTemplate: onTemplate
+  }));
+};
+
+//# sourceMappingURL=MultiValueDynamicZone.js.map

package/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cloneDeep","ReactComponent","DeleteIcon","CloneIcon","ArrowUpIcon","ArrowDownIcon","AddTemplateButton","AddTemplateIcon","TemplateIcon","ParentFieldProvider","useModelField","Fields","makeDecoratable","TemplateProvider","ParentValueIndexProvider","useConfirmationDialog","Accordion","Tooltip","MultiValueItemContainer","children","props","actions","createElement","Fragment","Item","Action","icon","trigger","content","onClick","onMoveUp","disabled","isFirst","onMoveDown","isLast","Separator","onClone","value","onDelete","title","description","MultiValueItem","template","Bind","contentModel","fields","layout","TemplateValueForm","field","templates","settings","find","tpl","id","_templateId","name","MultiValueContainer","MultiValueDynamicZone","showConfirmation","message","acceptLabel","cancelLabel","bind","getBind","onTemplate","appendValue","__typename","cloneValue","index","values","hasValues","length","path","parentName","map","removeValue","key","ValidationContainer","moveValueUp","moveValueDown"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { ParentFieldProvider, useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { TemplateProvider } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n    title: React.ReactNode;\n    description: string;\n    icon: JSX.Element;\n    actions?: JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={props.onMoveUp}\n                    disabled={props.isFirst}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={props.onMoveDown}\n                    disabled={props.isLast}\n                />\n                <Accordion.Item.Action.Separator />\n                {props.actions ? <>{props.actions}</> : null}\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={() => props.onClone(props.value)}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                    onClick={props.onDelete}\n                />\n            </>\n        );\n\n        return (\n            <Accordion.Item\n                title={props.title}\n                description={props.description}\n                icon={props.icon}\n                actions={actions}\n            >\n                {children}\n            </Accordion.Item>\n        );\n    }\n);\n\nexport interface MultiValueItemItemProps {\n    template: CmsDynamicZoneTemplate;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n}\n\nexport const MultiValueItem = makeDecoratable(\n    \"MultiValueItem\",\n    (props: MultiValueItemItemProps) => {\n        const { template, Bind, contentModel } = props;\n\n        return (\n            <TemplateProvider template={template}>\n                <Fields\n                    fields={template.fields}\n                    layout={template.layout || []}\n                    contentModel={contentModel}\n                    Bind={Bind}\n                />\n            </TemplateProvider>\n        );\n    }\n);\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\ninterface TemplateValueFormProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    Bind: BindComponent;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n}\n\nconst TemplateValueForm = ({\n    value,\n    contentModel,\n    Bind,\n    isLast,\n    isFirst,\n    onMoveUp,\n    onMoveDown,\n    onDelete,\n    onClone\n}: TemplateValueFormProps) => {\n    const { field } = useModelField();\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = templates.find(\n        tpl => tpl.id === value._templateId\n    );\n\n    if (!template) {\n        return null;\n    }\n\n    return (\n        <MultiValueItemContainer\n            value={value}\n            contentModel={contentModel}\n            isFirst={isFirst}\n            isLast={isLast}\n            onClone={onClone}\n            onDelete={onDelete}\n            onMoveUp={onMoveUp}\n            onMoveDown={onMoveDown}\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            template={template}\n        >\n            <MultiValueItem template={template} contentModel={contentModel} Bind={Bind} />\n        </MultiValueItemContainer>\n    );\n};\n\nexport interface MultiValueContainerProps extends MultiValueDynamicZoneProps {\n    children: React.ReactNode;\n}\n\nexport const MultiValueContainer = makeDecoratable(\n    \"MultiValueContainer\",\n    ({ children }: MultiValueContainerProps) => {\n        return (\n            <Accordion>\n                <>{children}</>\n            </Accordion>\n        );\n    }\n);\n\ninterface MultiValueDynamicZoneProps {\n    // TODO: this prop might be useless, because we now have a `useModelField` hook.\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = (props: MultiValueDynamicZoneProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const { bind, getBind, contentModel } = props;\n    const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {\n        bind.appendValue({ _templateId: template.id, __typename: template.__typename });\n    };\n\n    const cloneValue = (value: TemplateValue, index: number) => {\n        bind.appendValue(cloneDeep(value), index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    const Bind = getBind();\n\n    return (\n        <>\n            {hasValues ? (\n                <ParentFieldProvider value={bind.value} path={Bind.parentName}>\n                    <MultiValueContainer {...props}>\n                        {values.map((value, index) => {\n                            const Bind = getBind(index);\n\n                            const onDelete = () => {\n                                showConfirmation(() => {\n                                    bind.removeValue(index);\n                                });\n                            };\n\n                            return (\n                                <ParentValueIndexProvider key={index} index={index}>\n                                    <Bind>\n                                        {() => (\n                                            <Bind.ValidationContainer>\n                                                <TemplateValueForm\n                                                    value={value}\n                                                    contentModel={contentModel}\n                                                    Bind={Bind}\n                                                    isFirst={index === 0}\n                                                    isLast={index === values.length - 1}\n                                                    onMoveUp={() => bind.moveValueUp(index)}\n                                                    onMoveDown={() => bind.moveValueDown(index)}\n                                                    onDelete={onDelete}\n                                                    onClone={value => cloneValue(value, index)}\n                                                />\n                                            </Bind.ValidationContainer>\n                                        )}\n                                    </Bind>\n                                </ParentValueIndexProvider>\n                            );\n                        })}\n                    </MultiValueContainer>\n                </ParentFieldProvider>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <AddTemplateButton onTemplate={onTemplate} />\n            )}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import type { BindComponentRenderProp, CmsDynamicZoneTemplate, CmsModelFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+type GetBind = CmsModelFieldRendererProps["getBind"];
+interface SingleValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+interface TemplateValue {
+    _templateId: string;
+    [key: string]: any;
+}
+export interface SingleValueItemContainerProps {
+    value: TemplateValue;
+    contentModel: CmsModel;
+    onDelete: () => void;
+    title: React.ReactNode;
+    description: string;
+    icon: JSX.Element;
+    actions?: JSX.Element;
+    template: CmsDynamicZoneTemplate;
+    children: React.ReactNode;
+}
+export declare const SingleValueItemContainer: ((props: SingleValueItemContainerProps) => React.JSX.Element) & {
+    original: (props: SingleValueItemContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: SingleValueItemContainerProps) => React.JSX.Element) & {
+        original: (props: SingleValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: SingleValueItemContainerProps) => React.JSX.Element) & {
+        original: (props: SingleValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export declare const SingleValueDynamicZone: ({ field, bind, contentModel, getBind }: SingleValueDynamicZoneProps) => React.JSX.Element;
+export {};

package/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { makeDecoratable, useConfirmationDialog } from "@webiny/app-admin";
+import { Accordion, Tooltip } from "@webiny/admin-ui";
+import { AddTemplateButton } from "./AddTemplate";
+import { TemplateIcon } from "./TemplateIcon";
+import { TemplateProvider } from "./TemplateProvider";
+import { Fields } from "../../../components/ContentEntryForm/Fields";
+import { ParentFieldProvider } from "../../../components/ContentEntryForm/ParentValue";
+import { ParentValueIndexProvider, ModelFieldProvider } from "../../../components/ModelFieldProvider";
+export const SingleValueItemContainer = makeDecoratable("SingleValueItemContainer", props => {
+  const {
+    template,
+    actions,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
+      icon: template.icon
+    }),
+    open: true,
+    interactive: false,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, actions ?? null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+      icon: /*#__PURE__*/React.createElement(Tooltip, {
+        trigger: /*#__PURE__*/React.createElement(DeleteIcon, null),
+        content: "Delete"
+      }),
+      onClick: props.onDelete
+    }))
+  }, children);
+});
+export const SingleValueDynamicZone = ({
+  field,
+  bind,
+  contentModel,
+  getBind
+}) => {
+  const {
+    showConfirmation
+  } = useConfirmationDialog({
+    message: `Are you sure you want to remove this item? This action is not reversible.`,
+    acceptLabel: `Yes, I'm sure!`,
+    cancelLabel: `No, leave it.`
+  });
+  const onTemplate = template => {
+    bind.onChange({
+      _templateId: template.id,
+      __typename: template.__typename
+    });
+  };
+  const templates = field.settings?.templates || [];
+  const template = bind.value ? templates.find(tpl => tpl.id === bind.value._templateId) : undefined;
+  const Bind = getBind();
+  const unsetValue = () => {
+    showConfirmation(() => {
+      bind.onChange(null);
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, template ? /*#__PURE__*/React.createElement(ParentFieldProvider, {
+    value: bind.value,
+    path: Bind.parentName
+  }, /*#__PURE__*/React.createElement(ParentValueIndexProvider, {
+    index: -1
+  }, /*#__PURE__*/React.createElement(ModelFieldProvider, {
+    field: field
+  }, /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(SingleValueItemContainer, {
+    template: template,
+    value: bind.value,
+    contentModel: contentModel,
+    onDelete: unsetValue,
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/React.createElement(TemplateIcon, {
+      icon: template.icon
+    })
+  }, /*#__PURE__*/React.createElement(TemplateProvider, {
+    template: template
+  }, /*#__PURE__*/React.createElement(Fields, {
+    fields: template.fields,
+    layout: template.layout || [],
+    contentModel: contentModel,
+    Bind: Bind
+  }))))))) : null, bind.value ? null : /*#__PURE__*/React.createElement(AddTemplateButton, {
+    onTemplate: onTemplate
+  }));
+};
+
+//# sourceMappingURL=SingleValueDynamicZone.js.map

package/admin/plugins/fieldRenderers/dynamicZone/SingleValueDynamicZone.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","DeleteIcon","makeDecoratable","useConfirmationDialog","Accordion","Tooltip","AddTemplateButton","TemplateIcon","TemplateProvider","Fields","ParentFieldProvider","ParentValueIndexProvider","ModelFieldProvider","SingleValueItemContainer","props","template","actions","children","createElement","Item","title","name","description","icon","open","interactive","Fragment","Action","trigger","content","onClick","onDelete","SingleValueDynamicZone","field","bind","contentModel","getBind","showConfirmation","message","acceptLabel","cancelLabel","onTemplate","onChange","_templateId","id","__typename","templates","settings","value","find","tpl","undefined","Bind","unsetValue","path","parentName","index","fields","layout"],"sources":["SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { makeDecoratable, useConfirmationDialog } from \"@webiny/app-admin\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\nimport { AddTemplateButton } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { TemplateProvider } from \"./TemplateProvider\";\nimport type {\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ParentFieldProvider } from \"~/admin/components/ContentEntryForm/ParentValue\";\nimport {\n    ParentValueIndexProvider,\n    ModelFieldProvider\n} from \"~/admin/components/ModelFieldProvider\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\ninterface SingleValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\ninterface TemplateValue {\n    _templateId: string;\n    [key: string]: any;\n}\n\nexport interface SingleValueItemContainerProps {\n    value: TemplateValue;\n    contentModel: CmsModel;\n    onDelete: () => void;\n    title: React.ReactNode;\n    description: string;\n    icon: JSX.Element;\n    actions?: JSX.Element;\n    template: CmsDynamicZoneTemplate;\n    children: React.ReactNode;\n}\n\nexport const SingleValueItemContainer = makeDecoratable(\n    \"SingleValueItemContainer\",\n    (props: SingleValueItemContainerProps) => {\n        const { template, actions, children } = props;\n        return (\n            <Accordion.Item\n                title={template.name}\n                description={template.description}\n                icon={<TemplateIcon icon={template.icon} />}\n                open={true}\n                interactive={false}\n                actions={\n                    <>\n                        {actions ?? null}\n                        <Accordion.Item.Action\n                            icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                            onClick={props.onDelete}\n                        />\n                    </>\n                }\n            >\n                {children}\n            </Accordion.Item>\n        );\n    }\n);\n\nexport const SingleValueDynamicZone = ({\n    field,\n    bind,\n    contentModel,\n    getBind\n}: SingleValueDynamicZoneProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to remove this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const onTemplate = (template: CmsDynamicZoneTemplateWithTypename) => {\n        bind.onChange({ _templateId: template.id, __typename: template.__typename });\n    };\n\n    const templates = field.settings?.templates || [];\n\n    const template: CmsDynamicZoneTemplate | undefined = bind.value\n        ? templates.find(tpl => tpl.id === bind.value._templateId)\n        : undefined;\n\n    const Bind = getBind();\n\n    const unsetValue = () => {\n        showConfirmation(() => {\n            bind.onChange(null);\n        });\n    };\n\n    return (\n        <>\n            {template ? (\n                <ParentFieldProvider value={bind.value} path={Bind.parentName}>\n                    <ParentValueIndexProvider index={-1}>\n                        <ModelFieldProvider field={field}>\n                            <Accordion>\n                                <SingleValueItemContainer\n                                    template={template}\n                                    value={bind.value}\n                                    contentModel={contentModel}\n                                    onDelete={unsetValue}\n                                    title={template.name}\n                                    description={template.description}\n                                    icon={<TemplateIcon icon={template.icon} />}\n                                >\n                                    <TemplateProvider template={template}>\n                                        <Fields\n                                            fields={template.fields}\n                                            layout={template.layout || []}\n                                            contentModel={contentModel}\n                                            Bind={Bind}\n                                        />\n                                    </TemplateProvider>\n                                </SingleValueItemContainer>\n                            </Accordion>\n                        </ModelFieldProvider>\n                    </ParentValueIndexProvider>\n                </ParentFieldProvider>\n            ) : null}\n            {bind.value ? null : <AddTemplateButton onTemplate={onTemplate} />}\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.d.ts

@@ -0,0 +1,149 @@
+import React from "react";
+import type { CmsDynamicZoneTemplate } from "../../../../types";
+export interface TemplateGalleryContainerProps {
+    children: React.ReactNode;
+}
+export interface TemplateGalleryListProps {
+    children: React.ReactNode;
+}
+export interface CloseGalleryProps {
+    onClose: () => void;
+}
+export interface TemplateGalleryProps {
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+    onClose: () => void;
+    templates?: CmsDynamicZoneTemplate[];
+}
+export type ShouldRender = {
+    modelIds?: string[];
+};
+/**
+ * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a
+ * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.
+ */
+export declare const TemplateGallery: ((props: TemplateGalleryProps) => React.JSX.Element) & {
+    original: (props: TemplateGalleryProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: ShouldRender) => React.JSX.Element;
+} & {
+    Container: ((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryContainerProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryContainerProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
+    };
+    List: ((props: TemplateGalleryListProps) => React.JSX.Element) & {
+        original: (props: TemplateGalleryListProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: TemplateGalleryListProps) => React.JSX.Element) & {
+            original: (props: TemplateGalleryListProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
+    };
+    Item: (({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element) & {
+        original: ({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element) & {
+            original: ({ template, onTemplate }: import("./TemplateItem").TemplateCardProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
+    };
+    Close: ((props: CloseGalleryProps) => React.JSX.Element) & {
+        original: (props: CloseGalleryProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: CloseGalleryProps) => React.JSX.Element) & {
+            original: (props: CloseGalleryProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: CloseGalleryProps) => React.JSX.Element) & {
+            original: (props: CloseGalleryProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    } & {
+        createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<((props: CloseGalleryProps) => React.JSX.Element) & {
+            original: (props: CloseGalleryProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: ShouldRender) => React.JSX.Element;
+    };
+};

package/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { ReactComponent as CloseIcon } from "@webiny/icons/highlight_off.svg";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { makeDecoratable, withDecoratorFactory } from "@webiny/app-admin";
+import { useModel, useModelField } from "../../../hooks";
+import { TemplateItem } from "./TemplateItem";
+const GalleryContainer = makeDecoratable("TemplateGalleryContainer", props => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+});
+const GalleryList = makeDecoratable("TemplateGalleryList", props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-p-md wby-rounded-sm wby-bg-neutral-dimmed wby-grid wby-grid-cols-4 wby-gap-md"
+  }, props.children);
+});
+const CloseGallery = makeDecoratable("TemplateGalleryClose", props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full wby-text-center wby-mt-md"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Close",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      onClick: props.onClose,
+      icon: /*#__PURE__*/React.createElement(CloseIcon, null),
+      size: "lg",
+      variant: "ghost"
+    })
+  }));
+});
+const Gallery = makeDecoratable("TemplateGallery", props => {
+  const {
+    field
+  } = useModelField();
+  const templates = props.templates || field.settings?.templates || [];
+  return /*#__PURE__*/React.createElement(GalleryContainer, null, /*#__PURE__*/React.createElement(GalleryList, null, templates.map(template => /*#__PURE__*/React.createElement(TemplateItem, {
+    key: template.id,
+    template: template,
+    onTemplate: props.onTemplate
+  }))), /*#__PURE__*/React.createElement(CloseGallery, {
+    onClose: props.onClose
+  }));
+});
+function withShouldRender(Component) {
+  return withDecoratorFactory()(Component, decoratorProps => {
+    const {
+      model
+    } = useModel();
+    if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) {
+      return false;
+    }
+    return true;
+  });
+}
+
+/**
+ * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a
+ * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.
+ */
+export const TemplateGallery = Object.assign(withShouldRender(Gallery), {
+  Container: withShouldRender(GalleryContainer),
+  List: withShouldRender(GalleryList),
+  Item: withShouldRender(TemplateItem),
+  Close: withShouldRender(CloseGallery)
+});
+
+//# sourceMappingURL=TemplateGallery.js.map

package/admin/plugins/fieldRenderers/dynamicZone/TemplateGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","CloseIcon","IconButton","Tooltip","makeDecoratable","withDecoratorFactory","useModel","useModelField","TemplateItem","GalleryContainer","props","createElement","Fragment","children","GalleryList","className","CloseGallery","content","trigger","onClick","onClose","icon","size","variant","Gallery","field","templates","settings","map","template","key","id","onTemplate","withShouldRender","Component","decoratorProps","model","modelIds","length","includes","modelId","TemplateGallery","Object","assign","Container","List","Item","Close"],"sources":["TemplateGallery.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as CloseIcon } from \"@webiny/icons/highlight_off.svg\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport type { DecoratableComponent } from \"@webiny/app-admin\";\nimport { makeDecoratable, withDecoratorFactory } from \"@webiny/app-admin\";\nimport type { CmsDynamicZoneTemplate } from \"~/types\";\nimport { useModel, useModelField } from \"~/admin/hooks\";\nimport { TemplateItem } from \"./TemplateItem\";\n\nexport interface TemplateGalleryContainerProps {\n    children: React.ReactNode;\n}\n\nconst GalleryContainer = makeDecoratable(\n    \"TemplateGalleryContainer\",\n    (props: TemplateGalleryContainerProps) => {\n        return <>{props.children}</>;\n    }\n);\n\nexport interface TemplateGalleryListProps {\n    children: React.ReactNode;\n}\n\nconst GalleryList = makeDecoratable(\"TemplateGalleryList\", (props: TemplateGalleryListProps) => {\n    return (\n        <div\n            className={\n                \"wby-p-md wby-rounded-sm wby-bg-neutral-dimmed wby-grid wby-grid-cols-4 wby-gap-md\"\n            }\n        >\n            {props.children}\n        </div>\n    );\n});\n\nexport interface CloseGalleryProps {\n    onClose: () => void;\n}\n\nconst CloseGallery = makeDecoratable(\"TemplateGalleryClose\", (props: CloseGalleryProps) => {\n    return (\n        <div className={\"wby-w-full wby-text-center wby-mt-md\"}>\n            <Tooltip\n                content={\"Close\"}\n                trigger={\n                    <IconButton\n                        onClick={props.onClose}\n                        icon={<CloseIcon />}\n                        size={\"lg\"}\n                        variant={\"ghost\"}\n                    />\n                }\n            />\n        </div>\n    );\n});\n\nexport interface TemplateGalleryProps {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n    onClose: () => void;\n    templates?: CmsDynamicZoneTemplate[];\n}\n\nconst Gallery = makeDecoratable(\"TemplateGallery\", (props: TemplateGalleryProps) => {\n    const { field } = useModelField();\n    const templates = props.templates || field.settings?.templates || [];\n\n    return (\n        <GalleryContainer>\n            <GalleryList>\n                {templates.map(template => (\n                    <TemplateItem\n                        key={template.id}\n                        template={template}\n                        onTemplate={props.onTemplate}\n                    />\n                ))}\n            </GalleryList>\n            <CloseGallery onClose={props.onClose} />\n        </GalleryContainer>\n    );\n});\n\nexport type ShouldRender = { modelIds?: string[] };\n\nfunction withShouldRender<T extends DecoratableComponent>(Component: T) {\n    return withDecoratorFactory<ShouldRender>()(Component, decoratorProps => {\n        const { model } = useModel();\n\n        if (decoratorProps?.modelIds?.length && !decoratorProps.modelIds.includes(model.modelId)) {\n            return false;\n        }\n\n        return true;\n    });\n}\n\n/**\n * We're wrapping each component with `withShouldRender`, because they're all decoratable, and `withShouldRender` attaches a\n * conditional decorator, which optionally takes a `modelIds` prop, so you can control on which models that component will be decorated.\n */\nexport const TemplateGallery = Object.assign(withShouldRender(Gallery), {\n    Container: withShouldRender(GalleryContainer),\n    List: withShouldRender(GalleryList),\n    Item: withShouldRender(TemplateItem),\n    Close: withShouldRender(CloseGallery)\n});\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface TemplateIconProps {
+    icon: string;
+}
+export declare const TemplateIcon: ({ icon }: TemplateIconProps) => React.JSX.Element | null;
+export {};

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export const TemplateIcon = ({
+  icon
+}) => {
+  const faIcon = icon ? icon.split("/") : undefined;
+  return faIcon ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: "wby-text-neutral-strong",
+    icon: faIcon
+  }) : null;
+};
+
+//# sourceMappingURL=TemplateIcon.js.map

package/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FontAwesomeIcon","TemplateIcon","icon","faIcon","split","undefined","createElement","className"],"sources":["TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FontAwesomeIconProps } from \"@fortawesome/react-fontawesome\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\ninterface TemplateIconProps {\n    icon: string;\n}\n\nexport const TemplateIcon = ({ icon }: TemplateIconProps) => {\n    const faIcon = icon ? (icon.split(\"/\") as FontAwesomeIconProps[\"icon\"]) : undefined;\n\n    return faIcon ? <FontAwesomeIcon className={\"wby-text-neutral-strong\"} icon={faIcon} /> : null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,gCAAgC;AAMhE,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAwB,CAAC,KAAK;EACzD,MAAMC,MAAM,GAAGD,IAAI,GAAIA,IAAI,CAACE,KAAK,CAAC,GAAG,CAAC,GAAoCC,SAAS;EAEnF,OAAOF,MAAM,gBAAGJ,KAAA,CAAAO,aAAA,CAACN,eAAe;IAACO,SAAS,EAAE,yBAA0B;IAACL,IAAI,EAAEC;EAAO,CAAE,CAAC,GAAG,IAAI;AAClG,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/dynamicZone/TemplateItem.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import type { CmsDynamicZoneTemplate } from "../../../../types";
+export interface TemplateCardProps {
+    template: CmsDynamicZoneTemplate;
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+}
+export declare const TemplateItem: (({ template, onTemplate }: TemplateCardProps) => React.JSX.Element) & {
+    original: ({ template, onTemplate }: TemplateCardProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ template, onTemplate }: TemplateCardProps) => React.JSX.Element) & {
+        original: ({ template, onTemplate }: TemplateCardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/app-admin").ComponentDecorator<(({ template, onTemplate }: TemplateCardProps) => React.JSX.Element) & {
+        original: ({ template, onTemplate }: TemplateCardProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};