Adjust layout if columns change

eea · Oct 9, 2020 · 7fcc967 · 7fcc967
1 parent c4a330f
commit 7fcc967
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -126,7 +126,6 @@ class ColumnsBlockEdit extends React.Component {
     const { data } = this.props;
     const { blocks_layout = {} } = data.data || {};
     const nrOfColumns = (blocks_layout?.items || []).length;
-    // console.log('gridcols', gridCols);
     const available_variants = variants.filter(
       ({ defaultData }) => defaultData?.gridCols?.length === nrOfColumns,
     );
@@ -136,6 +135,23 @@ class ColumnsBlockEdit extends React.Component {
     return schema;
   };
 
+  componentDidUpdate(prevProps) {
+    const cols = this.props.data.data?.blocks_layout?.items || [];
+    const prevCols = prevProps.data.data?.blocks_layout?.items || [];
+    if (cols.length !== prevCols.length) {
+      const available_variants = variants.filter(
+        ({ defaultData }) => defaultData?.gridCols?.length === cols.length,
+      );
+      const variant = available_variants?.[0];
+      if (variant) {
+        this.props.onChangeBlock(this.props.block, {
+          ...this.props.data,
+          gridCols: variant.defaultData.gridCols,
+        });
+      }
+    }
+  }
+
   render() {
     const { block, data, onChangeBlock, pathname, selected } = this.props;