@antscorp/antsomi-ui 1.3.3-beta.84 → 1.3.3-beta.86

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

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

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

@@ -1,87 +0,0 @@
-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

@@ -1 +0,0 @@
-export { Cell } 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,80 +0,0 @@
-// 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

@@ -1,35 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

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

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,56 +0,0 @@
-// 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

@@ -1,147 +0,0 @@
-/// <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

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

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { RichMenu } from '@antscorp/antsomi-ui/es/types';
-import { LayerActiveProps } from './RichMenuCell';
-export interface RichMenuBlockProps {
-    richMenu: RichMenu;
-    isPreview?: 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

@@ -1,53 +0,0 @@
-// 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, 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, 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

@@ -1,17 +0,0 @@
-import { FC } from 'react';
-import { TChildrenCell } from '@antscorp/antsomi-ui/es/types';
-interface RichMenuCellProps {
-    cell: TChildrenCell;
-    context: number;
-    isSingleMode: 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 {};