@dotcms/react 0.0.1-alpha.3 → 0.0.1-alpha.5

package/index.esm.js

@@ -2370,21 +2370,22 @@ $({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign },
   assign: assign
 });
 
-const widthClassMap = {
-  1: 'col-span-1',
-  2: 'col-span-2',
-  3: 'col-span-3',
-  4: 'col-span-4',
-  5: 'col-span-5',
-  6: 'col-span-6',
-  7: 'col-span-7',
-  8: 'col-span-8',
-  9: 'col-span-9',
-  10: 'col-span-10',
-  11: 'col-span-11',
-  12: 'col-span-12'
-};
-const statrClassMap = {
+const endClassMap = {
+  1: 'col-end-1',
+  2: 'col-end-2',
+  3: 'col-end-3',
+  4: 'col-end-4',
+  5: 'col-end-5',
+  6: 'col-end-6',
+  7: 'col-end-7',
+  8: 'col-end-8',
+  9: 'col-end-9',
+  10: 'col-end-10',
+  11: 'col-end-11',
+  12: 'col-end-12',
+  13: 'col-end-13'
+};
+const startClassMap = {
   1: 'col-start-1',
   2: 'col-start-2',
   3: 'col-start-3',
@@ -2481,12 +2482,12 @@ const getContainersData = (containers, containerRef) => {
   });
 };
 const combineClasses = classes => classes.filter(Boolean).join(' ');
-const getPositionStyleClasses = (width, leftOffset) => {
-  const widthClass = widthClassMap[width];
-  const startClass = statrClassMap[leftOffset];
+const getPositionStyleClasses = (start, end) => {
+  const startClass = startClassMap[start];
+  const endClass = endClassMap[end];
   return {
-    widthClass,
-    startClass
+    startClass,
+    endClass
   };
 };
 
@@ -2527,7 +2528,37 @@ function useEventMessageHandler({
   reload = window.location.reload
 }) {
   const rows = useRef([]);
+  const observer = useRef(null);
   const [isInsideEditor, setIsInsideEditor] = useState(false);
+  useEffect(() => {
+    var _observer$current;
+    observer.current = new MutationObserver(mutationsList => {
+      for (const {
+        addedNodes,
+        removedNodes,
+        type
+      } of mutationsList) {
+        if (type === 'childList') {
+          const didNodesChanged = [...Array.from(addedNodes), ...Array.from(removedNodes)].filter(node => {
+            var _node$dataset;
+            return ((_node$dataset = node.dataset) == null ? void 0 : _node$dataset.dot) === 'contentlet';
+          }).length;
+          if (didNodesChanged) {
+            postMessageToEditor({
+              action: CUSTOMER_ACTIONS.CONTENT_CHANGE
+            });
+          }
+        }
+      }
+    });
+    (_observer$current = observer.current) == null || _observer$current.observe(document, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      if (observer.current) observer.current.disconnect();
+    };
+  }, []);
   useEffect(() => {
     // If the page is not inside an iframe we do nothing.
     if (window.parent === window) return;
@@ -2649,10 +2680,32 @@ var css_248z$1 = ".row-module_row__8V7Eh {\n    display: grid;\n    grid-templat
 var styles$1 = {"row":"row-module_row__8V7Eh"};
 styleInject(css_248z$1);
 
-var css_248z = ".column-module_col-start-1__GK-q- {\n    grid-column-start: 1;\n}\n\n.column-module_col-start-2__1DmkY {\n    grid-column-start: 2;\n}\n\n.column-module_col-start-3__HNEPh {\n    grid-column-start: 3;\n}\n\n.column-module_col-start-4__oCAwh {\n    grid-column-start: 4;\n}\n\n.column-module_col-start-5__re1rB {\n    grid-column-start: 5;\n}\n\n.column-module_col-start-6__dkB4w {\n    grid-column-start: 6;\n}\n\n.column-module_col-start-7__kEfJb {\n    grid-column-start: 7;\n}\n\n.column-module_col-start-8__Yx31z {\n    grid-column-start: 8;\n}\n\n.column-module_col-start-9__9YiVY {\n    grid-column-start: 9;\n}\n\n.column-module_col-start-10__6AFbk {\n    grid-column-start: 10;\n}\n\n.column-module_col-start-11__LP24D {\n    grid-column-start: 11;\n}\n\n.column-module_col-start-12__8p0QS {\n    grid-column-start: 12;\n}\n\n.column-module_col-span-1__vOPKg {\n    grid-column: span 1 / span 1;\n}\n\n.column-module_col-span-2__qVdyn {\n    grid-column: span 2 / span 2;\n}\n\n.column-module_col-span-3__brcdA {\n    grid-column: span 3 / span 3;\n}\n\n.column-module_col-span-4__1-c-f {\n    grid-column: span 4 / span 4;\n}\n\n.column-module_col-span-5__nAGLD {\n    grid-column: span 5 / span 5;\n}\n\n.column-module_col-span-6__emtw7 {\n    grid-column: span 6 / span 6;\n}\n\n.column-module_col-span-7__Ad5-V {\n    grid-column: span 7 / span 7;\n}\n\n.column-module_col-span-8__gEnsA {\n    grid-column: span 8 / span 8;\n}\n\n.column-module_col-span-9__jWemC {\n    grid-column: span 9 / span 9;\n}\n\n.column-module_col-span-10__Dzuph {\n    grid-column: span 10 / span 10;\n}\n\n.column-module_col-span-11__Xgct2 {\n    grid-column: span 11 / span 11;\n}\n\n.column-module_col-span-12__LvJrY {\n    grid-column: span 12 / span 12;\n}\n";
-var styles = {"col-start-1":"column-module_col-start-1__GK-q-","col-start-2":"column-module_col-start-2__1DmkY","col-start-3":"column-module_col-start-3__HNEPh","col-start-4":"column-module_col-start-4__oCAwh","col-start-5":"column-module_col-start-5__re1rB","col-start-6":"column-module_col-start-6__dkB4w","col-start-7":"column-module_col-start-7__kEfJb","col-start-8":"column-module_col-start-8__Yx31z","col-start-9":"column-module_col-start-9__9YiVY","col-start-10":"column-module_col-start-10__6AFbk","col-start-11":"column-module_col-start-11__LP24D","col-start-12":"column-module_col-start-12__8p0QS","col-span-1":"column-module_col-span-1__vOPKg","col-span-2":"column-module_col-span-2__qVdyn","col-span-3":"column-module_col-span-3__brcdA","col-span-4":"column-module_col-span-4__1-c-f","col-span-5":"column-module_col-span-5__nAGLD","col-span-6":"column-module_col-span-6__emtw7","col-span-7":"column-module_col-span-7__Ad5-V","col-span-8":"column-module_col-span-8__gEnsA","col-span-9":"column-module_col-span-9__jWemC","col-span-10":"column-module_col-span-10__Dzuph","col-span-11":"column-module_col-span-11__Xgct2","col-span-12":"column-module_col-span-12__LvJrY"};
+var css_248z = ".column-module_col-start-1__GK-q- {\n    grid-column-start: 1;\n}\n\n.column-module_col-start-2__1DmkY {\n    grid-column-start: 2;\n}\n\n.column-module_col-start-3__HNEPh {\n    grid-column-start: 3;\n}\n\n.column-module_col-start-4__oCAwh {\n    grid-column-start: 4;\n}\n\n.column-module_col-start-5__re1rB {\n    grid-column-start: 5;\n}\n\n.column-module_col-start-6__dkB4w {\n    grid-column-start: 6;\n}\n\n.column-module_col-start-7__kEfJb {\n    grid-column-start: 7;\n}\n\n.column-module_col-start-8__Yx31z {\n    grid-column-start: 8;\n}\n\n.column-module_col-start-9__9YiVY {\n    grid-column-start: 9;\n}\n\n.column-module_col-start-10__6AFbk {\n    grid-column-start: 10;\n}\n\n.column-module_col-start-11__LP24D {\n    grid-column-start: 11;\n}\n\n.column-module_col-start-12__8p0QS {\n    grid-column-start: 12;\n}\n\n.column-module_col-end-1__G9axv {\n    grid-column-end: 1;\n}\n\n.column-module_col-end-2__pYjHG {\n    grid-column-end: 2;\n}\n\n.column-module_col-end-3__4woe6 {\n    grid-column-end: 3;\n}\n\n.column-module_col-end-4__zlBaT {\n    grid-column-end: 4;\n}\n\n.column-module_col-end-5__aC-y8 {\n    grid-column-end: 5;\n}\n\n.column-module_col-end-6__YljAP {\n    grid-column-end: 6;\n}\n\n.column-module_col-end-7__lpQrW {\n    grid-column-end: 7;\n}\n\n.column-module_col-end-8__F6UVd {\n    grid-column-end: 8;\n}\n\n.column-module_col-end-9__kvQ3T {\n    grid-column-end: 9;\n}\n\n.column-module_col-end-10__XJhrd {\n    grid-column-end: 10;\n}\n\n.column-module_col-end-11__nx-lF {\n    grid-column-end: 11;\n}\n\n.column-module_col-end-12__LIRnk {\n    grid-column-end: 12;\n}\n\n.column-module_col-end-13__0p7YI {\n    grid-column-end: 13;\n}\n";
+var styles = {"col-start-1":"column-module_col-start-1__GK-q-","col-start-2":"column-module_col-start-2__1DmkY","col-start-3":"column-module_col-start-3__HNEPh","col-start-4":"column-module_col-start-4__oCAwh","col-start-5":"column-module_col-start-5__re1rB","col-start-6":"column-module_col-start-6__dkB4w","col-start-7":"column-module_col-start-7__kEfJb","col-start-8":"column-module_col-start-8__Yx31z","col-start-9":"column-module_col-start-9__9YiVY","col-start-10":"column-module_col-start-10__6AFbk","col-start-11":"column-module_col-start-11__LP24D","col-start-12":"column-module_col-start-12__8p0QS","col-end-1":"column-module_col-end-1__G9axv","col-end-2":"column-module_col-end-2__pYjHG","col-end-3":"column-module_col-end-3__4woe6","col-end-4":"column-module_col-end-4__zlBaT","col-end-5":"column-module_col-end-5__aC-y8","col-end-6":"column-module_col-end-6__YljAP","col-end-7":"column-module_col-end-7__lpQrW","col-end-8":"column-module_col-end-8__F6UVd","col-end-9":"column-module_col-end-9__kvQ3T","col-end-10":"column-module_col-end-10__XJhrd","col-end-11":"column-module_col-end-11__nx-lF","col-end-12":"column-module_col-end-12__LIRnk","col-end-13":"column-module_col-end-13__0p7YI"};
 styleInject(css_248z);
 
+const FAKE_CONTENLET = {
+  identifier: 'TEMP_EMPTY_CONTENTLET',
+  title: 'TEMP_EMPTY_CONTENTLET',
+  contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
+  inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
+  widgetTitle: 'TEMP_EMPTY_CONTENTLET'
+};
+function EmptyContainer() {
+  return jsx("div", {
+    "data-testid": "empty-container",
+    style: {
+      width: '100%',
+      backgroundColor: '#ECF0FD',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#030E32',
+      height: '10rem'
+    },
+    children: "This container is empty."
+  });
+}
 function NoContent({
   contentType
 }) {
@@ -2684,7 +2737,8 @@ function Container({
     pageContainers,
     path
   } = getContainersData(containers, containerRef);
-  const contentletsId = contentlets.map(contentlet => contentlet.identifier);
+  const updatedContentlets = contentlets.length === 0 && isInsideEditor ? [FAKE_CONTENLET] : contentlets;
+  const contentletsId = updatedContentlets.map(contentlet => contentlet.identifier);
   const container = {
     acceptTypes,
     contentletsId,
@@ -2726,9 +2780,10 @@ function Container({
       }
     });
   }
-  const renderContentlets = contentlets.map(contentlet => {
+  const renderContentlets = updatedContentlets.map(contentlet => {
     var _viewAs$persona2;
-    const Component = components[contentlet.contentType] || NoContent;
+    const ContentTypeComponent = components[contentlet.contentType] || NoContent;
+    const Component = contentlet.identifier === 'TEMP_EMPTY_CONTENTLET' ? EmptyContainer : ContentTypeComponent;
     const contentletPayload = {
       container,
       contentlet: {
@@ -2768,10 +2823,10 @@ function Column({
     isInsideEditor
   } = useContext(PageContext);
   const {
-    widthClass,
-    startClass
-  } = getPositionStyleClasses(column.width, column.leftOffset);
-  const combinedClasses = combineClasses([styles[widthClass], styles[startClass], column.styleClass]);
+    startClass,
+    endClass
+  } = getPositionStyleClasses(column.leftOffset, column.width + column.leftOffset);
+  const combinedClasses = combineClasses([styles[endClass], styles[startClass], column.styleClass]);
   const columnProps = isInsideEditor ? {
     'data-dot': 'column',
     'data-testid': 'column'

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.5",
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
-    "@dotcms/client": "latest"
+    "@dotcms/client": "0.0.1-alpha.5"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {

package/src/lib/utils/utils.d.ts

@@ -49,7 +49,7 @@ export declare const getContainersData: (containers: ContainerData, containerRef
     maxContentlets: number;
 };
 export declare const combineClasses: (classes: string[]) => string;
-export declare const getPositionStyleClasses: (width: number, leftOffset: number) => {
-    widthClass: string;
+export declare const getPositionStyleClasses: (start: number, end: number) => {
     startClass: string;
+    endClass: string;
 };