From 44ae4bbeca800c3e2d7012c758168cb061782962 Mon Sep 17 00:00:00 2001 From: srikanthkatta2207 Date: Thu, 7 Feb 2019 12:04:36 +0530 Subject: [PATCH 1/3] [Srikanth] | Add Support for rendering Node component props for parent htmltag --- HTMLView.js | 8 ++++++-- htmlToElement.js | 11 ++++++++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/HTMLView.js b/HTMLView.js index a479c5a..7c67cdc 100644 --- a/HTMLView.js +++ b/HTMLView.js @@ -55,8 +55,8 @@ 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.props.nodeComponentProps !== nextProps.nodeComponentProps) { + this.startHtmlRender(nextProps.value, nextProps.stylesheet, nextProps.textComponentProps,nextProps.nodeComponentProps); } } @@ -96,6 +96,10 @@ class HtmlView extends PureComponent { opts.textComponentProps = textComponentProps; } + if (nodeComponentProps) { + opts.nodeComponentProps = nodeComponentProps; + } + htmlToElement(value, opts, (err, element) => { if (err) { onError(err); diff --git a/htmlToElement.js b/htmlToElement.js index fc9151d..db66034 100644 --- a/htmlToElement.js +++ b/htmlToElement.js @@ -162,9 +162,18 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) { }); } + function domToElementWrapper(dom) { + const [ firstNode ] = dom; + return ( + + {domToElement(dom)} + + ); + } + const handler = new htmlparser.DomHandler(function(err, dom) { if (err) done(err); - done(null, domToElement(dom)); + done(null, domToElementWrapper(dom)); }); const parser = new htmlparser.Parser(handler); parser.write(rawHtml); From 2f7e15f919f68481ea9a8f2f3741147e0c7a130a Mon Sep 17 00:00:00 2001 From: srikanthkatta2207 Date: Thu, 7 Feb 2019 12:57:08 +0530 Subject: [PATCH 2/3] [Srikanth] | Fix null exception --- htmlToElement.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/htmlToElement.js b/htmlToElement.js index db66034..c9f0996 100644 --- a/htmlToElement.js +++ b/htmlToElement.js @@ -165,7 +165,7 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) { function domToElementWrapper(dom) { const [ firstNode ] = dom; return ( - + {domToElement(dom)} ); From 1a68186a59e2c3712501f64d599e36ecd8cf1da8 Mon Sep 17 00:00:00 2001 From: srikanthkatta2207 Date: Thu, 7 Feb 2019 13:56:19 +0530 Subject: [PATCH 3/3] [Srikanth] | Fixed formatting excpeitons and test cases --- HTMLView.js | 4 +- __tests__/__snapshots__/HTMLView-test.js.snap | 1364 +++++++++-------- .../__snapshots__/Example-test.js.snap | 733 ++++----- htmlToElement.js | 14 +- 4 files changed, 1110 insertions(+), 1005 deletions(-) diff --git a/HTMLView.js b/HTMLView.js index 7c67cdc..54cf7cc 100644 --- a/HTMLView.js +++ b/HTMLView.js @@ -56,7 +56,7 @@ class HtmlView extends PureComponent { componentWillReceiveProps(nextProps) { if (this.props.value !== nextProps.value || this.props.stylesheet !== nextProps.stylesheet || this.props.textComponentProps !== nextProps.textComponentProps || this.props.nodeComponentProps !== nextProps.nodeComponentProps) { - this.startHtmlRender(nextProps.value, nextProps.stylesheet, nextProps.textComponentProps,nextProps.nodeComponentProps); + this.startHtmlRender(nextProps.value, nextProps.stylesheet, nextProps.textComponentProps, nextProps.nodeComponentProps); } } @@ -64,7 +64,7 @@ class HtmlView extends PureComponent { this.mounted = false; } - startHtmlRender(value, style, textComponentProps) { + startHtmlRender(value, style, textComponentProps, nodeComponentProps) { const { addLineBreaks, onLinkPress, diff --git a/__tests__/__snapshots__/HTMLView-test.js.snap b/__tests__/__snapshots__/HTMLView-test.js.snap index e040fdb..58d18bb 100644 --- a/__tests__/__snapshots__/HTMLView-test.js.snap +++ b/__tests__/__snapshots__/HTMLView-test.js.snap @@ -9,25 +9,6 @@ exports[` can use a custom node class 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - style={ - Array [ - null, - null, - ] - } - > - - - - can use a custom node class 1`] = ` style={ Array [ null, - Object {}, + null, ] } > - + can use a custom node class 1`] = ` onLongPress={null} onPress={null} selectable={false} - style={null} + style={undefined} > can use a custom node class 1`] = ` } > - + - - - + + + + + + + + + @@ -98,24 +105,6 @@ exports[` can use a custom renderer 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - style={ - Array [ - null, - null, - ] - } - > - - - - can use a custom renderer 1`] = ` style={ Array [ null, - Object {}, - ] - } - > - - - - - - - - - - -`; - -exports[` can use custom node props 1`] = ` - - - - - - - - + can use custom node props 1`] = ` ellipsizeMode="tail" onLongPress={null} onPress={null} - selectable={false} - style={null} + style={undefined} > can use custom node props 1`] = ` } > - + + can use custom node props 1`] = ` style={ Array [ null, - Object {}, + null, ] } > @@ -246,7 +171,7 @@ exports[` can use custom node props 1`] = ` `; -exports[` should handle additional text nodes between list items 1`] = ` +exports[` can use custom node props 1`] = ` @@ -255,9 +180,6 @@ exports[` should handle additional text nodes between list items 1`] allowFontScaling={true} disabled={false} ellipsizeMode="tail" - onLongPress={null} - onPress={null} - style={undefined} > should handle additional text nodes between list items 1`] style={ Array [ null, - Object {}, + null, ] } > @@ -281,7 +203,8 @@ exports[` should handle additional text nodes between list items 1`] ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} + selectable={false} + style={undefined} > should handle additional text nodes between list items 1`] ] } > - 1. - - - a + + - - - - - - - - - 2. + + + + should handle additional text nodes between list items 1`] ] } > - b + + - - - - - - `; -exports[` should not render extra linebreaks if configured not to 1`] = ` +exports[` should handle additional text nodes between list items 1`] = ` @@ -397,40 +276,7 @@ exports[` should not render extra linebreaks if configured not to 1`] allowFontScaling={true} disabled={false} ellipsizeMode="tail" - style={ - Array [ - null, - null, - ] - } - > - - - - - - - - should not render extra linebreaks if configured not to 1`] ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} + style={undefined} > should not render extra linebreaks if configured not to 1`] style={ Array [ null, - Object { - "fontSize": 30, - "fontWeight": "500", - }, + Object {}, ] } > - Dwayne’s only companion at night was a Labrador retriever named Sparky. + + + + + + 1. + + + a + + + - - - - - - should not render extra linebreaks if configured not to 1`] } > - Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. + should not render extra linebreaks if configured not to 1`] onLongPress={null} onPress={null} style={null} - /> + > + + 2. + + + b + + + + should not render extra linebreaks if configured not to 1`] } > - He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill. - + + + +`; + +exports[` should not render extra linebreaks if configured not to 1`] = ` + + should not render extra linebreaks if configured not to 1`] style={ Array [ null, - Object {}, + null, ] } > - - - - - - -`; - -exports[` should not render extra linebreaks in list items if configured not to 1`] = ` - - should not render extra linebreaks in list items if configu ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} + style={undefined} > should not render extra linebreaks in list items if configu ] } > - • + + + + + + Dwayne’s only companion at night was a Labrador retriever named Sparky. + should not render extra linebreaks in list items if configu ] } > - a + + + + + + Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. + + + + + He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill. + + + + + + + + + + + + + +`; + +exports[` should not render extra linebreaks in list items if configured not to 1`] = ` + + should not render extra linebreaks in list items if configu ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} + style={undefined} > - • + + • + + + a + - b + + • + + + b + @@ -654,22 +696,29 @@ exports[` should render an with set width/height 1`] = ` - + + /> + `; @@ -677,22 +726,29 @@ exports[` should render an , with default width/height of 1 - + + /> + `; @@ -705,9 +761,6 @@ exports[` should render an empty element 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - onLongPress={null} - onPress={null} - style={undefined} > should render an empty element 1`] = ` disabled={false} ellipsizeMode="tail" onLongPress={null} - onPress={[Function]} - style={null} + onPress={null} + style={undefined} > - &hearts nice job! + + &hearts nice job! + @@ -749,30 +812,7 @@ exports[` should render inherited styles correctly 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - onLongPress={null} - onPress={null} - style={ - Object { - "color": "red", - } - } > - - RED - should render inherited styles correctly 1`] = ` ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} + style={ + Object { + "color": "red", + } + } > should render inherited styles correctly 1`] = ` Array [ null, Object { - "color": "blue", + "color": "red", }, ] } > - BLUE + RED should render inherited styles correctly 1`] = ` Array [ null, Object { - "color": "green", + "color": "blue", }, ] } > - GREEN + BLUE + + + + GREEN + @@ -838,9 +908,6 @@ exports[` should render ol numbers 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - onLongPress={null} - onPress={null} - style={undefined} > should render ol numbers 1`] = ` ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} - > - - 1. - - - a - - - - - - 2. + + 1. + + + a + + + - b + + 2. + + + b + @@ -933,24 +1010,6 @@ exports[` should render shoddy html including headings, links, bold, allowFontScaling={true} disabled={false} ellipsizeMode="tail" - style={ - Array [ - null, - null, - ] - } - > - - - - should render shoddy html including headings, links, bold, style={ Array [ null, - Object {}, + null, ] } > - + should render shoddy html including headings, links, bold, ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} + style={undefined} > should render shoddy html including headings, links, bold, } > - + should render shoddy html including headings, links, bold, style={ Array [ null, - Object { - "fontSize": 30, - "fontWeight": "500", - }, + Object {}, ] } > - > Dwayne’s only companion at night was a Labrador retriever named Sparky. + + + + + + > Dwayne’s only companion at night was a Labrador retriever named Sparky. + + + - - - - - - - - should render shoddy html including headings, links, bold, style={ Array [ null, - Object { - "fontStyle": "italic", - }, + Object {}, ] } > - Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. - He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill. + should render shoddy html including headings, links, bold, null, Object { "fontStyle": "italic", - "fontWeight": "500", }, ] } > - The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made. + Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. + He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill. + + + The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made. + + + + + + - - - - - - - - - should render shoddy html including headings, links, bold, } > - [1] + should render shoddy html including headings, links, bold, disabled={false} ellipsizeMode="tail" onLongPress={null} - onPress={[Function]} + onPress={null} style={null} > should render shoddy html including headings, links, bold, style={ Array [ null, - Object { - "color": "#007AFF", - "fontWeight": "500", - }, + Object {}, + ] + } + > + + [1] + + + + https://code.facebook.com/posts/1505962329687926/flow-a-new-... + + + - https://code.facebook.com/posts/1505962329687926/flow-a-new-... + + + + + should render shoddy html including headings, links, bold, } > - + - - - should render shoddy html including headings, links, bold, } > - + should render shoddy html including headings, links, bold, style={ Array [ null, - Object {}, + null, ] } > @@ -1236,21 +1335,6 @@ exports[` should render shoddy html including headings, links, bold, - - - - `; @@ -1263,14 +1347,21 @@ exports[` should render text in a (nested) element 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - style={ - Array [ - null, - null, - ] - } > - This is some text + + This is some text + `; @@ -1284,9 +1375,6 @@ exports[` should render ul bullets 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - onLongPress={null} - onPress={null} - style={undefined} > should render ul bullets 1`] = ` ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} - > - - • - - - a - - - - - - • + + • + + + a + + + - b + + • + + + b + diff --git a/example/__tests__/__snapshots__/Example-test.js.snap b/example/__tests__/__snapshots__/Example-test.js.snap index 24884b8..704dd35 100644 --- a/example/__tests__/__snapshots__/Example-test.js.snap +++ b/example/__tests__/__snapshots__/Example-test.js.snap @@ -18,24 +18,6 @@ exports[` should render 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - style={ - Array [ - null, - null, - ] - } - > - - - - should render 1`] = ` style={ Array [ null, - Object {}, + null, ] } > - + should render 1`] = ` ellipsizeMode="tail" onLongPress={null} onPress={null} - style={null} + style={undefined} > should render 1`] = ` } > - + should render 1`] = ` onPress={null} style={null} > + + + + should render 1`] = ` allowFontScaling={true} disabled={false} ellipsizeMode="tail" - style={ - Array [ - null, - Object { - "fontStyle": "italic", - "fontWeight": "500", - }, - ] - } + onLongPress={null} + onPress={null} + style={null} > - > Dwayne’s only companion at night was a Labrador retriever named Sparky. + + > Dwayne’s only companion at night was a Labrador retriever named Sparky. + - - - - - - should render 1`] = ` style={ Array [ null, - Object { - "fontStyle": "italic", - }, + Object {}, ] } > - Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. - He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill. + should render 1`] = ` null, Object { "fontStyle": "italic", - "fontWeight": "500", }, ] } > - The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made. + Sparky could not wag his tail-because of an automobile accident many years ago, so he had no way of telling other dogs how friendly he was. + He opened the door of the cage, something Bill couldn’t have done in a thousand years. Bill flew over to a windowsill. + + + The undippable flag was a beauty, and the anthem and the vacant motto might not have mattered much, if it weren’t for this: a lot of citizens were so ignored and cheated and insulted that they thought they might be in the wrong country, or even on the wrong planet, that some terrible mistake had been made. + + + + + + - - - - - - - - - should render 1`] = ` } > - [1] + should render 1`] = ` disabled={false} ellipsizeMode="tail" onLongPress={null} - onPress={[Function]} + onPress={null} style={null} > should render 1`] = ` style={ Array [ null, - Object { - "color": "#007AFF", - "fontWeight": "500", - }, + Object {}, + ] + } + > + + [1] + + + + https://code.facebook.com/posts/1505962329687926/flow-a-new-... + + + - https://code.facebook.com/posts/1505962329687926/flow-a-new-... + + + + + should render 1`] = ` - - - - - - - - - - - - - - - + /> should render 1`] = ` style={ Array [ null, - Object { - "fontSize": 36, - "fontWeight": "500", - }, + Object {}, ] } > - Dwayne’s only companion at night + + + - - - - - - - - - Dwayne’s only companion at night + onLongPress={null} + onPress={null} + style={null} + > + + Dwayne’s only companion at night + + + - - - - - - - - should render 1`] = ` style={ Array [ null, - Object { - "fontSize": 24, - "fontWeight": "500", - }, + Object {}, ] } > - Dwayne’s only companion at night + + + + + + Dwayne’s only companion at night + + + - - - - - - - - should render 1`] = ` style={ Array [ null, - Object { - "fontSize": 18, - "fontWeight": "500", - }, + Object {}, ] } > - Dwayne’s only companion at night + + + + + + Dwayne’s only companion at night + + + - - - - - - - - should render 1`] = ` style={ Array [ null, - Object { - "fontSize": 14, - "fontWeight": "500", - }, + Object {}, ] } > - Dwayne’s only companion at night + + + + + + Dwayne’s only companion at night + + + + + + + + + + + Dwayne’s only companion at night + + + + + + + + + + + Dwayne’s only companion at night + - - - - - - - - should render 1`] = ` style={ Array [ null, - Object { - "fontSize": 12, - "fontWeight": "500", - }, + Object {}, ] } > - Dwayne’s only companion at night + + ayyy + + + + + google.com + + should render 1`] = ` } > - ayyy - - - - google.com - - should render 1`] = ` style={ Array [ null, - Object {}, + null, ] } > @@ -642,21 +664,6 @@ exports[` should render 1`] = ` - - - - diff --git a/htmlToElement.js b/htmlToElement.js index c9f0996..f3b568f 100644 --- a/htmlToElement.js +++ b/htmlToElement.js @@ -163,13 +163,13 @@ export default function htmlToElement(rawHtml, customOpts = {}, done) { } function domToElementWrapper(dom) { - const [ firstNode ] = dom; - return ( - - {domToElement(dom)} - - ); - } + const [firstNode] = dom; + return ( + + {domToElement(dom)} + + ); + } const handler = new htmlparser.DomHandler(function(err, dom) { if (err) done(err);