@antscorp/antsomi-ui 1.3.3-beta.21 → 1.3.3-beta.22

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

@@ -10,9 +10,10 @@ const defaultProps = {
     cellActiveStyle: {},
     isPreviewMode: false,
     isCompact: false,
+    delayUpdate: 100,
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, } = props;
+    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -21,11 +22,13 @@ export const ResizeGrid = props => {
     const gridRef = useRef();
     const containerRef = useRef(null);
     const cellsRef = useRef({});
-    const onChangeTimout = useRef();
+    const onChangeTimoutRef = useRef();
+    const onChangeDelayRef = useRef();
+    const acceptUpdateRef = useRef(false);
     // console.log('grid', grid)
     const handleChangeGrid = () => {
-        clearTimeout(onChangeTimout.current);
-        onChangeTimout.current = setTimeout(() => {
+        clearTimeout(onChangeTimoutRef.current);
+        onChangeTimoutRef.current = setTimeout(() => {
             if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
                 const container = containerRef.current.getBoundingClientRect();
                 const childs = Object.values(cellsRef.current).map(cell => {
@@ -41,6 +44,11 @@ export const ResizeGrid = props => {
                 });
                 if (typeof onChange === 'function') {
                     onChange(grid, childs);
+                    acceptUpdateRef.current = false;
+                    clearTimeout(onChangeDelayRef.current);
+                    onChangeDelayRef.current = setTimeout(() => {
+                        acceptUpdateRef.current = true;
+                    }, delayUpdate);
                 }
             }
         }, 300);
@@ -54,7 +62,7 @@ export const ResizeGrid = props => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [grid]);
     useDeepCompareEffect(() => {
-        if ((initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
+        if (acceptUpdateRef.current && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
             setGrid(buildGrid(initGrid));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -4,7 +4,25 @@ import { StyledCell } from './styled';
 export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreviewMode, borderStyle = '1px dashed', activeStyle, }) => {
     const { objectFit, image } = cell;
     const downRef = useRef(false);
+    const ctrlKeyRef = useRef(false);
     const cellRef = useRef(null);
+    const isMac = () => navigator.platform.indexOf('Mac') >= 0;
+    useEffect(() => {
+        const handleKeyDown = e => {
+            if ((isMac() && e.metaKey) || (!isMac() && e.key === 'Control')) {
+                ctrlKeyRef.current = true;
+            }
+        };
+        const handleKeyUp = () => {
+            ctrlKeyRef.current = false;
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keyup', handleKeyUp);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [idx, cell]);
     useEffect(() => {
         setRef(idx, cellRef);
     }, [idx, cell]);
@@ -17,7 +35,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     const handleUpCell = e => {
         upSelect(idx, cell);
     };
-    const handleDown = (direction, idx, e) => {
+    const handleDown = (e, direction, idx) => {
         e.stopPropagation();
         downRef.current = true;
         // console.log('down', direction, idx, e)
@@ -28,7 +46,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
             bottom: cell.rowEnd,
             left: cell.colStart,
         }[direction];
-        if (window.event.ctrlKey ||
+        if (ctrlKeyRef.current ||
             (direction === 'top' && cell.movedTop) ||
             (direction === 'right' && cell.movedRight) ||
             (direction === 'bottom' && cell.movedBottom) ||
@@ -39,7 +57,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
             down(e, type, line);
         }
     };
-    const handleUp = (direction, idx, e) => {
+    const handleUp = (e, direction, idx) => {
         e.stopPropagation();
         // console.log('up', direction, idx, e)
         downRef.current = false;
@@ -50,7 +68,8 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     };
     const renderCellContent = (cell, idx) => renderCell
         ? renderCell(cell, idx)
-        : !!image && image.imageUrl && (React.createElement("div", { className: "imageWrapper" },
+        : !!image &&
+            image.imageUrl && (React.createElement("div", { className: "imageWrapper" },
             React.createElement("img", { src: image.imageUrl, alt: "menu", style: image.imageStyles })));
     // const handleDrag = (direction, idx, e) => {
     //   if (!downRef.current) return;
@@ -63,5 +82,5 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
                 outline: '1px solid #005eb8',
             }))), style) },
         renderCellContent(cell, idx),
-        ['top', 'right', 'bottom', 'left'].map(direction => (React.createElement("div", { key: direction, className: `resize-${direction}`, onMouseDown: e => handleDown(direction, idx, e), onMouseUp: e => handleUp(direction, idx, e) })))));
+        ['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) })))));
 };

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

@@ -27,7 +27,7 @@ export declare const GRID_TEMPLATE: {
     };
 };
 export declare const buildCell: (cell: any) => any;
-export declare const buildGrid: (grid: Partial<TGrid>) => TGrid;
+export declare const buildGrid: (inputGrid: Partial<TGrid>) => TGrid;
 export declare const buildGridArea: (box: any) => string;
 export declare const buildTranform: (box: any) => string;
 export declare const MIN_SIZE = 32;

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

@@ -36,8 +36,9 @@ 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 buildGrid = (grid) => {
+export const buildGrid = (inputGrid) => {
     let childs = [];
+    const grid = JSON.parse(JSON.stringify(inputGrid));
     let buildCol = !grid.gridTemplateColumns || !grid.gridTemplateColumns.length;
     const buildRow = !grid.gridTemplateRows || !grid.gridTemplateRows.length;
     const buildChild = !grid.childs || !grid.childs.length;

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

@@ -125,4 +125,5 @@ export interface IResizeGridProps {
     cellActiveStyle?: React.CSSProperties;
     containerStyle?: React.CSSProperties;
     isCompact?: boolean;
+    delayUpdate?: number;
 }

package/es/test.js

@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
 import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
 // Slider,
-SliderWithInputNumber, Space, UploadImage, RateV2, } from './components';
+SliderWithInputNumber, Space, UploadImage, RateV2, ResizeGrid, } from './components';
 // import { Slider } from 'antd';
 import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
 import { Rate } from './components/atoms/Rate';
@@ -87,6 +87,7 @@ export const App = () => {
     // ----------------------------  Test Helps End ------------------------------
     // ------------------------ Media template components test start -------------------------
     const [starValue, setStarValue] = useState(1.3);
+    const [grid, setGrid] = useState({ rows: 3, cols: 3 });
     return (React.createElement(ConfigProvider, null,
         React.createElement("div", { style: {
                 width: 500,
@@ -105,6 +106,15 @@ export const App = () => {
             React.createElement("br", null),
             React.createElement("h2", { style: { textAlign: 'center' } }, "Test component of media template"),
             React.createElement(Space, { size: 20, direction: "vertical" },
+                React.createElement(ResizeGrid, { grid: grid, renderCell: (cell, idx) => (React.createElement("div", { style: { height: '100%' } })), 
+                    // image="https://source.unsplash.com/random/300×300"
+                    // imagePosition="center"
+                    // imageSize="contain"
+                    onChange: (grid, childs) => {
+                        console.log('chnaged', grid, childs);
+                        setGrid(grid);
+                    } }),
+                React.createElement("button", { onClick: () => setGrid({ cols: 4, rows: 3 }) }, "change"),
                 React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
                     React.createElement(GradientSetting, null)),
                 React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),

package/package.json

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