Bump react-aspect-ratio to support passing refs (#120)

roderickhsiao · Oct 8, 2023 · 04a33f0 · 04a33f0
1 parent 0390fb8
commit 04a33f0
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "jest-junit": "^15.0.0",
     "react": "^18.0.0",
-    "react-aspect-ratio": "^1.0.3",
+    "react-aspect-ratio": "^1.1.6",
     "react-dom": "^18.0.0",
     "react-test-renderer": "^18.0.0",
     "storybook": "^7.0.0",

diff --git a/src/stories/common/Iframe.tsx b/src/stories/common/Iframe.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { handleViewport } from '../../index';
 import type { InjectedViewportProps } from '../../lib/types';

diff --git a/src/stories/common/IframeFunctional.tsx b/src/stories/common/IframeFunctional.tsx
@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { handleViewport } from '../../index';
 import type { InjectedViewportProps } from '../../lib/types';
@@ -33,8 +33,6 @@ function IframeFunctional(props: IframeFunctionalProps) {
     <AspectRatio
       ratio={ratio}
       style={{ marginBottom: '200px', backgroundColor: 'rgba(0,0,0,.12)' }}
-      // @ts-expect-error
-      // TODO: fix upstream types in react-aspect-ratio to support ref
       ref={forwardedRef}
     >
       <Component {...componentProps} />

diff --git a/src/stories/common/Image.tsx b/src/stories/common/Image.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { INIT, LOADING, LOADED } from './constants';
 import { handleViewport } from '../../index';

diff --git a/src/stories/common/ImageFunctional.tsx b/src/stories/common/ImageFunctional.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import AspectRatio from 'react-aspect-ratio';
+import { AspectRatio } from 'react-aspect-ratio';
 
 import { handleViewport } from '../../index';
 import { INIT, LOADING, LOADED } from './constants';
@@ -57,8 +57,6 @@ function ImageObject(props: ImageObjectProps) {
         marginBottom: '200px',
         backgroundColor: getBackgroundColor(),
       }}
-      // @ts-expect-error
-      // TODO: fix upstream types in react-aspect-ratio to support ref
       ref={forwardedRef}
     >
       <img src={src} alt="demo" />

diff --git a/yarn.lock b/yarn.lock
@@ -7976,10 +7976,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-aspect-ratio@^1.0.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/react-aspect-ratio/-/react-aspect-ratio-1.1.5.tgz#ee8e66cc45652156ced405469ddbdb4bdc54f18e"
-  integrity sha512-zTeQlhG584qDwr1wJi6dd9+zdvEbAWnKz0gSbxcmwIYitZ4Z2Dr9buJa9GONsh1BOO2ILZmMdVq6A/YvcKPN8A==
+react-aspect-ratio@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/react-aspect-ratio/-/react-aspect-ratio-1.1.6.tgz#d949800ca1428194f98034b945f804ce3f4b3ec6"
+  integrity sha512-A7/x2MqpYelh2fxx6RnRSEcA+rwdfiDK74Ju78xW8EnzSGSopPnCugyKlB+2d6dNP1UzU/SscIslVtqzNZrwyQ==
 
 react-colorful@^5.1.2:
   version "5.6.1"