@symply.io/basic-components 1.0.3 → 1.0.4

package/.gitignore

@@ -12,4 +12,5 @@ yarn-debug.log*
 yarn-error.log*
 *.js
 *.d.ts
-dist
+dist
+.eslintrc.json

package/BasicTable/TableBody.js

@@ -12,11 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 import TableBodyRow from "./TableBodyRow";
 var BasicTableBody = forwardRef(function (props, ref) {
     var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText;
-    var theme = useCustomTheme();
+    var theme = useTheme();
     return (_jsx(Grid, __assign({ item: true, sx: {
             maxHeight: "41vh",
             overflowY: "auto",
@@ -27,7 +27,7 @@ var BasicTableBody = forwardRef(function (props, ref) {
                 width: forFrozen ? 0 : "initial"
             }
         } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
-                return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns }, "BasicTable_".concat(index)));
+                return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns }, "BasicTable_".concat(index)));
             })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
                     height: theme.spacing(7.5),
                     borderBottomWidth: "thin",

package/BasicTable/TableBodyRow.js

@@ -9,13 +9,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement } from "react";
+import { cloneElement, useMemo } from "react";
+import colorAlpha from "color-alpha";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 function BasicTableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns;
-    var theme = useCustomTheme();
+    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen;
+    var onRowClick = row.onRowClick, rawRow = __rest(row, ["onRowClick"]);
+    var theme = useTheme();
+    var rawRows = useMemo(function () {
+        return rows.map(function (r) {
+            var newRow = __assign({}, r);
+            delete newRow.onRowClick;
+            return newRow;
+        });
+    }, [rows]);
     return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
             height: theme.spacing(7.5),
             borderBottomWidth: "thin",
@@ -23,6 +43,12 @@ function BasicTableBodyRow(props) {
             borderBottomStyle: "solid",
             padding: theme.spacing(0.5, 0),
             minHeight: theme.spacing(6),
+            "&:hover": {
+                cursor: !forFrozen && onRowClick ? "pointer" : "default",
+                backgroundColor: !forFrozen && onRowClick
+                    ? colorAlpha(theme.palette.primary.main, 0.1)
+                    : "initial"
+            },
             "& :nth-of-last-type(1)": {
                 borderBottom: "none"
             },
@@ -30,14 +56,18 @@ function BasicTableBodyRow(props) {
                 fontSize: "0.9rem",
                 fontWeight: 600
             }
-        } }, { children: columns.map(function (col) {
+        }, onClick: onRowClick
+            ? function () {
+                onRowClick({ row: rawRow });
+            }
+            : undefined }, { children: columns.map(function (col) {
             var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = col.width, _b = col.align, align = _b === void 0 ? "center" : _b;
             return (_jsx(Grid, __assign({ item: true, textAlign: align, sx: {
                     minWidth: minWidth,
                     width: width,
                     paddingLeft: theme.spacing(0.625),
                     paddingRight: theme.spacing(0.625)
-                } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+                } }, { children: cloneElement(Cell, { column: col, rows: rawRows, row: rawRow }) }), accessor));
         }) })));
 }
 export default BasicTableBodyRow;

package/BasicTable/TableFooter.js

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 function BasicTableFooter(props) {
     var footers = props.footers;
-    var theme = useCustomTheme();
+    var theme = useTheme();
     return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
             backgroundColor: "#eaf0f6",
             padding: theme.spacing(1.5, 0),

package/BasicTable/TableHeader.js

@@ -12,10 +12,10 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import Grid from "@mui/material/Grid";
-import useCustomTheme from "../useCustomTheme";
+import useTheme from "@mui/material/styles/useTheme";
 function BasicTableHeader(props) {
     var headers = props.headers;
-    var theme = useCustomTheme();
+    var theme = useTheme();
     return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
             backgroundColor: "#eaf0f6",
             padding: theme.spacing(1.5, 0),

package/BasicTable/types.d.ts

@@ -34,12 +34,17 @@ interface IBodyColumn extends IColumn {
 export interface IRow {
     [name: string]: any;
 }
+interface RowClickProps {
+    onRowClick?: (props: {
+        row: IRow;
+    }) => unknown;
+}
 export interface SortingProps {
     field: string;
     isSorted?: boolean;
     descending?: boolean;
 }
-export interface UseTableProps {
+export interface UseTableProps extends RowClickProps {
     data: Array<IRow>;
     columns: Array<IColumn>;
     initialState?: InitialStateProps;
@@ -58,14 +63,15 @@ export interface BasicTableFooterProps {
 }
 export interface BasicTableBodyProps {
     columns: Array<IBodyColumn>;
-    rows: Array<IRow>;
+    rows: Array<IRow & RowClickProps>;
     noDataText?: string;
     forFrozen?: boolean;
 }
 export interface BasicTableBodyRowProps {
     columns: Array<IBodyColumn>;
-    rows: Array<IRow>;
-    row: IRow;
+    rows: Array<IRow & RowClickProps>;
+    row: IRow & RowClickProps;
+    forFrozen?: boolean;
 }
 export declare type BasicTableProps = BasicTableHeaderProps & Omit<BasicTableBodyProps, "forFrozen"> & Partial<BasicTableFooterProps> & {
     primaryColor?: CSSProperties["color"];

package/BasicTable/useTable.d.ts

@@ -42,6 +42,10 @@ declare function useTable(props: UseTableProps): {
         width?: number | undefined;
         Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     }[];
-    rows: import("./types").IRow[];
+    rows: {
+        onRowClick: ((props: {
+            row: import("./types").IRow;
+        }) => unknown) | undefined;
+    }[];
 };
 export default useTable;

package/BasicTable/useTable.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState, useMemo, useCallback } from "react";
 function useTable(props) {
-    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, onRowClick = props.onRowClick, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort", "onRowClick"]);
     if (!data) {
         throw new Error('"data" is required but got null or undefined');
     }
@@ -66,7 +66,7 @@ function useTable(props) {
         }
         return "↓";
     }, [sortingProps]);
-    var rows = useMemo(function () { return data.map(function (d) { return d; }); }, [data]);
+    var rows = useMemo(function () { return data.map(function (d) { return (__assign(__assign({}, d), { onRowClick: onRowClick })); }); }, [data]);
     var cols = useMemo(function () {
         return columns.map(function (col) {
             var Body = col.Body;

package/DigitInput/useInteractions.js

@@ -7,7 +7,7 @@ function useInteractions(props) {
         if (!event.target.value || /^\d+$/g.test(event.target.value)) {
             onChange(event.target.value);
         }
-    }, []);
+    }, [onChange]);
     var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
@@ -18,7 +18,7 @@ function useInteractions(props) {
         tooltipOpen: tooltipOpen,
         handleChange: handleChange,
         onOpenTooltip: onOpenTooltip,
-        onCloseTooltip: onCloseTooltip,
+        onCloseTooltip: onCloseTooltip
     };
 }
 export default useInteractions;

package/NumberInput/useInteractions.js

@@ -2,7 +2,7 @@ import { useState, useCallback, useMemo } from "react";
 function useInteractions(props) {
     var value = props.value, integerOnly = props.integerOnly, _a = props.minValue, minValue = _a === void 0 ? Number.MIN_SAFE_INTEGER : _a, _b = props.maxValue, maxValue = _b === void 0 ? Number.MAX_SAFE_INTEGER : _b, onChange = props.onChange;
     var _c = useState(false), tooltipOpen = _c[0], setTooltipOpen = _c[1];
-    var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, []);
+    var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, [value, minValue, maxValue]);
     var handleChange = useCallback(function (event) {
         event.preventDefault();
         var val = event.currentTarget.value;
@@ -15,7 +15,7 @@ function useInteractions(props) {
         else if (val !== "" && val !== "-" && !/^(-?\d*)(\.\d*)?$/g.test(val))
             return;
         onChange(val);
-    }, []);
+    }, [onChange, minValue, integerOnly]);
     var handleBlur = useCallback(function () {
         var excludedValue = [
             null,
@@ -25,7 +25,7 @@ function useInteractions(props) {
             "-",
             "-.",
             "null",
-            "undefined",
+            "undefined"
         ];
         var strVal = String(value).trim();
         if (strVal !== null && strVal.lastIndexOf(".") === strVal.length - 1) {
@@ -35,7 +35,7 @@ function useInteractions(props) {
         else if (excludedValue.includes(strVal)) {
             onChange("");
         }
-    }, []);
+    }, [value, onChange]);
     var onOpenTooltip = useCallback(function () {
         setTooltipOpen(true);
     }, []);
@@ -48,7 +48,7 @@ function useInteractions(props) {
         handleBlur: handleBlur,
         handleChange: handleChange,
         onOpenTooltip: onOpenTooltip,
-        onCloseTooltip: onCloseTooltip,
+        onCloseTooltip: onCloseTooltip
     };
 }
 export default useInteractions;

package/README.md

@@ -237,6 +237,7 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
 | data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
 | disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
 | initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
+| onRowClick    | func                       |         | false    | The function for row clicking.              |
 | onSort        | func                       |         | false    | The function for sorting rows.              |
 
 <h5>Hook Returns</h5>

package/package.json

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