@antscorp/antsomi-ui 1.3.5-beta.109 → 1.3.5-beta.110

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -32,9 +32,10 @@ const defaultProps = {
     isCompact: false,
     delayUpdate: 200,
     selectColor: '#2f79bf80',
+    allowActive: true,
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, } = props;
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, allowActive, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -54,6 +55,7 @@ export const ResizeGrid = props => {
     const ctrlKeyRef = useRef(false);
     const initRef = useRef(0);
     const initDoneRef = useRef(false);
+    const cachedMergeCellRef = useRef({});
     // console.log('grid', grid)
     function lineVertical(isShow = true, left = 0) {
         if (verticalLineRef.current && layersRef.current) {
@@ -103,7 +105,7 @@ export const ResizeGrid = props => {
         : (cell.rowEnd !== line || !cell.sizeY) && (cell.rowStart !== line || !cell.sizeY);
     const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
     const floorSize = size => Math.floor(size);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         handleChangeGrid();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [grid, reCalculateFlag]);
@@ -158,9 +160,7 @@ export const ResizeGrid = props => {
                                     }
                                 }
                                 else {
-                                    child.transformY &&
-                                        !child.movedBottom &&
-                                        (child.sizeY = +child.sizeY + yDistant);
+                                    child.transformY && !child.movedBottom && (child.sizeY = +child.sizeY + yDistant);
                                 }
                                 // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
                                 if (child.sizeY < MIN_SIZE) {
@@ -560,9 +560,8 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
-        if (isPreview)
-            return;
-        !cell.active && activeCell({ idx });
+        // if (isPreview) return;
+        // !cell.active && activeCell({ idx });
         selectRef.current = { idx, cell };
         gridRef.current = grid;
     };
@@ -574,12 +573,14 @@ export const ResizeGrid = props => {
             return;
         }
         const newChilds = [...grid.childs];
+        const insertArr = [];
         for (let i = rowStart; i < rowEnd; i++) {
             for (let j = colStart; j < colEnd; j++) {
                 const rStart = i;
                 const cStart = j;
                 const rEnd = rStart + 1;
                 const cEnd = cStart + 1;
+                const insertIdx = cachedMergeCellRef.current[`${rStart}-${cStart}`] || idx;
                 // console.log('merge', i, j, rStart, cStart, rEnd, cEnd)
                 const newChild = {
                     colStart: cStart,
@@ -588,21 +589,25 @@ export const ResizeGrid = props => {
                     rowEnd: rEnd,
                 };
                 if (i === rowStart && j === colStart) {
-                    newChilds[idx] = newChild;
+                    newChilds[idx] = Object.assign(Object.assign({}, newChilds[idx]), newChild);
                 }
                 else if (rStart !== rowStart ||
                     rEnd !== rowEnd ||
                     cStart !== colStart ||
                     cEnd !== colEnd) {
-                    newChilds.splice(idx, 0, newChild);
+                    insertArr.push({ idx: insertIdx, cell: newChild });
                 }
             }
         }
+        insertArr.sort((a, b) => a.idx - b.idx);
+        insertArr.forEach(({ idx, cell }) => {
+            newChilds.splice(idx, 0, cell);
+        });
         setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
     };
     function resetBackgroundCellRef() {
-        Object.values(cellsRef.current).forEach(r => {
-            if (r.current) {
+        Object.entries(cellsRef.current).forEach(([idx, r]) => {
+            if (r.current && grid.childs[idx] && !grid.childs[idx].active) {
                 r.current.style.background = 'unset';
             }
         });
@@ -628,6 +633,8 @@ export const ResizeGrid = props => {
             delete newChilds[idxStart].sizeY;
             hCells.reverse().forEach(i => {
                 if (i !== idxStart) {
+                    const deleteChild = newChilds[i];
+                    cachedMergeCellRef.current[`${deleteChild.rowStart}-${deleteChild.colStart}`] = i;
                     newChilds.splice(i, 1);
                     delete cellsRef.current[i];
                     delete cordinatesRef.current[i];
@@ -636,6 +643,12 @@ export const ResizeGrid = props => {
             });
             setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
         }
+        else {
+            if (!isPreview) {
+                !cell.active && activeCell({ idx });
+                // cellsRef.current[idx]?.style.background = cellActiveStyle?.background;
+            }
+        }
         selectRef.current = null;
         selectEndRef.current = null;
     };
@@ -698,7 +711,7 @@ export const ResizeGrid = props => {
     const renderGrid = (style) => {
         const { gridTemplateColumns, gridTemplateRows, childs } = grid;
         // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
-        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef })))));
+        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef, allowActive: allowActive })))));
     };
     const handleUpLine = () => {
         lineVertical(false);

package/es/components/molecules/ResizeGrid/components/Cell/Cell.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { buildGridArea, buildTranform } from '../../constant';
 import { StyledCell } from './styled';
 import { useDeepCompareEffect } from '../../../../../hooks/useDeepCompareEffect';
-export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, activeCell, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, }) => {
+export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, allowActive, }) => {
     const { objectFit, image } = cell;
     const downRef = useRef(false);
     const timeoutRef = useRef();
@@ -72,7 +72,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     // console.log('TRANSFORM', idx, buildTranform(cell))
     return (React.createElement(StyledCell, { ref: cellRef, className: "cell", 
         // onClick={handleActiveCell}
-        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (cell.active &&
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (allowActive && cell.active &&
             !isPreview &&
             (activeStyle || {
                 outline: '1px solid #005eb8',

package/es/components/molecules/ResizeGrid/types.d.ts

@@ -84,6 +84,7 @@ export interface CellProps {
     style?: React.CSSProperties;
     activeStyle?: React.CSSProperties;
     isPreview?: boolean;
+    allowActive?: boolean;
     ctrlKeyRef?: React.RefObject<boolean>;
 }
 export type TGrid = {
@@ -135,6 +136,7 @@ export interface IResizeGridProps {
     cellActiveStyle?: React.CSSProperties;
     containerStyle?: React.CSSProperties;
     isCompact?: boolean;
+    allowActive?: boolean;
     delayUpdate?: number;
     reCalculateFlag?: number | boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.109",
+  "version": "1.3.5-beta.110",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",