Merge pull request meliorence#101 from archriss/dev

v3.9.0

Author: Exilz

Demo/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "react": "16.2.0",
     "react-native": "0.52.0",
-    "react-native-render-html": "3.8.1"
+    "react-native-render-html": "3.9.0"
   },
   "devDependencies": {
     "babel-jest": "22.0.6",

Demo/src/HTMLDemo.js

@@ -24,8 +24,8 @@ export default class Demo extends Component {
         this.setCurrentExample = this.setCurrentExample.bind(this);
     }
 
-    onLinkPress (evt, href) {
-        alert(`Opened ${href} !`);
+    onLinkPress (evt, href, htmlAttribs) {
+        alert(`Opened ${href} ! Attributes: ${JSON.stringify(htmlAttribs)}`);
     }
 
     setCurrentExample (currentExample) {

Demo/src/snippets.js

@@ -9,7 +9,7 @@ export const paragraphs = `
 <p style="padding:10%;">This one features a padding <strong>in percentage !</strong></p>
 <hr />
 <i>Here, we have a style set on the "i" tag with the "tagsStyles" prop.</i>
-<p>And <a href="http://google.fr">This is a link !</a></p>
+<p>And <a href="http://google.fr" title="Google FR">This is a link !</a></p>
 <a href="http://google.fr"><div style="background-color: red; height: 20px; width:40px;"></div></a>
 <p class="last-paragraph">Finally, this paragraph is styled through the classesStyles prop</p>
 `;

README.md

@@ -4,6 +4,13 @@ An iOS/Android pure javascript react-native component that renders your HTML int
 
 > Based on the original work of [Thomas Beverley](https://github.com/Thomas101), props to him.
 
+![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat-square&colorB=191A17)
+[![npm](https://img.shields.io/npm/v/react-native-render-html.svg?style=flat-square)](https://www.npmjs.com/package/react-native-render-html)
+[![npm](https://img.shields.io/npm/dm/react-native-render-html.svg?style=flat-square&colorB=007ec6)](https://www.npmjs.com/package/react-native-render-html)
+<!-- [![github release](https://img.shields.io/github/release/archriss/react-native-render-html.svg?style=flat-square)](https://github.com/archriss/react-native-render-html/releases) -->
+[![github issues](https://img.shields.io/github/issues/archriss/react-native-render-html.svg?style=flat-square)](https://github.com/archriss/react-native-render-html/issues)
+[![github closed issues](https://img.shields.io/github/issues-closed/archriss/react-native-render-html.svg?style=flat-square&colorB=44cc11)](https://github.com/archriss/react-native-render-html/issues?q=is%3Aissue+is%3Aclosed)
+
 ![react-native-render-html](http://i.giphy.com/26tkmjBLvThP0TSak.gif)
 
 ## Table of contents
@@ -66,8 +73,9 @@ Prop | Description | Type | Required/Default
 `uri` | *(experimental)* remote website to parse and render | `string` | Optional
 `decodeEntities` | Decode HTML entities of your content | `bool` | Optional, defaults to `true`
 `imagesMaxWidth` | Resize your images to this maximum width, see [images](#images) | `number` | Optional
+`staticContentMaxWidth` | Set a maximum width to non-responsive content (`<iframe> for instance`) | `number` | Optional
 `imagesInitialDimensions` | Default width and height to display while image's dimensions are being retrieved, see [images](#images) | `{ width: 100, height: 100 }` | Optional
-`onLinkPress` | Fired with the event and the href as its arguments when tapping a link | `function` | Optional
+`onLinkPress` | Fired with the event, the href and an object with all attributes of the tag as its arguments when tapping a link | `function` | Optional
 `onParsed` | Fired when your HTML content has been parsed. Also useful to tweak your rendering, see [onParsed](#onparsed) | `function` | Optional
 `tagsStyles` | Provide your styles for specific HTML tags, see [styling](#styling) | `object` | Optional
 `classesStyles` | Provide your styles for specific HTML classes, see [styling](#styling) | `object` | Optional
@@ -83,6 +91,7 @@ Prop | Description | Type | Required/Default
 `alterChildren` | Target some specific nested children and change them, see [altering content](#altering-content) | `function` | Optional
 `alterNode` | Target a specific node and change it, see [altering content](#altering-content) | `function` | Optional
 `ignoredTags` | HTML tags you don't want rendered, see [ignoring HTML content](#ignoring-html-content) | `array` | Optional, `['head', 'scripts', ...]`
+`allowedStyles`| Allow render only certain CSS style properties and ignore every other. If you have some property both in `allowedStyles` and `ignoredStyles`, it will be ignored anyway. | `array` | Optional, everything is allowed by default
 `ignoredStyles` | CSS styles from the `style` attribute you don't want rendered, see [ignoring HTML content](#ignoring-html-content) | `array` | Optional
 `ignoreNodesFunction` | Return true in this custom function to ignore nodes very precisely, see [ignoring HTML content](#ignoring-html-content) | `function` | Optional
 `debug` | Prints the parsing result from htmlparser2 and render-html after the initial render | `bool` | Optional, defaults to `false`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-render-html",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "author": "Archriss",
   "license": "BSD-2-Clause",
   "repository": "https://github.com/archriss/react-native-render-html",

src/HTML.js

@@ -12,6 +12,7 @@ export default class HTML extends PureComponent {
         renderers: PropTypes.object.isRequired,
         ignoredTags: PropTypes.array.isRequired,
         ignoredStyles: PropTypes.array.isRequired,
+        allowedStyles: PropTypes.array,
         decodeEntities: PropTypes.bool.isRequired,
         debug: PropTypes.bool.isRequired,
         listsPrefixesRenderers: PropTypes.object,
@@ -28,6 +29,7 @@ export default class HTML extends PureComponent {
         onLinkPress: PropTypes.func,
         onParsed: PropTypes.func,
         imagesMaxWidth: PropTypes.number,
+        staticContentMaxWidth: PropTypes.number,
         imagesInitialDimensions: PropTypes.shape({
             width: PropTypes.number,
             height: PropTypes.number
@@ -393,7 +395,7 @@ export default class HTML extends PureComponent {
      * @memberof HTML
      */
     renderRNElements (RNElements, parentWrapper = 'root', parentIndex = 0, props = this.props) {
-        const { tagsStyles, classesStyles, emSize, ignoredStyles } = props;
+        const { tagsStyles, classesStyles, emSize, ignoredStyles, allowedStyles } = props;
         return RNElements && RNElements.length ? RNElements.map((element, index) => {
             const { attribs, data, tagName, parentTag, children, nodeIndex, wrapper } = element;
             const Wrapper = wrapper === 'Text' ? Text : View;
@@ -403,7 +405,7 @@ export default class HTML extends PureComponent {
                     cssStringToRNStyle(
                         attribs.style,
                         Wrapper === Text ? STYLESETS.TEXT : STYLESETS.VIEW, // proper prop-types validation
-                        { parentTag: tagName, emSize, ignoredStyles }
+                        { parentTag: tagName, emSize, ignoredStyles, allowedStyles }
                     ) :
                     {};
 

src/HTMLRenderers.js

@@ -14,7 +14,7 @@ export function a (htmlAttribs, children, convertedCSSStyles, passProps) {
     // 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) :
+        onLinkPress(evt, htmlAttribs.href, htmlAttribs) :
         undefined;
 
     if (parentWrapper === 'Text') {
@@ -116,8 +116,7 @@ export function iframe (htmlAttribs, children, convertedCSSStyles, passProps) {
     if (!htmlAttribs.src) {
         return false;
     }
-
-    const viewportWidth = Dimensions.get('window').width;
+    const { staticContentMaxWidth } = passProps;
     const style = _constructStyles({
         tagName: 'iframe',
         htmlAttribs,
@@ -130,9 +129,9 @@ export function iframe (htmlAttribs, children, convertedCSSStyles, passProps) {
                     undefined
             },
             {
-                width: htmlAttribs.width && htmlAttribs.width <= viewportWidth ?
+                width: staticContentMaxWidth && htmlAttribs.width && htmlAttribs.width <= staticContentMaxWidth ?
                     parseInt(htmlAttribs.width, 10) :
-                    viewportWidth
+                    staticContentMaxWidth
             }
         ]
     });

src/HTMLStyles.js

@@ -101,9 +101,10 @@ export function _getElementCSSClasses (htmlAttribs) {
  * @param {object} { parentTag, emSize, ignoredStyles }
  * @returns {object}
  */
-function cssToRNStyle (css, styleset, { parentTag, emSize, ignoredStyles }) {
+function cssToRNStyle (css, styleset, { parentTag, emSize, ignoredStyles, allowedStyles }) {
     const styleProps = stylePropTypes[styleset];
     return Object.keys(css)
+        .filter((key) => allowedStyles ? allowedStyles.indexOf(key) !== -1 : true)
         .filter((key) => (ignoredStyles || []).indexOf(key) === -1)
         .map((key) => [key, css[key]])
         .map(([key, value]) => {