@antscorp/antsomi-ui 1.3.3-beta.26 → 1.3.3-beta.27

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

@@ -56,17 +56,18 @@ export const ResizeGrid = props => {
         onChangeTimoutRef.current = setTimeout(() => {
             if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
                 const container = containerRef.current.getBoundingClientRect();
-                const childs = Object.values(cordinatesRef.current);
-                // 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,
-                //   };
-                // });
+                // Object.values(cordinatesRef.current);
+                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 onChange === 'function') {
                     onChange(grid, childs);
                     acceptUpdateRef.current = false;
@@ -583,7 +584,7 @@ export const ResizeGrid = props => {
         //   await new Promise(r => {setTimeout(r, 100)});
         //   console.log('wait', idx, cellsRef[idx])
         // }
-        // console.log('set corr', idx, ref, cellsRef.current[idx], cellsRef)
+        // console.log('set corr', idx, cellsRef.current[idx], cellsRef)
         if (containerRef.current) {
             const container = containerRef.current.getBoundingClientRect();
             const childRef = cellsRef.current[idx];

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

@@ -72,10 +72,14 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     // 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.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 &&
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', 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) }, (cell.active &&
             (activeStyle || {
                 outline: '1px solid #005eb8',
             }))), style) },
-        renderCellContent(),
+        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',
+            } }),
         ['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/styled.js

@@ -1,17 +1,35 @@
 // Libraries
 import styled from 'styled-components';
 export const StyledCell = styled.div `
-  border: ${props => props.borderStyle};
-  border-top: none;
-  border-left: none;
+  // 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,

package/es/test.js

@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
 import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
 // Slider,
-SliderWithInputNumber, Space, UploadImage, RateV2, ResizeGrid, } from './components';
+SliderWithInputNumber, Space, UploadImage, Tabs, RateV2, ResizeGrid, } from './components';
 // import { Slider } from 'antd';
 import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
 import { Rate } from './components/atoms/Rate';
@@ -115,7 +115,7 @@ export const App = () => {
                     }, containerStyle: {
                     // border: '15px dotted green',
                     }, cellBorder: "1px dashed blue" }),
-                React.createElement("button", { onClick: () => setGrid({ cols: rand(), rows: rand() }) }, "change"),
+                React.createElement("button", { type: "button", onClick: () => setGrid({ cols: rand(), rows: rand() }) }, "change"),
                 React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
                     React.createElement(GradientSetting, null)),
                 React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),
@@ -152,6 +152,18 @@ export const App = () => {
                             console.log('onChangeSvg', value);
                         } }))))));
     // ------------------------ Media template components test end -------------------------
+    return (React.createElement(Tabs, { items: [
+            {
+                key: '1',
+                label: 'Tab 1',
+                children: React.createElement("div", null, "hello"),
+            },
+            {
+                key: '2',
+                label: 'Tab 2',
+                children: React.createElement("div", null, "hello 2"),
+            },
+        ] }));
     return (React.createElement("div", { style: { width: '500px', margin: '32px' } },
         React.createElement(GradientSetting, { onChange: e => console.log('gradient change') }),
         React.createElement("br", null),

package/package.json

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