@symply.io/basic-components 1.6.7-alpha.1 → 1.6.7-alpha.3

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 (5) hide show
  1. package/DataTable/TableFooter.js +16 -11
  2. package/DataTable/TableHeader.js +14 -9
  3. package/DataTable/index.js +3 -3
  4. package/DataTable/types.d.ts +6 -2
  5. package/package.json +1 -1
package/DataTable/TableFooter.js CHANGED
@@ -17,10 +17,10 @@ import TableCell from "@mui/material/TableCell";
17
17
  import useMediaQuery from "@mui/material/useMediaQuery";
18
18
  import useTheme from "@mui/material/styles/useTheme";
19
19
  function TableFooter(props) {
20
- var footers = props.footers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
20
+ var _a = props.footers, footers = _a === void 0 ? [] : _a, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
21
21
  var theme = useTheme();
22
22
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
23
- var _a = useMemo(function () {
23
+ var _b = useMemo(function () {
24
24
  if (isUpMd && !noData) {
25
25
  var left = footers.filter(function (f) { return f.fixable === "left"; });
26
26
  var right = footers.filter(function (f) { return f.fixable === "right"; });
@@ -30,15 +30,19 @@ function TableFooter(props) {
30
30
  else {
31
31
  return [[], footers, []];
32
32
  }
33
- }, [isUpMd, noData, footers]), fixedLeftFooters = _a[0], dynamicFooters = _a[1], fixedRightFooters = _a[2];
34
- return (_jsx(Footer, __assign({ sx: { position: "sticky", bottom: "-1px", zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftFooters.map(function (footer, index) {
33
+ }, [isUpMd, noData, footers]), fixedLeftFooters = _b[0], dynamicFooters = _b[1], fixedRightFooters = _b[2];
34
+ return (_jsx(Footer, __assign({ sx: { position: "sticky", bottom: "-1px", zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: {
35
+ backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
36
+ color: "".concat(footerTextColor || "inherit", " !important"),
37
+ } }, { children: [fixedLeftFooters.map(function (footer, index) {
35
38
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
36
39
  var left = fixedLeftFooters
37
40
  .slice(0, index)
38
41
  .reduce(function (w, t) { return w + (t.width || 0); }, 0);
39
42
  return (_jsx(TableCell, __assign({ align: align, sx: {
40
43
  position: "sticky",
41
- backgroundColor: "#eaf0f6",
44
+ backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
45
+ color: "".concat(footerTextColor || "inherit", " !important"),
42
46
  zIndex: 10,
43
47
  left: left,
44
48
  width: width,
@@ -53,16 +57,16 @@ function TableFooter(props) {
53
57
  transform: "translateX(100%)",
54
58
  transition: "box-shadow .3s",
55
59
  content: "''",
56
- boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
60
+ boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
57
61
  }
58
- : undefined
62
+ : undefined,
59
63
  } }, { children: cloneElement(Cell) }), accessor));
60
64
  }), dynamicFooters.map(function (footer) {
61
65
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
62
66
  return (_jsx(TableCell, __assign({ align: align, sx: {
63
67
  zIndex: 9,
64
68
  width: width,
65
- userSelect: "none"
69
+ userSelect: "none",
66
70
  } }, { children: cloneElement(Cell) }), accessor));
67
71
  }), fixedRightFooters.map(function (footer, index) {
68
72
  var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
@@ -74,7 +78,8 @@ function TableFooter(props) {
74
78
  zIndex: 10,
75
79
  width: width,
76
80
  right: right,
77
- backgroundColor: "#eaf0f6",
81
+ backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
82
+ color: "".concat(footerTextColor || "inherit", " !important"),
78
83
  userSelect: "none",
79
84
  "&::after": index === 0 && rightShadowVisible
80
85
  ? {
@@ -86,9 +91,9 @@ function TableFooter(props) {
86
91
  transform: "translateX(-100%)",
87
92
  transition: "box-shadow .3s",
88
93
  content: "''",
89
- boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
94
+ boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
90
95
  }
91
- : undefined
96
+ : undefined,
92
97
  } }, { children: cloneElement(Cell) }), accessor));
93
98
  })] })) })));
94
99
  }
package/DataTable/TableHeader.js CHANGED
@@ -17,7 +17,7 @@ import TableCell from "@mui/material/TableCell";
17
17
  import useMediaQuery from "@mui/material/useMediaQuery";
18
18
  import useTheme from "@mui/material/styles/useTheme";
19
19
  function TableHeader(props) {
20
- var headers = props.headers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
20
+ var headers = props.headers, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
21
21
  var theme = useTheme();
22
22
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
23
23
  var _a = useMemo(function () {
@@ -31,14 +31,18 @@ function TableHeader(props) {
31
31
  return [[], headers, []];
32
32
  }
33
33
  }, [isUpMd, noData, headers]), fixedLeftHeaders = _a[0], dynamicHeaders = _a[1], fixedRightHeaders = _a[2];
34
- return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftHeaders.map(function (header, index) {
34
+ return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: {
35
+ backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
36
+ color: "".concat(headerTextColor || "inherit", " !important"),
37
+ } }, { children: [fixedLeftHeaders.map(function (header, index) {
35
38
  var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
36
39
  var left = fixedLeftHeaders
37
40
  .slice(0, index)
38
41
  .reduce(function (w, t) { return w + (t.width || 0); }, 0);
39
42
  return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
40
43
  position: "sticky",
41
- backgroundColor: "#eaf0f6",
44
+ backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
45
+ color: "".concat(headerTextColor || "inherit", " !important"),
42
46
  zIndex: 10,
43
47
  width: width,
44
48
  left: left,
@@ -54,9 +58,9 @@ function TableHeader(props) {
54
58
  transform: "translateX(100%)",
55
59
  transition: "box-shadow .3s",
56
60
  content: "''",
57
- boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
61
+ boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
58
62
  }
59
- : undefined
63
+ : undefined,
60
64
  }, onClick: function () {
61
65
  onSort({ accessor: accessor });
62
66
  } }, { children: cloneElement(Cell) }), accessor));
@@ -66,7 +70,7 @@ function TableHeader(props) {
66
70
  width: width,
67
71
  zIndex: 9,
68
72
  userSelect: "none",
69
- cursor: sortable ? "pointer" : "default"
73
+ cursor: sortable ? "pointer" : "default",
70
74
  }, onClick: function () {
71
75
  onSort({ accessor: accessor });
72
76
  } }, { children: cloneElement(Cell) }), accessor));
@@ -77,7 +81,8 @@ function TableHeader(props) {
77
81
  .reduce(function (w, t) { return w + (t.width || 0); }, 0);
78
82
  return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
79
83
  position: "sticky",
80
- backgroundColor: "#eaf0f6",
84
+ backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
85
+ color: "".concat(headerTextColor || "inherit", " !important"),
81
86
  zIndex: 10,
82
87
  width: width,
83
88
  right: right,
@@ -93,9 +98,9 @@ function TableHeader(props) {
93
98
  transform: "translateX(-100%)",
94
99
  transition: "box-shadow .3s",
95
100
  content: "''",
96
- boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
101
+ boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
97
102
  }
98
- : undefined
103
+ : undefined,
99
104
  }, onClick: function () {
100
105
  onSort({ accessor: accessor });
101
106
  } }, { children: cloneElement(Cell) }), accessor));
package/DataTable/index.js CHANGED
@@ -20,7 +20,7 @@ import TableBody from "./TableBody";
20
20
  import TableHeader from "./TableHeader";
21
21
  import TableFooter from "./TableFooter";
22
22
  function DataTable(props) {
23
- 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, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
23
+ 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, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
24
24
  var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
25
25
  var tableRef = useRef(null);
26
26
  var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
@@ -54,8 +54,8 @@ function DataTable(props) {
54
54
  borderStyle: "solid",
55
55
  borderRadius: "4px",
56
56
  borderCollapse: "unset !important",
57
- transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
58
- } }, { 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, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
57
+ transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
58
+ } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, headerBgColor: headerBgColor, headerTextColor: headerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
59
59
  }
60
60
  export default DataTable;
61
61
  export * from "./types";
package/DataTable/types.d.ts CHANGED
@@ -52,6 +52,8 @@ export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps ext
52
52
  };
53
53
  export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
54
54
  headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
55
+ headerBgColor?: CSSProperties["color"];
56
+ headerTextColor?: CSSProperties["color"];
55
57
  noData?: boolean;
56
58
  leftShadowVisible?: boolean;
57
59
  rightShadowVisible?: boolean;
@@ -64,7 +66,7 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
64
66
  noDataText?: string;
65
67
  onRowClick?: (row: RowProps) => unknown;
66
68
  onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
67
- onCustomizeRowBgColor?: ({ row, columns }: {
69
+ onCustomizeRowBgColor?: ({ row, columns, }: {
68
70
  row: RowProps;
69
71
  columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
70
72
  }) => CustomRowBgColor;
@@ -74,7 +76,9 @@ export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps ex
74
76
  rowIndex: number;
75
77
  };
76
78
  export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
77
- footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
79
+ footers?: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
80
+ footerBgColor?: CSSProperties["color"];
81
+ footerTextColor?: CSSProperties["color"];
78
82
  noData?: boolean;
79
83
  leftShadowVisible?: boolean;
80
84
  rightShadowVisible?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.6.7-alpha.1",
3
+ "version": "1.6.7-alpha.3",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",