@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.5e7233243f

package/admin/plugins/fieldRenderers/object/index.js

@@ -1,3 +1,15 @@
-import singleObject from "./singleObject";
-import multipleObjects from "./multipleObjects";
-export default [singleObject, multipleObjects];
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _singleObject = _interopRequireDefault(require("./singleObject"));
+
+var _multipleObjects = _interopRequireDefault(require("./multipleObjects"));
+
+var _default = [_singleObject.default, _multipleObjects.default];
+exports.default = _default;

package/admin/plugins/fieldRenderers/object/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["singleObject","multipleObjects"],"sources":["index.ts"],"sourcesContent":["import singleObject from \"./singleObject\";\nimport multipleObjects from \"./multipleObjects\";\n\nexport default [singleObject, multipleObjects];\n"],"mappings":";;;;;;;;;AAAA;;AACA;;eAEe,CAACA,qBAAD,EAAeC,wBAAf,C"}

package/admin/plugins/fieldRenderers/object/multipleObjects.js

@@ -1,72 +1,148 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Button = require("@webiny/ui/Button");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+
+var _Typography = require("@webiny/ui/Typography");
+
+var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
+
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+
+var _close = require("../../../icons/close.svg");
+
+var _arrow_drop_up = require("./arrow_drop_up.svg");
+
+var _arrow_drop_down = require("./arrow_drop_down.svg");
+
+var _Accordion = _interopRequireDefault(require("../Accordion"));
+
+var _StyledComponents = require("./StyledComponents");
+
+var _utils = require("@webiny/utils");
 
 var _templateObject, _templateObject2;
 
-import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import DynamicSection from "../DynamicSection";
-import { Fields } from "../../../components/ContentEntryForm/Fields";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
-import { IconButton } from "@webiny/ui/Button";
-import { Cell } from "@webiny/ui/Grid";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { Typography } from "@webiny/ui/Typography";
-import Accordion from "../Accordion";
-import { fieldsWrapperStyle, dynamicSectionTitleStyle, dynamicSectionGridStyle, fieldsGridStyle } from "./StyledComponents";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
+
+var Actions = function Actions(_ref) {
+  var setHighlightIndex = _ref.setHighlightIndex,
+      bind = _ref.bind,
+      index = _ref.index;
+  return index > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_down.ReactComponent, null),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      bind.field.moveValueDown(index);
+      setHighlightIndex(function (map) {
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      bind.field.moveValueUp(index);
+      setHighlightIndex(function (map) {
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
+    onClick: function onClick() {
+      return bind.field.removeValue(index);
+    }
+  })) : null;
+};
+
+var ObjectsRenderer = function ObjectsRenderer(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      highlightMap = _useState2[0],
+      setHighlightIndex = _useState2[1];
+
+  var field = props.field,
+      contentModel = props.contentModel;
+  return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
+    emptyValue: {},
+    showLabel: false,
+    renderTitle: function renderTitle(value) {
+      return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+        span: 12,
+        className: _StyledComponents.dynamicSectionTitleStyle
+      }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+        use: "headline5"
+      }, "".concat(field.label, " ").concat(value.length ? "(".concat(value.length, ")") : "")), field.helpText && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, field.helpText));
+    },
+    gridClassName: _StyledComponents.dynamicSectionGridStyle
+  }), function (_ref2) {
+    var Bind = _ref2.Bind,
+        bind = _ref2.bind,
+        index = _ref2.index;
+    return /*#__PURE__*/_react.default.createElement(_StyledComponents.ObjectItem, null, highlightMap[index] ? /*#__PURE__*/_react.default.createElement(_StyledComponents.ItemHighLight, {
+      key: highlightMap[index]
+    }) : null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+      title: "".concat(props.field.label, " #").concat(index + 1),
+      action: /*#__PURE__*/_react.default.createElement(Actions, {
+        setHighlightIndex: setHighlightIndex,
+        index: index,
+        bind: bind
+      }) // Open first Accordion by default
+      ,
+      defaultValue: index === 0
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12,
+      className: _StyledComponents.fieldsWrapperStyle
+    }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, Object.assign({
+      Bind: Bind
+    }, bind.index, {
+      contentModel: contentModel,
+      fields: (field.settings || {}).fields || [],
+      layout: (field.settings || {}).layout || [],
+      gridClassName: _StyledComponents.fieldsGridStyle
+    })))));
+  });
+};
+
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-objects",
   renderer: {
     rendererName: "objects",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Objects"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a set of fields."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "object" && field.multipleValues;
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Objects"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a set of fields."]))),
+    canUse: function canUse(_ref3) {
+      var field = _ref3.field;
+      return field.type === "object" && !!field.multipleValues;
     },
     render: function render(props) {
-      var field = props.field,
-          contentModel = props.contentModel;
-      return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
-        emptyValue: {},
-        showLabel: false,
-        renderTitle: function renderTitle(value) {
-          return /*#__PURE__*/React.createElement(Cell, {
-            span: 12,
-            className: dynamicSectionTitleStyle
-          }, /*#__PURE__*/React.createElement(Typography, {
-            use: "headline5"
-          }, "".concat(field.label, " ").concat(value.length ? "(".concat(value.length, ")") : "")), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText));
-        },
-        gridClassName: dynamicSectionGridStyle
-      }), function (_ref2) {
-        var Bind = _ref2.Bind,
-            bind = _ref2.bind,
-            index = _ref2.index;
-        return /*#__PURE__*/React.createElement(Accordion, {
-          title: "".concat(props.field.label, " #").concat(index + 1),
-          action: index > 0 && /*#__PURE__*/React.createElement(IconButton, {
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-            onClick: function onClick() {
-              return bind.field.removeValue(index);
-            }
-          }) // Open first Accordion by default
-          ,
-          defaultValue: index === 0
-        }, /*#__PURE__*/React.createElement(Cell, {
-          span: 12,
-          className: fieldsWrapperStyle
-        }, /*#__PURE__*/React.createElement(Fields, Object.assign({
-          Bind: Bind
-        }, bind.index, {
-          contentModel: contentModel,
-          fields: field.settings.fields,
-          layout: field.settings.layout,
-          gridClassName: fieldsGridStyle
-        }))));
-      });
+      return /*#__PURE__*/_react.default.createElement(ObjectsRenderer, props);
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/object/multipleObjects.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","e","stopPropagation","field","moveValueDown","map","generateAlphaNumericLowerCaseId","moveValueUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    return index > 0 ? (\n        <>\n            <IconButton\n                icon={<ArrowDown />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueDown(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n            <IconButton\n                icon={<ArrowUp />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueUp(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Objects`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !!field.multipleValues;\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/object/singleObject.js

@@ -1,22 +1,39 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+
+var _SimpleForm = require("@webiny/app-admin/components/SimpleForm");
+
+var _Grid = require("@webiny/ui/Grid");
+
+var _FormElementMessage = require("@webiny/ui/FormElementMessage");
+
+var _StyledComponents = require("./StyledComponents");
 
 var _templateObject, _templateObject2;
 
-import React from "react";
-import { i18n } from "@webiny/app/i18n";
-import { Fields } from "../../../components/ContentEntryForm/Fields";
-import { SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-import { fieldsWrapperStyle } from "./StyledComponents";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
+
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-object",
   renderer: {
     rendererName: "object",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Object"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a set of fields."]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Object"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a set of fields."]))),
     canUse: function canUse(_ref) {
       var field = _ref.field;
       return field.type === "object" && !field.multipleValues;
@@ -26,20 +43,22 @@ var plugin = {
           getBind = _ref2.getBind,
           contentModel = _ref2.contentModel;
       var Bind = getBind();
-      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      var settings = field.settings || {};
+      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
         span: 12
-      }, /*#__PURE__*/React.createElement(SimpleFormHeader, {
+      }, /*#__PURE__*/_react.default.createElement(_SimpleForm.SimpleFormHeader, {
         title: field.label
-      }), field.helpText && /*#__PURE__*/React.createElement(FormElementMessage, null, field.helpText)), /*#__PURE__*/React.createElement(Cell, {
+      }), field.helpText && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, field.helpText)), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
         span: 12,
-        className: fieldsWrapperStyle
-      }, /*#__PURE__*/React.createElement(Fields, {
+        className: _StyledComponents.fieldsWrapperStyle
+      }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
         Bind: Bind,
         contentModel: contentModel,
-        fields: field.settings.fields,
-        layout: field.settings.layout
+        fields: settings.fields || [],
+        layout: settings.layout || []
       })));
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/object/singleObject.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","contentModel","Bind","settings","label","helpText","fieldsWrapperStyle","fields","layout"],"sources":["singleObject.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { SimpleFormHeader } from \"@webiny/app-admin/components/SimpleForm\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { fieldsWrapperStyle } from \"./StyledComponents\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-object\",\n    renderer: {\n        rendererName: \"object\",\n        name: t`Object`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !field.multipleValues;\n        },\n        render({ field, getBind, contentModel }) {\n            const Bind = getBind();\n\n            const settings = field.settings || {};\n\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <SimpleFormHeader title={field.label} />\n                        {field.helpText && (\n                            <FormElementMessage>{field.helpText}</FormElementMessage>\n                        )}\n                    </Cell>\n                    <Cell span={12} className={fieldsWrapperStyle}>\n                        <Fields\n                            Bind={Bind}\n                            contentModel={contentModel}\n                            fields={settings.fields || []}\n                            layout={settings.layout || []}\n                        />\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,kCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,QADR;IAENF,IAAI,EAAEL,CAAF,yFAFE;IAGNQ,WAAW,EAAER,CAAF,6GAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,QAAf,IAA2B,CAACM,KAAK,CAACC,cAAzC;IACH,CANK;IAONC,MAPM,yBAOmC;MAAA,IAAhCF,KAAgC,SAAhCA,KAAgC;MAAA,IAAzBG,OAAyB,SAAzBA,OAAyB;MAAA,IAAhBC,YAAgB,SAAhBA,YAAgB;MACrC,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,QAAQ,GAAGN,KAAK,CAACM,QAAN,IAAkB,EAAnC;MAEA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,4BAAD;QAAkB,KAAK,EAAEN,KAAK,CAACO;MAA/B,EADJ,EAEKP,KAAK,CAACQ,QAAN,iBACG,6BAAC,sCAAD,QAAqBR,KAAK,CAACQ,QAA3B,CAHR,CADJ,eAOI,6BAAC,UAAD;QAAM,IAAI,EAAE,EAAZ;QAAgB,SAAS,EAAEC;MAA3B,gBACI,6BAAC,cAAD;QACI,IAAI,EAAEJ,IADV;QAEI,YAAY,EAAED,YAFlB;QAGI,MAAM,EAAEE,QAAQ,CAACI,MAAT,IAAmB,EAH/B;QAII,MAAM,EAAEJ,QAAQ,CAACK,MAAT,IAAmB;MAJ/B,EADJ,CAPJ,CADJ;IAkBH;EA9BK;AAH+B,CAA7C;eAqCelB,M"}

package/admin/plugins/fieldRenderers/radioButtons.js

@@ -1,45 +1,68 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _i18n = require("@webiny/app/i18n");
+
+var _Radio = require("@webiny/ui/Radio");
 
 var _templateObject, _templateObject2;
 
-import React from "react";
-import get from "lodash/get";
-import { i18n } from "@webiny/app/i18n";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
+
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-radio-buttons",
   renderer: {
     rendererName: "radio-buttons",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Radio Buttons"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders radio buttons, allowing selection of a single value."]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Radio Buttons"]))),
+    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders radio buttons, allowing selection of a single value."]))),
     canUse: function canUse(_ref) {
       var field = _ref.field;
-      return !field.multipleValues && get(field, "predefinedValues.enabled");
+      return !field.multipleValues && !!(0, _get.default)(field, "predefinedValues.enabled");
     },
     render: function render(_ref2) {
       var field = _ref2.field,
           getBind = _ref2.getBind;
       var Bind = getBind();
-      var options = field.predefinedValues.values;
-      return /*#__PURE__*/React.createElement(Bind, null, /*#__PURE__*/React.createElement(RadioGroup, {
+
+      var _ref3 = field.predefinedValues || {
+        options: []
+      },
+          _ref3$values = _ref3.values,
+          options = _ref3$values === void 0 ? [] : _ref3$values;
+
+      return /*#__PURE__*/_react.default.createElement(Bind, null, /*#__PURE__*/_react.default.createElement(_Radio.RadioGroup, {
         label: field.label,
         description: field.helpText
-      }, function (_ref3) {
-        var onChange = _ref3.onChange,
-            getValue = _ref3.getValue;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (option, index) {
-          return /*#__PURE__*/React.createElement("div", {
-            key: option.value + index
-          }, /*#__PURE__*/React.createElement(Radio, {
+      }, function (_ref4) {
+        var onChange = _ref4.onChange,
+            getValue = _ref4.getValue;
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options.map(function (option, index) {
+          var value = field.type === "number" ? Number(option.value) : option.value;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: String(option.value) + index
+          }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
             label: option.label,
-            value: getValue(option.value),
-            onChange: onChange(option.value)
+            value: getValue(value),
+            onChange: onChange(value),
+            "data-testid": "fr.input.".concat(field.label, ".").concat(option.label)
           }));
         }));
       }));
     }
   }
 };
-export default plugin;
+var _default = plugin;
+exports.default = _default;

package/admin/plugins/fieldRenderers/radioButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","predefinedValues","options","values","label","helpText","onChange","getValue","map","option","index","value","Number","String"],"sources":["radioButtons.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-radio-buttons\",\n    renderer: {\n        rendererName: \"radio-buttons\",\n        name: t`Radio Buttons`,\n        description: t`Renders radio buttons, allowing selection of a single value.`,\n        canUse({ field }) {\n            return !field.multipleValues && !!get(field, \"predefinedValues.enabled\");\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            const { values: options = [] } = field.predefinedValues || {\n                options: []\n            };\n\n            return (\n                <Bind>\n                    <RadioGroup label={field.label} description={field.helpText}>\n                        {({ onChange, getValue }) => (\n                            <React.Fragment>\n                                {options.map((option, index) => {\n                                    const value =\n                                        field.type === \"number\"\n                                            ? Number(option.value)\n                                            : option.value;\n                                    return (\n                                        <div key={String(option.value) + index}>\n                                            <Radio\n                                                label={option.label}\n                                                value={getValue(value)}\n                                                onChange={onChange(value)}\n                                                data-testid={`fr.input.${field.label}.${option.label}`}\n                                            />\n                                        </div>\n                                    );\n                                })}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,yCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,iJAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAO,CAACA,KAAK,CAACC,cAAP,IAAyB,CAAC,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAAlC;IACH,CANK;IAONG,MAPM,yBAOqB;MAAA,IAAlBH,KAAkB,SAAlBA,KAAkB;MAAA,IAAXI,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;;MAEA,YAAiCJ,KAAK,CAACM,gBAAN,IAA0B;QACvDC,OAAO,EAAE;MAD8C,CAA3D;MAAA,yBAAQC,MAAR;MAAA,IAAgBD,OAAhB,6BAA0B,EAA1B;;MAIA,oBACI,6BAAC,IAAD,qBACI,6BAAC,iBAAD;QAAY,KAAK,EAAEP,KAAK,CAACS,KAAzB;QAAgC,WAAW,EAAET,KAAK,CAACU;MAAnD,GACK;QAAA,IAAGC,QAAH,SAAGA,QAAH;QAAA,IAAaC,QAAb,SAAaA,QAAb;QAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKL,OAAO,CAACM,GAAR,CAAY,UAACC,MAAD,EAASC,KAAT,EAAmB;UAC5B,IAAMC,KAAK,GACPhB,KAAK,CAACN,IAAN,KAAe,QAAf,GACMuB,MAAM,CAACH,MAAM,CAACE,KAAR,CADZ,GAEMF,MAAM,CAACE,KAHjB;UAIA,oBACI;YAAK,GAAG,EAAEE,MAAM,CAACJ,MAAM,CAACE,KAAR,CAAN,GAAuBD;UAAjC,gBACI,6BAAC,YAAD;YACI,KAAK,EAAED,MAAM,CAACL,KADlB;YAEI,KAAK,EAAEG,QAAQ,CAACI,KAAD,CAFnB;YAGI,QAAQ,EAAEL,QAAQ,CAACK,KAAD,CAHtB;YAII,kCAAyBhB,KAAK,CAACS,KAA/B,cAAwCK,MAAM,CAACL,KAA/C;UAJJ,EADJ,CADJ;QAUH,CAfA,CADL,CADH;MAAA,CADL,CADJ,CADJ;IA0BH;EAxCK;AAH+B,CAA7C;eA+CehB,M"}

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.d.ts

@@ -1,6 +1,9 @@
-/// <reference types="react" />
-declare function ContentEntriesAutocomplete({ bind, field }: {
-    bind: any;
-    field: any;
-}): JSX.Element;
+import React from "react";
+import { CmsEditorField } from "../../../../../types";
+import { BindComponentRenderProp } from "@webiny/form";
+interface ContentEntriesAutocompleteProps {
+    bind: BindComponentRenderProp;
+    field: CmsEditorField;
+}
+declare const ContentEntriesAutocomplete: React.FC<ContentEntriesAutocompleteProps>;
 export default ContentEntriesAutocomplete;

package/admin/plugins/fieldRenderers/ref/components/ContentEntriesAutocomplete.js

@@ -1,22 +1,65 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+"use strict";
 
-var _templateObject, _templateObject2;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
-import React from "react";
-import debounce from "lodash/debounce";
-import { AutoComplete } from "@webiny/ui/AutoComplete";
-import { i18n } from "@webiny/app/i18n";
-import { Link } from "@webiny/react-router";
-import { useReference } from "./useReference";
-import { renderItem } from "./renderItem";
-var t = i18n.ns("app-headless-cms/admin/fields/ref");
-var label = t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry."])));
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 
-function ContentEntriesAutocomplete(_ref) {
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _NewRefEntryFormDialog = _interopRequireWildcard(require("./NewRefEntryFormDialog"));
+
+var _AutoComplete = require("@webiny/ui/AutoComplete");
+
+var _i18n = require("@webiny/app/i18n");
+
+var _reactRouter = require("@webiny/react-router");
+
+var _useNewRefEntry2 = require("../hooks/useNewRefEntry");
+
+var _useReference2 = require("./useReference");
+
+var _renderItem = require("./renderItem");
+
+var _createEntryUrl = require("./createEntryUrl");
+
+var _EntryStatus = require("./EntryStatus");
+
+var _utils = require("@webiny/utils");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
+
+var unpublishedLabel = t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Selected content entry is not published. Make sure to {publishItLink} before publishing the main content entry."])));
+var publishedLabel = t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Selected content entry is published. You can view it {here}."])));
+
+var getItemOption = function getItemOption(options, id) {
+  if (!id || !options || options.length === 0) {
+    return null;
+  }
+
+  var _parseIdentifier = (0, _utils.parseIdentifier)(id),
+      entryId = _parseIdentifier.id;
+
+  return options.find(function (item) {
+    return item.entryId === entryId;
+  }) || null;
+};
+
+var ContentEntriesAutocomplete = function ContentEntriesAutocomplete(_ref) {
   var bind = _ref.bind,
       field = _ref.field;
 
-  var _useReference = useReference({
+  var _useReference = (0, _useReference2.useReference)({
     bind: bind,
     field: field
   }),
@@ -24,31 +67,84 @@ function ContentEntriesAutocomplete(_ref) {
       setSearch = _useReference.setSearch,
       value = _useReference.value,
       loading = _useReference.loading,
-      onChange = _useReference.onChange;
+      _onChange = _useReference.onChange;
 
-  var unpublishedEntryInfo = null;
+  var entryInfo = null;
 
   if (value && !value.published) {
-    var link = "/cms/content-entries/".concat(value.modelId, "?id=").concat(encodeURIComponent(value.id));
-    unpublishedEntryInfo = label({
-      publishItLink: /*#__PURE__*/React.createElement(Link, {
+    var link = (0, _createEntryUrl.createEntryUrl)(value);
+    entryInfo = unpublishedLabel({
+      publishItLink: /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
         to: link
-      }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["publish it"]))))
+      }, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["publish it"]))))
+    });
+  } else if (value) {
+    var _link = (0, _createEntryUrl.createEntryUrl)(value);
+
+    entryInfo = publishedLabel({
+      here: /*#__PURE__*/_react.default.createElement(_reactRouter.Link, {
+        to: _link
+      }, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["here"]))))
     });
   }
 
-  return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, bind, {
-    renderItem: renderItem,
-    onChange: onChange,
+  var _useNewRefEntry = (0, _useNewRefEntry2.useNewRefEntry)({
+    field: field
+  }),
+      renderNewEntryModal = _useNewRefEntry.renderNewEntryModal,
+      refModelId = _useNewRefEntry.refModelId,
+      helpText = _useNewRefEntry.helpText;
+
+  var item = getItemOption(options, bind.value ? bind.value.id : null);
+  /*
+   * Wrap AutoComplete input in NewRefEntry modal.
+   */
+
+  if (renderNewEntryModal) {
+    return /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.default, {
+      modelId: refModelId,
+      onChange: function onChange(entry) {
+        /**
+         * TODO @ts-refactor @ashutosh
+         * Need to figure out correct types.
+         */
+        // @ts-ignore
+        return _onChange(entry, entry);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, Object.assign({}, bind, {
+      renderItem: _renderItem.renderItem,
+      onChange: _onChange,
+      loading: loading,
+      value: value || undefined,
+      options: options,
+      label: field.label,
+      "data-testid": "fr.input.autocomplete.".concat(field.label),
+      description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, /*#__PURE__*/_react.default.createElement(_EntryStatus.EntryStatus, {
+        item: item
+      }, entryInfo)),
+      onInput: (0, _debounce.default)(function (search) {
+        return setSearch(search);
+      }, 250),
+      noResultFound: /*#__PURE__*/_react.default.createElement(_NewRefEntryFormDialog.NewEntryButton, null)
+    })));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_AutoComplete.AutoComplete, Object.assign({}, bind, {
+    renderItem: _renderItem.renderItem,
+    onChange: _onChange,
     loading: loading,
-    value: value ? value.id : null,
+    value: value || undefined,
     options: options,
     label: field.label,
-    description: /*#__PURE__*/React.createElement(React.Fragment, null, field.helpText, unpublishedEntryInfo),
-    onInput: debounce(function (search) {
+    description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.helpText, /*#__PURE__*/_react.default.createElement(_EntryStatus.EntryStatus, {
+      item: item
+    }, entryInfo)),
+    onInput: (0, _debounce.default)(function (search) {
       return setSearch(search);
-    }, 250)
+    }, 250),
+    noResultFound: helpText
   }));
-}
+};
 
-export default ContentEntriesAutocomplete;
+var _default = ContentEntriesAutocomplete;
+exports.default = _default;