@webiny/app-headless-cms 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

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

@@ -1,173 +1,147 @@
-import React from "react";
+import react from "react";
 import cloneDeep from "lodash/cloneDeep.js";
-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 { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as library_add_svg_ReactComponent } from "@webiny/icons/library_add.svg";
+import { ReactComponent as expand_less_svg_ReactComponent } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
 import { AddTemplateButton } from "./AddTemplate.js";
 import { TemplateIcon } from "./TemplateIcon.js";
+import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
 import { ParentFieldProvider, useModelField } from "../../../hooks/index.js";
 import { Fields } from "../../../components/ContentEntryForm/Fields.js";
 import { makeDecoratable } from "@webiny/react-composition";
 import { TemplateProvider } from "./TemplateProvider.js";
-import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider/index.js";
+import { CanEditField, ParentValueIndexProvider } from "../../../components/ModelFieldProvider/index.js";
 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);
+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(expand_less_svg_ReactComponent, 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(expand_more_svg_ReactComponent, 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(library_add_svg_ReactComponent, null),
+            content: "Duplicate"
+        }),
+        onClick: ()=>props.onClone(props.value)
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            content: "Delete"
+        }),
+        onClick: props.onDelete
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: props.title,
+        description: props.description,
+        icon: props.icon,
+        actions: props.disabled ? null : 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 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
-  }));
+const TemplateValueForm = ({ value, contentModel, Bind, isLast, isFirst, onMoveUp, onMoveDown, onDelete, onClone })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const disabled = !rules.canEdit || rules.disabled;
+    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,
+        disabled: disabled
+    }, /*#__PURE__*/ react.createElement(MultiValueItem, {
+        template: template,
+        contentModel: contentModel,
+        Bind: Bind
+    }));
 };
-export const MultiValueContainer = makeDecoratable("MultiValueContainer", ({
-  children
-}) => {
-  return /*#__PURE__*/React.createElement(Accordion, {
-    variant: "container",
-    className: "gap-md"
-  }, /*#__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 MultiValueContainer = makeDecoratable("MultiValueContainer", ({ children })=>/*#__PURE__*/ react.createElement(Accordion, {
+        variant: "container",
+        className: "gap-md"
+    }, /*#__PURE__*/ react.createElement(react.Fragment, null, children)));
+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 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("div", {
-    className: "flex flex-col gap-y-lg"
-  }, 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);
-      });
+    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);
     };
-    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, /*#__PURE__*/React.createElement(AddTemplateButton, {
-    onTemplate: onTemplate
-  }));
+    const values = bind.value || [];
+    const hasValues = values.length > 0;
+    const Bind = getBind();
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-y-lg"
+    }, 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: 0 === index,
+                isLast: index === values.length - 1,
+                onMoveUp: ()=>bind.moveValueUp(index),
+                onMoveDown: ()=>bind.moveValueDown(index),
+                onDelete: onDelete,
+                onClone: (value)=>cloneValue(value, index)
+            }))));
+    }))) : null, /*#__PURE__*/ react.createElement(CanEditField, null, /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        onTemplate: onTemplate
+    })));
 };
+export { MultiValueContainer, MultiValueDynamicZone, MultiValueItem, MultiValueItemContainer };
 
 //# sourceMappingURL=MultiValueDynamicZone.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","cloneDeep","ReactComponent","DeleteIcon","CloneIcon","ArrowUpIcon","ArrowDownIcon","AddTemplateButton","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","variant","className","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.js\";\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 } from \"./AddTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport { ParentFieldProvider, useModelField } from \"~/admin/hooks/index.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { TemplateProvider } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\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 variant={\"container\"} className={\"gap-md\"}>\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        <div className={\"flex flex-col gap-y-lg\"}>\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            <AddTemplateButton onTemplate={onTemplate} />\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.js","sources":["../../../../../src/admin/plugins/fieldRenderers/dynamicZone/MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport cloneDeep from \"lodash/cloneDeep.js\";\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 } from \"./AddTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { ParentFieldProvider, useModelField } from \"~/admin/hooks/index.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport type {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsModelFieldRendererProps,\n    CmsModel,\n    CmsModelField,\n    CmsDynamicZoneTemplateWithTypename\n} from \"~/types.js\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { TemplateProvider } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateProvider.js\";\nimport {\n    CanEditField,\n    ParentValueIndexProvider\n} from \"~/admin/components/ModelFieldProvider/index.js\";\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    disabled?: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    onClone: (value: TemplateValue) => void;\n    title: React.ReactNode;\n    description: string;\n    icon: React.JSX.Element;\n    actions?: React.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={props.disabled ? null : 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 rules = useFieldEffectiveRules(field);\n    const disabled = !rules.canEdit || rules.disabled;\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            disabled={disabled}\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 variant={\"container\"} className={\"gap-md\"}>\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        <div className={\"flex flex-col gap-y-lg\"}>\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            <CanEditField>\n                <AddTemplateButton onTemplate={onTemplate} />\n            </CanEditField>\n        </div>\n    );\n};\n"],"names":["MultiValueItemContainer","makeDecoratable","children","props","actions","Accordion","Tooltip","ArrowUpIcon","ArrowDownIcon","CloneIcon","DeleteIcon","MultiValueItem","template","Bind","contentModel","TemplateProvider","Fields","TemplateValueForm","value","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","field","useModelField","rules","useFieldEffectiveRules","disabled","templates","tpl","TemplateIcon","MultiValueContainer","MultiValueDynamicZone","showConfirmation","useConfirmationDialog","bind","getBind","onTemplate","cloneValue","index","cloneDeep","values","hasValues","ParentFieldProvider","ParentValueIndexProvider","CanEditField","AddTemplateButton"],"mappings":"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"}

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

@@ -17,8 +17,9 @@ export interface SingleValueItemContainerProps {
     onDelete: () => void;
     title: React.ReactNode;
     description: string;
-    icon: JSX.Element;
-    actions?: JSX.Element;
+    disabled?: boolean;
+    icon: React.JSX.Element;
+    actions?: React.JSX.Element;
     template: CmsDynamicZoneTemplate;
     children: React.ReactNode;
 }
@@ -41,5 +42,5 @@ export declare const SingleValueItemContainer: ((props: SingleValueItemContainer
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export declare const SingleValueDynamicZone: ({ field, bind, contentModel, getBind }: SingleValueDynamicZoneProps) => React.JSX.Element;
+export declare const SingleValueDynamicZone: ({ bind, contentModel, getBind }: SingleValueDynamicZoneProps) => React.JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/delete.svg";
 import { makeDecoratable, useConfirmationDialog } from "@webiny/app-admin";
 import { Accordion, Tooltip } from "@webiny/admin-ui";
 import { AddTemplateButton } from "./AddTemplate.js";
@@ -7,85 +7,81 @@ import { TemplateIcon } from "./TemplateIcon.js";
 import { TemplateProvider } from "./TemplateProvider.js";
 import { Fields } from "../../../components/ContentEntryForm/Fields.js";
 import { ParentFieldProvider } from "../../../components/ContentEntryForm/ParentValue.js";
-import { ParentValueIndexProvider, ModelFieldProvider } from "../../../components/ModelFieldProvider/index.js";
-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
-    }),
-    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);
+import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
+import { ModelFieldProvider, ParentValueIndexProvider, useModelField } from "../../../components/ModelFieldProvider/index.js";
+const SingleValueItemContainer = makeDecoratable("SingleValueItemContainer", (props)=>{
+    const { template, actions, children, disabled = false } = props;
+    const accordionActions = disabled ? null : /*#__PURE__*/ react.createElement(react.Fragment, null, actions ?? null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            content: "Delete"
+        }),
+        onClick: props.onDelete
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: template.name,
+        description: template.description,
+        icon: /*#__PURE__*/ react.createElement(TemplateIcon, {
+            icon: template.icon
+        }),
+        actions: accordionActions
+    }, 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 SingleValueDynamicZone = ({ bind, contentModel, getBind })=>{
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const disabled = !rules.canEdit || rules.disabled;
+    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 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, {
-    background: "base",
-    variant: "container"
-  }, /*#__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
-  }));
+    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) : void 0;
+    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, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(SingleValueItemContainer, {
+        disabled: disabled,
+        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
+    }));
 };
+export { SingleValueDynamicZone, SingleValueItemContainer };
 
 //# sourceMappingURL=SingleValueDynamicZone.js.map