@antscorp/antsomi-ui 1.3.3-beta.12 → 1.3.3-beta.13

package/dist/public/icons/bb64e23a1ff390a416d765ee556096ab.svg

@@ -1,87 +0,0 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100" height="300" viewBox="0 0 100 300" preserveAspectRatio="none">
-<style type="text/css">
-	.st0{fill:#B2B2B2;}
-	.st1{fill:#9B9B9B;}
-</style>
-<path d="M53.7,36.8v3.8h3.8l11.1-11.1l-3.8-3.8L53.7,36.8z M71.4,26.5c0.4-0.4,0.4-1,0-1.4l0,0L69,22.8c-0.4-0.4-1-0.4-1.4,0l0,0
-	l-1.8,1.8l3.8,3.8L71.4,26.5z"/>
-<path d="M5.9,31.1H9L7.5,27L5.9,31.1z M13.5,22.5h-12C0.7,22.5,0,23.2,0,24v12c0,0.8,0.7,1.5,1.5,1.5h12c0.8,0,1.5-0.7,1.5-1.5V24
-	C15,23.2,14.3,22.5,13.5,22.5z M10.5,34.9l-0.9-2.3H5.4l-0.8,2.3H3l3.8-9.8h1.4l3.8,9.8H10.5z"/>
-<path d="M95.6,8.9l-9-8.9l-1.4,1.4l2.4,2.4L82.5,9c-0.6,0.6-0.6,1.5,0,2.1l0,0l5.5,5.5c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.2,1.1-0.4
-	l5.5-5.5C96.2,10.5,96.2,9.5,95.6,8.9L95.6,8.9z M84.2,10L89,5.2l4.8,4.8H84.2z M98,11.5c0,0-2,2.2-2,3.5c0,1.1,0.9,2,2,2s2-0.9,2-2
-	C100,13.7,98,11.5,98,11.5z"/>
-<path d="M95.2,26.7L91,22.5l-4.2,4.2C85.6,27.9,85,29.5,85,31s0.6,3.1,1.8,4.3c2.3,2.3,6.1,2.4,8.5,0l0,0C96.4,34,97,32.5,97,31
-	S96.4,27.9,95.2,26.7L95.2,26.7z M86.5,31.2c0-1.5,0.5-2.5,1.3-3.3l3.2-3.2l3.2,3.3c0.9,0.9,1.3,1.8,1.3,3.3L86.5,31.2L86.5,31.2z"
-	/>
-<g transform="translate(138 2337)">
-</g>
-<path d="M4,8h4.1L6,2.5L4,8z M10,13l-1.1-3H3.2l-1.1,3H0L5.1,0H7l5.1,13H10z"/>
-<path d="M27.6,9.8h13.5V8.3H27.6V9.8z M27.6,12h13.5v-0.8H27.6V12z M27.6,6.8h13.5V4.5H27.6V6.8z M27.6,0v3h13.5V0H27.6z"/>
-<path d="M67.9,12h1.5v1.5h-1.5V12z M67.9,10.5h1.5V9h-1.5V10.5z M55.9,7.5h1.5V6h-1.5V7.5z M55.9,10.5h1.5V9h-1.5V10.5z M55.9,4.5
-	h1.5V3h-1.5V4.5z M55.9,1.5h1.5V0h-1.5V1.5z M58.9,1.5h1.5V0h-1.5V1.5z M64.9,13.5h1.5V12h-1.5V13.5z M61.9,13.5h1.5V12h-1.5V13.5z
-	 M64.9,13.5h1.5V12h-1.5V13.5z M58.9,13.5h1.5V12h-1.5V13.5z M55.9,13.5h1.5V12h-1.5V13.5z M69.4,3.8c0-2.1-1.7-3.8-3.8-3.8h-3.8
-	v1.5h3.8c1.2,0,2.3,1,2.3,2.3v3.8h1.5V3.8z"/>
-<path d="M27.6,31.5h3.8V30h-3.8V31.5z M32.5,31.5h3.8V30h-3.8V31.5z M37.4,31.5h3.8V30h-3.8V31.5z M27.6,34.5h1.5V33h-1.5V34.5z
-	 M30.6,34.5h1.5V33h-1.5C30.6,33,30.6,34.5,30.6,34.5z M33.6,34.5h1.5V33h-1.5V34.5z M36.6,34.5h1.5V33h-1.5V34.5z M39.6,34.5h1.5
-	V33h-1.5V34.5z M27.6,28.5h6V27h-6C27.6,27,27.6,28.5,27.6,28.5z M35.1,28.5h6V27h-6V28.5z M27.6,22.5v3h13.5v-3H27.6z"/>
-<g>
-	<path class="st0" d="M0,46.1v5v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-5H0z M17.1,63.1H0.9v-2H17v2H17.1z M17.1,60.1H0.9
-		v-2H17v2H17.1z M17.1,57.1H0.9v-2H17v2H17.1z M17.1,54.1H0.9v-2H17v2H17.1z M0.9,51.1V47H17v4.1H0.9z"/>
-	<g>
-		<path d="M0,46.1h18v3H0V46.1z"/>
-	</g>
-</g>
-<g>
-	<path class="st0" d="M54.7,46.1v3v2v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-2v-3H54.7z M71.7,63.1H55.6v-2h16.1V63.1z
-		 M71.7,60.1H55.6v-2h16.1V60.1z M71.7,57.1H55.6v-2h16.1V57.1z M71.7,54.1H55.6v-2h16.1V54.1z M71.7,51.1H55.6v-2h16.1V51.1z"/>
-	<g>
-		<rect x="55.6" y="61.1" width="16.1" height="2"/>
-		<rect x="55.6" y="55.1" width="16.1" height="2"/>
-		<rect x="55.6" y="49.1" width="16.1" height="2"/>
-	</g>
-</g>
-<g>
-	<path class="st0" d="M82,46.1v3v2v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-2v-3H82z M99.1,63.1H82.9v-2H99L99.1,63.1
-		L99.1,63.1z M99.1,60.1H82.9v-2H99L99.1,60.1L99.1,60.1z M99.1,57.1H82.9v-2H99L99.1,57.1L99.1,57.1z M99.1,54.1H82.9v-2H99
-		L99.1,54.1L99.1,54.1z M99.1,51.1H82.9v-2H99L99.1,51.1L99.1,51.1z"/>
-	<g>
-		<rect x="82.9" y="58.1" width="16.1" height="2"/>
-		<rect x="82.9" y="52.1" width="16.1" height="2"/>
-	</g>
-</g>
-<g>
-	<path class="st0" d="M27.3,46.1v3v2v1v2v1v2v1v2v1V64h18v-2.9v-1v-2v-1v-2v-1v-2v-1v-2v-3H27.3z M44.4,63.1H28.3v-2h16.1V63.1z
-		 M44.4,60.1H28.3v-2h16.1V60.1z M44.4,57.1H28.3v-2h16.1V57.1z M44.4,54.1H28.3v-2h16.1V54.1z M44.4,51.1H28.3v-2h16.1V51.1z"/>
-	<g>
-		<rect x="28.3" y="51.1" width="16.1" height="1"/>
-		<rect x="28.3" y="54.1" width="16.1" height="1"/>
-		<rect x="28.3" y="57.1" width="16.1" height="1"/>
-		<rect x="28.3" y="60.1" width="16.1" height="1"/>
-	</g>
-</g>
-<g>
-	<polygon class="st0" points="30.3,86.1 30.3,73.1 27.3,73.1 27.3,86.1 27.3,89.1 30.3,89.1 43.3,89.1 43.3,86.1 	"/>
-	<path d="M30.3,74.1v1h2v2h-2v1h2v2h-2v1h2v2h-2v1h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-12H30.3z M35.3,83.1h-2v-2h2V83.1z M35.3,80.1
-		h-2v-2h2V80.1z M35.3,77.1h-2v-2h2V77.1z M38.3,83.1h-2v-2h2V83.1z M38.3,80.1h-2v-2h2V80.1z M38.3,77.1h-2v-2h2V77.1z M41.3,83.1
-		h-2v-2h2V83.1z M41.3,80.1h-2v-2h2V80.1z M41.3,77.1h-2v-2h2V77.1z"/>
-</g>
-<g>
-	<polygon points="3,86.1 3,73.1 0,73.1 0,86.1 0,89.1 3,89.1 16,89.1 16,86.1 	"/>
-	<path class="st0" d="M3,74.1v1h2v2H3v1h2v2H3v1h2v2H3v1h2v2h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v-12H3z M8,83.1H6v-2h2V83.1z M8,80.1H6
-		v-2h2V80.1z M8,77.1H6v-2h2V77.1z M11,83.1H9v-2h2V83.1z M11,80.1H9v-2h2V80.1z M11,77.1H9v-2h2V77.1z M14,83.1h-2v-2h2V83.1z
-		 M14,80.1h-2v-2h2V80.1z M14,77.1h-2v-2h2V77.1z"/>
-</g>
-<path d="M52.6,77.1h2v-2h-2V77.1z M52.6,81.1h2v-2h-2V81.1z M52.6,73.1h2v-2C53.5,71.1,52.6,72,52.6,73.1z M72.6,71.1v2h2
-	C74.6,72,73.8,71.1,72.6,71.1z M60.6,89.1h2v-2h-2V89.1z M52.6,85.1h2v-2h-2V85.1z M54.6,89.1v-2h-2C52.6,88.2,53.5,89.1,54.6,89.1z
-	 M52.6,75.1v3h22v-3H52.6z M56.6,71.1v18h6v-18H56.6z M72.6,85.1h2v-2h-2V85.1z M60.6,73.1h2v-2h-2V73.1z M56.6,89.1h2v-2h-2V89.1z
-	 M56.6,73.1h2v-2h-2V73.1z M72.6,89.1c1.1,0,2-0.9,2-2h-2V89.1z M72.6,81.1h2v-2h-2V81.1z M72.6,77.1h2v-2h-2V77.1z M64.6,89.1h2v-2
-	h-2V89.1z M64.6,73.1h2v-2h-2V73.1z M68.6,89.1h2v-2h-2V89.1z M68.6,73.1h2v-2h-2V73.1z"/>
-<g>
-	<path d="M83,80.1h7v9h-7V80.1z M92,80.1h7v9h-7V80.1z"/>
-	<path class="st1" d="M82,83.1h18v3H82V83.1z"/>
-</g>
-<g>
-	<path class="st1" d="M1,98.3h7v9H1V98.3z M10,98.3h7v9h-7V98.3z"/>
-	<path d="M0,101.3h8v3H0V101.3z M10,101.3h8v3h-8V101.3z"/>
-</g>
-</svg>

package/dist/public/icons/transparent.svg

@@ -1 +0,0 @@
-<svg height="10" version="1.1" viewBox="0 0 512 512" width="10" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" fill-opacity=".125" d="M0 256h256v256H0z"></path><path fill="currentColor" fill-opacity=".25" d="M256 256h256v256H256z"></path><path fill="currentColor" fill-opacity=".125" d="M256 0h256v256H256z"></path><path fill="currentColor" fill-opacity=".25" d="M0 0h256v256H0z"></path></svg>

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

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-import { IResizeGridProps } from './types';
-export declare const ResizeGrid: FC<IResizeGridProps>;

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

@@ -1,347 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Cell } from './components/Cell';
-import { GRID_TEMPLATE, MIN_SIZE, buildGrid } from './constant';
-import { StyledGrid } from './styled';
-const defaultProps = {
-    containerStyle: {},
-    cellBorderStyle: '1px dashed',
-    cellStyle: {},
-    cellActiveStyle: {},
-    isPreviewMode: false,
-};
-export const ResizeGrid = props => {
-    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, } = props;
-    const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
-    const startRef = useRef(null);
-    const startCellRef = useRef(null);
-    const selectRef = useRef(null);
-    const selectEndRef = useRef(null);
-    const gridRef = useRef();
-    const containerRef = useRef(null);
-    const cellsRef = useRef({});
-    const onChangeTimout = useRef();
-    // console.log('grid', grid)
-    const onChangeGrid = () => {
-        clearTimeout(onChangeTimout.current);
-        onChangeTimout.current = setTimeout(() => {
-            if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
-                const container = containerRef.current.getBoundingClientRect();
-                const childs = Object.values(cellsRef.current).map(cell => {
-                    if (!cell || !cell.current)
-                        return;
-                    const childBox = cell.current.getBoundingClientRect();
-                    return {
-                        width: childBox.width,
-                        height: childBox.height,
-                        x: childBox.x - container.x,
-                        y: childBox.y - container.y,
-                    };
-                });
-                if (typeof props.onChangeGrid === 'function') {
-                    props.onChangeGrid(grid, childs);
-                }
-            }
-        }, 300);
-    };
-    const isFollow = (cell, line, isCol = true) => isCol
-        ? (cell.colEnd !== line || !cell.width) && (cell.colStart !== line || !cell.width)
-        : (cell.rowEnd !== line || !cell.height) && (cell.rowStart !== line || !cell.height);
-    const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
-    useEffect(() => {
-        onChangeGrid();
-    }, [grid]);
-    useEffect(() => {
-        const handleMove = e => {
-            if (startRef.current && gridRef.current && containerRef.current) {
-                const { type, line } = startRef.current;
-                const idx = line - 1;
-                const { parent, childs } = gridRef.current;
-                const { gridTemplateRows, gridTemplateColumns, rows, cols } = parent;
-                if (idx <= 0 || (type === 'row' && idx >= rows) || (type === 'column' && idx >= cols))
-                    return;
-                const { clientX, clientY } = e;
-                if (type === 'row') {
-                    const gridHeight = containerRef.current.offsetHeight;
-                    const yDistant = clientY - startRef.current.clientY;
-                    const yPercentDistant = (100 * yDistant) / gridHeight;
-                    const minPercent = (100 * MIN_SIZE) / gridHeight;
-                    // console.log('move Y', clientY, yDistant, yPercentDistant);
-                    const newArr = [...gridTemplateRows];
-                    newArr[idx - 1] += yPercentDistant;
-                    newArr[idx] -= yPercentDistant;
-                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
-                        const newChilds = JSON.parse(JSON.stringify(childs));
-                        let isValidChildSize = true;
-                        newChilds.forEach(child => {
-                            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 (child.transformY) {
-                                        child.transformY = +child.transformY - yDistant;
-                                    }
-                                    else {
-                                        child.height = +child.height - yDistant;
-                                    }
-                                }
-                                else {
-                                    child.transformY && (child.height = +child.height + yDistant);
-                                }
-                                // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
-                                if (child.height < MIN_SIZE) {
-                                    isValidChildSize = false;
-                                }
-                            }
-                        });
-                        isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { parent: Object.assign(Object.assign({}, parent), { gridTemplateRows: newArr }), childs: newChilds }));
-                    }
-                }
-                else {
-                    const xDistant = clientX - startRef.current.clientX;
-                    const gridWidth = containerRef.current.offsetWidth;
-                    const xPercentDistant = (100 * xDistant) / gridWidth;
-                    const minPercent = (100 * MIN_SIZE) / gridWidth;
-                    // console.log('move X', clientX, xDistant, xPercentDistant);
-                    const newArr = [...gridTemplateColumns];
-                    newArr[idx - 1] += xPercentDistant;
-                    newArr[idx] -= xPercentDistant;
-                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
-                        const newChilds = JSON.parse(JSON.stringify(childs));
-                        let isValidChildSize = true;
-                        newChilds.forEach(child => {
-                            if (isValidChildSize && notFollow(child, line)) {
-                                if (child.colStart === line) {
-                                    if (child.transformX) {
-                                        child.transformX = +child.transformX - xDistant;
-                                    }
-                                    else {
-                                        child.width = +child.width - xDistant;
-                                    }
-                                }
-                                else {
-                                    child.transformX && !child.movedRight && (child.width = +child.width + xDistant);
-                                }
-                                // console.log('check...', startRef.current.line, child.transformX, xDistant, +child.transformX - xDistant)
-                                if (child.width < MIN_SIZE) {
-                                    isValidChildSize = false;
-                                }
-                            }
-                        });
-                        isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { parent: Object.assign(Object.assign({}, parent), { gridTemplateColumns: newArr }), childs: newChilds }));
-                    }
-                }
-            }
-            //-------------------------------------------
-            if (startCellRef.current && gridRef.current) {
-                const { clientX: startClientX, clientY: startClientY, idx, direction, isRevert, cell, nextCell, } = startCellRef.current;
-                const { rowStart, rowEnd, colStart, colEnd, transformX, transformY } = cell;
-                const { parent, childs } = gridRef.current;
-                const { gridTemplateRows, gridTemplateColumns, rows, cols } = parent;
-                if (idx < 0 ||
-                    (direction === 'top' && rowStart === 1) ||
-                    (direction === 'right' && colEnd === cols + 1) ||
-                    (direction === 'bottom' && rowEnd === rows + 1) ||
-                    (direction === 'left' && colStart === 1))
-                    return;
-                const { clientX, clientY } = e;
-                if (['top', 'bottom'].includes(direction)) {
-                    // const cellHeight = cellRef.current.offsetHeight;
-                    const yDistant = clientY - startClientY;
-                    // console.log('move Y', clientY, yDistant);
-                    const newHeight = (cell.height || 0) + yDistant;
-                    const newHeightNextCell = (nextCell.height || 0) - yDistant;
-                    if (newHeight >= MIN_SIZE && newHeightNextCell >= MIN_SIZE) {
-                        const newChilds = [...childs];
-                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { height: newHeight, movedBottom: true });
-                        newChilds[nextCell.idx] = Object.assign(Object.assign({}, childs[nextCell.idx]), { height: newHeightNextCell, transformY: nextCell.transformY + yDistant, movedTop: true });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-                    }
-                }
-                else {
-                    // const cellWidth = cellRef.current.offsetWidth;
-                    const xDistant = clientX - startClientX;
-                    // console.log('move X', clientX, xDistant);
-                    const newWidth = (cell.width || 0) + xDistant;
-                    const newWidthNextCell = (nextCell.width || 0) - xDistant;
-                    if (newWidth >= MIN_SIZE && newWidthNextCell >= MIN_SIZE) {
-                        const newChilds = [...childs];
-                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { width: newWidth, movedRight: true });
-                        newChilds[idx + 1] = Object.assign(Object.assign({}, childs[idx + 1]), { width: newWidthNextCell, transformX: nextCell.transformX + xDistant, movedLeft: true });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-                    }
-                }
-            }
-            //------------------------------------------
-            // if (selectRef.current) {}
-        };
-        const handleUp = () => {
-            startRef.current = null;
-            startCellRef.current = null;
-        };
-        window.addEventListener('mousemove', handleMove);
-        window.addEventListener('mouseup', handleUp);
-        return () => {
-            window.removeEventListener('mousemove', handleMove);
-            window.removeEventListener('mouseup', handleUp);
-        };
-    }, []);
-    const handleDownCell = (e, idx, direction, cell, cellRef) => {
-        const { clientX, clientY } = e;
-        const isRevert = ['top', 'left'].includes(direction);
-        let newIdx = isRevert ? idx - 1 : idx;
-        let nextCellIdx = isRevert ? idx - 1 : idx + 1;
-        if (['top', 'bottom'].includes(direction)) {
-            nextCellIdx = grid.childs.findIndex(b => b.colStart === cell.colStart &&
-                ((isRevert && b.rowEnd === cell.rowStart) || (!isRevert && b.rowStart === cell.rowEnd)));
-            newIdx = isRevert ? nextCellIdx : idx;
-        }
-        if (nextCellIdx < 0)
-            return;
-        const nextCell = grid.childs[nextCellIdx];
-        const nextCellRef = cellsRef.current[nextCellIdx];
-        if (nextCell && nextCellRef && nextCellRef.current) {
-            const newDirection = isRevert
-                ? {
-                    left: 'right',
-                    top: 'bottom',
-                }[direction]
-                : direction;
-            const cellInfo = Object.assign({ width: cell.width || cellRef.current.clientWidth, height: cell.height || cellRef.current.clientHeight, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx,
-                cellRef }, cell);
-            const nextCellInfo = Object.assign({ width: nextCell.width || nextCellRef.current.clientWidth, height: nextCell.height || nextCellRef.current.clientHeight, transformX: nextCell.transformX || 0, transformY: nextCell.transformY || 0, cellRef: nextCellRef, idx: nextCellIdx }, nextCell);
-            // console.log({cellInfo, nextCellInfo})
-            startCellRef.current = {
-                clientX,
-                clientY,
-                idx: newIdx,
-                direction: newDirection,
-                isRevert,
-                cell: isRevert ? nextCellInfo : cellInfo,
-                nextCell: !isRevert ? nextCellInfo : cellInfo,
-            };
-            // console.log('down cell', clientX, clientY, idx, direction, cell, cellRef);
-            gridRef.current = grid;
-        }
-    };
-    const handleDown = (e, type, line) => {
-        const { clientX, clientY } = e;
-        startRef.current = { clientX, clientY, type, line };
-        // console.log('down', type, line, clientX, clientY);
-        gridRef.current = JSON.parse(JSON.stringify(grid));
-    };
-    const handleUp = (e, direction, idx) => {
-        // console.log('up', direction, idx, e);
-        startRef.current = null;
-        startCellRef.current = null;
-    };
-    const downSelect = (idx, cell) => {
-        // console.log('dow select', idx, cell);
-        selectRef.current = { idx, cell };
-        gridRef.current = grid;
-    };
-    const unMerge = (cell, idx) => {
-        const { colStart, colEnd, rowStart, rowEnd } = cell;
-        if (colStart + 1 === colEnd && rowStart + 1 === rowEnd) {
-            return;
-        }
-        const newChilds = [...grid.childs];
-        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;
-                // console.log('merge', i, j, rStart, cStart, rEnd, cEnd)
-                const newChild = {
-                    colStart: cStart,
-                    colEnd: cEnd,
-                    rowStart: rStart,
-                    rowEnd: rEnd,
-                };
-                if (i === rowStart && j === colStart) {
-                    newChilds[idx] = newChild;
-                }
-                else if (rStart !== rowStart ||
-                    rEnd !== rowEnd ||
-                    cStart !== colStart ||
-                    cEnd !== colEnd) {
-                    newChilds.splice(idx, 0, newChild);
-                }
-            }
-        }
-        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
-    };
-    const resetBackgroundCellRef = () => {
-        Object.values(cellsRef.current).forEach(r => {
-            if (r.current) {
-                r.current.style.background = 'unset';
-            }
-        });
-    };
-    const upSelect = (idx, cell) => {
-        // console.log('up select', idx, cell);
-        resetBackgroundCellRef();
-        if (selectRef.current &&
-            selectEndRef.current &&
-            gridRef.current &&
-            selectRef.current.idx !== selectEndRef.current.idx &&
-            (selectEndRef.current.cell.rowEnd > selectRef.current.cell.rowEnd ||
-                selectEndRef.current.cell.colEnd > selectRef.current.cell.colEnd)) {
-            // console.log('merge', selectRef.current, selectEndRef.current)
-            const { cell: cellStart, idx: idxStart } = selectRef.current;
-            const { cell: cellEnd, idx: idxEnd, hCells } = selectEndRef.current;
-            const newChilds = [...gridRef.current.childs];
-            newChilds[idxStart].rowEnd = cellEnd.rowEnd;
-            newChilds[idxStart].colEnd = cellEnd.colEnd;
-            delete newChilds[idxStart].width;
-            delete newChilds[idxStart].height;
-            hCells.reverse().forEach(i => {
-                if (i !== idxStart) {
-                    newChilds.splice(i, 1);
-                    delete cellsRef.current[i];
-                }
-            });
-            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-        }
-        selectRef.current = null;
-        selectEndRef.current = null;
-    };
-    const hoverSelect = (idx, cell) => {
-        if (selectRef.current && gridRef.current) {
-            // console.log('hover select', idx, cell);
-            const { cell: cellStart, idx: idxStart } = selectRef.current;
-            const hCells = [];
-            gridRef.current.childs.forEach((child, i) => {
-                if (child.rowStart >= cellStart.rowStart &&
-                    child.rowEnd <= cell.rowEnd &&
-                    child.colStart >= cellStart.colStart &&
-                    child.colEnd <= cell.colEnd) {
-                    hCells.push(i);
-                }
-            });
-            // console.log('hCells', hCells)
-            resetBackgroundCellRef();
-            hCells.forEach(i => {
-                const cellRef = cellsRef.current[i];
-                if (cellRef && cellRef.current) {
-                    cellRef.current.style.background = 'rgba(255, 0, 255, .5)';
-                }
-            });
-            selectEndRef.current = { cell, idx, hCells };
-            gridRef.current = grid;
-        }
-    };
-    const setRef = (idx, ref) => {
-        cellsRef.current[idx] = ref;
-        // console.log('cellsRef.current', cellsRef.current)
-    };
-    const renderGrid = () => {
-        const { parent, childs } = grid;
-        const { gridTemplateColumns, gridTemplateRows } = parent;
-        // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
-        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ backgroundImage: `url(${image})`, backgroundSize: imageSize, backgroundPosition: imagePosition, gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, containerStyle) }, childs.map((cell, idx) => (React.createElement(Cell, { key: idx, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorderStyle, style: cellStyle, activeStyle: cellActiveStyle, isPreviewMode: isPreviewMode })))));
-    };
-    return React.createElement(StyledGrid, { className: "grid-wrapper" }, renderGrid());
-};
-ResizeGrid.defaultProps = defaultProps;

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

@@ -1,37 +0,0 @@
-import React, { FC } from 'react';
-export type TCell = {
-    rowStart: number;
-    rowEnd: number;
-    colStart: number;
-    colEnd: number;
-    width?: number;
-    height?: number;
-    transformX: number;
-    transformY: number;
-    movedTop: boolean;
-    movedRight: boolean;
-    movedBottom: boolean;
-    movedLeft: boolean;
-    image: string;
-    objectFit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-    active?: boolean;
-};
-interface CellProps {
-    cell: TCell;
-    idx: number;
-    down: Function;
-    downCell: Function;
-    up: Function;
-    setRef: Function;
-    downSelect: Function;
-    upSelect: Function;
-    hoverSelect: Function;
-    unMerge: Function;
-    renderCell?: Function;
-    borderStyle?: string;
-    style?: React.CSSProperties;
-    activeStyle?: React.CSSProperties;
-    isPreviewMode?: boolean;
-}
-export declare const Cell: FC<CellProps>;
-export {};

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

@@ -1,68 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { buildGridArea, buildTranform } from '../../constant';
-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 cellRef = useRef(null);
-    useEffect(() => {
-        setRef(idx, cellRef);
-    }, [idx, cell]);
-    const handleHoverSelect = e => {
-        hoverSelect(idx, cell);
-    };
-    const handleDownCell = e => {
-        downSelect(idx, cell);
-    };
-    const handleUpCell = e => {
-        upSelect(idx, cell);
-    };
-    const handleDown = (direction, idx, e) => {
-        e.stopPropagation();
-        downRef.current = true;
-        // console.log('down', direction, idx, e)
-        const type = ['top', 'bottom'].includes(direction) ? 'row' : 'column';
-        const line = {
-            top: cell.rowStart,
-            right: cell.colEnd,
-            bottom: cell.rowEnd,
-            left: cell.colStart,
-        }[direction];
-        if (window.event.ctrlKey ||
-            (direction === 'top' && cell.movedTop) ||
-            (direction === 'right' && cell.movedRight) ||
-            (direction === 'bottom' && cell.movedBottom) ||
-            (direction === 'left' && cell.movedLeft)) {
-            downCell(e, idx, direction, cell, cellRef);
-        }
-        else {
-            down(e, type, line);
-        }
-    };
-    const handleUp = (direction, idx, e) => {
-        e.stopPropagation();
-        // console.log('up', direction, idx, e)
-        downRef.current = false;
-        up(e, direction, idx);
-    };
-    const handlUnMerge = e => {
-        unMerge(cell, idx);
-    };
-    const renderCellContent = (cell, idx) => renderCell
-        ? renderCell(cell, idx)
-        : !!image &&
-            objectFit && (React.createElement("div", { className: "imageWrapper" },
-            React.createElement("img", { src: image, alt: "menu", style: { objectFit } })));
-    // const handleDrag = (direction, idx, e) => {
-    //   if (!downRef.current) return;
-    //   console.log(direction, idx, e)
-    //   drag(e, direction, idx)
-    // }
-    // console.log('TRANSFORM', idx, buildTranform(cell))
-    return (React.createElement(StyledCell, { ref: cellRef, className: "cell", onMouseOver: e => handleHoverSelect(e), onFocus: e => e, onMouseDown: e => handleDownCell(e), onMouseUp: e => handleUpCell(e), onDoubleClick: handlUnMerge, borderStyle: borderStyle, style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.width ? `${cell.width}px` : 'unset', height: cell.height ? `${cell.height}px` : 'unset', transform: buildTranform(cell), borderTop: cell.rowStart === 1 ? borderStyle : 'unset', borderLeft: cell.colStart === 1 ? borderStyle : 'unset' }, (cell.active &&
-            (activeStyle || {
-                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) })))));
-};

package/es/components/molecules/ResizeGrid/components/Cell/index.d.ts

@@ -1 +0,0 @@
-export { Cell, type TCell } from './Cell';

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

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

package/es/components/molecules/ResizeGrid/components/Cell/styled.d.ts

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

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

@@ -1,62 +0,0 @@
-// Libraries
-import styled from 'styled-components';
-export const StyledCell = styled.div `
-  border: ${props => props.borderStyle};
-  border-top: none;
-  border-left: none;
-  position: relative;
-  user-select: none;
-
-  .resize-top,
-  .resize-right,
-  .resize-bottom,
-  .resize-left {
-    position: absolute;
-  }
-
-  .resize-top,
-  .resize-bottom {
-    width: 100%;
-    height: 2px;
-    left: -1px;
-    cursor: row-resize;
-  }
-  .resize-left,
-  .resize-right {
-    width: 2px;
-    height: 100%;
-    top: -1px;
-    cursor: col-resize;
-  }
-
-  .resize-top {
-    // background: red;
-    top: -1px;
-  }
-  .resize-right {
-    // background: green;
-    right: -1px;
-  }
-  .resize-bottom {
-    // background: blue;
-    bottom: -1px;
-  }
-  .resize-left {
-    // background: yellow;
-    left: -1px;
-  }
-  .imageWrapper {
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      max-width: 100%;
-      max-height: 100%;
-      object-fit: contain;
-      -webkit-user-drag: none;
-    }
-  }
-`;

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

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

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

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

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

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