@symply.io/basic-components 1.1.3-beta.2 → 1.1.3

package/DataTable/TableBodyRow.js

@@ -14,9 +14,9 @@ import { cloneElement, useState, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
+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, onCustomizeRowSxProps = props.onCustomizeRowSxProps;
+    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,16 +31,24 @@ function TableBodyRow(props) {
             return [[], columns, []];
         }
     }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
-    var customRowSx = useMemo(function () {
-        if (onCustomizeRowSxProps) {
-            return onCustomizeRowSxProps({ row: row, columns: columns });
+    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 {};
-    }, [row, columns, onCustomizeRowSxProps]);
-    return (_jsxs(TableRow, __assign({ sx: __assign(__assign({}, customRowSx), { "&:hover": {
+        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"
-            } }), onMouseEnter: function (event) {
+                backgroundColor: onRowClick ? hover : normal
+            }
+        }, onMouseEnter: function (event) {
             setRowEl(event.currentTarget);
         }, onMouseLeave: function () {
             setRowEl(undefined);
@@ -58,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",
@@ -78,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;
@@ -90,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, onCustomizeRowSxProps = props.onCustomizeRowSxProps;
+    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, onCustomizeRowSxProps: onCustomizeRowSxProps, 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,5 +1,9 @@
 import { ReactElement, CSSProperties } from "react";
-import { SxProps } from "@mui/material/styles";
+declare type HexColor = `#${string}`;
+export declare type CustomRowBgColor = {
+    normal?: HexColor;
+    hover?: HexColor;
+};
 export declare type OrderType = "ASC" | "DESC" | "NONE";
 export declare type KvProps = Record<string, unknown>;
 export declare type SortingProps = {
@@ -58,10 +62,10 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
     rightShadowVisible?: boolean;
     noDataText?: string;
     onRowClick?: (row: RowProps) => unknown;
-    onCustomizeRowSxProps?: ({ row, columns }: {
+    onCustomizeRowBgColor?: ({ row, columns }: {
         row: RowProps;
         columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
-    }) => SxProps;
+    }) => CustomRowBgColor;
 };
 export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
     row: RowProps;

package/README.md

@@ -393,22 +393,24 @@ import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable';
 
 | Name    | Type                          | Description               |
 | ------- | ----------------------------- | ------------------------- |
-| headers | Array\<TableHeaderCellProps\> | The cells for the header. |
 | columns | Array\<TableBodyCellProps\>   | The cells for the body.   |
 | footers | Array\<TableFooterCellProps>  | The cells for the footer. |
+| headers | Array\<TableHeaderCellProps\> | The cells for the header. |
 | rows    | Array<RowProps\>              | The rows for the table.   |
 
 <h5>Component Props</h5>
 
-| Name         | Type                          | Default    | Required | Description                                             |
-| ------------ | ----------------------------- | ---------- | -------- | ------------------------------------------------------- |
-| headers      | Array\<TableHeaderCellProps\> |            | true     | The cells for the header. (from the hook)               |
-| columns      | Array\<TableBodyCellProps\>   |            | true     | The cells for the body. (from the hook)                 |
-| dense        | bool                          |            | false    | If `true` the table size/density would be tight.        |
-| noDataText   | string                        | 'No Data!' | false    | The text when no data rendered.                         |
-| rows         | Array<RowProps\>              |            | true     | The rows for the table. (from the hook)                 |
-| stickyHeader | bool                          |            | false    | Set the header sticky.<br/>⚠️ It doesn't work with IE11. |
-| footers      | Array\<TableFooterCellProps>  | []         | false    | The cells for the footer. (from the hook)               |
+| Name                  | Type                          | Default    | Required | Description                                                  |
+| --------------------- | ----------------------------- | ---------- | -------- | ------------------------------------------------------------ |
+| columns               | Array\<TableBodyCellProps\>   |            | true     | The cells for the body. (from the hook)                      |
+| dense                 | bool                          |            | false    | If `true` the table size/density would be tight.             |
+| footers               | Array\<TableFooterCellProps>  | []         | false    | The cells for the footer. (from the hook)                    |
+| headers               | Array\<TableHeaderCellProps\> |            | true     | The cells for the header. (from the hook)                    |
+| noDataText            | string                        | 'No Data!' | false    | The text when no data rendered.                              |
+| onCustomizeRowBgColor | func                          |            | false    | The function for customizing the row background color.<br />**Signature:**<br/>`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/>  hover?: HexColor;<br/>}` |
+| onRowClick            | func                          |            | false    | The function for row clicking.<br />**Signature:**<br/>`function(row: RowProps) => unknown` |
+| rows                  | Array<RowProps\>              |            | true     | The rows for the table. (from the hook)                      |
+| stickyHeader          | bool                          |            | false    | Set the header sticky.<br/>⚠️ It doesn't work with IE11.      |
 
 
 

package/package.json

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