feat(markdown): Add support for quoted emails (#501)

* feat(markdown): Add support for quoted emails * fix: use paddingHorizontal instead of Left and Right
gitpoint · Oct 19, 2017 · c9e7b50 · c9e7b50
1 parent b4e05a2
commit c9e7b50
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "react-native": "0.48.1",
     "react-native-actionsheet": "^2.2.0",
     "react-native-code-push": "^5.0.0-beta",
+    "react-native-collapsible": "^0.9.0",
     "react-native-communications": "^2.2.1",
     "react-native-config": "^0.6.0",
     "react-native-cookies": "^3.2.0",

diff --git a/src/components/github-htmlview.component.js b/src/components/github-htmlview.component.js
@@ -6,7 +6,7 @@ import SyntaxHighlighter from 'react-native-syntax-highlighter';
 import { github as GithubStyle } from 'react-syntax-highlighter/dist/styles';
 import entities from 'entities';
 
-import { ImageZoom } from 'components';
+import { ImageZoom, ToggleView } from 'components';
 import { colors, fonts, normalize } from 'config';
 
 const textStyle = Platform.select({
@@ -65,6 +65,16 @@ const styles = {
   a: linkStyle,
 };
 
+const quotedEmailToggleStyle = {
+  backgroundColor: colors.greyMid,
+  paddingHorizontal: 4,
+  alignSelf: 'flex-start',
+  height: 15,
+  lineHeight: 12,
+  marginBottom: 6,
+  marginTop: 3,
+};
+
 const styleSheet = StyleSheet.create(styles);
 
 const { width } = Dimensions.get('window');
@@ -176,6 +186,11 @@ export class GithubHtmlView extends Component {
           /<li class="task-list-item">(<span[^>]*>)?<input checked="" class="task-list-item-checkbox" disabled="" id="" type="checkbox"> ?\.? ?/g,
           '$1✅ '
         )
+        // Quoted email reply
+        .replace(
+          /<span class="email-hidden-toggle"><a href="#">…<\/a><\/span>/g,
+          ''
+        )
         // Remove links & spans around images
         .replace(/<a[^>]+><img([^>]+)><\/a>/g, '<img$1>')
         .replace(/<span[^>]*><img([^>]+)><\/span>/g, '<img$1>')
@@ -246,6 +261,33 @@ export class GithubHtmlView extends Component {
         hr: (node, index, siblings, parent, defaultRenderer) => (
           <View key={index} style={{ ...hrStyle }} />
         ),
+        div: (node, index, siblings, parent, defaultRenderer) => {
+          if (node.attribs.class) {
+            const className = node.attribs.class;
+
+            if (className.includes('email-hidden-reply')) {
+              return defaultRenderer(onlyTagsChildren(node), node);
+            }
+
+            if (className.includes('email-quoted-reply')) {
+              return (
+                <ToggleView
+                  TouchableView={<Text style={quotedEmailToggleStyle}>…</Text>}
+                >
+                  {renderers.blockquote(
+                    node,
+                    index,
+                    siblings,
+                    parent,
+                    defaultRenderer
+                  )}
+                </ToggleView>
+              );
+            }
+          }
+
+          return undefined;
+        },
         img: (node, index, siblings, parent, defaultRenderer) => {
           if (hasAncestor(node, ['ol', 'ul', 'span'])) {
             return (

diff --git a/src/components/index.js b/src/components/index.js
@@ -28,3 +28,4 @@ export * from './image-zoom.component';
 export * from './button.component';
 export * from './notification-icon.component';
 export * from './badge.component';
+export * from './toggle-view.component';
diff --git a/src/components/toggle-view.component.js b/src/components/toggle-view.component.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { TouchableOpacity, View, Text } from 'react-native';
+import Collapsible from 'react-native-collapsible';
+
+export class ToggleView extends Component {
+  props: {
+    children: any,
+    TouchableView: any,
+  };
+
+  state: {
+    collapsed: boolean,
+  };
+
+  constructor() {
+    super();
+
+    this.state = {
+      collapsed: true,
+    };
+  }
+
+  _toggle() {
+    this.setState({ collapsed: !this.state.collapsed });
+  }
+
+  render() {
+    return (
+      <View>
+        <TouchableOpacity onPress={() => this._toggle()}>
+          {this.props.TouchableView}
+        </TouchableOpacity>
+        <Collapsible collapsed={this.state.collapsed}>
+          {this.props.children}
+        </Collapsible>
+      </View>
+    );
+  }
+}
+
+ToggleView.defaultProps = {
+  TouchableView: <Text>…</Text>,
+};
diff --git a/yarn.lock b/yarn.lock
@@ -5355,6 +5355,12 @@ react-native-code-push@^5.0.0-beta:
     plist "1.2.0"
     xcode "0.9.2"
 
+react-native-collapsible@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/react-native-collapsible/-/react-native-collapsible-0.9.0.tgz#207849faa15493820d19fa6a5e58f7c7b6c1b910"
+  dependencies:
+    prop-types "^15.5.10"
+
 react-native-communications@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-native-communications/-/react-native-communications-2.2.1.tgz#7883b56b20a002eeb790c113f8616ea8692ca795"