Changed method signature of onLinkPress to pass an object with url an…

…d other data attributes of the link node.
pagalguy · Apr 17, 2018 · 9647e76 · 9647e76
1 parent c808625
commit 9647e76
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 174 deletions.
diff --git a/HTMLView.js b/HTMLView.js
@@ -1,12 +1,18 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import htmlToElement from './htmlToElement';
-import {Linking, Platform, StyleSheet, View, ViewPropTypes} from 'react-native';
-
-const boldStyle = {fontWeight: '500'};
-const italicStyle = {fontStyle: 'italic'};
-const underlineStyle = {textDecorationLine: 'underline'};
-const codeStyle = {fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace'};
+import {
+  Linking,
+  Platform,
+  StyleSheet,
+  View,
+  ViewPropTypes
+} from 'react-native';
+
+const boldStyle = { fontWeight: '500' };
+const italicStyle = { fontStyle: 'italic' };
+const underlineStyle = { textDecorationLine: 'underline' };
+const codeStyle = { fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace' };
 
 const baseStyles = StyleSheet.create({
   b: boldStyle,
@@ -18,14 +24,14 @@ const baseStyles = StyleSheet.create({
   code: codeStyle,
   a: {
     fontWeight: '500',
-    color: '#007AFF',
+    color: '#007AFF'
   },
-  h1: {fontWeight: '500', fontSize: 36},
-  h2: {fontWeight: '500', fontSize: 30},
-  h3: {fontWeight: '500', fontSize: 24},
-  h4: {fontWeight: '500', fontSize: 18},
-  h5: {fontWeight: '500', fontSize: 14},
-  h6: {fontWeight: '500', fontSize: 12},
+  h1: { fontWeight: '500', fontSize: 36 },
+  h2: { fontWeight: '500', fontSize: 30 },
+  h3: { fontWeight: '500', fontSize: 24 },
+  h4: { fontWeight: '500', fontSize: 18 },
+  h5: { fontWeight: '500', fontSize: 14 },
+  h6: { fontWeight: '500', fontSize: 12 }
 });
 
 const htmlToElementOptKeys = [
@@ -35,14 +41,14 @@ const htmlToElementOptKeys = [
   'TextComponent',
   'textComponentProps',
   'NodeComponent',
-  'nodeComponentProps',
+  'nodeComponentProps'
 ];
 
 class HtmlView extends PureComponent {
   constructor() {
     super();
     this.state = {
-      element: null,
+      element: null
     };
   }
 
@@ -52,8 +58,16 @@ class HtmlView extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value || this.props.stylesheet !== nextProps.stylesheet || this.props.textComponentProps !== nextProps.textComponentProps) {
-      this.startHtmlRender(nextProps.value, nextProps.stylesheet, nextProps.textComponentProps);
+    if (
+      this.props.value !== nextProps.value ||
+      this.props.stylesheet !== nextProps.stylesheet ||
+      this.props.textComponentProps !== nextProps.textComponentProps
+    ) {
+      this.startHtmlRender(
+        nextProps.value,
+        nextProps.stylesheet,
+        nextProps.textComponentProps
+      );
     }
   }
 
@@ -68,19 +82,19 @@ class HtmlView extends PureComponent {
       onLinkLongPress,
       stylesheet,
       renderNode,
-      onError,
+      onError
     } = this.props;
 
     if (!value) {
-      this.setState({element: null});
+      this.setState({ element: null });
     }
 
     const opts = {
       addLineBreaks,
       linkHandler: onLinkPress,
       linkLongPressHandler: onLinkLongPress,
-      styles: {...baseStyles, ...stylesheet, ...style},
-      customRenderer: renderNode,
+      styles: { ...baseStyles, ...stylesheet, ...style },
+      customRenderer: renderNode
     };
 
     htmlToElementOptKeys.forEach(key => {
@@ -99,30 +113,22 @@ class HtmlView extends PureComponent {
       }
 
       if (this.mounted) {
-        this.setState({element});
+        this.setState({ element });
       }
     });
   }
 
   render() {
-    const {RootComponent, style} = this.props;
-    const {element} = this.state;
+    const { RootComponent, style } = this.props;
+    const { element } = this.state;
     if (element) {
       return (
-        <RootComponent
-          {...this.props.rootComponentProps}
-          style={style}
-        >
+        <RootComponent {...this.props.rootComponentProps} style={style}>
           {element}
         </RootComponent>
       );
     }
-    return (
-      <RootComponent
-        {...this.props.rootComponentProps}
-        style={style}
-      />
-    );
+    return <RootComponent {...this.props.rootComponentProps} style={style} />;
   }
 }
 
@@ -143,15 +149,15 @@ HtmlView.propTypes = {
   stylesheet: PropTypes.object,
   TextComponent: PropTypes.func,
   textComponentProps: PropTypes.object,
-  value: PropTypes.string,
+  value: PropTypes.string
 };
 
 HtmlView.defaultProps = {
   addLineBreaks: true,
-  onLinkPress: url => Linking.openURL(url),
+  onLinkPress: ({ url }) => Linking.openURL(url),
   onLinkLongPress: null,
   onError: console.error.bind(console),
-  RootComponent: View,
+  RootComponent: View
 };
 
 export default HtmlView;