refactor: table

components/new-table/Body/BodyRow.tsx

@@ -70,7 +70,7 @@ export default defineComponent<BodyRowProps<unknown>>({
     };
 
     // =========================== onRow ===========================
-    let additionalProps = computed<Record<string, any>>(
+    const additionalProps = computed<Record<string, any>>(
       () => props.customRow?.(props.record, props.index) || {},
     );
 
@@ -84,7 +84,7 @@ export default defineComponent<BodyRowProps<unknown>>({
       }
     };
 
-    let computeRowClassName = computed(() => {
+    const computeRowClassName = computed(() => {
       const { record, index, indent } = props;
       const { rowClassName } = bodyContext;
       if (typeof rowClassName === 'string') {

components/new-table/Body/ExpandedRow.tsx

@@ -1,4 +1,4 @@
-import { CustomizeComponent } from '../interface';
+import type { CustomizeComponent } from '../interface';
 import Cell from '../Cell';
 import { defineComponent } from 'vue';
 import { useInjectTable } from '../context/TableContext';

components/new-table/Body/MeasureCell.tsx

@@ -1,5 +1,5 @@
 import VCResizeObserver from 'ant-design-vue/es/vc-resize-observer';
-import { Key } from '../interface';
+import type { Key } from '../interface';
 
 export interface MeasureCellProps {
   columnKey: Key;

components/new-table/Cell/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'ant-design-vue/es/_util/classNames';
 import { isValidElement, parseStyleText } from 'ant-design-vue/es/_util/props-util';
-import { CSSProperties, defineComponent, HTMLAttributes } from 'vue';
+import type { CSSProperties, HTMLAttributes } from 'vue';
+import { defineComponent } from 'vue';
 
 import type {
   DataIndex,

components/new-table/FixedHolder/index.tsx

@@ -1,6 +1,7 @@
 import type { HeaderProps } from '../Header/Header';
 import ColGroup from '../ColGroup';
 import type { ColumnsType, ColumnType, DefaultRecordType } from '../interface';
+import type { Ref } from 'vue';
 import {
   computed,
   defineComponent,
@@ -8,7 +9,6 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
-  Ref,
   toRef,
   watchEffect,
 } from 'vue';
@@ -107,11 +107,11 @@ export default defineComponent<FixedHeaderProps<DefaultRecordType>>({
         }),
       };
 
-      columnsWithScrollbar.value = combinationScrollBarSize
+      columnsWithScrollbar.value = combinationScrollBarSize.value
         ? [...props.columns, ScrollBarColumn]
         : props.columns;
 
-      flattenColumnsWithScrollbar.value = combinationScrollBarSize
+      flattenColumnsWithScrollbar.value = combinationScrollBarSize.value
         ? [...props.flattenColumns, ScrollBarColumn]
         : props.flattenColumns;
     });

components/new-table/Footer/Summary.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, FunctionalComponent, onBeforeUnmount, watchEffect } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, watchEffect } from 'vue';
 import { useInjectTable } from '../context/TableContext';
 import Cell from './Cell';
 import Row from './Row';
@@ -7,15 +7,12 @@ export interface SummaryProps {
   fixed?: boolean | 'top' | 'bottom';
 }
 
-export interface SummaryFC extends FunctionalComponent<SummaryProps> {
-  Row: typeof Row;
-  Cell: typeof Cell;
-}
-
 let indexGuid = 0;
 const Summary = defineComponent<SummaryProps>({
   props: ['fixed'] as any,
   name: 'Summary',
+  Row,
+  Cell,
   setup(props, { slots }) {
     const tableContext = useInjectTable();
     const uniKey = `table-summary-uni-key-${++indexGuid}`;

components/new-table/Footer/index.tsx

@@ -1,7 +1,8 @@
 import Summary from './Summary';
 import type { DefaultRecordType, StickyOffsets } from '../interface';
 import { computed, defineComponent, reactive, toRef } from 'vue';
-import { FlattenColumns, useProvideSummary } from '../context/SummaryContext';
+import type { FlattenColumns } from '../context/SummaryContext';
+import { useProvideSummary } from '../context/SummaryContext';
 import { useInjectTable } from '../context/TableContext';
 
 export interface FooterProps<RecordType = DefaultRecordType> {
@@ -10,8 +11,8 @@ export interface FooterProps<RecordType = DefaultRecordType> {
 }
 
 export default defineComponent({
-  props: ['stickyOffsets', 'flattenColumns'],
   name: 'Footer',
+  props: ['stickyOffsets', 'flattenColumns'],
   setup(props, { slots }) {
     const tableContext = useInjectTable();
     useProvideSummary(

components/new-table/Header/Header.tsx

@@ -20,7 +20,7 @@ function parseHeaderRows<RecordType>(
   function fillRowCells(
     columns: ColumnsType<RecordType>,
     colIndex: number,
-    rowIndex: number = 0,
+    rowIndex = 0,
   ): number[] {
     // Init rows
     rows[rowIndex] = rows[rowIndex] || [];
@@ -35,7 +35,7 @@ function parseHeaderRows<RecordType>(
         colStart: currentColIndex,
       };
 
-      let colSpan: number = 1;
+      let colSpan = 1;
 
       const subColumns = (column as ColumnGroupType<RecordType>).children;
       if (subColumns && subColumns.length > 0) {

components/new-table/Header/HeaderRow.tsx

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import Cell from '../Cell';
 import { useInjectTable } from '../context/TableContext';
-import {
+import type {
   CellType,
   StickyOffsets,
   ColumnType,

components/new-table/Table.tsx

@@ -29,9 +29,9 @@ import { getCellFixedInfo } from './utils/fixUtil';
 import StickyScrollBar from './stickyScrollBar';
 import useSticky from './hooks/useSticky';
 import FixedHolder from './FixedHolder';
+import type { CSSProperties } from 'vue';
 import {
   computed,
-  CSSProperties,
   defineComponent,
   nextTick,
   onMounted,
@@ -49,7 +49,7 @@ import { toPx } from '../_util/util';
 import isVisible from '../vc-util/Dom/isVisible';
 import { getTargetScrollBarSize } from '../_util/getScrollBarSize';
 import classNames from '../_util/classNames';
-import { EventHandler } from '../_util/EventInterface';
+import type { EventHandler } from '../_util/EventInterface';
 import VCResizeObserver from '../vc-resize-observer';
 import { useProvideTable } from './context/TableContext';
 import { useProvideBody } from './context/BodyContext';
@@ -262,9 +262,9 @@ export default defineComponent<TableProps>({
     };
 
     // Scroll
-    let scrollXStyle = ref<CSSProperties>({});
+    const scrollXStyle = ref<CSSProperties>({});
-    let scrollYStyle = ref<CSSProperties>({});
+    const scrollYStyle = ref<CSSProperties>({});
-    let scrollTableStyle = ref<CSSProperties>({});
+    const scrollTableStyle = ref<CSSProperties>({});
 
     watchEffect(() => {
       if (fixHeader.value) {
@@ -356,7 +356,7 @@ export default defineComponent<TableProps>({
     };
 
     const onFullTableResize = ({ width }) => {
-      if (width !== componentWidth) {
+      if (width !== componentWidth.value) {
         triggerOnScroll();
         componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width;
       }
@@ -561,7 +561,7 @@ export default defineComponent<TableProps>({
               >
                 {bodyColGroup}
                 {bodyTable}
-                {!fixFooter && summaryNode && (
+                {!fixFooter.value && summaryNode && (
                   <Footer stickyOffsets={stickyOffsets} flattenColumns={flattenColumns.value}>
                     {summaryNode}
                   </Footer>

components/new-table/context/BodyContext.tsx

@@ -1,4 +1,4 @@
-import {
+import type {
   ColumnType,
   DefaultRecordType,
   ColumnsType,
@@ -9,7 +9,8 @@ import {
   TriggerEventHandler,
   ExpandedRowRender,
 } from '../interface';
-import { inject, InjectionKey, provide } from 'vue';
+import type { InjectionKey } from 'vue';
+import { inject, provide } from 'vue';
 
 export interface BodyContextProps<RecordType = DefaultRecordType> {
   rowClassName: string | RowClassName<RecordType>;

components/new-table/context/ResizeContext.tsx

@@ -1,5 +1,6 @@
-import { inject, InjectionKey, provide } from 'vue';
+import type { InjectionKey } from 'vue';
-import { Key } from '../interface';
+import { inject, provide } from 'vue';
+import type { Key } from '../interface';
 
 interface ResizeContextProps {
   onColumnResize: (columnKey: Key, width: number) => void;

components/new-table/context/SummaryContext.tsx

@@ -1,5 +1,6 @@
-import { inject, InjectionKey, provide } from 'vue';
+import type { InjectionKey } from 'vue';
-import { ColumnType, StickyOffsets } from '../interface';
+import { inject, provide } from 'vue';
+import type { ColumnType, StickyOffsets } from '../interface';
 
 export type FlattenColumns<RecordType> = readonly (ColumnType<RecordType> & {
   scrollbar?: boolean;

components/new-table/context/TableContext.tsx

@@ -1,6 +1,7 @@
-import { inject, InjectionKey, provide } from 'vue';
+import type { InjectionKey } from 'vue';
-import { GetComponent } from '../interface';
+import { inject, provide } from 'vue';
-import { FixedInfo } from '../utils/fixUtil';
+import type { GetComponent } from '../interface';
+import type { FixedInfo } from '../utils/fixUtil';
 
 export interface TableContextProps {
   // Table context

components/new-table/hooks/useColumns.tsx

@@ -1,5 +1,6 @@
 import { warning } from 'ant-design-vue/es/vc-util/warning';
-import { computed, ComputedRef, Ref, watchEffect } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import { computed, watchEffect } from 'vue';
 import type {
   ColumnsType,
   ColumnType,

components/new-table/stickyScrollBar.tsx

@@ -1,8 +1,9 @@
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, Ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import addEventListenerWrap from '../vc-util/Dom/addEventListener';
 import { getOffset } from '../vc-util/Dom/css';
 import classNames from '../_util/classNames';
-import { MouseEventHandler } from '../_util/EventInterface';
+import type { MouseEventHandler } from '../_util/EventInterface';
 import getScrollBarSize from '../_util/getScrollBarSize';
 import { useInjectTable } from './context/TableContext';
 import { useLayoutState } from './hooks/useFrame';
@@ -188,7 +189,7 @@ export default defineComponent<StickyScrollBarProps>({
         <div
           style={{
             height: `${scrollbarSize}px`,
-            width: `${bodyWidth}px`,
+            width: `${bodyWidth.value}px`,
             bottom: `${props.offsetScroll}px`,
           }}
           class={`${prefixCls}-sticky-scroll`}

components/new-table/sugar/Column.tsx

@@ -1,5 +1,5 @@
-import { FunctionalComponent } from 'vue';
+import type { FunctionalComponent } from 'vue';
-import { ColumnType } from '../interface';
+import type { ColumnType } from '../interface';
 
 export type ColumnProps<RecordType> = ColumnType<RecordType>;
 

components/new-table/sugar/ColumnGroup.tsx

@@ -1,5 +1,5 @@
-import { ColumnType } from '../interface';
+import type { ColumnType } from '../interface';
-import { FunctionalComponent } from 'vue';
+import type { FunctionalComponent } from 'vue';
 /* istanbul ignore next */
 /**
  * This is a syntactic sugar for `columns` prop.

components/new-table/utils/expandUtil.tsx

@@ -1,4 +1,4 @@
-import { RenderExpandIconProps, Key, GetRowKey } from '../interface';
+import type { RenderExpandIconProps, Key, GetRowKey } from '../interface';
 
 export function renderExpandIcon<RecordType>({
   prefixCls,

components/new-table/utils/valueUtil.tsx

@@ -1,4 +1,4 @@
-import { Key, DataIndex } from '../interface';
+import type { Key, DataIndex } from '../interface';
 
 const INTERNAL_KEY_PREFIX = 'RC_TABLE_KEY';