@antscorp/antsomi-ui 1.3.5-beta.82 → 1.3.5-beta.821

package/es/components/molecules/RequestAccess/RequestAccess.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Button, Flex, TextArea, Typography } from '@antscorp/antsomi-ui/es/components';
+// Styled
+import { RequestAccessStyled } from './styled';
+// Translate
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { BlockIcon } from '../../icons';
+const { t } = i18nInstance;
+export const RequestAccess = props => {
+    const { className, placeholder = t(translations.requestAccess.placeholder), deniedTitle = t(translations.requestAccess.deniedTitle), deniedSubTitle = t(translations.requestAccess.deniedSubTitle), sentTitle = t(translations.requestAccess.sentTitle), sentSubTitle = t(translations.requestAccess.sentSubTitle), requestText = t(translations.requestAccess.requestText), switchAccountText = t(translations.requestAccess.switchAccountText), onRequest, onSwitchAccount, } = props;
+    const [isSentRequest, setIsSentRequest] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const messageRef = useRef(null);
+    const handleClickRequest = () => {
+        const message = messageRef.current?.resizableTextArea?.textArea.value || '';
+        if (onRequest) {
+            try {
+                setIsLoading(true);
+                onRequest(message)
+                    .then(data => {
+                    if (data) {
+                        setIsSentRequest(true);
+                    }
+                })
+                    .finally(() => setIsLoading(false));
+            }
+            catch (error) {
+                // the onRequest(message) callback is called in try (have not call again)
+                setIsSentRequest(true);
+            }
+        }
+    };
+    const handleSwitchAccount = () => {
+        if (onSwitchAccount)
+            onSwitchAccount();
+    };
+    return (_jsx(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}`, children: _jsxs(Flex, { vertical: true, gap: 20, children: [_jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Typography.Text, { className: "denied-title", children: isSentRequest ? (sentTitle) : (_jsxs(_Fragment, { children: [deniedTitle, _jsx(BlockIcon, {})] })) }), _jsx(Typography.Text, { className: "denied-sub-title", children: isSentRequest ? sentSubTitle : deniedSubTitle })] }), !isSentRequest ? (_jsx(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null, _jsxs(Flex, { className: "action-buttons", gap: 10, children: [isSentRequest ? null : (_jsx(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading, children: requestText })), _jsx(Button, { onClick: handleSwitchAccount, children: switchAccountText })] })] }) }));
+};

package/es/components/molecules/RequestAccess/index.d.ts

@@ -0,0 +1 @@
+export { RequestAccess } from './RequestAccess';

package/es/components/molecules/RequestAccess/index.js

@@ -0,0 +1 @@
+export { RequestAccess } from './RequestAccess';

package/es/components/molecules/RequestAccess/styled.d.ts

@@ -0,0 +1 @@
+export declare const RequestAccessStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/RequestAccess/styled.js

@@ -0,0 +1,41 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const RequestAccessStyled = styled.div `
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    width: 350px;
+
+    .denied-title {
+      display: inline-flex;
+      gap: 5px;
+
+      font-size: 20px;
+      line-height: 24px;
+      font-weight: 700;
+      color: ${globalToken?.orange6};
+
+      & > svg {
+        color: ${globalToken?.bw5};
+      }
+    }
+
+    .denied-sub-title {
+      line-height: 14px;
+      color: ${globalToken?.bw8};
+    }
+
+    .antsomi-input {
+      height: 150px;
+      border: 1px solid ${globalToken?.blue1} !important;
+      border-radius: ${globalToken?.borderRadius}px;
+      padding: 10px;
+    }
+  }
+`;

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

@@ -1,24 +1,5 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useState, useRef, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
 import { Cell } from './components/Cell';
 import { GRID_TEMPLATE, MIN_SIZE, THREADHOLD, buildGrid } from './constant';
 import { StyledGrid, StyledMiddleLayer, StyledBGLayer, StyledLine } from './styled';
@@ -32,9 +13,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 +36,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 +86,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]);
@@ -111,8 +94,8 @@ export const ResizeGrid = props => {
         // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
         // console.log(initRef.current < 2,!initDoneRef.current, acceptUpdateRef.current)
         if ((initRef.current < 2 || !initDoneRef.current || acceptUpdateRef.current) &&
-            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) &&
-            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
+            initGrid?.rows &&
+            initGrid?.cols) {
             // console.log('apply change...', buildGrid(initGrid))
             initRef.current += 1;
             firstChangeRef.current = true;
@@ -147,9 +130,8 @@ export const ResizeGrid = props => {
                         const newChilds = JSON.parse(JSON.stringify(childs));
                         let isValidChildSize = true;
                         newChilds.forEach((child, idx) => {
-                            var _a, _b;
-                            if (isValidChildSize && notFollow(child, (_a = startRef.current) === null || _a === void 0 ? void 0 : _a.line, false)) {
-                                if (child.rowStart === ((_b = startRef.current) === null || _b === void 0 ? void 0 : _b.line)) {
+                            if (isValidChildSize && notFollow(child, startRef.current?.line, false)) {
+                                if (child.rowStart === startRef.current?.line) {
                                     if (child.transformY) {
                                         child.transformY = +child.transformY - yDistant;
                                     }
@@ -158,9 +140,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) {
@@ -169,7 +149,11 @@ export const ResizeGrid = props => {
                             }
                         });
                         isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateRows: newArr, childs: newChilds }));
+                            setGrid({
+                                ...gridRef.current,
+                                gridTemplateRows: newArr,
+                                childs: newChilds,
+                            });
                     }
                 }
                 else {
@@ -204,7 +188,11 @@ export const ResizeGrid = props => {
                             }
                         });
                         isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateColumns: newArr, childs: newChilds }));
+                            setGrid({
+                                ...gridRef.current,
+                                gridTemplateColumns: newArr,
+                                childs: newChilds,
+                            });
                     }
                 }
             }
@@ -279,12 +267,24 @@ export const ResizeGrid = props => {
                     if (isValid) {
                         const newChilds = [...gridRef.current.childs];
                         Object.keys(mapNewSizeTop).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeTop[cellIdx], movedBottom: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeY: mapNewSizeTop[cellIdx],
+                                movedBottom: true,
+                            };
                         });
                         Object.keys(mapNewSizeBottom).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeBottom[cellIdx][0], transformY: (mapNewSizeBottom[cellIdx][1].transformY || 0) + yDistant, movedTop: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeY: mapNewSizeBottom[cellIdx][0],
+                                transformY: (mapNewSizeBottom[cellIdx][1].transformY || 0) + yDistant,
+                                movedTop: true,
+                            };
+                        });
+                        setGrid({
+                            ...gridRef.current,
+                            childs: newChilds,
                         });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
                     }
                 }
                 else {
@@ -344,12 +344,24 @@ export const ResizeGrid = props => {
                     if (isValid) {
                         const newChilds = [...gridRef.current.childs];
                         Object.keys(mapNewSizeLeft).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeLeft[cellIdx], movedRight: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeX: mapNewSizeLeft[cellIdx],
+                                movedRight: true,
+                            };
                         });
                         Object.keys(mapNewSizeRight).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeRight[cellIdx][0], transformX: (mapNewSizeRight[cellIdx][1].transformX || 0) + xDistant, movedLeft: true });
+                            newChilds[cellIdx] = {
+                                ...newChilds[cellIdx],
+                                sizeX: mapNewSizeRight[cellIdx][0],
+                                transformX: (mapNewSizeRight[cellIdx][1].transformX || 0) + xDistant,
+                                movedLeft: true,
+                            };
+                        });
+                        setGrid({
+                            ...gridRef.current,
+                            childs: newChilds,
                         });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
                     }
                 }
             }
@@ -391,7 +403,13 @@ export const ResizeGrid = props => {
     //   }
     // };
     const activeCell = ({ idx }) => {
-        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: prev.childs.map((c, i) => (Object.assign(Object.assign({}, c), { active: i === idx }))) })));
+        setGrid(prev => ({
+            ...prev,
+            childs: prev.childs.map((c, i) => ({
+                ...c,
+                active: i === idx,
+            })),
+        }));
     };
     const findResizeCells = ({ type, line, direction, idx, 
     // cell,
@@ -510,16 +528,30 @@ export const ResizeGrid = props => {
         const leftCells = {};
         const rightCells = {};
         leftCols.forEach(i => {
-            var _a, _b;
             const cell = grid.childs[i];
             const cellRef = cellsRef.current[i];
-            leftCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
+            leftCells[i] = {
+                sizeX: cell.sizeX || cellRef.current?.clientWidth || 0,
+                sizeY: cell.sizeY || cellRef.current?.clientHeight || 0,
+                transformX: cell.transformX || 0,
+                transformY: cell.transformY || 0,
+                idx: i,
+                cellRef,
+                ...cell,
+            };
         });
         rightCols.forEach(i => {
-            var _a, _b;
             const cell = grid.childs[i];
             const cellRef = cellsRef.current[i];
-            rightCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
+            rightCells[i] = {
+                sizeX: cell.sizeX || cellRef.current?.clientWidth || 0,
+                sizeY: cell.sizeY || cellRef.current?.clientHeight || 0,
+                transformX: cell.transformX || 0,
+                transformY: cell.transformY || 0,
+                idx: i,
+                cellRef,
+                ...cell,
+            };
         });
         const newDirection = isRevert
             ? {
@@ -560,9 +592,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 +605,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 +621,31 @@ export const ResizeGrid = props => {
                     rowEnd: rEnd,
                 };
                 if (i === rowStart && j === colStart) {
-                    newChilds[idx] = newChild;
+                    newChilds[idx] = {
+                        ...newChilds[idx],
+                        ...newChild,
+                    };
                 }
                 else if (rStart !== rowStart ||
                     rEnd !== rowEnd ||
                     cStart !== colStart ||
                     cEnd !== colEnd) {
-                    newChilds.splice(idx, 0, newChild);
+                    insertArr.push({ idx: insertIdx, cell: newChild });
                 }
             }
         }
-        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
+        insertArr.sort((a, b) => a.idx - b.idx);
+        insertArr.forEach(({ idx, cell }) => {
+            newChilds.splice(idx, 0, cell);
+        });
+        setGrid(prev => ({
+            ...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,13 +671,24 @@ 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];
                     // console.log('del corr', i, cordinatesRef.current)
                 }
             });
-            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+            setGrid({
+                ...gridRef.current,
+                childs: newChilds,
+            });
+        }
+        else {
+            if (!isPreview) {
+                !cell.active && activeCell({ idx });
+                // cellsRef.current[idx]?.style.background = cellActiveStyle?.background;
+            }
         }
         selectRef.current = null;
         selectEndRef.current = null;
@@ -670,16 +724,15 @@ export const ResizeGrid = props => {
         cellsRef.current[idx] = ref;
         // console.log('cellsRef.current', cellsRef.current)
     };
-    const setCordinate = (idx) => __awaiter(void 0, void 0, void 0, function* () {
+    const setCordinate = async (idx) => {
         // while(!cellsRef[idx]) {
         //   await new Promise(r => {setTimeout(r, 100)});
         //   console.log('wait', idx, cellsRef[idx])
         // }
-        var _b;
         if (containerRef.current) {
             const container = containerRef.current.getBoundingClientRect();
             const childRef = cellsRef.current[idx];
-            const childBox = (_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            const childBox = childRef.current?.getBoundingClientRect();
             if (childBox) {
                 const cordinate = {
                     width: childBox.width,
@@ -694,43 +747,43 @@ export const ResizeGrid = props => {
             }
         }
         // console.log('set corr', idx, cordinatesRef.current)
-    });
+    };
     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 (_jsx("div", { className: "grid-container", ref: containerRef, style: {
+                gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '),
+                gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' '),
+                ...style,
+            }, children: childs.map((cell, idx) => (_jsx(Cell, { 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 }, `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`))) }));
     };
     const handleUpLine = () => {
         lineVertical(false);
         lineHorizontal(false);
     };
-    const _a = containerStyle || {}, { borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, borderColor } = _a, rest = __rest(_a, ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "borderColor"]);
-    const renderLines = () => (React.createElement(React.Fragment, null,
-        React.createElement(StyledLine, { ref: verticalLineRef, className: "vertical", onMouseUp: handleUpLine }),
-        React.createElement(StyledLine, { ref: horizontalLineRef, className: "horizontal", onMouseUp: handleUpLine })));
-    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact },
-        React.createElement("div", { className: "layers", ref: layersRef },
-            React.createElement(StyledBGLayer, { style: {
-                    backgroundImage: image ? `url(${image})` : 'unset',
-                    backgroundSize: imageSize === 'fill' ? '100% 100%' : imageSize,
-                    backgroundPosition: imagePosition,
-                } }),
-            React.createElement(StyledMiddleLayer, { style: {
-                    borderTopLeftRadius,
-                    borderTopRightRadius,
-                    borderBottomRightRadius,
-                    borderBottomLeftRadius,
-                    borderTopWidth,
-                    borderRightWidth,
-                    borderBottomWidth,
-                    borderLeftWidth,
-                    borderStyle,
-                    borderColor,
-                } }),
-            renderGrid(Object.assign(Object.assign({}, rest), { borderTopLeftRadius,
-                borderTopRightRadius,
-                borderBottomRightRadius,
-                borderBottomLeftRadius }))),
-        renderLines()));
+    const { borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, borderColor, ...rest } = containerStyle || {};
+    const renderLines = () => (_jsxs(_Fragment, { children: [_jsx(StyledLine, { ref: verticalLineRef, className: "vertical", onMouseUp: handleUpLine }), _jsx(StyledLine, { ref: horizontalLineRef, className: "horizontal", onMouseUp: handleUpLine })] }));
+    return (_jsxs(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact, children: [_jsxs("div", { className: "layers", ref: layersRef, children: [_jsx(StyledBGLayer, { style: {
+                            backgroundImage: image ? `url(${image})` : 'unset',
+                            backgroundSize: imageSize === 'fill' ? '100% 100%' : imageSize,
+                            backgroundPosition: imagePosition,
+                        } }), _jsx(StyledMiddleLayer, { style: {
+                            borderTopLeftRadius,
+                            borderTopRightRadius,
+                            borderBottomRightRadius,
+                            borderBottomLeftRadius,
+                            borderTopWidth,
+                            borderRightWidth,
+                            borderBottomWidth,
+                            borderLeftWidth,
+                            borderStyle,
+                            borderColor,
+                        } }), renderGrid({
+                        ...rest,
+                        borderTopLeftRadius,
+                        borderTopRightRadius,
+                        borderBottomRightRadius,
+                        borderBottomLeftRadius,
+                    })] }), renderLines()] }));
 };
 ResizeGrid.defaultProps = defaultProps;

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

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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();
@@ -36,7 +37,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
             bottom: cell.rowEnd,
             left: cell.colStart,
         }[direction];
-        if ((ctrlKeyRef === null || ctrlKeyRef === void 0 ? void 0 : ctrlKeyRef.current) ||
+        if (ctrlKeyRef?.current ||
             (direction === 'top' && cell.movedTop) ||
             (direction === 'right' && cell.movedRight) ||
             (direction === 'bottom' && cell.movedBottom) ||
@@ -59,8 +60,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     const renderCellContent = () => renderCell
         ? renderCell(cell, idx, { isPreview })
         : !!image &&
-            image.imageUrl && (React.createElement("div", { className: "imageWrapper" },
-            React.createElement("img", { src: image.imageUrl, alt: "menu", style: image.imageStyles })));
+            image.imageUrl && (_jsx("div", { className: "imageWrapper", children: _jsx("img", { src: image.imageUrl, alt: "menu", style: image.imageStyles }) }));
     // const handleActiveCell = e => {
     //   activeCell(e, cell, idx);
     // };
@@ -70,18 +70,24 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     //   drag(e, direction, idx)
     // }
     // console.log('TRANSFORM', idx, buildTranform(cell))
-    return (React.createElement(StyledCell, { ref: cellRef, className: "cell", 
+    return (_jsxs(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 &&
-            !isPreview &&
-            (activeStyle || {
-                outline: '1px solid #005eb8',
-            }))), style) },
-        React.createElement("div", { className: "cell-content" }, renderCellContent()),
-        React.createElement("div", { className: "cell-border", style: {
-                borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
-                borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
-                display: isPreview ? 'none' : 'block',
-            } }),
-        ['top', 'right', 'bottom', 'left'].map(direction => (React.createElement("div", { key: direction, className: `resize-${direction}`, onMouseDown: e => handleDown(e, direction, idx), onMouseUp: e => handleUp(e, direction, idx) })))));
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: {
+            gridArea: buildGridArea(cell),
+            width: cell.sizeX ? `${cell.sizeX}px` : 'unset',
+            height: cell.sizeY ? `${cell.sizeY}px` : 'unset',
+            transform: buildTranform(cell),
+            // borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
+            // borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
+            ...(allowActive && cell.active &&
+                !isPreview &&
+                (activeStyle || {
+                    outline: '1px solid #005eb8',
+                })),
+            ...style,
+        }, children: [_jsx("div", { className: "cell-content", children: renderCellContent() }), _jsx("div", { className: "cell-border", style: {
+                    borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
+                    borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
+                    display: isPreview ? 'none' : 'block',
+                } }), ['top', 'right', 'bottom', 'left'].map(direction => (_jsx("div", { className: `resize-${direction}`, onMouseDown: e => handleDown(e, direction, idx), onMouseUp: e => handleUp(e, direction, idx) }, direction)))] }));
 };

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

@@ -35,7 +35,11 @@ export const GRID_TEMPLATE = {
         ],
     },
 };
-export const buildCell = cell => (Object.assign({ rowEnd: cell.rowEnd || cell.rowStart + 1, colEnd: cell.colEnd || cell.colStart + 1 }, cell));
+export const buildCell = cell => ({
+    rowEnd: cell.rowEnd || cell.rowStart + 1,
+    colEnd: cell.colEnd || cell.colStart + 1,
+    ...cell,
+});
 export const buildGrid = (inputGrid) => {
     let childs = [];
     const grid = JSON.parse(JSON.stringify(inputGrid));
@@ -79,9 +83,14 @@ export const buildGrid = (inputGrid) => {
             buildCol = false;
         });
     }
-    return Object.assign(Object.assign({ rows: grid.rows || 1, cols: grid.rows || 1 }, grid), { gridTemplateColumns,
+    return {
+        rows: grid.rows || 1,
+        cols: grid.rows || 1,
+        ...grid,
+        gridTemplateColumns,
         gridTemplateRows,
-        childs });
+        childs,
+    };
 };
 export const buildGridArea = box => 
 // console.log('area', box, `${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`)

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;
 }