rsuite-table - npm Package Compare versions

Comparing version 5.15.0 to 5.16.0

CHANGELOG.md

@@ -0,1 +1,10 @@
+# [5.16.0](https://github.com/rsuite/rsuite-table/compare/5.15.0...5.16.0) (2023-11-09)
+
+
+### Bug Fixes
+
+* **Table:** fix the compatibility issue with verticalAlign ([#435](https://github.com/rsuite/rsuite-table/issues/435)) ([2ed844c](https://github.com/rsuite/rsuite-table/commit/2ed844c67bcb440b55c652de9acc994c3badd108))
+
+
+
 # [5.15.0](https://github.com/rsuite/rsuite-table/compare/5.14.0...5.15.0) (2023-10-26)
@@ -2,0 +11,0 @@

es/Cell.d.ts

@@ -12,4 +12,4 @@ import React from 'react';
 export interface InnerCellProps extends Omit<CellProps, 'children'> {
-    align?: 'left' | 'center' | 'right';
-    verticalAlign?: 'top' | 'middle' | 'bottom';
+    align?: React.CSSProperties['justifyContent'];
+    verticalAlign?: React.CSSProperties['alignItems'] | 'top' | 'middle' | 'bottom';
     isHeaderCell?: boolean;
@@ -16,0 +16,0 @@ width?: number;

es/Cell.js

@@ -11,3 +11,3 @@ 'use client';
 import { LAYER_WIDTH, ROW_HEADER_HEIGHT, ROW_HEIGHT } from './constants';
-import { useClassNames } from './utils';
+import { useClassNames, convertToFlex } from './utils';
 import TableContext from './TableContext';
@@ -83,11 +83,9 @@ import ArrowRight from '@rsuite/icons/ArrowRight';
   var paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
-  var contentStyles = _extends({}, style, (_extends3 = {
+  var contentStyles = _extends({}, convertToFlex({
+    align: align,
+    verticalAlign: verticalAlign
+  }), style, (_extends3 = {
     width: fullText ? width - 1 : width,
-    height: nextHeight,
-    textAlign: align
+    height: nextHeight
   }, _extends3[paddingKey] = isTreeCol ? depth * LAYER_WIDTH + 10 : (style === null || style === void 0 ? void 0 : style[paddingKey]) || (style === null || style === void 0 ? void 0 : style.padding), _extends3));
-  if (verticalAlign) {
-    contentStyles.display = 'table-cell';
-    contentStyles.verticalAlign = verticalAlign;
-  }
   if (wordWrap) {
@@ -136,4 +134,4 @@ contentStyles.wordBreak = typeof wordWrap === 'boolean' ? 'break-all' : wordWrap;
 Cell.propTypes = {
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  align: PropTypes.string,
+  verticalAlign: PropTypes.string,
   className: PropTypes.string,
@@ -140,0 +138,0 @@ classPrefix: PropTypes.string,

es/Column.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
     /** Alignment */
-    align?: 'left' | 'center' | 'right';
+    align?: React.CSSProperties['justifyContent'];
     /** Merges column cells to merge when the dataKey value for the merged column is null or undefined. */
@@ -16,3 +16,3 @@ colSpan?: number;
     /** Vertical alignment */
-    verticalAlign?: 'top' | 'middle' | 'bottom';
+    verticalAlign?: React.CSSProperties['alignItems'] | 'top' | 'middle' | 'bottom';
     /** Column width */
@@ -19,0 +19,0 @@ width?: number;

es/Column.js

@@ -8,4 +8,4 @@ 'use client';
 var propTypes = {
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  align: PropTypes.string,
+  verticalAlign: PropTypes.string,
   width: PropTypes.number,
@@ -12,0 +12,0 @@ fixed: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['left', 'right'])]),

es/ColumnGroup.js

@@ -7,3 +7,3 @@ 'use client';
 import PropTypes from 'prop-types';
-import { useClassNames } from './utils';
+import { useClassNames, convertToFlex } from './utils';
 var ColumnGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -33,6 +33,6 @@ var header = props.header,
   var classes = merge(className, withClassPrefix());
-  var contentStyles = _extends({}, styles, {
-    textAlign: align,
-    verticalAlign: verticalAlign
-  });
+  var contentStyles = _extends({}, convertToFlex({
+    verticalAlign: verticalAlign,
+    align: align
+  }), styles);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -39,0 +39,0 @@ ref: ref,

es/utils/index.d.ts

@@ -30,2 +30,3 @@ export { default as prefix } from './prefix';
 export { default as isSupportTouchEvent } from './isSupportTouchEvent';
+export { default as convertToFlex } from './convertToFlex';
 export { default as defer } from './defer';

es/utils/index.js

@@ -31,2 +31,3 @@ 'use client';
 export { default as isSupportTouchEvent } from './isSupportTouchEvent';
+export { default as convertToFlex } from './convertToFlex';
 export { default as defer } from './defer';

lib/Cell.d.ts

@@ -12,4 +12,4 @@ import React from 'react';
 export interface InnerCellProps extends Omit<CellProps, 'children'> {
-    align?: 'left' | 'center' | 'right';
-    verticalAlign?: 'top' | 'middle' | 'bottom';
+    align?: React.CSSProperties['justifyContent'];
+    verticalAlign?: React.CSSProperties['alignItems'] | 'top' | 'middle' | 'bottom';
     isHeaderCell?: boolean;
@@ -16,0 +16,0 @@ width?: number;

lib/Cell.js

@@ -89,11 +89,9 @@ 'use client';
   var paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
-  var contentStyles = (0, _extends4["default"])({}, style, (_extends3 = {
+  var contentStyles = (0, _extends4["default"])({}, (0, _utils.convertToFlex)({
+    align: align,
+    verticalAlign: verticalAlign
+  }), style, (_extends3 = {
     width: fullText ? width - 1 : width,
-    height: nextHeight,
-    textAlign: align
+    height: nextHeight
   }, _extends3[paddingKey] = isTreeCol ? depth * _constants.LAYER_WIDTH + 10 : (style === null || style === void 0 ? void 0 : style[paddingKey]) || (style === null || style === void 0 ? void 0 : style.padding), _extends3));
-  if (verticalAlign) {
-    contentStyles.display = 'table-cell';
-    contentStyles.verticalAlign = verticalAlign;
-  }
   if (wordWrap) {
@@ -142,4 +140,4 @@ contentStyles.wordBreak = typeof wordWrap === 'boolean' ? 'break-all' : wordWrap;
 Cell.propTypes = {
-  align: _propTypes["default"].oneOf(['left', 'center', 'right']),
-  verticalAlign: _propTypes["default"].oneOf(['top', 'middle', 'bottom']),
+  align: _propTypes["default"].string,
+  verticalAlign: _propTypes["default"].string,
   className: _propTypes["default"].string,
@@ -146,0 +144,0 @@ classPrefix: _propTypes["default"].string,

lib/Column.d.ts

@@ -5,3 +5,3 @@ /// <reference types="react" />
     /** Alignment */
-    align?: 'left' | 'center' | 'right';
+    align?: React.CSSProperties['justifyContent'];
     /** Merges column cells to merge when the dataKey value for the merged column is null or undefined. */
@@ -16,3 +16,3 @@ colSpan?: number;
     /** Vertical alignment */
-    verticalAlign?: 'top' | 'middle' | 'bottom';
+    verticalAlign?: React.CSSProperties['alignItems'] | 'top' | 'middle' | 'bottom';
     /** Column width */
@@ -19,0 +19,0 @@ width?: number;

lib/Column.js

@@ -13,4 +13,4 @@ 'use client';
 var propTypes = {
-  align: _propTypes["default"].oneOf(['left', 'center', 'right']),
-  verticalAlign: _propTypes["default"].oneOf(['top', 'middle', 'bottom']),
+  align: _propTypes["default"].string,
+  verticalAlign: _propTypes["default"].string,
   width: _propTypes["default"].number,
@@ -17,0 +17,0 @@ fixed: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['left', 'right'])]),

lib/ColumnGroup.js

@@ -37,6 +37,6 @@ 'use client';
   var classes = merge(className, withClassPrefix());
-  var contentStyles = (0, _extends2["default"])({}, styles, {
-    textAlign: align,
-    verticalAlign: verticalAlign
-  });
+  var contentStyles = (0, _extends2["default"])({}, (0, _utils.convertToFlex)({
+    verticalAlign: verticalAlign,
+    align: align
+  }), styles);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
@@ -43,0 +43,0 @@ ref: ref,

lib/utils/index.d.ts

@@ -30,2 +30,3 @@ export { default as prefix } from './prefix';
 export { default as isSupportTouchEvent } from './isSupportTouchEvent';
+export { default as convertToFlex } from './convertToFlex';
 export { default as defer } from './defer';

lib/utils/index.js

@@ -6,3 +6,3 @@ 'use client';
 exports.__esModule = true;
-exports.useUpdateLayoutEffect = exports.useUpdateEffect = exports.useTableRows = exports.useTableDimension = exports.useScrollListener = exports.usePosition = exports.useMount = exports.useIsomorphicLayoutEffect = exports.useControlled = exports.useClassNames = exports.useCellDescriptor = exports.useAffix = exports.translateDOMPositionXY = exports.toggleClass = exports.toggle = exports.shouldShowRowByExpanded = exports.resetLeftForCells = exports.requestAnimationTimeout = exports.prefix = exports.mergeRefs = exports.mergeCells = exports.isSupportTouchEvent = exports.isRTL = exports.isNumberOrTrue = exports.getTotalByColumns = exports.getTableColumns = exports.flattenData = exports.findRowKeys = exports.findAllParents = exports.defer = exports.cancelAnimationTimeout = void 0;
+exports.useUpdateLayoutEffect = exports.useUpdateEffect = exports.useTableRows = exports.useTableDimension = exports.useScrollListener = exports.usePosition = exports.useMount = exports.useIsomorphicLayoutEffect = exports.useControlled = exports.useClassNames = exports.useCellDescriptor = exports.useAffix = exports.translateDOMPositionXY = exports.toggleClass = exports.toggle = exports.shouldShowRowByExpanded = exports.resetLeftForCells = exports.requestAnimationTimeout = exports.prefix = exports.mergeRefs = exports.mergeCells = exports.isSupportTouchEvent = exports.isRTL = exports.isNumberOrTrue = exports.getTotalByColumns = exports.getTableColumns = exports.flattenData = exports.findRowKeys = exports.findAllParents = exports.defer = exports.convertToFlex = exports.cancelAnimationTimeout = void 0;
 var _prefix = _interopRequireDefault(require("./prefix"));
@@ -67,3 +67,5 @@ exports.prefix = _prefix["default"];
 exports.isSupportTouchEvent = _isSupportTouchEvent["default"];
+var _convertToFlex = _interopRequireDefault(require("./convertToFlex"));
+exports.convertToFlex = _convertToFlex["default"];
 var _defer = _interopRequireDefault(require("./defer"));
 exports.defer = _defer["default"];

package.json

 {
   "name": "rsuite-table",
-  "version": "5.15.0",
+  "version": "5.16.0",
   "description": "A React table component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/utils/index.ts

@@ -30,2 +30,3 @@ export { default as prefix } from './prefix';
 export { default as isSupportTouchEvent } from './isSupportTouchEvent';
+export { default as convertToFlex } from './convertToFlex';
 export { default as defer } from './defer';

No alert changes

Improved metrics

Total package byte prevSize

645271

increased by0.69%

Number of package files

287

increased by1.77%

Lines of code

13503

increased by1%

No dependency changes