@symply.io/basic-components 1.1.1 → 1.1.2-beta.1

package/.gitignore

@@ -13,4 +13,5 @@ yarn-error.log*
 *.js
 *.d.ts
 dist
-.eslintrc.json
+.eslintrc.json
+storybook/storybook-static

package/BasicTable/TableBody.js

@@ -17,7 +17,7 @@ import TableBodyRow from "./TableBodyRow";
 function BasicTableBody(props, ref) {
     var rows = props.rows, columns = props.columns, rowHeight = props.rowHeight, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
     var theme = useTheme();
-    return (_jsx(Grid, __assign({ item: true, sx: {
+    return (_jsx(Grid, __assign({ ref: ref, item: true, sx: {
             maxHeight: "41vh",
             overflowY: "auto",
             display: "block",
@@ -26,25 +26,25 @@ function BasicTableBody(props, ref) {
             "&::-webkit-scrollbar": {
                 width: forFrozen ? 0 : "initial"
             }
-        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows.length > 0 ? (rows.map(function (row, index) {
-                return (_jsx(TableBodyRow, { row: row, rows: rows, rowHeight: rowHeight, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
-            })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
-                    height: rowHeight || theme.spacing(7.5),
-                    borderBottomWidth: "thin",
-                    borderBottomColor: "#e5e5e5",
-                    borderBottomStyle: "solid",
-                    padding: theme.spacing(0.5, 0),
-                    minHeight: theme.spacing(5),
-                    "& :nth-of-last-type(1)": {
-                        borderBottom: "none"
-                    },
-                    "& input": {
-                        fontSize: "0.9rem",
-                        fontWeight: 600
-                    }
-                } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
-                        paddingLeft: theme.spacing(0.625),
-                        paddingRight: theme.spacing(0.625)
-                    } }, { children: noDataText })) }))) })) })));
+        } }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
+            return (_jsx(TableBodyRow, { row: row, rows: rows, rowHeight: rowHeight, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
+        })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
+                height: rowHeight || theme.spacing(7.5),
+                borderBottomWidth: "thin",
+                borderBottomColor: "#e5e5e5",
+                borderBottomStyle: "solid",
+                padding: theme.spacing(0.5, 0),
+                minHeight: theme.spacing(5),
+                "& :nth-of-last-type(1)": {
+                    borderBottom: "none"
+                },
+                "& input": {
+                    fontSize: "0.9rem",
+                    fontWeight: 600
+                }
+            } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
+                    paddingLeft: theme.spacing(0.625),
+                    paddingRight: theme.spacing(0.625)
+                } }, { children: noDataText })) }))) })));
 }
 export default forwardRef(BasicTableBody);

package/BasicTable/index.js

@@ -29,11 +29,19 @@ function BasicTable(props) {
     var canFreeze = useMemo(function () { return isUpMd && (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && fronzenColsCount > 0; }, [fronzenColsCount, isUpMd, rows.length]);
     var _g = useScroll({
         canFreeze: canFreeze
-    }), frozenWidth = _g.frozenWidth, setFrozenWidth = _g.setFrozenWidth, fixedRef = _g.fixedRef, dynamicRef = _g.dynamicRef;
+    }), fixedRef = _g.fixedRef, dynamicRef = _g.dynamicRef, frozenWidth = _g.frozenWidth, setFrozenWidth = _g.setFrozenWidth;
     useEffect(function () {
         if (columns) {
             var frozenCols = columns.filter(function (col) { return col.canBeFrozen; });
-            var initialFrozenWidth_1 = frozenCols.reduce(function (width, col) { return width + (col.minWidth || 120); }, 1);
+            var initialFrozenWidth_1 = frozenCols.reduce(function (fronzenWith, col) {
+                var _a = col.minWidth, minWidth = _a === void 0 ? 120 : _a, _b = col.width, width = _b === void 0 ? 120 : _b;
+                if (minWidth > width) {
+                    return fronzenWith + minWidth;
+                }
+                else {
+                    return fronzenWith + width;
+                }
+            }, 1);
             setFrozenWidth(function (fw) {
                 if (fw !== initialFrozenWidth_1) {
                     return initialFrozenWidth_1;

package/BasicTable/useScroll.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { UseScrollProps } from "./types";
 declare function useScroll(props: UseScrollProps): {
-    frozenWidth: number;
-    setFrozenWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
     fixedRef: import("react").RefObject<HTMLDivElement>;
     dynamicRef: import("react").RefObject<HTMLDivElement>;
+    frozenWidth: number;
+    setFrozenWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
 };
 export default useScroll;

package/BasicTable/useScroll.js

@@ -61,16 +61,21 @@ function useScroll(props) {
             if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
                 dynamicRef.current.addEventListener("mouseover", bindEventDynamic);
             }
+            resetFrozenWidth();
         }
     }, [
-        bindEventDynamic,
-        bindEventFixed,
+        fixedRef,
         canFreeze,
         dynamicRef,
-        fixedRef,
-        onDynamicScroll,
-        onFixedScroll
+        bindEventFixed,
+        bindEventDynamic,
+        resetFrozenWidth
     ]);
-    return { frozenWidth: frozenWidth, setFrozenWidth: setFrozenWidth, fixedRef: fixedRef, dynamicRef: dynamicRef };
+    return {
+        fixedRef: fixedRef,
+        dynamicRef: dynamicRef,
+        frozenWidth: frozenWidth,
+        setFrozenWidth: setFrozenWidth
+    };
 }
 export default useScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.1.1",
+  "version": "1.1.2-beta.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -67,7 +67,9 @@
     "@types/react-dom": "17.0.9"
   },
   "scripts": {
-    "build": "./node_modules/.bin/tsc"
+    "build": "./node_modules/.bin/tsc",
+    "storybook": "cd storybook && yarn storybook",
+    "build-storybook": "cd storybook && yarn build-storybook"
   },
   "files": [
     "*.js",