Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: meliorence/react-native-render-html
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: nghiaphunguyen/react-native-render-html
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 2 commits
  • 2 files changed
  • 1 contributor

Commits on Jul 14, 2019

  1. re-order getImageSize after component mounted

    @nghiaphunguyen
    nghiaphunguyen committed Jul 14, 2019
    Copy the full SHA
    b9b2d78 View commit details

Commits on Jul 24, 2019

  1. update opacity to 1

    @nghiaphunguyen
    nghiaphunguyen committed Jul 24, 2019
    Copy the full SHA
    c828caf View commit details
Showing with 188 additions and 149 deletions.
  1. +1 −1 src/HTMLImage.js
  2. +187 −148 src/HTMLRenderers.js
2 changes: 1 addition & 1 deletion src/HTMLImage.js
View file
Original file line number Diff line number Diff line change
@@ -32,8 +32,8 @@ export default class HTMLImage extends PureComponent {
}

componentDidMount () {
this.getImageSize();
this.mounted = true;
this.getImageSize();
}

componentWillUnmount () {
335 changes: 187 additions & 148 deletions src/HTMLRenderers.js
View file
Original file line number Diff line number Diff line change
@@ -1,172 +1,211 @@
import React from 'react';
import { TouchableOpacity, Text, View, WebView, Platform } from 'react-native';
import { _constructStyles, _getElementClassStyles } from './HTMLStyles';
import HTMLImage from './HTMLImage';

export function a (htmlAttribs, children, convertedCSSStyles, passProps) {
const style = _constructStyles({
tagName: 'a',
htmlAttribs,
passProps,
styleSet: passProps.parentWrapper === 'Text' ? 'TEXT' : 'VIEW'
});
// !! This deconstruction needs to happen after the styles construction since
// the passed props might be altered by it !!
const { parentWrapper, onLinkPress, key, data } = passProps;
const onPress = (evt) => onLinkPress && htmlAttribs && htmlAttribs.href ?
onLinkPress(evt, htmlAttribs.href, htmlAttribs) :
undefined;

if (parentWrapper === 'Text') {
return (
<Text {...passProps} style={style} onPress={onPress} key={key}>
{ children || data }
</Text>
);
} else {
return (
<TouchableOpacity onPress={onPress} key={key}>
{ children || data }
</TouchableOpacity>
);
}
}

export function img (htmlAttribs, children, convertedCSSStyles, passProps = {}) {
if (!htmlAttribs.src) {
return false;
}

const style = _constructStyles({
tagName: 'img',
htmlAttribs,
passProps,
styleSet: 'IMAGE'
});
const { src, alt, width, height } = htmlAttribs;
import React from "react";
import { TouchableOpacity, Text, View, WebView, Platform } from "react-native";
import { _constructStyles, _getElementClassStyles } from "./HTMLStyles";
import HTMLImage from "./HTMLImage";

export function a(htmlAttribs, children, convertedCSSStyles, passProps) {
const style = _constructStyles({
tagName: "a",
htmlAttribs,
passProps,
styleSet: passProps.parentWrapper === "Text" ? "TEXT" : "VIEW"
});
// !! This deconstruction needs to happen after the styles construction since
// the passed props might be altered by it !!
const { parentWrapper, onLinkPress, key, data } = passProps;
const onPress = evt =>
onLinkPress && htmlAttribs && htmlAttribs.href
? onLinkPress(evt, htmlAttribs.href, htmlAttribs)
: undefined;

if (parentWrapper === "Text") {
return (
<HTMLImage
source={{ uri: src }}
alt={alt}
width={width}
height={height}
style={style}
{...passProps}
/>
<Text {...passProps} style={style} onPress={onPress} key={key}>
{children || data}
</Text>
);
} else {
return (
<TouchableOpacity activeOpacity={1} onPress={onPress} key={key}>
{children || data}
</TouchableOpacity>
);
}
}

export function img(htmlAttribs, children, convertedCSSStyles, passProps = {}) {
if (!htmlAttribs.src) {
return false;
}

const style = _constructStyles({
tagName: "img",
htmlAttribs,
passProps,
styleSet: "IMAGE"
});
const { src, alt, width, height } = htmlAttribs;
return (
<HTMLImage
source={{ uri: src }}
alt={alt}
width={width}
height={height}
style={style}
{...passProps}
/>
);
}

export function ul (htmlAttribs, children, convertedCSSStyles, passProps = {}) {
const style = _constructStyles({
tagName: 'ul',
export function ul(htmlAttribs, children, convertedCSSStyles, passProps = {}) {
const style = _constructStyles({
tagName: "ul",
htmlAttribs,
passProps,
styleSet: "VIEW"
});
const {
allowFontScaling,
rawChildren,
nodeIndex,
key,
baseFontStyle,
listsPrefixesRenderers
} = passProps;
const baseFontSize = baseFontStyle.fontSize || 14;

children =
children &&
children.map((child, index) => {
const rawChild = rawChildren[index];
let prefix = false;
const rendererArgs = [
htmlAttribs,
passProps,
styleSet: 'VIEW'
});
const { allowFontScaling, rawChildren, nodeIndex, key, baseFontStyle, listsPrefixesRenderers } = passProps;
const baseFontSize = baseFontStyle.fontSize || 14;

children = children && children.map((child, index) => {
const rawChild = rawChildren[index];
let prefix = false;
const rendererArgs = [
htmlAttribs,
children,
convertedCSSStyles,
{
...passProps,
index
}
];

if (rawChild) {
if (rawChild.parentTag === 'ul' && rawChild.tagName === 'li') {
prefix = listsPrefixesRenderers && listsPrefixesRenderers.ul ? listsPrefixesRenderers.ul(...rendererArgs) : (
<View style={{
marginRight: 10,
width: baseFontSize / 2.8,
height: baseFontSize / 2.8,
marginTop: baseFontSize / 2,
borderRadius: baseFontSize / 2.8,
backgroundColor: 'black'
}} />
);
} else if (rawChild.parentTag === 'ol' && rawChild.tagName === 'li') {
prefix = listsPrefixesRenderers && listsPrefixesRenderers.ol ? listsPrefixesRenderers.ol(...rendererArgs) : (
<Text allowFontScaling={allowFontScaling} style={{ marginRight: 5, fontSize: baseFontSize }}>{ index + 1 })</Text>
);
}
children,
convertedCSSStyles,
{
...passProps,
index
}
return (
<View key={`list-${nodeIndex}-${index}-${key}`} style={{ flexDirection: 'row', marginBottom: 10 }}>
{ prefix }
<View style={{ flex: 1 }}>{ child }</View>
</View>
);
});
return (
<View style={style} key={key}>
{ children }
];

if (rawChild) {
if (rawChild.parentTag === "ul" && rawChild.tagName === "li") {
prefix =
listsPrefixesRenderers && listsPrefixesRenderers.ul ? (
listsPrefixesRenderers.ul(...rendererArgs)
) : (
<View
style={{
marginRight: 10,
width: baseFontSize / 2.8,
height: baseFontSize / 2.8,
marginTop: baseFontSize / 2,
borderRadius: baseFontSize / 2.8,
backgroundColor: "black"
}}
/>
);
} else if (rawChild.parentTag === "ol" && rawChild.tagName === "li") {
prefix =
listsPrefixesRenderers && listsPrefixesRenderers.ol ? (
listsPrefixesRenderers.ol(...rendererArgs)
) : (
<Text
allowFontScaling={allowFontScaling}
style={{ marginRight: 5, fontSize: baseFontSize }}
>
{index + 1})
</Text>
);
}
}
return (
<View
key={`list-${nodeIndex}-${index}-${key}`}
style={{ flexDirection: "row", marginBottom: 10 }}
>
{prefix}
<View style={{ flex: 1 }}>{child}</View>
</View>
);
);
});
return (
<View style={style} key={key}>
{children}
</View>
);
}
export const ol = ul;

export function iframe (htmlAttribs, children, convertedCSSStyles, passProps) {
const { staticContentMaxWidth, tagsStyles, classesStyles } = passProps;
export function iframe(htmlAttribs, children, convertedCSSStyles, passProps) {
const { staticContentMaxWidth, tagsStyles, classesStyles } = passProps;

const tagStyleHeight = tagsStyles.iframe && tagsStyles.iframe.height;
const tagStyleWidth = tagsStyles.iframe && tagsStyles.iframe.width;
const tagStyleHeight = tagsStyles.iframe && tagsStyles.iframe.height;
const tagStyleWidth = tagsStyles.iframe && tagsStyles.iframe.width;

const classStyles = _getElementClassStyles(htmlAttribs, classesStyles);
const classStyleWidth = classStyles.width;
const classStyleHeight = classStyles.height;
const classStyles = _getElementClassStyles(htmlAttribs, classesStyles);
const classStyleWidth = classStyles.width;
const classStyleHeight = classStyles.height;

const attrHeight = htmlAttribs.height ? parseInt(htmlAttribs.height) : false;
const attrWidth = htmlAttribs.width ? parseInt(htmlAttribs.width) : false;
const attrHeight = htmlAttribs.height ? parseInt(htmlAttribs.height) : false;
const attrWidth = htmlAttribs.width ? parseInt(htmlAttribs.width) : false;

const height = attrHeight || classStyleHeight || tagStyleHeight || 200;
const width = attrWidth || classStyleWidth || tagStyleWidth || staticContentMaxWidth;
const height = attrHeight || classStyleHeight || tagStyleHeight || 200;
const width =
attrWidth || classStyleWidth || tagStyleWidth || staticContentMaxWidth;

const style = _constructStyles({
tagName: 'iframe',
htmlAttribs,
passProps,
styleSet: 'VIEW',
additionalStyles: [{ height, width }]
});
const style = _constructStyles({
tagName: "iframe",
htmlAttribs,
passProps,
styleSet: "VIEW",
additionalStyles: [{ height, width }]
});

const source = htmlAttribs.srcdoc ? { html: htmlAttribs.srcdoc } : { uri: htmlAttribs.src };
const source = htmlAttribs.srcdoc
? { html: htmlAttribs.srcdoc }
: { uri: htmlAttribs.src };

return (
<WebView key={passProps.key} source={source} style={style} />
);
return <WebView key={passProps.key} source={source} style={style} />;
}

export function pre (htlmAttribs, children, convertedCSSStyles, passProps) {
return (
<Text
key={passProps.key}
style={{ fontFamily: Platform.OS === 'android' ? 'monospace' : 'Menlo' }}>
{ children }
</Text>
);
export function pre(htlmAttribs, children, convertedCSSStyles, passProps) {
return (
<Text
key={passProps.key}
style={{ fontFamily: Platform.OS === "android" ? "monospace" : "Menlo" }}
>
{children}
</Text>
);
}

export function br (htlmAttribs, children, convertedCSSStyles, passProps) {
return (
<Text
allowFontScaling={passProps.allowFontScaling}
style={{ height: 1.2 * passProps.emSize, flex: 1 }}
key={passProps.key}
>
{"\n"}
</Text>
);
export function br(htlmAttribs, children, convertedCSSStyles, passProps) {
return (
<Text
allowFontScaling={passProps.allowFontScaling}
style={{ height: 1.2 * passProps.emSize, flex: 1 }}
key={passProps.key}
>
{"\n"}
</Text>
);
}

export function textwrapper (htmlAttribs, children, convertedCSSStyles, { allowFontScaling, key }) {
return (
<Text allowFontScaling={allowFontScaling} key={key} style={convertedCSSStyles}>{ children }</Text>
);
export function textwrapper(
htmlAttribs,
children,
convertedCSSStyles,
{ allowFontScaling, key }
) {
return (
<Text
allowFontScaling={allowFontScaling}
key={key}
style={convertedCSSStyles}
>
{children}
</Text>
);
}