@symply.io/basic-components 1.0.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/BasicTable/TableBody.js +4 -4
  2. package/BasicTable/TableBodyRow.js +3 -3
  3. package/BasicTable/index.js +3 -3
  4. package/BasicTable/types.d.ts +2 -0
  5. package/README.md +1 -0
  6. package/package.json +1 -1
package/BasicTable/TableBody.js CHANGED
@@ -15,7 +15,7 @@ import Grid from "@mui/material/Grid";
15
15
  import useTheme from "@mui/material/styles/useTheme";
16
16
  import TableBodyRow from "./TableBodyRow";
17
17
  function BasicTableBody(props, ref) {
18
- var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
18
+ var rows = props.rows, columns = props.columns, rowHeight = props.rowHeight, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
19
19
  var theme = useTheme();
20
20
  return (_jsx(Grid, __assign({ item: true, sx: {
21
21
  maxHeight: "41vh",
@@ -27,14 +27,14 @@ function BasicTableBody(props, ref) {
27
27
  width: forFrozen ? 0 : "initial"
28
28
  }
29
29
  } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows.length > 0 ? (rows.map(function (row, index) {
30
- return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
30
+ return (_jsx(TableBodyRow, { row: row, rows: rows, rowHeight: rowHeight, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
31
31
  })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
32
- height: theme.spacing(7.5),
32
+ height: rowHeight || theme.spacing(7.5),
33
33
  borderBottomWidth: "thin",
34
34
  borderBottomColor: "#e5e5e5",
35
35
  borderBottomStyle: "solid",
36
36
  padding: theme.spacing(0.5, 0),
37
- minHeight: theme.spacing(6),
37
+ minHeight: theme.spacing(5),
38
38
  "& :nth-of-last-type(1)": {
39
39
  borderBottom: "none"
40
40
  },
package/BasicTable/TableBodyRow.js CHANGED
@@ -15,15 +15,15 @@ import colorAlpha from "color-alpha";
15
15
  import Grid from "@mui/material/Grid";
16
16
  import useTheme from "@mui/material/styles/useTheme";
17
17
  function BasicTableBodyRow(props) {
18
- var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, onRowClick = props.onRowClick;
18
+ var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, rowHeight = props.rowHeight, onRowClick = props.onRowClick;
19
19
  var theme = useTheme();
20
20
  return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
21
- height: theme.spacing(7.5),
21
+ height: rowHeight || theme.spacing(7.5),
22
22
  borderBottomWidth: "thin",
23
23
  borderBottomColor: "#e5e5e5",
24
24
  borderBottomStyle: "solid",
25
25
  padding: theme.spacing(0.5, 0),
26
- minHeight: theme.spacing(6),
26
+ minHeight: theme.spacing(5),
27
27
  "&:hover": {
28
28
  cursor: !forFrozen && onRowClick ? "pointer" : "default",
29
29
  backgroundColor: !forFrozen && onRowClick
package/BasicTable/index.js CHANGED
@@ -22,7 +22,7 @@ import TableHeader from "./TableHeader";
22
22
  import TableFooter from "./TableFooter";
23
23
  function BasicTable(props) {
24
24
  var _a;
25
- var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
25
+ var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rowHeight = props.rowHeight, onRowClick = props.onRowClick;
26
26
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
27
27
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
28
28
  var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
@@ -63,7 +63,7 @@ function BasicTable(props) {
63
63
  zIndex: 999,
64
64
  backgroundColor: "Menu",
65
65
  boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
66
- } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, onRowClick: onRowClick
66
+ } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, rowHeight: rowHeight, onRowClick: onRowClick
67
67
  ? function (row) {
68
68
  onRowClick(row);
69
69
  }
@@ -73,7 +73,7 @@ function BasicTable(props) {
73
73
  overflow: "auto"
74
74
  } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) {
75
75
  return isUpMd ? !header.canBeFrozen : true;
76
- }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
76
+ }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, rowHeight: rowHeight, noDataText: noDataText, columns: columns.filter(function (col) {
77
77
  return isUpMd ? !col.canBeFrozen : true;
78
78
  }), onRowClick: onRowClick
79
79
  ? function (row) {
package/BasicTable/types.d.ts CHANGED
@@ -65,6 +65,7 @@ export interface BasicTableBodyProps<RowProps extends KvProps, ExtraProps extend
65
65
  rows: Array<RowProps>;
66
66
  noDataText?: string;
67
67
  forFrozen?: boolean;
68
+ rowHeight?: CSSProperties["height"];
68
69
  onRowClick?: (row: RowProps) => unknown;
69
70
  }
70
71
  export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps extends KvProps> {
@@ -72,6 +73,7 @@ export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps ext
72
73
  rows: Array<RowProps>;
73
74
  row: RowProps;
74
75
  forFrozen?: boolean;
76
+ rowHeight?: CSSProperties["height"];
75
77
  onRowClick?: (row: RowProps) => unknown;
76
78
  }
77
79
  export declare type BasicTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = BasicTableHeaderProps<RowProps, ExtraProps> & Omit<BasicTableBodyProps<RowProps, ExtraProps>, "forFrozen"> & Partial<BasicTableFooterProps<RowProps, ExtraProps>> & {
package/README.md CHANGED
@@ -258,6 +258,7 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
258
258
  | footers | Array\<FooterProps> | [] | false | The cells for the footer. (from the hook) |
259
259
  | onRowClick | func | | false | The function for row clicking. |
260
260
  | noDataText | string | 'No Data!' | false | The text when no data rendered. |
261
+ | rowHeight | string \| number | 60 | false | The height of each row. |
261
262
  | rows | Array<RowProps\> | | true | The rows for the table. (from the hook) |
262
263
 
263
264
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.0.9",
3
+ "version": "1.1.0",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",