simplify list rendering, add test

Tengio · Apr 2, 2017 · 403d315 · 403d315
1 parent 6633661
commit 403d315
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 1 deletion.
diff --git a/__tests__/HTMLView-test.js b/__tests__/HTMLView-test.js
@@ -23,6 +23,22 @@ describe('<HTMLView/>', () => {
     ).toMatchSnapshot();
   });
 
+  it('should render ul bullets', () => {
+    const htmlContent = '<ul><li> a </li><li> b </li></ul>';
+
+    expect(
+      renderer.create(<HTMLView value={htmlContent} />).toJSON()
+    ).toMatchSnapshot();
+  });
+
+  it('should render ol numbers', () => {
+    const htmlContent = '<ol><li> a </li><li> b </li></ol>';
+
+    expect(
+      renderer.create(<HTMLView value={htmlContent} />).toJSON()
+    ).toMatchSnapshot();
+  });
+
   it('should render an <Image />, with default width/height of 1', () => {
     const imgSrc = 'https://facebook.github.io/react-native/img/header_logo.png';
     const htmlContent = `<img src="${imgSrc}"/>`;

diff --git a/__tests__/__snapshots__/HTMLView-test.js.snap b/__tests__/__snapshots__/HTMLView-test.js.snap
@@ -126,6 +126,52 @@ exports[`<HTMLView/> should render an empty <Text/> element 1`] = `
 </View>
 `;
 
+exports[`<HTMLView/> should render ol numbers 1`] = `
+<View
+  style={undefined}
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    onPress={null}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      onPress={null}
+    >
+      1. 
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={undefined}
+      >
+         a 
+      </Text>
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      onPress={null}
+    >
+      2. 
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={undefined}
+      >
+         b 
+      </Text>
+    </Text>
+  </Text>
+</View>
+`;
+
 exports[`<HTMLView/> should render shoddy html including headings, links, bold, italic 1`] = `
 <View
   style={undefined}
@@ -363,3 +409,49 @@ exports[`<HTMLView/> should render text in a (nested) <Text/> element 1`] = `
   </Text>
 </View>
 `;
+
+exports[`<HTMLView/> should render ul bullets 1`] = `
+<View
+  style={undefined}
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    ellipsizeMode="tail"
+    onPress={null}
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      onPress={null}
+    >
+      • 
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={undefined}
+      >
+         a 
+      </Text>
+    </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      onPress={null}
+    >
+      • 
+      <Text
+        accessible={true}
+        allowFontScaling={true}
+        ellipsizeMode="tail"
+        style={undefined}
+      >
+         b 
+      </Text>
+    </Text>
+  </Text>
+</View>
+`;
diff --git a/htmlToElement.js b/htmlToElement.js
@@ -82,10 +82,19 @@ export default function htmlToElement(rawHtml, opts, done) {
           }
         }
 
+        let listItemPrefix = null;
+        if (node.name == 'li') {
+          if (parent.name == 'ol') {
+            listItemPrefix = `${index + 1}. `;
+          } else if (parent.name == 'ul') {
+            listItemPrefix = BULLET;
+          }
+        }
+
         return (
           <Text key={index} onPress={linkPressHandler}>
             {linebreakBefore}
-            {node.name == 'li' ? (parent.name == 'ul' ? BULLET : (index+1) + ". ") : null}
+            {listItemPrefix}
             {domToElement(node.children, node)}
             {linebreakAfter}
           </Text>