@antscorp/antsomi-ui 1.3.3-beta.2 → 1.3.3-beta.20

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

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+/* Components */
+import { Space, Switch } from '../../atoms';
+import { ColorSetting } from '../ColorSetting';
+import { SliderWithInputNumber } from '../SliderWithInputNumber';
+import { SettingWrapper } from '../SettingWrapper';
+import { SettingWrapperPopover } from '../SettingWrapperPopover';
+import { FontFamilySelect } from '../FontFamilySelect';
+import { FontWeightSelect } from '../FontWeightSelect';
+import { TextTransformSelect } from '../TextTransformSelect';
+import { TextDecorationSelect } from '../TextDecorationSelect';
+import { FONT_SETTING_DEFAULT, FONT_STYLE_DEFAULT } from './constants';
+export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) => {
+    const handleChange = (setting, style) => {
+        if (typeof onChange === 'function') {
+            const newSettings = Object.assign(Object.assign({}, settings), setting);
+            const newStyles = Object.assign(Object.assign({}, styles), style);
+            onChange(newSettings, newStyles);
+        }
+    };
+    const settingMap = useMemo(() => ({
+        fontFamily: (React.createElement(FontFamilySelect, { label: "Font Family", value: settings === null || settings === void 0 ? void 0 : settings.fontFamily, onChange: fontFamily => handleChange({ fontFamily }, { fontFamily }) })),
+        color: (React.createElement(ColorSetting, { label: "Font Color", color: settings === null || settings === void 0 ? void 0 : settings.fontColor, onChange: fontColor => handleChange({ fontColor }, { color: fontColor }) })),
+        fontSize: (React.createElement(SettingWrapper, { label: "Font Size", vertical: true },
+            React.createElement(SliderWithInputNumber, { value: typeof (settings === null || settings === void 0 ? void 0 : settings.fontSize) !== 'undefined' ? +settings.fontSize : 0, onAfterChange: fontSize => handleChange({ fontSize }, { fontSize }) }))),
+        fontWeight: (React.createElement(FontWeightSelect, { label: "Font Weight", value: settings === null || settings === void 0 ? void 0 : settings.fontWeight, onChange: fontWeight => handleChange({ fontWeight }, { fontWeight }) })),
+        lineHeight: (React.createElement(SettingWrapper, { label: "Line Height", vertical: true },
+            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.lineHeight) !== 'undefined' ? +settings.lineHeight : 0, min: 1, max: 5, step: 0.1, onAfterChange: lineHeight => handleChange({ lineHeight }, { lineHeight }) }))),
+        letterSpacing: (React.createElement(SettingWrapper, { label: "Letter Spacing", vertical: true },
+            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.letterSpacing) !== 'undefined' ? +settings.letterSpacing : 0, min: -10, max: 10, onAfterChange: letterSpacing => handleChange({ letterSpacing }, { letterSpacing }) }))),
+        textTransform: (React.createElement(TextTransformSelect, { label: "Text Transform", value: settings === null || settings === void 0 ? void 0 : settings.textTransform, onChange: textTransform => handleChange({ textTransform }, { textTransform }) })),
+        textDecoration: (React.createElement(TextDecorationSelect, { label: "Text Decoration", value: settings === null || settings === void 0 ? void 0 : settings.textDecoration, onChange: textDecoration => handleChange({ textDecoration }, { textDecoration }) })),
+        italic: (React.createElement(SettingWrapper, { label: "Font Style Italic" },
+            React.createElement(Switch, { checked: settings === null || settings === void 0 ? void 0 : settings.fontItalic, onChange: fontItalic => handleChange({ fontItalic }, { fontStyle: fontItalic ? 'italic' : 'normal' }) }))),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settings]);
+    const filteredSetting = useMemo(() => {
+        if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
+            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
+        }
+        return showSettings.map(keySetting => settingMap[keySetting]);
+    }, [showSettings, settingMap]);
+    return React.createElement(Space, { direction: "vertical" }, filteredSetting);
+};
+export const FontSetting = (props) => {
+    const { label, settings, styles, wrapperProps, popoverProps, childrenProps, showSettings, onChange, } = props;
+    return (React.createElement(SettingWrapperPopover, { label: label !== null && label !== void 0 ? label : 'Font Settings', popoverProps: Object.assign({ overlayStyle: { top: 0 }, placement: 'bottomRight' }, popoverProps), wrapperProps: Object.assign({ containerStyle: { minWidth: '288px' } }, wrapperProps) },
+        React.createElement(FontSettingEdit, Object.assign({ settings: settings, styles: styles, showSettings: showSettings, onChange: onChange }, childrenProps))));
+};
+FontSetting.defaultProps = {
+    settings: FONT_SETTING_DEFAULT,
+    styles: FONT_STYLE_DEFAULT,
+};

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

@@ -0,0 +1,22 @@
+export type TFontSettings = {
+    fontFamily: string;
+    fontColor: string;
+    fontSize: string | number;
+    fontWeight: string | number;
+    lineHeight: string | number;
+    letterSpacing: string | number;
+    textTransform: string | number;
+    textDecoration: string;
+    fontItalic: boolean;
+};
+export type TFontStyles = {
+    fontFamily: string;
+    color: string;
+    fontSize: string | number;
+    fontWeight: string | number;
+    lineHeight: string | number;
+    letterSpacing: string | number;
+    textTransform: string | number;
+    textDecoration: string;
+    fontStyle: string;
+};

package/es/components/molecules/FontSetting/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/FontWeightSelect/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const OPTION_FONT_WEIGHT: readonly [{
+    readonly label: "Thin";
+    readonly value: "100";
+}, {
+    readonly label: "Extra Light";
+    readonly value: "200";
+}, {
+    readonly label: "Light";
+    readonly value: "300";
+}, {
+    readonly label: "Regular";
+    readonly value: "400";
+}, {
+    readonly label: "Medium";
+    readonly value: "500";
+}, {
+    readonly label: "Semi Bold";
+    readonly value: "600";
+}, {
+    readonly label: "Bold";
+    readonly value: "700";
+}, {
+    readonly label: "Extra Bold";
+    readonly value: "800";
+}, {
+    readonly label: "Black";
+    readonly value: "900";
+}];

package/es/components/molecules/FontWeightSelect/constants.js

@@ -0,0 +1,11 @@
+export const OPTION_FONT_WEIGHT = [
+    { label: 'Thin', value: '100' },
+    { label: 'Extra Light', value: '200' },
+    { label: 'Light', value: '300' },
+    { label: 'Regular', value: '400' },
+    { label: 'Medium', value: '500' },
+    { label: 'Semi Bold', value: '600' },
+    { label: 'Bold', value: '700' },
+    { label: 'Extra Bold', value: '800' },
+    { label: 'Black', value: '900' },
+];

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_FONT_WEIGHT } from './constants';
+export type FontWeightSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_FONT_WEIGHT)[number]['label'][];
+    onChange?: (family: string) => void;
+};
+export declare const FontWeightSelect: React.FC<FontWeightSelectProps>;

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

@@ -0,0 +1,39 @@
+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, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { SettingWrapper } from '../SettingWrapper';
+import { OPTION_FONT_WEIGHT } from './constants';
+export const FontWeightSelect = props => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    const fontWeightOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_FONT_WEIGHT];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_FONT_WEIGHT.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...fontWeightOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

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

@@ -0,0 +1 @@
+export { Form } from 'antd';

package/es/components/molecules/Form/Form.js

@@ -0,0 +1 @@
+export { Form } from 'antd';

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

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

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

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

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

@@ -10,6 +10,6 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
 }, any, CustomModalProps, never>;
 export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

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

@@ -0,0 +1,353 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Cell } from './components/Cell';
+import { GRID_TEMPLATE, MIN_SIZE, buildGrid } from './constant';
+import { StyledGrid } from './styled';
+import { useDeepCompareEffect } from '../../../hooks/useDeepCompareEffect';
+const defaultProps = {
+    containerStyle: {},
+    cellBorderStyle: '1px dashed',
+    cellStyle: {},
+    cellActiveStyle: {},
+    isPreviewMode: false,
+    isCompact: false,
+};
+export const ResizeGrid = props => {
+    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, } = 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();
+        // 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)) {
+            setGrid(buildGrid(initGrid));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows, initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols, initGrid === null || initGrid === void 0 ? void 0 : initGrid.gridTemplateColumns, initGrid === null || initGrid === void 0 ? void 0 : initGrid.gridTemplateRows]);
+    useEffect(() => {
+        const handleMove = e => {
+            if (startRef.current && gridRef.current && containerRef.current) {
+                const { type, line } = startRef.current;
+                const idx = line - 1;
+                const { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
+                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), { 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), { 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 { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
+                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 || 0) + 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 || 0) + 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 { gridTemplateColumns, gridTemplateRows, childs } = grid;
+        // 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", isCompact: !!isCompact }, renderGrid()));
+};
+ResizeGrid.defaultProps = defaultProps;

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

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

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

@@ -0,0 +1,67 @@
+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 && 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;
+    //   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

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

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

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

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

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