@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/admin/components/FieldEditor/Field.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","FieldContainer","styled","display","flexDirection","justifyContent","alignItems","LowerCase","Info","flex","lineHeight","Actions","position","FieldTypeName","textTransform","color","textAlign","fontSize","paddingRight","menuStyles","css","width","opacity","pointerEvents","FieldExtra","allowedTitleFieldTypes","isFieldAllowedToBeTitle","model","field","parent","multipleValues","includes","type","titleFieldId","fieldId","isFieldAllowedToBeDescription","descriptionFieldId","isFieldAllowedToBeImage","imageFieldId","settings","imagesOnly","getFieldTypeName","isTitleField","isDescriptionField","isImageField","filter","Boolean","join","Field","props","onEdit","useSnackbar","showSnackbar","useModelEditor","setModel","setData","data","useModelFieldEditor","getFieldPlugin","getFieldRendererPlugin","useConfirmationDialog","title","message","showConfirmation","lockedFields","isLocked","some","lockedField","storageId","removeFieldFromSelected","useCallback","id","onDelete","setAsTitle","response","error","setAsDescription","setAsImage","fieldPlugin","editorFieldOptionPlugins","plugins","byType","rendererPlugin","renderer","name","canEdit","canEditSettings","defaultInformationRenderer","useMemo","fieldTypeName","fn","displayName","fieldInformationRenderer","renderInfo","info","label","map","pl","React","cloneElement","render","key","memo"],"sources":["Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useMemo } from \"react\";\nimport { css } from \"emotion\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as EditIcon } from \"@material-design-icons/svg/outlined/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"~/admin/icons/title-24px.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"~/admin/icons/more_vert.svg\";\nimport { Menu, MenuItem } from \"@webiny/ui/Menu\";\nimport { plugins } from \"@webiny/plugins\";\nimport { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from \"~/types\";\nimport { ListItemGraphic } from \"@webiny/ui/List\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst FieldContainer = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\"\n});\n\nconst LowerCase = styled.span`\n    text-transform: lowercase;\n`;\n\nconst Info = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    \"> *\": {\n        flex: \"1 100%\",\n        lineHeight: \"150%\"\n    }\n});\n\nconst Actions = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"right\",\n    position: \"relative\",\n    \"> *\": {\n        flex: \"1 100%\"\n    }\n});\n\n/**\n * TODO @sven to give correct values\n */\nconst FieldTypeName = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"column\",\n    textTransform: \"uppercase\",\n    color: \"#938F99\",\n    flex: \"1\",\n    textAlign: \"right\",\n    fontSize: \"14px\",\n    paddingRight: \"10px\"\n});\n\nconst menuStyles = css({\n    width: \"220px\",\n    \".disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst FieldExtra = styled.div`\n    padding: 10px 0 10px;\n\n    :empty {\n        display: none;\n    }\n`;\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    } else if (model.titleFieldId === field.fieldId) {\n        return false;\n    }\n    return true;\n};\nconst isFieldAllowedToBeDescription = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (model.descriptionFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"long-text\";\n};\n\nconst isFieldAllowedToBeImage = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.multipleValues || parent) {\n        return false;\n    } else if (model.imageFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"file\" && field.settings?.imagesOnly;\n};\n\nconst getFieldTypeName = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n): string | null => {\n    if (parent) {\n        return null;\n    }\n    const isTitleField = field.fieldId === model?.titleFieldId && !parent;\n    const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;\n    const isImageField = field.fieldId === model?.imageFieldId && !parent;\n\n    return (\n        [\n            isTitleField ? \"entry title\" : null,\n            isDescriptionField ? \"entry description\" : null,\n            isImageField ? \"entry image\" : null\n        ]\n            .filter(Boolean)\n            .join(\"\") || null\n    );\n};\n\nexport interface FieldProps {\n    field: CmsModelField;\n    onDelete: (field: CmsModelField) => void;\n    onEdit: (field: CmsModelField) => void;\n    parent?: CmsModelField;\n}\n\nconst Field: React.FC<FieldProps> = props => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar } = useSnackbar();\n    const { setData: setModel, data: model } = useModelEditor();\n    const { getFieldPlugin, getFieldRendererPlugin } = useModelFieldEditor();\n\n    const { showConfirmation } = useConfirmationDialog({\n        title: t`Warning - You are trying to delete a locked field!`,\n        message: (\n            <>\n                <p>{t`You are about to delete a field which is used in the data storage`}</p>\n                <p>{t`All data in that field will be lost and there is no going back!`}</p>\n                <p>&nbsp;</p>\n                <p>{t`Are you sure you want to continue?`}</p>\n            </>\n        )\n    });\n    const lockedFields = model?.lockedFields || [];\n    const isLocked = lockedFields.some(lockedField => lockedField.fieldId === field.storageId);\n\n    const removeFieldFromSelected = useCallback(async () => {\n        if (model.titleFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    titleFieldId: null\n                };\n            });\n        } else if (model.descriptionFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    descriptionFieldId: null\n                };\n            });\n        } else if (model.imageFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    imageFieldId: null\n                };\n            });\n        }\n    }, [field.id, setModel, model]);\n\n    const onDelete = useCallback(async () => {\n        if (!isLocked) {\n            await removeFieldFromSelected();\n            props.onDelete(field);\n            return;\n        }\n        showConfirmation(async () => {\n            await removeFieldFromSelected();\n            props.onDelete(field);\n        });\n    }, [field.fieldId, lockedFields]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsDescription = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, descriptionFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Description field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsImage = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, imageFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Image field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const fieldPlugin = getFieldPlugin(field.type);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldPlugin) {\n        return null;\n    }\n\n    const rendererPlugin = getFieldRendererPlugin(field.renderer.name);\n    const canEdit = fieldPlugin.field.canEditSettings !== false;\n\n    const defaultInformationRenderer = useMemo(() => {\n        const fieldTypeName = getFieldTypeName(model, field, parent);\n        const fn = () => {\n            if (!fieldTypeName) {\n                return null;\n            }\n            return <FieldTypeName>{fieldTypeName}</FieldTypeName>;\n        };\n\n        fn.displayName = \"FieldTypeRenderer\";\n\n        return fn;\n    }, [field.id]);\n\n    const fieldInformationRenderer = fieldPlugin.field?.renderInfo;\n\n    const info = [rendererPlugin?.renderer.name, field.multipleValues ? \"multiple values\" : null]\n        .filter(Boolean)\n        .join(\", \");\n\n    return (\n        <Fragment>\n            <FieldContainer>\n                <Info>\n                    <Typography use={\"subtitle1\"}>{field.label}</Typography>\n                    <Typography use={\"caption\"}>\n                        {fieldPlugin.field.label}\n                        {info && <LowerCase> ({info})</LowerCase>}\n                    </Typography>\n                </Info>\n                {fieldInformationRenderer\n                    ? fieldInformationRenderer({ model, field })\n                    : defaultInformationRenderer()}\n                <Actions>\n                    {canEdit ? (\n                        <IconButton\n                            data-testid={\"cms.editor.edit-field\"}\n                            icon={<EditIcon />}\n                            onClick={() => onEdit(field)}\n                        />\n                    ) : null}\n                    <Menu\n                        className={menuStyles}\n                        handle={<IconButton icon={<MoreVerticalIcon />} />}\n                    >\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeTitle(model, field, parent)}\n                            onClick={setAsTitle}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as title`}\n                        </MenuItem>\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeDescription(model, field, parent)}\n                            onClick={setAsDescription}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as description`}\n                        </MenuItem>\n                        <MenuItem\n                            disabled={!isFieldAllowedToBeImage(model, field, parent)}\n                            onClick={setAsImage}\n                        >\n                            <ListItemGraphic>\n                                <Icon icon={<TitleIcon />} />\n                            </ListItemGraphic>\n                            {t`Use as image`}\n                        </MenuItem>\n\n                        <MenuItem onClick={onDelete}>\n                            <ListItemGraphic>\n                                <Icon icon={<DeleteIcon />} />\n                            </ListItemGraphic>\n                            {t`Delete`}\n                        </MenuItem>\n                    </Menu>\n                </Actions>\n            </FieldContainer>\n            <FieldExtra>\n                {fieldPlugin.field.render &&\n                    fieldPlugin.field.render({ field, data: model, setData: setModel })}\n            </FieldExtra>\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAA0D;AAE1D,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,gDAAgD,CAAC;AAEnE,IAAMC,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBC,cAAc,EAAE,eAAe;EAC/BC,UAAU,EAAE;AAChB,CAAC,CAAC;AAEF,IAAMC,SAAS,oBAAGL,eAAM;EAAA;EAAA;AAAA,+BAEvB;AAED,IAAMM,IAAI,oBAAGN,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvB,KAAK,EAAE;IACHK,IAAI,EAAE,QAAQ;IACdC,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAEF,IAAMC,OAAO,oBAAGT,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC1BC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,KAAK;EACpBE,UAAU,EAAE,OAAO;EACnBM,QAAQ,EAAE,UAAU;EACpB,KAAK,EAAE;IACHH,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;;AAEF;AACA;AACA;AACA,IAAMI,aAAa,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAChCC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBU,aAAa,EAAE,WAAW;EAC1BC,KAAK,EAAE,SAAS;EAChBN,IAAI,EAAE,GAAG;EACTO,SAAS,EAAE,OAAO;EAClBC,QAAQ,EAAE,MAAM;EAChBC,YAAY,EAAE;AAClB,CAAC,CAAC;AAEF,IAAMC,UAAU,gBAAG,IAAAC,YAAG,EAAC;EACnBC,KAAK,EAAE,OAAO;EACd,WAAW,EAAE;IACTC,OAAO,EAAE,GAAG;IACZC,aAAa,EAAE;EACnB;AACJ,CAAC,sBAAC;AAEF,IAAMC,UAAU,oBAAGtB,eAAM;EAAA;EAAA;AAAA,+CAMxB;AAED,IAAMuB,sBAAgC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC;AAE3D,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIC,KAAe,EAAEC,KAAoB,EAAEC,MAAsB,EAAK;EAC/F,IAAID,KAAK,CAACE,cAAc,IAAID,MAAM,EAAE;IAChC,OAAO,KAAK;EAChB,CAAC,MAAM,IAAIJ,sBAAsB,CAACM,QAAQ,CAACH,KAAK,CAACI,IAAI,CAAC,KAAK,KAAK,EAAE;IAC9D,OAAO,KAAK;EAChB,CAAC,MAAM,IAAIL,KAAK,CAACM,YAAY,KAAKL,KAAK,CAACM,OAAO,EAAE;IAC7C,OAAO,KAAK;EAChB;EACA,OAAO,IAAI;AACf,CAAC;AACD,IAAMC,6BAA6B,GAAG,SAAhCA,6BAA6B,CAC/BR,KAAe,EACfC,KAAoB,EACpBC,MAAsB,EACrB;EACD,IAAID,KAAK,CAACE,cAAc,IAAID,MAAM,EAAE;IAChC,OAAO,KAAK;EAChB,CAAC,MAAM,IAAIF,KAAK,CAACS,kBAAkB,KAAKR,KAAK,CAACM,OAAO,EAAE;IACnD,OAAO,KAAK;EAChB;EACA,OAAON,KAAK,CAACI,IAAI,KAAK,WAAW;AACrC,CAAC;AAED,IAAMK,uBAAuB,GAAG,SAA1BA,uBAAuB,CAAIV,KAAe,EAAEC,KAAoB,EAAEC,MAAsB,EAAK;EAAA;EAC/F,IAAID,KAAK,CAACE,cAAc,IAAID,MAAM,EAAE;IAChC,OAAO,KAAK;EAChB,CAAC,MAAM,IAAIF,KAAK,CAACW,YAAY,KAAKV,KAAK,CAACM,OAAO,EAAE;IAC7C,OAAO,KAAK;EAChB;EACA,OAAON,KAAK,CAACI,IAAI,KAAK,MAAM,wBAAIJ,KAAK,CAACW,QAAQ,oDAAd,gBAAgBC,UAAU;AAC9D,CAAC;AAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAClBd,KAAe,EACfC,KAAoB,EACpBC,MAAsB,EACN;EAChB,IAAIA,MAAM,EAAE;IACR,OAAO,IAAI;EACf;EACA,IAAMa,YAAY,GAAGd,KAAK,CAACM,OAAO,MAAKP,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEM,YAAY,KAAI,CAACJ,MAAM;EACrE,IAAMc,kBAAkB,GAAGf,KAAK,CAACM,OAAO,MAAKP,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAES,kBAAkB,KAAI,CAACP,MAAM;EACjF,IAAMe,YAAY,GAAGhB,KAAK,CAACM,OAAO,MAAKP,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEW,YAAY,KAAI,CAACT,MAAM;EAErE,OACI,CACIa,YAAY,GAAG,aAAa,GAAG,IAAI,EACnCC,kBAAkB,GAAG,mBAAmB,GAAG,IAAI,EAC/CC,YAAY,GAAG,aAAa,GAAG,IAAI,CACtC,CACIC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI;AAE7B,CAAC;AASD,IAAMC,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EAAA;EACzC,IAAQrB,KAAK,GAAqBqB,KAAK,CAA/BrB,KAAK;IAAEsB,MAAM,GAAaD,KAAK,CAAxBC,MAAM;IAAErB,MAAM,GAAKoB,KAAK,CAAhBpB,MAAM;EAC7B,mBAAyB,IAAAsB,yBAAW,GAAE;IAA9BC,YAAY,gBAAZA,YAAY;EACpB,sBAA2C,IAAAC,qBAAc,GAAE;IAA1CC,QAAQ,mBAAjBC,OAAO;IAAkB5B,KAAK,mBAAX6B,IAAI;EAC/B,2BAAmD,IAAAC,yCAAmB,GAAE;IAAhEC,cAAc,wBAAdA,cAAc;IAAEC,sBAAsB,wBAAtBA,sBAAsB;EAE9C,4BAA6B,IAAAC,+BAAqB,EAAC;MAC/CC,KAAK,EAAE/D,CAAC,qIAAoD;MAC5DgE,OAAO,eACH,yEACI,wCAAIhE,CAAC,uJAAwE,eAC7E,wCAAIA,CAAC,qJAAsE,eAC3E,wCAAG,MAAM,CAAI,eACb,wCAAIA,CAAC,wHAAyC;IAG1D,CAAC,CAAC;IAVMiE,gBAAgB,yBAAhBA,gBAAgB;EAWxB,IAAMC,YAAY,GAAG,CAAArC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEqC,YAAY,KAAI,EAAE;EAC9C,IAAMC,QAAQ,GAAGD,YAAY,CAACE,IAAI,CAAC,UAAAC,WAAW;IAAA,OAAIA,WAAW,CAACjC,OAAO,KAAKN,KAAK,CAACwC,SAAS;EAAA,EAAC;EAE1F,IAAMC,uBAAuB,GAAG,IAAAC,kBAAW,uGAAC;IAAA;MAAA;QAAA;UAAA,MACpC3C,KAAK,CAACM,YAAY,KAAKL,KAAK,CAACM,OAAO;YAAA;YAAA;UAAA;UAAA;UAAA,OAC9BoB,QAAQ,CAAC,UAAAE,IAAI,EAAI;YACnB,mEACOA,IAAI;cACPvB,YAAY,EAAE;YAAI;UAE1B,CAAC,CAAC;QAAA;UAAA;UAAA;QAAA;UAAA,MACKN,KAAK,CAACS,kBAAkB,KAAKR,KAAK,CAACM,OAAO;YAAA;YAAA;UAAA;UAAA;UAAA,OAC3CoB,QAAQ,CAAC,UAAAE,IAAI,EAAI;YACnB,mEACOA,IAAI;cACPpB,kBAAkB,EAAE;YAAI;UAEhC,CAAC,CAAC;QAAA;UAAA;UAAA;QAAA;UAAA,MACKT,KAAK,CAACW,YAAY,KAAKV,KAAK,CAACM,OAAO;YAAA;YAAA;UAAA;UAAA;UAAA,OACrCoB,QAAQ,CAAC,UAAAE,IAAI,EAAI;YACnB,mEACOA,IAAI;cACPlB,YAAY,EAAE;YAAI;UAE1B,CAAC,CAAC;QAAA;QAAA;UAAA;MAAA;IAAA;EAAA,CAET,IAAE,CAACV,KAAK,CAAC2C,EAAE,EAAEjB,QAAQ,EAAE3B,KAAK,CAAC,CAAC;EAE/B,IAAM6C,QAAQ,GAAG,IAAAF,kBAAW,uGAAC;IAAA;MAAA;QAAA;UAAA,IACpBL,QAAQ;YAAA;YAAA;UAAA;UAAA;UAAA,OACHI,uBAAuB,EAAE;QAAA;UAC/BpB,KAAK,CAACuB,QAAQ,CAAC5C,KAAK,CAAC;UAAC;QAAA;UAG1BmC,gBAAgB,sGAAC;YAAA;cAAA;gBAAA;kBAAA;kBAAA,OACPM,uBAAuB,EAAE;gBAAA;kBAC/BpB,KAAK,CAACuB,QAAQ,CAAC5C,KAAK,CAAC;gBAAC;gBAAA;kBAAA;cAAA;YAAA;UAAA,CACzB,GAAC;QAAC;QAAA;UAAA;MAAA;IAAA;EAAA,CACN,IAAE,CAACA,KAAK,CAACM,OAAO,EAAE8B,YAAY,CAAC,CAAC;EAEjC,IAAMS,UAAU,GAAG,IAAAH,kBAAW,uGAAC;IAAA;IAAA;MAAA;QAAA;UAAA;UAAA,OACJhB,QAAQ,CAAC,UAAAE,IAAI,EAAI;YACpC,mEAAYA,IAAI;cAAEvB,YAAY,EAAEL,KAAK,CAACM;YAAO;UACjD,CAAC,CAAC;QAAA;UAFIwC,QAAQ;UAAA,MAIVA,QAAQ,IAAIA,QAAQ,CAACC,KAAK;YAAA;YAAA;UAAA;UAAA,kCACnBvB,YAAY,CAACsB,QAAQ,CAACC,KAAK,CAACb,OAAO,CAAC;QAAA;UAG/CV,YAAY,CAACtD,CAAC,mHAAgC;QAAC;QAAA;UAAA;MAAA;IAAA;EAAA,CAClD,IAAE,CAAC8B,KAAK,CAACM,OAAO,EAAEoB,QAAQ,CAAC,CAAC;EAE7B,IAAMsB,gBAAgB,GAAG,IAAAN,kBAAW,uGAAC;IAAA;IAAA;MAAA;QAAA;UAAA;UAAA,OACVhB,QAAQ,CAAC,UAAAE,IAAI,EAAI;YACpC,mEAAYA,IAAI;cAAEpB,kBAAkB,EAAER,KAAK,CAACM;YAAO;UACvD,CAAC,CAAC;QAAA;UAFIwC,QAAQ;UAAA,MAIVA,QAAQ,IAAIA,QAAQ,CAACC,KAAK;YAAA;YAAA;UAAA;UAAA,kCACnBvB,YAAY,CAACsB,QAAQ,CAACC,KAAK,CAACb,OAAO,CAAC;QAAA;UAG/CV,YAAY,CAACtD,CAAC,yHAAsC;QAAC;QAAA;UAAA;MAAA;IAAA;EAAA,CACxD,IAAE,CAAC8B,KAAK,CAACM,OAAO,EAAEoB,QAAQ,CAAC,CAAC;EAE7B,IAAMuB,UAAU,GAAG,IAAAP,kBAAW,uGAAC;IAAA;IAAA;MAAA;QAAA;UAAA;UAAA,OACJhB,QAAQ,CAAC,UAAAE,IAAI,EAAI;YACpC,mEAAYA,IAAI;cAAElB,YAAY,EAAEV,KAAK,CAACM;YAAO;UACjD,CAAC,CAAC;QAAA;UAFIwC,QAAQ;UAAA,MAIVA,QAAQ,IAAIA,QAAQ,CAACC,KAAK;YAAA;YAAA;UAAA;UAAA,kCACnBvB,YAAY,CAACsB,QAAQ,CAACC,KAAK,CAACb,OAAO,CAAC;QAAA;UAG/CV,YAAY,CAACtD,CAAC,mHAAgC;QAAC;QAAA;UAAA;MAAA;IAAA;EAAA,CAClD,IAAE,CAAC8B,KAAK,CAACM,OAAO,EAAEoB,QAAQ,CAAC,CAAC;EAE7B,IAAMwB,WAAW,GAAGpB,cAAc,CAAC9B,KAAK,CAACI,IAAI,CAAC;EAC9C,IAAM+C,wBAAwB,GAC1BC,gBAAO,CAACC,MAAM,CAA6B,yBAAyB,CAAC;EAEzE,IAAI,CAACH,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,IAAMI,cAAc,GAAGvB,sBAAsB,CAAC/B,KAAK,CAACuD,QAAQ,CAACC,IAAI,CAAC;EAClE,IAAMC,OAAO,GAAGP,WAAW,CAAClD,KAAK,CAAC0D,eAAe,KAAK,KAAK;EAE3D,IAAMC,0BAA0B,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC7C,IAAMC,aAAa,GAAGhD,gBAAgB,CAACd,KAAK,EAAEC,KAAK,EAAEC,MAAM,CAAC;IAC5D,IAAM6D,EAAE,GAAG,SAALA,EAAE,GAAS;MACb,IAAI,CAACD,aAAa,EAAE;QAChB,OAAO,IAAI;MACf;MACA,oBAAO,6BAAC,aAAa,QAAEA,aAAa,CAAiB;IACzD,CAAC;IAEDC,EAAE,CAACC,WAAW,GAAG,mBAAmB;IAEpC,OAAOD,EAAE;EACb,CAAC,EAAE,CAAC9D,KAAK,CAAC2C,EAAE,CAAC,CAAC;EAEd,IAAMqB,wBAAwB,yBAAGd,WAAW,CAAClD,KAAK,uDAAjB,mBAAmBiE,UAAU;EAE9D,IAAMC,IAAI,GAAG,CAACZ,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEC,QAAQ,CAACC,IAAI,EAAExD,KAAK,CAACE,cAAc,GAAG,iBAAiB,GAAG,IAAI,CAAC,CACxFe,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,IAAI,CAAC;EAEf,oBACI,6BAAC,eAAQ,qBACL,6BAAC,cAAc,qBACX,6BAAC,IAAI,qBACD,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAY,GAAEnB,KAAK,CAACmE,KAAK,CAAc,eACxD,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAU,GACtBjB,WAAW,CAAClD,KAAK,CAACmE,KAAK,EACvBD,IAAI,iBAAI,6BAAC,SAAS,QAAC,IAAE,EAACA,IAAI,EAAC,GAAC,CAAY,CAChC,CACV,EACNF,wBAAwB,GACnBA,wBAAwB,CAAC;IAAEjE,KAAK,EAALA,KAAK;IAAEC,KAAK,EAALA;EAAM,CAAC,CAAC,GAC1C2D,0BAA0B,EAAE,eAClC,6BAAC,OAAO,QACHF,OAAO,gBACJ,6BAAC,kBAAU;IACP,eAAa,uBAAwB;IACrC,IAAI,eAAE,6BAAC,oBAAQ,OAAI;IACnB,OAAO,EAAE;MAAA,OAAMnC,MAAM,CAACtB,KAAK,CAAC;IAAA;EAAC,EAC/B,GACF,IAAI,eACR,6BAAC,UAAI;IACD,SAAS,EAAET,UAAW;IACtB,MAAM,eAAE,6BAAC,kBAAU;MAAC,IAAI,eAAE,6BAAC,yBAAgB;IAAI;EAAI,GAElD4D,wBAAwB,CAACiB,GAAG,CAAC,UAAAC,EAAE;IAAA,oBAC5BC,cAAK,CAACC,YAAY,CAACF,EAAE,CAACG,MAAM,EAAE,EAAE;MAAEC,GAAG,EAAEJ,EAAE,CAACb;IAAK,CAAC,CAAC;EAAA,EACpD,eAED,6BAAC,cAAQ;IACL,QAAQ,EAAE,CAAC1D,uBAAuB,CAACC,KAAK,EAAEC,KAAK,EAAEC,MAAM,CAAE;IACzD,OAAO,EAAE4C;EAAW,gBAEpB,6BAAC,qBAAe,qBACZ,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,yBAAS;EAAI,EAAG,CACf,EACjB3E,CAAC,kGACK,eACX,6BAAC,cAAQ;IACL,QAAQ,EAAE,CAACqC,6BAA6B,CAACR,KAAK,EAAEC,KAAK,EAAEC,MAAM,CAAE;IAC/D,OAAO,EAAE+C;EAAiB,gBAE1B,6BAAC,qBAAe,qBACZ,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,yBAAS;EAAI,EAAG,CACf,EACjB9E,CAAC,wGACK,eACX,6BAAC,cAAQ;IACL,QAAQ,EAAE,CAACuC,uBAAuB,CAACV,KAAK,EAAEC,KAAK,EAAEC,MAAM,CAAE;IACzD,OAAO,EAAEgD;EAAW,gBAEpB,6BAAC,qBAAe,qBACZ,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,yBAAS;EAAI,EAAG,CACf,EACjB/E,CAAC,oGACK,eAEX,6BAAC,cAAQ;IAAC,OAAO,EAAE0E;EAAS,gBACxB,6BAAC,qBAAe,qBACZ,6BAAC,UAAI;IAAC,IAAI,eAAE,6BAAC,sBAAU;EAAI,EAAG,CAChB,EACjB1E,CAAC,8FACK,CACR,CACD,CACG,eACjB,6BAAC,UAAU,QACNgF,WAAW,CAAClD,KAAK,CAACwE,MAAM,IACrBtB,WAAW,CAAClD,KAAK,CAACwE,MAAM,CAAC;IAAExE,KAAK,EAALA,KAAK;IAAE4B,IAAI,EAAE7B,KAAK;IAAE4B,OAAO,EAAED;EAAS,CAAC,CAAC,CAC9D,CACN;AAEnB,CAAC;AAAC,4BAEa4C,cAAK,CAACI,IAAI,CAACtD,KAAK,CAAC;AAAA"}
+{"version":3,"file":"admin/components/FieldEditor/Field.js","sources":["../../../../src/admin/components/FieldEditor/Field.tsx"],"sourcesContent":["import React, { Fragment, useCallback, useMemo } from \"react\";\nimport capitalize from \"lodash/capitalize.js\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as TitleIcon } from \"@webiny/icons/title.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { plugins } from \"@webiny/plugins\";\nimport type { CmsModelField, CmsEditorFieldOptionPlugin, CmsModel } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor/useModelFieldEditor.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport { Icon, IconButton, Text, DropdownMenu, Tag } from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/components/editor/field\");\n\nconst allowedTitleFieldTypes: string[] = [\"text\", \"number\"];\n\nconst isFieldAllowedToBeTitle = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (allowedTitleFieldTypes.includes(field.type) === false) {\n        return false;\n    } else if (model.titleFieldId === field.fieldId) {\n        return false;\n    }\n    return true;\n};\nconst isFieldAllowedToBeDescription = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.descriptionFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"long-text\";\n};\n\nconst isFieldAllowedToBeImage = (model: CmsModel, field: CmsModelField, parent?: CmsModelField) => {\n    if (field.list || parent) {\n        return false;\n    } else if (model.imageFieldId === field.fieldId) {\n        return false;\n    }\n    return field.type === \"file\" && field.settings?.imagesOnly;\n};\n\nconst getFieldTypeName = (\n    model: CmsModel,\n    field: CmsModelField,\n    parent?: CmsModelField\n): string | null => {\n    if (parent) {\n        return null;\n    }\n    const isTitleField = field.fieldId === model?.titleFieldId && !parent;\n    const isDescriptionField = field.fieldId === model?.descriptionFieldId && !parent;\n    const isImageField = field.fieldId === model?.imageFieldId && !parent;\n\n    return (\n        [\n            isTitleField ? \"entry title\" : null,\n            isDescriptionField ? \"entry description\" : null,\n            isImageField ? \"entry image\" : null\n        ]\n            .filter(Boolean)\n            .join(\"\") || null\n    );\n};\n\nexport interface FieldProps {\n    field: CmsModelField;\n    onDelete: (field: CmsModelField) => void;\n    onEdit: (field: CmsModelField) => void;\n    parent?: CmsModelField;\n}\n\nconst Field = (props: FieldProps) => {\n    const { field, onEdit, parent } = props;\n    const { showSnackbar, showErrorSnackbar } = useSnackbar();\n    const { setData: setModel, data: model } = useModelEditor();\n    const { getFieldType, getFieldRenderer } = useModelFieldEditor();\n\n    const removeFieldFromSelected = useCallback(async () => {\n        if (model.titleFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    titleFieldId: null\n                };\n            });\n        } else if (model.descriptionFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    descriptionFieldId: null\n                };\n            });\n        } else if (model.imageFieldId === field.fieldId) {\n            await setModel(data => {\n                return {\n                    ...data,\n                    imageFieldId: null\n                };\n            });\n        }\n    }, [field.id, setModel, model]);\n\n    const onDelete = useCallback(async () => {\n        await removeFieldFromSelected();\n        props.onDelete(field);\n        return;\n    }, [field.fieldId]);\n\n    const setAsTitle = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, titleFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Title field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsDescription = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, descriptionFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Description field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const setAsImage = useCallback(async (): Promise<void> => {\n        const response = await setModel(data => {\n            return { ...data, imageFieldId: field.fieldId };\n        });\n\n        if (response && response.error) {\n            return showErrorSnackbar(response.error.message);\n        }\n\n        showSnackbar(t`Image field set successfully.`);\n    }, [field.fieldId, setModel]);\n\n    const fieldType = getFieldType(field);\n    const editorFieldOptionPlugins =\n        plugins.byType<CmsEditorFieldOptionPlugin>(\"cms-editor-field-option\");\n\n    if (!fieldType) {\n        return null;\n    }\n\n    const renderer = getFieldRenderer(field.renderer.name);\n    const canEdit = fieldType.canEditSettings !== false;\n\n    const defaultInformationRenderer = useMemo(() => {\n        const fieldTypeName = getFieldTypeName(model, field, parent);\n        const fn = () => {\n            if (!fieldTypeName) {\n                return null;\n            }\n            return <Tag content={capitalize(fieldTypeName)} variant={\"neutral-light\"} />;\n        };\n\n        fn.displayName = \"FieldTypeRenderer\";\n\n        return fn;\n    }, [field.id]);\n\n    const fieldInformationRenderer = fieldType.renderInfo;\n\n    const info = [renderer?.name, field.list ? \"multiple values\" : null].filter(Boolean).join(\", \");\n\n    return (\n        <Fragment>\n            <div className={\"flex items-center justify-between gap-sm-extra\"}>\n                <div className={\"flex items-center gap-sm-extra flex-1 min-w-0\"}>\n                    <Icon\n                        icon={fieldType.icon}\n                        label={fieldType.label}\n                        size={\"md\"}\n                        color={\"neutral-light\"}\n                    />\n                    <div className={\"flex flex-col gap-xxs min-w-0\"}>\n                        <span\n                            className={\n                                \"text-md font-semibold text-neutral-primary truncate leading-5\"\n                            }\n                        >\n                            {field.label}\n                        </span>\n                        <Text size={\"sm\"} className={\"text-neutral-muted truncate\"}>\n                            {fieldType.label}\n                            {info && <span> / {info}</span>}\n                        </Text>\n                    </div>\n                </div>\n                <div className={\"flex items-center justify-end gap-xs shrink-0\"}>\n                    {fieldInformationRenderer\n                        ? fieldInformationRenderer({ model, field })\n                        : defaultInformationRenderer()}\n                    <DropdownMenu\n                        trigger={\n                            <IconButton icon={<MoreVerticalIcon />} variant={\"ghost\"} size={\"sm\"} />\n                        }\n                    >\n                        {canEdit && (\n                            <DropdownMenu.Item\n                                onClick={() => onEdit(field)}\n                                text={t`Edit`}\n                                icon={\n                                    <DropdownMenu.Item.Icon\n                                        element={<EditIcon />}\n                                        label={t`Edit field`}\n                                    />\n                                }\n                            />\n                        )}\n                        {editorFieldOptionPlugins.map(pl =>\n                            React.cloneElement(pl.render(), { key: pl.name })\n                        )}\n                        {/* We only allow this action for top-level fields. */}\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeTitle(model, field, parent)}\n                            onClick={setAsTitle}\n                            text={t`Use as title`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as title`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeDescription(model, field, parent)}\n                            onClick={setAsDescription}\n                            text={t`Use as description`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as description`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            disabled={!isFieldAllowedToBeImage(model, field, parent)}\n                            onClick={setAsImage}\n                            text={t`Use as image`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<TitleIcon />}\n                                    label={t`Use as image`}\n                                />\n                            }\n                        />\n                        <DropdownMenu.Item\n                            onClick={onDelete}\n                            text={t`Delete`}\n                            icon={\n                                <DropdownMenu.Item.Icon\n                                    element={<DeleteIcon />}\n                                    label={t`Delete`}\n                                />\n                            }\n                            variant={\"destructive\"}\n                        />\n                    </DropdownMenu>\n                </div>\n            </div>\n            {fieldType.renderEditor && (\n                <div className={\"pt-md\"}>{fieldType.renderEditor({ field, model })}</div>\n            )}\n        </Fragment>\n    );\n};\n\nexport default React.memo(Field);\n"],"names":["t","i18n","allowedTitleFieldTypes","isFieldAllowedToBeTitle","model","field","parent","isFieldAllowedToBeDescription","isFieldAllowedToBeImage","getFieldTypeName","isTitleField","isDescriptionField","isImageField","Boolean","Field","props","onEdit","showSnackbar","showErrorSnackbar","useSnackbar","setModel","useModelEditor","getFieldType","getFieldRenderer","useModelFieldEditor","removeFieldFromSelected","useCallback","data","onDelete","setAsTitle","response","setAsDescription","setAsImage","fieldType","editorFieldOptionPlugins","plugins","renderer","canEdit","defaultInformationRenderer","useMemo","fieldTypeName","fn","Tag","capitalize","fieldInformationRenderer","info","Fragment","Icon","Text","DropdownMenu","IconButton","MoreVerticalIcon","EditIcon","pl","React","TitleIcon","DeleteIcon"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,yBAAmC;IAAC;IAAQ;CAAS;AAE3D,MAAMC,0BAA0B,CAACC,OAAiBC,OAAsBC;IACpE,IAAID,MAAM,IAAI,IAAIC,QACd,OAAO;IACJ,IAAIJ,AAAgD,UAAhDA,uBAAuB,QAAQ,CAACG,MAAM,IAAI,GACjD,OAAO;IACJ,IAAID,MAAM,YAAY,KAAKC,MAAM,OAAO,EAC3C,OAAO;IAEX,OAAO;AACX;AACA,MAAME,gCAAgC,CAClCH,OACAC,OACAC;IAEA,IAAID,MAAM,IAAI,IAAIC,QACd,OAAO;IACJ,IAAIF,MAAM,kBAAkB,KAAKC,MAAM,OAAO,EACjD,OAAO;IAEX,OAAOA,AAAe,gBAAfA,MAAM,IAAI;AACrB;AAEA,MAAMG,0BAA0B,CAACJ,OAAiBC,OAAsBC;IACpE,IAAID,MAAM,IAAI,IAAIC,QACd,OAAO;IACJ,IAAIF,MAAM,YAAY,KAAKC,MAAM,OAAO,EAC3C,OAAO;IAEX,OAAOA,AAAe,WAAfA,MAAM,IAAI,IAAeA,MAAM,QAAQ,EAAE;AACpD;AAEA,MAAMI,mBAAmB,CACrBL,OACAC,OACAC;IAEA,IAAIA,QACA,OAAO;IAEX,MAAMI,eAAeL,MAAM,OAAO,KAAKD,OAAO,gBAAgB,CAACE;IAC/D,MAAMK,qBAAqBN,MAAM,OAAO,KAAKD,OAAO,sBAAsB,CAACE;IAC3E,MAAMM,eAAeP,MAAM,OAAO,KAAKD,OAAO,gBAAgB,CAACE;IAE/D,OACI;QACII,eAAe,gBAAgB;QAC/BC,qBAAqB,sBAAsB;QAC3CC,eAAe,gBAAgB;KAClC,CACI,MAAM,CAACC,SACP,IAAI,CAAC,OAAO;AAEzB;AASA,MAAMC,QAAQ,CAACC;IACX,MAAM,EAAEV,KAAK,EAAEW,MAAM,EAAEV,MAAM,EAAE,GAAGS;IAClC,MAAM,EAAEE,YAAY,EAAEC,iBAAiB,EAAE,GAAGC;IAC5C,MAAM,EAAE,SAASC,QAAQ,EAAE,MAAMhB,KAAK,EAAE,GAAGiB;IAC3C,MAAM,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGC;IAE3C,MAAMC,0BAA0BC,YAAY;QACxC,IAAItB,MAAM,YAAY,KAAKC,MAAM,OAAO,EACpC,MAAMe,SAASO,CAAAA,OACJ;gBACH,GAAGA,IAAI;gBACP,cAAc;YAClB;aAED,IAAIvB,MAAM,kBAAkB,KAAKC,MAAM,OAAO,EACjD,MAAMe,SAASO,CAAAA,OACJ;gBACH,GAAGA,IAAI;gBACP,oBAAoB;YACxB;aAED,IAAIvB,MAAM,YAAY,KAAKC,MAAM,OAAO,EAC3C,MAAMe,SAASO,CAAAA,OACJ;gBACH,GAAGA,IAAI;gBACP,cAAc;YAClB;IAGZ,GAAG;QAACtB,MAAM,EAAE;QAAEe;QAAUhB;KAAM;IAE9B,MAAMwB,WAAWF,YAAY;QACzB,MAAMD;QACNV,MAAM,QAAQ,CAACV;IAEnB,GAAG;QAACA,MAAM,OAAO;KAAC;IAElB,MAAMwB,aAAaH,YAAY;QAC3B,MAAMI,WAAW,MAAMV,SAASO,CAAAA,OACrB;gBAAE,GAAGA,IAAI;gBAAE,cAActB,MAAM,OAAO;YAAC;QAGlD,IAAIyB,YAAYA,SAAS,KAAK,EAC1B,OAAOZ,kBAAkBY,SAAS,KAAK,CAAC,OAAO;QAGnDb,aAAajB,CAAC,CAAC,6BAA6B,CAAC;IACjD,GAAG;QAACK,MAAM,OAAO;QAAEe;KAAS;IAE5B,MAAMW,mBAAmBL,YAAY;QACjC,MAAMI,WAAW,MAAMV,SAASO,CAAAA,OACrB;gBAAE,GAAGA,IAAI;gBAAE,oBAAoBtB,MAAM,OAAO;YAAC;QAGxD,IAAIyB,YAAYA,SAAS,KAAK,EAC1B,OAAOZ,kBAAkBY,SAAS,KAAK,CAAC,OAAO;QAGnDb,aAAajB,CAAC,CAAC,mCAAmC,CAAC;IACvD,GAAG;QAACK,MAAM,OAAO;QAAEe;KAAS;IAE5B,MAAMY,aAAaN,YAAY;QAC3B,MAAMI,WAAW,MAAMV,SAASO,CAAAA,OACrB;gBAAE,GAAGA,IAAI;gBAAE,cAActB,MAAM,OAAO;YAAC;QAGlD,IAAIyB,YAAYA,SAAS,KAAK,EAC1B,OAAOZ,kBAAkBY,SAAS,KAAK,CAAC,OAAO;QAGnDb,aAAajB,CAAC,CAAC,6BAA6B,CAAC;IACjD,GAAG;QAACK,MAAM,OAAO;QAAEe;KAAS;IAE5B,MAAMa,YAAYX,aAAajB;IAC/B,MAAM6B,2BACFC,QAAQ,MAAM,CAA6B;IAE/C,IAAI,CAACF,WACD,OAAO;IAGX,MAAMG,WAAWb,iBAAiBlB,MAAM,QAAQ,CAAC,IAAI;IACrD,MAAMgC,UAAUJ,AAA8B,UAA9BA,UAAU,eAAe;IAEzC,MAAMK,6BAA6BC,QAAQ;QACvC,MAAMC,gBAAgB/B,iBAAiBL,OAAOC,OAAOC;QACrD,MAAMmC,KAAK;YACP,IAAI,CAACD,eACD,OAAO;YAEX,OAAO,WAAP,GAAO,oBAACE,KAAGA;gBAAC,SAASC,WAAWH;gBAAgB,SAAS;;QAC7D;QAEAC,GAAG,WAAW,GAAG;QAEjB,OAAOA;IACX,GAAG;QAACpC,MAAM,EAAE;KAAC;IAEb,MAAMuC,2BAA2BX,UAAU,UAAU;IAErD,MAAMY,OAAO;QAACT,UAAU;QAAM/B,MAAM,IAAI,GAAG,oBAAoB;KAAK,CAAC,MAAM,CAACQ,SAAS,IAAI,CAAC;IAE1F,OAAO,WAAP,GACI,oBAACiC,UAAQA,MAAAA,WAAAA,GACL,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,MAAIA;QACD,MAAMd,UAAU,IAAI;QACpB,OAAOA,UAAU,KAAK;QACtB,MAAM;QACN,OAAO;sBAEX,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QACG,WACI;OAGH5B,MAAM,KAAK,iBAEhB,oBAAC2C,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBf,UAAU,KAAK,EACfY,QAAQ,WAARA,GAAQ,oBAAC,cAAK,OAAIA,UAAAA,WAAAA,GAI/B,oBAAC;QAAI,WAAW;OACXD,2BACKA,yBAAyB;QAAExC;QAAOC;IAAM,KACxCiC,8BAAAA,WAAAA,GACN,oBAACW,cAAYA;QACT,uBACI,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,8BAAgBA;YAAK,SAAS;YAAS,MAAM;;OAGnEd,WAAW,WAAXA,GACG,oBAACY,aAAa,IAAI;QACd,SAAS,IAAMjC,OAAOX;QACtB,MAAML,CAAC,CAAC,IAAI,CAAC;QACb,oBACI,oBAACiD,aAAa,IAAI,CAAC,IAAI;YACnB,uBAAS,oBAACG,gBAAQA;YAClB,OAAOpD,CAAC,CAAC,UAAU,CAAC;;QAKnCkC,yBAAyB,GAAG,CAACmB,CAAAA,KAAAA,WAAAA,GAC1BC,MAAAA,YAAkB,CAACD,GAAG,MAAM,IAAI;YAAE,KAAKA,GAAG,IAAI;QAAC,mBAGnD,oBAACJ,aAAa,IAAI;QACd,UAAU,CAAC9C,wBAAwBC,OAAOC,OAAOC;QACjD,SAASuB;QACT,MAAM7B,CAAC,CAAC,YAAY,CAAC;QACrB,oBACI,oBAACiD,aAAa,IAAI,CAAC,IAAI;YACnB,uBAAS,oBAACM,0BAASA;YACnB,OAAOvD,CAAC,CAAC,YAAY,CAAC;;sBAIlC,oBAACiD,aAAa,IAAI;QACd,UAAU,CAAC1C,8BAA8BH,OAAOC,OAAOC;QACvD,SAASyB;QACT,MAAM/B,CAAC,CAAC,kBAAkB,CAAC;QAC3B,oBACI,oBAACiD,aAAa,IAAI,CAAC,IAAI;YACnB,uBAAS,oBAACM,0BAASA;YACnB,OAAOvD,CAAC,CAAC,kBAAkB,CAAC;;sBAIxC,oBAACiD,aAAa,IAAI;QACd,UAAU,CAACzC,wBAAwBJ,OAAOC,OAAOC;QACjD,SAAS0B;QACT,MAAMhC,CAAC,CAAC,YAAY,CAAC;QACrB,oBACI,oBAACiD,aAAa,IAAI,CAAC,IAAI;YACnB,uBAAS,oBAACM,0BAASA;YACnB,OAAOvD,CAAC,CAAC,YAAY,CAAC;;sBAIlC,oBAACiD,aAAa,IAAI;QACd,SAASrB;QACT,MAAM5B,CAAC,CAAC,MAAM,CAAC;QACf,oBACI,oBAACiD,aAAa,IAAI,CAAC,IAAI;YACnB,uBAAS,oBAACO,2BAAUA;YACpB,OAAOxD,CAAC,CAAC,MAAM,CAAC;;QAGxB,SAAS;WAKxBiC,UAAU,YAAY,IAAI,WAAJ,GACnB,oBAAC;QAAI,WAAW;OAAUA,UAAU,YAAY,CAAC;QAAE5B;QAAOD;IAAM;AAIhF;AAEA,wCAAekD,MAAAA,IAAU,CAACxC"}

package/admin/components/FieldEditor/FieldEditor.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CmsModelField, CmsEditorFieldsLayout } from "../../../types";
+import type { CmsEditorFieldsLayout, CmsModelField } from "../../../types.js";
 export interface FieldEditorProps {
     parent?: CmsModelField;
     layout: CmsEditorFieldsLayout;
@@ -9,4 +9,4 @@ export interface FieldEditorProps {
         layout: CmsEditorFieldsLayout;
     }) => void;
 }
-export declare const FieldEditor: React.FC<FieldEditorProps>;
+export declare const FieldEditor: (props: FieldEditorProps) => React.JSX.Element;

package/admin/components/FieldEditor/FieldEditor.js

@@ -1,211 +1,188 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FieldEditor = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _Icon = require("@webiny/ui/Icon");
-var _i18n = require("@webiny/app/i18n");
-var _roundDrag_indicator24px = require("../../icons/round-drag_indicator-24px.svg");
-var _DropZone = require("../DropZone");
-var _Draggable = _interopRequireDefault(require("../Draggable"));
-var _EditFieldDialog = _interopRequireDefault(require("./EditFieldDialog"));
-var _Field = _interopRequireDefault(require("./Field"));
-var _Styled = require("./Styled");
-var _useModelFieldEditor2 = require("./useModelFieldEditor");
-var _FieldEditorContext = require("./FieldEditorContext");
-var _ModelFieldProvider = require("../ModelFieldProvider");
-var _templateObject;
-var t = _i18n.i18n.namespace("app-headless-cms/admin/components/editor");
-var fieldTypes = ["field", "newField"];
-var Editor = function Editor() {
-  var _useModelFieldEditor = (0, _useModelFieldEditor2.useModelFieldEditor)(),
-    parent = _useModelFieldEditor.parent,
-    depth = _useModelFieldEditor.depth,
-    insertField = _useModelFieldEditor.insertField,
-    updateField = _useModelFieldEditor.updateField,
-    deleteField = _useModelFieldEditor.deleteField,
-    fields = _useModelFieldEditor.fields,
-    noConflict = _useModelFieldEditor.noConflict,
-    editField = _useModelFieldEditor.editField,
-    onFieldDrop = _useModelFieldEditor.onFieldDrop,
-    onEndDrag = _useModelFieldEditor.onEndDrag,
-    field = _useModelFieldEditor.field,
-    dropTarget = _useModelFieldEditor.dropTarget,
-    getFieldPlugin = _useModelFieldEditor.getFieldPlugin;
-  var canDropIntoField = function canDropIntoField(field, draggable) {
-    var fieldPlugin = getFieldPlugin(field.type);
-    var canAccept = fieldPlugin.field.canAccept;
-    if (typeof canAccept === "function" && !canAccept(field, draggable)) {
-      return false;
-    }
-    return true;
-  };
-  var isVerticalDropzoneVisible = function isVerticalDropzoneVisible(cb) {
-    return function (item) {
-      var _fieldPlugin$field$al;
-      if (!parent) {
-        return cb(item);
-      }
-      var fieldPlugin = getFieldPlugin(parent.type);
-      var allowLayout = (_fieldPlugin$field$al = fieldPlugin.field.allowLayout) !== null && _fieldPlugin$field$al !== void 0 ? _fieldPlugin$field$al : true;
-      if (!allowLayout) {
-        return false;
-      }
-      if (!canDropIntoField(parent, item)) {
-        return false;
-      }
-      return cb(item);
+import react, { Fragment } from "react";
+import get from "lodash/get.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { ReactComponent } from "@webiny/icons/drag_indicator.svg";
+import { Center, Horizontal, Vertical } from "../DropZone/index.js";
+import Draggable from "../Draggable.js";
+import EditFieldDialog from "./EditFieldDialog.js";
+import Field from "./Field.js";
+import { LayoutCell } from "./LayoutCell.js";
+import { useModelFieldEditor } from "./useModelFieldEditor.js";
+import { FieldEditorProvider } from "./FieldEditorContext.js";
+import { isLayoutField } from "../../../types.js";
+import { ModelFieldProvider } from "../ModelFieldProvider/index.js";
+import { IconButton } from "@webiny/admin-ui";
+const t = i18n.namespace("app-headless-cms/admin/components/editor");
+const fieldTypes = [
+    "field",
+    "newField"
+];
+const Editor = ()=>{
+    const { parent, depth, insertField, updateField, deleteField, fields, noConflict, editField, onFieldDrop, onEndDrag, field, dropTarget, getFieldType, getLayoutFieldType, getField } = useModelFieldEditor();
+    const collectLayoutFieldFields = (layoutField)=>{
+        const lft = getLayoutFieldType(layoutField.type);
+        if (!lft || !lft.collectFields) return [];
+        return lft.collectFields({
+            field: layoutField,
+            getField: (id)=>getField({
+                    id
+                })
+        });
     };
-  };
-  var isHorizontalDropzoneVisible = function isHorizontalDropzoneVisible(cb) {
-    return function (item) {
-      if (!parent) {
-        return cb(item);
-      }
-      if (!canDropIntoField(parent, item)) {
-        return false;
-      }
-      return cb(item);
+    const canDropIntoField = (field, draggable)=>{
+        const ft = getFieldType(field);
+        if (ft && "function" == typeof ft.canAccept && !ft.canAccept(field, draggable)) return false;
+        return true;
     };
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, fields.length === 0 && /*#__PURE__*/_react.default.createElement(_DropZone.Center, {
-    isDroppable: isHorizontalDropzoneVisible(function () {
-      return true;
-    }),
-    onDrop: function onDrop(item) {
-      return onFieldDrop(item, {
-        row: 0,
-        index: 0
-      });
-    }
-  }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Drop your first field here"])))), fields.map(function (row, index) {
-    return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
-      beginDrag: {
-        parent: parent ? parent.fieldId : null,
-        type: "row",
-        fields: row,
-        pos: {
-          row: index
-        }
-      },
-      endDrag: onEndDrag,
-      key: row.map(function (f) {
-        return f.fieldId;
-      }).join(".")
-    }, function (_ref /* RowContainer start - includes drag handle, drop zones and the Row itself. */) {
-      var drag = _ref.drag,
-        isDragging = _ref.isDragging;
-      return /*#__PURE__*/_react.default.createElement(_Styled.RowContainer, {
-        style: {
-          opacity: isDragging ? 0.3 : 1
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _Styled.rowHandle,
-        ref: drag
-      }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-        icon: /*#__PURE__*/_react.default.createElement(_roundDrag_indicator24px.ReactComponent, null)
-      })), /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
-        isVisible: isHorizontalDropzoneVisible(noConflict()),
-        "data-testid": "cms-editor-row-droppable-top-".concat(index),
-        onDrop: function onDrop(item) {
-          return onFieldDrop(item, {
-            row: index,
-            index: null
-          });
-        }
-      }), /*#__PURE__*/_react.default.createElement(_Styled.Row, {
-        "data-testid": "cms.editor.field-row"
-      }, row.map(function (field, fieldIndex) {
-        return /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
-          field: field,
-          key: field.fieldId
-        }, /*#__PURE__*/_react.default.createElement(_Draggable.default, {
-          beginDrag: {
-            parent: parent ? parent.fieldId : null,
-            type: "field",
-            field: field,
-            pos: {
-              row: index,
-              index: fieldIndex
+    const isVerticalDropzoneVisible = (cb)=>(item)=>{
+            if ("newLayoutField" === item.type || "layoutField" === item.type) return false;
+            if (!parent) return cb(item);
+            const parentFieldType = getFieldType(parent);
+            if (parentFieldType) {
+                const allowLayout = parentFieldType.allowLayout ?? true;
+                if (!allowLayout) return false;
             }
-          },
-          endDrag: onEndDrag
-        }, function (_ref2) {
-          var drag = _ref2.drag;
-          return /*#__PURE__*/_react.default.createElement("div", {
-            className: _Styled.fieldContainer,
-            ref: drag
-          }, /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
-            depth: depth,
-            onDrop: function onDrop(item) {
-              return onFieldDrop(item, {
-                row: index,
-                index: fieldIndex
-              });
+            if (!canDropIntoField(parent, item)) return false;
+            return cb(item);
+        };
+    const isHorizontalDropzoneVisible = (cb)=>(item)=>{
+            if (!parent) return cb(item);
+            if (!canDropIntoField(parent, item)) return false;
+            return cb(item);
+        };
+    return /*#__PURE__*/ react.createElement(Fragment, null, 0 === fields.length && /*#__PURE__*/ react.createElement(Center, {
+        isDroppable: isHorizontalDropzoneVisible(()=>true),
+        onDrop: (item)=>onFieldDrop(item, {
+                row: 0,
+                index: 0
+            })
+    }, t`Drop your first field here`), fields.map((row, index)=>{
+        const rowKey = row.map((cell)=>isLayoutField(cell) ? cell.id : cell.fieldId).join(".");
+        return /*#__PURE__*/ react.createElement(Draggable, {
+            beginDrag: {
+                parent: parent ? parent.fieldId : null,
+                type: "row",
+                fields: row.filter((cell)=>!isLayoutField(cell)),
+                pos: {
+                    row: index
+                }
             },
-            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
-            }))
-          }), /*#__PURE__*/_react.default.createElement("div", {
-            className: _Styled.fieldHandle
-          }, /*#__PURE__*/_react.default.createElement(_Field.default, {
-            parent: parent,
-            field: field,
-            onEdit: editField,
-            onDelete: deleteField
-          })), fieldIndex === row.length - 1 && /*#__PURE__*/_react.default.createElement(_DropZone.Vertical, {
-            last: true,
-            depth: depth,
-            isVisible: isVerticalDropzoneVisible(noConflict(function (item) {
-              return fieldTypes.includes(item.type) && (row.length < 4 || (0, _get.default)(item, "pos.row") === index);
-            })),
-            onDrop: function onDrop(item) {
-              return onFieldDrop(item, {
-                row: index,
-                index: fieldIndex + 1
-              });
+            endDrag: onEndDrag,
+            key: rowKey
+        }, ({ drag, isDragging })=>/*#__PURE__*/ react.createElement("div", {
+                className: `group flex flex-column relative mb-sm-extra last-of-type:mb-none ${isDragging ? "opacity-50" : "opacity-100"}`
+            }, /*#__PURE__*/ react.createElement("div", {
+                className: "cursor-grab absolute left-[0] top-1/2 -translate-y-1/2 z-10 invisible group-hover:visible",
+                ref: (element)=>{
+                    drag(element);
+                }
+            }, /*#__PURE__*/ react.createElement(IconButton, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                variant: "secondary",
+                size: "xs"
+            })), /*#__PURE__*/ react.createElement(Horizontal, {
+                isVisible: isHorizontalDropzoneVisible(noConflict()),
+                "data-testid": `cms-editor-row-droppable-top-${index}`,
+                onDrop: (item)=>onFieldDrop(item, {
+                        row: index,
+                        index: null
+                    })
+            }), /*#__PURE__*/ react.createElement("div", {
+                className: "w-full flex justify-between gap-x-sm-extra",
+                "data-testid": "cms.editor.field-row"
+            }, row.map((cell, fieldIndex)=>{
+                if (isLayoutField(cell)) return /*#__PURE__*/ react.createElement(Draggable, {
+                    key: cell.id,
+                    beginDrag: {
+                        parent: parent ? parent.fieldId : null,
+                        type: "layoutField",
+                        layoutField: cell,
+                        fields: collectLayoutFieldFields(cell)
+                    },
+                    endDrag: onEndDrag
+                }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+                        ref: (element)=>{
+                            drag(element);
+                        },
+                        className: "relative flex-1 min-w-0"
+                    }, /*#__PURE__*/ react.createElement("div", {
+                        className: "cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm"
+                    }, /*#__PURE__*/ react.createElement(LayoutCell, {
+                        field: cell,
+                        rowIndex: index,
+                        cellIndex: fieldIndex
+                    }))));
+                const field = cell;
+                return /*#__PURE__*/ react.createElement(ModelFieldProvider, {
+                    field: field,
+                    key: field.fieldId
+                }, /*#__PURE__*/ react.createElement(Draggable, {
+                    beginDrag: {
+                        parent: parent ? parent.fieldId : null,
+                        type: "field",
+                        field,
+                        pos: {
+                            row: index,
+                            index: fieldIndex
+                        }
+                    },
+                    endDrag: onEndDrag
+                }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
+                        className: "relative flex-1 min-w-0",
+                        ref: (element)=>{
+                            drag(element);
+                        }
+                    }, /*#__PURE__*/ react.createElement(Vertical, {
+                        depth: depth,
+                        onDrop: (item)=>onFieldDrop(item, {
+                                row: index,
+                                index: fieldIndex
+                            }),
+                        isVisible: isVerticalDropzoneVisible(noConflict((item)=>fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index)))
+                    }), /*#__PURE__*/ react.createElement("div", {
+                        className: "cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm"
+                    }, /*#__PURE__*/ react.createElement(Field, {
+                        parent: parent,
+                        field: field,
+                        onEdit: editField,
+                        onDelete: deleteField
+                    })), fieldIndex === row.length - 1 && /*#__PURE__*/ react.createElement(Vertical, {
+                        last: true,
+                        depth: depth,
+                        isVisible: isVerticalDropzoneVisible(noConflict((item)=>fieldTypes.includes(item.type) && (row.length < 4 || get(item, "pos.row") === index))),
+                        onDrop: (item)=>onFieldDrop(item, {
+                                row: index,
+                                index: fieldIndex + 1
+                            })
+                    }))));
+            })), index === fields.length - 1 ? /*#__PURE__*/ react.createElement(Horizontal, {
+                "data-testid": `cms-editor-row-droppable-bottom-${index}`,
+                last: true,
+                isVisible: isHorizontalDropzoneVisible(noConflict()),
+                onDrop: (item)=>onFieldDrop(item, {
+                        row: index + 1,
+                        index: null
+                    })
+            }) : null));
+    }), field ? /*#__PURE__*/ react.createElement(ModelFieldProvider, {
+        field: field
+    }, /*#__PURE__*/ react.createElement(EditFieldDialog, {
+        onClose: ()=>editField(null),
+        onSubmit: (field)=>{
+            if (field.id) {
+                updateField(field);
+                editField(null);
+                return;
             }
-          }));
-        }));
-      })), index === fields.length - 1 ? /*#__PURE__*/_react.default.createElement(_DropZone.Horizontal, {
-        "data-testid": "cms-editor-row-droppable-bottom-".concat(index),
-        last: true,
-        isVisible: isHorizontalDropzoneVisible(noConflict()),
-        onDrop: function onDrop(item) {
-          return onFieldDrop(item, {
-            row: index + 1,
-            index: null
-          });
+            insertField({
+                field,
+                position: dropTarget
+            });
+            editField(null);
         }
-      }) : null);
-    });
-  }), field ? /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ModelFieldProvider, {
-    field: field
-  }, /*#__PURE__*/_react.default.createElement(_EditFieldDialog.default, {
-    onClose: function onClose() {
-      return editField(null);
-    },
-    onSubmit: function onSubmit(field) {
-      if (field.id) {
-        updateField(field);
-        editField(null);
-        return;
-      }
-      insertField({
-        field: field,
-        position: dropTarget
-      });
-      editField(null);
-    }
-  })) : null);
-};
-var FieldEditor = function FieldEditor(props) {
-  return /*#__PURE__*/_react.default.createElement(_FieldEditorContext.FieldEditorProvider, props, /*#__PURE__*/_react.default.createElement(Editor, null));
+    })) : null);
 };
-exports.FieldEditor = FieldEditor;
+const FieldEditor = (props)=>/*#__PURE__*/ react.createElement(FieldEditorProvider, props, /*#__PURE__*/ react.createElement(Editor, null));
+export { FieldEditor };
+
+//# sourceMappingURL=FieldEditor.js.map

package/admin/components/FieldEditor/FieldEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","namespace","fieldTypes","Editor","useModelFieldEditor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldPlugin","canDropIntoField","draggable","fieldPlugin","type","canAccept","isVerticalDropzoneVisible","cb","item","allowLayout","isHorizontalDropzoneVisible","length","row","index","map","fieldId","pos","f","join","drag","isDragging","opacity","rowHandle","fieldIndex","fieldContainer","includes","get","fieldHandle","id","position","FieldEditor","props"],"sources":["FieldEditor.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as HandleIcon } from \"~/admin/icons/round-drag_indicator-24px.svg\";\nimport { Center, Vertical, Horizontal } from \"../DropZone\";\nimport Draggable from \"../Draggable\";\nimport EditFieldDialog from \"./EditFieldDialog\";\nimport Field from \"./Field\";\nimport { rowHandle, fieldHandle, fieldContainer, Row, RowContainer } from \"./Styled\";\nimport { useModelFieldEditor } from \"./useModelFieldEditor\";\nimport { DragSource, FieldEditorProvider, IsVisibleCallable } from \"./FieldEditorContext\";\nimport { CmsModelField, CmsEditorFieldsLayout, CmsModelFieldTypePlugin } from \"~/types\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor: React.FC = () => {\n    const {\n        parent,\n        depth,\n        insertField,\n        updateField,\n        deleteField,\n        fields,\n        noConflict,\n        editField,\n        onFieldDrop,\n        onEndDrag,\n        field,\n        dropTarget,\n        getFieldPlugin\n    } = useModelFieldEditor();\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const fieldPlugin = getFieldPlugin(field.type) as CmsModelFieldTypePlugin;\n        const canAccept = fieldPlugin.field.canAccept;\n        if (typeof canAccept === \"function\" && !canAccept(field, draggable)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const isVerticalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            const fieldPlugin = getFieldPlugin(parent.type) as CmsModelFieldTypePlugin;\n            const allowLayout = fieldPlugin.field.allowLayout ?? true;\n            if (!allowLayout) {\n                return false;\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    const isHorizontalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    isDroppable={isHorizontalDropzoneVisible(() => true)}\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => (\n                <Draggable\n                    beginDrag={{\n                        parent: parent ? parent.fieldId : null,\n                        type: \"row\",\n                        fields: row,\n                        pos: { row: index }\n                    }}\n                    endDrag={onEndDrag}\n                    key={row.map(f => f.fieldId).join(\".\")}\n                >\n                    {(\n                        {\n                            drag,\n                            isDragging\n                        } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                    ) => (\n                        <RowContainer style={{ opacity: isDragging ? 0.3 : 1 }}>\n                            <div className={rowHandle} ref={drag}>\n                                <Icon icon={<HandleIcon />} />\n                            </div>\n                            <Horizontal\n                                isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                data-testid={`cms-editor-row-droppable-top-${index}`}\n                                onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                            />\n                            {/* Row start - includes field drop zones and fields */}\n                            <Row data-testid={\"cms.editor.field-row\"}>\n                                {row.map((field, fieldIndex) => (\n                                    <ModelFieldProvider field={field} key={field.fieldId}>\n                                        <Draggable\n                                            beginDrag={{\n                                                parent: parent ? parent.fieldId : null,\n                                                type: \"field\",\n                                                field,\n                                                pos: {\n                                                    row: index,\n                                                    index: fieldIndex\n                                                }\n                                            }}\n                                            endDrag={onEndDrag}\n                                        >\n                                            {({ drag }) => (\n                                                <div className={fieldContainer} ref={drag}>\n                                                    <Vertical\n                                                        depth={depth}\n                                                        onDrop={item =>\n                                                            onFieldDrop(item, {\n                                                                row: index,\n                                                                index: fieldIndex\n                                                            })\n                                                        }\n                                                        isVisible={isVerticalDropzoneVisible(\n                                                            noConflict(\n                                                                item =>\n                                                                    fieldTypes.includes(\n                                                                        item.type\n                                                                    ) &&\n                                                                    (row.length < 4 ||\n                                                                        get(item, \"pos.row\") ===\n                                                                            index)\n                                                            )\n                                                        )}\n                                                    />\n\n                                                    <div className={fieldHandle}>\n                                                        <Field\n                                                            parent={parent}\n                                                            field={field}\n                                                            onEdit={editField}\n                                                            onDelete={deleteField}\n                                                        />\n                                                    </div>\n\n                                                    {/* Field end */}\n                                                    {fieldIndex === row.length - 1 && (\n                                                        <Vertical\n                                                            last\n                                                            depth={depth}\n                                                            isVisible={isVerticalDropzoneVisible(\n                                                                noConflict(item => {\n                                                                    return (\n                                                                        fieldTypes.includes(\n                                                                            item.type\n                                                                        ) &&\n                                                                        (row.length < 4 ||\n                                                                            get(item, \"pos.row\") ===\n                                                                                index)\n                                                                    );\n                                                                })\n                                                            )}\n                                                            onDrop={item =>\n                                                                onFieldDrop(item, {\n                                                                    row: index,\n                                                                    index: fieldIndex + 1\n                                                                })\n                                                            }\n                                                        />\n                                                    )}\n                                                </div>\n                                            )}\n                                        </Draggable>\n                                    </ModelFieldProvider>\n                                ))}\n                            </Row>\n                            {/* Row end */}\n                            {index === fields.length - 1 ? (\n                                <Horizontal\n                                    data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                    last\n                                    isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                    onDrop={item =>\n                                        onFieldDrop(item, {\n                                            row: index + 1,\n                                            index: null\n                                        })\n                                    }\n                                />\n                            ) : null}\n                        </RowContainer>\n                    )}\n                </Draggable>\n            ))}\n\n            {field ? (\n                <ModelFieldProvider field={field}>\n                    <EditFieldDialog\n                        onClose={() => editField(null)}\n                        onSubmit={field => {\n                            if (field.id) {\n                                updateField(field);\n                                editField(null);\n                                return;\n                            }\n                            insertField({ field, position: dropTarget });\n\n                            editField(null);\n                        }}\n                    />\n                </ModelFieldProvider>\n            ) : null}\n        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsModelField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsModelField[];\n    onChange: (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor: React.FC<FieldEditorProps> = props => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"admin/components/FieldEditor/FieldEditor.js","sources":["../../../../src/admin/components/FieldEditor/FieldEditor.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport get from \"lodash/get.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DragIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Center, Horizontal, Vertical } from \"../DropZone/index.js\";\nimport Draggable from \"../Draggable.js\";\nimport EditFieldDialog from \"./EditFieldDialog.js\";\nimport Field from \"./Field.js\";\nimport { LayoutCell } from \"./LayoutCell.js\";\nimport { useModelFieldEditor } from \"./useModelFieldEditor.js\";\nimport type { IsVisibleCallable } from \"./FieldEditorContext.js\";\nimport { FieldEditorProvider } from \"./FieldEditorContext.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField, CmsLayoutField, DragSource } from \"~/types.js\";\nimport { isLayoutField } from \"~/types.js\";\nimport { ModelFieldProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { IconButton } from \"@webiny/admin-ui\";\n\nconst t = i18n.namespace(\"app-headless-cms/admin/components/editor\");\n\nconst fieldTypes: string[] = [\"field\", \"newField\"];\n\nconst Editor = () => {\n    const {\n        parent,\n        depth,\n        insertField,\n        updateField,\n        deleteField,\n        fields,\n        noConflict,\n        editField,\n        onFieldDrop,\n        onEndDrag,\n        field,\n        dropTarget,\n        getFieldType,\n        getLayoutFieldType,\n        getField\n    } = useModelFieldEditor();\n\n    /**\n     * Collect all data fields referenced inside a layout descriptor (e.g. fields inside tabs).\n     * Delegates to the layout field type's `collectFields` method if available.\n     */\n    const collectLayoutFieldFields = (layoutField: CmsLayoutField): CmsModelField[] => {\n        const lft = getLayoutFieldType(layoutField.type);\n        if (!lft || !lft.collectFields) {\n            return [];\n        }\n        return lft.collectFields({\n            field: layoutField,\n            getField: (id: string) => getField({ id })\n        });\n    };\n\n    const canDropIntoField = (field: CmsModelField, draggable: DragSource) => {\n        const ft = getFieldType(field);\n        if (ft && typeof ft.canAccept === \"function\" && !ft.canAccept(field, draggable)) {\n            return false;\n        }\n        return true;\n    };\n\n    const isVerticalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            // Layout fields always occupy full row — no side-by-side layout\n            if (item.type === \"newLayoutField\" || item.type === \"layoutField\") {\n                return false;\n            }\n\n            if (!parent) {\n                return cb(item);\n            }\n\n            const parentFieldType = getFieldType(parent);\n            if (parentFieldType) {\n                const allowLayout = parentFieldType.allowLayout ?? true;\n                if (!allowLayout) {\n                    return false;\n                }\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    const isHorizontalDropzoneVisible = (cb: IsVisibleCallable) => {\n        return (item: DragSource) => {\n            if (!parent) {\n                return cb(item);\n            }\n\n            if (!canDropIntoField(parent, item)) {\n                return false;\n            }\n\n            return cb(item);\n        };\n    };\n\n    return (\n        <Fragment>\n            {fields.length === 0 && (\n                <Center\n                    isDroppable={isHorizontalDropzoneVisible(() => true)}\n                    onDrop={item =>\n                        onFieldDrop(item, {\n                            row: 0,\n                            index: 0\n                        })\n                    }\n                >\n                    {t`Drop your first field here`}\n                </Center>\n            )}\n\n            {fields.map((row, index) => {\n                // Build a stable key for the row\n                const rowKey = row\n                    .map(cell => (isLayoutField(cell) ? cell.id : (cell as CmsModelField).fieldId))\n                    .join(\".\");\n\n                return (\n                    <Draggable\n                        beginDrag={{\n                            parent: parent ? parent.fieldId : null,\n                            type: \"row\",\n                            fields: row.filter(cell => !isLayoutField(cell)) as CmsModelField[],\n                            pos: { row: index }\n                        }}\n                        endDrag={onEndDrag}\n                        key={rowKey}\n                    >\n                        {(\n                            {\n                                drag,\n                                isDragging\n                            } /* RowContainer start - includes drag handle, drop zones and the Row itself. */\n                        ) => (\n                            <div\n                                className={`group flex flex-column relative mb-sm-extra last-of-type:mb-none ${isDragging ? \"opacity-50\" : \"opacity-100\"}`}\n                            >\n                                <div\n                                    className={\n                                        \"cursor-grab absolute left-[0] top-1/2 -translate-y-1/2 z-10 invisible group-hover:visible\"\n                                    }\n                                    ref={element => {\n                                        drag(element);\n                                    }}\n                                >\n                                    <IconButton\n                                        icon={<DragIcon />}\n                                        variant={\"secondary\"}\n                                        size={\"xs\"}\n                                    />\n                                </div>\n                                <Horizontal\n                                    isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                    data-testid={`cms-editor-row-droppable-top-${index}`}\n                                    onDrop={item => onFieldDrop(item, { row: index, index: null })}\n                                />\n                                {/* Row start - includes field drop zones and fields */}\n                                <div\n                                    className={\"w-full flex justify-between gap-x-sm-extra\"}\n                                    data-testid={\"cms.editor.field-row\"}\n                                >\n                                    {row.map((cell, fieldIndex) => {\n                                        if (isLayoutField(cell)) {\n                                            return (\n                                                <Draggable\n                                                    key={cell.id}\n                                                    beginDrag={{\n                                                        parent: parent ? parent.fieldId : null,\n                                                        type: \"layoutField\",\n                                                        layoutField: cell,\n                                                        fields: collectLayoutFieldFields(cell)\n                                                    }}\n                                                    endDrag={onEndDrag}\n                                                >\n                                                    {({ drag }) => (\n                                                        <div\n                                                            ref={element => {\n                                                                drag(element);\n                                                            }}\n                                                            className={\"relative flex-1 min-w-0\"}\n                                                        >\n                                                            <div\n                                                                className={\n                                                                    \"cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm\"\n                                                                }\n                                                            >\n                                                                <LayoutCell\n                                                                    field={cell}\n                                                                    rowIndex={index}\n                                                                    cellIndex={fieldIndex}\n                                                                />\n                                                            </div>\n                                                        </div>\n                                                    )}\n                                                </Draggable>\n                                            );\n                                        }\n\n                                        const field = cell as CmsModelField;\n                                        return (\n                                            <ModelFieldProvider field={field} key={field.fieldId}>\n                                                <Draggable\n                                                    beginDrag={{\n                                                        parent: parent ? parent.fieldId : null,\n                                                        type: \"field\",\n                                                        field,\n                                                        pos: {\n                                                            row: index,\n                                                            index: fieldIndex\n                                                        }\n                                                    }}\n                                                    endDrag={onEndDrag}\n                                                >\n                                                    {({ drag }) => (\n                                                        <div\n                                                            className={\"relative flex-1 min-w-0\"}\n                                                            ref={element => {\n                                                                drag(element);\n                                                            }}\n                                                        >\n                                                            <Vertical\n                                                                depth={depth}\n                                                                onDrop={item =>\n                                                                    onFieldDrop(item, {\n                                                                        row: index,\n                                                                        index: fieldIndex\n                                                                    })\n                                                                }\n                                                                isVisible={isVerticalDropzoneVisible(\n                                                                    noConflict(\n                                                                        item =>\n                                                                            fieldTypes.includes(\n                                                                                item.type\n                                                                            ) &&\n                                                                            (row.length < 4 ||\n                                                                                get(\n                                                                                    item,\n                                                                                    \"pos.row\"\n                                                                                ) === index)\n                                                                    )\n                                                                )}\n                                                            />\n\n                                                            <div\n                                                                className={\n                                                                    \"cursor-grab bg-neutral-base drop-shadow-[0px_1px_2px_rgba(0,0,0,0.05)] rounded-lg pl-md pr-sm py-sm\"\n                                                                }\n                                                            >\n                                                                <Field\n                                                                    parent={parent}\n                                                                    field={field}\n                                                                    onEdit={editField}\n                                                                    onDelete={deleteField}\n                                                                />\n                                                            </div>\n\n                                                            {/* Field end */}\n                                                            {fieldIndex === row.length - 1 && (\n                                                                <Vertical\n                                                                    last\n                                                                    depth={depth}\n                                                                    isVisible={isVerticalDropzoneVisible(\n                                                                        noConflict(item => {\n                                                                            return (\n                                                                                fieldTypes.includes(\n                                                                                    item.type\n                                                                                ) &&\n                                                                                (row.length < 4 ||\n                                                                                    get(\n                                                                                        item,\n                                                                                        \"pos.row\"\n                                                                                    ) === index)\n                                                                            );\n                                                                        })\n                                                                    )}\n                                                                    onDrop={item =>\n                                                                        onFieldDrop(item, {\n                                                                            row: index,\n                                                                            index: fieldIndex + 1\n                                                                        })\n                                                                    }\n                                                                />\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </Draggable>\n                                            </ModelFieldProvider>\n                                        );\n                                    })}\n                                </div>\n                                {/* Row end */}\n                                {index === fields.length - 1 ? (\n                                    <Horizontal\n                                        data-testid={`cms-editor-row-droppable-bottom-${index}`}\n                                        last\n                                        isVisible={isHorizontalDropzoneVisible(noConflict())}\n                                        onDrop={item =>\n                                            onFieldDrop(item, {\n                                                row: index + 1,\n                                                index: null\n                                            })\n                                        }\n                                    />\n                                ) : null}\n                            </div>\n                        )}\n                    </Draggable>\n                );\n            })}\n\n            {field ? (\n                <ModelFieldProvider field={field}>\n                    <EditFieldDialog\n                        onClose={() => editField(null)}\n                        onSubmit={field => {\n                            if (field.id) {\n                                updateField(field);\n                                editField(null);\n                                return;\n                            }\n                            insertField({ field, position: dropTarget });\n\n                            editField(null);\n                        }}\n                    />\n                </ModelFieldProvider>\n            ) : null}\n        </Fragment>\n    );\n};\n\nexport interface FieldEditorProps {\n    parent?: CmsModelField;\n    layout: CmsEditorFieldsLayout;\n    fields: CmsModelField[];\n    onChange: (params: { fields: CmsModelField[]; layout: CmsEditorFieldsLayout }) => void;\n}\n\nexport const FieldEditor = (props: FieldEditorProps) => {\n    return (\n        <FieldEditorProvider {...props}>\n            <Editor />\n        </FieldEditorProvider>\n    );\n};\n"],"names":["t","i18n","fieldTypes","Editor","parent","depth","insertField","updateField","deleteField","fields","noConflict","editField","onFieldDrop","onEndDrag","field","dropTarget","getFieldType","getLayoutFieldType","getField","useModelFieldEditor","collectLayoutFieldFields","layoutField","lft","id","canDropIntoField","draggable","ft","isVerticalDropzoneVisible","cb","item","parentFieldType","allowLayout","isHorizontalDropzoneVisible","Fragment","Center","row","index","rowKey","cell","isLayoutField","Draggable","drag","isDragging","element","IconButton","DragIcon","Horizontal","fieldIndex","LayoutCell","ModelFieldProvider","Vertical","get","Field","EditFieldDialog","FieldEditor","props","FieldEditorProvider"],"mappings":"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"}