You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
14 KiB
1 line
14 KiB
2 years ago
|
{"version":3,"file":"table-grid.mjs","sources":["../../../../../../packages/components/table-v2/src/table-grid.tsx"],"sourcesContent":["import { computed, defineComponent, inject, ref, unref } from 'vue'\nimport {\n DynamicSizeGrid,\n FixedSizeGrid,\n} from '@element-plus/components/virtual-list'\nimport { isNumber, isObject } from '@element-plus/utils'\nimport { Header } from './components'\nimport { TableV2InjectionKey } from './tokens'\nimport { tableV2GridProps } from './grid'\nimport { sum } from './utils'\n\nimport type { UnwrapRef } from 'vue'\nimport type {\n DynamicSizeGridInstance,\n GridDefaultSlotParams,\n GridItemKeyGetter,\n GridItemRenderedEvtParams,\n GridScrollOptions,\n ResetAfterIndex,\n Alignment as ScrollStrategy,\n} from '@element-plus/components/virtual-list'\nimport type { TableV2HeaderInstance } from './components'\nimport type { TableV2GridProps } from './grid'\n\nconst COMPONENT_NAME = 'ElTableV2Grid'\n\nconst useTableGrid = (props: TableV2GridProps) => {\n const headerRef = ref<TableV2HeaderInstance>()\n const bodyRef = ref<DynamicSizeGridInstance>()\n\n const totalHeight = computed(() => {\n const { data, rowHeight, estimatedRowHeight } = props\n\n if (estimatedRowHeight) {\n return\n }\n\n return data.length * (rowHeight as number)\n })\n\n const fixedRowHeight = computed(() => {\n const { fixedData, rowHeight } = props\n\n return (fixedData?.length || 0) * (rowHeight as number)\n })\n\n const headerHeight = computed(() => sum(props.headerHeight))\n\n const gridHeight = computed(() => {\n const { height } = props\n return Math.max(0, height - unref(headerHeight) - unref(fixedRowHeight))\n })\n\n const hasHeader = computed(() => {\n return unref(headerHeight) + unref(fixedRowHeight) > 0\n })\n\n const itemKey: GridItemKeyGetter = ({ data, rowIndex }) =>\n data[rowIndex][props.rowKey]\n\n function onItemRendered({\n rowCacheStart,\n rowCacheEnd,\n rowVisibleStart,\n rowVisibleEnd,\n }: GridItemRenderedEvtParams) {\n props.onRowsRendered?.({\n rowCacheStart,\n rowCacheEnd,\n rowVisibleStart,\n rowVisibleEnd,\n })\n }\n\n function resetAfterRowIndex(index: number, forceUpdate: boolean) {\n bodyRef.value?.resetAfterRowIndex(index, forceUpdate)\n }\n\n function scrollTo(x: number, y: number): void\n function scrollTo(options: GridScrollOptions): void\n function scrollTo(leftOrOptions: number | GridScrollOptions, top?: number) {\n const header$ = unref(headerRef)\n const body$ = unref(bodyRef)\n\n if (!header$ || !body$) return\n\n if (isObject(leftOrOptions)) {\n header$.scrollToLeft(leftOrOptions.scrollLeft)\n body$.scrollTo(leftOrOptions)\n } else {\n header$.scrollToLeft(leftOrOptions)\n body$.scrollTo({\n scrollLeft: leftOrOptions,\n scrollTop: top,\n })\n }\n }\n\n function scrollToTop(scrollTop: number) {\n unref(bodyRef)?.scrollTo({\n scrollTop,\n })\n }\n\n function scrollToRow(row: number, strategy: ScrollStrategy) {\n unref(bodyRef)?.scrollToItem(row, 1, strategy)\n }\n\n function forceUpdate() {\n unref(bodyRef)?.$forceUpdate()\n unref(headerRef)?.$forceUpdate()\n }\n\n return {\n bodyRef,\n forceUpdate,\n fixedRowHeight,\n gridHeight,\n hasHeader,\n headerHeight,\n headerRef,\n totalHeight,\n\n itemKey,\n onItemRendered,\n resetAfterRowIndex,\n scrollTo,\n scrollToTop,\n scrollToRow,\n }\n}\n\nconst TableGrid = defineComponent({\n name: COMPONENT_NAME,\n props: tableV2GridProps,\n setup(props, { slots, expose }) {\n const { ns } = inject(TableV2InjectionKey)!\n\n const {\n bodyRef,\n fixedRowHeight,\n gridHeight,\n hasHeader,\n headerRef,\n headerHeight,\n totalHeight,\n\n forceUpdate,\n itemKey,\n onItemRendered,\n resetAfterRowIndex,\n scrollTo,\n scrollToTop,\n scrollToRow,\n } = useTableGrid(props)\n\n expose({\n forceUpdate,\n /**\n * @description fetc
|