chore: [virtual-list] remove ts-nocheck directive and unused code (#20299)

* chore: [virtual-list] remove ts-nocheck directive and unused code

* chore: remove compatible code

* chore: add line

---------

Co-authored-by: warmthsea <2586244885@qq.com>

packages/components/virtual-list/__tests__/scrollbar.test.ts

@@ -79,7 +79,7 @@ describe('virtual scrollbar', () => {
      *  thumb translateY: (0 / (400 - 100)) * (100 - 25) -> 0  // (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbSize)
      */
     const initializeStyle =
-      'height: 33px; transform: translateY(0px); webkit-transform: translateY(0px); width: 100%;'
+      'height: 33px; transform: translateY(0px); width: 100%;'
 
     expect(wrapper.find('.el-scrollbar__thumb').attributes('style')).toContain(
       initializeStyle

packages/components/virtual-list/src/builders/build-grid.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   Fragment,
   computed,
@@ -51,6 +50,7 @@ import type {
   ScrollbarExpose,
 } from '../types'
 import type { VirtualizedGridProps } from '../props'
+import type { DynamicSizeGridInstance } from '../components/dynamic-size-grid.ts'
 
 const createGrid = ({
   name,
@@ -411,7 +411,7 @@ const createGrid = ({
             alignment,
             _states.scrollLeft,
             _cache,
-            estimatedWidth > props.width! ? scrollBarWidth : 0
+            estimatedWidth > (props.width as number) ? scrollBarWidth : 0
           ),
           scrollTop: getRowOffset(
             props,
@@ -419,15 +419,12 @@ const createGrid = ({
             alignment,
             _states.scrollTop,
             _cache,
-            estimatedHeight > props.height! ? scrollBarWidth : 0
+            estimatedHeight > (props.height as number) ? scrollBarWidth : 0
           ),
         })
       }
 
-      const getItemStyle = (
-        rowIndex: number,
-        columnIndex: number
-      ): CSSProperties => {
+      const getItemStyle = (rowIndex: number, columnIndex: number) => {
         const { columnWidth, direction, rowHeight } = props
         const itemStyleCache = getItemStyleCache.value(
           clearCache && columnWidth,
@@ -439,7 +436,7 @@ const createGrid = ({
         const key = `${rowIndex},${columnIndex}`
 
         if (hasOwn(itemStyleCache, key)) {
-          return itemStyleCache[key]
+          return itemStyleCache[key] as CSSProperties
         } else {
           const [, left] = getColumnPosition(props, columnIndex, unref(cache))
           const _cache = unref(cache)
@@ -457,15 +454,13 @@ const createGrid = ({
             width: `${width}px`,
           }
 
-          return itemStyleCache[key]
+          return itemStyleCache[key] as CSSProperties
         }
       }
 
       // TODO: debounce setting is scrolling.
 
       const resetIsScrolling = () => {
-        // timer = null
-
         states.value.isScrolling = false
         nextTick(() => {
           getItemStyleCache.value(-1, null, null)
@@ -521,7 +516,7 @@ const createGrid = ({
       }
 
       const { resetAfterColumnIndex, resetAfterRowIndex, resetAfter } =
-        instance.proxy as any
+        instance.proxy as DynamicSizeGridInstance
 
       expose({
         windowRef,

packages/components/virtual-list/src/builders/build-list.ts

@@ -160,7 +160,7 @@ const createList = ({
         },
         (offset) => {
           ;(
-            scrollbarRef.value as any as {
+            scrollbarRef.value as {
               onMouseUp: () => void
             }
           ).onMouseUp?.()
@@ -345,12 +345,9 @@ const createList = ({
         return style
       }
 
-      // TODO:
-      // perf optimization here, reset isScrolling with debounce.
+      // TODO: perf optimization here, reset isScrolling with debounce.
 
       const resetIsScrolling = () => {
-        // timer = null
-
         states.value.isScrolling = false
         nextTick(() => {
           getItemStyleCache.value(-1, null, null)

packages/components/virtual-list/src/components/dynamic-size-grid.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   isFunction,
   isNumber,
@@ -18,7 +17,7 @@ import {
 import type { GridInstance } from '../builders/build-grid'
 import type { VirtualizedGridProps } from '../props'
 
-import type { Alignment, GridCache, ItemSize, ListItem } from '../types'
+import type { Alignment, GridCache, ItemSize } from '../types'
 
 const { max, min, floor } = Math
 const SCOPE = 'ElDynamicSizeGrid'
@@ -34,13 +33,13 @@ type Indices = {
 const ACCESS_SIZER_KEY_MAP = {
   column: 'columnWidth',
   row: 'rowHeight',
-}
+} as const
 
 // generates cache access key via type
 const ACCESS_LAST_VISITED_KEY_MAP = {
   column: 'lastVisitedColumnIndex',
   row: 'lastVisitedRowIndex',
-}
+} as const
 
 const getItemFromCache = (
   props: Props,
@@ -50,9 +49,9 @@ const getItemFromCache = (
 ) => {
   const [cachedItems, sizer, lastVisited] = [
     gridCache[type],
-    props[ACCESS_SIZER_KEY_MAP[type]],
+    props[ACCESS_SIZER_KEY_MAP[type]] as ItemSize,
     gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]],
-  ] as [Record<string, ListItem>, ItemSize, number]
+  ]
 
   if (index > lastVisited) {
     let offset = 0
@@ -62,7 +61,6 @@ const getItemFromCache = (
     }
 
     for (let i = lastVisited + 1; i <= index; i++) {
-      // console.log(i, sizer(i))
       const size = sizer(i)
 
       cachedItems[i] = {
@@ -133,7 +131,7 @@ const findItem = (
   const [cache, lastVisitedIndex] = [
     gridCache[type],
     gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]],
-  ] as [Record<string, ListItem>, number]
+  ]
 
   const lastVisitedItemOffset =
     lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0
@@ -345,7 +343,6 @@ const DynamicSizeGrid = createGrid({
       }
 
       if (isNumber(rowIndex)) {
-        // console.log(rowIndex)
         cache.value.lastVisitedRowIndex = Math.min(
           cache.value.lastVisitedRowIndex,
           rowIndex - 1
@@ -378,7 +375,7 @@ const DynamicSizeGrid = createGrid({
       )
     }
 
-    Object.assign(instance.proxy, {
+    Object.assign(instance.proxy!, {
       resetAfterColumnIndex,
       resetAfterRowIndex,
       resetAfter,

packages/components/virtual-list/src/components/fixed-size-list.ts

@@ -120,9 +120,7 @@ const FixedSizeList = buildList({
 
   clearCache: true,
 
-  validateProps() {
-    //
-  },
+  validateProps() {},
 })
 
 export type FixedSizeListInstance = InstanceType<typeof FixedSizeList> & unknown

packages/components/virtual-list/src/components/scrollbar.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import {
   computed,
   defineComponent,
@@ -19,6 +18,11 @@ import { virtualizedScrollbarProps } from '../props'
 import { renderThumbStyle } from '../utils'
 
 import type { CSSProperties } from 'vue'
+interface ScrollState {
+  isDragging: boolean
+  traveled: number
+  [key: string]: unknown
+}
 
 const ScrollBar = defineComponent({
   name: 'ElVirtualScrollBar',
@@ -38,7 +42,7 @@ const ScrollBar = defineComponent({
     let onselectstartStore: null | typeof document.onselectstart = null
 
     // data
-    const state = reactive({
+    const state = reactive<ScrollState>({
       isDragging: false,
       traveled: 0,
     })
@@ -81,8 +85,6 @@ const ScrollBar = defineComponent({
       )
     })
 
-    // const sizeRange = computed(() => props.size - thumbSize.value)
-
     const thumbStyle = computed<CSSProperties>(() => {
       if (!Number.isFinite(thumbSize.value)) {
         return {
@@ -92,7 +94,7 @@ const ScrollBar = defineComponent({
 
       const thumb = `${thumbSize.value}px`
 
-      const style: CSSProperties = renderThumbStyle(
+      const style = renderThumbStyle(
         {
           bar: bar.value,
           size: thumb,
@@ -137,7 +139,7 @@ const ScrollBar = defineComponent({
       thumbEl.removeEventListener('touchend', onMouseUp)
     }
 
-    const onThumbMouseDown = (e: Event) => {
+    const onThumbMouseDown = (e: Event | KeyboardEvent | MouseEvent) => {
       e.stopImmediatePropagation()
       if (
         (e as KeyboardEvent).ctrlKey ||
@@ -148,8 +150,8 @@ const ScrollBar = defineComponent({
 
       state.isDragging = true
       state[bar.value.axis] =
-        e.currentTarget![bar.value.offset] -
-        (e[bar.value.client] -
+        (e.currentTarget as HTMLElement)[bar.value.offset] -
+        ((e as MouseEvent)[bar.value.client] -
           (e.currentTarget as HTMLElement).getBoundingClientRect()[
             bar.value.direction
           ])
@@ -165,7 +167,7 @@ const ScrollBar = defineComponent({
       detachEvents()
     }
 
-    const onMouseMove = (e: Event) => {
+    const onMouseMove = (e: MouseEvent | TouchEvent) => {
       const { isDragging } = state
       if (!isDragging) return
       if (!thumbRef.value || !trackRef.value) return
@@ -178,11 +180,12 @@ const ScrollBar = defineComponent({
       // to get the relative position of the pointer to the track.
       const offset =
         (trackRef.value.getBoundingClientRect()[bar.value.direction] -
-          e[bar.value.client]) *
+          (e as MouseEvent)[bar.value.client]) *
         -1
 
       // find where the thumb was clicked on.
-      const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage
+      const thumbClickPosition =
+        thumbRef.value[bar.value.offset] - (prevPage as number)
       /**
        *  +--------------+                                   +--------------+
        *  |              -  <--------- thumb.offsetTop       |              |

packages/components/virtual-list/src/defaults.ts

@@ -22,11 +22,6 @@ export const RTL_OFFSET_NAG = 'negative'
 export const RTL_OFFSET_POS_ASC = 'positive-ascending'
 export const RTL_OFFSET_POS_DESC = 'positive-descending'
 
-export const PageKey = {
-  [HORIZONTAL]: 'pageX',
-  [VERTICAL]: 'pageY',
-}
-
 export const ScrollbarSizeKey = {
   [HORIZONTAL]: 'height',
   [VERTICAL]: 'width',

packages/components/virtual-list/src/hooks/use-wheel.ts

@@ -24,15 +24,6 @@ const useWheel = (
   let frameHandle: number
   let offset = 0
 
-  // let scrollLock = false
-  // let lockHandle = null
-
-  // const lockScroll = () => {
-  //   clearTimeout(lockHandle)
-  //   scrollLock = true
-  //   lockHandle = setTimeout(() => scrollLock = false, 50)
-  // }
-
   const hasReachedEdge = (offset: number) => {
     const edgeReached =
       (offset < 0 && atStartEdge.value) || (offset > 0 && atEndEdge.value)

packages/components/virtual-list/src/utils.ts

@@ -1,10 +1,8 @@
-// @ts-nocheck
 import {
   BACKWARD,
   FORWARD,
   HORIZONTAL,
   LTR,
-  PageKey,
   RTL,
   RTL_OFFSET_NAG,
   RTL_OFFSET_POS_ASC,
@@ -12,7 +10,7 @@ import {
 } from './defaults'
 
 import type { CSSProperties } from 'vue'
-import type { Direction, LayoutDirection, RTLOffsetType } from './types'
+import type { Direction, RTLOffsetType } from './types'
 
 export const getScrollDir = (prev: number, cur: number) =>
   prev < cur ? FORWARD : BACKWARD
@@ -61,13 +59,6 @@ export function getRTLOffsetType(recalculate = false): RTLOffsetType {
   return cachedRTLResult
 }
 
-export const getRelativePos = (
-  e: TouchEvent | MouseEvent,
-  layout: LayoutDirection
-) => {
-  return 'touches' in e ? e.touches[0][PageKey[layout]] : e[PageKey[layout]]
-}
-
 type RenderThumbStyleParams = {
   bar: {
     size: 'height' | 'width'
@@ -86,9 +77,6 @@ export function renderThumbStyle(
 
   style[bar.size] = size
   style.transform = translate
-  style.msTransform = translate
-  // polyfill
-  ;(style as any).webkitTransform = translate
 
   if (layout === 'horizontal') {
     style.height = '100%'