Display multiple OpenGraphDisplay for each url in input text (#19)

* Support multiple urls in input text * OpenGraphAwareInput resultLimit prop; update README
Osedea · Mar 2, 2018 · abc6c2d · abc6c2d
1 parent bddefda
commit abc6c2d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/OpenGraphAwareInput.js b/OpenGraphAwareInput.js
@@ -29,24 +29,26 @@ export default class OpenGraphAwareInput extends Component {
         onIconPress: PropTypes.func,
         showIcon: PropTypes.bool,
         textInputStyle: TextInput.propTypes.style,
+        resultLimit: PropTypes.number,
     };
 
     static defaultProps = {
         debounceDelay: 300,
         showIcon: false,
+        resultLimit: 1,
     };
 
     constructor(props) {
         super(props);
 
         this.state = {
-            openGraphData: {},
+            openGraphData: [],
         };
     }
 
     handleDismissOpengraph = () => {
         this.setState({
-            openGraphData: {},
+            openGraphData: [],
         });
     }
 
@@ -57,11 +59,11 @@ export default class OpenGraphAwareInput extends Component {
                 (data) => {
                     const customEvent = {};
 
-                    this.setState({ openGraphData: data || {} });
+                    this.setState({ openGraphData: data || [] });
 
                     if (this.props.onChange) {
                         customEvent.event = event;
-                        customEvent.opengraphData = data || {};
+                        customEvent.opengraphData = data || [];
                         customEvent.text = text;
 
                         this.props.onChange(customEvent);
@@ -79,6 +81,7 @@ export default class OpenGraphAwareInput extends Component {
     };
 
     render() {
+        const ogDataToDisplay = this.state.openGraphData.slice(0, this.props.resultLimit);
         return (
             <View
                 style={[
@@ -93,15 +96,18 @@ export default class OpenGraphAwareInput extends Component {
                         this.props.textInputStyle,
                     ]}
                 />
-                <OpenGraphDisplay
-                    data={this.state.openGraphData}
-                    onIconPress={this.props.showIcon
-                        ? this.props.onIconPress || this.handleDismissOpengraph
-                        : null
-                    }
-                    iconSource={this.props.iconSource}
-                    iconStyle={this.props.iconStyle}
-                />
+                {ogDataToDisplay.map((meta, i) =>
+                    <OpenGraphDisplay
+                        key={i}
+                        data={meta}
+                        onIconPress={this.props.showIcon
+                            ? this.props.onIconPress || this.handleDismissOpengraph
+                            : null
+                        }
+                        iconSource={this.props.iconSource}
+                        iconStyle={this.props.iconStyle}
+                    />
+                )}
             </View>
         );
     }

diff --git a/OpenGraphParser.js b/OpenGraphParser.js
@@ -256,20 +256,21 @@ async function extractMeta(textContent = '', options = { fallbackOnHTMLTags: tru
     try {
         const urls = getUrls(textContent);
 
-        let metaData = null;
+        let metaData = [];
         let i = 0;
 
-        while (!metaData && i < urls.length) {
+        while (i < urls.length) {
             if (urls[i].indexOf('youtube.com') >= 0) {
-              metaData = await fetchJSON(`https://www.youtube.com/oembed?url=${urls[i]}&format=json`, urls[i])
+              metaData.push(await fetchJSON(`https://www.youtube.com/oembed?url=${urls[i]}&format=json`, urls[i]));
             } else {
-              metaData = await fetchHtml(urls[i])
+              metaData.push(await fetchHtml(urls[i])
                   .then(
                       (html) => ({
                           ...html ? parseMeta(html, urls[i], options) : {},
                           url: urls[i],
                       })
-                  );
+                  )
+              );
             }
 
             i++;

diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ onIconPress | React.PropTypes.func | A function to call when the Icon is pressed
 iconSource | Image.propTypes.source | The Image Source to use as Icon (see `OpenGraphDisplay`)
 iconStyle | Image.propTypes.style | The style of the Icon (see `OpenGraphDisplay`)
 showIcon | React.PropTypes.bool | Should we show the Icon or not? (default is `false`)
+resultLimit | React.PropTypes.number | Max number of parsed OpenGraph links to display (default is `1`)
 
 ## OpenGraphDisplay
 

diff --git a/example/App.js b/example/App.js
@@ -16,7 +16,7 @@ import { OpenGraphAwareInput, OpenGraphDisplay, OpenGraphParser } from 'react-na
 
 export default class Example extends Component {
     state = {
-        data: {},
+        data: [],
     };
 
     handleIconPress = () => {
@@ -48,9 +48,11 @@ export default class Example extends Component {
                     onChange={this.handleTextChange}
                 />
                 <Text style={styles.title}>OpenGraphDisplay</Text>
-                <OpenGraphDisplay
-                    data={this.state.data}
-                />
+                {this.state.data.map((meta, i) =>
+                    <OpenGraphDisplay
+                        data={meta}
+                    />
+                )}
             </View>
         );
     }