react-native-htmlview - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

AutoSizedImage.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, {PureComponent} from 'react';
 import {
@@ -13,3 +13,3 @@ Image,
 
-export default class AutoSizedImage extends React.Component {
+export default class AutoSizedImage extends PureComponent {
   constructor(props) {
@@ -16,0 +16,0 @@ super(props);

htmlToElement.js

@@ -20,6 +20,6 @@ import React from 'react';
   const width =
-    Number(props.attribs['width']) || Number(props.attribs['data-width']) || 0;
+    parseInt(props.attribs['width'], 10) || parseInt(props.attribs['data-width'], 10) || 0;
   const height =
-    Number(props.attribs['height']) ||
-    Number(props.attribs['data-height']) ||
+    parseInt(props.attribs['height'], 10) ||
+    parseInt(props.attribs['data-height'], 10) ||
     0;
@@ -31,2 +31,3 @@
   };
+
   const source = {
@@ -46,2 +47,8 @@ uri: props.attribs.src,
 
+  function inheritedStyle(parent) {
+    if (!parent) { return null; }
+    const style = [opts.styles[parent.name] || {}];
+    return parent.parent ? style.concat(inheritedStyle(parent.parent)) : style;
+  }
+
   function domToElement(dom, parent) {
@@ -66,3 +73,6 @@ if (!dom) return null;
 
-      if (node.type == 'text') {
+      if (node.type === 'text') {
+        const defaultStyle = opts.textComponentProps ? opts.textComponentProps.style : null;
+        const customStyle = inheritedStyle(parent);
+
         return (
@@ -72,3 +82,3 @@ <TextComponent
             key={index}
-            style={parent ? opts.styles[parent.name] : null}
+            style={[defaultStyle, customStyle]}
           >
@@ -80,4 +90,4 @@ {entities.decodeHTML(node.data)}
 
-      if (node.type == 'tag') {
-        if (node.name == 'img') {
+      if (node.type === 'tag') {
+        if (node.name === 'img') {
           return <Img key={index} attribs={node.attribs} />;
@@ -87,3 +97,3 @@ }
         let linkPressHandler = null;
-        if (node.name == 'a' && node.attribs && node.attribs.href) {
+        if (node.name === 'a' && node.attribs && node.attribs.href) {
           linkPressHandler = () =>
@@ -117,8 +127,9 @@ opts.linkHandler(entities.decodeHTML(node.attribs.href));
         let listItemPrefix = null;
-        if (node.name == 'li') {
-          if (parent.name == 'ol') {
+        if (node.name === 'li') {
+          if (parent.name === 'ol') {
             listItemPrefix = `${index + 1}. `;
-          } else if (parent.name == 'ul') {
+          } else if (parent.name === 'ul') {
             listItemPrefix = opts.bullet;
           }
+          linebreakAfter = opts.lineBreak;
         }
@@ -125,0 +136,0 @@

HTMLView.js

@@ -1,2 +0,2 @@
-import React, {Component} from 'react';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
@@ -8,2 +8,3 @@ import htmlToElement from './htmlToElement';
 const italicStyle = {fontStyle: 'italic'};
+const underlineStyle = {textDecorationLine: 'underline'};
 const codeStyle = {fontFamily: 'Menlo'};
@@ -16,2 +17,3 @@
   em: italicStyle,
+  u: underlineStyle,
   pre: codeStyle,
@@ -41,3 +43,3 @@ code: codeStyle,
 
-class HtmlView extends Component {
+class HtmlView extends PureComponent {
   constructor() {
@@ -66,2 +68,10 @@ super();
   startHtmlRender(value) {
+    const {
+      addLineBreaks,
+      onLinkPress,
+      stylesheet,
+      renderNode,
+      onError,
+    } = this.props;
+
     if (!value) {
@@ -72,10 +82,10 @@ this.setState({element: null});
     const opts = {
-      addLineBreaks: this.props.addLineBreaks,
-      linkHandler: this.props.onLinkPress,
-      styles: Object.assign({}, baseStyles, this.props.stylesheet),
-      customRenderer: this.props.renderNode,
+      addLineBreaks,
+      linkHandler: onLinkPress,
+      styles: {...baseStyles, ...stylesheet},
+      customRenderer: renderNode,
     };
 
     htmlToElementOptKeys.forEach(key => {
-      if (typeof this.props[key] != 'undefined') {
+      if (typeof this.props[key] !== 'undefined') {
         opts[key] = this.props[key];
@@ -87,3 +97,3 @@ }
       if (err) {
-        this.props.onError(err);
+        onError(err);
       }
@@ -98,10 +108,12 @@
   render() {
-    const {RootComponent} = this.props;
-    if (this.state.element) {
+    const {RootComponent, style} = this.props;
+    const {element} = this.state;
+    if (element) {
       return (
         <RootComponent
           {...this.props.rootComponentProps}
-          children={this.state.element}
-          style={this.props.style}
-        />
+          style={style}
+        >
+          {element}
+        </RootComponent>
       );
@@ -112,3 +124,3 @@ }
         {...this.props.rootComponentProps}
-        style={this.props.style}
+        style={style}
       />
@@ -115,0 +127,0 @@ );

package.json

 {
   "name": "react-native-htmlview",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A component which renders HTML content as native views",
@@ -15,10 +15,10 @@ "main": "index.js",
   "devDependencies": {
-    "babel-eslint": "6.0.2",
+    "babel-eslint": "^7.2.3",
     "babel-preset-es2015": "^6.16.0",
     "babel-preset-react": "^6.5.0",
-    "eslint": "2.7.0",
-    "eslint-plugin-react": "4.3.0",
+    "eslint": "^4.1.1",
+    "eslint-plugin-react": "^7.1.0",
     "jest": "^19.0.2",
     "prettier": "^1.5.2",
-    "prop-types": "^15.5.7",
+    "prop-types": "^15.5.10",
     "react": "^15.4.2",
@@ -25,0 +25,0 @@ "react-addons-test-utils": "^15.4.2",

README.md

@@ -1,2 +0,2 @@
-# React Native HTMLView
+# React Native HTMLView [![Build status](https://api.travis-ci.org/jsdf/react-native-htmlview.svg?branch=master)](https://travis-ci.org/jsdf/react-native-htmlview)
 A component which takes HTML content and renders it as native views, with
@@ -39,9 +39,8 @@ customisable style and handling of links, etc.
     - `parent` the parent of node of `node`
+- `bullet`: text which is rendered before every `li` inside a `ul`
+- `paragraphBreak`: text which appears after every `p` element
+- `lineBreak`: text which appears after text elements which create a new line (`br`, headings)
+- `addLineBreaks`: when explicitly `false`, effectively sets `paragraphBreak` and `lineBreak` to `null`
+- `NodeComponent`, `nodeComponentProps`, `RootComponent`, `rootComponentProps`, `TextComponent`, `textComponentProps`: see the heading **Customizing things even further** below.
 
-  - `bullet`: text which is rendered before every `li` inside a `ul`
-  - `paragraphBreak`: text which appears after every `p` element
-  - `lineBreak`: text which appears after text elements which create a new line (`br`, headings)
-
-  - `NodeComponent`, `nodeComponentProps`, `RootComponent`, `rootComponentProps`, `TextComponent`, `textComponentProps`: see the heading **Customizing things even further** below.
-
 ### Example
@@ -51,2 +50,3 @@
 import React from 'react';
+import {StyleSheet} from 'react-native';
 import HTMLView from 'react-native-htmlview';
@@ -155,2 +155,32 @@
 
+If you want to reuse the default renderer, you need to call it passing an array of nodes. This example shows how to replace a specific HTML tag with something different, but still process the children.
+```js
+function renderNode(node, index, siblings, parent, defaultRenderer) {
+  if (node.name == 'mytag') {
+      const specialSyle = node.attribs.style
+      return (
+        <Text key={index} style={specialSyle}>
+          {defaultRenderer(node.children, parent)}
+        </Text>
+      )
+    }
+}
+
+const htmlContent = `
+  <div>
+    <mytag>
+      <div>some content processed normally by the engine</div>
+    </mytag>
+  </div>
+`;
+
+class App extends React.Component {
+  render() {
+    return (
+      <HTMLView value={htmlContent} renderNode={renderNode} />
+    );
+  }
+}
+```
+
 For further understanding of the possiblities of the `renderNode` prop, read through [htmlToElement.js](https://github.com/jsdf/react-native-htmlview/blob/master/htmlToElement.js). Particularly look at where `renderNode` is called to see how it can override what sort of React element is created in place of an element in the input HTML.
@@ -157,0 +187,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

184151

increased by1.76%

Number of package files

15

increased by7.14%

Lines of code

427

increased by4.66%

Number of lines in readme file

200

increased by17.65%

No dependency changes