feat(iframe-plugin): new autoscale config

jsamr · jsamr · commit 8f5c030e7080 · 2020-12-04T21:24:45.000-03:00
When this config is enabled (default), the WebView will be scaled down
to fit the contentWidth.
diff --git a/packages/iframe-plugin/README.md b/packages/iframe-plugin/README.md
@@ -48,6 +48,7 @@ yarn add @native-html/iframe-plugin react-native-webview
 - Supports `onLinkPress`;
 - Supports `defaultWebViewProps`;
 - Compliance with [RFC001](https://github.com/archriss/react-native-render-html/blob/master/rfc/001-A-deterministic-approach-to-embedded-content-scaling.adoc#L13): scales to available width;
+- Autoscale feature (adapt zoom level to available width! Enabled by default.);
 - A single renderer function exported as default, super easy to plug-in!
 - Compatible with `react-native-web` via [`@formidable-webview/web`](https://github.com/formidable-webview/ubiquitous/tree/master/packages/web#readme)
 
@@ -81,6 +82,7 @@ const renderers = {
       WebView={WebView}
       source={{ html: '<iframe ...></iframe>' }}
       defaultWebViewProps={{ /* Any prop you want to pass to WebView */ }}
+      renderersProps={{ iframe: { autoscale: true /* enabled by default */ }}}
 />
 
 ```
diff --git a/packages/iframe-plugin/etc/iframe-plugin.api.md b/packages/iframe-plugin/etc/iframe-plugin.api.md
@@ -4,7 +4,44 @@
 
 ```ts
 
+import { ComponentType } from 'react';
+import { ContainerProps } from 'react-native-render-html';
+import { HtmlAttributesDictionary } from 'react-native-render-html';
+import { PassProps } from 'react-native-render-html';
+import { default as React_2 } from 'react';
 import { RendererFunction } from 'react-native-render-html';
+import { StyleProp } from 'react-native';
+import { ViewStyle } from 'react-native';
+
+// @public
+export function extractHtmlIframeProps(htmlAttribs: HtmlAttributesDictionary, convertedCSSStyles: StyleProp<any>, passProps: PassProps<any>): HTMLIframeProps;
+
+// @public
+export function HTMLIframe({ WebView, webViewProps: userWebViewProps, source, style, onLinkPress, htmlAttribs, scaleFactor, autoscale }: HTMLIframeProps): React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)>;
+
+// @public
+export interface HTMLIframeConfig {
+    autoscale: boolean;
+}
+
+// @public
+export interface HTMLIframeProps<WebViewProps = any> extends HTMLIframeConfig {
+    // (undocumented)
+    htmlAttribs: HtmlAttributesDictionary;
+    // (undocumented)
+    onLinkPress?: ContainerProps['onLinkPress'];
+    scaleFactor: number;
+    // (undocumented)
+    source: {
+        uri?: string;
+        html?: string;
+    };
+    // (undocumented)
+    style: StyleProp<ViewStyle>;
+    WebView: ComponentType<WebViewProps>;
+    // (undocumented)
+    webViewProps?: WebViewProps;
+}
 
 // @public
 const iframe: RendererFunction<any>;
diff --git a/packages/iframe-plugin/package.json b/packages/iframe-plugin/package.json
@@ -59,7 +59,7 @@
     "typescript": "~3.9.7"
   },
   "dependencies": {
-    "@formidable-webview/webshell": "^2.1.0",
+    "@formidable-webview/webshell": "^2.2.0",
     "@types/prop-types": "^15.7.3",
     "prop-types": "^15.7.2"
   },
diff --git a/packages/iframe-plugin/src/HTMLIframe.tsx b/packages/iframe-plugin/src/HTMLIframe.tsx
@@ -1,65 +1,98 @@
 import React, { ComponentType, useCallback, useMemo } from 'react';
-import makeWebshell, {
+import {
   HandleLinkPressFeature,
-  LinkPressTarget
+  ForceResponsiveViewportFeature,
+  LinkPressTarget,
+  useWebshell
 } from '@formidable-webview/webshell';
 import { StyleProp, ViewStyle } from 'react-native';
 import {
   ContainerProps,
   HtmlAttributesDictionary
 } from 'react-native-render-html';
 
-export interface HTMLIframeProps<WebViewProps = any> {
+/**
+ * Configuration options for the HTMLIframe component.
+ * You can pass those options through `renderersProps.iframe`
+ * HTML prop.
+ *
+ * @public
+ */
+export interface HTMLIframeConfig {
   /**
-   * The `WebView` Component you wish to use.
+   * When the iframe attribute width is wider than the contentWidth, scales
+   * down the viewport so that it doesn't overflows horizontally.
+   *
+   * @defaultvalue true
    */
-  WebView: ComponentType<WebViewProps>;
+  autoscale: boolean;
+}
+
+/**
+ * Props for the HTMLIframe component.
+ *
+ * @public
+ */
+export interface HTMLIframeProps<WebViewProps = any> extends HTMLIframeConfig {
   /**
-   * Any props you'd like to pass to {@link TableConfig.WebView}.
-   *
-   * @remarks
-   * `source` and `javascriptEnabled` will be ignored and overriden. Also, you
-   * should pass a stable or memoized object to avoid extraneous renderings.
-   * See `React.useMemo`.
+   * The `WebView` Component you wish to use.
    */
+  WebView: ComponentType<WebViewProps>;
   webViewProps?: WebViewProps;
   source: { uri?: string; html?: string };
-  key: string;
   style: StyleProp<ViewStyle>;
   onLinkPress?: ContainerProps['onLinkPress'];
   htmlAttribs: HtmlAttributesDictionary;
+  /**
+   * When autoscale is enabled, scales the WebView zoom level to make sure the
+   * viewport fits contentWidth.
+   */
+  scaleFactor: number;
 }
 
+const features = [new HandleLinkPressFeature({ preventDefault: true })];
+
+/**
+ * A component to render iframes in react-native-render-html.
+ *
+ * @public
+ */
 export default function HTMLIframe({
   WebView,
-  webViewProps,
+  webViewProps: userWebViewProps,
   source,
   style,
-  key,
   onLinkPress,
-  htmlAttribs
+  htmlAttribs,
+  scaleFactor,
+  autoscale = true
 }: HTMLIframeProps) {
-  const Webshell = useMemo(
+  const scaleFeature = useMemo(
     () =>
-      makeWebshell(
-        WebView,
-        new HandleLinkPressFeature({ preventDefault: true })
-      ),
-    [WebView]
+      autoscale
+        ? new ForceResponsiveViewportFeature({
+            initScale: scaleFactor,
+            maxScale: scaleFactor,
+            minScale: scaleFactor
+          })
+        : null,
+    [scaleFactor, autoscale]
   );
   const onDOMLinkPress = useCallback(
     ({ uri }: LinkPressTarget) =>
       onLinkPress?.call(null, { nativeEvent: {} } as any, uri, htmlAttribs),
     [onLinkPress, htmlAttribs]
   );
-  return (
-    <Webshell
-      testID="iframe"
-      key={key}
-      source={source}
-      style={style}
-      onDOMLinkPress={onDOMLinkPress}
-      {...webViewProps}
-    />
-  );
+  const webViewProps = useWebshell({
+    features: [...features, scaleFeature as any],
+    props: {
+      ...userWebViewProps,
+      onDOMLinkPress,
+      style,
+      source,
+      testID: 'iframe',
+      allowsFullscreenVideo: true
+    }
+  });
+  return React.createElement(WebView, webViewProps);
 }
diff --git a/packages/iframe-plugin/src/extractHtmlIframeProps.ts b/packages/iframe-plugin/src/extractHtmlIframeProps.ts
@@ -1,37 +1,39 @@
-import React from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
-import { RendererFunction, constructStyles } from 'react-native-render-html';
+import { Dimensions, StyleProp, StyleSheet } from 'react-native';
+import {
+  constructStyles,
+  HtmlAttributesDictionary,
+  PassProps
+} from 'react-native-render-html';
 import extractPrintDimensions from './extractPrintDimensions';
-import HTMLIframe from './HTMLIframe';
+import { HTMLIframeProps } from './HTMLIframe';
 
 function normalizeUri(uri: string): string {
   return uri.startsWith('//') ? `https:${uri}` : uri;
 }
 
 /**
- * The renderer function for the iframe element. This renderer is fully
- * scalable, and will adjust to `contentWidth` and `computeEmbeddedMaxWidth`.
- * It also features `onLinkPress`.
+ * Extract props for the HTMLIframe component from renderer function arguments.
+ * This function is especially usefull for custom iframe renderers.
  *
- * @param htmlAttribs - HTML attributes of the element.
- * @param children - The children (ignored)
- * @param convertedCSSStyles - Inline styles
- * @param passProps - Passed props from the root component.
+ * @param htmlAttribs - The HTML node attributes.
+ * @param convertedCSSStyles - Converted inline styles.
+ * @param passProps - Passed props.
  *
  * @public
  */
-const iframe: RendererFunction<any> = function iframe(
-  htmlAttribs,
-  children,
-  convertedCSSStyles,
-  passProps
-) {
+export default function extractHtmlIframeProps(
+  htmlAttribs: HtmlAttributesDictionary,
+  convertedCSSStyles: StyleProp<any>,
+  passProps: PassProps<any>
+): HTMLIframeProps {
   const {
     WebView,
     contentWidth,
     onLinkPress,
     computeEmbeddedMaxWidth,
-    defaultWebViewProps
+    defaultWebViewProps,
+    key,
+    renderersProps: { iframe: iframeConfig }
   } = passProps;
   const resolvedContentWidth =
     typeof contentWidth === 'number'
@@ -53,13 +55,19 @@ const iframe: RendererFunction<any> = function iframe(
 
   const attrWidth = Number(htmlAttribs.width);
   const attrHeight = Number(htmlAttribs.height);
-  const { printWidth, printHeight } = extractPrintDimensions({
+  const printConfig = {
     attrWidth: Number.isNaN(attrWidth) ? null : attrWidth,
     attrHeight: Number.isNaN(attrHeight) ? null : attrHeight,
     styleWidth: width,
     styleHeight: height,
     contentWidth: availableWidth
-  });
+  };
+  const { printWidth, printHeight } = extractPrintDimensions(printConfig);
+  const scaleFactor =
+    typeof printConfig.attrWidth === 'number' &&
+    printConfig.attrWidth > printWidth
+      ? printWidth / attrWidth
+      : 1;
 
   const source = htmlAttribs.srcdoc
     ? { html: htmlAttribs.srcdoc as string }
@@ -70,18 +78,15 @@ const iframe: RendererFunction<any> = function iframe(
       "@native-html/iframe-plugin: You must pass a WebView component from react-native-webview as a prop to the HTML component. The iframe won't be rendered."
     );
   }
-
-  return WebView ? (
-    <HTMLIframe
-      key={passProps.key}
-      source={source}
-      style={[restStyle, { width: printWidth, height: printHeight }]}
-      WebView={WebView}
-      htmlAttribs={htmlAttribs}
-      onLinkPress={onLinkPress}
-      webViewProps={defaultWebViewProps}
-    />
-  ) : null;
-};
-
-export default iframe;
+  return {
+    ...iframeConfig,
+    key,
+    source,
+    onLinkPress,
+    htmlAttribs,
+    scaleFactor,
+    style: [restStyle, { width: printWidth, height: printHeight }],
+    webViewProps: defaultWebViewProps,
+    WebView
+  };
+}
diff --git a/packages/iframe-plugin/src/iframe.ts b/packages/iframe-plugin/src/iframe.ts
@@ -0,0 +1,33 @@
+import React from 'react';
+import { RendererFunction } from 'react-native-render-html';
+import extractHtmlIframeProps from './extractHtmlIframeProps';
+import HTMLIframe from './HTMLIframe';
+
+/**
+ * The renderer function for the iframe element. This renderer is fully
+ * scalable, and will adjust to `contentWidth` and `computeEmbeddedMaxWidth`.
+ * It also features `onLinkPress`.
+ *
+ * @param htmlAttribs - HTML attributes of the element.
+ * @param children - The children (ignored)
+ * @param convertedCSSStyles - Inline styles
+ * @param passProps - Passed props from the root component.
+ *
+ * @public
+ */
+const iframe: RendererFunction<any> = function iframe(
+  htmlAttribs,
+  children,
+  convertedCSSStyles,
+  passProps
+) {
+  const props = extractHtmlIframeProps(
+    htmlAttribs,
+    convertedCSSStyles,
+    passProps
+  );
+
+  return props.WebView ? React.createElement(HTMLIframe, props) : null;
+};
+
+export default iframe;
diff --git a/packages/iframe-plugin/src/index.ts b/packages/iframe-plugin/src/index.ts
@@ -0,0 +1,4 @@
+export { default } from './iframe';
+export { default as extractHtmlIframeProps } from './extractHtmlIframeProps';
+export { default as HTMLIframe } from './HTMLIframe';
+export type { HTMLIframeProps, HTMLIframeConfig } from './HTMLIframe';
