Add renderText method

Author: ylastapis

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 lib
 assets
+.idea

Example/index.ios.js

@@ -11,7 +11,7 @@ const {
   View,
   LinkingIOS,
   AlertIOS,
-} = React;
+  } = React;
 
 import ParsedText from 'react-native-parsed-text';
 
@@ -34,6 +34,10 @@ class Example extends React.Component {
     AlertIOS.alert(`send email to ${email}`);
   }
 
+  renderText(string) {
+    return `^^${string}^^`;
+  }
+
   render() {
     return (
       <View style={styles.container}>
@@ -45,11 +49,12 @@ class Example extends React.Component {
               {type: 'phone',        style: styles.phone, onPress: this.handlePhonePress},
               {type: 'email',        style: styles.email, onPress: this.handleEmailPress},
               {pattern: /Bob|David/, style: styles.name, onPress: this.handleNamePress},
+              {pattern: /Bob|David/, style: styles.name, onPress: this.handleNamePress, renderText: this.renderText},
               {pattern: /42/,        style: styles.magicNumber},
               {pattern: /#(\w+)/,    style: styles.hashTag},
             ]
           }
-        >
+          >
           Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
           But you can also do more with this package, for example Bob will change style and David too. [email protected]
           And the magic number is 42!

README.md

@@ -35,19 +35,24 @@ class Example extends React.Component {
     AlertIOS.alert(`send email to ${email}`);
   }
 
+  renderText(string) {
+    return `^^${string}^^`;
+  }
+  
   render() {
     return (
       <View style={styles.container}>
         <ParsedText
           style={styles.text}
           parse={
             [
-              {type: 'url',          style: styles.url, onPress: this.handleUrlPress},
-              {type: 'phone',        style: styles.phone, onPress: this.handlePhonePress},
-              {type: 'email',        style: styles.email, onPress: this.handleEmailPress},
-              {pattern: /Bob|David/, style: styles.name, onPress: this.handleNamePress},
-              {pattern: /42/,        style: styles.magicNumber},
-              {pattern: /#(\w+)/,    style: styles.hashTag},
+              {type: 'url',                   style: styles.url, onPress: this.handleUrlPress},
+              {type: 'phone',                 style: styles.phone, onPress: this.handlePhonePress},
+              {type: 'email',                 style: styles.email, onPress: this.handleEmailPress},
+              {pattern: /Bob|David/,          style: styles.name, onPress: this.handleNamePress},
+              {pattern: /Bob|David/,          style: styles.name, onPress: this.handleNamePress, renderChildren: this.renderText},
+              {pattern: /42/,                 style: styles.magicNumber},
+              {pattern: /#(\w+)/,             style: styles.hashTag},
             ]
           }
         >
@@ -110,6 +115,13 @@ const styles = StyleSheet.create({
 
 `npm install --save react-native-parsed-text`
 
+## Test using mocha
+
+```
+mocha --compilers js:babel/register
+```
+
 ## TODO
 
 * Add nested text parsing
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-parsed-text",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Parse text and make them into multiple React Native Text elements",
   "main": "lib/ParsedText.js",
   "scripts": {

src/lib/TextExtraction.js

@@ -79,9 +79,14 @@ class TextExtraction {
       }
     });
 
+    var children = text;
+    if (props.renderText && typeof props.renderText === 'function') {
+      children = props.renderText(children);
+    }
+
     return {
       ...props,
-      children: text,
+      children: children,
       _matched: true,
     };
   }

test/TextExtraction.test.js

@@ -86,7 +86,39 @@ describe('TextExtraction', () => {
         {children: ' is good.'},
       ]);
     });
+  });
+
+  describe('renderText prop', () => {
+    it('checks that renderText is a function', (done) => {
+      const textExtraction = new TextExtraction('hello Bob, David, Michel', [
+        { pattern: /Bob|David/, renderText: 'foo'}
+      ]);
+
+      const parsedText = textExtraction.parse();
+
+      expect(parsedText[0]).to.eql({children: 'hello '});
+      expect(parsedText[1].children).to.eql('Bob');
+      expect(parsedText[2].children).to.eql(', ');
+      expect(parsedText[3].children).to.eql('David');
+      expect(parsedText[4].children).to.eql(', Michel');
+
+      done();
+    });
+    it('pass the values to the callbacks', (done) => {
+      const textExtraction = new TextExtraction('hello Bob, David, Michel', [
+        { pattern: /Bob|David/, renderText: (string) => { return `^^${string}^^`}}
+      ]);
+
+      const parsedText = textExtraction.parse();
+
+      expect(parsedText[0]).to.eql({children: 'hello '});
+      expect(parsedText[1].children).to.eql('^^Bob^^');
+      expect(parsedText[2].children).to.eql(', ');
+      expect(parsedText[3].children).to.eql('^^David^^');
+      expect(parsedText[4].children).to.eql(', Michel');
 
+      done();
+    });
   });
 
 });