@native-html/iframe-plugin/lib/module/useHtmlIframeProps.js

🌐 A WebView-based plugin to render iframes in react-native-render-html

import { Dimensions } from 'react-native';
import { useDocumentMetadata, useSharedProps, useNormalizedUrl, useRendererProps, useContentWidth } from 'react-native-render-html';
import extractPrintDimensions from './extractPrintDimensions';
const defaultIframeConfig = {
  webViewProps: {
    allowsFullscreenVideo: true
  }
};
/**
 * Extract props for the HTMLIframe component from renderer function arguments.
 * This function is especially usefull for custom iframe renderers.
 *
 * @param props - The props of a custom block renderer.
 * @param iframeConfig - Override config options.
 *
 * @public
 */

export default function useHtmlIframeProps({
  style,
  tnode
}, iframeConfig) {
  const {
    WebView,
    defaultWebViewProps,
    computeEmbeddedMaxWidth,
    provideEmbeddedHeaders
  } = useSharedProps();
  const contentWidth = useContentWidth();
  const globalIframeConfig = useRendererProps('iframe');
  const {
    onPress: onLinkPress
  } = useRendererProps('a');
  const resolvedConfig = { ...defaultIframeConfig,
    ...globalIframeConfig,
    ...iframeConfig,
    webViewProps: { ...defaultWebViewProps,
      ...defaultIframeConfig.webViewProps,
      ...(globalIframeConfig === null || globalIframeConfig === void 0 ? void 0 : globalIframeConfig.webViewProps),
      ...(iframeConfig === null || iframeConfig === void 0 ? void 0 : iframeConfig.webViewProps)
    }
  };
  const resolvedContentWidth = typeof contentWidth === 'number' ? contentWidth : Dimensions.get('window').width;
  const documentBaseUrl = useDocumentMetadata().baseUrl;
  const availableWidth = (computeEmbeddedMaxWidth === null || computeEmbeddedMaxWidth === void 0 ? void 0 : computeEmbeddedMaxWidth.call(null, resolvedContentWidth, 'iframe')) || resolvedContentWidth;
  const htmlAttribs = tnode.attributes;
  const normalizedUrl = useNormalizedUrl(htmlAttribs.src);
  const {
    width,
    height,
    ...restStyle
  } = style;
  const attrWidth = Number(htmlAttribs.width);
  const attrHeight = Number(htmlAttribs.height);
  const printConfig = {
    attrWidth: Number.isNaN(attrWidth) ? null : attrWidth,
    attrHeight: Number.isNaN(attrHeight) ? null : attrHeight,
    styleWidth: typeof width === 'string' ? null : width,
    styleHeight: typeof height === 'string' ? null : 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,
    baseUrl: documentBaseUrl
  } : {
    uri: normalizedUrl,
    headers: provideEmbeddedHeaders === null || provideEmbeddedHeaders === void 0 ? void 0 : provideEmbeddedHeaders(normalizedUrl, 'iframe', {
      printHeight,
      printWidth
    })
  };
  return { ...resolvedConfig,
    source,
    onLinkPress,
    htmlAttribs,
    scaleFactor,
    style: [restStyle, {
      width: printWidth,
      height: printHeight
    }],
    WebView
  };
}
//# sourceMappingURL=useHtmlIframeProps.js.map