@symply.io/basic-components 1.7.0-alpha.4 → 1.7.0-alpha.5

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 (3) hide show
  1. package/VirtualDataTable/index.js +58 -12
  2. package/VirtualDataTable/types.d.ts +2 -2
  3. package/package.json +1 -1
package/VirtualDataTable/index.js CHANGED
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
13
- import { useMemo, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
13
+ import { useMemo, useState, forwardRef, useCallback, cloneElement, useImperativeHandle, } from "react";
14
14
  import { TableVirtuoso } from "react-virtuoso";
15
15
  import Table from "@mui/material/Table";
16
16
  import TableRow from "@mui/material/TableRow";
@@ -22,16 +22,30 @@ import TableContainer from "@mui/material/TableContainer";
22
22
  import Typography from "@mui/material/Typography";
23
23
  import useInteractions from "./useInteractions";
24
24
  var VirtualDataTable = function (props, ref) {
25
- var rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled, options = props.options;
26
- var _b = useInteractions({ rows: rows, columns: columns }), normalCols = _b.normalCols, pinnedLeftCols = _b.pinnedLeftCols, pinnedRightCols = _b.pinnedRightCols, leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onScroll = _b.onScroll, handleSort = _b.handleSort, onResetSorting = _b.onResetSorting, renderSortingSymbol = _b.renderSortingSymbol;
25
+ var rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, _a = props.noDataText, noDataText = _a === void 0 ? "No Data" : _a, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, sortingDisabled = props.sortingDisabled, options = props.options, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
26
+ var _b = useState(), rowEl = _b[0], setRowEl = _b[1];
27
+ var _c = useInteractions({ rows: rows, columns: columns, initialState: initialState, sortingDisabled: sortingDisabled, onSort: onSort }), normalCols = _c.normalCols, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, renderSortingSymbol = _c.renderSortingSymbol;
27
28
  useImperativeHandle(ref, function () { return ({
28
29
  onResetSorting: onResetSorting,
29
30
  }); }, [onResetSorting]);
31
+ var handleCustomizeRowBgColor = useCallback(function (row, columns) {
32
+ var regex = /^#(\d|[a-f]|[A-F]){6}/i;
33
+ var _a = onCustomizeRowBgColor
34
+ ? onCustomizeRowBgColor({ row: row, columns: columns })
35
+ : { normal: "#FEFEFE", hover: "#F2F1F3" }, normal = _a.normal, hover = _a.hover;
36
+ if (!(normal && regex.test(normal))) {
37
+ normal = "#FEFEFE";
38
+ }
39
+ if (!(hover && regex.test(hover))) {
40
+ hover = "#F2F1F3";
41
+ }
42
+ return { normal: normal, hover: hover };
43
+ }, []);
30
44
  var fixedHeaderContent = useCallback(function () {
31
45
  return (_jsxs(TableRow, __assign({ sx: {
32
46
  backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
33
47
  color: "".concat(headerTextColor || "inherit", " !important"),
34
- width: "100%F",
48
+ width: "100%",
35
49
  } }, { children: [pinnedLeftCols.map(function (column, index) {
36
50
  var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
37
51
  var canSortBy = sortable && !sortingDisabled;
@@ -46,7 +60,8 @@ var VirtualDataTable = function (props, ref) {
46
60
  position: "sticky",
47
61
  left: left,
48
62
  width: width,
49
- cursor: sortable ? "pointer" : "default",
63
+ userSelect: "none",
64
+ cursor: canSortBy ? "pointer" : "default",
50
65
  backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
51
66
  color: "".concat(headerTextColor || "inherit", " !important"),
52
67
  "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
@@ -72,7 +87,8 @@ var VirtualDataTable = function (props, ref) {
72
87
  }
73
88
  }, sx: {
74
89
  width: width,
75
- cursor: sortable ? "pointer" : "default",
90
+ userSelect: "none",
91
+ cursor: canSortBy ? "pointer" : "default",
76
92
  backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
77
93
  color: "".concat(headerTextColor || "inherit", " !important"),
78
94
  } }, { children: [cloneElement(Header, { column: column, rows: rows, options: options }), canSortBy && renderSortingSymbol(accessor)] }), accessor));
@@ -90,7 +106,8 @@ var VirtualDataTable = function (props, ref) {
90
106
  position: "sticky",
91
107
  right: right,
92
108
  width: width,
93
- cursor: sortable ? "pointer" : "default",
109
+ userSelect: "none",
110
+ cursor: canSortBy ? "pointer" : "default",
94
111
  backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
95
112
  color: "".concat(headerTextColor || "inherit", " !important"),
96
113
  "&::after": index === 0 && rightShadowVisible
@@ -134,6 +151,7 @@ var VirtualDataTable = function (props, ref) {
134
151
  position: "sticky",
135
152
  left: left,
136
153
  width: width,
154
+ userSelect: "none",
137
155
  backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
138
156
  color: "".concat(footerTextColor || "inherit", " !important"),
139
157
  "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
@@ -154,6 +172,7 @@ var VirtualDataTable = function (props, ref) {
154
172
  var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
155
173
  return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
156
174
  width: width,
175
+ userSelect: "none",
157
176
  backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
158
177
  color: "".concat(footerTextColor || "inherit", " !important"),
159
178
  } }, { children: Footer ? cloneElement(Footer, { column: column, rows: rows, options: options }) : _jsx(_Fragment, {}) }), accessor));
@@ -166,6 +185,7 @@ var VirtualDataTable = function (props, ref) {
166
185
  position: "sticky",
167
186
  right: right,
168
187
  width: width,
188
+ userSelect: "none",
169
189
  backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
170
190
  color: "".concat(footerTextColor || "inherit", " !important"),
171
191
  "&::after": index === 0 && rightShadowVisible
@@ -193,6 +213,7 @@ var VirtualDataTable = function (props, ref) {
193
213
  rightShadowVisible,
194
214
  ]);
195
215
  var itemContent = useCallback(function (rowIndex, row) {
216
+ var _a = handleCustomizeRowBgColor(row, columns), normal = _a.normal, hover = _a.hover;
196
217
  return (_jsxs(_Fragment, { children: [pinnedLeftCols.map(function (column, index) {
197
218
  var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
198
219
  var left = pinnedLeftCols
@@ -203,7 +224,8 @@ var VirtualDataTable = function (props, ref) {
203
224
  left: left,
204
225
  zIndex: 1,
205
226
  width: width,
206
- backgroundColor: "background.paper",
227
+ backgroundColor: (onRowClick && rowEl ? hover : normal) ||
228
+ "background.paper",
207
229
  "&::after": index === pinnedLeftCols.length - 1 && leftShadowVisible
208
230
  ? {
209
231
  position: "absolute",
@@ -222,7 +244,8 @@ var VirtualDataTable = function (props, ref) {
222
244
  var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
223
245
  return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
224
246
  width: width,
225
- backgroundColor: "background.paper",
247
+ backgroundColor: (onRowClick && rowEl ? hover : normal) ||
248
+ "background.paper",
226
249
  } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex, options: options }) }), accessor));
227
250
  }), pinnedRightCols.map(function (column, index) {
228
251
  var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
@@ -234,7 +257,8 @@ var VirtualDataTable = function (props, ref) {
234
257
  right: right,
235
258
  zIndex: 1,
236
259
  width: width,
237
- backgroundColor: "background.paper",
260
+ backgroundColor: (onRowClick && rowEl ? hover : normal) ||
261
+ "background.paper",
238
262
  "&::after": index === 0 && rightShadowVisible
239
263
  ? {
240
264
  position: "absolute",
@@ -275,10 +299,32 @@ var VirtualDataTable = function (props, ref) {
275
299
  tableLayout: "fixed",
276
300
  } }))); },
277
301
  TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
278
- TableRow: TableRow,
302
+ TableRow: function (props) {
303
+ var _a = handleCustomizeRowBgColor(props.item, columns), normal = _a.normal, hover = _a.hover;
304
+ return (_jsx(TableRow, __assign({}, props, { sx: {
305
+ backgroundColor: normal,
306
+ "&:hover": {
307
+ cursor: onRowClick ? "pointer" : "default",
308
+ backgroundColor: onRowClick ? hover : normal,
309
+ },
310
+ }, onMouseEnter: function (event) {
311
+ setRowEl(event.currentTarget);
312
+ }, onMouseLeave: function () {
313
+ setRowEl(undefined);
314
+ }, onClick: onRowClick
315
+ ? function () {
316
+ onRowClick(props.item);
317
+ }
318
+ : undefined, onContextMenu: function (event) {
319
+ event.preventDefault();
320
+ if (onContextMenu) {
321
+ onContextMenu(event, props.item);
322
+ }
323
+ } })));
324
+ },
279
325
  TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
280
326
  TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
281
- }); }, []);
327
+ }); }, [onRowClick, onContextMenu, onCustomizeRowBgColor]);
282
328
  return (_jsx(TableVirtuoso, { data: rows, style: { height: height }, onResize: onScroll, onScroll: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, followOutput: "smooth", increaseViewportBy: 5 }));
283
329
  };
284
330
  export default forwardRef(VirtualDataTable);
package/VirtualDataTable/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { ReactElement, CSSProperties, MouseEvent } from "react";
2
2
  declare type HexColor = `#${string}`;
3
- declare type CustomVirtualTableRowBgColor = {
3
+ export declare type CustomVirtualTableRowBgColor = {
4
4
  normal?: HexColor;
5
5
  hover?: HexColor;
6
6
  };
@@ -44,7 +44,7 @@ export interface VirtualTableProps<RowProps extends TVirtualTableRow, OptionProp
44
44
  onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
45
45
  onCustomizeRowBgColor?: ({ row, columns, }: {
46
46
  row: RowProps;
47
- columns: TVirtualTableColumn;
47
+ columns: Array<TVirtualTableColumn>;
48
48
  }) => CustomVirtualTableRowBgColor;
49
49
  options?: OptionProps;
50
50
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.7.0-alpha.4",
3
+ "version": "1.7.0-alpha.5",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",