From a64ed0d623f766cd0f0a1968bbcd5dc3320db998 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Mon, 6 Sep 2021 10:31:54 +0800 Subject: [PATCH] refactor: table --- components/checkbox/Checkbox.tsx | 3 +- components/locale-provider/index.tsx | 2 +- components/table/Column.tsx | 2 +- components/table/ColumnGroup.tsx | 2 +- components/table/ExpandIcon.tsx | 2 +- components/table/Table.tsx | 96 ++++++++++++-- .../table/hooks/useFilter/FilterDropdown.tsx | 14 +- components/table/hooks/useFilter/index.tsx | 11 +- components/table/hooks/usePagination.ts | 2 +- components/table/hooks/useSelection.tsx | 32 ++--- components/table/hooks/useSorter.tsx | 14 +- components/table/hooks/useTitleColumns.tsx | 4 +- components/table/index.tsx | 6 +- components/table/interface.tsx | 11 +- components/vc-table/Body/BodyRow.tsx | 4 +- components/vc-table/Body/MeasureCell.tsx | 2 +- components/vc-table/Cell/index.tsx | 4 +- components/vc-table/FixedHolder/index.tsx | 2 +- components/vc-table/Header/Header.tsx | 2 +- components/vc-table/Table.tsx | 25 ++-- components/vc-table/hooks/useColumns.tsx | 2 +- examples/App.vue | 122 ++++++++++++++---- 22 files changed, 260 insertions(+), 104 deletions(-) diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index 885e53e36..4b61b5d28 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -1,4 +1,5 @@ -import { defineComponent, ExtractPropTypes, inject, nextTick } from 'vue'; +import type { ExtractPropTypes } from 'vue'; +import { defineComponent, inject, nextTick } from 'vue'; import PropTypes from '../_util/vue-types'; import classNames from '../_util/classNames'; import VcCheckbox from '../vc-checkbox'; diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx index aebba465a..ef57a0dd4 100644 --- a/components/locale-provider/index.tsx +++ b/components/locale-provider/index.tsx @@ -9,7 +9,7 @@ import type { ValidateMessages } from '../form/interface'; import type { TransferLocale } from '../transfer'; import type { PickerLocale as DatePickerLocale } from '../date-picker/generatePicker'; import type { PaginationLocale } from '../pagination/Pagination'; -import { TableLocale } from '../table/interface'; +import type { TableLocale } from '../table/interface'; interface TransferLocaleForEmpty { description: string; diff --git a/components/table/Column.tsx b/components/table/Column.tsx index a478812ed..890072b7d 100644 --- a/components/table/Column.tsx +++ b/components/table/Column.tsx @@ -1,5 +1,5 @@ import { defineComponent } from 'vue'; -import { ColumnType } from './interface'; +import type { ColumnType } from './interface'; export type ColumnProps = ColumnType; export default defineComponent({ diff --git a/components/table/ColumnGroup.tsx b/components/table/ColumnGroup.tsx index 956f26992..b1d03ae0a 100644 --- a/components/table/ColumnGroup.tsx +++ b/components/table/ColumnGroup.tsx @@ -1,5 +1,5 @@ import { defineComponent } from 'vue'; -import { ColumnGroupProps } from '../vc-table/sugar/ColumnGroup'; +import type { ColumnGroupProps } from '../vc-table/sugar/ColumnGroup'; export default defineComponent>({ name: 'ATableColumnGroup', diff --git a/components/table/ExpandIcon.tsx b/components/table/ExpandIcon.tsx index 3cdf015ff..6f877473f 100644 --- a/components/table/ExpandIcon.tsx +++ b/components/table/ExpandIcon.tsx @@ -1,5 +1,5 @@ import classNames from '../_util/classNames'; -import { TableLocale } from './interface'; +import type { TableLocale } from './interface'; interface DefaultExpandIconProps { prefixCls: string; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 958a3b32a..0c3bd182b 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -1,12 +1,14 @@ import RcTable, { Summary } from '../vc-table'; -import { TableProps as RcTableProps, INTERNAL_HOOKS } from '../vc-table/Table'; -import Spin, { SpinProps } from '../spin'; +import type { TableProps as RcTableProps } from '../vc-table/Table'; +import { INTERNAL_HOOKS } from '../vc-table/Table'; +import type { SpinProps } from '../spin'; +import Spin from '../spin'; import Pagination from '../pagination'; -import { TooltipProps } from '../tooltip'; +import type { TooltipProps } from '../tooltip'; import usePagination, { DEFAULT_PAGE_SIZE, getPaginationParam } from './hooks/usePagination'; import useLazyKVMap from './hooks/useLazyKVMap'; -import { Breakpoint } from '../_util/responsiveObserve'; -import { +import type { Breakpoint } from '../_util/responsiveObserve'; +import type { TableRowSelection, GetRowKey, ColumnType, @@ -26,24 +28,28 @@ import useSelection, { SELECTION_INVERT, SELECTION_NONE, } from './hooks/useSelection'; -import useSorter, { getSortData, SortState } from './hooks/useSorter'; -import useFilter, { getFilterData, FilterState } from './hooks/useFilter'; +import type { SortState } from './hooks/useSorter'; +import useSorter, { getSortData } from './hooks/useSorter'; +import type { FilterState } from './hooks/useFilter'; +import useFilter, { getFilterData } from './hooks/useFilter'; import useTitleColumns from './hooks/useTitleColumns'; import renderExpandIcon from './ExpandIcon'; import scrollTo from '../_util/scrollTo'; import defaultLocale from '../locale/en_US'; import Column from './Column'; import ColumnGroup from './ColumnGroup'; -import { SizeType } from '../config-provider'; +import type { SizeType } from '../config-provider'; import devWarning from '../vc-util/devWarning'; +import type { PropType } from 'vue'; import { computed, defineComponent, ref, toRef, watchEffect } from 'vue'; -import { DefaultRecordType } from '../vc-table/interface'; +import type { DefaultRecordType } from '../vc-table/interface'; import useBreakpoint from '../_util/hooks/useBreakpoint'; import { convertChildrenToColumns } from '../vc-table/hooks/useColumns'; import useConfigInject from '../_util/hooks/useConfigInject'; import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; import classNames from '../_util/classNames'; import omit from '../_util/omit'; +import { initDefaultProps } from '../_util/props-util'; export type { ColumnsType, TablePaginationConfig }; @@ -74,6 +80,7 @@ export interface TableProps | 'columns' | 'scroll' | 'emptyText' + | 'canExpandable' > { dropdownPrefixCls?: string; dataSource?: RcTableProps['data']; @@ -100,9 +107,76 @@ export interface TableProps showSorterTooltip?: boolean | TooltipProps; } +const tableProps = () => { + return { + prefixCls: { type: String as PropType }, + columns: { type: Array as PropType }, + rowKey: { type: [String, Function] as PropType }, + tableLayout: { type: String as PropType }, + rowClassName: { type: String as PropType }, + title: { type: Function as PropType }, + footer: { type: Function as PropType }, + id: { type: String as PropType }, + showHeader: { type: Boolean as PropType }, + components: { type: Object as PropType }, + customRow: { type: Function as PropType }, + customHeaderRow: { type: Function as PropType }, + direction: { type: String as PropType }, + expandFixed: { type: Boolean as PropType }, + expandColumnWidth: { type: Number as PropType }, + expandedRowKeys: { type: Array as PropType }, + defaultExpandedRowKeys: { type: Array as PropType }, + expandedRowRender: { type: Function as PropType }, + expandRowByClick: { type: Boolean as PropType }, + expandIcon: { type: Function as PropType }, + onExpand: { type: Function as PropType }, + onExpandedRowsChange: { type: Function as PropType }, + defaultExpandAllRows: { type: Boolean as PropType }, + indentSize: { type: Number as PropType }, + expandIconColumnIndex: { type: Number as PropType }, + expandedRowClassName: { type: Function as PropType }, + childrenColumnName: { type: String as PropType }, + rowExpandable: { type: Function as PropType }, + sticky: { type: String as PropType }, + + dropdownPrefixCls: String, + dataSource: { type: Array as PropType }, + pagination: { type: [Boolean, Object] as PropType }, + loading: { type: [Boolean, Object] as PropType }, + size: { type: String as PropType }, + bordered: Boolean, + locale: { type: Object as PropType }, + + onChange: { + type: Function as PropType< + ( + pagination: TablePaginationConfig, + filters: Record, + sorter: SorterResult | SorterResult[], + extra: TableCurrentDataSource, + ) => void + >, + }, + + rowSelection: { type: Object as PropType }, + getPopupContainer: { type: Function as PropType }, + scroll: { + type: Object as PropType< + RcTableProps['scroll'] & { + scrollToFirstRowOnChange?: boolean; + } + >, + }, + sortDirections: { type: Array as PropType }, + showSorterTooltip: { type: [Boolean, Object] as PropType }, + }; +}; + const InteralTable = defineComponent({ name: 'InteralTable', - props: {} as any, + props: initDefaultProps(tableProps(), { + rowKey: 'key', + }) as any, inheritAttrs: false, emits: [], slots: ['emptyText', 'expandIcon', 'title', 'footer', 'summary'], @@ -173,7 +247,7 @@ const InteralTable = defineComponent({ const triggerOnChange = ( info: Partial, action: TableAction, - reset: boolean = false, + reset = false, ) => { const { pagination, scroll, onChange } = props; const changeInfo = { diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx index 8ee0acb12..9d7fa41e5 100644 --- a/components/table/hooks/useFilter/FilterDropdown.tsx +++ b/components/table/hooks/useFilter/FilterDropdown.tsx @@ -6,12 +6,18 @@ import Checkbox from '../../../checkbox'; import Radio from '../../../radio'; import Dropdown from '../../../dropdown'; import Empty from '../../../empty'; -import { ColumnType, ColumnFilterItem, Key, TableLocale, GetPopupContainer } from '../../interface'; +import type { + ColumnType, + ColumnFilterItem, + Key, + TableLocale, + GetPopupContainer, +} from '../../interface'; import FilterDropdownMenuWrapper from './FilterWrapper'; -import { FilterState } from '.'; +import type { FilterState } from '.'; import { computed, defineComponent, onBeforeUnmount, ref } from 'vue'; -import classNames from 'ant-design-vue/es/_util/classNames'; -import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'; +import classNames from '../../../_util/classNames'; +import useConfigInject from '../../../_util/hooks/useConfigInject'; const { SubMenu, Item: MenuItem } = Menu; diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx index 7ba5b2d4c..ba2934769 100644 --- a/components/table/hooks/useFilter/index.tsx +++ b/components/table/hooks/useFilter/index.tsx @@ -1,8 +1,9 @@ -import { DefaultRecordType } from 'ant-design-vue/es/vc-table/interface'; -import devWarning from 'ant-design-vue/es/vc-util/devWarning'; -import useState from 'ant-design-vue/es/_util/hooks/useState'; -import { computed, Ref } from 'vue'; -import { +import type { DefaultRecordType } from '../../../vc-table/interface'; +import devWarning from '../../../vc-util/devWarning'; +import useState from '../../../_util/hooks/useState'; +import type { Ref } from 'vue'; +import { computed } from 'vue'; +import type { TransformColumns, ColumnsType, ColumnType, diff --git a/components/table/hooks/usePagination.ts b/components/table/hooks/usePagination.ts index f2501ccc4..5772a04b6 100644 --- a/components/table/hooks/usePagination.ts +++ b/components/table/hooks/usePagination.ts @@ -1,4 +1,4 @@ -import useState from 'ant-design-vue/es/_util/hooks/useState'; +import useState from '../../_util/hooks/useState'; import type { Ref } from 'vue'; import { computed } from 'vue'; import type { PaginationProps } from '../../pagination'; diff --git a/components/table/hooks/useSelection.tsx b/components/table/hooks/useSelection.tsx index 8c00cf82d..b3c2df542 100644 --- a/components/table/hooks/useSelection.tsx +++ b/components/table/hooks/useSelection.tsx @@ -1,20 +1,22 @@ import DownOutlined from '@ant-design/icons-vue/DownOutlined'; -import { DataNode } from 'ant-design-vue/es/tree'; -import { INTERNAL_COL_DEFINE } from 'ant-design-vue/es/vc-table'; -import { FixedType } from 'ant-design-vue/es/vc-table/interface'; -import { GetCheckDisabled } from 'ant-design-vue/es/vc-tree/interface'; -import { arrAdd, arrDel } from 'ant-design-vue/es/vc-tree/util'; -import { conductCheck } from 'ant-design-vue/es/vc-tree/utils/conductUtil'; -import { convertDataToEntities } from 'ant-design-vue/es/vc-tree/utils/treeUtil'; -import devWarning from 'ant-design-vue/es/vc-util/devWarning'; -import useMergedState from 'ant-design-vue/es/_util/hooks/useMergedState'; -import useState from 'ant-design-vue/es/_util/hooks/useState'; -import { computed, ref, Ref, watchEffect } from 'vue'; -import Checkbox, { CheckboxProps } from '../../checkbox'; +import type { DataNode } from '../../tree'; +import { INTERNAL_COL_DEFINE } from '../../vc-table'; +import type { FixedType } from '../../vc-table/interface'; +import type { GetCheckDisabled } from '../../vc-tree/interface'; +import { arrAdd, arrDel } from '../../vc-tree/util'; +import { conductCheck } from '../../vc-tree/utils/conductUtil'; +import { convertDataToEntities } from '../../vc-tree/utils/treeUtil'; +import devWarning from '../../vc-util/devWarning'; +import useMergedState from '../../_util/hooks/useMergedState'; +import useState from '../../_util/hooks/useState'; +import type { Ref } from 'vue'; +import { computed, ref, watchEffect } from 'vue'; +import type { CheckboxProps } from '../../checkbox'; +import Checkbox from '../../checkbox'; import Dropdown from '../../dropdown'; import Menu from '../../menu'; import Radio from '../../radio'; -import { +import type { TableRowSelection, Key, ColumnsType, @@ -474,8 +476,8 @@ export default function useSelection( onChange={({ nativeEvent }) => { const { shiftKey } = nativeEvent; - let startIndex: number = -1; - let endIndex: number = -1; + let startIndex = -1; + let endIndex = -1; // Get range of this if (shiftKey && checkStrictly) { diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx index 2d30e0651..3cc8ca334 100644 --- a/components/table/hooks/useSorter.tsx +++ b/components/table/hooks/useSorter.tsx @@ -1,6 +1,6 @@ import CaretDownOutlined from '@ant-design/icons-vue/CaretDownOutlined'; import CaretUpOutlined from '@ant-design/icons-vue/CaretUpOutlined'; -import { +import type { TransformColumns, ColumnsType, Key, @@ -12,12 +12,14 @@ import { ColumnGroupType, TableLocale, } from '../interface'; -import Tooltip, { TooltipProps } from '../../tooltip'; +import type { TooltipProps } from '../../tooltip'; +import Tooltip from '../../tooltip'; import { getColumnKey, getColumnPos, renderColumnTitle } from '../util'; -import classNames from 'ant-design-vue/es/_util/classNames'; -import { computed, Ref } from 'vue'; -import useState from 'ant-design-vue/es/_util/hooks/useState'; -import { DefaultRecordType } from 'ant-design-vue/es/vc-table/interface'; +import classNames from '../../_util/classNames'; +import type { Ref } from 'vue'; +import { computed } from 'vue'; +import useState from '../../_util/hooks/useState'; +import type { DefaultRecordType } from '../../vc-table/interface'; const ASCEND = 'ascend'; const DESCEND = 'descend'; diff --git a/components/table/hooks/useTitleColumns.tsx b/components/table/hooks/useTitleColumns.tsx index 4afc8d3fa..6c33693da 100644 --- a/components/table/hooks/useTitleColumns.tsx +++ b/components/table/hooks/useTitleColumns.tsx @@ -1,5 +1,5 @@ -import { Ref } from 'vue'; -import { TransformColumns, ColumnTitleProps, ColumnsType } from '../interface'; +import type { Ref } from 'vue'; +import type { TransformColumns, ColumnTitleProps, ColumnsType } from '../interface'; import { renderColumnTitle } from '../util'; function fillTitle( diff --git a/components/table/index.tsx b/components/table/index.tsx index 17f423bac..4b2361695 100644 --- a/components/table/index.tsx +++ b/components/table/index.tsx @@ -1,8 +1,8 @@ import Table from './Table'; -import Column from './Column'; -import ColumnGroup from './ColumnGroup'; +import type Column from './Column'; +import type ColumnGroup from './ColumnGroup'; import type { TableProps, TablePaginationConfig } from './Table'; -import { App } from 'vue'; +import type { App } from 'vue'; export type { ColumnProps } from './Column'; export type { ColumnsType, ColumnType, ColumnGroupType } from './interface'; diff --git a/components/table/interface.tsx b/components/table/interface.tsx index 2e6e9bf77..c4cb46d34 100644 --- a/components/table/interface.tsx +++ b/components/table/interface.tsx @@ -8,9 +8,10 @@ import type { import type { TooltipProps } from '../tooltip'; import type { CheckboxProps } from '../checkbox'; import type { PaginationProps } from '../pagination'; -import { Breakpoint } from '../_util/responsiveObserve'; -import { INTERNAL_SELECTION_ITEM } from './hooks/useSelection'; -import { tuple, VueNode } from '../_util/type'; +import type { Breakpoint } from '../_util/responsiveObserve'; +import type { INTERNAL_SELECTION_ITEM } from './hooks/useSelection'; +import type { VueNode } from '../_util/type'; +import { tuple } from '../_util/type'; // import { TableAction } from './Table'; export type { GetRowKey, ExpandableConfig }; @@ -136,7 +137,7 @@ export type SelectionSelectFn = ( nativeEvent: Event, ) => void; -export interface TableRowSelection { +export interface TableRowSelection { /** Keep the selection keys in list even the key not exist in `dataSource` anymore */ preserveSelectedRowKeys?: boolean; type?: RowSelectionType; @@ -169,7 +170,7 @@ export type TransformColumns = ( columns: ColumnsType, ) => ColumnsType; -export interface TableCurrentDataSource { +export interface TableCurrentDataSource { currentDataSource: RecordType[]; action: TableAction; } diff --git a/components/vc-table/Body/BodyRow.tsx b/components/vc-table/Body/BodyRow.tsx index e0d5ca035..c23a54ffc 100644 --- a/components/vc-table/Body/BodyRow.tsx +++ b/components/vc-table/Body/BodyRow.tsx @@ -5,8 +5,8 @@ import ExpandedRow from './ExpandedRow'; import { computed, defineComponent, ref, watchEffect } from 'vue'; import { useInjectTable } from '../context/TableContext'; import { useInjectBody } from '../context/BodyContext'; -import classNames from 'ant-design-vue/es/_util/classNames'; -import { parseStyleText } from 'ant-design-vue/es/_util/props-util'; +import classNames from '../../_util/classNames'; +import { parseStyleText } from '../../_util/props-util'; export interface BodyRowProps { record: RecordType; diff --git a/components/vc-table/Body/MeasureCell.tsx b/components/vc-table/Body/MeasureCell.tsx index 42ebf80df..6048ce49a 100644 --- a/components/vc-table/Body/MeasureCell.tsx +++ b/components/vc-table/Body/MeasureCell.tsx @@ -1,4 +1,4 @@ -import VCResizeObserver from 'ant-design-vue/es/vc-resize-observer'; +import VCResizeObserver from '../../vc-resize-observer'; import type { Key } from '../interface'; export interface MeasureCellProps { diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx index 94305e113..637a5df6c 100644 --- a/components/vc-table/Cell/index.tsx +++ b/components/vc-table/Cell/index.tsx @@ -1,5 +1,5 @@ -import classNames from 'ant-design-vue/es/_util/classNames'; -import { isValidElement, parseStyleText } from 'ant-design-vue/es/_util/props-util'; +import classNames from '../../_util/classNames'; +import { isValidElement, parseStyleText } from '../../_util/props-util'; import type { CSSProperties, HTMLAttributes } from 'vue'; import { defineComponent } from 'vue'; diff --git a/components/vc-table/FixedHolder/index.tsx b/components/vc-table/FixedHolder/index.tsx index 99fee1b96..91e78c80e 100644 --- a/components/vc-table/FixedHolder/index.tsx +++ b/components/vc-table/FixedHolder/index.tsx @@ -13,7 +13,7 @@ import { watchEffect, } from 'vue'; import { useInjectTable } from '../context/TableContext'; -import classNames from 'ant-design-vue/es/_util/classNames'; +import classNames from '../../_util/classNames'; function useColumnWidth(colWidthsRef: Ref, columCountRef: Ref) { return computed(() => { diff --git a/components/vc-table/Header/Header.tsx b/components/vc-table/Header/Header.tsx index 2fd4698bf..37cbf6b60 100644 --- a/components/vc-table/Header/Header.tsx +++ b/components/vc-table/Header/Header.tsx @@ -1,4 +1,4 @@ -import classNames from 'ant-design-vue/es/_util/classNames'; +import classNames from '../../_util/classNames'; import { computed, defineComponent } from 'vue'; import { useInjectTable } from '../context/TableContext'; import type { diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx index 16811c345..114888287 100644 --- a/components/vc-table/Table.tsx +++ b/components/vc-table/Table.tsx @@ -242,18 +242,21 @@ export default defineComponent({ }); const innerExpandedKeys = ref([]); + const stop = watchEffect(() => { + if (props.defaultExpandedRowKeys) { + innerExpandedKeys.value = props.defaultExpandedRowKeys; + } + if (props.defaultExpandAllRows) { + innerExpandedKeys.value = findAllChildrenKeys( + mergedData.value, + getRowKey.value, + mergedChildrenColumnName.value, + ); + } + }); + // defalutXxxx 仅仅第一次生效 + stop(); - // defalutXxxx 仅仅第一次生效 不用考虑响应式问题 - if (props.defaultExpandedRowKeys) { - innerExpandedKeys.value = props.defaultExpandedRowKeys; - } - if (props.defaultExpandAllRows) { - innerExpandedKeys.value = findAllChildrenKeys( - mergedData.value, - getRowKey.value, - mergedChildrenColumnName.value, - ); - } const mergedExpandedKeys = computed( () => new Set(props.expandedRowKeys || innerExpandedKeys.value || []), ); diff --git a/components/vc-table/hooks/useColumns.tsx b/components/vc-table/hooks/useColumns.tsx index 7fbba233c..a9f3ad927 100644 --- a/components/vc-table/hooks/useColumns.tsx +++ b/components/vc-table/hooks/useColumns.tsx @@ -1,4 +1,4 @@ -import { warning } from 'ant-design-vue/es/vc-util/warning'; +import { warning } from '../../vc-util/warning'; import type { ComputedRef, Ref } from 'vue'; import { computed, watchEffect } from 'vue'; import type { diff --git a/examples/App.vue b/examples/App.vue index 4af4dd9be..d70095398 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -1,39 +1,105 @@ -