Revert v7.0.2

datocms · Sep 23, 2024 · 5f9c4e2 · 5f9c4e2
1 parent ae45301
commit 5f9c4e2
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 26 deletions.
diff --git a/docs/image.md b/docs/image.md
@@ -32,6 +32,7 @@
 - [`<Image>`](#image)
   - [Props](#props-1)
   - [Layout mode](#layout-mode)
+  - [Changing `data`](#changing-data)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -200,3 +201,14 @@ Example for `layout="fill"` (useful also for background images):
   />
 </div>
 ```
+
+### Changing `data`
+
+If the `data` prop changes over time, this component works like a regular `<img />` in a browser: the new image won't appear until it loads, while the old image stays visible. If you want the old image to disappear while loading, you can use a `key=` so that React sees the changing image as a new `<img />` instead of just changing the src attribute:
+
+```jsx
+<Image
+  key={imageData.src}
+  data={imageData}
+/>
+```
diff --git a/docs/structured-text.md b/docs/structured-text.md
@@ -10,7 +10,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-- [Table of Contents](#table-of-contents)
 - [Installation](#installation)
 - [Basic usage](#basic-usage)
 - [Custom renderers for inline records, blocks, and links](#custom-renderers-for-inline-records-blocks-and-links)

diff --git a/src/Image/__tests__/__snapshots__/index.test.tsx.snap b/src/Image/__tests__/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,6 @@ exports[`Image explicit sizes renders correctly 1`] = `
   sizes="(max-width: 600px) 200px, 50vw"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,
@@ -106,7 +105,6 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
   layout="fill"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "height": "100%",
@@ -166,7 +164,6 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
   layout="fill"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "height": "100%",
@@ -248,7 +245,6 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
   layout="fill"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "height": "100%",
@@ -328,7 +324,6 @@ exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
   layout="fill"
 >
   <div
-    key="/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "height": "100%",
@@ -413,7 +408,6 @@ exports[`Image layout=fill visible renders the image 1`] = `
   layout="fill"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "height": "100%",
@@ -500,7 +494,6 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
   layout="fixed"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -566,7 +559,6 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
   layout="fixed"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -654,7 +646,6 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
   layout="fixed"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -740,7 +731,6 @@ exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
   layout="fixed"
 >
   <div
-    key="/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -831,7 +821,6 @@ exports[`Image layout=fixed visible renders the image 1`] = `
   layout="fixed"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -924,7 +913,6 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
   layout="intrinsic"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,
@@ -991,7 +979,6 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
   layout="intrinsic"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,
@@ -1080,7 +1067,6 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
   layout="intrinsic"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,
@@ -1167,7 +1153,6 @@ exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
   layout="intrinsic"
 >
   <div
-    key="/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,
@@ -1259,7 +1244,6 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
   layout="intrinsic"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,
@@ -1353,7 +1337,6 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
   layout="responsive"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -1419,7 +1402,6 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
   layout="responsive"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -1507,7 +1489,6 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
   layout="responsive"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -1593,7 +1574,6 @@ exports[`Image layout=responsive visible renders the image (relative URL) 1`] =
   layout="responsive"
 >
   <div
-    key="/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -1684,7 +1664,6 @@ exports[`Image layout=responsive visible renders the image 1`] = `
   layout="responsive"
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "overflow": "hidden",
@@ -1795,7 +1774,6 @@ exports[`Image passing className and/or style renders correctly 1`] = `
 >
   <div
     className="class-name"
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "border": "1px solid red",
@@ -1902,7 +1880,6 @@ exports[`Image priority=true renders correctly 1`] = `
   priority={true}
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,
@@ -1989,7 +1966,6 @@ exports[`Image usePlaceholder=false renders correctly 1`] = `
   usePlaceholder={false}
 >
   <div
-    key="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
     style={
       {
         "maxWidth": 750,

diff --git a/src/Image/index.tsx b/src/Image/index.tsx
@@ -262,7 +262,6 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
 
     return (
       <div
-        key={data.src}
         ref={rootRef}
         className={className}
         style={{