chore(type): fix react-virtualized type (library does not support rea…

…ct 18) (#392)
hello-pangea · Aug 21, 2022 · 2e186c3 · 2e186c3
1 parent 180f7f6
commit 2e186c3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/stories/examples/45-virtual.stories.tsx b/stories/examples/45-virtual.stories.tsx
@@ -11,7 +11,10 @@ storiesOf('Examples/Virtual: react-window', module)
   .add('list', () => <ReactWindowList initial={getQuotes(1000)} />)
   .add('board', () => <ReactWindowBoard />);
 
-storiesOf('Examples/Virtual: react-virtualized', module)
+storiesOf(
+  'Examples/Virtual: react-virtualized (this library does not official support for react 18)',
+  module,
+)
   .add('list', () => <ReactVirtualizedList initial={getQuotes(1000)} />)
   .add('board', () => <ReactVirtualizedBoard />)
   .add(

diff --git a/stories/src/virtual/react-virtualized/board.tsx b/stories/src/virtual/react-virtualized/board.tsx
@@ -122,7 +122,7 @@ const Column = React.memo(function Column(props: ColumnProps) {
               rowCount={itemCount}
               rowHeight={110}
               width={300}
-              ref={(ref) => {
+              ref={(ref: any) => {
                 // react-virtualized has no way to get the list's ref that I can so
                 // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
                 if (ref) {

diff --git a/stories/src/virtual/react-virtualized/list.tsx b/stories/src/virtual/react-virtualized/list.tsx
@@ -91,7 +91,7 @@ function App(props: Props): ReactElement {
             rowCount={quotes.length}
             rowHeight={110}
             width={300}
-            ref={(ref) => {
+            ref={(ref: any) => {
               // react-virtualized has no way to get the list's ref that I can so
               // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
               if (ref) {

diff --git a/stories/src/virtual/react-virtualized/window-list.tsx b/stories/src/virtual/react-virtualized/window-list.tsx
@@ -87,7 +87,7 @@ function App(props: Props): ReactElement {
       >
         {(droppableProvided: DroppableProvided) => (
           <WindowScroller>
-            {({ height, isScrolling, onChildScroll, scrollTop }) => (
+            {({ height, isScrolling, onChildScroll, scrollTop }: any) => (
               <List
                 autoHeight
                 rowCount={quotes.length}
@@ -97,7 +97,7 @@ function App(props: Props): ReactElement {
                 scrollTop={scrollTop}
                 rowHeight={110}
                 width={300}
-                ref={(ref) => {
+                ref={(ref: any) => {
                   // react-virtualized has no way to get the list's ref that I can so
                   // So we use the `ReactDOM.findDOMNode(ref)` escape hatch to get the ref
                   if (ref) {

diff --git a/stories/typings.d.ts b/stories/typings.d.ts
@@ -2,3 +2,15 @@ declare module '*.png' {
   const src: string;
   export default src;
 }
+
+// override react-virtualized's types, because the current version
+// uses react 17 types
+declare module 'react-virtualized' {
+  import { FunctionComponent } from 'react';
+  import { ListProps, WindowScrollerProps } from 'react-virtualized';
+
+  export * from 'react-virtualized';
+
+  export const List: FunctionComponent<ListProps>;
+  export const WindowScroller: FunctionComponent<WindowScrollerProps>;
+}