@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

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,87 @@
+import React, { useEffect, useRef } from 'react';
+import { buildGridArea, buildTranform } from '../../constant';
+import { StyledCell } from './styled';
+import { useDeepCompareEffect } from '../../../../../hooks/useDeepCompareEffect';
+export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, activeCell, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, }) => {
+    const { objectFit, image } = cell;
+    const downRef = useRef(false);
+    const timeoutRef = useRef();
+    const cellRef = useRef(null);
+    useDeepCompareEffect(() => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            setCordinate(idx, cellRef);
+        }, 500);
+    }, [idx, cell, rowPercentage, colPercentage, cellRef]);
+    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 = (e, direction, idx) => {
+        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 ((ctrlKeyRef === null || ctrlKeyRef === void 0 ? void 0 : ctrlKeyRef.current) ||
+            (direction === 'top' && cell.movedTop) ||
+            (direction === 'right' && cell.movedRight) ||
+            (direction === 'bottom' && cell.movedBottom) ||
+            (direction === 'left' && cell.movedLeft)) {
+            downCell(e, type, line, idx, direction, cell, cellRef);
+        }
+        else {
+            down(e, type, line, idx, direction, cell, cellRef);
+        }
+    };
+    const handleUp = (e, direction, idx) => {
+        e.stopPropagation();
+        // console.log('up', direction, idx, e)
+        downRef.current = false;
+        up(e, direction, idx);
+    };
+    const handlUnMerge = e => {
+        unMerge(cell, idx);
+    };
+    const renderCellContent = () => renderCell
+        ? renderCell(cell, idx, { isPreview })
+        : !!image &&
+            image.imageUrl && (React.createElement("div", { className: "imageWrapper" },
+            React.createElement("img", { src: image.imageUrl, alt: "menu", style: image.imageStyles })));
+    // const handleActiveCell = e => {
+    //   activeCell(e, cell, idx);
+    // };
+    // 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", 
+        // onClick={handleActiveCell}
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (cell.active &&
+            !isPreview &&
+            (activeStyle || {
+                outline: '1px solid #005eb8',
+            }))), style) },
+        React.createElement("div", { className: "cell-content" }, renderCellContent()),
+        React.createElement("div", { className: "cell-border", style: {
+                borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
+                borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
+                display: isPreview ? 'none' : 'block',
+            } }),
+        ['top', 'right', 'bottom', 'left'].map(direction => (React.createElement("div", { key: direction, className: `resize-${direction}`, onMouseDown: e => handleDown(e, direction, idx), onMouseUp: e => handleUp(e, direction, idx) })))));
+};

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

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

@@ -0,0 +1,80 @@
+// Libraries
+import styled from 'styled-components';
+export const StyledCell = styled.div `
+  // border: ${props => props.borderStyle};
+  // border-top: none;
+  // border-left: none;
+  // box-shadow: 1px 1px 0px 1px rgba(0, 0, 0, 0.1);
+  position: relative;
+  user-select: none;
+
+  .cell-border {
+    position: absolute;
+    inset: 0;
+    border: 1px solid #005eb8;
+    box-sizing: border-box;
+    border: ${props => props.borderStyle};
+    border-top: none;
+    border-left: none;
+    z-index: 1;
+  }
+  .cell-content {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+  }
+  .resize-top,
+  .resize-right,
+  .resize-bottom,
+  .resize-left {
+    position: absolute;
+    z-index: 3;
+  }
+
+  .resize-top,
+  .resize-bottom {
+    width: 100%;
+    height: 3px;
+    left: -1px;
+    cursor: row-resize;
+  }
+  .resize-left,
+  .resize-right {
+    width: 3px;
+    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

@@ -0,0 +1,35 @@
+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: (inputGrid: 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 THREADHOLD = 5;
+export declare const getSafety: (fn: any, defaultValue?: string) => any;

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

@@ -0,0 +1,111 @@
+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 = (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;
+    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,
+                        active: false,
+                        // 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 THREADHOLD = 5;
+export const getSafety = (fn, defaultValue = '') => {
+    try {
+        return fn();
+    }
+    catch (e) {
+        return defaultValue;
+    }
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", any, {
+    isCompact: boolean;
+}, never>;
+export declare const StyledMiddleLayer: import("styled-components").StyledComponent<"div", any, {
+    isCompact?: boolean | undefined;
+}, never>;
+export declare const StyledBGLayer: import("styled-components").StyledComponent<"div", any, {
+    isCompact?: boolean | undefined;
+}, never>;
+export declare const StyledLine: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,56 @@
+// Libraries
+import styled from 'styled-components';
+export const StyledGrid = styled.div `
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .grid-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    background: transparent;
+    aspect-ratio: ${props => (props.isCompact ? '3 / 1' : '3 / 2')};
+    z-index: 3;
+  }
+`;
+export const StyledMiddleLayer = styled.div `
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  // background: red;
+  z-index: 2;
+`;
+export const StyledBGLayer = styled.div `
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+  // background: red;
+  z-index: 1;
+  background-repeat: no-repeat;
+  background-position: top left;
+  background-size: 100% 100%;
+`;
+export const StyledLine = styled.div `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: -1px;
+  left: -1px;
+  background: red;
+  display: none;
+
+  &.vertical {
+    width: 1px;
+  }
+  &.horizontal {
+    height: 1px;
+  }
+`;

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

@@ -0,0 +1,147 @@
+/// <reference types="react" />
+export type TImageStyles = {
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderBottomRightRadius?: string;
+    borderBottomLeftRadius?: string;
+    borderTopWidth?: string;
+    borderRightWidth?: string;
+    borderBottomWidth?: string;
+    borderLeftWidth?: string;
+    borderStyle?: string;
+    borderColor?: string;
+    boxShadow?: string;
+    opacity?: number;
+    width?: string;
+    height?: string;
+    objectPosition?: string;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+};
+export type TImageSettings = {
+    borderRadiusStyle?: string;
+    borderRadiusSuffix?: string;
+    linkedBorderRadiusInput?: boolean;
+    linkedBorderWidthInput?: boolean;
+    linkedPaddingInput?: boolean;
+    paddingSuffix?: string;
+    boxShadowStyle?: string;
+    boxShadowColor?: string;
+    boxShadowBlur?: string;
+    boxShadowSpread?: string;
+    boxShadowHorizontal?: string;
+    boxShadowVertical?: string;
+    boxShadowInset?: boolean;
+    widthSuffix?: string;
+    heightSuffix?: string;
+};
+export type TImage = {
+    imageUrl: string;
+    imageStyles: TImageStyles;
+    imageSettings: TImageSettings;
+};
+export type TCell = {
+    idx?: number;
+    cellRef?: React.RefObject<HTMLElement>;
+    rowStart: number;
+    rowEnd: number;
+    colStart: number;
+    colEnd: number;
+    width?: number;
+    height?: number;
+    sizeX?: number;
+    sizeY?: number;
+    transformX?: number;
+    transformY?: number;
+    movedTop?: boolean;
+    movedRight?: boolean;
+    movedBottom?: boolean;
+    movedLeft?: boolean;
+    image?: TImage;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    active?: boolean;
+};
+export interface CellProps {
+    cell: TCell;
+    idx: number;
+    rowPercentage: number;
+    colPercentage: number;
+    down: Function;
+    downCell: Function;
+    up: Function;
+    setRef: Function;
+    setCordinate: Function;
+    downSelect: Function;
+    upSelect: Function;
+    hoverSelect: Function;
+    unMerge: Function;
+    renderCell?: Function;
+    activeCell?: Function;
+    borderStyle?: string;
+    style?: React.CSSProperties;
+    activeStyle?: React.CSSProperties;
+    isPreview?: boolean;
+    ctrlKeyRef?: React.RefObject<boolean>;
+}
+export type TGrid = {
+    rows: number;
+    cols: number;
+    gridTemplateColumns: number[];
+    gridTemplateRows: number[];
+    childs: TCell[];
+};
+export type TStartRef = {
+    clientX: number;
+    clientY: number;
+    type: 'row' | 'column';
+    line: number;
+};
+export type TCellExtend = TCell & {
+    cellRef: React.RefObject<HTMLElement>;
+    idx: number;
+};
+export type TStartCellRef = {
+    clientX: number;
+    clientY: number;
+    direction: 'top' | 'right' | 'bottom' | 'left';
+    isRevert: boolean;
+    leftCells: Record<string, TCellExtend>;
+    rightCells: Record<string, TCellExtend>;
+    fallback?: boolean;
+};
+export type TSelected = {
+    idx: number;
+    cell: TCell;
+};
+export type TSelectedEnd = {
+    cell: TCell;
+    idx: number;
+    hCells: number[];
+};
+export interface IResizeGridProps {
+    grid?: Partial<TGrid>;
+    renderCell?: Function;
+    onChange?: Function;
+    selectColor?: string;
+    image?: string;
+    imageSize?: 'cover' | 'contain' | 'fill';
+    imagePosition?: string;
+    cellStyle?: React.CSSProperties;
+    isPreview?: boolean;
+    cellBorder?: string;
+    cellActiveStyle?: React.CSSProperties;
+    containerStyle?: React.CSSProperties;
+    isCompact?: boolean;
+    delayUpdate?: number;
+}
+export type TCordinate = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    xEnd: number;
+    yEnd: number;
+};

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

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

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RichMenu } from '@antscorp/antsomi-ui/es/types';
+import { LayerActiveProps } from './RichMenuCell';
+export interface RichMenuBlockProps {
+    richMenu: RichMenu;
+    isPreview?: boolean;
+    isActionLink?: boolean;
+    layerActive?: LayerActiveProps;
+    cellActiveIdx?: number;
+    onClickCell?: (cellIdx: number) => void;
+    onChange?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
+}
+export declare const RichMenuBlock: React.FC<RichMenuBlockProps>;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js

@@ -0,0 +1,53 @@
+// Libraries
+import React from 'react';
+import { cloneDeep, pick } from 'lodash';
+// Components
+import { ResizeGrid } from '@antscorp/antsomi-ui/es/components';
+import { RichMenuCell } from './RichMenuCell';
+// Utils
+import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuBlock/index.tsx';
+export const RichMenuBlock = props => {
+    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, } = props;
+    const { gridTemplateCols = [], gridTemplateRows = [], cells = [], uploadMode, image, layoutType, rows, cols, } = richMenu || {};
+    const { imageUrl, imageStyles } = image || {};
+    const grid = {
+        rows,
+        cols,
+        gridTemplateColumns: gridTemplateCols.map(col => +String(col).replace('%', '')),
+        gridTemplateRows: gridTemplateRows.map(row => +String(row).replace('%', '')),
+        childs: cells.map(item => item),
+    };
+    const isSingleUploadMode = uploadMode === 'single';
+    // Handlers
+    const handleClickCell = (cellIdx) => {
+        // If is preview is true then not do anything
+        if (isPreview)
+            return;
+        if (onClickCell) {
+            onClickCell(cellIdx);
+        }
+    };
+    const handleGridChange = tryCatchWrapper((gridInfo, ctx, source) => {
+        if (richMenu) {
+            const { rows, cols, gridTemplateRows, gridTemplateColumns, childs } = gridInfo;
+            const gridTemplateColsUnit = (gridTemplateColumns === null || gridTemplateColumns === void 0 ? void 0 : gridTemplateColumns.map(col => `${col}%`)) || [];
+            const gridTemplateRowsUnit = (gridTemplateRows === null || gridTemplateRows === void 0 ? void 0 : gridTemplateRows.map(row => `${row}%`)) || [];
+            const cells = childs === null || childs === void 0 ? void 0 : childs.map((child, idx) => {
+                const item = cloneDeep(child);
+                const cellBounds = pick(ctx[idx], ['x', 'y', 'width', 'height']);
+                return Object.assign(Object.assign({}, item), cellBounds);
+            });
+            const newRichMenu = Object.assign(Object.assign({}, richMenu), { rows: rows || 1, cols: cols || 1, gridTemplateRows: gridTemplateRowsUnit, gridTemplateCols: gridTemplateColsUnit, cells: cells });
+            if (onChange) {
+                onChange(newRichMenu, source);
+            }
+        }
+    }, PATH);
+    const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
+    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange }, Object.assign({}, (isSingleUploadMode && {
+        image: imageUrl,
+        imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
+        imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit,
+    })))));
+};

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { TChildrenCell } from '@antscorp/antsomi-ui/es/types';
+interface RichMenuCellProps {
+    cell: TChildrenCell;
+    context: number;
+    isSingleMode: boolean;
+    isActionLink?: boolean;
+    isPreview?: boolean;
+    cellActiveIdx?: number;
+    layerActive?: LayerActiveProps;
+    onClick: (index: number) => void;
+}
+export type LayerActiveProps = 'image' | 'video' | 'all';
+export type VideoStateProps = {
+    status: 'idle' | 'playing';
+};
+export declare const RichMenuCell: FC<RichMenuCellProps>;
+export {};