@webiny/app-headless-cms 5.33.5 → 5.34.0-beta.0

package/admin/plugins/fieldRenderers/dateTime/DateTimeWithoutTimezone.js.map

@@ -1 +1 @@
-{"version":3,"names":["parseDateTime","value","date","time","includes","split","console","error","DateTimeWithoutTimezone","field","bind","trailingIcon","initialValue","getDefaultFieldValue","Date","getCurrentDate","getCurrentLocalTime","bindValue","useEffect","onChange","cellSize","label"],"sources":["DateTimeWithoutTimezone.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport {\n    getCurrentDate,\n    getCurrentLocalTime,\n    getDefaultFieldValue,\n    RemoveFieldButton\n} from \"./utils\";\nimport { Input } from \"./Input\";\nimport { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface State {\n    date: string;\n    time: string;\n}\n\nconst parseDateTime = (value?: string): State => {\n    if (!value) {\n        return {\n            date: \"\",\n            time: \"\"\n        };\n    }\n    if (value.includes(\"T\")) {\n        const [date, time] = value.split(\".\")[0].split(\"T\");\n        return {\n            date,\n            time\n        };\n    }\n    const [date, time] = value.split(\" \");\n    if (!date || !time) {\n        console.error(`Could not extract date and time from \"${value}\".`);\n\n        return {\n            date: \"\",\n            time: \"\"\n        };\n    }\n    return {\n        date,\n        time\n    };\n};\n\nexport interface DateTimeWithoutTimezoneProps {\n    bind: BindComponentRenderProp;\n    trailingIcon?: any;\n    field: CmsEditorField;\n}\nexport const DateTimeWithoutTimezone: React.FC<DateTimeWithoutTimezoneProps> = ({\n    field,\n    bind,\n    trailingIcon\n}) => {\n    // \"2020-05-18 09:00:00\"\n    const initialValue = getDefaultFieldValue(field, bind, () => {\n        const date = new Date();\n        return `${getCurrentDate(date)} ${getCurrentLocalTime(date)}`;\n    });\n\n    const { date, time } = parseDateTime(initialValue);\n\n    const bindValue = bind.value || \"\";\n\n    useEffect(() => {\n        if (!date || !time || bindValue === initialValue) {\n            return;\n        }\n        bind.onChange(initialValue);\n    }, [bindValue]);\n\n    const cellSize = trailingIcon ? 5 : 6;\n\n    return (\n        <Grid>\n            <Cell span={6}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: date,\n                        onChange: async value => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(`${value} ${time || getCurrentLocalTime()}`);\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} date`\n                    }}\n                    type={\"date\"}\n                />\n            </Cell>\n            <Cell span={cellSize}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: time,\n                        onChange: async value => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(`${date || getCurrentDate()} ${value}`);\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} time`\n                    }}\n                    type={\"time\"}\n                    step={5}\n                />\n            </Cell>\n            <RemoveFieldButton trailingIcon={trailingIcon} />\n        </Grid>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["parseDateTime","value","date","time","includes","split","console","error","DateTimeWithoutTimezone","field","bind","trailingIcon","initialValue","getDefaultFieldValue","Date","getCurrentDate","getCurrentLocalTime","bindValue","useEffect","onChange","cellSize","label"],"sources":["DateTimeWithoutTimezone.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport {\n    getCurrentDate,\n    getCurrentLocalTime,\n    getDefaultFieldValue,\n    RemoveFieldButton\n} from \"./utils\";\nimport { Input } from \"./Input\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\n\ninterface State {\n    date: string;\n    time: string;\n}\n\nconst parseDateTime = (value?: string): State => {\n    if (!value) {\n        return {\n            date: \"\",\n            time: \"\"\n        };\n    }\n    if (value.includes(\"T\")) {\n        const [date, time] = value.split(\".\")[0].split(\"T\");\n        return {\n            date,\n            time\n        };\n    }\n    const [date, time] = value.split(\" \");\n    if (!date || !time) {\n        console.error(`Could not extract date and time from \"${value}\".`);\n\n        return {\n            date: \"\",\n            time: \"\"\n        };\n    }\n    return {\n        date,\n        time\n    };\n};\n\nexport interface DateTimeWithoutTimezoneProps {\n    bind: BindComponentRenderProp;\n    trailingIcon?: any;\n    field: CmsModelField;\n}\nexport const DateTimeWithoutTimezone: React.FC<DateTimeWithoutTimezoneProps> = ({\n    field,\n    bind,\n    trailingIcon\n}) => {\n    // \"2020-05-18 09:00:00\"\n    const initialValue = getDefaultFieldValue(field, bind, () => {\n        const date = new Date();\n        return `${getCurrentDate(date)} ${getCurrentLocalTime(date)}`;\n    });\n\n    const { date, time } = parseDateTime(initialValue);\n\n    const bindValue = bind.value || \"\";\n\n    useEffect(() => {\n        if (!date || !time || bindValue === initialValue) {\n            return;\n        }\n        bind.onChange(initialValue);\n    }, [bindValue]);\n\n    const cellSize = trailingIcon ? 5 : 6;\n\n    return (\n        <Grid>\n            <Cell span={6}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: date,\n                        onChange: async value => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(`${value} ${time || getCurrentLocalTime()}`);\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} date`\n                    }}\n                    type={\"date\"}\n                />\n            </Cell>\n            <Cell span={cellSize}>\n                <Input\n                    bind={{\n                        ...bind,\n                        value: time,\n                        onChange: async value => {\n                            if (!value) {\n                                if (!bind.value) {\n                                    return;\n                                }\n                                return bind.onChange(\"\");\n                            }\n                            return bind.onChange(`${date || getCurrentDate()} ${value}`);\n                        }\n                    }}\n                    field={{\n                        ...field,\n                        label: `${field.label} time`\n                    }}\n                    type={\"time\"}\n                    step={5}\n                />\n            </Cell>\n            <RemoveFieldButton trailingIcon={trailingIcon} />\n        </Grid>\n    );\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/dateTime/Input.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CmsEditorField } from "../../../../types";
+import { CmsModelField } from "../../../../types";
 import { BindComponentRenderProp } from "@webiny/form";
 export interface TrailingIcon {
     icon: React.ReactNode;
@@ -9,7 +9,7 @@ export interface InputProps {
     step?: number;
     type?: string;
     bind: BindComponentRenderProp;
-    field: CmsEditorField;
+    field: CmsModelField;
     trailingIcon?: TrailingIcon;
 }
 export declare const Input: React.FC<InputProps>;

package/admin/plugins/fieldRenderers/dateTime/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["Input","bind","props","value","type","parseFloat","onChange","field","label","placeholderText","helpText","trailingIcon"],"sources":["Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CmsEditorField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { Input as UiInput } from \"@webiny/ui/Input\";\n\nexport interface TrailingIcon {\n    icon: React.ReactNode;\n    onClick: any;\n}\n\nexport interface InputProps {\n    step?: number;\n    type?: string;\n    bind: BindComponentRenderProp;\n    field: CmsEditorField;\n    trailingIcon?: TrailingIcon;\n}\n\nexport const Input: React.FC<InputProps> = ({ bind, ...props }) => {\n    return (\n        <UiInput\n            {...props}\n            {...bind}\n            onChange={value => {\n                if (props.type === \"number\") {\n                    value = parseFloat(value);\n                }\n                return bind.onChange(value);\n            }}\n            label={props.field.label}\n            placeholder={props.field.placeholderText}\n            description={props.field.helpText}\n            type={props.type}\n            trailingIcon={props.trailingIcon}\n            data-testid={`fr.input.${props.field.label}`}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAGA;;;;AAeO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,OAAwB;EAAA,IAArBC,IAAqB,QAArBA,IAAqB;EAAA,IAAZC,KAAY;EAC/D,oBACI,oBAAC,YAAD,oBACQA,KADR,EAEQD,IAFR;IAGI,QAAQ,EAAE,kBAAAE,KAAK,EAAI;MACf,IAAID,KAAK,CAACE,IAAN,KAAe,QAAnB,EAA6B;QACzBD,KAAK,GAAGE,UAAU,CAACF,KAAD,CAAlB;MACH;;MACD,OAAOF,IAAI,CAACK,QAAL,CAAcH,KAAd,CAAP;IACH,CARL;IASI,KAAK,EAAED,KAAK,CAACK,KAAN,CAAYC,KATvB;IAUI,WAAW,EAAEN,KAAK,CAACK,KAAN,CAAYE,eAV7B;IAWI,WAAW,EAAEP,KAAK,CAACK,KAAN,CAAYG,QAX7B;IAYI,IAAI,EAAER,KAAK,CAACE,IAZhB;IAaI,YAAY,EAAEF,KAAK,CAACS,YAbxB;IAcI,kCAAyBT,KAAK,CAACK,KAAN,CAAYC,KAArC;EAdJ,GADJ;AAkBH,CAnBM"}
+{"version":3,"names":["Input","bind","props","value","type","parseFloat","onChange","field","label","placeholderText","helpText","trailingIcon"],"sources":["Input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CmsModelField } from \"~/types\";\nimport { BindComponentRenderProp } from \"@webiny/form\";\nimport { Input as UiInput } from \"@webiny/ui/Input\";\n\nexport interface TrailingIcon {\n    icon: React.ReactNode;\n    onClick: any;\n}\n\nexport interface InputProps {\n    step?: number;\n    type?: string;\n    bind: BindComponentRenderProp;\n    field: CmsModelField;\n    trailingIcon?: TrailingIcon;\n}\n\nexport const Input: React.FC<InputProps> = ({ bind, ...props }) => {\n    return (\n        <UiInput\n            {...props}\n            {...bind}\n            onChange={value => {\n                if (props.type === \"number\") {\n                    value = parseFloat(value);\n                }\n                return bind.onChange(value);\n            }}\n            label={props.field.label}\n            placeholder={props.field.placeholderText}\n            description={props.field.helpText}\n            type={props.type}\n            trailingIcon={props.trailingIcon}\n            data-testid={`fr.input.${props.field.label}`}\n        />\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AAGA;;;;AAeO,IAAMA,KAA2B,GAAG,SAA9BA,KAA8B,OAAwB;EAAA,IAArBC,IAAqB,QAArBA,IAAqB;EAAA,IAAZC,KAAY;EAC/D,oBACI,oBAAC,YAAD,oBACQA,KADR,EAEQD,IAFR;IAGI,QAAQ,EAAE,kBAAAE,KAAK,EAAI;MACf,IAAID,KAAK,CAACE,IAAN,KAAe,QAAnB,EAA6B;QACzBD,KAAK,GAAGE,UAAU,CAACF,KAAD,CAAlB;MACH;;MACD,OAAOF,IAAI,CAACK,QAAL,CAAcH,KAAd,CAAP;IACH,CARL;IASI,KAAK,EAAED,KAAK,CAACK,KAAN,CAAYC,KATvB;IAUI,WAAW,EAAEN,KAAK,CAACK,KAAN,CAAYE,eAV7B;IAWI,WAAW,EAAEP,KAAK,CAACK,KAAN,CAAYG,QAX7B;IAYI,IAAI,EAAER,KAAK,CAACE,IAZhB;IAaI,YAAY,EAAEF,KAAK,CAACS,YAbxB;IAcI,kCAAyBT,KAAK,CAACK,KAAN,CAAYC,KAArC;EAdJ,GADJ;AAkBH,CAnBM"}

package/admin/plugins/fieldRenderers/dateTime/utils.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { CmsEditorField } from "../../../../types";
+import { CmsModelField } from "../../../../types";
 export declare const UTC_TIMEZONES: {
     value: string;
     label: string;
 }[];
 export declare const DEFAULT_TIMEZONE = "+01:00";
-export declare const getDefaultFieldValue: (field: CmsEditorField, bind: {
+export declare const getDefaultFieldValue: (field: CmsModelField, bind: {
     value: string | null | undefined;
 }, getCurrent: () => string) => string;
 export declare const getCurrentTimeZone: (date?: Date) => string | null;

package/admin/plugins/fieldRenderers/dateTime/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["UTC_TIMEZONES","value","label","DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","settings","defaultSetValue","getCurrentTimeZone","date","Date","toTimeString","matches","match","timezone","slice","getCurrentLocalTime","split","time","getCurrentDate","year","String","getFullYear","padStart","month","getMonth","day","getDate","deleteIconStyles","css","width","height","color","RemoveFieldButton","trailingIcon","onClick","icon"],"sources":["utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { CmsEditorField } from \"~/types\";\n\nexport const UTC_TIMEZONES = [\n    {\n        value: \"-12:00\",\n        label: \"UTC-12:00\"\n    },\n    {\n        value: \"-11:00\",\n        label: \"UTC-11:00\"\n    },\n    {\n        value: \"-10:00\",\n        label: \"UTC-10:00\"\n    },\n    {\n        value: \"-09:30\",\n        label: \"UTC-09:30\"\n    },\n    {\n        value: \"-09:00\",\n        label: \"UTC-09:00\"\n    },\n    {\n        value: \"-08:00\",\n        label: \"UTC-08:00\"\n    },\n    {\n        value: \"-07:00\",\n        label: \"UTC-07:00\"\n    },\n    {\n        value: \"-06:00\",\n        label: \"UTC-06:00\"\n    },\n    {\n        value: \"-05:00\",\n        label: \"UTC-05:00\"\n    },\n    {\n        value: \"-04:30\",\n        label: \"UTC-04:30\"\n    },\n    {\n        value: \"-04:00\",\n        label: \"UTC-04:00\"\n    },\n    {\n        value: \"-03:30\",\n        label: \"UTC-03:30\"\n    },\n    {\n        value: \"-03:00\",\n        label: \"UTC-03:00\"\n    },\n    {\n        value: \"-02:00\",\n        label: \"UTC-02:00\"\n    },\n    {\n        value: \"-01:00\",\n        label: \"UTC-01:00\"\n    },\n    {\n        value: \"+00:00\",\n        label: \"UTC+00:00\"\n    },\n    {\n        value: \"+01:00\",\n        label: \"UTC+01:00\"\n    },\n    {\n        value: \"+02:00\",\n        label: \"UTC+02:00\"\n    },\n    {\n        value: \"+03:00\",\n        label: \"UTC+03:00\"\n    },\n    {\n        value: \"+03:30\",\n        label: \"UTC+03:30\"\n    },\n    {\n        value: \"+04:00\",\n        label: \"UTC+04:00\"\n    },\n    {\n        value: \"+04:30\",\n        label: \"UTC+04:30\"\n    },\n    {\n        value: \"+05:30\",\n        label: \"UTC+05:30\"\n    },\n    {\n        value: \"+05:45\",\n        label: \"UTC+05:45\"\n    },\n    {\n        value: \"+06:00\",\n        label: \"UTC+06:00\"\n    },\n    {\n        value: \"+06:30\",\n        label: \"UTC+06:30\"\n    },\n    {\n        value: \"+07:00\",\n        label: \"UTC+07:00\"\n    },\n    {\n        value: \"+08:00\",\n        label: \"UTC+08:00\"\n    },\n    {\n        value: \"+08:45\",\n        label: \"UTC+08:45\"\n    },\n    {\n        value: \"+09:00\",\n        label: \"UTC+09:00\"\n    },\n    {\n        value: \"+09:30\",\n        label: \"UTC+09:30\"\n    },\n    {\n        value: \"+10:00\",\n        label: \"UTC+10:00\"\n    },\n    {\n        value: \"+10:30\",\n        label: \"UTC+10:30\"\n    },\n    {\n        value: \"+11:00\",\n        label: \"UTC+11:00\"\n    },\n    {\n        value: \"+11:30\",\n        label: \"UTC+11:30\"\n    },\n    {\n        value: \"+12:00\",\n        label: \"UTC+12:00\"\n    },\n    {\n        value: \"+12:45\",\n        label: \"UTC+12:45\"\n    },\n    {\n        value: \"+13:00\",\n        label: \"UTC+13:00\"\n    },\n    {\n        value: \"+14:00\",\n        label: \"UTC+14:00\"\n    }\n];\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsEditorField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nconst deleteIconStyles = css({\n    width: \"100% !important\",\n    height: \"100% !important\",\n    color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n});\n\ninterface RemoveFieldButtonProps {\n    // TODO @ts-refactor figure out correct trailing icon type\n    // @ts-ignore\n    trailingIcon: any;\n}\nexport const RemoveFieldButton: React.FC<RemoveFieldButtonProps> = ({ trailingIcon }) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Cell span={1}>\n            <IconButton\n                className={deleteIconStyles}\n                onClick={trailingIcon.onClick}\n                icon={trailingIcon.icon}\n            />\n        </Cell>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["UTC_TIMEZONES","value","label","DEFAULT_TIMEZONE","getDefaultFieldValue","field","bind","getCurrent","def","settings","defaultSetValue","getCurrentTimeZone","date","Date","toTimeString","matches","match","timezone","slice","getCurrentLocalTime","split","time","getCurrentDate","year","String","getFullYear","padStart","month","getMonth","day","getDate","deleteIconStyles","css","width","height","color","RemoveFieldButton","trailingIcon","onClick","icon"],"sources":["utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { CmsModelField } from \"~/types\";\n\nexport const UTC_TIMEZONES = [\n    {\n        value: \"-12:00\",\n        label: \"UTC-12:00\"\n    },\n    {\n        value: \"-11:00\",\n        label: \"UTC-11:00\"\n    },\n    {\n        value: \"-10:00\",\n        label: \"UTC-10:00\"\n    },\n    {\n        value: \"-09:30\",\n        label: \"UTC-09:30\"\n    },\n    {\n        value: \"-09:00\",\n        label: \"UTC-09:00\"\n    },\n    {\n        value: \"-08:00\",\n        label: \"UTC-08:00\"\n    },\n    {\n        value: \"-07:00\",\n        label: \"UTC-07:00\"\n    },\n    {\n        value: \"-06:00\",\n        label: \"UTC-06:00\"\n    },\n    {\n        value: \"-05:00\",\n        label: \"UTC-05:00\"\n    },\n    {\n        value: \"-04:30\",\n        label: \"UTC-04:30\"\n    },\n    {\n        value: \"-04:00\",\n        label: \"UTC-04:00\"\n    },\n    {\n        value: \"-03:30\",\n        label: \"UTC-03:30\"\n    },\n    {\n        value: \"-03:00\",\n        label: \"UTC-03:00\"\n    },\n    {\n        value: \"-02:00\",\n        label: \"UTC-02:00\"\n    },\n    {\n        value: \"-01:00\",\n        label: \"UTC-01:00\"\n    },\n    {\n        value: \"+00:00\",\n        label: \"UTC+00:00\"\n    },\n    {\n        value: \"+01:00\",\n        label: \"UTC+01:00\"\n    },\n    {\n        value: \"+02:00\",\n        label: \"UTC+02:00\"\n    },\n    {\n        value: \"+03:00\",\n        label: \"UTC+03:00\"\n    },\n    {\n        value: \"+03:30\",\n        label: \"UTC+03:30\"\n    },\n    {\n        value: \"+04:00\",\n        label: \"UTC+04:00\"\n    },\n    {\n        value: \"+04:30\",\n        label: \"UTC+04:30\"\n    },\n    {\n        value: \"+05:30\",\n        label: \"UTC+05:30\"\n    },\n    {\n        value: \"+05:45\",\n        label: \"UTC+05:45\"\n    },\n    {\n        value: \"+06:00\",\n        label: \"UTC+06:00\"\n    },\n    {\n        value: \"+06:30\",\n        label: \"UTC+06:30\"\n    },\n    {\n        value: \"+07:00\",\n        label: \"UTC+07:00\"\n    },\n    {\n        value: \"+08:00\",\n        label: \"UTC+08:00\"\n    },\n    {\n        value: \"+08:45\",\n        label: \"UTC+08:45\"\n    },\n    {\n        value: \"+09:00\",\n        label: \"UTC+09:00\"\n    },\n    {\n        value: \"+09:30\",\n        label: \"UTC+09:30\"\n    },\n    {\n        value: \"+10:00\",\n        label: \"UTC+10:00\"\n    },\n    {\n        value: \"+10:30\",\n        label: \"UTC+10:30\"\n    },\n    {\n        value: \"+11:00\",\n        label: \"UTC+11:00\"\n    },\n    {\n        value: \"+11:30\",\n        label: \"UTC+11:30\"\n    },\n    {\n        value: \"+12:00\",\n        label: \"UTC+12:00\"\n    },\n    {\n        value: \"+12:45\",\n        label: \"UTC+12:45\"\n    },\n    {\n        value: \"+13:00\",\n        label: \"UTC+13:00\"\n    },\n    {\n        value: \"+14:00\",\n        label: \"UTC+14:00\"\n    }\n];\n\nexport const DEFAULT_TIMEZONE = \"+01:00\";\n\nexport const getDefaultFieldValue = (\n    field: CmsModelField,\n    bind: {\n        value: string | null | undefined;\n    },\n    getCurrent: () => string\n): string => {\n    const def = field.settings ? field.settings.defaultSetValue || \"null\" : \"null\";\n    if (bind.value || def !== \"current\") {\n        return bind.value || \"\";\n    }\n    return getCurrent();\n};\n\nexport const getCurrentTimeZone = (date?: Date): string | null => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const matches = value.match(/GMT([+-][0-9]{4})/);\n    if (!matches) {\n        return null;\n    }\n    const timezone = matches[1];\n    return `${timezone.slice(0, 3)}:${timezone.slice(3)}`;\n};\n\nexport const getCurrentLocalTime = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const value = date.toTimeString();\n\n    const [time] = value.split(\" \");\n    if (!time || time.match(/^([0-9]{2}):([0-9]{2}):([0-9]{2})$/) === null) {\n        return \"00:00:00\";\n    }\n    return time;\n};\n\nexport const getCurrentDate = (date?: Date): string => {\n    if (!date) {\n        date = new Date();\n    }\n    const year = String(date.getFullYear()).padStart(4, \"0\");\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\nconst deleteIconStyles = css({\n    width: \"100% !important\",\n    height: \"100% !important\",\n    color: \"var(--mdc-theme-text-secondary-on-background) !important\"\n});\n\ninterface RemoveFieldButtonProps {\n    // TODO @ts-refactor figure out correct trailing icon type\n    // @ts-ignore\n    trailingIcon: any;\n}\nexport const RemoveFieldButton: React.FC<RemoveFieldButtonProps> = ({ trailingIcon }) => {\n    if (!trailingIcon) {\n        return null;\n    }\n    return (\n        <Cell span={1}>\n            <IconButton\n                className={deleteIconStyles}\n                onClick={trailingIcon.onClick}\n                icon={trailingIcon.icon}\n            />\n        </Cell>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CmsDynamicZoneTemplate } from "../../../../types";
+interface UseAddTemplateParams {
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+}
+interface AddTemplateProps {
+    label?: string;
+    onTemplate: UseAddTemplateParams["onTemplate"];
+}
+export declare const AddTemplateButton: (props: AddTemplateProps) => JSX.Element;
+export declare const AddTemplateIcon: (props: AddTemplateProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddTemplateIcon = exports.AddTemplateButton = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _info = require("@material-design-icons/svg/outlined/info.svg");
+
+var _add_circle_outline = require("@material-design-icons/svg/round/add_circle_outline.svg");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _TemplateGallery = require("./TemplateGallery");
+
+var _Button = require("@webiny/ui/Button");
+
+var AddIconContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "AddIconContainer",
+  target: "e4w4vi60"
+})("text-align:center;padding-top:3px;");
+var AddButtonContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "AddButtonContainer",
+  target: "e4w4vi61"
+})("text-align:center;margin-top:20px;:first-of-type{margin-top:0;}");
+var Info = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Info",
+  target: "e4w4vi62"
+})("display:flex;justify-content:center;align-items:center;margin-top:5px;> svg{width:20px;margin-right:5px;}");
+
+function useAddTemplate(params) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showGallery = _useState2[0],
+      setShowGallery = _useState2[1];
+
+  var browseTemplates = function browseTemplates() {
+    setShowGallery(true);
+  };
+
+  var onTemplate = function onTemplate(template) {
+    params.onTemplate(template);
+    onGalleryClose();
+  };
+
+  var onGalleryClose = function onGalleryClose() {
+    setShowGallery(false);
+  };
+
+  return {
+    showGallery: showGallery,
+    browseTemplates: browseTemplates,
+    onTemplate: onTemplate,
+    onGalleryClose: onGalleryClose
+  };
+}
+
+var AddTemplateButton = function AddTemplateButton(props) {
+  var _useAddTemplate = useAddTemplate({
+    onTemplate: props.onTemplate
+  }),
+      showGallery = _useAddTemplate.showGallery,
+      onTemplate = _useAddTemplate.onTemplate,
+      browseTemplates = _useAddTemplate.browseTemplates,
+      onGalleryClose = _useAddTemplate.onGalleryClose;
+
+  return /*#__PURE__*/_react.default.createElement(AddButtonContainer, null, showGallery ? /*#__PURE__*/_react.default.createElement(_TemplateGallery.TemplateGallery, {
+    onTemplate: onTemplate,
+    onClose: onGalleryClose
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+    onClick: browseTemplates
+  }, "+ Add a template"), /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_info.ReactComponent, null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "caption"
+  }, "Click here to learn how templates and dynamic zones work"))));
+};
+
+exports.AddTemplateButton = AddTemplateButton;
+
+var AddTemplateIcon = function AddTemplateIcon(props) {
+  var _useAddTemplate2 = useAddTemplate({
+    onTemplate: props.onTemplate
+  }),
+      showGallery = _useAddTemplate2.showGallery,
+      onTemplate = _useAddTemplate2.onTemplate,
+      browseTemplates = _useAddTemplate2.browseTemplates,
+      onGalleryClose = _useAddTemplate2.onGalleryClose;
+
+  return /*#__PURE__*/_react.default.createElement(AddIconContainer, null, showGallery ? /*#__PURE__*/_react.default.createElement(_TemplateGallery.TemplateGallery, {
+    onTemplate: onTemplate,
+    onClose: onGalleryClose
+  }) : /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    onClick: browseTemplates,
+    icon: /*#__PURE__*/_react.default.createElement(_add_circle_outline.ReactComponent, null)
+  }));
+};
+
+exports.AddTemplateIcon = AddTemplateIcon;

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

@@ -0,0 +1 @@
+{"version":3,"names":["AddIconContainer","styled","AddButtonContainer","Info","useAddTemplate","params","useState","showGallery","setShowGallery","browseTemplates","onTemplate","template","onGalleryClose","AddTemplateButton","props","AddTemplateIcon"],"sources":["AddTemplate.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { ReactComponent as InfoIcon } from \"@material-design-icons/svg/outlined/info.svg\";\nimport { ReactComponent as AddIcon } from \"@material-design-icons/svg/round/add_circle_outline.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { TemplateGallery } from \"./TemplateGallery\";\nimport { IconButton, ButtonSecondary } from \"@webiny/ui/Button\";\n\nconst AddIconContainer = styled.div`\n    text-align: center;\n    padding-top: 3px;\n`;\n\nconst AddButtonContainer = styled.div`\n    text-align: center;\n    margin-top: 20px;\n    :first-of-type {\n        margin-top: 0;\n    }\n`;\n\nconst Info = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 5px;\n    > svg {\n        width: 20px;\n        margin-right: 5px;\n    }\n`;\n\ninterface UseAddTemplateParams {\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nfunction useAddTemplate(params: UseAddTemplateParams) {\n    const [showGallery, setShowGallery] = useState(false);\n\n    const browseTemplates = () => {\n        setShowGallery(true);\n    };\n\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        params.onTemplate(template);\n        onGalleryClose();\n    };\n\n    const onGalleryClose = () => {\n        setShowGallery(false);\n    };\n\n    return {\n        showGallery,\n        browseTemplates,\n        onTemplate,\n        onGalleryClose\n    };\n}\n\ninterface AddTemplateProps {\n    label?: string;\n    onTemplate: UseAddTemplateParams[\"onTemplate\"];\n}\n\nexport const AddTemplateButton = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddButtonContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <>\n                    <ButtonSecondary onClick={browseTemplates}>+ Add a template</ButtonSecondary>\n                    <Info>\n                        <InfoIcon />\n                        <Typography use={\"caption\"}>\n                            Click here to learn how templates and dynamic zones work\n                        </Typography>\n                    </Info>\n                </>\n            )}\n        </AddButtonContainer>\n    );\n};\n\nexport const AddTemplateIcon = (props: AddTemplateProps) => {\n    const { showGallery, onTemplate, browseTemplates, onGalleryClose } = useAddTemplate({\n        onTemplate: props.onTemplate\n    });\n\n    return (\n        <AddIconContainer>\n            {showGallery ? (\n                <TemplateGallery onTemplate={onTemplate} onClose={onGalleryClose} />\n            ) : (\n                <IconButton onClick={browseTemplates} icon={<AddIcon />} />\n            )}\n        </AddIconContainer>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,gBAAgB,oBAAGC,eAAH;EAAA;EAAA;AAAA,wCAAtB;AAKA,IAAMC,kBAAkB,oBAAGD,eAAH;EAAA;EAAA;AAAA,qEAAxB;AAQA,IAAME,IAAI,oBAAGF,eAAH;EAAA;EAAA;AAAA,+GAAV;;AAeA,SAASG,cAAT,CAAwBC,MAAxB,EAAsD;EAClD,gBAAsC,IAAAC,eAAA,EAAS,KAAT,CAAtC;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;IAC1BD,cAAc,CAAC,IAAD,CAAd;EACH,CAFD;;EAIA,IAAME,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAAsC;IACrDN,MAAM,CAACK,UAAP,CAAkBC,QAAlB;IACAC,cAAc;EACjB,CAHD;;EAKA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,GAAM;IACzBJ,cAAc,CAAC,KAAD,CAAd;EACH,CAFD;;EAIA,OAAO;IACHD,WAAW,EAAXA,WADG;IAEHE,eAAe,EAAfA,eAFG;IAGHC,UAAU,EAAVA,UAHG;IAIHE,cAAc,EAAdA;EAJG,CAAP;AAMH;;AAOM,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAA6B;EAC1D,sBAAqEV,cAAc,CAAC;IAChFM,UAAU,EAAEI,KAAK,CAACJ;EAD8D,CAAD,CAAnF;EAAA,IAAQH,WAAR,mBAAQA,WAAR;EAAA,IAAqBG,UAArB,mBAAqBA,UAArB;EAAA,IAAiCD,eAAjC,mBAAiCA,eAAjC;EAAA,IAAkDG,cAAlD,mBAAkDA,cAAlD;;EAIA,oBACI,6BAAC,kBAAD,QACKL,WAAW,gBACR,6BAAC,gCAAD;IAAiB,UAAU,EAAEG,UAA7B;IAAyC,OAAO,EAAEE;EAAlD,EADQ,gBAGR,yEACI,6BAAC,uBAAD;IAAiB,OAAO,EAAEH;EAA1B,sBADJ,eAEI,6BAAC,IAAD,qBACI,6BAAC,oBAAD,OADJ,eAEI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,8DAFJ,CAFJ,CAJR,CADJ;AAiBH,CAtBM;;;;AAwBA,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACD,KAAD,EAA6B;EACxD,uBAAqEV,cAAc,CAAC;IAChFM,UAAU,EAAEI,KAAK,CAACJ;EAD8D,CAAD,CAAnF;EAAA,IAAQH,WAAR,oBAAQA,WAAR;EAAA,IAAqBG,UAArB,oBAAqBA,UAArB;EAAA,IAAiCD,eAAjC,oBAAiCA,eAAjC;EAAA,IAAkDG,cAAlD,oBAAkDA,cAAlD;;EAIA,oBACI,6BAAC,gBAAD,QACKL,WAAW,gBACR,6BAAC,gCAAD;IAAiB,UAAU,EAAEG,UAA7B;IAAyC,OAAO,EAAEE;EAAlD,EADQ,gBAGR,6BAAC,kBAAD;IAAY,OAAO,EAAEH,eAArB;IAAsC,IAAI,eAAE,6BAAC,kCAAD;EAA5C,EAJR,CADJ;AASH,CAdM"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BindComponentRenderProp, CmsEditorFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+declare type GetBind = CmsEditorFieldRendererProps["getBind"];
+interface MultiValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+export declare const MultiValueDynamicZone: ({ bind, getBind, contentModel }: MultiValueDynamicZoneProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiValueDynamicZone = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _Accordion = require("@webiny/ui/Accordion");
+
+var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
+
+var _library_add = require("@material-design-icons/svg/outlined/library_add.svg");
+
+var _expand_less = require("@material-design-icons/svg/round/expand_less.svg");
+
+var _expand_more = require("@material-design-icons/svg/round/expand_more.svg");
+
+var _AddTemplate = require("./AddTemplate");
+
+var _TemplateIcon = require("./TemplateIcon");
+
+var _hooks = require("../../../hooks");
+
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+
+var BottomMargin = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "BottomMargin",
+  target: "e1mhu37c0"
+})("margin-bottom:20px;");
+
+var TemplateValueForm = function TemplateValueForm(_ref) {
+  var _field$settings;
+
+  var value = _ref.value,
+      contentModel = _ref.contentModel,
+      Bind = _ref.Bind,
+      isLast = _ref.isLast,
+      isFirst = _ref.isFirst,
+      onMoveUp = _ref.onMoveUp,
+      onMoveDown = _ref.onMoveDown,
+      onDelete = _ref.onDelete,
+      onClone = _ref.onClone;
+
+  var _useModelField = (0, _hooks.useModelField)(),
+      field = _useModelField.field;
+
+  var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
+  var template = templates.find(function (tpl) {
+    return tpl.id === value._templateId;
+  });
+
+  if (!template) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+      icon: template.icon
+    }),
+    actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_expand_less.ReactComponent, null),
+      onClick: onMoveUp,
+      disabled: isFirst
+    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_expand_more.ReactComponent, null),
+      onClick: onMoveDown,
+      disabled: isLast
+    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Divider, null), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_library_add.ReactComponent, null),
+      onClick: onClone
+    }), /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
+      onClick: onDelete
+    }))
+  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+    fields: template.fields,
+    layout: template.layout || [],
+    contentModel: contentModel,
+    Bind: Bind
+  }));
+};
+
+var MultiValueDynamicZone = function MultiValueDynamicZone(_ref2) {
+  var bind = _ref2.bind,
+      getBind = _ref2.getBind,
+      contentModel = _ref2.contentModel;
+
+  var onTemplate = function onTemplate(template) {
+    bind.appendValue({
+      _templateId: template.id
+    });
+  };
+
+  var cloneValue = function cloneValue(index) {
+    var newValue = (0, _cloneDeep.default)(bind.value[index]);
+    bind.appendValue(newValue, index + 1);
+  };
+
+  var values = bind.value || [];
+  var hasValues = values.length > 0;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasValues ? /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, values.map(function (value, index) {
+    return /*#__PURE__*/_react.default.createElement(TemplateValueForm, {
+      key: index,
+      value: value,
+      contentModel: contentModel,
+      Bind: getBind(index),
+      isFirst: index === 0,
+      isLast: index === values.length - 1,
+      onMoveUp: function onMoveUp() {
+        return bind.moveValueUp(index);
+      },
+      onMoveDown: function onMoveDown() {
+        return bind.moveValueDown(index);
+      },
+      onDelete: function onDelete() {
+        return bind.removeValue(index);
+      },
+      onClone: function onClone() {
+        return cloneValue(index);
+      }
+    });
+  })) : null, hasValues ? /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateIcon, {
+    onTemplate: onTemplate
+  }) : /*#__PURE__*/_react.default.createElement(BottomMargin, null, /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateButton, {
+    onTemplate: onTemplate
+  })));
+};
+
+exports.MultiValueDynamicZone = MultiValueDynamicZone;

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

@@ -0,0 +1 @@
+{"version":3,"names":["BottomMargin","styled","TemplateValueForm","value","contentModel","Bind","isLast","isFirst","onMoveUp","onMoveDown","onDelete","onClone","useModelField","field","templates","settings","template","find","tpl","id","_templateId","name","description","icon","fields","layout","MultiValueDynamicZone","bind","getBind","onTemplate","appendValue","cloneValue","index","newValue","cloneDeep","values","hasValues","length","map","moveValueUp","moveValueDown","removeValue"],"sources":["MultiValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@material-design-icons/svg/outlined/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@material-design-icons/svg/round/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@material-design-icons/svg/round/expand_more.svg\";\nimport { AddTemplateButton, AddTemplateIcon } from \"./AddTemplate\";\nimport { TemplateIcon } from \"./TemplateIcon\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport {\n    BindComponent,\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsEditorFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\nconst BottomMargin = styled.div`\n    margin-bottom: 20px;\n`;\n\ntype GetBind = CmsEditorFieldRendererProps[\"getBind\"];\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: () => 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        <AccordionItem\n            title={template.name}\n            description={template.description}\n            icon={<TemplateIcon icon={template.icon} />}\n            actions={\n                <AccordionItem.Actions>\n                    <AccordionItem.Action\n                        icon={<ArrowUpIcon />}\n                        onClick={onMoveUp}\n                        disabled={isFirst}\n                    />\n                    <AccordionItem.Action\n                        icon={<ArrowDownIcon />}\n                        onClick={onMoveDown}\n                        disabled={isLast}\n                    />\n                    <AccordionItem.Divider />\n                    <AccordionItem.Action icon={<CloneIcon />} onClick={onClone} />\n                    <AccordionItem.Action icon={<DeleteIcon />} onClick={onDelete} />\n                </AccordionItem.Actions>\n            }\n        >\n            <Fields\n                fields={template.fields}\n                layout={template.layout || []}\n                contentModel={contentModel}\n                Bind={Bind}\n            />\n        </AccordionItem>\n    );\n};\n\ninterface MultiValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const MultiValueDynamicZone = ({\n    bind,\n    getBind,\n    contentModel\n}: MultiValueDynamicZoneProps) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.appendValue({ _templateId: template.id });\n    };\n\n    const cloneValue = (index: number) => {\n        const newValue = cloneDeep(bind.value[index]);\n        bind.appendValue(newValue, index + 1);\n    };\n\n    const values: TemplateValue[] = bind.value || [];\n    const hasValues = values.length > 0;\n\n    return (\n        <>\n            {hasValues ? (\n                <Accordion>\n                    {values.map((value, index) => (\n                        <TemplateValueForm\n                            key={index}\n                            value={value}\n                            contentModel={contentModel}\n                            Bind={getBind(index)}\n                            isFirst={index === 0}\n                            isLast={index === values.length - 1}\n                            onMoveUp={() => bind.moveValueUp(index)}\n                            onMoveDown={() => bind.moveValueDown(index)}\n                            onDelete={() => bind.removeValue(index)}\n                            onClone={() => cloneValue(index)}\n                        />\n                    ))}\n                </Accordion>\n            ) : null}\n            {hasValues ? (\n                <AddTemplateIcon onTemplate={onTemplate} />\n            ) : (\n                <BottomMargin>\n                    <AddTemplateButton onTemplate={onTemplate} />\n                </BottomMargin>\n            )}\n        </>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BindComponentRenderProp, CmsEditorFieldRendererProps, CmsModel, CmsModelField } from "../../../../types";
+declare type GetBind = CmsEditorFieldRendererProps["getBind"];
+interface SingleValueDynamicZoneProps {
+    field: CmsModelField;
+    bind: BindComponentRenderProp;
+    contentModel: CmsModel;
+    getBind: GetBind;
+}
+export declare const SingleValueDynamicZone: ({ field, bind, contentModel, getBind }: SingleValueDynamicZoneProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleValueDynamicZone = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
+
+var _Accordion = require("@webiny/ui/Accordion");
+
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+
+var _AddTemplate = require("./AddTemplate");
+
+var _TemplateIcon = require("./TemplateIcon");
+
+var SingleValueDynamicZone = function SingleValueDynamicZone(_ref) {
+  var _field$settings;
+
+  var field = _ref.field,
+      bind = _ref.bind,
+      contentModel = _ref.contentModel,
+      getBind = _ref.getBind;
+
+  var onTemplate = function onTemplate(template) {
+    bind.onChange({
+      _templateId: template.id
+    });
+  };
+
+  var templates = ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.templates) || [];
+  var template = bind.value ? templates.find(function (tpl) {
+    return tpl.id === bind.value._templateId;
+  }) : undefined;
+  var Bind = getBind();
+
+  var unsetValue = function unsetValue() {
+    bind.onChange(null);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, template ? /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    title: template.name,
+    description: template.description,
+    icon: /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+      icon: template.icon
+    }),
+    open: true,
+    interactive: false,
+    actions: /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Action, {
+      icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
+      onClick: unsetValue
+    }))
+  }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+    fields: template.fields,
+    layout: template.layout || [],
+    contentModel: contentModel,
+    Bind: Bind
+  }))) : null, bind.value ? null : /*#__PURE__*/_react.default.createElement(_AddTemplate.AddTemplateButton, {
+    onTemplate: onTemplate
+  }));
+};
+
+exports.SingleValueDynamicZone = SingleValueDynamicZone;

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

@@ -0,0 +1 @@
+{"version":3,"names":["SingleValueDynamicZone","field","bind","contentModel","getBind","onTemplate","template","onChange","_templateId","id","templates","settings","value","find","tpl","undefined","Bind","unsetValue","name","description","icon","fields","layout"],"sources":["SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { AddTemplateButton } from \"./AddTemplate\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon\";\nimport {\n    BindComponentRenderProp,\n    CmsDynamicZoneTemplate,\n    CmsEditorFieldRendererProps,\n    CmsModel,\n    CmsModelField\n} from \"~/types\";\n\ntype GetBind = CmsEditorFieldRendererProps[\"getBind\"];\n\ninterface SingleValueDynamicZoneProps {\n    field: CmsModelField;\n    bind: BindComponentRenderProp;\n    contentModel: CmsModel;\n    getBind: GetBind;\n}\n\nexport const SingleValueDynamicZone = ({\n    field,\n    bind,\n    contentModel,\n    getBind\n}: SingleValueDynamicZoneProps) => {\n    const onTemplate = (template: CmsDynamicZoneTemplate) => {\n        bind.onChange({ _templateId: template.id });\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        bind.onChange(null);\n    };\n\n    return (\n        <>\n            {template ? (\n                <Accordion>\n                    <AccordionItem\n                        title={template.name}\n                        description={template.description}\n                        icon={<TemplateIcon icon={template.icon} />}\n                        open={true}\n                        interactive={false}\n                        actions={\n                            <AccordionItem.Actions>\n                                <AccordionItem.Action icon={<DeleteIcon />} onClick={unsetValue} />\n                            </AccordionItem.Actions>\n                        }\n                    >\n                        <Fields\n                            fields={template.fields}\n                            layout={template.layout || []}\n                            contentModel={contentModel}\n                            Bind={Bind}\n                        />\n                    </AccordionItem>\n                </Accordion>\n            ) : null}\n            {bind.value ? null : <AddTemplateButton onTemplate={onTemplate} />}\n        </>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAkBO,IAAMA,sBAAsB,GAAG,SAAzBA,sBAAyB,OAKH;EAAA;;EAAA,IAJ/BC,KAI+B,QAJ/BA,KAI+B;EAAA,IAH/BC,IAG+B,QAH/BA,IAG+B;EAAA,IAF/BC,YAE+B,QAF/BA,YAE+B;EAAA,IAD/BC,OAC+B,QAD/BA,OAC+B;;EAC/B,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,QAAD,EAAsC;IACrDJ,IAAI,CAACK,QAAL,CAAc;MAAEC,WAAW,EAAEF,QAAQ,CAACG;IAAxB,CAAd;EACH,CAFD;;EAIA,IAAMC,SAAS,GAAG,oBAAAT,KAAK,CAACU,QAAN,oEAAgBD,SAAhB,KAA6B,EAA/C;EAEA,IAAMJ,QAA4C,GAAGJ,IAAI,CAACU,KAAL,GAC/CF,SAAS,CAACG,IAAV,CAAe,UAAAC,GAAG;IAAA,OAAIA,GAAG,CAACL,EAAJ,KAAWP,IAAI,CAACU,KAAL,CAAWJ,WAA1B;EAAA,CAAlB,CAD+C,GAE/CO,SAFN;EAIA,IAAMC,IAAI,GAAGZ,OAAO,EAApB;;EAEA,IAAMa,UAAU,GAAG,SAAbA,UAAa,GAAM;IACrBf,IAAI,CAACK,QAAL,CAAc,IAAd;EACH,CAFD;;EAIA,oBACI,4DACKD,QAAQ,gBACL,6BAAC,oBAAD,qBACI,6BAAC,wBAAD;IACI,KAAK,EAAEA,QAAQ,CAACY,IADpB;IAEI,WAAW,EAAEZ,QAAQ,CAACa,WAF1B;IAGI,IAAI,eAAE,6BAAC,0BAAD;MAAc,IAAI,EAAEb,QAAQ,CAACc;IAA7B,EAHV;IAII,IAAI,EAAE,IAJV;IAKI,WAAW,EAAE,KALjB;IAMI,OAAO,eACH,6BAAC,wBAAD,CAAe,OAAf,qBACI,6BAAC,wBAAD,CAAe,MAAf;MAAsB,IAAI,eAAE,6BAAC,8BAAD,OAA5B;MAA4C,OAAO,EAAEH;IAArD,EADJ;EAPR,gBAYI,6BAAC,cAAD;IACI,MAAM,EAAEX,QAAQ,CAACe,MADrB;IAEI,MAAM,EAAEf,QAAQ,CAACgB,MAAT,IAAmB,EAF/B;IAGI,YAAY,EAAEnB,YAHlB;IAII,IAAI,EAAEa;EAJV,EAZJ,CADJ,CADK,GAsBL,IAvBR,EAwBKd,IAAI,CAACU,KAAL,GAAa,IAAb,gBAAoB,6BAAC,8BAAD;IAAmB,UAAU,EAAEP;EAA/B,EAxBzB,CADJ;AA4BH,CAlDM"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CmsDynamicZoneTemplate } from "../../../../types";
+interface TemplateCardProps {
+    template: CmsDynamicZoneTemplate;
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+}
+export declare const TemplateCard: ({ template, onTemplate }: TemplateCardProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemplateCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _Button = require("@webiny/ui/Button");
+
+var _TemplateIcon = require("./TemplateIcon");
+
+var CardContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "CardContainer",
+  target: "e8hs6u70"
+})("display:flex;flex-direction:column;width:170px;height:200px;margin:5px;border:1px solid var(--mdc-theme-background);");
+var CardIcon = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "CardIcon",
+  target: "e8hs6u71"
+})("text-align:center;padding:25px;font-size:1.5rem;background-color:var(--mdc-theme-background);");
+var CardBody = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "CardBody",
+  target: "e8hs6u72"
+})("display:flex;flex-direction:column;flex:1;padding:10px;text-align:left;");
+var CardTitle = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "CardTitle",
+  target: "e8hs6u73"
+})("margin-bottom:10px;");
+var CardDescription = /*#__PURE__*/(0, _styled.default)(_Typography.Typography, {
+  label: "CardDescription",
+  target: "e8hs6u74"
+})("text-overflow:ellipsis;margin-bottom:10px;white-space:nowrap;overflow:hidden;");
+var CardButton = /*#__PURE__*/(0, _styled.default)(_Button.ButtonSecondary, {
+  label: "CardButton",
+  target: "e8hs6u75"
+})("font-size:0.7rem;line-height:100%;margin-top:auto;");
+
+var TemplateCard = function TemplateCard(_ref) {
+  var template = _ref.template,
+      onTemplate = _ref.onTemplate;
+  return /*#__PURE__*/_react.default.createElement(CardContainer, null, /*#__PURE__*/_react.default.createElement(CardIcon, null, /*#__PURE__*/_react.default.createElement(_TemplateIcon.TemplateIcon, {
+    icon: template.icon
+  })), /*#__PURE__*/_react.default.createElement(CardBody, null, /*#__PURE__*/_react.default.createElement(CardTitle, {
+    tag: "p",
+    use: "subtitle2"
+  }, template.name), /*#__PURE__*/_react.default.createElement(CardDescription, {
+    tag: "p",
+    use: "body2"
+  }, template.description), /*#__PURE__*/_react.default.createElement(CardButton, {
+    onClick: function onClick() {
+      return onTemplate(template);
+    }
+  }, "+ Insert Template")));
+};
+
+exports.TemplateCard = TemplateCard;

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

@@ -0,0 +1 @@
+{"version":3,"names":["CardContainer","styled","CardIcon","CardBody","CardTitle","Typography","CardDescription","CardButton","ButtonSecondary","TemplateCard","template","onTemplate","icon","name","description"],"sources":["TemplateCard.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { CmsDynamicZoneTemplate } from \"~/types\";\nimport { ButtonSecondary } from \"@webiny/ui/Button\";\nimport { TemplateIcon } from \"~/admin/plugins/fieldRenderers/dynamicZone/TemplateIcon\";\n\nconst CardContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 170px;\n    height: 200px;\n    margin: 5px;\n    border: 1px solid var(--mdc-theme-background);\n`;\n\nconst CardIcon = styled.div`\n    text-align: center;\n    padding: 25px;\n    font-size: 1.5rem;\n    background-color: var(--mdc-theme-background);\n`;\n\nconst CardBody = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding: 10px;\n    text-align: left;\n`;\n\nconst CardTitle = styled(Typography)`\n    margin-bottom: 10px;\n`;\n\nconst CardDescription = styled(Typography)`\n    text-overflow: ellipsis;\n    margin-bottom: 10px;\n    white-space: nowrap;\n    overflow: hidden;\n`;\n\nconst CardButton = styled(ButtonSecondary)`\n    font-size: 0.7rem;\n    line-height: 100%;\n    margin-top: auto;\n`;\n\ninterface TemplateCardProps {\n    template: CmsDynamicZoneTemplate;\n    onTemplate: (template: CmsDynamicZoneTemplate) => void;\n}\n\nexport const TemplateCard = ({ template, onTemplate }: TemplateCardProps) => {\n    return (\n        <CardContainer>\n            <CardIcon>\n                <TemplateIcon icon={template.icon} />\n            </CardIcon>\n            <CardBody>\n                <CardTitle tag={\"p\"} use={\"subtitle2\"}>\n                    {template.name}\n                </CardTitle>\n                <CardDescription tag={\"p\"} use={\"body2\"}>\n                    {template.description}\n                </CardDescription>\n                <CardButton onClick={() => onTemplate(template)}>+ Insert Template</CardButton>\n            </CardBody>\n        </CardContainer>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AACA;;AAEA,IAAMA,aAAa,oBAAGC,eAAH;EAAA;EAAA;AAAA,0HAAnB;AASA,IAAMC,QAAQ,oBAAGD,eAAH;EAAA;EAAA;AAAA,mGAAd;AAOA,IAAME,QAAQ,oBAAGF,eAAH;EAAA;EAAA;AAAA,6EAAd;AAQA,IAAMG,SAAS,oBAAGH,eAAH,EAAUI,sBAAV;EAAA;EAAA;AAAA,yBAAf;AAIA,IAAMC,eAAe,oBAAGL,eAAH,EAAUI,sBAAV;EAAA;EAAA;AAAA,mFAArB;AAOA,IAAME,UAAU,oBAAGN,eAAH,EAAUO,uBAAV;EAAA;EAAA;AAAA,wDAAhB;;AAWO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAAiD;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,UAAoC,QAApCA,UAAoC;EACzE,oBACI,6BAAC,aAAD,qBACI,6BAAC,QAAD,qBACI,6BAAC,0BAAD;IAAc,IAAI,EAAED,QAAQ,CAACE;EAA7B,EADJ,CADJ,eAII,6BAAC,QAAD,qBACI,6BAAC,SAAD;IAAW,GAAG,EAAE,GAAhB;IAAqB,GAAG,EAAE;EAA1B,GACKF,QAAQ,CAACG,IADd,CADJ,eAII,6BAAC,eAAD;IAAiB,GAAG,EAAE,GAAtB;IAA2B,GAAG,EAAE;EAAhC,GACKH,QAAQ,CAACI,WADd,CAJJ,eAOI,6BAAC,UAAD;IAAY,OAAO,EAAE;MAAA,OAAMH,UAAU,CAACD,QAAD,CAAhB;IAAA;EAArB,uBAPJ,CAJJ,CADJ;AAgBH,CAjBM"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CmsDynamicZoneTemplate } from "../../../../types";
+interface TemplateGalleryProps {
+    onTemplate: (template: CmsDynamicZoneTemplate) => void;
+    onClose: () => void;
+}
+export declare const TemplateGallery: ({ onTemplate, onClose }: TemplateGalleryProps) => JSX.Element;
+export {};