refactor(view): reduce deep views and use react 16 apis

mfrachet · Jun 9, 2018 · 274550d · 274550d
1 parent 135ca40
commit 274550d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/paragraph/__tests__/paragraph.test.js b/src/paragraph/__tests__/paragraph.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { View } from 'react-native';
 import Placeholder from '../../placeholder';
 import Paragraph from './../paragraph';
 
@@ -24,10 +23,6 @@ describe('Paragraph#render', () => {
     lineWrapper = wrapper.find(Placeholder.Line);
   });
 
-  it('should have 11 View, 10 for the Lines and 1 for the Wrapper', () => {
-    expect(wrapper.find(View).length).toEqual(11);
-  });
-
   it('should have 10 Lines, like the linNumber props', () => {
     expect(lineWrapper.length).toEqual(10);
   });
@@ -51,7 +46,7 @@ describe('Paragraph#render', () => {
   it('should have the 3 View with props lineSpacing equals to 10', () => {
     expect(
       wrapper
-        .find(View)
+        .find(Placeholder.Line)
         .at(2)
         .prop('style').marginBottom,
     ).toEqual(10);

diff --git a/src/paragraph/paragraph.js b/src/paragraph/paragraph.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View } from 'react-native';
 import Placeholder from '../placeholder';
 
 const prepareLine = (i, marginBottom, textSize, color, width) => (
-  <View key={i} style={{ marginBottom }}>
-    <Placeholder.Line textSize={textSize} color={color} width={width} />
-  </View>
+  <Placeholder.Line
+    textSize={textSize}
+    color={color}
+    width={width}
+    key={i}
+    style={{ marginBottom }}
+  />
 );
 
 /**
@@ -34,22 +37,24 @@ function Paragraph({
   for (let i = 0; i < lineNumber; i += 1) {
     if (i === lineRealNumber) {
       lines.push(
-        <View key={i}>
-          <Placeholder.Line textSize={textSize} color={color} width={lastLineWidth} />
-        </View>,
+        <Placeholder.Line textSize={textSize} color={color} width={lastLineWidth} key={i} />,
       );
     } else if (i === 0) {
       lines.push(prepareLine(i, lineSpacing, textSize, color, firstLineWidth));
     } else {
       lines.push(
-        <View key={i} style={{ marginBottom: lineSpacing }}>
-          <Placeholder.Line textSize={textSize} color={color} width={width} />
-        </View>,
+        <Placeholder.Line
+          textSize={textSize}
+          color={color}
+          width={width}
+          key={i}
+          style={{ marginBottom: lineSpacing }}
+        />,
       );
     }
   }
 
-  return <View>{lines}</View>;
+  return <React.Fragment>{lines}</React.Fragment>;
 }
 
 Paragraph.propTypes = {