refactor(views): image content and paragraph

.eslintrc.json

@@ -1,17 +1,14 @@
 {
-    "extends": "airbnb",
-    "plugins": [
-        "react",
-        "jsx-a11y",
-        "import"
-    ],
-    "rules": {
-      "react/jsx-filename-extension": "off",
-      "jsx-a11y/img-has-alt": "off",
-      "jsx-a11y/href-no-hash": "off",
-      "import/no-extraneous-dependencies": "off"
-    },
-    "env": {
-      "jest": true
-    }
-}
+  "extends": "airbnb",
+  "plugins": ["react", "jsx-a11y", "import"],
+  "rules": {
+    "react/jsx-filename-extension": "off",
+    "jsx-a11y/img-has-alt": "off",
+    "jsx-a11y/href-no-hash": "off",
+    "import/no-extraneous-dependencies": "off",
+    "react/no-array-index-key": "off"
+  },
+  "env": {
+    "jest": true
+  }
+}

src/imageContent/__tests__/imageContent.test.js

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 import { View } from 'react-native';
 import ImageContent from './../imageContent';
 import Placeholder from './../../placeholder';
-import Paragraph from './../../paragraph/paragraph';
 
 /** @test {ImageContent#render} */
 describe('ImageContent#render', () => {
@@ -28,7 +27,7 @@ describe('ImageContent#render', () => {
       />,
     );
     mediaWrapper = wrapper.find(Placeholder.Media);
-    paragraphWrapper = wrapper.find(Paragraph);
+    paragraphWrapper = wrapper.find(Placeholder.Paragraph);
   });
 
   it('should have a Media', () => {
@@ -121,7 +120,7 @@ describe('ImageContent#render', () => {
     expect(
       wrapper
         .find(View)
-        .at(2)
+        .at(1)
         .prop('style'),
     ).toEqual(style);
   });

src/imageContent/imageContent.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import Placeholder from './../placeholder';
-import Paragraph from './../paragraph/paragraph';
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row' },
+  container: { flex: 1 },
+});
 
 const positionElement = (position, textSize, color, size, hasRadius) => (
   <View style={{ [position]: textSize, flexDirection: 'column', justifyContent: 'center' }}>
@@ -38,20 +42,19 @@ function ImageContent({
   firstLineWidth,
 }) {
   return (
-    <View style={{ flexDirection: 'row' }}>
+    <View style={styles.row}>
       {position === 'left' && positionElement('marginRight', textSize, color, size, hasRadius)}
-      <View style={{ flex: 1 }}>
-        <Paragraph
-          animate={animate}
-          lineNumber={lineNumber}
-          textSize={textSize}
-          color={color}
-          width={width}
-          lastLineWidth={lastLineWidth}
-          firstLineWidth={firstLineWidth}
-          lineSpacing={lineSpacing}
-        />
-      </View>
+      <Placeholder.Paragraph
+        animate={animate}
+        lineNumber={lineNumber}
+        textSize={textSize}
+        color={color}
+        width={width}
+        lastLineWidth={lastLineWidth}
+        firstLineWidth={firstLineWidth}
+        lineSpacing={lineSpacing}
+        style={styles.container}
+      />
       {position === 'right' && positionElement('marginLeft', textSize, color, size, hasRadius)}
     </View>
   );

src/paragraph/paragraph.js

@@ -31,6 +31,7 @@ function Paragraph({
   width,
   lastLineWidth,
   firstLineWidth,
+  style,
 }) {
   const lineRealNumber = lineNumber - 1;
 
@@ -56,7 +57,7 @@ function Paragraph({
       );
     });
 
-  return <View>{lines}</View>;
+  return <View style={style}>{lines}</View>;
 }
 
 Paragraph.propTypes = {
@@ -67,6 +68,7 @@ Paragraph.propTypes = {
   width: PropTypes.string,
   lastLineWidth: PropTypes.string,
   firstLineWidth: PropTypes.string,
+  style: PropTypes.shape({}),
 };
 
 Paragraph.defaultProps = {
@@ -76,6 +78,7 @@ Paragraph.defaultProps = {
   width: '100%',
   lastLineWidth: '100%',
   firstLineWidth: '100%',
+  style: {},
 };
 
 export default Paragraph;