refactor(component): skip one view level on multiwords

mfrachet · Jun 9, 2018 · 8120b8a · 8120b8a
1 parent 9ce0907
commit 8120b8a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/src/multiWords/__tests__/multiWords.spec.js b/src/multiWords/__tests__/multiWords.spec.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { View } from 'react-native';
 import { shallow } from 'enzyme';
 import MultiWords from './../multiWords';
 import Placeholder from './../../placeholder';
@@ -56,21 +55,23 @@ describe('MultiWords#render', () => {
       ).toEqual(word.color);
     });
 
-    it(`should have the ${index + 1} View with props style.width equals to ${word.width}`, () => {
+    it(`should have the ${index + 1} Placeholder.Line with props style.width equals to ${
+      word.width
+    }`, () => {
       expect(
         wrapper
-          .find(View)
-          .at(index + 1)
+          .find(Placeholder.Line)
+          .at(index)
           .prop('style')[1].width,
       ).toEqual(word.width);
     });
 
-    it(`should have the ${index + 1} View with props style to have a special border style`, () => {
-      const realIndex = index + 1;
-      const view = wrapper.find(View).at(realIndex);
-      const lastIndex = words.length;
+    it(`should have the ${index +
+      1} Placeholder.Line with props style to have a special border style`, () => {
+      const view = wrapper.find(Placeholder.Line).at(index);
+      const lastIndex = words.length - 1;
       const result =
-        lastIndex === realIndex
+        lastIndex === index
           ? false
           : {
             borderRightWidth: 12,

diff --git a/src/multiWords/multiWords.js b/src/multiWords/multiWords.js
@@ -21,9 +21,12 @@ function MultiWords({ words, textSize }) {
   return (
     <View style={styles.container}>
       {words.map((word, index) => (
-        <View key={index} style={[lastIndex !== index && borderStyle, { width: word.width }]}>
-          <Placeholder.Line textSize={textSize} color={word.color} />
-        </View>
+        <Placeholder.Line
+          textSize={textSize}
+          color={word.color}
+          key={index}
+          style={[lastIndex !== index && borderStyle, { width: word.width }]}
+        />
       ))}
     </View>
   );

diff --git a/src/placeholder.js b/src/placeholder.js
@@ -17,9 +17,18 @@ const compose = (f, g) => x => f(g(x));
 export default {
   ImageContent: connect(ImageContent),
   Paragraph: connect(Paragraph),
-  Media: compose(connect, stylify(computeStyleMedia))(View),
-  Line: compose(connect, stylify(computeStyleLine))(View),
+  Media: compose(
+    connect,
+    stylify(computeStyleMedia),
+  )(View),
+  Line: compose(
+    connect,
+    stylify(computeStyleLine),
+  )(View),
   MultiWords: connect(MultiWords),
-  Box: compose(connect, stylify(computeStyleBox))(View),
+  Box: compose(
+    connect,
+    stylify(computeStyleBox),
+  )(View),
   connect,
 };