@webiny/app-headless-cms 0.0.0-mt-3 → 0.0.0-unstable.2af142b57e

package/admin/components/DropZone/Vertical.js

@@ -1,8 +1,15 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from "react";
-import styled from "@emotion/styled";
-import Droppable from "../Droppable";
-var InnerDivVertical = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Droppable = require("../Droppable");
+var InnerDivVertical = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1yx4w3z0",
   label: "InnerDivVertical"
 })({
@@ -16,14 +23,14 @@ var InnerDivVertical = /*#__PURE__*/styled("div", {
   border: "1px dashed black",
   borderSpacing: 5
 });
-var BackgroundColorDiv = /*#__PURE__*/styled("div", {
+var BackgroundColorDiv = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1yx4w3z1",
   label: "BackgroundColorDiv"
 })({
   width: "100%",
   height: "100%"
 });
-var OuterDivVertical = /*#__PURE__*/styled("div", {
+var OuterDivVertical = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1yx4w3z2",
   label: "OuterDivVertical"
 })({
@@ -35,30 +42,27 @@ var OuterDivVertical = /*#__PURE__*/styled("div", {
   backgroundColor: "transparent"
 }, function (props) {
   var _InnerDivVertical, _ref;
-
-  return _ref = {}, _defineProperty(_ref, props.last ? "right" : "left", -9), _defineProperty(_ref, "textAlign", props.last ? "right" : "left"), _defineProperty(_ref, InnerDivVertical, (_InnerDivVertical = {
+  return _ref = {}, (0, _defineProperty2.default)(_ref, props.last ? "right" : "left", -9), (0, _defineProperty2.default)(_ref, "textAlign", props.last ? "right" : "left"), (0, _defineProperty2.default)(_ref, InnerDivVertical, (_InnerDivVertical = {
     borderColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
-  }, _defineProperty(_InnerDivVertical, props.last ? "right" : "left", -2), _defineProperty(_InnerDivVertical, "display", props.isDragging ? "block" : "none"), _defineProperty(_InnerDivVertical, BackgroundColorDiv, {
+  }, (0, _defineProperty2.default)(_InnerDivVertical, props.last ? "right" : "left", -2), (0, _defineProperty2.default)(_InnerDivVertical, "display", props.isDragging ? "block" : "none"), (0, _defineProperty2.default)(_InnerDivVertical, BackgroundColorDiv, {
     opacity: 0.5,
     backgroundColor: props.isOver ? "var(--mdc-theme-primary)" : "var(--mdc-theme-secondary)"
   }), _InnerDivVertical)), _ref;
 });
-
 var Vertical = function Vertical(_ref2) {
   var depth = _ref2.depth,
-      last = _ref2.last,
-      onDrop = _ref2.onDrop,
-      isVisible = _ref2.isVisible;
-  return /*#__PURE__*/React.createElement(Droppable, {
+    last = _ref2.last,
+    onDrop = _ref2.onDrop,
+    isVisible = _ref2.isVisible;
+  return /*#__PURE__*/_react.default.createElement(_Droppable.Droppable, {
     onDrop: onDrop,
     isVisible: isVisible
   }, function (_ref3) {
     var _ref4;
-
     var isOver = _ref3.isOver,
-        isDragging = _ref3.isDragging,
-        drop = _ref3.drop;
-    return /*#__PURE__*/React.createElement("div", {
+      isDragging = _ref3.isDragging,
+      drop = _ref3.drop;
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: drop,
       style: (_ref4 = {
         /* For dropzone debugging: border: "1px solid blue",*/
@@ -67,13 +71,13 @@ var Vertical = function Vertical(_ref2) {
         height: "100%",
         position: "absolute",
         top: 0
-      }, _defineProperty(_ref4, last ? "right" : "left", 0), _defineProperty(_ref4, "zIndex", isDragging ? 1000 + depth : -1), _ref4)
-    }, /*#__PURE__*/React.createElement(OuterDivVertical, {
+      }, (0, _defineProperty2.default)(_ref4, last ? "right" : "left", 0), (0, _defineProperty2.default)(_ref4, "zIndex", isDragging ? 1000 + (depth || 0) : -1), _ref4)
+    }, /*#__PURE__*/_react.default.createElement(OuterDivVertical, {
       isOver: isOver,
       isDragging: isDragging,
       last: last
-    }, /*#__PURE__*/React.createElement(InnerDivVertical, null, /*#__PURE__*/React.createElement(BackgroundColorDiv, null))));
+    }, /*#__PURE__*/_react.default.createElement(InnerDivVertical, null, /*#__PURE__*/_react.default.createElement(BackgroundColorDiv, null))));
   });
 };
-
-export default Vertical;
+var _default = Vertical;
+exports.default = _default;

package/admin/components/DropZone/Vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["InnerDivVertical","styled","position","width","height","zIndex","borderRadius","display","boxSizing","border","borderSpacing","BackgroundColorDiv","OuterDivVertical","top","backgroundColor","props","last","borderColor","isOver","isDragging","opacity","Vertical","depth","onDrop","isVisible","drop","maxWidth"],"sources":["Vertical.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Droppable, IsVisibleCallable } from \"../Droppable\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nconst InnerDivVertical = styled(\"div\")({\n    position: \"absolute\",\n    width: 10,\n    height: \"100%\",\n    zIndex: 3,\n    borderRadius: 0,\n    display: \"none\",\n    boxSizing: \"border-box\",\n    border: \"1px dashed black\",\n    borderSpacing: 5\n});\n\nconst BackgroundColorDiv = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\"\n});\n\ninterface OuterDivVerticalProps {\n    isOver: boolean;\n    last?: boolean;\n    isVisible?: IsVisibleCallable;\n    isDragging?: boolean;\n}\n\nconst OuterDivVertical = styled(\"div\")(\n    {\n        position: \"absolute\",\n        width: \"30%\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 10,\n        backgroundColor: \"transparent\"\n    },\n    (props: OuterDivVerticalProps) => ({\n        [props.last ? \"right\" : \"left\"]: -9,\n        textAlign: props.last ? \"right\" : \"left\",\n        // @ts-ignore\n        [InnerDivVertical]: {\n            borderColor: props.isOver ? \"var(--mdc-theme-primary)\" : \"var(--mdc-theme-secondary)\",\n            [props.last ? \"right\" : \"left\"]: -2,\n            display: props.isDragging ? \"block\" : \"none\",\n            // @ts-ignore\n            [BackgroundColorDiv]: {\n                opacity: 0.5,\n                backgroundColor: props.isOver\n                    ? \"var(--mdc-theme-primary)\"\n                    : \"var(--mdc-theme-secondary)\"\n            }\n        }\n    })\n);\n\ninterface VerticalProps {\n    depth?: number;\n    onDrop(item: DragSource): void;\n    last?: boolean;\n    isVisible?: any;\n}\n\nconst Vertical: React.FC<VerticalProps> = ({ depth, last, onDrop, isVisible }) => {\n    return (\n        <Droppable onDrop={onDrop} isVisible={isVisible}>\n            {({ isOver, isDragging, drop }) => (\n                <div\n                    ref={drop}\n                    style={{\n                        /* For dropzone debugging: border: \"1px solid blue\",*/\n                        width: \"30%\",\n                        maxWidth: \"100px\",\n                        height: \"100%\",\n                        position: \"absolute\",\n                        top: 0,\n                        [last ? \"right\" : \"left\"]: 0,\n                        zIndex: isDragging ? 1000 + (depth || 0) : -1\n                    }}\n                >\n                    <OuterDivVertical isOver={isOver} isDragging={isDragging} last={last}>\n                        <InnerDivVertical>\n                            <BackgroundColorDiv />\n                        </InnerDivVertical>\n                    </OuterDivVertical>\n                </div>\n            )}\n        </Droppable>\n    );\n};\n\nexport default Vertical;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAGA,IAAMA,gBAAgB,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACnCC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,MAAM;EACdC,MAAM,EAAE,CAAC;EACTC,YAAY,EAAE,CAAC;EACfC,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,YAAY;EACvBC,MAAM,EAAE,kBAAkB;EAC1BC,aAAa,EAAE;AACnB,CAAC,CAAC;AAEF,IAAMC,kBAAkB,oBAAGV,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACrCE,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE;AACZ,CAAC,CAAC;AASF,IAAMQ,gBAAgB,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GACjC;EACIC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE,KAAK;EACZU,GAAG,EAAE,CAAC;EACNT,MAAM,EAAE,MAAM;EACdC,MAAM,EAAE,EAAE;EACVS,eAAe,EAAE;AACrB,CAAC,EACD,UAACC,KAA4B;EAAA;EAAA,sDACxBA,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,MAAM,EAAG,CAAC,CAAC,oDACxBD,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,MAAM,uCAEvChB,gBAAgB;IACbiB,WAAW,EAAEF,KAAK,CAACG,MAAM,GAAG,0BAA0B,GAAG;EAA4B,oDACpFH,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,MAAM,EAAG,CAAC,CAAC,+DAC1BD,KAAK,CAACI,UAAU,GAAG,OAAO,GAAG,MAAM,oDAE3CR,kBAAkB,EAAG;IAClBS,OAAO,EAAE,GAAG;IACZN,eAAe,EAAEC,KAAK,CAACG,MAAM,GACvB,0BAA0B,GAC1B;EACV,CAAC;AAAA,CAEP,CACL;AASD,IAAMG,QAAiC,GAAG,SAApCA,QAAiC,QAA2C;EAAA,IAArCC,KAAK,SAALA,KAAK;IAAEN,IAAI,SAAJA,IAAI;IAAEO,MAAM,SAANA,MAAM;IAAEC,SAAS,SAATA,SAAS;EACvE,oBACI,6BAAC,oBAAS;IAAC,MAAM,EAAED,MAAO;IAAC,SAAS,EAAEC;EAAU,GAC3C;IAAA;IAAA,IAAGN,MAAM,SAANA,MAAM;MAAEC,UAAU,SAAVA,UAAU;MAAEM,IAAI,SAAJA,IAAI;IAAA,oBACxB;MACI,GAAG,EAAEA,IAAK;MACV,KAAK;QACD;QACAtB,KAAK,EAAE,KAAK;QACZuB,QAAQ,EAAE,OAAO;QACjBtB,MAAM,EAAE,MAAM;QACdF,QAAQ,EAAE,UAAU;QACpBW,GAAG,EAAE;MAAC,wCACLG,IAAI,GAAG,OAAO,GAAG,MAAM,EAAG,CAAC,kDACpBG,UAAU,GAAG,IAAI,IAAIG,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAC/C,gBAEF,6BAAC,gBAAgB;MAAC,MAAM,EAAEJ,MAAO;MAAC,UAAU,EAAEC,UAAW;MAAC,IAAI,EAAEH;IAAK,gBACjE,6BAAC,gBAAgB,qBACb,6BAAC,kBAAkB,OAAG,CACP,CACJ,CACjB;EAAA,CACT,CACO;AAEpB,CAAC;AAAC,eAEaK,QAAQ;AAAA"}

package/admin/components/DropZone/index.js

@@ -1,4 +1,27 @@
-import Center from "./Center";
-import Horizontal from "./Horizontal";
-import Vertical from "./Vertical";
-export { Center, Horizontal, Vertical };
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Center", {
+  enumerable: true,
+  get: function get() {
+    return _Center.default;
+  }
+});
+Object.defineProperty(exports, "Horizontal", {
+  enumerable: true,
+  get: function get() {
+    return _Horizontal.default;
+  }
+});
+Object.defineProperty(exports, "Vertical", {
+  enumerable: true,
+  get: function get() {
+    return _Vertical.default;
+  }
+});
+var _Center = _interopRequireDefault(require("./Center"));
+var _Horizontal = _interopRequireDefault(require("./Horizontal"));
+var _Vertical = _interopRequireDefault(require("./Vertical"));

package/admin/components/DropZone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["import Center from \"./Center\";\nimport Horizontal from \"./Horizontal\";\nimport Vertical from \"./Vertical\";\n\nexport { Center, Horizontal, Vertical };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA"}

package/admin/components/Droppable.d.ts

@@ -1,23 +1,34 @@
 import * as React from "react";
 import { ConnectDropTarget } from "react-dnd";
 import { DragSource } from "./FieldEditor/FieldEditorContext";
-export declare type DroppableChildrenFunction = (params: {
+export interface DroppableChildrenFunctionParams {
     isDragging: boolean;
+    isDroppable: boolean;
     isOver: boolean;
     item: any;
     drop: ConnectDropTarget;
-}) => React.ReactElement;
-export declare type DroppableProps = {
+}
+export interface DroppableChildrenFunction {
+    (params: DroppableChildrenFunctionParams): React.ReactElement;
+}
+interface IsVisibleParams {
+    type: "row" | "field" | "newField";
+    item: any;
+    isDragging: boolean;
+}
+export interface IsVisibleCallable {
+    (params: IsVisibleParams): boolean;
+}
+export interface OnDropCallable {
+    (item: DragSource): void;
+}
+export interface DroppableProps {
     type?: string;
     children: DroppableChildrenFunction;
     isDragging?: boolean;
     isDroppable?: (item: any) => boolean;
-    isVisible?: (params: {
-        type: string;
-        item: any;
-        isDragging: boolean;
-    }) => boolean;
-    onDrop?: (item: DragSource) => void;
-};
-declare const Droppable: React.MemoExoticComponent<(props: DroppableProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>>;
-export default Droppable;
+    isVisible?: IsVisibleCallable;
+    onDrop?: OnDropCallable;
+}
+export declare const Droppable: React.FC<DroppableProps>;
+export {};

package/admin/components/Droppable.js

@@ -1,45 +1,59 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import * as React from "react";
-import { useDrop } from "react-dnd";
-var Droppable = /*#__PURE__*/React.memo(function (props) {
-  var children = props.children,
-      onDrop = props.onDrop,
-      _props$isVisible = props.isVisible,
-      isVisible = _props$isVisible === void 0 ? function () {
-    return true;
-  } : _props$isVisible;
+"use strict";
 
-  var _useDrop = useDrop({
-    accept: "element",
-    collect: function collect(monitor) {
-      return {
-        isOver: monitor.isOver() && monitor.isOver({
-          shallow: true
-        }),
-        item: monitor.getItem()
-      };
-    },
-    drop: function drop(_, monitor) {
-      if (typeof onDrop === "function") {
-        return onDrop(monitor.getItem());
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Droppable = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _reactDnd = require("react-dnd");
+var DroppableComponent = function DroppableComponent(props) {
+  var children = props.children,
+    onDrop = props.onDrop,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? function () {
+      return true;
+    } : _props$isVisible;
+  var _useDrop = (0, _reactDnd.useDrop)({
+      accept: "element",
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver() && monitor.isOver({
+            shallow: true
+          }),
+          item: monitor.getItem()
+        };
+      },
+      drop: function drop(item, monitor) {
+        if (typeof props.isDroppable === "function" && !props.isDroppable(item)) {
+          return;
+        }
+        if (typeof onDrop === "function") {
+          return onDrop(monitor.getItem());
+        }
       }
-    }
-  }),
-      _useDrop2 = _slicedToArray(_useDrop, 2),
-      _useDrop2$ = _useDrop2[0],
-      item = _useDrop2$.item,
-      isOver = _useDrop2$.isOver,
-      drop = _useDrop2[1];
-
+    }),
+    _useDrop2 = (0, _slicedToArray2.default)(_useDrop, 2),
+    _useDrop2$ = _useDrop2[0],
+    item = _useDrop2$.item,
+    isOver = _useDrop2$.isOver,
+    drop = _useDrop2[1];
   if (item && !isVisible(item)) {
     return null;
   }
-
+  var isDroppable = true;
+  if (item) {
+    isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;
+  }
   return children({
     isDragging: Boolean(item),
     isOver: isOver,
+    isDroppable: isDroppable,
     item: item,
     drop: drop
   });
-});
-export default Droppable;
+};
+var Droppable = /*#__PURE__*/React.memo(DroppableComponent);
+exports.Droppable = Droppable;

package/admin/components/Droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DroppableComponent","props","children","onDrop","isVisible","useDrop","accept","collect","monitor","isOver","shallow","item","getItem","drop","isDroppable","isDragging","Boolean","Droppable","React","memo"],"sources":["Droppable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ConnectDropTarget, useDrop } from \"react-dnd\";\nimport { DragSource } from \"~/admin/components/FieldEditor/FieldEditorContext\";\n\nexport interface DroppableChildrenFunctionParams {\n    isDragging: boolean;\n    isDroppable: boolean;\n    isOver: boolean;\n    item: any;\n    drop: ConnectDropTarget;\n}\nexport interface DroppableChildrenFunction {\n    (params: DroppableChildrenFunctionParams): React.ReactElement;\n}\n\ninterface IsVisibleParams {\n    type: \"row\" | \"field\" | \"newField\";\n    item: any;\n    isDragging: boolean;\n}\nexport interface IsVisibleCallable {\n    (params: IsVisibleParams): boolean;\n}\nexport interface OnDropCallable {\n    (item: DragSource): void;\n}\nexport interface DroppableProps {\n    type?: string;\n    children: DroppableChildrenFunction;\n    isDragging?: boolean;\n    isDroppable?: (item: any) => boolean;\n    isVisible?: IsVisibleCallable;\n    onDrop?: OnDropCallable;\n}\n\nconst DroppableComponent: React.FC<DroppableProps> = props => {\n    const { children, onDrop, isVisible = () => true } = props;\n\n    const [{ item, isOver }, drop] = useDrop({\n        accept: \"element\",\n        collect: monitor => ({\n            isOver: monitor.isOver() && monitor.isOver({ shallow: true }),\n            item: monitor.getItem()\n        }),\n        drop(item, monitor) {\n            if (typeof props.isDroppable === \"function\" && !props.isDroppable(item)) {\n                return;\n            }\n\n            if (typeof onDrop === \"function\") {\n                return onDrop(monitor.getItem());\n            }\n        }\n    });\n\n    if (item && !isVisible(item)) {\n        return null;\n    }\n\n    let isDroppable = true;\n    if (item) {\n        isDroppable = props.isDroppable ? props.isDroppable(item) : isOver;\n    }\n\n    return children({ isDragging: Boolean(item), isOver, isDroppable, item, drop });\n};\n\nexport const Droppable: React.FC<DroppableProps> = React.memo(DroppableComponent);\n"],"mappings":";;;;;;;;;AAAA;AACA;AAkCA,IAAMA,kBAA4C,GAAG,SAA/CA,kBAA4C,CAAGC,KAAK,EAAI;EAC1D,IAAQC,QAAQ,GAAqCD,KAAK,CAAlDC,QAAQ;IAAEC,MAAM,GAA6BF,KAAK,CAAxCE,MAAM;IAAA,mBAA6BF,KAAK,CAAhCG,SAAS;IAATA,SAAS,iCAAG;MAAA,OAAM,IAAI;IAAA;EAEhD,eAAiC,IAAAC,iBAAO,EAAC;MACrCC,MAAM,EAAE,SAAS;MACjBC,OAAO,EAAE,iBAAAC,OAAO;QAAA,OAAK;UACjBC,MAAM,EAAED,OAAO,CAACC,MAAM,EAAE,IAAID,OAAO,CAACC,MAAM,CAAC;YAAEC,OAAO,EAAE;UAAK,CAAC,CAAC;UAC7DC,IAAI,EAAEH,OAAO,CAACI,OAAO;QACzB,CAAC;MAAA,CAAC;MACFC,IAAI,gBAACF,IAAI,EAAEH,OAAO,EAAE;QAChB,IAAI,OAAOP,KAAK,CAACa,WAAW,KAAK,UAAU,IAAI,CAACb,KAAK,CAACa,WAAW,CAACH,IAAI,CAAC,EAAE;UACrE;QACJ;QAEA,IAAI,OAAOR,MAAM,KAAK,UAAU,EAAE;UAC9B,OAAOA,MAAM,CAACK,OAAO,CAACI,OAAO,EAAE,CAAC;QACpC;MACJ;IACJ,CAAC,CAAC;IAAA;IAAA;IAfOD,IAAI,cAAJA,IAAI;IAAEF,MAAM,cAANA,MAAM;IAAII,IAAI;EAiB7B,IAAIF,IAAI,IAAI,CAACP,SAAS,CAACO,IAAI,CAAC,EAAE;IAC1B,OAAO,IAAI;EACf;EAEA,IAAIG,WAAW,GAAG,IAAI;EACtB,IAAIH,IAAI,EAAE;IACNG,WAAW,GAAGb,KAAK,CAACa,WAAW,GAAGb,KAAK,CAACa,WAAW,CAACH,IAAI,CAAC,GAAGF,MAAM;EACtE;EAEA,OAAOP,QAAQ,CAAC;IAAEa,UAAU,EAAEC,OAAO,CAACL,IAAI,CAAC;IAAEF,MAAM,EAANA,MAAM;IAAEK,WAAW,EAAXA,WAAW;IAAEH,IAAI,EAAJA,IAAI;IAAEE,IAAI,EAAJA;EAAK,CAAC,CAAC;AACnF,CAAC;AAEM,IAAMI,SAAmC,gBAAGC,KAAK,CAACC,IAAI,CAACnB,kBAAkB,CAAC;AAAC"}

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const AppearanceTab: (props: any) => JSX.Element;
+declare const AppearanceTab: () => JSX.Element;
 export default AppearanceTab;

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

@@ -1,83 +1,91 @@
-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 _react = _interopRequireWildcard(require("react"));
+var _plugins = require("@webiny/plugins");
+var _Grid = require("@webiny/ui/Grid");
+var _i18n = require("@webiny/app/i18n");
+var _Radio = require("@webiny/ui/Radio");
+var _Typography = require("@webiny/ui/Typography");
+var _emotion = require("emotion");
+var _validation = require("@webiny/validation");
+var _hooks = require("../../../hooks");
+var _form = require("@webiny/form");
 var _templateObject, _templateObject2;
-
-import React, { useEffect } from "react";
-import { plugins } from "@webiny/plugins";
-import { Grid, Cell } from "@webiny/ui/Grid";
-import { i18n } from "@webiny/app/i18n";
-import { Radio, RadioGroup } from "@webiny/ui/Radio";
-import { Typography } from "@webiny/ui/Typography";
-import { css } from "emotion";
-import { validation } from "@webiny/validation";
-var t = i18n.ns("app-headless-cms/admin/views/components/editor/tabs/edit-field-dialog/appearance-tab");
+var t = _i18n.i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
 var style = {
-  topLabel: /*#__PURE__*/css({
+  topLabel: /*#__PURE__*/(0, _emotion.css)({
     marginBottom: 25
   }, "label:topLabel;"),
-  noComponentsMessage: /*#__PURE__*/css({
+  noComponentsMessage: /*#__PURE__*/(0, _emotion.css)({
     textAlign: "center",
     padding: 25
   }, "label:noComponentsMessage;"),
-  radioContainer: /*#__PURE__*/css({
+  radioContainer: /*#__PURE__*/(0, _emotion.css)({
     marginBottom: 10
   }, "label:radioContainer;")
 };
-
-var AppearanceTab = function AppearanceTab(props) {
-  var field = props.field,
-      form = props.form;
-  var renderPlugins = plugins.byType("cms-editor-field-renderer").filter(function (item) {
+var AppearanceTab = function AppearanceTab() {
+  var _field$predefinedValu;
+  var form = (0, _form.useForm)();
+  var _useModelField = (0, _hooks.useModelField)(),
+    field = _useModelField.field,
+    fieldPlugin = _useModelField.fieldPlugin;
+  var renderPlugins = _plugins.plugins.byType("cms-editor-field-renderer").filter(function (item) {
     return item.renderer.canUse({
-      field: field
+      field: field,
+      fieldPlugin: fieldPlugin
     });
   });
-  useEffect(function () {
+  (0, _react.useEffect)(function () {
     // If the currently selected render plugin is no longer available, select the first available one.
     var currentlySelectedRenderAvailable = renderPlugins.find(function (item) {
       return item.renderer.rendererName === field.renderer.name;
     });
-
-    if (!currentlySelectedRenderAvailable) {
-      if (renderPlugins[0]) {
-        form.setValue("renderer.name", renderPlugins[0].renderer.rendererName);
-      } else {
-        console.log("No renderers for field ".concat(field.fieldId, " found."), field);
-      }
+    if (currentlySelectedRenderAvailable) {
+      return;
     }
-  });
-
+    if (renderPlugins[0]) {
+      form.setValue("renderer.name", renderPlugins[0].renderer.rendererName);
+      return;
+    }
+    console.info("No renderers for field ".concat(field.fieldId, " found."), field);
+  }, [field.id, field.multipleValues, (_field$predefinedValu = field.predefinedValues) === null || _field$predefinedValu === void 0 ? void 0 : _field$predefinedValu.enabled]);
   if (renderPlugins.length === 0) {
-    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+    return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
       span: 12,
       className: style.noComponentsMessage
-    }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["There are no components that can render this field."])))));
+    }, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["There are no components that can render this field."])))));
   }
-
-  var Bind = form.Bind;
-  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+  return /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 12
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: style.topLabel
-  }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Choose a component that will render the field:"])))), /*#__PURE__*/React.createElement(Bind, {
+  }, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Choose a component that will render the field:"])))), /*#__PURE__*/_react.default.createElement(_form.Bind, {
     name: "renderer.name",
-    validate: validation.create("required")
-  }, /*#__PURE__*/React.createElement(RadioGroup, null, function (_ref) {
+    validate: _validation.validation.create("required")
+  }, /*#__PURE__*/_react.default.createElement(_Radio.RadioGroup, null, function (_ref) {
     var onChange = _ref.onChange,
-        getValue = _ref.getValue;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderPlugins.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
+      getValue = _ref.getValue;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderPlugins.map(function (item) {
+      return /*#__PURE__*/_react.default.createElement("div", {
         key: item.name,
         className: style.radioContainer
-      }, /*#__PURE__*/React.createElement(Radio, {
+      }, /*#__PURE__*/_react.default.createElement(_Radio.Radio, {
         value: getValue(item.renderer.rendererName),
         onChange: onChange(item.renderer.rendererName),
-        label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, item.renderer.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Typography, {
+        label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, item.renderer.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
           use: "caption"
         }, item.renderer.description)))
       }));
     }));
   }))));
 };
-
-export default AppearanceTab;
+var _default = AppearanceTab;
+exports.default = _default;

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

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

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

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