@webiny/app-headless-cms 5.34.8 → 5.35.0-beta.0

package/admin/components/Droppable.js

@@ -1,64 +1,52 @@
 "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.Droppable = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _reactDnd = require("react-dnd");
-
 var DroppableComponent = function DroppableComponent(props) {
   var children = props.children,
-      onDrop = props.onDrop,
-      _props$isVisible = props.isVisible,
-      isVisible = _props$isVisible === void 0 ? function () {
-    return true;
-  } : _props$isVisible;
-
+    onDrop = props.onDrop,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? function () {
+      return true;
+    } : _props$isVisible;
   var _useDrop = (0, _reactDnd.useDrop)({
-    accept: "element",
-    collect: function collect(monitor) {
-      return {
-        isOver: monitor.isOver() && monitor.isOver({
-          shallow: true
-        }),
-        item: monitor.getItem()
-      };
-    },
-    drop: function drop(item, monitor) {
-      if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
-        return;
+      accept: "element",
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver() && monitor.isOver({
+            shallow: true
+          }),
+          item: monitor.getItem()
+        };
+      },
+      drop: function drop(item, monitor) {
+        if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
+          return;
+        }
+        if (typeof onDrop === "function") {
+          return onDrop(monitor.getItem());
+        }
       }
-
-      if (typeof onDrop === "function") {
-        return onDrop(monitor.getItem());
-      }
-    }
-  }),
-      _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
-      _useDrop2$ = _useDrop2[0],
-      item = _useDrop2$.item,
-      isOver = _useDrop2$.isOver,
-      drop = _useDrop2[1];
-
+    }),
+    _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
+    _useDrop2$ = _useDrop2[0],
+    item = _useDrop2$.item,
+    isOver = _useDrop2$.isOver,
+    drop = _useDrop2[1];
   if (item && !isVisible(item)) {
     return null;
   }
-
   var isDroppable = true;
-
   if (item) {
     isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
   }
-
   return children({
     isDragging: Boolean(item),
     isOver: isOver,
@@ -67,6 +55,5 @@ var DroppableComponent = function DroppableComponent(props) {
     drop: drop
   });
 };
-
 var Droppable = /*#__PURE__*/React.memo(DroppableComponent);
 exports.Droppable = Droppable;

package/admin/components/Droppable.js.map

@@ -1 +1 @@
-{"version":3,"names":["DroppableComponent","props","children","onDrop","isVisible","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","isDroppable","isDragging","Boolean","Droppable","React","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: \"row\" | \"field\" | \"newField\";\n    item: any;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: any) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nconst DroppableComponent: React.FC<DroppableProps> = props => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.FC<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAkCA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA+C,CAAAC,KAAK,EAAI;EAC1D,IAAQC,QAAR,GAAqDD,KAArD,CAAQC,QAAR;EAAA,IAAkBC,MAAlB,GAAqDF,KAArD,CAAkBE,MAAlB;EAAA,uBAAqDF,KAArD,CAA0BG,SAA1B;EAAA,IAA0BA,SAA1B,iCAAsC;IAAA,OAAM,IAAN;EAAA,CAAtC;;EAEA,eAAiC,IAAAC,iBAAA,EAAQ;IACrCC,MAAM,EAAE,SAD6B;IAErCC,OAAO,EAAE,iBAAAC,OAAO;MAAA,OAAK;QACjBC,MAAM,EAAED,OAAO,CAACC,MAAR,MAAoBD,OAAO,CAACC,MAAR,CAAe;UAAEC,OAAO,EAAE;QAAX,CAAf,CADX;QAEjBC,IAAI,EAAEH,OAAO,CAACI,OAAR;MAFW,CAAL;IAAA,CAFqB;IAMrCC,IANqC,gBAMhCF,IANgC,EAM1BH,OAN0B,EAMjB;MAChB,IAAI,OAAOP,KAAK,CAACa,WAAb,KAA6B,UAA7B,IAA2C,CAACb,KAAK,CAACa,WAAN,CAAkBH,IAAlB,CAAhD,EAAyE;QACrE;MACH;;MAED,IAAI,OAAOR,MAAP,KAAkB,UAAtB,EAAkC;QAC9B,OAAOA,MAAM,CAACK,OAAO,CAACI,OAAR,EAAD,CAAb;MACH;IACJ;EAdoC,CAAR,CAAjC;EAAA;EAAA;EAAA,IAASD,IAAT,cAASA,IAAT;EAAA,IAAeF,MAAf,cAAeA,MAAf;EAAA,IAAyBI,IAAzB;;EAiBA,IAAIF,IAAI,IAAI,CAACP,SAAS,CAACO,IAAD,CAAtB,EAA8B;IAC1B,OAAO,IAAP;EACH;;EAED,IAAIG,WAAW,GAAG,IAAlB;;EACA,IAAIH,IAAJ,EAAU;IACNG,WAAW,GAAGb,KAAK,CAACa,WAAN,GAAoBb,KAAK,CAACa,WAAN,CAAkBH,IAAlB,CAApB,GAA8CF,MAA5D;EACH;;EAED,OAAOP,QAAQ,CAAC;IAAEa,UAAU,EAAEC,OAAO,CAACL,IAAD,CAArB;IAA6BF,MAAM,EAANA,MAA7B;IAAqCK,WAAW,EAAXA,WAArC;IAAkDH,IAAI,EAAJA,IAAlD;IAAwDE,IAAI,EAAJA;EAAxD,CAAD,CAAf;AACH,CA9BD;;AAgCO,IAAMI,SAAmC,gBAAGC,KAAK,CAACC,IAAN,CAAWnB,kBAAX,CAA5C"}
+{"version":3,"names":["DroppableComponent","props","children","onDrop","isVisible","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","isDroppable","isDragging","Boolean","Droppable","React","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: \"row\" | \"field\" | \"newField\";\n    item: any;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: any) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nconst DroppableComponent: React.FC<DroppableProps> = props => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.FC<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;AAAA;AACA;AAkCA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA4C,CAAGC,KAAK,EAAI;EAC1D,IAAQC,QAAQ,GAAqCD,KAAK,CAAlDC,QAAQ;IAAEC,MAAM,GAA6BF,KAAK,CAAxCE,MAAM;IAAA,mBAA6BF,KAAK,CAAhCG,SAAS;IAATA,SAAS,iCAAG;MAAA,OAAM,IAAI;IAAA;EAEhD,eAAiC,IAAAC,iBAAO,EAAC;MACrCC,MAAM,EAAE,SAAS;MACjBC,OAAO,EAAE,iBAAAC,OAAO;QAAA,OAAK;UACjBC,MAAM,EAAED,OAAO,CAACC,MAAM,EAAE,IAAID,OAAO,CAACC,MAAM,CAAC;YAAEC,OAAO,EAAE;UAAK,CAAC,CAAC;UAC7DC,IAAI,EAAEH,OAAO,CAACI,OAAO;QACzB,CAAC;MAAA,CAAC;MACFC,IAAI,gBAACF,IAAI,EAAEH,OAAO,EAAE;QAChB,IAAI,OAAOP,KAAK,CAACa,WAAW,KAAK,UAAU,IAAI,CAACb,KAAK,CAACa,WAAW,CAACH,IAAI,CAAC,EAAE;UACrE;QACJ;QAEA,IAAI,OAAOR,MAAM,KAAK,UAAU,EAAE;UAC9B,OAAOA,MAAM,CAACK,OAAO,CAACI,OAAO,EAAE,CAAC;QACpC;MACJ;IACJ,CAAC,CAAC;IAAA;IAAA;IAfOD,IAAI,cAAJA,IAAI;IAAEF,MAAM,cAANA,MAAM;IAAII,IAAI;EAiB7B,IAAIF,IAAI,IAAI,CAACP,SAAS,CAACO,IAAI,CAAC,EAAE;IAC1B,OAAO,IAAI;EACf;EAEA,IAAIG,WAAW,GAAG,IAAI;EACtB,IAAIH,IAAI,EAAE;IACNG,WAAW,GAAGb,KAAK,CAACa,WAAW,GAAGb,KAAK,CAACa,WAAW,CAACH,IAAI,CAAC,GAAGF,MAAM;EACtE;EAEA,OAAOP,QAAQ,CAAC;IAAEa,UAAU,EAAEC,OAAO,CAACL,IAAI,CAAC;IAAEF,MAAM,EAANA,MAAM;IAAEK,WAAW,EAAXA,WAAW;IAAEH,IAAI,EAAJA,IAAI;IAAEE,IAAI,EAAJA;EAAK,CAAC,CAAC;AACnF,CAAC;AAEM,IAAMI,SAAmC,gBAAGC,KAAK,CAACC,IAAI,CAACnB,kBAAkB,CAAC;AAAC"}

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

@@ -1,40 +1,24 @@
 "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.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _plugins = require("@webiny/plugins");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _i18n = require("@webiny/app/i18n");
-
 var _Radio = require("@webiny/ui/Radio");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var _emotion = require("emotion");
-
 var _validation = require("@webiny/validation");
-
 var _hooks = require("../../../hooks");
-
 var _form = require("@webiny/form");
-
 var _templateObject, _templateObject2;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
-
 var style = {
   topLabel: /*#__PURE__*/(0, _emotion.css)({
     marginBottom: 25
@@ -47,48 +31,38 @@ var style = {
     marginBottom: 10
   }, "label:radioContainer;")
 };
-
 var AppearanceTab = function AppearanceTab() {
   var _field$predefinedValu;
-
   var form = (0, _form.useForm)();
-
   var _useModelField = (0, _hooks.useModelField)(),
-      field = _useModelField.field,
-      fieldPlugin = _useModelField.fieldPlugin;
-
+    field = _useModelField.field,
+    fieldPlugin = _useModelField.fieldPlugin;
   var renderPlugins = _plugins.plugins.byType("cms-editor-field-renderer").filter(function (item) {
     return item.renderer.canUse({
       field: field,
       fieldPlugin: fieldPlugin
     });
   });
-
   (0, _react.useEffect)(function () {
     // If the currently selected render plugin is no longer available, select the first available one.
     var currentlySelectedRenderAvailable = renderPlugins.find(function (item) {
       return item.renderer.rendererName === field.renderer.name;
     });
-
     if (currentlySelectedRenderAvailable) {
       return;
     }
-
     if (renderPlugins[0]) {
       form.setValue("renderer.name", renderPlugins[0].renderer.rendererName);
       return;
     }
-
     console.info("No renderers for field ".concat(field.fieldId, " found."), field);
   }, [field.id, field.multipleValues, (_field$predefinedValu = field.predefinedValues) === null || _field$predefinedValu === void 0 ? void 0 : _field$predefinedValu.enabled]);
-
   if (renderPlugins.length === 0) {
     return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
       span: 12,
       className: style.noComponentsMessage
     }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["There are no components that can render this field."])))));
   }
-
   return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 12
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -98,7 +72,7 @@ var AppearanceTab = function AppearanceTab() {
     validate: _validation.validation.create("required")
   }, /*#__PURE__*/_react.default.createElement(_Radio.RadioGroup, null, function (_ref) {
     var onChange = _ref.onChange,
-        getValue = _ref.getValue;
+      getValue = _ref.getValue;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderPlugins.map(function (item) {
       return /*#__PURE__*/_react.default.createElement("div", {
         key: item.name,
@@ -113,6 +87,5 @@ var AppearanceTab = function AppearanceTab() {
     }));
   }))));
 };
-
 var _default = AppearanceTab;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","style","topLabel","css","marginBottom","noComponentsMessage","textAlign","padding","radioContainer","AppearanceTab","form","useForm","useModelField","field","fieldPlugin","renderPlugins","plugins","byType","filter","item","renderer","canUse","useEffect","currentlySelectedRenderAvailable","find","rendererName","name","setValue","console","info","fieldId","id","multipleValues","predefinedValues","enabled","length","validation","create","onChange","getValue","map","description"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { CmsModelField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { css } from \"emotion\";\nimport { validation } from \"@webiny/validation\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { useForm, Bind } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    topLabel: css({\n        marginBottom: 25\n    }),\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10\n    })\n};\n\nconst AppearanceTab = () => {\n    const form = useForm<CmsModelField>();\n    const { field, fieldPlugin } = useModelField();\n\n    const renderPlugins = plugins\n        .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n        .filter(item => item.renderer.canUse({ field, fieldPlugin }));\n\n    useEffect((): void => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        const currentlySelectedRenderAvailable = renderPlugins.find(\n            item => item.renderer.rendererName === field.renderer.name\n        );\n\n        if (currentlySelectedRenderAvailable) {\n            return;\n        }\n\n        if (renderPlugins[0]) {\n            form.setValue(\"renderer.name\", renderPlugins[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.multipleValues, field.predefinedValues?.enabled]);\n\n    if (renderPlugins.length === 0) {\n        return (\n            <Grid>\n                <Cell\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Cell>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid>\n            <Cell span={12}>\n                <div\n                    className={style.topLabel}\n                >{t`Choose a component that will render the field:`}</div>\n                <Bind name={\"renderer.name\"} validate={validation.create(\"required\")}>\n                    <RadioGroup>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {renderPlugins.map(item => (\n                                    <div key={item.name} className={style.radioContainer}>\n                                        <Radio\n                                            value={getValue(item.renderer.rendererName)}\n                                            onChange={onChange(item.renderer.rendererName)}\n                                            label={\n                                                <>\n                                                    <div>{item.renderer.name}</div>\n                                                    <div>\n                                                        <Typography use={\"caption\"}>\n                                                            {item.renderer.description}\n                                                        </Typography>\n                                                    </div>\n                                                </>\n                                            }\n                                        />\n                                    </div>\n                                ))}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            </Cell>\n        </Grid>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","style","topLabel","css","marginBottom","noComponentsMessage","textAlign","padding","radioContainer","AppearanceTab","form","useForm","useModelField","field","fieldPlugin","renderPlugins","plugins","byType","filter","item","renderer","canUse","useEffect","currentlySelectedRenderAvailable","find","rendererName","name","setValue","console","info","fieldId","id","multipleValues","predefinedValues","enabled","length","validation","create","onChange","getValue","map","description"],"sources":["AppearanceTab.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { CmsModelField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { css } from \"emotion\";\nimport { validation } from \"@webiny/validation\";\nimport { useModelField } from \"~/admin/hooks\";\nimport { useForm, Bind } from \"@webiny/form\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/content-model-editor/tabs/appearance-tab\");\n\nconst style = {\n    topLabel: css({\n        marginBottom: 25\n    }),\n    noComponentsMessage: css({\n        textAlign: \"center\",\n        padding: 25\n    }),\n    radioContainer: css({\n        marginBottom: 10\n    })\n};\n\nconst AppearanceTab = () => {\n    const form = useForm<CmsModelField>();\n    const { field, fieldPlugin } = useModelField();\n\n    const renderPlugins = plugins\n        .byType<CmsEditorFieldRendererPlugin>(\"cms-editor-field-renderer\")\n        .filter(item => item.renderer.canUse({ field, fieldPlugin }));\n\n    useEffect((): void => {\n        // If the currently selected render plugin is no longer available, select the first available one.\n        const currentlySelectedRenderAvailable = renderPlugins.find(\n            item => item.renderer.rendererName === field.renderer.name\n        );\n\n        if (currentlySelectedRenderAvailable) {\n            return;\n        }\n\n        if (renderPlugins[0]) {\n            form.setValue(\"renderer.name\", renderPlugins[0].renderer.rendererName);\n            return;\n        }\n\n        console.info(`No renderers for field ${field.fieldId} found.`, field);\n    }, [field.id, field.multipleValues, field.predefinedValues?.enabled]);\n\n    if (renderPlugins.length === 0) {\n        return (\n            <Grid>\n                <Cell\n                    span={12}\n                    className={style.noComponentsMessage}\n                >{t`There are no components that can render this field.`}</Cell>\n            </Grid>\n        );\n    }\n\n    return (\n        <Grid>\n            <Cell span={12}>\n                <div\n                    className={style.topLabel}\n                >{t`Choose a component that will render the field:`}</div>\n                <Bind name={\"renderer.name\"} validate={validation.create(\"required\")}>\n                    <RadioGroup>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {renderPlugins.map(item => (\n                                    <div key={item.name} className={style.radioContainer}>\n                                        <Radio\n                                            value={getValue(item.renderer.rendererName)}\n                                            onChange={onChange(item.renderer.rendererName)}\n                                            label={\n                                                <>\n                                                    <div>{item.renderer.name}</div>\n                                                    <div>\n                                                        <Typography use={\"caption\"}>\n                                                            {item.renderer.description}\n                                                        </Typography>\n                                                    </div>\n                                                </>\n                                            }\n                                        />\n                                    </div>\n                                ))}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            </Cell>\n        </Grid>\n    );\n};\n\nexport default AppearanceTab;\n"],"mappings":"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"}

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

@@ -1,65 +1,45 @@
 "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.default = void 0;
-
 var _camelCase2 = _interopRequireDefault(require("lodash/camelCase"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Input = require("@webiny/ui/Input");
-
 var _Switch = require("@webiny/ui/Switch");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _validation = require("@webiny/validation");
-
 var _Tags = require("@webiny/ui/Tags");
-
 var _form = require("@webiny/form");
-
 var _ = require("./..");
-
 var _hooks = require("../../../hooks");
-
 var GeneralTab = function GeneralTab() {
   var form = (0, _form.useForm)();
-
   var _useModelField = (0, _hooks.useModelField)(),
-      field = _useModelField.field,
-      fieldPlugin = _useModelField.fieldPlugin;
-
+    field = _useModelField.field,
+    fieldPlugin = _useModelField.fieldPlugin;
   var inputRef = (0, _react.useRef)(null);
-
   var _useModelEditor = (0, _hooks.useModelEditor)(),
-      contentModel = _useModelEditor.data;
-
+    contentModel = _useModelEditor.data;
   var _useModelFieldEditor = (0, _.useModelFieldEditor)(),
-      getField = _useModelFieldEditor.getField; // Had problems with auto-focusing the "label" field. A couple of comments on this.
+    getField = _useModelFieldEditor.getField;
+
+  // Had problems with auto-focusing the "label" field. A couple of comments on this.
   // 1. It's probably caused by the Tabs component which wraps this component.
   // 2. It seems that the "autoFocus" prop on the Input doesn't work. I can't see it attached in the actual DOM.
   // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design
   //    in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then
   //    it seems it's behaving correctly. ¯\_(ツ)_/¯
-
-
   (0, _react.useEffect)(function () {
     setTimeout(function () {
       if (!inputRef.current) {
         return;
       }
-
       inputRef.current.focus();
-    },
-    /* The value of 400 was determined by manual testing. */
-    400);
+    }, /* The value of 400 was determined by manual testing. */400);
   }, []);
   var afterChangeLabel = (0, _react.useCallback)(function (value) {
     form.setValue("fieldId", (0, _camelCase2.default)(value));
@@ -71,26 +51,21 @@ var GeneralTab = function GeneralTab() {
     if (fieldId.trim().toLowerCase() !== "id") {
       return true;
     }
-
     throw new Error("Cannot use \"id\" as Field ID.");
   }, []);
   var uniqueFieldIdValidator = (0, _react.useCallback)(function (fieldId) {
     var existingField = getField({
       fieldId: fieldId
     });
-
     if (!existingField) {
       return false;
     }
-
     if (existingField.id === field.id) {
       return true;
     }
-
     throw new Error("Please enter a unique Field ID.");
   }, []);
   var additionalSettings = null;
-
   if (typeof fieldPlugin.field.renderSettings === "function") {
     additionalSettings = fieldPlugin.field.renderSettings({
       afterChangeLabel: afterChangeLabel,
@@ -98,9 +73,8 @@ var GeneralTab = function GeneralTab() {
       contentModel: contentModel
     });
   }
-
   var predefinedValuesEnabled = (0, _react.useMemo)(function () {
-    return fieldPlugin.field.allowPredefinedValues && typeof fieldPlugin.field.renderPredefinedValues === "function";
+    return (fieldPlugin.field.allowPredefinedValues || false) && typeof fieldPlugin.field.renderPredefinedValues === "function";
   }, [field.fieldId]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6
@@ -111,7 +85,6 @@ var GeneralTab = function GeneralTab() {
       if (field.id) {
         return;
       }
-
       afterChangeLabel(value);
     }
   }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
@@ -162,6 +135,5 @@ var GeneralTab = function GeneralTab() {
     "data-testid": "cms.editor.field.settings.general.tags"
   })))), additionalSettings);
 };
-
 var _default = GeneralTab;
 exports.default = _default;

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

@@ -1 +1 @@
-{"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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"}
+{"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 || false) &&\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.js

@@ -1,47 +1,33 @@
 "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.default = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _getValue = _interopRequireDefault(require("./functions/getValue"));
-
 var _setValue = _interopRequireDefault(require("./functions/setValue"));
-
 var _form = require("@webiny/form");
-
 var _hooks = require("../../../hooks");
-
 var PredefinedValues = function PredefinedValues() {
   var _useModelField = (0, _hooks.useModelField)(),
-      field = _useModelField.field,
-      fieldPlugin = _useModelField.fieldPlugin;
-
+    field = _useModelField.field,
+    fieldPlugin = _useModelField.fieldPlugin;
   var memoizedBindComponents = (0, _react.useRef)({});
   var getBind = (0, _react.useCallback)(function () {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
     var memoKey = index;
-
     if (memoizedBindComponents.current[memoKey]) {
       return memoizedBindComponents.current[memoKey];
     }
-
     var Bind = function Bind(_ref) {
       var children = _ref.children,
-          name = _ref.name;
+        name = _ref.name;
       return /*#__PURE__*/_react.default.createElement(_form.Bind, {
         name: "predefinedValues.values"
       }, function (bind) {
@@ -54,53 +40,42 @@ var PredefinedValues = function PredefinedValues() {
           onChange: function () {
             var _onChange = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(value) {
               return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-                while (1) {
-                  switch (_context.prev = _context.next) {
-                    case 0:
-                      _context.next = 2;
-                      return (0, _setValue.default)({
-                        value: value,
-                        bind: bind,
-                        index: index,
-                        name: name
-                      });
-
-                    case 2:
-                    case "end":
-                      return _context.stop();
-                  }
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.next = 2;
+                    return (0, _setValue.default)({
+                      value: value,
+                      bind: bind,
+                      index: index,
+                      name: name
+                    });
+                  case 2:
+                  case "end":
+                    return _context.stop();
                 }
               }, _callee);
             }));
-
             function onChange(_x) {
               return _onChange.apply(this, arguments);
             }
-
             return onChange;
           }()
         });
-
         if (typeof children === "function") {
           return children(props);
         }
-
         return /*#__PURE__*/(0, _react.cloneElement)(children, props);
       });
     };
-
     memoizedBindComponents.current[memoKey] = Bind;
     return memoizedBindComponents.current[memoKey];
   }, []);
-
   if (!fieldPlugin.field.renderPredefinedValues) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Missing \"field.renderPredefinedValues\" method in field type plugin: \"".concat(field.type, "\"."));
   }
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldPlugin.field.renderPredefinedValues({
     getBind: getBind
   }));
 };
-
 var _default = PredefinedValues;
 exports.default = _default;

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

@@ -1 +1 @@
-{"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"}
+{"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,gBAAgB,GAAS;EAC3B,qBAA+B,IAAAC,oBAAa,GAAE;IAAtCC,KAAK,kBAALA,KAAK;IAAEC,WAAW,kBAAXA,WAAW;EAC1B,IAAMC,sBAAsB,GAAG,IAAAC,aAAM,EAAyB,CAAC,CAAC,CAAC;EAEjE,IAAMC,OAAO,GAAG,IAAAC,kBAAW,EAAC,YAAgB;IAAA,IAAfC,KAAK,uEAAG,CAAC,CAAC;IACnC,IAAMC,OAAO,GAAGD,KAAK;IACrB,IAAIJ,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC,EAAE;MACzC,OAAOL,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC;IAClD;IAEA,IAAME,IAAmB,GAAG,SAAtBA,IAAmB,OAA2B;MAAA,IAArBC,QAAQ,QAARA,QAAQ;QAAEC,IAAI,QAAJA,IAAI;MACzC,oBACI,6BAAC,UAAY;QAAC,IAAI,EAAE;MAA0B,GACzC,UAAAC,IAAI,EAAI;QACL,IAAMC,KAAK,+DACJD,IAAI;UACPE,KAAK,EAAE,IAAAC,iBAAQ,EAAC;YAAEH,IAAI,EAAJA,IAAI;YAAEN,KAAK,EAALA,KAAK;YAAEK,IAAI,EAAJA;UAAK,CAAC,CAAC;UACtCK,QAAQ;YAAA,uGAAE,iBAAOF,KAAe;cAAA;gBAAA;kBAAA;oBAAA;oBAAA,OACtB,IAAAG,iBAAQ,EAAC;sBAAEH,KAAK,EAALA,KAAK;sBAAEF,IAAI,EAAJA,IAAI;sBAAEN,KAAK,EAALA,KAAK;sBAAEK,IAAI,EAAJA;oBAAK,CAAC,CAAC;kBAAA;kBAAA;oBAAA;gBAAA;cAAA;YAAA,CAC/C;YAAA;cAAA;YAAA;YAAA;UAAA;QAAA,EACJ;QAED,IAAI,OAAOD,QAAQ,KAAK,UAAU,EAAE;UAChC,OAAOA,QAAQ,CAACG,KAAK,CAAC;QAC1B;QAEA,oBAAO,IAAAK,mBAAY,EAACR,QAAQ,EAAmCG,KAAK,CAAC;MACzE,CAAC,CACU;IAEvB,CAAC;IAEDX,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC,GAAGE,IAAI;IAE9C,OAAOP,sBAAsB,CAACM,OAAO,CAACD,OAAO,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EACN,IAAI,CAACN,WAAW,CAACD,KAAK,CAACmB,sBAAsB,EAAE;IAC3C,oBACI,8IAA2EnB,KAAK,CAACoB,IAAI,SAAQ;EAErG;EAEA,oBAAO,4DAAGnB,WAAW,CAACD,KAAK,CAACmB,sBAAsB,CAAC;IAAEf,OAAO,EAAPA;EAAQ,CAAC,CAAC,CAAI;AACvE,CAAC;AAAC,eAEaN,gBAAgB;AAAA"}

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

@@ -1,30 +1,23 @@
 "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;
+    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, {
@@ -38,5 +31,4 @@ var ValidationsSection = function ValidationsSection(_ref) {
     validators: validators
   })));
 };
-
 exports.ValidationsSection = ValidationsSection;