@webiny/app-headless-cms 5.42.2-beta.0 → 5.42.2-beta.2

package/admin/plugins/fieldRenderers/number/numberInputs.js

@@ -10,9 +10,10 @@ var _react = _interopRequireDefault(require("react"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _Input = require("@webiny/ui/Input");
 var _i18n = require("@webiny/app/i18n");
-var _close = require("../../../icons/close.svg");
+var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
 var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
 var _DelayedOnChange = require("@webiny/ui/DelayedOnChange");
+var _MultiValueRendererSettings = require("../MultiValueRendererSettings");
 var _templateObject, _templateObject2, _templateObject3;
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
 var plugin = {
@@ -46,13 +47,16 @@ var plugin = {
           "data-testid": "fr.input.numbers.".concat(props.field.label, ".").concat(index + 1),
           type: "number",
           trailingIcon: {
-            icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
+            icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
             onClick: function onClick() {
               return bind.field.removeValue(index);
             }
           }
         }));
       });
+    },
+    renderSettings: function renderSettings(props) {
+      return /*#__PURE__*/_react.default.createElement(_MultiValueRendererSettings.MultiValueRendererSettings, props);
     }
   }
 };

package/admin/plugins/fieldRenderers/number/numberInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_get","_Input","_i18n","_close","_DynamicSection","_DelayedOnChange","_templateObject","_templateObject2","_templateObject3","t","i18n","ns","plugin","type","name","renderer","rendererName","_taggedTemplateLiteral2","default","description","canUse","_ref","field","multipleValues","get","render","props","createElement","_ref2","bind","index","DelayedOnChange","value","onChange","onBlur","validate","Input","validation","onEnter","appendValue","label","number","placeholder","placeholderText","concat","trailingIcon","icon","ReactComponent","onClick","removeValue","_default","exports"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport DynamicSection from \"../DynamicSection\";\nimport { DelayedOnChange } from \"@webiny/ui/DelayedOnChange\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number-inputs\",\n    renderer: {\n        rendererName: \"number-inputs\",\n        name: t`Number Inputs`,\n        description: t`Renders a simple list of number inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <DelayedOnChange\n                            value={bind.index.value}\n                            onChange={bind.index.onChange}\n                            onBlur={bind.index.validate}\n                        >\n                            <Input\n                                validation={bind.index.validation}\n                                onEnter={() => bind.field.appendValue(\"\")}\n                                label={t`Value {number}`({ number: index + 1 })}\n                                placeholder={props.field.placeholderText}\n                                data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}\n                                type=\"number\"\n                                trailingIcon={{\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }}\n                            />\n                        </DelayedOnChange>\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AAA6D,IAAAO,eAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAE7D,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,oCAAoC,CAAC;AAEvD,IAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,yCAAyC;EAC/CC,QAAQ,EAAE;IACNC,YAAY,EAAE,eAAe;IAC7BF,IAAI,EAAEL,CAAC,CAAAH,eAAA,KAAAA,eAAA,OAAAW,uBAAA,CAAAC,OAAA,sBAAe;IACtBC,WAAW,EAAEV,CAAC,CAAAF,gBAAA,KAAAA,gBAAA,OAAAU,uBAAA,CAAAC,OAAA,gDAAyC;IACvDE,MAAM,WAANA,MAAMA,CAAAC,IAAA,EAAY;MAAA,IAATC,KAAK,GAAAD,IAAA,CAALC,KAAK;MACV,OACIA,KAAK,CAACT,IAAI,KAAK,QAAQ,IACvB,CAAC,CAACS,KAAK,CAACC,cAAc,IACtB,CAAC,IAAAC,YAAG,EAACF,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDG,MAAM,WAANA,MAAMA,CAACC,KAAK,EAAE;MACV,oBACI7B,MAAA,CAAAqB,OAAA,CAAAS,aAAA,CAACvB,eAAA,CAAAc,OAAc,EAAKQ,KAAK,EACpB,UAAAE,KAAA;QAAA,IAAGC,IAAI,GAAAD,KAAA,CAAJC,IAAI;UAAEC,KAAK,GAAAF,KAAA,CAALE,KAAK;QAAA,oBACXjC,MAAA,CAAAqB,OAAA,CAAAS,aAAA,CAACtB,gBAAA,CAAA0B,eAAe;UACZC,KAAK,EAAEH,IAAI,CAACC,KAAK,CAACE,KAAM;UACxBC,QAAQ,EAAEJ,IAAI,CAACC,KAAK,CAACG,QAAS;UAC9BC,MAAM,EAAEL,IAAI,CAACC,KAAK,CAACK;QAAS,gBAE5BtC,MAAA,CAAAqB,OAAA,CAAAS,aAAA,CAAC1B,MAAA,CAAAmC,KAAK;UACFC,UAAU,EAAER,IAAI,CAACC,KAAK,CAACO,UAAW;UAClCC,OAAO,EAAE,SAATA,OAAOA,CAAA;YAAA,OAAQT,IAAI,CAACP,KAAK,CAACiB,WAAW,CAAC,EAAE,CAAC;UAAA,CAAC;UAC1CC,KAAK,EAAE/B,CAAC,CAAAD,gBAAA,KAAAA,gBAAA,OAAAS,uBAAA,CAAAC,OAAA,wBAAiB;YAAEuB,MAAM,EAAEX,KAAK,GAAG;UAAE,CAAC,CAAE;UAChDY,WAAW,EAAEhB,KAAK,CAACJ,KAAK,CAACqB,eAAgB;UACzC,mCAAAC,MAAA,CAAiClB,KAAK,CAACJ,KAAK,CAACkB,KAAK,OAAAI,MAAA,CAAId,KAAK,GAAG,CAAC,CAAG;UAClEjB,IAAI,EAAC,QAAQ;UACbgC,YAAY,EAAE;YACVC,IAAI,eAAEjD,MAAA,CAAAqB,OAAA,CAAAS,aAAA,CAACxB,MAAA,CAAA4C,cAAU,MAAE,CAAC;YACpBC,OAAO,EAAE,SAATA,OAAOA,CAAA;cAAA,OAAQnB,IAAI,CAACP,KAAK,CAAC2B,WAAW,CAACnB,KAAK,CAAC;YAAA;UAChD;QAAE,CACL,CACY,CAAC;MAAA,CAEV,CAAC;IAEzB;EACJ;AACJ,CAAC;AAAC,IAAAoB,QAAA,GAAAC,OAAA,CAAAjC,OAAA,GAEaN,MAAM","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_get","_Input","_i18n","_delete_outline","_DynamicSection","_DelayedOnChange","_MultiValueRendererSettings","_templateObject","_templateObject2","_templateObject3","t","i18n","ns","plugin","type","name","renderer","rendererName","_taggedTemplateLiteral2","default","description","canUse","_ref","field","multipleValues","get","render","props","createElement","_ref2","bind","index","DelayedOnChange","value","onChange","onBlur","validate","Input","validation","onEnter","appendValue","label","number","placeholder","placeholderText","concat","trailingIcon","icon","ReactComponent","onClick","removeValue","renderSettings","MultiValueRendererSettings","_default","exports"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport DynamicSection from \"../DynamicSection\";\nimport { DelayedOnChange } from \"@webiny/ui/DelayedOnChange\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number-inputs\",\n    renderer: {\n        rendererName: \"number-inputs\",\n        name: t`Number Inputs`,\n        description: t`Renders a simple list of number inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <DelayedOnChange\n                            value={bind.index.value}\n                            onChange={bind.index.onChange}\n                            onBlur={bind.index.validate}\n                        >\n                            <Input\n                                validation={bind.index.validation}\n                                onEnter={() => bind.field.appendValue(\"\")}\n                                label={t`Value {number}`({ number: index + 1 })}\n                                placeholder={props.field.placeholderText}\n                                data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}\n                                type=\"number\"\n                                trailingIcon={{\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }}\n                            />\n                        </DelayedOnChange>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/MultiValueContainer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BindComponentRenderProp, CmsModelFieldRendererProps } from "@webiny/app-headless-cms-common/types";
+type GetBind = CmsModelFieldRendererProps["getBind"];
+export interface MultiValueContainerProps {
+    bind: BindComponentRenderProp;
+    getBind: GetBind;
+    showTitle?: boolean;
+}
+export declare const MultiValueContainer: (props: MultiValueContainerProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,118 @@
+"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.MultiValueContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread8 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@webiny/utils");
+var _Grid = require("@webiny/ui/Grid");
+var _appAdmin = require("@webiny/app-admin");
+var _MultiValueItemContainer = require("./MultiValueItemContainer");
+var _Fields = require("../../../components/ContentEntryForm/Fields");
+var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
+var _StyledComponents = require("./StyledComponents");
+var _FieldSettings = require("./FieldSettings");
+var _ModelFieldProvider = require("../../../components/ModelFieldProvider");
+var _ModelProvider = require("../../../components/ModelProvider");
+var MultiValueContainer = exports.MultiValueContainer = function MultiValueContainer(props) {
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    highlightMap = _useState2[0],
+    setHighlightIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    itemState = _useState4[0],
+    setItemState = _useState4[1];
+  var _useModel = (0, _ModelProvider.useModel)(),
+    model = _useModel.model;
+  var _useModelField = (0, _ModelFieldProvider.useModelField)(),
+    field = _useModelField.field;
+  var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
+      message: "Are you sure you want to delete this item? This action is not reversible.",
+      acceptLabel: "Yes, I'm sure!",
+      cancelLabel: "No, leave it."
+    }),
+    showConfirmation = _useConfirmationDialo.showConfirmation;
+  var fieldSettings = _FieldSettings.FieldSettings.createFrom(field);
+  if (!fieldSettings.hasFields()) {
+    fieldSettings.logMissingFields();
+    return null;
+  }
+  var toggleItemState = function toggleItemState(index) {
+    setItemState(function (state) {
+      return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)({}, index, !state[index]));
+    });
+  };
+  var onAddItem = function onAddItem(index) {
+    setItemState(function (state) {
+      return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)({}, index, true));
+    });
+  };
+  var settings = fieldSettings.getSettings();
+  return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
+    showLabel: props.showTitle,
+    field: field,
+    emptyValue: {},
+    onAddItem: onAddItem,
+    gridClassName: _StyledComponents.dynamicSectionGridStyle
+  }), function (_ref) {
+    var Bind = _ref.Bind,
+      bind = _ref.bind,
+      index = _ref.index;
+    var onMoveDown = function onMoveDown() {
+      bind.field.moveValueDown(index);
+      setHighlightIndex(function (map) {
+        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+      });
+      setItemState(function (state) {
+        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, index + 1, state[index] ?? false), index, state[index + 1] ?? false));
+      });
+    };
+    var onMoveUp = function onMoveUp() {
+      bind.field.moveValueUp(index);
+      setHighlightIndex(function (map) {
+        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+      });
+      setItemState(function (state) {
+        return (0, _objectSpread8.default)((0, _objectSpread8.default)({}, state), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, index - 1, state[index] ?? false), index, state[index - 1] ?? false));
+      });
+    };
+    var onDelete = function onDelete() {
+      showConfirmation(function () {
+        bind.field.removeValue(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(_MultiValueItemContainer.MultiValueItemContainer, {
+      value: bind.index.value,
+      title: "".concat(field.label, " #").concat(index + 1),
+      isFirst: index === 0,
+      isLast: index === bind.field.value.length - 1,
+      onMoveUp: onMoveUp,
+      onMoveDown: onMoveDown,
+      onDelete: onDelete,
+      isExpanded: itemState[index] ?? false,
+      toggleExpanded: function toggleExpanded() {
+        return toggleItemState(index);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+      span: 12,
+      className: _StyledComponents.fieldsWrapperStyle
+    }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
+      Bind: Bind,
+      contentModel: model,
+      fields: settings.fields,
+      layout: settings.layout,
+      gridClassName: _StyledComponents.fieldsGridStyle
+    }))));
+  });
+};
+
+//# sourceMappingURL=MultiValueContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_utils","_Grid","_appAdmin","_MultiValueItemContainer","_Fields","_DynamicSection","_interopRequireDefault","_StyledComponents","_FieldSettings","_ModelFieldProvider","_ModelProvider","MultiValueContainer","exports","props","_useState","useState","_useState2","_slicedToArray2","default","highlightMap","setHighlightIndex","_useState3","_useState4","itemState","setItemState","_useModel","useModel","model","_useModelField","useModelField","field","_useConfirmationDialo","useConfirmationDialog","message","acceptLabel","cancelLabel","showConfirmation","fieldSettings","FieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","_objectSpread8","_defineProperty2","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","dynamicSectionGridStyle","_ref","Bind","bind","onMoveDown","moveValueDown","map","generateAlphaNumericLowerCaseId","onMoveUp","moveValueUp","onDelete","removeValue","ObjectItem","ItemHighLight","key","MultiValueItemContainer","value","title","concat","label","isFirst","isLast","length","isExpanded","toggleExpanded","Cell","span","className","fieldsWrapperStyle","Fields","contentModel","fields","layout","fieldsGridStyle"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    fieldsWrapperStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider\";\nimport { useModel } from \"~/admin/components/ModelProvider\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12} className={fieldsWrapperStyle}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAKA,IAAAI,wBAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,iBAAA,GAAAR,OAAA;AAOA,IAAAS,cAAA,GAAAT,OAAA;AACA,IAAAU,mBAAA,GAAAV,OAAA;AACA,IAAAW,cAAA,GAAAX,OAAA;AAUO,IAAMY,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIE,KAA+B,EAAK;EACpE,IAAAC,SAAA,GAA0C,IAAAC,eAAQ,EAA4B,CAAC,CAAC,CAAC;IAAAC,UAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,SAAA;IAA1EK,YAAY,GAAAH,UAAA;IAAEI,iBAAiB,GAAAJ,UAAA;EACtC,IAAAK,UAAA,GAAkC,IAAAN,eAAQ,EAA6B,CAAC,CAAC,CAAC;IAAAO,UAAA,OAAAL,eAAA,CAAAC,OAAA,EAAAG,UAAA;IAAnEE,SAAS,GAAAD,UAAA;IAAEE,YAAY,GAAAF,UAAA;EAE9B,IAAAG,SAAA,GAAkB,IAAAC,uBAAQ,EAAC,CAAC;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK;EACb,IAAAC,cAAA,GAAkB,IAAAC,iCAAa,EAAC,CAAC;IAAzBC,KAAK,GAAAF,cAAA,CAALE,KAAK;EAEb,IAAAC,qBAAA,GAA6B,IAAAC,+BAAqB,EAAC;MAC/CC,OAAO,6EAA6E;MACpFC,WAAW,kBAAkB;MAC7BC,WAAW;IACf,CAAC,CAAC;IAJMC,gBAAgB,GAAAL,qBAAA,CAAhBK,gBAAgB;EAMxB,IAAMC,aAAa,GAAGC,4BAAa,CAACC,UAAU,CAACT,KAAK,CAAC;EAErD,IAAI,CAACO,aAAa,CAACG,SAAS,CAAC,CAAC,EAAE;IAC5BH,aAAa,CAACI,gBAAgB,CAAC,CAAC;IAChC,OAAO,IAAI;EACf;EAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAAa,EAAK;IACvCnB,YAAY,CAAC,UAAAoB,KAAK;MAAA,WAAAC,cAAA,CAAA3B,OAAA,MAAA2B,cAAA,CAAA3B,OAAA,MAAU0B,KAAK,WAAAE,gBAAA,CAAA5B,OAAA,MAAGyB,KAAK,EAAG,CAACC,KAAK,CAACD,KAAK,CAAC;IAAA,CAAG,CAAC;EACjE,CAAC;EAED,IAAMI,SAAS,GAAG,SAAZA,SAASA,CAAIJ,KAAa,EAAK;IACjCnB,YAAY,CAAC,UAAAoB,KAAK;MAAA,WAAAC,cAAA,CAAA3B,OAAA,MAAA2B,cAAA,CAAA3B,OAAA,MAAU0B,KAAK,WAAAE,gBAAA,CAAA5B,OAAA,MAAGyB,KAAK,EAAG,IAAI;IAAA,CAAG,CAAC;EACxD,CAAC;EAED,IAAMK,QAAQ,GAAGX,aAAa,CAACY,WAAW,CAAC,CAAC;EAE5C,oBACIpD,MAAA,CAAAqB,OAAA,CAAAgC,aAAA,CAAC7C,eAAA,CAAAa,OAAc,EAAAiC,MAAA,CAAAC,MAAA,KACPvC,KAAK;IACTwC,SAAS,EAAExC,KAAK,CAACyC,SAAU;IAC3BxB,KAAK,EAAEA,KAAM;IACbyB,UAAU,EAAE,CAAC,CAAE;IACfR,SAAS,EAAEA,SAAU;IACrBS,aAAa,EAAEC;EAAwB,IAEtC,UAAAC,IAAA,EAA2B;IAAA,IAAxBC,IAAI,GAAAD,IAAA,CAAJC,IAAI;MAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEjB,KAAK,GAAAe,IAAA,CAALf,KAAK;IACjB,IAAMkB,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;MACrBD,IAAI,CAAC9B,KAAK,CAACgC,aAAa,CAACnB,KAAK,CAAC;MAE/BvB,iBAAiB,CAAC,UAAA2C,GAAG;QAAA,WAAAlB,cAAA,CAAA3B,OAAA,MAAA2B,cAAA,CAAA3B,OAAA,MACd6C,GAAG,WAAAjB,gBAAA,CAAA5B,OAAA,MACLyB,KAAK,GAAG,CAAC,EAAG,IAAAqB,sCAA+B,EAAC,EAAE,CAAC;MAAA,CAClD,CAAC;MAEHxC,YAAY,CAAC,UAAAoB,KAAK,EAAI;QAClB,WAAAC,cAAA,CAAA3B,OAAA,MAAA2B,cAAA,CAAA3B,OAAA,MACO0B,KAAK,WAAAE,gBAAA,CAAA5B,OAAA,MAAA4B,gBAAA,CAAA5B,OAAA,MACPyB,KAAK,GAAG,CAAC,EAAGC,KAAK,CAACD,KAAK,CAAC,IAAI,KAAK,GACjCA,KAAK,EAAGC,KAAK,CAACD,KAAK,GAAG,CAAC,CAAC,IAAI,KAAK;MAE1C,CAAC,CAAC;IACN,CAAC;IAED,IAAMsB,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;MACnBL,IAAI,CAAC9B,KAAK,CAACoC,WAAW,CAACvB,KAAK,CAAC;MAE7BvB,iBAAiB,CAAC,UAAA2C,GAAG;QAAA,WAAAlB,cAAA,CAAA3B,OAAA,MAAA2B,cAAA,CAAA3B,OAAA,MACd6C,GAAG,WAAAjB,gBAAA,CAAA5B,OAAA,MACLyB,KAAK,GAAG,CAAC,EAAG,IAAAqB,sCAA+B,EAAC,EAAE,CAAC;MAAA,CAClD,CAAC;MAEHxC,YAAY,CAAC,UAAAoB,KAAK,EAAI;QAClB,WAAAC,cAAA,CAAA3B,OAAA,MAAA2B,cAAA,CAAA3B,OAAA,MACO0B,KAAK,WAAAE,gBAAA,CAAA5B,OAAA,MAAA4B,gBAAA,CAAA5B,OAAA,MACPyB,KAAK,GAAG,CAAC,EAAGC,KAAK,CAACD,KAAK,CAAC,IAAI,KAAK,GACjCA,KAAK,EAAGC,KAAK,CAACD,KAAK,GAAG,CAAC,CAAC,IAAI,KAAK;MAE1C,CAAC,CAAC;IACN,CAAC;IAED,IAAMwB,QAAQ,GAAG,SAAXA,QAAQA,CAAA,EAAS;MACnB/B,gBAAgB,CAAC,YAAM;QACnBwB,IAAI,CAAC9B,KAAK,CAACsC,WAAW,CAACzB,KAAK,CAAC;MACjC,CAAC,CAAC;IACN,CAAC;IAED,oBACI9C,MAAA,CAAAqB,OAAA,CAAAgC,aAAA,CAAC3C,iBAAA,CAAA8D,UAAU,QACNlD,YAAY,CAACwB,KAAK,CAAC,gBAAG9C,MAAA,CAAAqB,OAAA,CAAAgC,aAAA,CAAC3C,iBAAA,CAAA+D,aAAa;MAACC,GAAG,EAAEpD,YAAY,CAACwB,KAAK;IAAE,CAAE,CAAC,GAAG,IAAI,eACzE9C,MAAA,CAAAqB,OAAA,CAAAgC,aAAA,CAAC/C,wBAAA,CAAAqE,uBAAuB;MACpBC,KAAK,EAAEb,IAAI,CAACjB,KAAK,CAAC8B,KAAM;MACxBC,KAAK,KAAAC,MAAA,CAAK7C,KAAK,CAAC8C,KAAK,QAAAD,MAAA,CAAKhC,KAAK,GAAG,CAAC,CAAG;MACtCkC,OAAO,EAAElC,KAAK,KAAK,CAAE;MACrBmC,MAAM,EAAEnC,KAAK,KAAKiB,IAAI,CAAC9B,KAAK,CAAC2C,KAAK,CAACM,MAAM,GAAG,CAAE;MAC9Cd,QAAQ,EAAEA,QAAS;MACnBJ,UAAU,EAAEA,UAAW;MACvBM,QAAQ,EAAEA,QAAS;MACnBa,UAAU,EAAEzD,SAAS,CAACoB,KAAK,CAAC,IAAI,KAAM;MACtCsC,cAAc,EAAE,SAAhBA,cAAcA,CAAA;QAAA,OAAQvC,eAAe,CAACC,KAAK,CAAC;MAAA;IAAC,gBAE7C9C,MAAA,CAAAqB,OAAA,CAAAgC,aAAA,CAACjD,KAAA,CAAAiF,IAAI;MAACC,IAAI,EAAE,EAAG;MAACC,SAAS,EAAEC;IAAmB,gBAC1CxF,MAAA,CAAAqB,OAAA,CAAAgC,aAAA,CAAC9C,OAAA,CAAAkF,MAAM;MACH3B,IAAI,EAAEA,IAAK;MACX4B,YAAY,EAAE5D,KAAM;MACpB6D,MAAM,EAAExC,QAAQ,CAACwC,MAAO;MACxBC,MAAM,EAAEzC,QAAQ,CAACyC,MAAO;MACxBjC,aAAa,EAAEkC;IAAgB,CAClC,CACC,CACe,CACjB,CAAC;EAErB,CACY,CAAC;AAEzB,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { GenericRecord } from "@webiny/app/types";
+export interface MultiValueItemContainerProps {
+    value: GenericRecord<string>;
+    isFirst: boolean;
+    isLast: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+    title: string;
+    children: React.ReactNode;
+}
+export declare const MultiValueItemContainer: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+    original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element) & {
+        original: ({ children, ...props }: MultiValueItemContainerProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiValueItemContainer = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactComposition = require("@webiny/react-composition");
+var _Accordion = _interopRequireDefault(require("../Accordion"));
+var _delete_outline = require("@material-design-icons/svg/outlined/delete_outline.svg");
+var _arrow_drop_up = require("@material-design-icons/svg/outlined/arrow_drop_up.svg");
+var _arrow_drop_down = require("@material-design-icons/svg/outlined/arrow_drop_down.svg");
+var _Button = require("@webiny/ui/Button");
+var _excluded = ["children"];
+var MultiValueItemContainer = exports.MultiValueItemContainer = (0, _reactComposition.makeDecoratable)("MultiValueItemContainer", function (_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var onMoveUp = props.onMoveUp,
+    onMoveDown = props.onMoveDown,
+    onDelete = props.onDelete,
+    isLast = props.isLast,
+    isFirst = props.isFirst;
+  var actions = /*#__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();
+      onMoveDown();
+    },
+    disabled: isLast
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onMoveUp();
+    },
+    disabled: isFirst
+  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    icon: /*#__PURE__*/_react.default.createElement(_delete_outline.ReactComponent, null),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onDelete();
+    }
+  }));
+  return /*#__PURE__*/_react.default.createElement(_Accordion.default, {
+    title: props.title,
+    action: actions,
+    isExpanded: props.isExpanded,
+    toggleExpanded: props.toggleExpanded
+  }, children);
+});
+
+//# sourceMappingURL=MultiValueItemContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactComposition","_Accordion","_delete_outline","_arrow_drop_up","_arrow_drop_down","_Button","_excluded","MultiValueItemContainer","exports","makeDecoratable","_ref","children","props","_objectWithoutProperties2","default","onMoveUp","onMoveDown","onDelete","isLast","isFirst","actions","createElement","Fragment","IconButton","icon","ReactComponent","onClick","e","stopPropagation","disabled","title","action","isExpanded","toggleExpanded"],"sources":["MultiValueItemContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport { GenericRecord } from \"@webiny/app/types\";\nimport { ReactComponent as DeleteIcon } from \"@material-design-icons/svg/outlined/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@material-design-icons/svg/outlined/arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_drop_down.svg\";\nimport { IconButton } from \"@webiny/ui/Button\";\n\nexport interface MultiValueItemContainerProps {\n    value: GenericRecord<string>;\n    isFirst: boolean;\n    isLast: boolean;\n    onMoveUp: () => void;\n    onMoveDown: () => void;\n    onDelete: () => void;\n    isExpanded: boolean;\n    toggleExpanded: () => void;\n    title: string;\n    children: React.ReactNode;\n}\n\nexport const MultiValueItemContainer = makeDecoratable(\n    \"MultiValueItemContainer\",\n    ({ children, ...props }: MultiValueItemContainerProps) => {\n        const { onMoveUp, onMoveDown, onDelete, isLast, isFirst } = props;\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveDown();\n                    }}\n                    disabled={isLast}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onMoveUp();\n                    }}\n                    disabled={isFirst}\n                />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        onDelete();\n                    }}\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                title={props.title}\n                action={actions}\n                isExpanded={props.isExpanded}\n                toggleExpanded={props.toggleExpanded}\n            >\n                {children}\n            </Accordion>\n        );\n    }\n);\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,gBAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAA+C,IAAAO,SAAA;AAexC,IAAMC,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAG,IAAAE,iCAAe,EAClD,yBAAyB,EACzB,UAAAC,IAAA,EAA0D;EAAA,IAAvDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAKC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAJ,IAAA,EAAAJ,SAAA;EACjB,IAAQS,QAAQ,GAA4CH,KAAK,CAAzDG,QAAQ;IAAEC,UAAU,GAAgCJ,KAAK,CAA/CI,UAAU;IAAEC,QAAQ,GAAsBL,KAAK,CAAnCK,QAAQ;IAAEC,MAAM,GAAcN,KAAK,CAAzBM,MAAM;IAAEC,OAAO,GAAKP,KAAK,CAAjBO,OAAO;EAEvD,IAAMC,OAAO,gBACTvB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAAxB,MAAA,CAAAiB,OAAA,CAAAQ,QAAA,qBACIzB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAChB,OAAA,CAAAkB,UAAU;IACPC,IAAI,eAAE3B,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAACjB,gBAAA,CAAAqB,cAAS,MAAE,CAAE;IACpBC,OAAO,EAAE,SAATA,OAAOA,CAAEC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBZ,UAAU,CAAC,CAAC;IAChB,CAAE;IACFa,QAAQ,EAAEX;EAAO,CACpB,CAAC,eACFrB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAChB,OAAA,CAAAkB,UAAU;IACPC,IAAI,eAAE3B,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAClB,cAAA,CAAAsB,cAAO,MAAE,CAAE;IAClBC,OAAO,EAAE,SAATA,OAAOA,CAAEC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBb,QAAQ,CAAC,CAAC;IACd,CAAE;IACFc,QAAQ,EAAEV;EAAQ,CACrB,CAAC,eACFtB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAAChB,OAAA,CAAAkB,UAAU;IACPC,IAAI,eAAE3B,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAACnB,eAAA,CAAAuB,cAAU,MAAE,CAAE;IACrBC,OAAO,EAAE,SAATA,OAAOA,CAAEC,CAAC,EAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,QAAQ,CAAC,CAAC;IACd;EAAE,CACL,CACH,CACL;EAED,oBACIpB,MAAA,CAAAiB,OAAA,CAAAO,aAAA,CAACpB,UAAA,CAAAa,OAAS;IACNgB,KAAK,EAAElB,KAAK,CAACkB,KAAM;IACnBC,MAAM,EAAEX,OAAQ;IAChBY,UAAU,EAAEpB,KAAK,CAACoB,UAAW;IAC7BC,cAAc,EAAErB,KAAK,CAACqB;EAAe,GAEpCtB,QACM,CAAC;AAEpB,CACJ,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/index.d.ts

@@ -1,2 +1,24 @@
+/// <reference types="react" />
+export declare const Components: {
+    MultiValueItemContainer: (({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+        original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: (({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+            original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element) & {
+            original: ({ children, ...props }: import("./MultiValueItemContainer").MultiValueItemContainerProps) => import("react").JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => import("react").JSX.Element;
+    };
+};
 declare const _default: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererPlugin[];
 export default _default;

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

@@ -4,11 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Components = void 0;
 var _singleObjectInline = _interopRequireDefault(require("./singleObjectInline"));
 var _singleObjectAccordion = _interopRequireDefault(require("./singleObjectAccordion"));
 var _multipleObjects = _interopRequireDefault(require("./multipleObjects"));
 var _multipleObjectsAccordion = _interopRequireDefault(require("./multipleObjectsAccordion"));
+var _MultiValueItemContainer = require("./MultiValueItemContainer");
+var Components = exports.Components = {
+  MultiValueItemContainer: _MultiValueItemContainer.MultiValueItemContainer
+};
 var _default = exports.default = [_singleObjectInline.default, _singleObjectAccordion.default, _multipleObjects.default, _multipleObjectsAccordion.default];
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_singleObjectInline","_interopRequireDefault","require","_singleObjectAccordion","_multipleObjects","_multipleObjectsAccordion","_default","exports","default","singleObjectInline","singleObjectAccordion","multipleObjects","multipleObjectsAccordion"],"sources":["index.ts"],"sourcesContent":["import singleObjectInline from \"./singleObjectInline\";\nimport singleObjectAccordion from \"./singleObjectAccordion\";\nimport multipleObjects from \"./multipleObjects\";\nimport multipleObjectsAccordion from \"./multipleObjectsAccordion\";\n\nexport default [\n    singleObjectInline,\n    singleObjectAccordion,\n    multipleObjects,\n    multipleObjectsAccordion\n];\n"],"mappings":";;;;;;;AAAA,IAAAA,mBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,gBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,yBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAAkE,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEnD,CACXC,2BAAkB,EAClBC,8BAAqB,EACrBC,wBAAe,EACfC,iCAAwB,CAC3B","ignoreList":[]}
+{"version":3,"names":["_singleObjectInline","_interopRequireDefault","require","_singleObjectAccordion","_multipleObjects","_multipleObjectsAccordion","_MultiValueItemContainer","Components","exports","MultiValueItemContainer","_default","default","singleObjectInline","singleObjectAccordion","multipleObjects","multipleObjectsAccordion"],"sources":["index.ts"],"sourcesContent":["import singleObjectInline from \"./singleObjectInline\";\nimport singleObjectAccordion from \"./singleObjectAccordion\";\nimport multipleObjects from \"./multipleObjects\";\nimport multipleObjectsAccordion from \"./multipleObjectsAccordion\";\nimport { MultiValueItemContainer } from \"./MultiValueItemContainer\";\n\nexport const Components = {\n    MultiValueItemContainer\n};\n\nexport default [\n    singleObjectInline,\n    singleObjectAccordion,\n    multipleObjects,\n    multipleObjectsAccordion\n];\n"],"mappings":";;;;;;;AAAA,IAAAA,mBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,gBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,yBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,wBAAA,GAAAJ,OAAA;AAEO,IAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACtBE,uBAAuB,EAAvBA;AACJ,CAAC;AAAC,IAAAC,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEa,CACXC,2BAAkB,EAClBC,8BAAqB,EACrBC,wBAAe,EACfC,iCAAwB,CAC3B","ignoreList":[]}

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

@@ -1,117 +1,25 @@
 "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 _react = _interopRequireDefault(require("react"));
 var _i18n = require("@webiny/app/i18n");
-var _Button = require("@webiny/ui/Button");
-var _Grid = require("@webiny/ui/Grid");
-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 _FieldSettings = require("./FieldSettings");
-var _appAdmin = require("@webiny/app-admin");
+var _MultiValueContainer = require("./MultiValueContainer");
+var _MultiValueRendererSettings = require("../MultiValueRendererSettings");
 var _templateObject, _templateObject2;
 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;
-  var _useConfirmationDialo = (0, _appAdmin.useConfirmationDialog)({
-      message: "Are you sure you want to delete this item? This action is not reversible.",
-      acceptLabel: "Yes, I'm sure!",
-      cancelLabel: "No, leave it."
-    }),
-    showConfirmation = _useConfirmationDialo.showConfirmation;
-  var _bind$field = bind.field,
-    moveValueDown = _bind$field.moveValueDown,
-    moveValueUp = _bind$field.moveValueUp;
-  var onDown = (0, _react.useCallback)(function (ev) {
-    ev.stopPropagation();
-    moveValueDown(index);
-    setHighlightIndex(function (map) {
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-    });
-  }, [moveValueDown, index]);
-  var onUp = (0, _react.useCallback)(function (ev) {
-    ev.stopPropagation();
-    moveValueUp(index);
-    setHighlightIndex(function (map) {
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-    });
-  }, [moveValueUp, index]);
-  var onDelete = function onDelete(ev) {
-    ev.stopPropagation();
-    showConfirmation(function () {
-      bind.field.removeValue(index);
-    });
-  };
-  return /*#__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: onDown
-  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
-    onClick: onUp
-  }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
-    onClick: onDelete
-  }));
-};
 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;
-  var fieldSettings = _FieldSettings.FieldSettings.createFrom(field);
-  if (!fieldSettings.hasFields()) {
-    fieldSettings.logMissingFields();
-    return null;
-  }
-  var settings = fieldSettings.getSettings();
-  return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
-    emptyValue: {},
-    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, {
-      Bind: Bind,
-      contentModel: contentModel,
-      fields: settings.fields,
-      layout: settings.layout,
-      gridClassName: _StyledComponents.fieldsGridStyle
-    }))));
+  var getBind = props.getBind;
+  var Bind = getBind();
+  return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+    return /*#__PURE__*/_react.default.createElement(_MultiValueContainer.MultiValueContainer, {
+      bind: bind,
+      getBind: getBind
+    });
   });
 };
 var plugin = {
@@ -121,12 +29,15 @@ var plugin = {
     rendererName: "objects",
     name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Inline Form"]))),
     description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a set of fields."]))),
-    canUse: function canUse(_ref3) {
-      var field = _ref3.field;
+    canUse: function canUse(_ref) {
+      var field = _ref.field;
       return field.type === "object" && Boolean(field.multipleValues);
     },
     render: function render(props) {
       return /*#__PURE__*/_react.default.createElement(ObjectsRenderer, props);
+    },
+    renderSettings: function renderSettings(props) {
+      return /*#__PURE__*/_react.default.createElement(_MultiValueRendererSettings.MultiValueRendererSettings, props);
     }
   }
 };

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_i18n","_Button","_Grid","_DynamicSection","_interopRequireDefault","_Fields","_close","_arrow_drop_up","_arrow_drop_down","_Accordion","_StyledComponents","_utils","_FieldSettings","_appAdmin","_templateObject","_templateObject2","t","i18n","ns","Actions","_ref","setHighlightIndex","bind","index","_useConfirmationDialo","useConfirmationDialog","message","acceptLabel","cancelLabel","showConfirmation","_bind$field","field","moveValueDown","moveValueUp","onDown","useCallback","ev","stopPropagation","map","_objectSpread4","default","_defineProperty2","generateAlphaNumericLowerCaseId","onUp","onDelete","removeValue","createElement","Fragment","IconButton","icon","ReactComponent","onClick","ObjectsRenderer","props","_useState","useState","_useState2","_slicedToArray2","highlightMap","contentModel","fieldSettings","FieldSettings","createFrom","hasFields","logMissingFields","settings","getSettings","Object","assign","emptyValue","gridClassName","dynamicSectionGridStyle","_ref2","Bind","ObjectItem","ItemHighLight","key","title","concat","label","action","defaultValue","Cell","span","className","fieldsWrapperStyle","Fields","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","_taggedTemplateLiteral2","description","canUse","_ref3","Boolean","multipleValues","render","_default","exports"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState, useCallback } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport {\n    BindComponentRenderProp,\n    CmsModelFieldRendererPlugin,\n    CmsModelFieldRendererProps\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    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\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 = ({ setHighlightIndex, bind, index }: ActionsProps) => {\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const { moveValueDown, moveValueUp } = bind.field;\n\n    const onDown = useCallback(\n        (ev: React.BaseSyntheticEvent) => {\n            ev.stopPropagation();\n            moveValueDown(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index + 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueDown, index]\n    );\n\n    const onUp = useCallback(\n        (ev: React.BaseSyntheticEvent) => {\n            ev.stopPropagation();\n            moveValueUp(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index - 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueUp, index]\n    );\n\n    const onDelete = (ev: React.BaseSyntheticEvent) => {\n        ev.stopPropagation();\n        showConfirmation(() => {\n            bind.field.removeValue(index);\n        });\n    };\n\n    return (\n        <>\n            <IconButton icon={<ArrowDown />} onClick={onDown} />\n            <IconButton icon={<ArrowUp />} onClick={onUp} />\n            <IconButton icon={<DeleteIcon />} onClick={onDelete} />\n        </>\n    );\n};\n\nconst ObjectsRenderer = (props: CmsModelFieldRendererProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection {...props} emptyValue={{}} gridClassName={dynamicSectionGridStyle}>\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                                contentModel={contentModel}\n                                fields={settings.fields}\n                                layout={settings.layout}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Inline Form`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_i18n","_MultiValueContainer","_MultiValueRendererSettings","_templateObject","_templateObject2","t","i18n","ns","ObjectsRenderer","props","getBind","Bind","default","createElement","bind","MultiValueContainer","plugin","type","name","renderer","rendererName","_taggedTemplateLiteral2","description","canUse","_ref","field","Boolean","multipleValues","render","renderSettings","MultiValueRendererSettings","_default","exports"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsModelFieldRendererPlugin, CmsModelFieldRendererProps } from \"~/types\";\nimport { MultiValueContainer } from \"./MultiValueContainer\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst ObjectsRenderer = (props: CmsModelFieldRendererProps) => {\n    const { getBind } = props;\n\n    const Bind = getBind();\n\n    return <Bind>{bind => <MultiValueContainer bind={bind} getBind={getBind} />}</Bind>;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Inline Form`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,oBAAA,GAAAF,OAAA;AACA,IAAAG,2BAAA,GAAAH,OAAA;AAAuG,IAAAI,eAAA,EAAAC,gBAAA;AAEvG,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,oCAAoC,CAAC;AAEvD,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAAiC,EAAK;EAC3D,IAAQC,OAAO,GAAKD,KAAK,CAAjBC,OAAO;EAEf,IAAMC,IAAI,GAAGD,OAAO,CAAC,CAAC;EAEtB,oBAAOb,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACF,IAAI,QAAE,UAAAG,IAAI;IAAA,oBAAIjB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,oBAAA,CAAAc,mBAAmB;MAACD,IAAI,EAAEA,IAAK;MAACJ,OAAO,EAAEA;IAAQ,CAAE,CAAC;EAAA,CAAO,CAAC;AACvF,CAAC;AAED,IAAMM,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,mCAAmC;EACzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,SAAS;IACvBF,IAAI,EAAEb,CAAC,CAAAF,eAAA,KAAAA,eAAA,OAAAkB,uBAAA,CAAAT,OAAA,oBAAa;IACpBU,WAAW,EAAEjB,CAAC,CAAAD,gBAAA,KAAAA,gBAAA,OAAAiB,uBAAA,CAAAT,OAAA,iCAA0B;IACxCW,MAAM,WAANA,MAAMA,CAAAC,IAAA,EAAY;MAAA,IAATC,KAAK,GAAAD,IAAA,CAALC,KAAK;MACV,OAAOA,KAAK,CAACR,IAAI,KAAK,QAAQ,IAAIS,OAAO,CAACD,KAAK,CAACE,cAAc,CAAC;IACnE,CAAC;IACDC,MAAM,WAANA,MAAMA,CAACnB,KAAK,EAAE;MACV,oBAAOZ,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACL,eAAe,EAAKC,KAAQ,CAAC;IACzC,CAAC;IACDoB,cAAc,WAAdA,cAAcA,CAACpB,KAAK,EAAE;MAClB,oBAAOZ,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACX,2BAAA,CAAA4B,0BAA0B,EAAKrB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAAC,IAAAsB,QAAA,GAAAC,OAAA,CAAApB,OAAA,GAEaI,MAAM","ignoreList":[]}