@symply.io/basic-components 1.7.10-alpha.1 → 1.7.10-beta.1

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/VirtualDataTable/index.js +3 -3
  2. package/VirtualDataTable/types.d.ts +1 -1
  3. package/VirtualDataTable/useInteractions.d.ts +2 -0
  4. package/VirtualDataTable/useInteractions.js +11 -5
  5. package/package.json +1 -1
package/VirtualDataTable/index.js CHANGED
@@ -31,7 +31,7 @@ import TableContainer from "@mui/material/TableContainer";
31
31
  import Typography from "@mui/material/Typography";
32
32
  import useInteractions from "./useInteractions";
33
33
  var VirtualDataTable = function (props, ref) {
34
- var aux = props.aux, rows = props.rows, columns = props.columns, dense = props.dense, height = props.height, visableRows = props.visableRows, _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, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
34
+ var aux = props.aux, rows = props.rows, columns = props.columns, dense = props.dense, maxHeight = props.maxHeight, visableRows = props.visableRows, _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, initialState = props.initialState, onSort = props.onSort, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
35
35
  var _b = useState(null), rowDataIndex = _b[0], setRowDataIndex = _b[1];
36
36
  var _c = useInteractions({
37
37
  rows: visableRows || rows,
@@ -39,7 +39,7 @@ var VirtualDataTable = function (props, ref) {
39
39
  initialState: initialState,
40
40
  sortingDisabled: sortingDisabled,
41
41
  onSort: onSort,
42
- }), normalCols = _c.normalCols, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, reflectScrollerRef = _c.reflectScrollerRef, renderSortingSymbol = _c.renderSortingSymbol;
42
+ }), normalCols = _c.normalCols, tableHeight = _c.tableHeight, pinnedLeftCols = _c.pinnedLeftCols, pinnedRightCols = _c.pinnedRightCols, leftShadowVisible = _c.leftShadowVisible, rightShadowVisible = _c.rightShadowVisible, onScroll = _c.onScroll, handleSort = _c.handleSort, onResetSorting = _c.onResetSorting, reflectScrollerRef = _c.reflectScrollerRef, renderSortingSymbol = _c.renderSortingSymbol, onTotalListHeightChanged = _c.onTotalListHeightChanged;
43
43
  useImperativeHandle(ref, function () { return ({
44
44
  onResetSorting: onResetSorting,
45
45
  }); }, [onResetSorting]);
@@ -355,6 +355,6 @@ var VirtualDataTable = function (props, ref) {
355
355
  TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
356
356
  TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
357
357
  }); }, [onRowClick, onContextMenu, handleCustomizeRowBgColor]);
358
- return (_jsx(TableVirtuoso, { data: visableRows || rows, increaseViewportBy: { top: 320, bottom: 480 }, initialTopMostItemIndex: 0, style: { height: height }, onScroll: onScroll, onResize: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, scrollerRef: reflectScrollerRef }));
358
+ return (_jsx(TableVirtuoso, { data: visableRows || rows, increaseViewportBy: { top: 320, bottom: 480 }, initialTopMostItemIndex: 0, style: { height: tableHeight, minHeight: 112, maxHeight: maxHeight }, onScroll: onScroll, onResize: onScroll, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent, scrollerRef: reflectScrollerRef, totalListHeightChanged: onTotalListHeightChanged }));
359
359
  };
360
360
  export default forwardRef(VirtualDataTable);
package/VirtualDataTable/types.d.ts CHANGED
@@ -35,7 +35,7 @@ export interface InteractionProps<RowProps extends TVirtualTableRow> {
35
35
  export interface VirtualTableProps<RowProps extends TVirtualTableRow, AuxProps extends TVirtualTableAuxiliary> extends InteractionProps<RowProps> {
36
36
  dense?: boolean;
37
37
  visableRows?: Array<RowProps>;
38
- height: number;
38
+ maxHeight?: number;
39
39
  headerBgColor?: CSSProperties["color"];
40
40
  headerTextColor?: CSSProperties["color"];
41
41
  footerBgColor?: CSSProperties["color"];
package/VirtualDataTable/useInteractions.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { InteractionProps, TVirtualTableRow, TVirtualTableColumn, VirtualDataTableSortingProps } from "./types";
2
2
  declare function useInteractions<RowProps extends TVirtualTableRow>(props: InteractionProps<RowProps>): {
3
3
  normalCols: TVirtualTableColumn[];
4
+ tableHeight: number;
4
5
  pinnedLeftCols: TVirtualTableColumn[];
5
6
  pinnedRightCols: TVirtualTableColumn[];
6
7
  leftShadowVisible: boolean;
@@ -10,5 +11,6 @@ declare function useInteractions<RowProps extends TVirtualTableRow>(props: Inter
10
11
  onResetSorting: () => void;
11
12
  reflectScrollerRef: (ref: HTMLElement | Window | null) => void;
12
13
  renderSortingSymbol: (accessor: string) => "" | "↑" | "↓";
14
+ onTotalListHeightChanged: (height: number) => void;
13
15
  };
14
16
  export default useInteractions;
package/VirtualDataTable/useInteractions.js CHANGED
@@ -17,8 +17,9 @@ function useInteractions(props) {
17
17
  var theme = useTheme();
18
18
  var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
19
19
  var _a = useState(null), scrollerRef = _a[0], setScrollerRef = _a[1];
20
- var _b = useState(false), leftShadowVisible = _b[0], setLeftShadowVisible = _b[1];
21
- var _c = useState(columns.filter(function (c) { return c.fixable === "right"; }).length > 0 || false), rightShadowVisible = _c[0], setRightShadowVisible = _c[1];
20
+ var _b = useState(112), tableHeight = _b[0], setTableHeight = _b[1];
21
+ var _c = useState(false), leftShadowVisible = _c[0], setLeftShadowVisible = _c[1];
22
+ var _d = useState(columns.filter(function (c) { return c.fixable === "right"; }).length > 0 || false), rightShadowVisible = _d[0], setRightShadowVisible = _d[1];
22
23
  var initialSortingProps = useMemo(function () {
23
24
  var sortBy = (initialState || {}).sortBy;
24
25
  var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
@@ -27,7 +28,7 @@ function useInteractions(props) {
27
28
  order: !!accessor ? order || "NONE" : "NONE",
28
29
  };
29
30
  }, [initialState]);
30
- var _d = useState(initialSortingProps), sortingProps = _d[0], setSortingProps = _d[1];
31
+ var _e = useState(initialSortingProps), sortingProps = _e[0], setSortingProps = _e[1];
31
32
  var handleSort = useCallback(function (_a) {
32
33
  var accessor = _a.accessor;
33
34
  if (!sortingDisabled) {
@@ -78,7 +79,10 @@ function useInteractions(props) {
78
79
  setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
79
80
  }
80
81
  }, [scrollerRef]);
81
- var _e = useMemo(function () {
82
+ var onTotalListHeightChanged = useCallback(function (height) {
83
+ setTableHeight(height);
84
+ }, []);
85
+ var _f = useMemo(function () {
82
86
  var hasData = rows.length > 0;
83
87
  if (isUpMd && hasData) {
84
88
  var left = columns.filter(function (c) { return c.fixable === "left"; });
@@ -89,7 +93,7 @@ function useInteractions(props) {
89
93
  else {
90
94
  return [[], columns, []];
91
95
  }
92
- }, [isUpMd, rows, columns]), pinnedLeftCols = _e[0], normalCols = _e[1], pinnedRightCols = _e[2];
96
+ }, [isUpMd, rows, columns]), pinnedLeftCols = _f[0], normalCols = _f[1], pinnedRightCols = _f[2];
93
97
  useEffect(function () {
94
98
  if (columns) {
95
99
  onScroll();
@@ -103,6 +107,7 @@ function useInteractions(props) {
103
107
  }, [onScroll]);
104
108
  return {
105
109
  normalCols: normalCols,
110
+ tableHeight: tableHeight,
106
111
  pinnedLeftCols: pinnedLeftCols,
107
112
  pinnedRightCols: pinnedRightCols,
108
113
  leftShadowVisible: leftShadowVisible,
@@ -112,6 +117,7 @@ function useInteractions(props) {
112
117
  onResetSorting: onResetSorting,
113
118
  reflectScrollerRef: reflectScrollerRef,
114
119
  renderSortingSymbol: renderSortingSymbol,
120
+ onTotalListHeightChanged: onTotalListHeightChanged,
115
121
  };
116
122
  }
117
123
  export default useInteractions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@symply.io/basic-components",
3
- "version": "1.7.10-alpha.1",
3
+ "version": "1.7.10-beta.1",
4
4
  "description": "Basic and reusable components for all frontend of Symply apps",
5
5
  "keywords": [
6
6
  "react",