refactor: use shared value and renderability guards

package.json

@@ -52,7 +52,7 @@
   "dependencies": {
     "@rc-component/context": "^2.0.1",
     "@rc-component/resize-observer": "^1.0.0",
-    "@rc-component/util": "^1.11.1",
+    "@rc-component/util": "^1.13.0",
     "@rc-component/virtual-list": "^1.0.1",
     "clsx": "^2.1.1"
   },

src/Cell/useCellRender.ts

@@ -1,8 +1,7 @@
-import { get as getValue, isEqual, useMemo, warning } from '@rc-component/util';
+import { get as getValue, isEqual, isNonNullable, useMemo, warning } from '@rc-component/util';
 import * as React from 'react';
 import PerfContext from '../context/PerfContext';
 import type { CellType, ColumnType, DataIndex, RenderedCell } from '../interface';
-import { validateValue } from '../utils/valueUtil';
 import { useImmutableMark } from '../context/TableContext';
 
 function isRenderCell<RecordType>(
@@ -26,7 +25,7 @@ export default function useCellRender<RecordType>(
   // ======================== Render ========================
   const retData = useMemo<[React.ReactNode, CellType<RecordType>] | [React.ReactNode]>(
     () => {
-      if (validateValue(children)) {
+      if (isNonNullable(children)) {
         return [children];
       }
 

src/Table.tsx

@@ -31,6 +31,8 @@ import {
   get as getValue,
   getTargetScrollBarSize,
   isEqual,
+  isNonNullable,
+  isReactRenderable,
   pickAttrs,
   useEvent,
   useLayoutEffect,
@@ -76,7 +78,7 @@ import Panel from './Panel';
 import StickyScrollBar from './stickyScrollBar';
 import Column from './sugar/Column';
 import ColumnGroup from './sugar/ColumnGroup';
-import { getColumnsKey, validateValue, validNumberValue } from './utils/valueUtil';
+import { getColumnsKey, validNumberValue } from './utils/valueUtil';
 
 export type CompareProps<T extends React.ComponentType<any>> = (
   prevProps: Readonly<React.ComponentProps<T>>,
@@ -397,8 +399,8 @@ const Table = <RecordType extends DefaultRecordType>(
   const pureColWidths = colsKeys.map(columnKey => colsWidths.get(columnKey));
   const colWidths = React.useMemo(() => pureColWidths, [pureColWidths.join('_')]);
   const stickyOffsets = useStickyOffsets(colWidths, flattenColumns);
-  const fixHeader = scroll && validateValue(scroll.y);
-  const horizonScroll = (scroll && validateValue(mergedScrollX)) || Boolean(expandableConfig.fixed);
+  const fixHeader = scroll && isNonNullable(scroll.y);
+  const horizonScroll = (scroll && isNonNullable(mergedScrollX)) || Boolean(expandableConfig.fixed);
   const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
 
   // Sticky
@@ -675,10 +677,9 @@ const Table = <RecordType extends DefaultRecordType>(
     <ColGroup colWidths={flattenColumns.map(({ width }) => width)} columns={flattenColumns} />
   );
 
-  const captionElement =
-    caption !== null && caption !== undefined ? (
-      <caption className={`${prefixCls}-caption`}>{caption}</caption>
-    ) : undefined;
+  const captionElement = isNonNullable(caption) ? (
+    <caption className={`${prefixCls}-caption`}>{caption}</caption>
+  ) : undefined;
 
   const dataProps = pickAttrs(props, { data: true });
   const ariaProps = pickAttrs(props, { aria: true });
@@ -730,7 +731,7 @@ const Table = <RecordType extends DefaultRecordType>(
             {captionElement}
             {bodyColGroup}
             {bodyTable}
-            {!fixFooter && summaryNode && (
+            {!fixFooter && isReactRenderable(summaryNode) && (
               <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns}>
                 {summaryNode}
               </Footer>
@@ -813,7 +814,7 @@ const Table = <RecordType extends DefaultRecordType>(
           {bodyColGroup}
           {showHeader !== false && <Header {...headerProps} {...columnContext} />}
           {bodyTable}
-          {summaryNode && (
+          {isReactRenderable(summaryNode) && (
             <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns}>
               {summaryNode}
             </Footer>

src/utils/valueUtil.tsx

@@ -33,10 +33,6 @@ export function getColumnsKey<T = any>(columns: readonly GetColumnKeyColumn<T>[]
   return columnKeys;
 }
 
-export function validateValue<T>(val: T) {
-  return val !== null && val !== undefined;
-}
-
 export function validNumberValue(value: any) {
   return typeof value === 'number' && !Number.isNaN(value);
 }