qbs-react-grid 1.1.7 → 1.1.9

package/es/Table.js

@@ -359,7 +359,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
   var styles = _extends({
     width: widthProp || 'auto',
-    height: tableBodyHeight ? undefined : getTableHeight()
+    height: tableBodyHeight != null ? tableBodyHeight : getTableHeight()
   }, style);
   var renderRowExpanded = useCallback(function (rowData) {
     var styles = {
@@ -619,7 +619,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var bodyHeight = height - headerHeight;
     var bodyStyles = {
       top: headerHeight,
-      maxHeight: tableBodyHeight,
+      height: bodyHeight,
+      //height: tableBodyHeight
+      // maxHeight: tableBodyHeight,
       minHeight: tableBodyHeight
     };
     var contentHeight = 0;
@@ -721,7 +723,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var wheelStyles = {
       position: 'absolute',
       height: contentHeight,
-      minHeight: height,
+      minHeight: tableBodyHeight,
+      maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     var topRowStyles = {
@@ -751,7 +754,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderEmpty: renderEmpty,
       addPrefix: prefix,
       loading: !!((_visibleRows$current = visibleRows.current) !== null && _visibleRows$current !== void 0 && _visibleRows$current.length) || loading
-    }), renderScrollbar(), /*#__PURE__*/React.createElement(Loader, {
+    }), /*#__PURE__*/React.createElement(Loader, {
       locale: locale,
       loadAnimation: loadAnimation,
       loading: loading,
@@ -782,7 +785,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classes,
     style: styles,
     ref: tableRef
-  }), showHeader && renderTableHeader(headerCells, rowWidth), children && renderTableBody(bodyCells, rowWidth), showHeader && /*#__PURE__*/React.createElement(MouseArea, {
+  }), showHeader && renderTableHeader(headerCells, rowWidth), children && renderTableBody(bodyCells, rowWidth), renderScrollbar(), showHeader && /*#__PURE__*/React.createElement(MouseArea, {
     ref: mouseAreaRef,
     addPrefix: prefix,
     headerHeight: headerHeight,

package/es/utils/useTableDimension.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RowDataType, ElementOffset } from '../@types/common';
+import { ElementOffset, RowDataType } from '../@types/common';
 interface TableDimensionProps<Row, Key> {
     data?: readonly Row[];
     rowHeight: number | ((rowData?: Row) => number);

package/es/utils/useTableDimension.js

@@ -1,13 +1,13 @@
-import { useRef, useCallback } from 'react';
-import getWidth from 'dom-lib/getWidth';
+import { ResizeObserver } from '@juggle/resize-observer';
 import getHeight from 'dom-lib/getHeight';
 import getOffset from 'dom-lib/getOffset';
+import getWidth from 'dom-lib/getWidth';
+import debounce from 'lodash/debounce';
+import { useCallback, useRef } from 'react';
 import { SCROLLBAR_WIDTH } from '../constants';
-import { ResizeObserver } from '@juggle/resize-observer';
+import isNumberOrTrue from './isNumberOrTrue';
 import useMount from './useMount';
 import useUpdateLayoutEffect from './useUpdateLayoutEffect';
-import isNumberOrTrue from './isNumberOrTrue';
-import debounce from 'lodash/debounce';
 /**
  * The dimension information of the table,
  * including the height, width, scrollable distance and the coordinates of the scroll handle, etc.
@@ -218,7 +218,6 @@ var useTableDimension = function useTableDimension(props) {
     if ((data === null || data === void 0 ? void 0 : data.length) === 0 && autoHeight) {
       return heightProp;
     }
-    console.log(heightProp, headerHeight, contentHeight.current, tableHeight.current);
     return autoHeight ? Math.max(headerHeight + contentHeight.current, minHeight) : heightProp;
   };
   return {

package/lib/Table.js

@@ -366,7 +366,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }));
   var styles = (0, _extends2["default"])({
     width: widthProp || 'auto',
-    height: tableBodyHeight ? undefined : getTableHeight()
+    height: tableBodyHeight != null ? tableBodyHeight : getTableHeight()
   }, style);
   var renderRowExpanded = (0, _react.useCallback)(function (rowData) {
     var styles = {
@@ -626,7 +626,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     var bodyHeight = height - headerHeight;
     var bodyStyles = {
       top: headerHeight,
-      maxHeight: tableBodyHeight,
+      height: bodyHeight,
+      //height: tableBodyHeight
+      // maxHeight: tableBodyHeight,
       minHeight: tableBodyHeight
     };
     var contentHeight = 0;
@@ -728,7 +730,8 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     var wheelStyles = {
       position: 'absolute',
       height: contentHeight,
-      minHeight: height,
+      minHeight: tableBodyHeight,
+      maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     var topRowStyles = {
@@ -758,7 +761,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       renderEmpty: renderEmpty,
       addPrefix: prefix,
       loading: !!((_visibleRows$current = visibleRows.current) !== null && _visibleRows$current !== void 0 && _visibleRows$current.length) || loading
-    }), renderScrollbar(), /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+    }), /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
       locale: locale,
       loadAnimation: loadAnimation,
       loading: loading,
@@ -789,7 +792,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     className: classes,
     style: styles,
     ref: tableRef
-  }), showHeader && renderTableHeader(headerCells, rowWidth), children && renderTableBody(bodyCells, rowWidth), showHeader && /*#__PURE__*/_react["default"].createElement(_MouseArea["default"], {
+  }), showHeader && renderTableHeader(headerCells, rowWidth), children && renderTableBody(bodyCells, rowWidth), renderScrollbar(), showHeader && /*#__PURE__*/_react["default"].createElement(_MouseArea["default"], {
     ref: mouseAreaRef,
     addPrefix: prefix,
     headerHeight: headerHeight,

package/lib/utils/useTableDimension.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RowDataType, ElementOffset } from '../@types/common';
+import { ElementOffset, RowDataType } from '../@types/common';
 interface TableDimensionProps<Row, Key> {
     data?: readonly Row[];
     rowHeight: number | ((rowData?: Row) => number);

package/lib/utils/useTableDimension.js

@@ -3,16 +3,16 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
-var _react = require("react");
-var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
+var _resizeObserver = require("@juggle/resize-observer");
 var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
 var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
+var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _react = require("react");
 var _constants = require("../constants");
-var _resizeObserver = require("@juggle/resize-observer");
+var _isNumberOrTrue = _interopRequireDefault(require("./isNumberOrTrue"));
 var _useMount = _interopRequireDefault(require("./useMount"));
 var _useUpdateLayoutEffect = _interopRequireDefault(require("./useUpdateLayoutEffect"));
-var _isNumberOrTrue = _interopRequireDefault(require("./isNumberOrTrue"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 /**
  * The dimension information of the table,
  * including the height, width, scrollable distance and the coordinates of the scroll handle, etc.
@@ -223,7 +223,6 @@ var useTableDimension = function useTableDimension(props) {
     if ((data === null || data === void 0 ? void 0 : data.length) === 0 && autoHeight) {
       return heightProp;
     }
-    console.log(heightProp, headerHeight, contentHeight.current, tableHeight.current);
     return autoHeight ? Math.max(headerHeight + contentHeight.current, minHeight) : heightProp;
   };
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/Table.tsx

@@ -6,40 +6,14 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useImperativeHandle, useReducer, useRef, useState } from 'react';
 
 import CellGroup from './CellGroup';
-import {
-  CELL_PADDING_HEIGHT,
-  EXPANDED_KEY,
-  ROW_HEADER_HEIGHT,
-  ROW_HEIGHT,
-  SCROLLBAR_WIDTH,
-  SORT_TYPE,
-  TREE_DEPTH
-} from './constants';
+import { CELL_PADDING_HEIGHT, EXPANDED_KEY, ROW_HEADER_HEIGHT, ROW_HEIGHT, SCROLLBAR_WIDTH, SORT_TYPE, TREE_DEPTH } from './constants';
 import EmptyMessage from './EmptyMessage';
 import Loader from './Loader';
 import MouseArea from './MouseArea';
 import Row, { RowProps } from './Row';
 import Scrollbar, { ScrollbarInstance } from './Scrollbar';
 import TableContext from './TableContext';
-import {
-  findAllParents,
-  findRowKeys,
-  flattenData,
-  isRTL,
-  isSupportTouchEvent,
-  mergeCells,
-  resetLeftForCells,
-  shouldShowRowByExpanded,
-  useAffix,
-  useCellDescriptor,
-  useClassNames,
-  useControlled,
-  usePosition,
-  useScrollListener,
-  useTableDimension,
-  useTableRows,
-  useUpdateEffect
-} from './utils';
+import { findAllParents, findRowKeys, flattenData, isRTL, isSupportTouchEvent, mergeCells, resetLeftForCells, shouldShowRowByExpanded, useAffix, useCellDescriptor, useClassNames, useControlled, usePosition, useScrollListener, useTableDimension, useTableRows, useUpdateEffect } from './utils';
 
 import type {
   StandardProps,
@@ -593,7 +567,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
   const styles = {
     width: widthProp || 'auto',
-    height: tableBodyHeight ? undefined : getTableHeight(),
+    height: tableBodyHeight ?? getTableHeight(),
     ...style
   };
 
@@ -947,7 +921,10 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     const bodyHeight = height - headerHeight;
     const bodyStyles = {
       top: headerHeight,
-      maxHeight: tableBodyHeight,
+      height: bodyHeight,
+
+      //height: tableBodyHeight
+      // maxHeight: tableBodyHeight,
       minHeight: tableBodyHeight
     };
 
@@ -1069,12 +1046,12 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     const wheelStyles: React.CSSProperties = {
       position: 'absolute',
       height: contentHeight,
-      minHeight: height,
+      minHeight: tableBodyHeight,
+      maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     const topRowStyles = { height: topHideHeight };
     const bottomRowStyles = { height: bottomHideHeight };
-
     return (
       <div
         ref={tableBodyRef}
@@ -1095,7 +1072,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
           addPrefix={prefix}
           loading={!!visibleRows.current?.length || loading}
         />
-        {renderScrollbar()}
+
         <Loader
           locale={locale}
           loadAnimation={loadAnimation}
@@ -1134,6 +1111,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
       >
         {showHeader && renderTableHeader(headerCells, rowWidth)}
         {children && renderTableBody(bodyCells, rowWidth)}
+        {renderScrollbar()}
+
         {showHeader && (
           <MouseArea
             ref={mouseAreaRef}
@@ -1143,7 +1122,6 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
           />
         )}
       </div>
-      {/* {pagination && <Pagination paginationProps={paginationProps} />} */}
     </TableContext.Provider>
   );
 });

package/src/utils/useTableDimension.ts

@@ -1,14 +1,15 @@
-import React, { useRef, useCallback } from 'react';
-import getWidth from 'dom-lib/getWidth';
+import { ResizeObserver } from '@juggle/resize-observer';
 import getHeight from 'dom-lib/getHeight';
 import getOffset from 'dom-lib/getOffset';
+import getWidth from 'dom-lib/getWidth';
+import debounce from 'lodash/debounce';
+import React, { useCallback, useRef } from 'react';
+
+import { ElementOffset, RowDataType } from '../@types/common';
 import { SCROLLBAR_WIDTH } from '../constants';
-import { ResizeObserver } from '@juggle/resize-observer';
+import isNumberOrTrue from './isNumberOrTrue';
 import useMount from './useMount';
 import useUpdateLayoutEffect from './useUpdateLayoutEffect';
-import isNumberOrTrue from './isNumberOrTrue';
-import { RowDataType, ElementOffset } from '../@types/common';
-import debounce from 'lodash/debounce';
 
 interface TableDimensionProps<Row, Key> {
   data?: readonly Row[];
@@ -308,7 +309,6 @@ const useTableDimension = <Row extends RowDataType, Key>(props: TableDimensionPr
     if (data?.length === 0 && autoHeight) {
       return heightProp;
     }
-    console.log(heightProp, headerHeight, contentHeight.current, tableHeight.current);
 
     return autoHeight ? Math.max(headerHeight + contentHeight.current, minHeight) : heightProp;
   };