diff --git a/packages/@uppy/dashboard/src/components/FileList.tsx b/packages/@uppy/dashboard/src/components/FileList.tsx index a636b8fa4b..0ec98ef363 100644 --- a/packages/@uppy/dashboard/src/components/FileList.tsx +++ b/packages/@uppy/dashboard/src/components/FileList.tsx @@ -1,5 +1,7 @@ import { h } from 'preact' import { useMemo } from 'preact/hooks' +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore untyped import VirtualList from '@uppy/utils/lib/VirtualList' import FileItem from './FileItem/index.tsx' diff --git a/packages/@uppy/utils/src/VirtualList.tsx b/packages/@uppy/utils/src/VirtualList.jsx similarity index 77% rename from packages/@uppy/utils/src/VirtualList.tsx rename to packages/@uppy/utils/src/VirtualList.jsx index 1a9817074c..0be5fe96b7 100644 --- a/packages/@uppy/utils/src/VirtualList.tsx +++ b/packages/@uppy/utils/src/VirtualList.jsx @@ -26,8 +26,7 @@ * - Tweaked styles for Uppy's Dashboard use case */ -import { h, Component } from 'preact' -import type { HTMLAttributes } from 'preact/compat' +import { h, Component } from 'preact' const STYLE_INNER = { position: 'relative', @@ -52,21 +51,8 @@ const STYLE_CONTENT = { overflow: 'visible', } -type Props = Omit, 'data'> & { - data: T[] - rowHeight: number - renderRow: (item: T) => h.JSX.Element - // eslint-disable-next-line react/require-default-props - overscanCount?: number | undefined -} - -class VirtualList extends Component< - Props, - { offset: number; height: number } -> { - focusElement: HTMLElement | null - - constructor(props: Props) { +class VirtualList extends Component { + constructor (props) { super(props) // The currently focused node, used to retain focus when the visible rows change. @@ -79,61 +65,58 @@ class VirtualList extends Component< } } - componentDidMount(): void { + componentDidMount () { this.resize() window.addEventListener('resize', this.handleResize) } // TODO: refactor to stable lifecycle method // eslint-disable-next-line - componentWillUpdate() { - if (this.base!.contains(document.activeElement)) { - this.focusElement = document.activeElement as HTMLElement + componentWillUpdate () { + if (this.base.contains(document.activeElement)) { + this.focusElement = document.activeElement } } - componentDidUpdate(): void { + componentDidUpdate () { // Maintain focus when rows are added and removed. - if ( - this.focusElement && - this.focusElement.parentNode && - document.activeElement !== this.focusElement - ) { - this.focusElement!.focus() + if (this.focusElement && this.focusElement.parentNode + && document.activeElement !== this.focusElement) { + this.focusElement.focus() } this.focusElement = null this.resize() } - componentWillUnmount(): void { + componentWillUnmount () { window.removeEventListener('resize', this.handleResize) } - handleScroll = (): void => { - this.setState({ offset: (this.base! as HTMLElement).scrollTop }) + handleScroll = () => { + this.setState({ offset: this.base.scrollTop }) } - handleResize = (): void => { + handleResize = () => { this.resize() } - resize(): void { + resize () { const { height } = this.state - if (height !== (this.base! as HTMLElement).offsetHeight) { + if (height !== this.base.offsetHeight) { this.setState({ - height: (this.base! as HTMLElement).offsetHeight, + height: this.base.offsetHeight, }) } } - render({ + render ({ data, rowHeight, renderRow, overscanCount = 10, ...props - }: Props): h.JSX.Element { + }) { const { offset, height } = this.state // first visible row index let start = Math.floor(offset / rowHeight) diff --git a/packages/@uppy/utils/tsconfig.json b/packages/@uppy/utils/tsconfig.json index fca37bdf5b..3148361844 100644 --- a/packages/@uppy/utils/tsconfig.json +++ b/packages/@uppy/utils/tsconfig.json @@ -5,6 +5,6 @@ "emitDeclarationOnly": false, "noEmit": true, }, - "include": ["src/*.ts", "src/*.tsx"], + "include": ["src/*.ts"], "references": [], }