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

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

@@ -1 +1 @@
-{"version":3,"names":["GeneralTab","field","form","fieldPlugin","Bind","setValue","inputRef","useRef","useContentModelEditor","contentModel","data","useFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","beforeChangeFieldId","baseOnChange","newValue","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { CmsEditorField, CmsEditorFieldTypePlugin } from \"~/types\";\nimport { FormRenderPropParams } from \"@webiny/form/types\";\n\nimport { useFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useContentModelEditor } from \"~/admin/components/ContentModelEditor/useContentModelEditor\";\n\ninterface GeneralTabProps {\n    field: CmsEditorField;\n    form: FormRenderPropParams;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n}\n\nconst GeneralTab: React.FC<GeneralTabProps> = ({ field, form, fieldPlugin }) => {\n    const { Bind, setValue } = form;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useContentModelEditor();\n    const { getField } = useFieldEditor();\n\n    // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, 200);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            const newValue = value.trim();\n\n            baseOnChange(newValue);\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback(fieldId => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            form,\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            fieldPlugin.field.allowPredefinedValues &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={6}>\n                    <Bind name={\"multipleValues\"}>\n                        <Switch\n                            label={fieldPlugin.field.multipleValuesLabel}\n                            disabled={!fieldPlugin.field.allowMultipleValues}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={12}>\n                    <Bind name={\"helpText\"}>\n                        <Input\n                            label={\"Help text\"}\n                            description={\"Help text (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.helptext`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}
+{"version":3,"names":["GeneralTab","form","useForm","useModelField","field","fieldPlugin","inputRef","useRef","useModelEditor","contentModel","data","useModelFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { useModelField } from \"~/admin/hooks\";\n\nconst GeneralTab = () => {\n    const form = useForm();\n    const { field, fieldPlugin } = useModelField();\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const { data: contentModel } = useModelEditor();\n    const { getField } = useModelFieldEditor();\n\n    // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n    // 1. It's probably caused by the Tabs component which wraps this component.\n    // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n    // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n    //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n    //    it seems it's behaving correctly. ¯\\_(ツ)_/¯\n    useEffect(() => {\n        setTimeout(() => {\n            if (!inputRef.current) {\n                return;\n            }\n            inputRef.current.focus();\n        }, /* The value of 400 was determined by manual testing. */ 400);\n    }, []);\n\n    const afterChangeLabel = useCallback((value: string) => {\n        form.setValue(\"fieldId\", camelCase(value));\n    }, []);\n\n    const beforeChangeFieldId = useCallback(\n        (value: string, baseOnChange: (value: string) => void) => {\n            baseOnChange(value.trim());\n        },\n        []\n    );\n\n    const fieldIdValidator = useCallback(fieldId => {\n        if (fieldId.trim().toLowerCase() !== \"id\") {\n            return true;\n        }\n\n        throw new Error(`Cannot use \"id\" as Field ID.`);\n    }, []);\n\n    const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n        const existingField = getField({ fieldId });\n        if (!existingField) {\n            return false;\n        }\n\n        if (existingField.id === field.id) {\n            return true;\n        }\n        throw new Error(\"Please enter a unique Field ID.\");\n    }, []);\n\n    let additionalSettings: React.ReactNode | null = null;\n    if (typeof fieldPlugin.field.renderSettings === \"function\") {\n        additionalSettings = fieldPlugin.field.renderSettings({\n            afterChangeLabel,\n            uniqueFieldIdValidator,\n            contentModel\n        });\n    }\n\n    const predefinedValuesEnabled = useMemo(\n        (): boolean =>\n            fieldPlugin.field.allowPredefinedValues &&\n            typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n        [field.fieldId]\n    );\n\n    return (\n        <>\n            <Grid>\n                <Cell span={6}>\n                    <Bind\n                        name={\"label\"}\n                        validators={validation.create(\"required\")}\n                        afterChange={(value: string) => {\n                            if (field.id) {\n                                return;\n                            }\n                            afterChangeLabel(value);\n                        }}\n                    >\n                        <Input\n                            label={\"Label\"}\n                            inputRef={inputRef}\n                            data-testid=\"cms.editor.field.settings.general.label\"\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind\n                        name={\"fieldId\"}\n                        validators={[\n                            validation.create(\"required\"),\n                            uniqueFieldIdValidator,\n                            fieldIdValidator\n                        ]}\n                        beforeChange={beforeChangeFieldId}\n                    >\n                        <Input\n                            label={\"Field ID\"}\n                            data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={6}>\n                    <Bind name={\"multipleValues\"}>\n                        <Switch\n                            label={fieldPlugin.field.multipleValuesLabel}\n                            disabled={!fieldPlugin.field.allowMultipleValues}\n                            data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={6}>\n                    <Bind name={\"predefinedValues.enabled\"}>\n                        <Switch\n                            label={\"Use predefined values\"}\n                            disabled={!predefinedValuesEnabled}\n                            data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n                        />\n                    </Bind>\n                </Cell>\n\n                <Cell span={12}>\n                    <Bind name={\"helpText\"}>\n                        <Input\n                            label={\"Help text\"}\n                            description={\"Help text (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.helptext`}\n                        />\n                    </Bind>\n                </Cell>\n                <Cell span={12}>\n                    <Bind name={\"tags\"}>\n                        <Tags\n                            label={\"Tags\"}\n                            protectedTags={fieldPlugin.field.tags}\n                            description={\"Field tags (optional)\"}\n                            data-testid={`cms.editor.field.settings.general.tags`}\n                        />\n                    </Bind>\n                </Cell>\n            </Grid>\n            {additionalSettings}\n        </>\n    );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}

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

@@ -1,10 +1,3 @@
-import React from "react";
-import { CmsEditorField, CmsEditorFieldTypePlugin } from "../../../../types";
-import { FormRenderPropParams } from "@webiny/form";
-export interface PredefinedValuesProps {
-    field: CmsEditorField;
-    fieldPlugin: CmsEditorFieldTypePlugin;
-    form: FormRenderPropParams;
-}
-declare const PredefinedValues: React.FC<PredefinedValuesProps>;
+/// <reference types="react" />
+declare const PredefinedValues: () => JSX.Element;
 export default PredefinedValues;

package/admin/components/FieldEditor/EditFieldDialog/PredefinedValues.js

@@ -21,12 +21,16 @@ var _getValue = _interopRequireDefault(require("./functions/getValue"));
 
 var _setValue = _interopRequireDefault(require("./functions/setValue"));
 
-var PredefinedValues = function PredefinedValues(_ref) {
-  var field = _ref.field,
-      fieldPlugin = _ref.fieldPlugin,
-      form = _ref.form;
+var _form = require("@webiny/form");
+
+var _hooks = require("../../../hooks");
+
+var PredefinedValues = function PredefinedValues() {
+  var _useModelField = (0, _hooks.useModelField)(),
+      field = _useModelField.field,
+      fieldPlugin = _useModelField.fieldPlugin;
+
   var memoizedBindComponents = (0, _react.useRef)({});
-  var BaseFormBind = form.Bind;
   var getBind = (0, _react.useCallback)(function () {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
     var memoKey = index;
@@ -35,10 +39,10 @@ var PredefinedValues = function PredefinedValues(_ref) {
       return memoizedBindComponents.current[memoKey];
     }
 
-    var Bind = function Bind(_ref2) {
-      var children = _ref2.children,
-          name = _ref2.name;
-      return /*#__PURE__*/_react.default.createElement(BaseFormBind, {
+    var Bind = function Bind(_ref) {
+      var children = _ref.children,
+          name = _ref.name;
+      return /*#__PURE__*/_react.default.createElement(_form.Bind, {
         name: "predefinedValues.values"
       }, function (bind) {
         var props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bind), {}, {
@@ -94,9 +98,7 @@ var PredefinedValues = function PredefinedValues(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldPlugin.field.renderPredefinedValues({
-    field: field,
-    getBind: getBind,
-    form: form
+    getBind: getBind
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"names":["PredefinedValues","field","fieldPlugin","form","memoizedBindComponents","useRef","BaseFormBind","Bind","getBind","useCallback","index","memoKey","current","children","name","bind","props","value","getValue","onChange","setValue","cloneElement","renderPredefinedValues","type"],"sources":["PredefinedValues.tsx"],"sourcesContent":["import React, { useCallback, useRef, cloneElement } from \"react\";\nimport getValue from \"./functions/getValue\";\nimport setValue from \"./functions/setValue\";\nimport { CmsEditorField, CmsEditorFieldTypePlugin } from \"~/types\";\nimport { BindComponent, FormRenderPropParams } from \"@webiny/form\";\n\nexport interface PredefinedValuesProps {\n    field: CmsEditorField;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n    form: FormRenderPropParams;\n}\ninterface MemoizedBindComponents {\n    [key: string]: BindComponent;\n}\n\nconst PredefinedValues: React.FC<PredefinedValuesProps> = ({ field, fieldPlugin, form }) => {\n    const memoizedBindComponents = useRef<MemoizedBindComponents>({});\n    const { Bind: BaseFormBind } = form;\n\n    const getBind = useCallback((index = -1) => {\n        const memoKey = index;\n        if (memoizedBindComponents.current[memoKey]) {\n            return memoizedBindComponents.current[memoKey];\n        }\n\n        const Bind: BindComponent = ({ children, name }) => {\n            return (\n                <BaseFormBind name={\"predefinedValues.values\"}>\n                    {bind => {\n                        const props = {\n                            ...bind,\n                            value: getValue({ bind, index, name }),\n                            onChange: async (value: string[]) => {\n                                await setValue({ value, bind, index, name });\n                            }\n                        };\n\n                        if (typeof children === \"function\") {\n                            return children(props);\n                        }\n\n                        return cloneElement(children as unknown as React.ReactElement, props);\n                    }}\n                </BaseFormBind>\n            );\n        };\n\n        memoizedBindComponents.current[memoKey] = Bind;\n\n        return memoizedBindComponents.current[memoKey];\n    }, []);\n    if (!fieldPlugin.field.renderPredefinedValues) {\n        return (\n            <>{`Missing \"field.renderPredefinedValues\" method in field type plugin: \"${field.type}\".`}</>\n        );\n    }\n\n    return <>{fieldPlugin.field.renderPredefinedValues({ field, getBind, form })}</>;\n};\n\nexport default PredefinedValues;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAaA,IAAMA,gBAAiD,GAAG,SAApDA,gBAAoD,OAAkC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,WAAwB,QAAxBA,WAAwB;EAAA,IAAXC,IAAW,QAAXA,IAAW;EACxF,IAAMC,sBAAsB,GAAG,IAAAC,aAAA,EAA+B,EAA/B,CAA/B;EACA,IAAcC,YAAd,GAA+BH,IAA/B,CAAQI,IAAR;EAEA,IAAMC,OAAO,GAAG,IAAAC,kBAAA,EAAY,YAAgB;IAAA,IAAfC,KAAe,uEAAP,CAAC,CAAM;IACxC,IAAMC,OAAO,GAAGD,KAAhB;;IACA,IAAIN,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,CAAJ,EAA6C;MACzC,OAAOP,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,CAAP;IACH;;IAED,IAAMJ,IAAmB,GAAG,SAAtBA,IAAsB,QAAwB;MAAA,IAArBM,QAAqB,SAArBA,QAAqB;MAAA,IAAXC,IAAW,SAAXA,IAAW;MAChD,oBACI,6BAAC,YAAD;QAAc,IAAI,EAAE;MAApB,GACK,UAAAC,IAAI,EAAI;QACL,IAAMC,KAAK,+DACJD,IADI;UAEPE,KAAK,EAAE,IAAAC,iBAAA,EAAS;YAAEH,IAAI,EAAJA,IAAF;YAAQL,KAAK,EAALA,KAAR;YAAeI,IAAI,EAAJA;UAAf,CAAT,CAFA;UAGPK,QAAQ;YAAA,uGAAE,iBAAOF,KAAP;cAAA;gBAAA;kBAAA;oBAAA;sBAAA;sBAAA,OACA,IAAAG,iBAAA,EAAS;wBAAEH,KAAK,EAALA,KAAF;wBAASF,IAAI,EAAJA,IAAT;wBAAeL,KAAK,EAALA,KAAf;wBAAsBI,IAAI,EAAJA;sBAAtB,CAAT,CADA;;oBAAA;oBAAA;sBAAA;kBAAA;gBAAA;cAAA;YAAA,CAAF;;YAAA;cAAA;YAAA;;YAAA;UAAA;QAHD,EAAX;;QAQA,IAAI,OAAOD,QAAP,KAAoB,UAAxB,EAAoC;UAChC,OAAOA,QAAQ,CAACG,KAAD,CAAf;QACH;;QAED,oBAAO,IAAAK,mBAAA,EAAaR,QAAb,EAAwDG,KAAxD,CAAP;MACH,CAfL,CADJ;IAmBH,CApBD;;IAsBAZ,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,IAA0CJ,IAA1C;IAEA,OAAOH,sBAAsB,CAACQ,OAAvB,CAA+BD,OAA/B,CAAP;EACH,CA/Be,EA+Bb,EA/Ba,CAAhB;;EAgCA,IAAI,CAACT,WAAW,CAACD,KAAZ,CAAkBqB,sBAAvB,EAA+C;IAC3C,oBACI,8IAA2ErB,KAAK,CAACsB,IAAjF,SADJ;EAGH;;EAED,oBAAO,4DAAGrB,WAAW,CAACD,KAAZ,CAAkBqB,sBAAlB,CAAyC;IAAErB,KAAK,EAALA,KAAF;IAASO,OAAO,EAAPA,OAAT;IAAkBL,IAAI,EAAJA;EAAlB,CAAzC,CAAH,CAAP;AACH,CA3CD;;eA6CeH,gB"}
+{"version":3,"names":["PredefinedValues","useModelField","field","fieldPlugin","memoizedBindComponents","useRef","getBind","useCallback","index","memoKey","current","Bind","children","name","bind","props","value","getValue","onChange","setValue","cloneElement","renderPredefinedValues","type"],"sources":["PredefinedValues.tsx"],"sourcesContent":["import React, { useCallback, useRef, cloneElement } from \"react\";\nimport getValue from \"./functions/getValue\";\nimport setValue from \"./functions/setValue\";\nimport { BindComponent, Bind as BaseFormBind } from \"@webiny/form\";\nimport { useModelField } from \"~/admin/hooks\";\n\ninterface MemoizedBindComponents {\n    [key: string]: BindComponent;\n}\n\nconst PredefinedValues = () => {\n    const { field, fieldPlugin } = useModelField();\n    const memoizedBindComponents = useRef<MemoizedBindComponents>({});\n\n    const getBind = useCallback((index = -1) => {\n        const memoKey = index;\n        if (memoizedBindComponents.current[memoKey]) {\n            return memoizedBindComponents.current[memoKey];\n        }\n\n        const Bind: BindComponent = ({ children, name }) => {\n            return (\n                <BaseFormBind name={\"predefinedValues.values\"}>\n                    {bind => {\n                        const props = {\n                            ...bind,\n                            value: getValue({ bind, index, name }),\n                            onChange: async (value: string[]) => {\n                                await setValue({ value, bind, index, name });\n                            }\n                        };\n\n                        if (typeof children === \"function\") {\n                            return children(props);\n                        }\n\n                        return cloneElement(children as unknown as React.ReactElement, props);\n                    }}\n                </BaseFormBind>\n            );\n        };\n\n        memoizedBindComponents.current[memoKey] = Bind;\n\n        return memoizedBindComponents.current[memoKey];\n    }, []);\n    if (!fieldPlugin.field.renderPredefinedValues) {\n        return (\n            <>{`Missing \"field.renderPredefinedValues\" method in field type plugin: \"${field.type}\".`}</>\n        );\n    }\n\n    return <>{fieldPlugin.field.renderPredefinedValues({ getBind })}</>;\n};\n\nexport default PredefinedValues;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAMA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAM;EAC3B,qBAA+B,IAAAC,oBAAA,GAA/B;EAAA,IAAQC,KAAR,kBAAQA,KAAR;EAAA,IAAeC,WAAf,kBAAeA,WAAf;;EACA,IAAMC,sBAAsB,GAAG,IAAAC,aAAA,EAA+B,EAA/B,CAA/B;EAEA,IAAMC,OAAO,GAAG,IAAAC,kBAAA,EAAY,YAAgB;IAAA,IAAfC,KAAe,uEAAP,CAAC,CAAM;IACxC,IAAMC,OAAO,GAAGD,KAAhB;;IACA,IAAIJ,sBAAsB,CAACM,OAAvB,CAA+BD,OAA/B,CAAJ,EAA6C;MACzC,OAAOL,sBAAsB,CAACM,OAAvB,CAA+BD,OAA/B,CAAP;IACH;;IAED,IAAME,IAAmB,GAAG,SAAtBA,IAAsB,OAAwB;MAAA,IAArBC,QAAqB,QAArBA,QAAqB;MAAA,IAAXC,IAAW,QAAXA,IAAW;MAChD,oBACI,6BAAC,UAAD;QAAc,IAAI,EAAE;MAApB,GACK,UAAAC,IAAI,EAAI;QACL,IAAMC,KAAK,+DACJD,IADI;UAEPE,KAAK,EAAE,IAAAC,iBAAA,EAAS;YAAEH,IAAI,EAAJA,IAAF;YAAQN,KAAK,EAALA,KAAR;YAAeK,IAAI,EAAJA;UAAf,CAAT,CAFA;UAGPK,QAAQ;YAAA,uGAAE,iBAAOF,KAAP;cAAA;gBAAA;kBAAA;oBAAA;sBAAA;sBAAA,OACA,IAAAG,iBAAA,EAAS;wBAAEH,KAAK,EAALA,KAAF;wBAASF,IAAI,EAAJA,IAAT;wBAAeN,KAAK,EAALA,KAAf;wBAAsBK,IAAI,EAAJA;sBAAtB,CAAT,CADA;;oBAAA;oBAAA;sBAAA;kBAAA;gBAAA;cAAA;YAAA,CAAF;;YAAA;cAAA;YAAA;;YAAA;UAAA;QAHD,EAAX;;QAQA,IAAI,OAAOD,QAAP,KAAoB,UAAxB,EAAoC;UAChC,OAAOA,QAAQ,CAACG,KAAD,CAAf;QACH;;QAED,oBAAO,IAAAK,mBAAA,EAAaR,QAAb,EAAwDG,KAAxD,CAAP;MACH,CAfL,CADJ;IAmBH,CApBD;;IAsBAX,sBAAsB,CAACM,OAAvB,CAA+BD,OAA/B,IAA0CE,IAA1C;IAEA,OAAOP,sBAAsB,CAACM,OAAvB,CAA+BD,OAA/B,CAAP;EACH,CA/Be,EA+Bb,EA/Ba,CAAhB;;EAgCA,IAAI,CAACN,WAAW,CAACD,KAAZ,CAAkBmB,sBAAvB,EAA+C;IAC3C,oBACI,8IAA2EnB,KAAK,CAACoB,IAAjF,SADJ;EAGH;;EAED,oBAAO,4DAAGnB,WAAW,CAACD,KAAZ,CAAkBmB,sBAAlB,CAAyC;IAAEf,OAAO,EAAPA;EAAF,CAAzC,CAAH,CAAP;AACH,CA3CD;;eA6CeN,gB"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CmsModelFieldValidatorConfigAdapter } from "../../../../utils/CmsModelFieldValidatorConfigAdapter";
+interface ValidatorsSectionProps {
+    title: string;
+    fieldKey: "validators" | "listValidators";
+    description: string;
+    validators: CmsModelFieldValidatorConfigAdapter[];
+}
+export declare const ValidationsSection: ({ title, description, fieldKey, validators }: ValidatorsSectionProps) => JSX.Element;
+export {};

package/admin/components/FieldEditor/EditFieldDialog/ValidationsSection.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidationsSection = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _ValidatorsList = require("./ValidatorsList");
+
+var bindTo = {
+  validators: "validation",
+  listValidators: "listValidation"
+};
+
+var ValidationsSection = function ValidationsSection(_ref) {
+  var title = _ref.title,
+      description = _ref.description,
+      fieldKey = _ref.fieldKey,
+      validators = _ref.validators;
+  return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 12
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "headline5"
+  }, title), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body2"
+  }, description)), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+    span: 12
+  }, /*#__PURE__*/_react.default.createElement(_ValidatorsList.ValidatorsList, {
+    name: bindTo[fieldKey],
+    validators: validators
+  })));
+};
+
+exports.ValidationsSection = ValidationsSection;

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

@@ -0,0 +1 @@
+{"version":3,"names":["bindTo","validators","listValidators","ValidationsSection","title","description","fieldKey"],"sources":["ValidationsSection.tsx"],"sourcesContent":["import React from \"react\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ValidatorsList } from \"./ValidatorsList\";\nimport { CmsModelFieldValidatorConfigAdapter } from \"~/utils/CmsModelFieldValidatorConfigAdapter\";\n\ninterface ValidatorsSectionProps {\n    title: string;\n    fieldKey: \"validators\" | \"listValidators\";\n    description: string;\n    validators: CmsModelFieldValidatorConfigAdapter[];\n}\n\nconst bindTo = {\n    validators: \"validation\",\n    listValidators: \"listValidation\"\n};\n\nexport const ValidationsSection = ({\n    title,\n    description,\n    fieldKey,\n    validators\n}: ValidatorsSectionProps) => {\n    return (\n        <Grid>\n            <Cell span={12}>\n                <Typography use={\"headline5\"}>{title}</Typography>\n                <br />\n                <Typography use={\"body2\"}>{description}</Typography>\n            </Cell>\n            <Cell span={12}>\n                <ValidatorsList name={bindTo[fieldKey]} validators={validators} />\n            </Cell>\n        </Grid>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA,IAAMA,MAAM,GAAG;EACXC,UAAU,EAAE,YADD;EAEXC,cAAc,EAAE;AAFL,CAAf;;AAKO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,OAKJ;EAAA,IAJ1BC,KAI0B,QAJ1BA,KAI0B;EAAA,IAH1BC,WAG0B,QAH1BA,WAG0B;EAAA,IAF1BC,QAE0B,QAF1BA,QAE0B;EAAA,IAD1BL,UAC0B,QAD1BA,UAC0B;EAC1B,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;EAAZ,gBACI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA+BG,KAA/B,CADJ,eAEI,wCAFJ,eAGI,6BAAC,sBAAD;IAAY,GAAG,EAAE;EAAjB,GAA2BC,WAA3B,CAHJ,CADJ,eAMI,6BAAC,UAAD;IAAM,IAAI,EAAE;EAAZ,gBACI,6BAAC,8BAAD;IAAgB,IAAI,EAAEL,MAAM,CAACM,QAAD,CAA5B;IAAwC,UAAU,EAAEL;EAApD,EADJ,CANJ,CADJ;AAYH,CAlBM"}

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { CmsModelFieldValidatorConfigAdapter } from "../../../../utils/CmsModelFieldValidatorConfigAdapter";
+interface ValidatorsTabProps {
+    name: string;
+    validators: CmsModelFieldValidatorConfigAdapter[];
+}
+export declare const ValidatorsList: React.FC<ValidatorsTabProps>;
+export {};

package/admin/components/FieldEditor/EditFieldDialog/ValidatorsList.js

@@ -0,0 +1,227 @@
+"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.ValidatorsList = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+
+var _cloneDeep2 = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _emotion = require("emotion");
+
+var _plugins = require("@webiny/plugins");
+
+var _Switch = require("@webiny/ui/Switch");
+
+var _form = require("@webiny/form");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _validation = require("@webiny/validation");
+
+var _Input = require("@webiny/ui/Input");
+
+var _Accordion = require("@webiny/ui/Accordion");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Tooltip = require("@webiny/ui/Tooltip");
+
+var Variable = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "Variable",
+  target: "e19f04zm0"
+})("font-weight:bold;cursor:pointer;");
+var Comma = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "Comma",
+  target: "e19f04zm1"
+})("padding-right:5px;");
+var noPadding = /*#__PURE__*/(0, _emotion.css)(".webiny-ui-accordion-item__content{padding:0 !important;}label:noPadding;");
+var gridBottomPadding = /*#__PURE__*/(0, _emotion.css)(":not(:last-child){padding-bottom:0;}label:gridBottomPadding;");
+
+var onEnabledChange = function onEnabledChange(params) {
+  var data = params.data,
+      validationValue = params.validationValue,
+      onChangeValidation = params.onChangeValidation,
+      validator = params.validator;
+
+  if (data) {
+    var index = validationValue.findIndex(function (item) {
+      return item.name === validator.getName();
+    });
+    onChangeValidation([].concat((0, _toConsumableArray2.default)(validationValue.slice(0, index)), (0, _toConsumableArray2.default)(validationValue.slice(index + 1))));
+    return;
+  }
+
+  onChangeValidation([].concat((0, _toConsumableArray2.default)(validationValue), [{
+    name: validator.getName(),
+    settings: validator.getDefaultSettings(),
+    message: validator.getDefaultMessage()
+  }]));
+};
+
+var onFormChange = (0, _debounce2.default)(function (_ref) {
+  var data = _ref.data,
+      validationValue = _ref.validationValue,
+      onChangeValidation = _ref.onChangeValidation,
+      validatorIndex = _ref.validatorIndex;
+  var newValidationValue = (0, _cloneDeep2.default)(validationValue);
+  newValidationValue[validatorIndex] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, newValidationValue[validatorIndex]), (0, _cloneDeep2.default)(data));
+  onChangeValidation(newValidationValue);
+}, 200);
+
+var renderEmpty = function renderEmpty() {
+  return null;
+};
+
+var getValidatorPlugin = function getValidatorPlugin(name) {
+  var plugin = _plugins.plugins.byType("cms-model-field-validator").find(function (plugin) {
+    return plugin.validator.name === name;
+  });
+
+  if (!plugin) {
+    return null;
+  }
+
+  return plugin.validator;
+};
+
+var ValidatorItem = function ValidatorItem(_ref2) {
+  var validator = _ref2.validator,
+      value = _ref2.value,
+      _onChange = _ref2.onChange;
+  var validatorName = validator.getName();
+  var plugin = getValidatorPlugin(validatorName);
+
+  if (!plugin) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  var validatorIndex = (value || []).findIndex(function (item) {
+    return item.name === validatorName;
+  });
+  var data = (value || [])[validatorIndex];
+
+  if (typeof plugin.renderCustomUi === "function") {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: validatorName
+    }, plugin.renderCustomUi());
+  }
+
+  var renderSettings = plugin.renderSettings || renderEmpty;
+  var actions = !validator.isRequired() ? /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem.Actions, null, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
+    label: "Enabled",
+    value: validatorIndex >= 0,
+    onChange: function onChange() {
+      return onEnabledChange({
+        data: data,
+        validationValue: value,
+        onChangeValidation: _onChange,
+        validator: validator
+      });
+    }
+  })) : null;
+  var description = [/*#__PURE__*/_react.default.createElement("span", {
+    key: "msg"
+  }, "This message will be displayed to the user.")];
+  var variables = validator.getVariables();
+
+  if (variables.length) {
+    description.push( /*#__PURE__*/_react.default.createElement("span", {
+      key: "vars"
+    }, "\xA0Available variables:\xA0"));
+
+    for (var i = 0; i < variables.length; i++) {
+      var variable = variables[i];
+      description.push( /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+        key: variable.name,
+        content: variable.description,
+        placement: "bottom"
+      }, /*#__PURE__*/_react.default.createElement(Variable, {
+        dangerouslySetInnerHTML: {
+          __html: "{".concat(variable.name, "}")
+        }
+      })));
+
+      if (i < variables.length - 1) {
+        description.push( /*#__PURE__*/_react.default.createElement(Comma, {
+          key: "comma-".concat(i)
+        }, ","));
+      }
+    }
+
+    description.push( /*#__PURE__*/_react.default.createElement(Comma, {
+      key: "dot"
+    }, "."));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
+    key: validator.getName(),
+    "data-testid": "cms.editor.field-validator.".concat(validator.getName()),
+    interactive: false,
+    open: !!data,
+    title: validator.getLabel(),
+    description: validator.getDescription(),
+    actions: actions,
+    className: noPadding
+  }, data && /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: data,
+    onChange: function onChange(data) {
+      return onFormChange({
+        data: data,
+        validationValue: value,
+        onChangeValidation: _onChange,
+        validatorIndex: validatorIndex
+      });
+    }
+  }, function (_ref3) {
+    var Bind = _ref3.Bind;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
+      className: gridBottomPadding
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12
+    }, /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "message",
+      validators: _validation.validation.create("required")
+    }, function (bind) {
+      return /*#__PURE__*/_react.default.createElement(_Input.Input, Object.assign({}, bind, {
+        label: "Message",
+        "data-testid": "cms.editfield.validators.required",
+        description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, description)
+      }));
+    }))), renderSettings(validator));
+  }));
+};
+
+var ValidatorsList = function ValidatorsList(props) {
+  var name = props.name,
+      validators = props.validators;
+  return /*#__PURE__*/_react.default.createElement(_form.Bind, {
+    name: name,
+    defaultValue: []
+  }, function (bind) {
+    var value = bind.value,
+        onChange = bind.onChange;
+    return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, validators.map(function (validator) {
+      return /*#__PURE__*/_react.default.createElement(ValidatorItem, {
+        key: validator.getName(),
+        value: value,
+        onChange: onChange,
+        validator: validator
+      });
+    }));
+  });
+};
+
+exports.ValidatorsList = ValidatorsList;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Variable","styled","Comma","noPadding","css","gridBottomPadding","onEnabledChange","params","data","validationValue","onChangeValidation","validator","index","findIndex","item","name","getName","slice","settings","getDefaultSettings","message","getDefaultMessage","onFormChange","validatorIndex","newValidationValue","renderEmpty","getValidatorPlugin","plugin","plugins","byType","find","ValidatorItem","value","onChange","validatorName","renderCustomUi","renderSettings","actions","isRequired","description","variables","getVariables","length","push","i","variable","__html","getLabel","getDescription","Bind","validation","create","bind","ValidatorsList","props","validators","map"],"sources":["ValidatorsList.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { css } from \"emotion\";\nimport { cloneDeep, debounce } from \"lodash\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Form, Bind } from \"@webiny/form\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { CmsModelFieldValidator, CmsModelFieldValidatorPlugin } from \"~/types\";\nimport { Validator } from \"@webiny/validation/types\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\nimport { CmsModelFieldValidatorConfigAdapter } from \"~/utils/CmsModelFieldValidatorConfigAdapter\";\nimport styled from \"@emotion/styled\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\n\nconst Variable = styled.span`\n    font-weight: bold;\n    cursor: pointer;\n`;\n\nconst Comma = styled.span`\n    padding-right: 5px;\n`;\n\nconst noPadding = css`\n    .webiny-ui-accordion-item__content {\n        padding: 0 !important;\n    }\n`;\n\nconst gridBottomPadding = css`\n    :not(:last-child) {\n        padding-bottom: 0;\n    }\n`;\n\ninterface OnChangeValidationCallable {\n    (validators: CmsModelFieldValidator[]): void;\n}\n\ninterface OnEnabledChangeParams {\n    data: CmsModelFieldValidator;\n    validationValue: CmsModelFieldValidator[];\n    onChangeValidation: OnChangeValidationCallable;\n    validator: CmsModelFieldValidatorConfigAdapter;\n}\n\nconst onEnabledChange = (params: OnEnabledChangeParams): void => {\n    const { data, validationValue, onChangeValidation, validator } = params;\n    if (data) {\n        const index = validationValue.findIndex(item => item.name === validator.getName());\n        onChangeValidation([\n            ...validationValue.slice(0, index),\n            ...validationValue.slice(index + 1)\n        ]);\n        return;\n    }\n    onChangeValidation([\n        ...validationValue,\n        {\n            name: validator.getName(),\n            settings: validator.getDefaultSettings(),\n            message: validator.getDefaultMessage()\n        }\n    ]);\n};\n\nconst onFormChange = debounce(({ data, validationValue, onChangeValidation, validatorIndex }) => {\n    const newValidationValue = cloneDeep(validationValue);\n    newValidationValue[validatorIndex] = {\n        ...newValidationValue[validatorIndex],\n        ...cloneDeep(data)\n    };\n    onChangeValidation(newValidationValue);\n}, 200);\n\ninterface ValidatorsTabProps {\n    name: string;\n    validators: CmsModelFieldValidatorConfigAdapter[];\n}\n\nconst renderEmpty = () => null;\n\nconst getValidatorPlugin = (name: string): CmsModelFieldValidatorPlugin[\"validator\"] | null => {\n    const plugin = plugins\n        .byType<CmsModelFieldValidatorPlugin>(\"cms-model-field-validator\")\n        .find(plugin => plugin.validator.name === name);\n\n    if (!plugin) {\n        return null;\n    }\n\n    return plugin.validator;\n};\n\ninterface ValidatorItemProps {\n    validator: CmsModelFieldValidatorConfigAdapter;\n    value: any;\n    onChange: OnChangeValidationCallable;\n}\n\nconst ValidatorItem = ({ validator, value, onChange }: ValidatorItemProps) => {\n    const validatorName = validator.getName();\n\n    const plugin = getValidatorPlugin(validatorName);\n    if (!plugin) {\n        return <></>;\n    }\n\n    const validatorIndex = ((value || []) as Validator[]).findIndex(\n        item => item.name === validatorName\n    );\n\n    const data = (value || [])[validatorIndex];\n\n    if (typeof plugin.renderCustomUi === \"function\") {\n        return <Fragment key={validatorName}>{plugin.renderCustomUi()}</Fragment>;\n    }\n\n    const renderSettings = plugin.renderSettings || renderEmpty;\n\n    const actions = !validator.isRequired() ? (\n        <AccordionItem.Actions>\n            <Switch\n                label=\"Enabled\"\n                value={validatorIndex >= 0}\n                onChange={() =>\n                    onEnabledChange({\n                        data,\n                        validationValue: value,\n                        onChangeValidation: onChange,\n                        validator: validator\n                    })\n                }\n            />\n        </AccordionItem.Actions>\n    ) : null;\n\n    const description = [<span key={\"msg\"}>This message will be displayed to the user.</span>];\n    const variables = validator.getVariables();\n\n    if (variables.length) {\n        description.push(<span key={\"vars\"}>&nbsp;Available variables:&nbsp;</span>);\n        for (let i = 0; i < variables.length; i++) {\n            const variable = variables[i];\n\n            description.push(\n                <Tooltip key={variable.name} content={variable.description} placement={\"bottom\"}>\n                    <Variable dangerouslySetInnerHTML={{ __html: `{${variable.name}}` }} />\n                </Tooltip>\n            );\n\n            if (i < variables.length - 1) {\n                description.push(<Comma key={`comma-${i}`}>,</Comma>);\n            }\n        }\n        description.push(<Comma key={\"dot\"}>.</Comma>);\n    }\n\n    return (\n        <AccordionItem\n            key={validator.getName()}\n            data-testid={`cms.editor.field-validator.${validator.getName()}`}\n            interactive={false}\n            open={!!data}\n            title={validator.getLabel()}\n            description={validator.getDescription()}\n            actions={actions}\n            className={noPadding}\n        >\n            {data && (\n                <Form\n                    data={data}\n                    onChange={data =>\n                        onFormChange({\n                            data,\n                            validationValue: value,\n                            onChangeValidation: onChange,\n                            validatorIndex\n                        })\n                    }\n                >\n                    {({ Bind }) => (\n                        <>\n                            <Grid className={gridBottomPadding}>\n                                <Cell span={12}>\n                                    <Bind\n                                        name={\"message\"}\n                                        validators={validation.create(\"required\")}\n                                    >\n                                        {bind => {\n                                            return (\n                                                <Input\n                                                    {...bind}\n                                                    label={\"Message\"}\n                                                    data-testid=\"cms.editfield.validators.required\"\n                                                    description={<>{description}</>}\n                                                />\n                                            );\n                                        }}\n                                    </Bind>\n                                </Cell>\n                            </Grid>\n\n                            {renderSettings(validator)}\n                        </>\n                    )}\n                </Form>\n            )}\n        </AccordionItem>\n    );\n};\n\nexport const ValidatorsList: React.FC<ValidatorsTabProps> = props => {\n    const { name, validators } = props;\n\n    return (\n        <Bind name={name} defaultValue={[]}>\n            {bind => {\n                const { value, onChange } = bind;\n                return (\n                    <Accordion>\n                        {validators.map(validator => {\n                            return (\n                                <ValidatorItem\n                                    key={validator.getName()}\n                                    value={value}\n                                    onChange={onChange}\n                                    validator={validator}\n                                />\n                            );\n                        })}\n                    </Accordion>\n                );\n            }}\n        </Bind>\n    );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import { CmsModelField, CmsEditorFieldTypePlugin, CmsModelFieldValidatorPlugin } from "../../../../types";
+import { CmsModelFieldValidatorConfigAdapter } from "../../../../utils/CmsModelFieldValidatorConfigAdapter";
+export interface Validator {
+    optional: boolean;
+    validator: CmsModelFieldValidatorPlugin["validator"];
+}
+export interface ValidationSection {
+    title?: string;
+    description?: string;
+    validators: CmsModelFieldValidatorConfigAdapter[];
+}
+export declare const getListValidators: (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => ValidationSection;
+export declare const getFieldValidators: (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => ValidationSection;

package/admin/components/FieldEditor/EditFieldDialog/getValidators.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getListValidators = exports.getFieldValidators = void 0;
+
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+
+var _plugins = require("@webiny/plugins");
+
+var _CmsModelFieldValidatorConfigAdapter = require("../../../../utils/CmsModelFieldValidatorConfigAdapter");
+
+var isValidatorDefinition = function isValidatorDefinition(obj) {
+  return obj ? !Array.isArray(obj) : false;
+};
+
+var isValidatorDefinitionFactory = function isValidatorDefinitionFactory(obj) {
+  return typeof obj === "function";
+};
+
+var getValidatorPlugin = function getValidatorPlugin(name) {
+  var plugin = _plugins.plugins.byType("cms-model-field-validator").find(function (plugin) {
+    return plugin.validator.name === name;
+  });
+
+  if (!plugin) {
+    throw new Error("Missing CMS field validator plugin \"".concat(name, "\"!"));
+  }
+
+  return plugin.validator;
+};
+
+var getValidatorConfigs = function getValidatorConfigs(field, validators) {
+  var configs = [];
+
+  var _iterator = (0, _createForOfIteratorHelper2.default)(validators),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var validator = _step.value;
+      var resolvedValidator = void 0;
+
+      if (typeof validator === "string") {
+        resolvedValidator = getValidatorPlugin(validator);
+      } else {
+        resolvedValidator = validator;
+      }
+
+      configs.push(new _CmsModelFieldValidatorConfigAdapter.CmsModelFieldValidatorConfigAdapter(field, resolvedValidator));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return configs;
+};
+
+var getValidators = function getValidators(_ref) {
+  var field = _ref.field,
+      fieldPlugin = _ref.fieldPlugin,
+      key = _ref.key,
+      defaultValidators = _ref.defaultValidators;
+  var title = "";
+  var description = "";
+  var fieldValidators = fieldPlugin.field[key];
+
+  if (isValidatorDefinitionFactory(fieldValidators)) {
+    fieldValidators = fieldValidators(field);
+  }
+
+  var resolvedValidators;
+
+  if (isValidatorDefinition(fieldValidators)) {
+    title = fieldValidators.title || "";
+    description = fieldValidators.description || "";
+    resolvedValidators = fieldValidators.validators;
+  } else {
+    resolvedValidators = fieldValidators;
+  }
+
+  var validators = getValidatorConfigs(field, resolvedValidators || defaultValidators);
+  return {
+    title: title,
+    description: description,
+    validators: validators
+  };
+};
+
+var getListValidators = function getListValidators(field, fieldPlugin) {
+  return getValidators({
+    field: field,
+    fieldPlugin: fieldPlugin,
+    key: "listValidators",
+    defaultValidators: ["minLength", "maxLength"]
+  });
+};
+
+exports.getListValidators = getListValidators;
+
+var getFieldValidators = function getFieldValidators(field, fieldPlugin) {
+  return getValidators({
+    field: field,
+    fieldPlugin: fieldPlugin,
+    key: "validators",
+    defaultValidators: []
+  });
+};
+
+exports.getFieldValidators = getFieldValidators;

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

@@ -0,0 +1 @@
+{"version":3,"names":["isValidatorDefinition","obj","Array","isArray","isValidatorDefinitionFactory","getValidatorPlugin","name","plugin","plugins","byType","find","validator","Error","getValidatorConfigs","field","validators","configs","resolvedValidator","push","CmsModelFieldValidatorConfigAdapter","getValidators","fieldPlugin","key","defaultValidators","title","description","fieldValidators","resolvedValidators","getListValidators","getFieldValidators"],"sources":["getValidators.ts"],"sourcesContent":["import { plugins } from \"@webiny/plugins\";\nimport {\n    CmsModelField,\n    CmsEditorFieldTypePlugin,\n    CmsModelFieldValidatorPlugin,\n    CmsModelFieldValidatorsGroup,\n    CmsModelFieldValidatorConfig,\n    CmsModelFieldValidatorsFactory\n} from \"~/types\";\nimport { CmsModelFieldValidatorConfigAdapter } from \"~/utils/CmsModelFieldValidatorConfigAdapter\";\n\nexport interface Validator {\n    optional: boolean;\n    validator: CmsModelFieldValidatorPlugin[\"validator\"];\n}\n\nconst isValidatorDefinition = (obj: unknown): obj is CmsModelFieldValidatorsGroup => {\n    return obj ? !Array.isArray(obj) : false;\n};\n\nconst isValidatorDefinitionFactory = (obj: unknown): obj is CmsModelFieldValidatorsFactory => {\n    return typeof obj === \"function\";\n};\n\ninterface GetValidatorsParams {\n    field: CmsModelField;\n    fieldPlugin: CmsEditorFieldTypePlugin;\n    key: \"validators\" | \"listValidators\";\n    defaultValidators: string[];\n}\n\nexport interface ValidationSection {\n    title?: string;\n    description?: string;\n    validators: CmsModelFieldValidatorConfigAdapter[];\n}\n\nconst getValidatorPlugin = (name: string) => {\n    const plugin = plugins\n        .byType<CmsModelFieldValidatorPlugin>(\"cms-model-field-validator\")\n        .find(plugin => plugin.validator.name === name);\n\n    if (!plugin) {\n        throw new Error(`Missing CMS field validator plugin \"${name}\"!`);\n    }\n\n    return plugin.validator as CmsModelFieldValidatorConfig;\n};\n\nconst getValidatorConfigs = (\n    field: CmsModelField,\n    validators: Array<CmsModelFieldValidatorConfig | string>\n) => {\n    const configs: CmsModelFieldValidatorConfigAdapter[] = [];\n\n    for (const validator of validators) {\n        let resolvedValidator;\n        if (typeof validator === \"string\") {\n            resolvedValidator = getValidatorPlugin(validator);\n        } else {\n            resolvedValidator = validator;\n        }\n\n        configs.push(new CmsModelFieldValidatorConfigAdapter(field, resolvedValidator));\n    }\n\n    return configs;\n};\n\nconst getValidators = ({\n    field,\n    fieldPlugin,\n    key,\n    defaultValidators\n}: GetValidatorsParams): ValidationSection => {\n    let title = \"\";\n    let description = \"\";\n    let fieldValidators = fieldPlugin.field[key];\n\n    if (isValidatorDefinitionFactory(fieldValidators)) {\n        fieldValidators = fieldValidators(field);\n    }\n\n    let resolvedValidators: (string | CmsModelFieldValidatorConfig)[] | undefined;\n    if (isValidatorDefinition(fieldValidators)) {\n        title = fieldValidators.title || \"\";\n        description = fieldValidators.description || \"\";\n        resolvedValidators = fieldValidators.validators;\n    } else {\n        resolvedValidators = fieldValidators;\n    }\n\n    const validators = getValidatorConfigs(field, resolvedValidators || defaultValidators);\n\n    return {\n        title,\n        description,\n        validators\n    };\n};\n\nexport const getListValidators = (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators({\n        field,\n        fieldPlugin,\n        key: \"listValidators\",\n        defaultValidators: [\"minLength\", \"maxLength\"]\n    });\n};\n\nexport const getFieldValidators = (field: CmsModelField, fieldPlugin: CmsEditorFieldTypePlugin) => {\n    return getValidators({\n        field,\n        fieldPlugin,\n        key: \"validators\",\n        defaultValidators: []\n    });\n};\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { CmsEditorField } from "../../../types";
+import { FormOnSubmit } from "@webiny/form";
+import { CmsModelField } from "../../../types";
 interface EditFieldDialogProps {
-    field: CmsEditorField | null;
     onClose: () => void;
-    onSubmit: (data: CmsEditorField) => void;
+    onSubmit: FormOnSubmit<CmsModelField>;
 }
 declare const EditFieldDialog: React.FC<EditFieldDialogProps>;
 export default EditFieldDialog;