feat: support "object-fit" CSS property for images

meliorence · Jun 4, 2021 · 24f72b0 · 24f72b0
1 parent 7b8b3d2
commit 24f72b0
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 16 deletions.
diff --git a/packages/render-html/package.json b/packages/render-html/package.json
@@ -88,7 +88,7 @@
   "dependencies": {
     "@jsamr/counter-style": "^2.0.0",
     "@jsamr/react-native-li": "^2.1.0",
-    "@native-html/transient-render-engine": "^8.2.0",
+    "@native-html/transient-render-engine": "^8.4.0",
     "@types/ramda": "^0.27.40",
     "@types/urijs": "^1.19.15",
     "prop-types": "^15.5.7",

diff --git a/packages/render-html/src/elements/IMGElement.tsx b/packages/render-html/src/elements/IMGElement.tsx
@@ -52,6 +52,7 @@ const propTypes: Record<keyof IMGElementProps, any> = {
   initialDimensions: imgDimensionsType,
   onPress: PropTypes.func,
   testID: PropTypes.string,
+  objectFit: PropTypes.string,
   cachedNaturalDimensions: imgDimensionsType
 };
 

diff --git a/packages/render-html/src/elements/extractImageStyleProps.ts b/packages/render-html/src/elements/extractImageStyleProps.ts
@@ -1,10 +1,42 @@
 import { ImageStyle } from 'react-native';
+import { WebBlockStyles } from '@native-html/transient-render-engine';
+
 import pick from 'ramda/src/pick';
 
-const extractImageStyleProps = pick<keyof ImageStyle>([
+const extractProps = pick<keyof ImageStyle>([
   'resizeMode',
   'tintColor',
   'overlayColor'
 ]);
 
+function mapObjectFit(objectFit: WebBlockStyles['objectFit']) {
+  let resizeMode: ImageStyle['resizeMode'];
+  switch (objectFit) {
+    case 'contain':
+    case 'cover':
+      resizeMode = objectFit;
+      break;
+    case 'fill':
+      resizeMode = 'stretch';
+      break;
+    case 'scale-down':
+      resizeMode = 'contain';
+      break;
+    default:
+      return null;
+  }
+  return { resizeMode };
+}
+
+function extractImageStyleProps(
+  style: any,
+  objectFit?: WebBlockStyles['objectFit']
+) {
+  const resizeModeFromFit = objectFit ? mapObjectFit(objectFit) : null;
+  return {
+    ...extractProps(style),
+    ...resizeModeFromFit
+  };
+}
+
 export default extractImageStyleProps;
diff --git a/packages/render-html/src/elements/img-types.ts b/packages/render-html/src/elements/img-types.ts
@@ -6,6 +6,7 @@ import {
   ViewStyle
 } from 'react-native';
 import { ImageDimensions } from '../shared-types';
+import { WebBlockStyles } from '@native-html/transient-render-engine';
 
 export type UseIMGElementStateWithCacheProps = UseIMGElementStateProps &
   Required<Pick<UseIMGElementStateProps, 'cachedNaturalDimensions'>>;
@@ -17,6 +18,7 @@ export interface UseIMGElementStateProps {
   height?: string | number;
   width?: string | number;
   style?: StyleProp<ImageStyle>;
+  objectFit?: WebBlockStyles['objectFit'];
   computeMaxWidth?: (containerWidth: number) => number;
   contentWidth?: number;
   enableExperimentalPercentWidth?: boolean;

diff --git a/packages/render-html/src/elements/useIMGElementState.ts b/packages/render-html/src/elements/useIMGElementState.ts
@@ -78,6 +78,7 @@ export default function useIMGElementState(
     source,
     contentWidth,
     computeMaxWidth,
+    objectFit,
     initialDimensions = defaultImageInitialDimensions
   } = props;
   const {
@@ -112,7 +113,7 @@ export default function useIMGElementState(
         source,
         onError,
         containerStyle: flatStyle,
-        imageStyle: extractImageStyleProps(flatStyle),
+        imageStyle: extractImageStyleProps(flatStyle, objectFit),
         dimensions: concreteDimensions
       }
     : {

diff --git a/packages/render-html/src/elements/useIMGElementStateWithCache.ts b/packages/render-html/src/elements/useIMGElementStateWithCache.ts
@@ -22,6 +22,7 @@ export default function useIMGElementStateWithCache(
     source,
     contentWidth,
     computeMaxWidth,
+    objectFit,
     initialDimensions = defaultImageInitialDimensions
   } = props;
   const {
@@ -53,7 +54,7 @@ export default function useIMGElementStateWithCache(
         alt,
         altColor,
         containerStyle: flatStyle as any,
-        imageStyle: extractImageStyleProps(flatStyle),
+        imageStyle: extractImageStyleProps(flatStyle, objectFit),
         dimensions: concreteDimensions,
         source,
         onError

diff --git a/packages/render-html/src/renderers/IMGRenderer.tsx b/packages/render-html/src/renderers/IMGRenderer.tsx
@@ -33,7 +33,8 @@ export function useIMGElementProps(
     source: { uri: useNormalizedUrl(src) },
     style: style as ImageStyle,
     width: tnode.attributes.width,
-    height: tnode.attributes.height
+    height: tnode.attributes.height,
+    objectFit: tnode.styles.webBlockRet.objectFit
   };
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -4039,23 +4039,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@native-html/css-processor@npm:1.8.1":
-  version: 1.8.1
-  resolution: "@native-html/css-processor@npm:1.8.1"
+"@native-html/css-processor@npm:1.9.0":
+  version: 1.9.0
+  resolution: "@native-html/css-processor@npm:1.9.0"
   dependencies:
     css-to-react-native: ^3.0.0
   peerDependencies:
+    "@types/react": "*"
     "@types/react-native": "*"
-    csstype: ^3.0.4
-  checksum: 6c42ce1fb600b2e59922059453f09ca0ad77a95044efb53378befcb53fc858f762fa5979b4fb44d49de27c01ef32c3cae284d87813a4913e9560f0a7fd3a210c
+    csstype: ^3.0.8
+  checksum: 912edb8283ed20fb1340401403c0f6209d92e225431075423af6344df5f31fb0eff8cdbc8c19b769eefd9d100a59b8c77b7270986f6a9fe253d9e363f849a06e
   languageName: node
   linkType: hard
 
-"@native-html/transient-render-engine@npm:^8.2.0":
-  version: 8.2.0
-  resolution: "@native-html/transient-render-engine@npm:8.2.0"
+"@native-html/transient-render-engine@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "@native-html/transient-render-engine@npm:8.4.0"
   dependencies:
-    "@native-html/css-processor": 1.8.1
+    "@native-html/css-processor": 1.9.0
     "@types/ramda": ^0.27.40
     csstype: ^3.0.8
     domelementtype: ^2.2.0
@@ -4065,7 +4066,7 @@ __metadata:
   peerDependencies:
     "@types/react-native": "*"
     react-native: ^0.63.0
-  checksum: 0e72f1f857a3998af45855eca3112bf028fef2ad9cd5aba98c368b4f24cdb548ca7d45c718bd006b43fc4901940abc4cd8d84d435042540ff261edbe6d719305
+  checksum: 6ced1df682d8cff6c09acbfcf8b15178b9ffdd5511484f62698a0de12fb8d852362bb3759ce9132224512d6d60bb55e4071039c14a7e67679410ac769574d957
   languageName: node
   linkType: hard
 
@@ -20271,7 +20272,7 @@ fsevents@^1.2.7:
     "@jsamr/counter-style": ^2.0.0
     "@jsamr/react-native-li": ^2.1.0
     "@microsoft/api-extractor": ^7.14.0
-    "@native-html/transient-render-engine": ^8.2.0
+    "@native-html/transient-render-engine": ^8.4.0
     "@release-it/conventional-changelog": ^2.0.1
     "@testing-library/react-hooks": ^5.1.2
     "@types/jest": ^26.0.23