@antscorp/antsomi-ui 1.3.3-beta.14 → 1.3.3-beta.16

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

@@ -9,9 +9,10 @@ const defaultProps = {
     cellStyle: {},
     cellActiveStyle: {},
     isPreviewMode: false,
+    isCompact: false,
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, } = 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);
@@ -347,6 +348,6 @@ export const ResizeGrid = props => {
         // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
         return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ backgroundImage: `url(${image})`, backgroundSize: imageSize, backgroundPosition: imagePosition, gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, containerStyle) }, childs.map((cell, idx) => (React.createElement(Cell, { key: idx, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorderStyle, style: cellStyle, activeStyle: cellActiveStyle, isPreviewMode: isPreviewMode })))));
     };
-    return React.createElement(StyledGrid, { className: "grid-wrapper" }, renderGrid());
+    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact }, renderGrid()));
 };
 ResizeGrid.defaultProps = defaultProps;

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

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

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

@@ -16,5 +16,6 @@ export const StyledGrid = styled.div `
     background-repeat: no-repeat;
     background-position: top left;
     background-size: 100% 100%;
+    aspect-ratio: ${props => (props.isCompact ? '3 / 1' : '3 / 2')};
   }
 `;

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

@@ -124,4 +124,5 @@ export interface IResizeGridProps {
     cellBorderStyle?: string;
     cellActiveStyle?: React.CSSProperties;
     containerStyle?: React.CSSProperties;
+    isCompact?: boolean;
 }

package/es/hooks/useDeepCompareEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDeepCompareEffect(callback: any, dependencies: any): void;

package/es/hooks/useDeepCompareEffect.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.14",
+  "version": "1.3.3-beta.16",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",

package/dist/0dfb9214dfd945cd7290.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/d327b24e9c5d8f486f08d253aab58ce6.png";

package/dist/4f54a37971347e3d7122.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/725a52bd91a3ce534b10833df510e5fa.png";

package/dist/574b7bee0563a9fe9a29.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/2d496b55d85a9545d7311c073af442bb.png";

package/dist/6b586356e837581204dc.svg

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/bb64e23a1ff390a416d765ee556096ab.svg";

package/dist/bc6bf11c6f5e6743aa4c.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/2fbb4e0927d18e3f8e5c6511ab88d5b3.png";

package/dist/dbc405edd6e0806efbc9.svg

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/7d037e0b378e87a82804443636cd0e13.svg";

package/dist/e32f09119052a55cce3c.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/90553767e0a05b9585a54797cfd9ce51.png";

package/dist/e3851b9384a984c6fdb5.png

@@ -1 +0,0 @@
-export default __webpack_public_path__ + "/public/icons/f1cf266d0a0a53ce07f2dbb859869b7a.png";