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

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

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

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

@@ -1,67 +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) })))));
-};
+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

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

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

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

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

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

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

@@ -1,62 +1,62 @@
-// 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;
-    }
-  }
-`;
+// 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/constant.d.ts

@@ -1,34 +1,34 @@
-import { TGrid } from './types';
-export declare const GRID_TEMPLATE: {
-    GRID_2_3: {
-        rows: number;
-        cols: number;
-    };
-    GRID_5_5: {
-        rows: number;
-        cols: number;
-    };
-    GRID_2_2: {
-        rows: number;
-        cols: number;
-    };
-    GRID_2_3_1: {
-        rows: number;
-        cols: number;
-        childs: ({
-            rowStart: number;
-            colStart: number;
-            colEnd: number;
-        } | {
-            rowStart: number;
-            colStart: number;
-            colEnd?: undefined;
-        })[];
-    };
-};
-export declare const buildCell: (cell: any) => any;
-export declare const buildGrid: (grid: Partial<TGrid>) => TGrid;
-export declare const buildGridArea: (box: any) => string;
-export declare const buildTranform: (box: any) => string;
-export declare const MIN_SIZE = 32;
-export declare const getSafety: (fn: any, defaultValue?: string) => any;
+import { TGrid } from './types';
+export declare const GRID_TEMPLATE: {
+    GRID_2_3: {
+        rows: number;
+        cols: number;
+    };
+    GRID_5_5: {
+        rows: number;
+        cols: number;
+    };
+    GRID_2_2: {
+        rows: number;
+        cols: number;
+    };
+    GRID_2_3_1: {
+        rows: number;
+        cols: number;
+        childs: ({
+            rowStart: number;
+            colStart: number;
+            colEnd: number;
+        } | {
+            rowStart: number;
+            colStart: number;
+            colEnd?: undefined;
+        })[];
+    };
+};
+export declare const buildCell: (cell: any) => any;
+export declare const buildGrid: (grid: Partial<TGrid>) => TGrid;
+export declare const buildGridArea: (box: any) => string;
+export declare const buildTranform: (box: any) => string;
+export declare const MIN_SIZE = 32;
+export declare const getSafety: (fn: any, defaultValue?: string) => any;

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

@@ -1,108 +1,108 @@
-export const GRID_TEMPLATE = {
-    GRID_2_3: {
-        rows: 2,
-        cols: 3,
-    },
-    GRID_5_5: {
-        rows: 5,
-        cols: 5,
-    },
-    GRID_2_2: {
-        rows: 2,
-        cols: 2,
-    },
-    GRID_2_3_1: {
-        rows: 2,
-        cols: 3,
-        childs: [
-            {
-                rowStart: 1,
-                colStart: 1,
-                colEnd: 4,
-            },
-            {
-                rowStart: 2,
-                colStart: 1,
-            },
-            {
-                rowStart: 2,
-                colStart: 2,
-            },
-            {
-                rowStart: 2,
-                colStart: 3,
-            },
-        ],
-    },
-};
-export const buildCell = cell => (Object.assign({ rowEnd: cell.rowEnd || cell.rowStart + 1, colEnd: cell.colEnd || cell.colStart + 1 }, cell));
-export const buildGrid = (grid) => {
-    let childs = [];
-    let buildCol = !grid.gridTemplateColumns || !grid.gridTemplateColumns.length;
-    const buildRow = !grid.gridTemplateRows || !grid.gridTemplateRows.length;
-    const buildChild = !grid.childs || !grid.childs.length;
-    const gridTemplateColumns = grid.gridTemplateColumns || [];
-    const gridTemplateRows = grid.gridTemplateRows || [];
-    if (!buildChild && grid.childs) {
-        childs = grid.childs.map(buildCell);
-    }
-    if (buildChild || buildRow || buildCol) {
-        Array(grid.rows)
-            .fill(1)
-            .forEach((_, row) => {
-            if (buildRow && grid.rows) {
-                gridTemplateRows.push(100 / grid.rows);
-            }
-            Array(grid.cols)
-                .fill(1)
-                .forEach((__, col) => {
-                if (buildChild) {
-                    childs.push({
-                        rowStart: row + 1,
-                        rowEnd: row + 2,
-                        colStart: col + 1,
-                        colEnd: col + 2,
-                        // image: {
-                        //   imageStyles: {},
-                        //   imageSettings: {},
-                        //   imageUrl: 'https://source.unsplash.com/random/300×300'
-                        // },
-                        objectFit: 'contain',
-                    });
-                }
-                if (buildCol && grid.cols) {
-                    gridTemplateColumns.push(100 / grid.cols);
-                }
-            });
-            buildCol = false;
-        });
-    }
-    return Object.assign(Object.assign({ rows: grid.rows || 1, cols: grid.rows || 1 }, grid), { gridTemplateColumns,
-        gridTemplateRows,
-        childs });
-};
-export const buildGridArea = box => 
-// console.log('area', box, `${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`)
-`${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`;
-export const buildTranform = box => {
-    const { transformX, transformY } = box;
-    if (transformX && transformY) {
-        return `translate(${transformX}px, ${transformY}px)`;
-    }
-    if (transformX) {
-        return `translateX(${transformX}px)`;
-    }
-    if (transformY) {
-        return `translateY(${transformY}px)`;
-    }
-    return 'unset';
-};
-export const MIN_SIZE = 32;
-export const getSafety = (fn, defaultValue = '') => {
-    try {
-        return fn();
-    }
-    catch (e) {
-        return defaultValue;
-    }
-};
+export const GRID_TEMPLATE = {
+    GRID_2_3: {
+        rows: 2,
+        cols: 3,
+    },
+    GRID_5_5: {
+        rows: 5,
+        cols: 5,
+    },
+    GRID_2_2: {
+        rows: 2,
+        cols: 2,
+    },
+    GRID_2_3_1: {
+        rows: 2,
+        cols: 3,
+        childs: [
+            {
+                rowStart: 1,
+                colStart: 1,
+                colEnd: 4,
+            },
+            {
+                rowStart: 2,
+                colStart: 1,
+            },
+            {
+                rowStart: 2,
+                colStart: 2,
+            },
+            {
+                rowStart: 2,
+                colStart: 3,
+            },
+        ],
+    },
+};
+export const buildCell = cell => (Object.assign({ rowEnd: cell.rowEnd || cell.rowStart + 1, colEnd: cell.colEnd || cell.colStart + 1 }, cell));
+export const buildGrid = (grid) => {
+    let childs = [];
+    let buildCol = !grid.gridTemplateColumns || !grid.gridTemplateColumns.length;
+    const buildRow = !grid.gridTemplateRows || !grid.gridTemplateRows.length;
+    const buildChild = !grid.childs || !grid.childs.length;
+    const gridTemplateColumns = grid.gridTemplateColumns || [];
+    const gridTemplateRows = grid.gridTemplateRows || [];
+    if (!buildChild && grid.childs) {
+        childs = grid.childs.map(buildCell);
+    }
+    if (buildChild || buildRow || buildCol) {
+        Array(grid.rows)
+            .fill(1)
+            .forEach((_, row) => {
+            if (buildRow && grid.rows) {
+                gridTemplateRows.push(100 / grid.rows);
+            }
+            Array(grid.cols)
+                .fill(1)
+                .forEach((__, col) => {
+                if (buildChild) {
+                    childs.push({
+                        rowStart: row + 1,
+                        rowEnd: row + 2,
+                        colStart: col + 1,
+                        colEnd: col + 2,
+                        // image: {
+                        //   imageStyles: {},
+                        //   imageSettings: {},
+                        //   imageUrl: 'https://source.unsplash.com/random/300×300'
+                        // },
+                        objectFit: 'contain',
+                    });
+                }
+                if (buildCol && grid.cols) {
+                    gridTemplateColumns.push(100 / grid.cols);
+                }
+            });
+            buildCol = false;
+        });
+    }
+    return Object.assign(Object.assign({ rows: grid.rows || 1, cols: grid.rows || 1 }, grid), { gridTemplateColumns,
+        gridTemplateRows,
+        childs });
+};
+export const buildGridArea = box => 
+// console.log('area', box, `${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`)
+`${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`;
+export const buildTranform = box => {
+    const { transformX, transformY } = box;
+    if (transformX && transformY) {
+        return `translate(${transformX}px, ${transformY}px)`;
+    }
+    if (transformX) {
+        return `translateX(${transformX}px)`;
+    }
+    if (transformY) {
+        return `translateY(${transformY}px)`;
+    }
+    return 'unset';
+};
+export const MIN_SIZE = 32;
+export const getSafety = (fn, defaultValue = '') => {
+    try {
+        return fn();
+    }
+    catch (e) {
+        return defaultValue;
+    }
+};

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

@@ -1,2 +1,2 @@
-export { ResizeGrid } from './ResizeGrid';
-export type { TGrid, TCell, IResizeGridProps } from './types';
+export { ResizeGrid } from './ResizeGrid';
+export type { TGrid, TCell, IResizeGridProps } from './types';

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

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

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

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

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

@@ -1,20 +1,20 @@
-// Libraries
-import styled from 'styled-components';
-export const StyledGrid = styled.div `
-  width: 100%;
-  box-sizing: border-box;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  .grid-container {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    background-repeat: no-repeat;
-    background-position: top left;
-    background-size: 100% 100%;
-    aspect-ratio: ${props => (props.isCompact ? '3 / 1' : '3 / 2')};
-  }
-`;
+// Libraries
+import styled from 'styled-components';
+export const StyledGrid = styled.div `
+  width: 100%;
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .grid-container {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    background-repeat: no-repeat;
+    background-position: top left;
+    background-size: 100% 100%;
+    aspect-ratio: ${props => (props.isCompact ? '3 / 1' : '3 / 2')};
+  }
+`;