rsuite-table - npm Package Compare versions

Comparing version 5.0.0-beta.2 to 5.0.0-beta.3

CHANGELOG.md

@@ -0,1 +1,12 @@
+# [5.0.0-beta.3](https://github.com/rsuite/rsuite-table/compare/5.0.0-beta.2...5.0.0-beta.3) (2021-09-17)
+
+
+### Bug Fixes
+
+* **table:** fix cell text does not wrap when `wordWrap` ([#246](https://github.com/rsuite/rsuite-table/issues/246)) ([572b1cd](https://github.com/rsuite/rsuite-table/commit/572b1cd43f0dc56f61b51419ee1cbb34160b3cce))
+* **table:** fix that `flexGrow` and `wordWrap` cannot be used together ([#247](https://github.com/rsuite/rsuite-table/issues/247)) ([f91aa2b](https://github.com/rsuite/rsuite-table/commit/f91aa2bea9e5e1bd8bb4640b8e632a1655b7d4cd))
+* **table:** fix the redundant scroll bar height ([#248](https://github.com/rsuite/rsuite-table/issues/248)) ([26fa42f](https://github.com/rsuite/rsuite-table/commit/26fa42ff653a79b54e81051de52ae6d02356efc4))
+
+
+
 # [5.0.0-beta.2](https://github.com/rsuite/rsuite-table/compare/5.0.0-beta.1...5.0.0-beta.2) (2021-09-16)
@@ -2,0 +13,0 @@

es/utils/useTableDimension.js

@@ -56,4 +56,7 @@ import { useRef, useCallback, useEffect } from 'react';
     if (!autoHeight) {
-      // The purpose of subtracting SCROLLBAR_WIDTH is to keep the scroll bar from blocking the content part.
-      minScrollY.current = -(nextContentHeight - height) - SCROLLBAR_WIDTH;
+      /**
+       *  The purpose of subtracting SCROLLBAR_WIDTH is to keep the scroll bar from blocking the content part.
+       *  But it will only be calculated when there is a horizontal scroll bar (contentWidth > tableWidth).
+       */
+      minScrollY.current = -(nextContentHeight - height) - (contentWidth.current > tableWidth.current ? SCROLLBAR_WIDTH : 0);
     } // If the height of the content area is less than the height of the table, the vertical scroll bar is reset.
@@ -122,5 +125,5 @@
   useMount(function () {
-    calculateTableWidth();
     calculateTableContextHeight();
     calculateTableContentWidth();
+    calculateTableWidth();
     setOffsetByAffix();
@@ -130,2 +133,3 @@ bindElementResize(tableRef.current, debounce(calculateTableWidth, 400));
   useUpdateLayoutEffect(function () {
+    calculateTableWidth();
     calculateTableContextHeight();
@@ -132,0 +136,0 @@ calculateTableContentWidth();

es/utils/useTableRows.js

 import { useState, useCallback, useRef } from 'react';
 import { getHeight } from 'dom-lib';
-import useUpdateEffect from './useUpdateEffect';
+import useUpdateLayoutEffect from './useUpdateLayoutEffect';
 import useMount from './useMount';
@@ -58,6 +58,12 @@
   useMount(function () {
-    calculateRowMaxHeight();
+    setTimeout(calculateRowMaxHeight, 1);
   });
-  useUpdateEffect(function () {
-    calculateRowMaxHeight();
+  useUpdateLayoutEffect(function () {
+    /**
+     * After the data is updated, the height of the cell DOM needs to be re-acquired,
+     * and what is often obtained is not the latest DOM that has been rendered.
+     * So use `setTimeout` to delay obtaining the height of the cell DOM.
+     * TODO: To be improved
+     */
+    setTimeout(calculateRowMaxHeight, 1);
   }, [data]);
@@ -64,0 +70,0 @@ return {

lib/utils/useTableDimension.js

@@ -72,4 +72,7 @@ "use strict";
     if (!autoHeight) {
-      // The purpose of subtracting SCROLLBAR_WIDTH is to keep the scroll bar from blocking the content part.
-      minScrollY.current = -(nextContentHeight - height) - _constants.SCROLLBAR_WIDTH;
+      /**
+       *  The purpose of subtracting SCROLLBAR_WIDTH is to keep the scroll bar from blocking the content part.
+       *  But it will only be calculated when there is a horizontal scroll bar (contentWidth > tableWidth).
+       */
+      minScrollY.current = -(nextContentHeight - height) - (contentWidth.current > tableWidth.current ? _constants.SCROLLBAR_WIDTH : 0);
     } // If the height of the content area is less than the height of the table, the vertical scroll bar is reset.
@@ -138,5 +141,5 @@
   (0, _useMount["default"])(function () {
-    calculateTableWidth();
     calculateTableContextHeight();
     calculateTableContentWidth();
+    calculateTableWidth();
     setOffsetByAffix();
@@ -146,2 +149,3 @@ (0, _elementResizeEvent["default"])(tableRef.current, (0, _debounce["default"])(calculateTableWidth, 400));
   (0, _useUpdateLayoutEffect["default"])(function () {
+    calculateTableWidth();
     calculateTableContextHeight();
@@ -148,0 +152,0 @@ calculateTableContentWidth();

lib/utils/useTableRows.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _useUpdateEffect = _interopRequireDefault(require("./useUpdateEffect"));
+var _useUpdateLayoutEffect = _interopRequireDefault(require("./useUpdateLayoutEffect"));
 
@@ -69,6 +69,12 @@ var _useMount = _interopRequireDefault(require("./useMount"));
   (0, _useMount["default"])(function () {
-    calculateRowMaxHeight();
+    setTimeout(calculateRowMaxHeight, 1);
   });
-  (0, _useUpdateEffect["default"])(function () {
-    calculateRowMaxHeight();
+  (0, _useUpdateLayoutEffect["default"])(function () {
+    /**
+     * After the data is updated, the height of the cell DOM needs to be re-acquired,
+     * and what is often obtained is not the latest DOM that has been rendered.
+     * So use `setTimeout` to delay obtaining the height of the cell DOM.
+     * TODO: To be improved
+     */
+    setTimeout(calculateRowMaxHeight, 1);
   }, [data]);
@@ -75,0 +81,0 @@ return {

package.json

 {
   "name": "rsuite-table",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.3",
   "description": "A React table component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/utils/useTableDimension.ts

@@ -84,4 +84,9 @@ import React, { useRef, useCallback, useEffect } from 'react';
     if (!autoHeight) {
-      // The purpose of subtracting SCROLLBAR_WIDTH is to keep the scroll bar from blocking the content part.
-      minScrollY.current = -(nextContentHeight - height) - SCROLLBAR_WIDTH;
+      /**
+       *  The purpose of subtracting SCROLLBAR_WIDTH is to keep the scroll bar from blocking the content part.
+       *  But it will only be calculated when there is a horizontal scroll bar (contentWidth > tableWidth).
+       */
+      minScrollY.current =
+        -(nextContentHeight - height) -
+        (contentWidth.current > tableWidth.current ? SCROLLBAR_WIDTH : 0);
     }
@@ -162,6 +167,7 @@
   useMount(() => {
-    calculateTableWidth();
     calculateTableContextHeight();
     calculateTableContentWidth();
+    calculateTableWidth();
     setOffsetByAffix();
+
     bindElementResize(tableRef.current, debounce(calculateTableWidth, 400));
@@ -171,2 +177,3 @@ });
   useUpdateLayoutEffect(() => {
+    calculateTableWidth();
     calculateTableContextHeight();
@@ -173,0 +180,0 @@ calculateTableContentWidth();

src/utils/useTableRows.ts

 import { useState, useCallback, useRef } from 'react';
 import { getHeight } from 'dom-lib';
-import useUpdateEffect from './useUpdateEffect';
+import useUpdateLayoutEffect from './useUpdateLayoutEffect';
 import useMount from './useMount';
@@ -56,7 +56,13 @@ import { RowDataType } from '../@types/common';
   useMount(() => {
-    calculateRowMaxHeight();
+    setTimeout(calculateRowMaxHeight, 1);
   });
 
-  useUpdateEffect(() => {
-    calculateRowMaxHeight();
+  useUpdateLayoutEffect(() => {
+    /**
+     * After the data is updated, the height of the cell DOM needs to be re-acquired,
+     * and what is often obtained is not the latest DOM that has been rendered.
+     * So use `setTimeout` to delay obtaining the height of the cell DOM.
+     * TODO: To be improved
+     */
+    setTimeout(calculateRowMaxHeight, 1);
   }, [data]);
@@ -63,0 +69,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

514885

increased by0.47%

Lines of code

11417

increased by0.28%

No dependency changes