@symply.io/basic-components 1.1.3-beta.1 → 1.1.3-beta.3

package/DataTable/TableBodyRow.js

@@ -16,7 +16,7 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick;
+    var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
@@ -31,10 +31,22 @@ function TableBodyRow(props) {
             return [[], columns, []];
         }
     }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
+    var _c = useMemo(function () {
+        if (onCustomizeRowBgColor) {
+            var regex = /^#(\d|[a-f]|[A-F]){6}/i;
+            var _a = onCustomizeRowBgColor({ row: row, columns: columns }), normal_1 = _a.normal, hover_1 = _a.hover;
+            return {
+                normal: normal_1 && regex.test(normal_1) ? normal_1 : "#FEFEFE",
+                hover: hover_1 && regex.test(hover_1) ? hover_1 : "#F2F1F3"
+            };
+        }
+        return { normal: "#FEFEFE", hover: "#F2F1F3" };
+    }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
     return (_jsxs(TableRow, __assign({ sx: {
+            backgroundColor: normal,
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",
-                backgroundColor: onRowClick ? "#F2F1F3" : "#FEFEFE"
+                backgroundColor: onRowClick ? hover : normal
             }
         }, onMouseEnter: function (event) {
             setRowEl(event.currentTarget);
@@ -54,7 +66,7 @@ function TableBodyRow(props) {
                         left: left,
                         position: "sticky",
                         zIndex: 10,
-                        backgroundColor: onRowClick && rowEl ? "#F2F1F3" : "#FEFEFE",
+                        backgroundColor: onRowClick && rowEl ? hover : normal,
                         "&::after": index === fixedLeftCols.length - 1 && leftShadowVisible
                             ? {
                                 position: "absolute",
@@ -74,7 +86,7 @@ function TableBodyRow(props) {
                 return (_jsx(TableCell, __assign({ align: align, sx: {
                         width: width,
                         zIndex: 9,
-                        backgroundColor: onRowClick && rowEl ? "#F2F1F3" : "#FEFEFE"
+                        backgroundColor: onRowClick && rowEl ? hover : normal
                     } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
             }), fixedRightCols.map(function (col, index) {
                 var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
@@ -86,7 +98,7 @@ function TableBodyRow(props) {
                         right: right,
                         position: "sticky",
                         zIndex: 10,
-                        backgroundColor: onRowClick && rowEl ? "#F2F1F3" : "#FEFEFE",
+                        backgroundColor: onRowClick && rowEl ? hover : normal,
                         "&::after": index === 0 && rightShadowVisible
                             ? {
                                 position: "absolute",

package/DataTable/index.js

@@ -19,7 +19,7 @@ import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
 function DataTable(props) {
-    var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
+    var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var tableRef = useRef(null);
     var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
@@ -53,7 +53,7 @@ function DataTable(props) {
                 borderRadius: "4px",
                 borderCollapse: "unset !important",
                 transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
+            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
 }
 export default DataTable;
 export { default as useDataTable } from "./useTable";

package/DataTable/types.d.ts

@@ -1,4 +1,9 @@
 import { ReactElement, CSSProperties } from "react";
+declare type RGBColor = `#${string}`;
+export declare type CustomRowBgColor = {
+    normal?: RGBColor;
+    hover?: RGBColor;
+};
 export declare type OrderType = "ASC" | "DESC" | "NONE";
 export declare type KvProps = Record<string, unknown>;
 export declare type SortingProps = {
@@ -57,6 +62,10 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
     rightShadowVisible?: boolean;
     noDataText?: string;
     onRowClick?: (row: RowProps) => unknown;
+    onCustomizeRowBgColor?: ({ row, columns }: {
+        row: RowProps;
+        columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
+    }) => CustomRowBgColor;
 };
 export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
     row: RowProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.1.3-beta.1",
+  "version": "1.1.3-beta.3",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",