feat: rework image component to simplify and add additional functiona…

…lity
necolas · Jan 27, 2022 · 7f8ad0f · 7f8ad0f
1 parent 081a128
commit 7f8ad0f
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 243 deletions.
diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
@@ -5,13 +5,9 @@ exports[`components/Image prop "accessibilityLabel" 1`] = `
   aria-label="accessibilityLabel"
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt="accessibilityLabel"
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -22,15 +18,12 @@ exports[`components/Image prop "blurRadius" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico); filter: blur(5px);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
+    style="filter: blur(5px);"
   />
 </div>
 `;
@@ -40,15 +33,12 @@ exports[`components/Image prop "defaultSource" does not override "height" and "w
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   style="height: 20px; width: 40px;"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
+    style="height: 20px; width: 40px;"
   />
 </div>
 `;
@@ -58,13 +48,9 @@ exports[`components/Image prop "defaultSource" sets "height" and "width" styles
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   style="height: 10px; width: 20px;"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -75,13 +61,9 @@ exports[`components/Image prop "defaultSource" sets background image when value
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -92,13 +74,9 @@ exports[`components/Image prop "defaultSource" sets background image when value
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -109,13 +87,9 @@ exports[`components/Image prop "draggable" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="true"
     src="https://google.com/favicon.ico"
   />
@@ -126,95 +100,59 @@ exports[`components/Image prop "focusable" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   tabindex="0"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "nativeID" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   id="nativeID"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "contain" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-ehq7j7 r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "cover" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "none" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-p9m3gb r-backgroundRepeat-u6sd8q r-backgroundSize-1sxrcry r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "repeat" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-p9m3gb r-backgroundRepeat-17leim2 r-backgroundSize-1sxrcry r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-x3cy2q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "source" is correctly updated only when loaded if defaultSource provided 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://testing.com/preview.jpg);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://testing.com/preview.jpg"
   />
@@ -225,13 +163,9 @@ exports[`components/Image prop "source" is correctly updated only when loaded if
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://testing.com/fullSize.jpg);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://testing.com/fullSize.jpg"
   />
@@ -242,13 +176,9 @@ exports[`components/Image prop "source" is correctly updated when missing in ini
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://testing.com/img.jpg);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://testing.com/img.jpg"
   />
@@ -259,13 +189,9 @@ exports[`components/Image prop "source" is not set immediately if the image has
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -276,13 +202,9 @@ exports[`components/Image prop "source" is set immediately if the image has alre
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
   />
@@ -293,13 +215,9 @@ exports[`components/Image prop "source" is set immediately if the image has alre
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://twitter.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://twitter.com/favicon.ico"
   />
@@ -310,13 +228,9 @@ exports[`components/Image prop "source" is set immediately if the image was prel
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://yahoo.com/favicon.ico);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://yahoo.com/favicon.ico"
   />
@@ -327,16 +241,12 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="filter: url(#tint-57);"
-  />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-56"
       >
         <feflood
           flood-color="blue"
@@ -354,44 +264,32 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 exports[`components/Image prop "style" supports "resizeMode" property 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-ehq7j7 r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "style" supports "shadow" properties (convert to filter) 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="filter: drop-shadow(1px 1px 0px rgba(255,0,0,1.00));"
-  />
-</div>
+/>
 `;
 
 exports[`components/Image prop "style" supports "tintcolor" property (convert to filter) 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
 >
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
-  />
   <img
     alt=""
-    class="css-accessibilityImage-9pa8cd"
+    class="css-image-1mi6z7k r-objectFit-1t7uo4s"
     draggable="false"
     src="https://google.com/favicon.ico"
+    style="filter: url(#tint-55);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-56"
+        id="tint-55"
       >
         <feflood
           flood-color="red"
@@ -410,9 +308,5 @@ exports[`components/Image prop "testID" 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   data-testid="testID"
->
-  <div
-    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-  />
-</div>
+/>
 `;