Skip to content

Instantly share code, notes, and snippets.

@frovere

frovere/react-native-render-html-npm-6.3.4-35624feabf.patch

Last active August 13, 2024 16:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save frovere/9eee988d2384c0c24eb8a6a240e3acf1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save frovere/9eee988d2384c0c24eb8a6a240e3acf1 to your computer and use it in GitHub Desktop.
Download ZIP
react-native-render-html 6.3.4 default props patch
Raw
react-native-render-html-npm-6.3.4-35624feabf.patch
diff --git a/src/RenderHTMLConfigProvider.tsx b/src/RenderHTMLConfigProvider.tsx
index 0df5375f7aecf630f1440d0642f84b205b919b22..925062a4f4fca8748480867986906d23f58cd373 100644
--- a/src/RenderHTMLConfigProvider.tsx
+++ b/src/RenderHTMLConfigProvider.tsx
@@ -1,5 +1,4 @@
import React, { PropsWithChildren, ReactElement, useMemo } from 'react';
-import PropTypes from 'prop-types';
import RenderersPropsProvider from './context/RenderersPropsProvider';
import SharedPropsProvider from './context/SharedPropsProvider';
import TChildrenRenderersContext from './context/TChildrenRendererContext';
@@ -20,29 +19,6 @@ const childrenRendererContext = {
TNodeChildrenRenderer
};
-export type RenderHTMLConfigPropTypes = Record<keyof RenderHTMLConfig, any>;
-
-export const renderHTMLConfigPropTypes: RenderHTMLConfigPropTypes = {
- bypassAnonymousTPhrasingNodes: PropTypes.bool,
- defaultTextProps: PropTypes.object,
- defaultViewProps: PropTypes.object,
- enableExperimentalBRCollapsing: PropTypes.bool,
- enableExperimentalGhostLinesPrevention: PropTypes.bool,
- enableExperimentalMarginCollapsing: PropTypes.bool,
- remoteErrorView: PropTypes.func,
- remoteLoadingView: PropTypes.func,
- debug: PropTypes.bool,
- computeEmbeddedMaxWidth: PropTypes.func,
- renderersProps: PropTypes.object,
- WebView: PropTypes.any,
- GenericPressable: PropTypes.any,
- defaultWebViewProps: PropTypes.object,
- pressableHightlightColor: PropTypes.string,
- customListStyleSpecs: PropTypes.object,
- renderers: PropTypes.object,
- provideEmbeddedHeaders: PropTypes.func
-};
-
/**
* A component to provide configuration for {@link RenderHTMLSource}
* descendants, to be used in conjunction with {@link TRenderEngineProvider}.
@@ -85,8 +61,3 @@ export default function RenderHTMLConfigProvider(
</RenderRegistryProvider>
);
}
-
-/**
- * @ignore
- */
-RenderHTMLConfigProvider.propTypes = renderHTMLConfigPropTypes;
diff --git a/src/RenderHTMLSource.tsx b/src/RenderHTMLSource.tsx
index c91da52a1705a636869d3f8f36b66a70d04e8b7f..f71fea73caad1d0300efb399ae7479abd90ef6a2 100644
--- a/src/RenderHTMLSource.tsx
+++ b/src/RenderHTMLSource.tsx
@@ -1,7 +1,6 @@
import equals from 'ramda/src/equals';
import React, { memo, ReactElement, useMemo } from 'react';
import { Dimensions } from 'react-native';
-import PropTypes from 'prop-types';
import ttreeEventsContext from './context/ttreeEventsContext';
import isUriSource from './helpers/isUriSource';
import { SourceLoaderProps, TTreeEvents } from './internal-types';
@@ -20,34 +19,6 @@ import contentWidthContext from './context/contentWidthContext';
import isDomSource from './helpers/isDomSource';
import useProfiler from './hooks/useProfiler';
-export type RenderHTMLSourcePropTypes = Record<
- keyof RenderHTMLSourceProps,
- any
->;
-
-export const renderSourcePropTypes: RenderHTMLSourcePropTypes = {
- source: PropTypes.oneOfType([
- PropTypes.shape({
- html: PropTypes.string.isRequired,
- baseUrl: PropTypes.string
- }),
- PropTypes.shape({
- dom: PropTypes.object.isRequired,
- baseUrl: PropTypes.string
- }),
- PropTypes.shape({
- uri: PropTypes.string.isRequired,
- method: PropTypes.string,
- body: PropTypes.any,
- headers: PropTypes.object
- })
- ]),
- onTTreeChange: PropTypes.func,
- onHTMLLoaded: PropTypes.func,
- onDocumentMetadataLoaded: PropTypes.func,
- contentWidth: PropTypes.number
-};
-
function isEmptySource(source: undefined | HTMLSource) {
return (
!source ||
@@ -136,9 +107,4 @@ const RenderHTMLSource = memo(
}
);
-/**
- * @ignore
- */
-(RenderHTMLSource as any).propTypes = renderSourcePropTypes;
-
export default RenderHTMLSource;
diff --git a/src/TChildrenRenderer.tsx b/src/TChildrenRenderer.tsx
index 618a5926884faa389fa8004ef87cb0d597260f6a..e12888e58822d65d8a292c75c99d6bbdd049eff1 100644
--- a/src/TChildrenRenderer.tsx
+++ b/src/TChildrenRenderer.tsx
@@ -9,16 +9,4 @@ import renderChildren from './renderChildren';
const TChildrenRenderer: FunctionComponent<TChildrenRendererProps> =
renderChildren.bind(null);
-export const tchildrenRendererDefaultProps: Pick<
- TChildrenRendererProps,
- 'propsForChildren'
-> = {
- propsForChildren: {}
-};
-
-/**
- * @ignore
- */
-TChildrenRenderer.defaultProps = tchildrenRendererDefaultProps;
-
export default TChildrenRenderer;
diff --git a/src/TNodeChildrenRenderer.tsx b/src/TNodeChildrenRenderer.tsx
index bf5aef648c4b722d380c7c556f49f72675080b47..b820de0be2ae762b7ae442d6817779a7a7769ec0 100644
--- a/src/TNodeChildrenRenderer.tsx
+++ b/src/TNodeChildrenRenderer.tsx
@@ -1,7 +1,6 @@
import { ReactElement } from 'react';
import { TNode } from '@native-html/transient-render-engine';
import { useSharedProps } from './context/SharedPropsProvider';
-import { tchildrenRendererDefaultProps } from './TChildrenRenderer';
import {
TChildrenRendererProps,
TNodeChildrenRendererProps
@@ -73,9 +72,4 @@ function TNodeChildrenRenderer(
return renderChildren(useTNodeChildrenProps(props));
}
-/**
- * @ignore
- */
-TNodeChildrenRenderer.defaultProps = tchildrenRendererDefaultProps;
-
export default TNodeChildrenRenderer;
diff --git a/src/TNodeRenderer.tsx b/src/TNodeRenderer.tsx
index d32140ff348765d7ef96b7c9c729111b3685dc41..0804ba73d621060300dd3eb7f3ff0519510d943a 100644
--- a/src/TNodeRenderer.tsx
+++ b/src/TNodeRenderer.tsx
@@ -49,6 +49,7 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer(
const renderRegistry = useRendererRegistry();
const TNodeChildrenRenderer = useTNodeChildrenRenderer();
const tnodeProps = {
+ propsFromParent: { collapsedMarginTop: null },
...props,
TNodeChildrenRenderer,
sharedProps
@@ -120,16 +121,6 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer(
: React.createElement(Renderer as any, assembledProps);
});
-const defaultProps: Required<Pick<TNodeRendererProps<any>, 'propsFromParent'>> =
- {
- propsFromParent: {
- collapsedMarginTop: null
- }
- };
-
-// @ts-expect-error default props must be defined
-TNodeRenderer.defaultProps = defaultProps;
-
export {
TDefaultBlockRenderer,
TDefaultPhrasingRenderer,
diff --git a/src/TRenderEngineProvider.tsx b/src/TRenderEngineProvider.tsx
index 95b60df6295dd7779aaf6dd16741e0dd631b9bb4..96604c89fb985a753e454e50ea321cd7fc43156f 100644
--- a/src/TRenderEngineProvider.tsx
+++ b/src/TRenderEngineProvider.tsx
@@ -1,73 +1,13 @@
import TRenderEngine from '@native-html/transient-render-engine';
import React, { PropsWithChildren, ReactElement } from 'react';
-import { Platform } from 'react-native';
-import PropTypes from 'prop-types';
import useTRenderEngine from './hooks/useTRenderEngine';
import { TRenderEngineConfig } from './shared-types';
-import defaultSystemFonts from './defaultSystemFonts';
const defaultTRenderEngine = {} as any;
const TRenderEngineContext =
React.createContext<TRenderEngine>(defaultTRenderEngine);
-export const tRenderEngineProviderPropTypes: Record<
- keyof TRenderEngineConfig,
- any
-> = {
- customHTMLElementModels: PropTypes.object.isRequired,
- enableCSSInlineProcessing: PropTypes.bool,
- enableUserAgentStyles: PropTypes.bool,
- idsStyles: PropTypes.object,
- ignoredDomTags: PropTypes.array,
- ignoreDomNode: PropTypes.func,
- domVisitors: PropTypes.object,
- ignoredStyles: PropTypes.array.isRequired,
- allowedStyles: PropTypes.array,
- htmlParserOptions: PropTypes.object,
- tagsStyles: PropTypes.object,
- classesStyles: PropTypes.object,
- emSize: PropTypes.number.isRequired,
- baseStyle: PropTypes.object,
- systemFonts: PropTypes.arrayOf(PropTypes.string),
- fallbackFonts: PropTypes.shape({
- serif: PropTypes.string,
- 'sans-serif': PropTypes.string,
- monospace: PropTypes.string
- }),
- setMarkersForTNode: PropTypes.func,
- dangerouslyDisableHoisting: PropTypes.bool,
- dangerouslyDisableWhitespaceCollapsing: PropTypes.bool,
- selectDomRoot: PropTypes.func
-};
-
-/**
- * Default fallback font for special keys such as 'sans-serif', 'monospace',
- * 'serif', based on current platform.
- */
-export const defaultFallbackFonts = {
- 'sans-serif': Platform.select({ ios: 'system', default: 'sans-serif' }),
- monospace: Platform.select({ ios: 'Menlo', default: 'monospace' }),
- serif: Platform.select({ ios: 'Times New Roman', default: 'serif' })
-};
-
-export const defaultTRenderEngineProviderProps: TRenderEngineConfig = {
- htmlParserOptions: {
- decodeEntities: true
- },
- emSize: 14,
- ignoredDomTags: [],
- ignoredStyles: [],
- baseStyle: { fontSize: 14 },
- tagsStyles: {},
- classesStyles: {},
- enableUserAgentStyles: true,
- enableCSSInlineProcessing: true,
- customHTMLElementModels: {},
- fallbackFonts: defaultFallbackFonts,
- systemFonts: defaultSystemFonts
-};
-
/**
* Use the ambient transient render engine.
*
@@ -106,13 +46,3 @@ export default function TRenderEngineProvider({
</TRenderEngineContext.Provider>
);
}
-
-/**
- * @ignore
- */
-TRenderEngineProvider.defaultProps = defaultTRenderEngineProviderProps;
-
-/**
- * @ignore
- */
-TRenderEngineProvider.propTypes = tRenderEngineProviderPropTypes;
diff --git a/src/context/ListStyleSpecsProvider.tsx b/src/context/ListStyleSpecsProvider.tsx
index 822a4b76dd0028803bbce46fc4ba5a7325150df3..17226fc6c12be9659588885fa792fcf944d81357 100644
--- a/src/context/ListStyleSpecsProvider.tsx
+++ b/src/context/ListStyleSpecsProvider.tsx
@@ -1,6 +1,6 @@
/* eslint-disable react-native/no-inline-styles */
import { MarkerBoxProps } from '@jsamr/react-native-li';
-import { mapObjIndexed } from 'ramda';
+import mapObjIndexed from 'ramda/src/mapObjIndexed';
import React, {
createContext,
PropsWithChildren,
diff --git a/src/elements/IMGElement.tsx b/src/elements/IMGElement.tsx
index 573e7c15b63d7ab0294a8a96ba06cbbf0fbd139a..a6fc90b6c43e3e8806f4c6d603d1ba4b6bfda453 100644
--- a/src/elements/IMGElement.tsx
+++ b/src/elements/IMGElement.tsx
@@ -1,19 +1,13 @@
import React, { ReactElement, ReactNode } from 'react';
-import PropTypes from 'prop-types';
import useIMGElementState from './useIMGElementState';
import IMGElementContentSuccess from './IMGElementContentSuccess';
import IMGElementContainer from './IMGElementContainer';
import IMGElementContentLoading from './IMGElementContentLoading';
import IMGElementContentError from './IMGElementContentError';
import type { IMGElementProps } from './img-types';
-import defaultImageInitialDimensions from './defaultInitialImageDimensions';
export type { IMGElementProps } from './img-types';
-function identity(arg: any) {
- return arg;
-}
-
/**
* A component to render images based on an internal loading state.
*
@@ -44,42 +38,4 @@ function IMGElement(props: IMGElementProps): ReactElement {
);
}
-const imgDimensionsType = PropTypes.shape({
- width: PropTypes.number,
- height: PropTypes.number
-});
-
-const propTypes: Record<keyof IMGElementProps, any> = {
- source: PropTypes.object.isRequired,
- alt: PropTypes.string,
- altColor: PropTypes.string,
- height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
- computeMaxWidth: PropTypes.func.isRequired,
- contentWidth: PropTypes.number,
- enableExperimentalPercentWidth: PropTypes.bool,
- initialDimensions: imgDimensionsType,
- onPress: PropTypes.func,
- testID: PropTypes.string,
- objectFit: PropTypes.string,
- cachedNaturalDimensions: imgDimensionsType,
- containerProps: PropTypes.object
-};
-
-/**
- * @ignore
- */
-IMGElement.propTypes = propTypes;
-
-/**
- * @ignore
- */
-IMGElement.defaultProps = {
- enableExperimentalPercentWidth: false,
- computeMaxWidth: identity,
- imagesInitialDimensions: defaultImageInitialDimensions,
- style: {}
-};
-
export default IMGElement;
diff --git a/src/elements/extractImageStyleProps.ts b/src/elements/extractImageStyleProps.ts
index cc4beb2687060433bdc4f1f47e6888feb821b12e..7496f8d6f3aeb3ce331f642c2f3af6b8131f9f7b 100644
--- a/src/elements/extractImageStyleProps.ts
+++ b/src/elements/extractImageStyleProps.ts
@@ -6,7 +6,11 @@ import pick from 'ramda/src/pick';
const extractProps = pick<keyof ImageStyle>([
'resizeMode',
'tintColor',
- 'overlayColor'
+ 'overlayColor',
+ 'borderBottomLeftRadius',
+ 'borderBottomRightRadius',
+ 'borderTopLeftRadius',
+ 'borderTopRightRadius'
]);
function mapObjectFit(objectFit: WebBlockStyles['objectFit']) {
diff --git a/src/elements/useIMGElementState.ts b/src/elements/useIMGElementState.ts
index 6590d216887de1f4513cfa0843eb8237c31db913..4a5603e638db7f25818a262649b18236d6229e7c 100644
--- a/src/elements/useIMGElementState.ts
+++ b/src/elements/useIMGElementState.ts
@@ -100,6 +100,10 @@ function useFetchedNaturalDimensions(props: {
};
}
+function identity(arg: any) {
+ return arg;
+}
+
/**
* This hook will compute concrete dimensions from image natural dimensions and
* constraints. It will fetch the image and get its dimensions.
@@ -116,7 +120,7 @@ export default function useIMGElementState(
altColor,
source,
contentWidth,
- computeMaxWidth,
+ computeMaxWidth = identity,
objectFit,
initialDimensions = defaultImageInitialDimensions,
cachedNaturalDimensions
diff --git a/src/elements/useImageSpecifiedDimensions.ts b/src/elements/useImageSpecifiedDimensions.ts
index 5d6271b4803b3e21317d9793808cd4db5b59e8b0..37aa1eb67c90a185f88638e0589f8943a126bf02 100644
--- a/src/elements/useImageSpecifiedDimensions.ts
+++ b/src/elements/useImageSpecifiedDimensions.ts
@@ -71,8 +71,13 @@ function deriveSpecifiedDimensionsFromProps({
export default function useImageSpecifiedDimensions(
props: UseIMGElementStateProps
) {
- const { contentWidth, enableExperimentalPercentWidth, style, width, height } =
- props;
+ const {
+ contentWidth,
+ enableExperimentalPercentWidth = false,
+ style = {},
+ width,
+ height
+ } = props;
const flatStyle = useMemo(() => StyleSheet.flatten(style) || {}, [style]);
const specifiedDimensions = useMemo(
() =>
diff --git a/src/hooks/useTRenderEngine.ts b/src/hooks/useTRenderEngine.ts
index 6f706aa47491976ac91ecc19051b410221b5b8b9..3f5fec511aff2069b81e8ea1b41da774b9c494f6 100644
--- a/src/hooks/useTRenderEngine.ts
+++ b/src/hooks/useTRenderEngine.ts
@@ -1,32 +1,59 @@
import { useMemo } from 'react';
+import { Platform } from 'react-native';
import { TRenderEngineConfig } from '../shared-types';
import buildTREFromConfig from '../helpers/buildTREFromConfig';
import useProfiler from './useProfiler';
+import defaultSystemFonts from '../defaultSystemFonts';
+
+/**
+ * Default fallback font for special keys such as 'sans-serif', 'monospace',
+ * 'serif', based on current platform.
+ */
+export const defaultFallbackFonts = {
+ 'sans-serif': Platform.select({ ios: 'system', default: 'sans-serif' }),
+ monospace: Platform.select({ ios: 'Menlo', default: 'monospace' }),
+ serif: Platform.select({ ios: 'Times New Roman', default: 'serif' })
+};
+
+const defaultConfig = {
+ baseStyle: { fontSize: 14 },
+ classesStyles: {},
+ customHTMLElementModels: {},
+ emSize: 14,
+ enableCSSInlineProcessing: true,
+ enableUserAgentStyles: true,
+ fallbackFonts: defaultFallbackFonts,
+ htmlParserOptions: { decodeEntities: true },
+ ignoredDomTags: [],
+ ignoredStyles: [],
+ systemFonts: defaultSystemFonts,
+ tagsStyles: {}
+};
/**
* @internal
*/
export default function useTRenderEngine({
allowedStyles,
- baseStyle,
- classesStyles,
- customHTMLElementModels,
+ baseStyle = defaultConfig.baseStyle,
+ classesStyles = defaultConfig.classesStyles,
+ customHTMLElementModels = defaultConfig.customHTMLElementModels,
dangerouslyDisableHoisting,
dangerouslyDisableWhitespaceCollapsing,
domVisitors,
- emSize,
- enableCSSInlineProcessing,
- enableUserAgentStyles,
- fallbackFonts,
- htmlParserOptions,
+ emSize = defaultConfig.emSize,
+ enableCSSInlineProcessing = defaultConfig.enableCSSInlineProcessing,
+ enableUserAgentStyles = defaultConfig.enableUserAgentStyles,
+ fallbackFonts = defaultConfig.fallbackFonts,
+ htmlParserOptions = defaultConfig.htmlParserOptions,
idsStyles,
ignoreDomNode,
- ignoredDomTags,
- ignoredStyles,
+ ignoredDomTags = defaultConfig.ignoredDomTags,
+ ignoredStyles = defaultConfig.ignoredStyles,
selectDomRoot,
setMarkersForTNode,
- systemFonts,
- tagsStyles
+ systemFonts = defaultConfig.systemFonts,
+ tagsStyles = defaultConfig.tagsStyles
}: TRenderEngineConfig) {
const profile = useProfiler({ name: 'TRenderEngineProvider' });
return useMemo(() => {
diff --git a/src/index.ts b/src/index.ts
index 856958372cdcf28544648c9541aec91e5669207b..b59ec49eb9bcd2a7f16e1d5e161400138ccc294a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -128,7 +128,6 @@ export {
export { default as TNodeRenderer } from './TNodeRenderer';
export {
default as TRenderEngineProvider,
- defaultFallbackFonts,
useAmbientTRenderEngine
} from './TRenderEngineProvider';
export { default as RenderHTMLConfigProvider } from './RenderHTMLConfigProvider';
diff --git a/src/renderChildren.tsx b/src/renderChildren.tsx
index a66940282850bb1d250cdde88d8c7a0f78c7f6c3..be9ffd61d326e94fddda6ff382e1b58529c1f9c8 100644
--- a/src/renderChildren.tsx
+++ b/src/renderChildren.tsx
@@ -4,8 +4,6 @@ import TNodeRenderer from './TNodeRenderer';
import { TChildrenRendererProps } from './shared-types';
import collapseTopMarginForChild from './helpers/collapseTopMarginForChild';
-const empty = {};
-
const mapCollapsibleChildren = (
propsForChildren: TChildrenRendererProps['propsForChildren'],
renderChild: TChildrenRendererProps['renderChild'],
@@ -39,7 +37,7 @@ const mapCollapsibleChildren = (
export default function renderChildren({
tchildren,
- propsForChildren = empty,
+ propsForChildren = {},
disableMarginCollapsing,
renderChild
}: TChildrenRendererProps): ReactElement {
@frovere
Copy link
Copy Markdown
Author

frovere commented Aug 13, 2024

Related issue
meliorence/react-native-render-html#661

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment