MultiWords and tests

mfrachet · Oct 17, 2017 · 494d561 · 494d561
1 parent 154a4b1
commit 494d561
Show file tree

Hide file tree

Showing 8 changed files with 16,375 additions and 32 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,2 +1,3 @@
 ./Example
-./ExampleExpo
+./ExampleExpo
+./ExampleWeb
diff --git a/ExampleExpo/components/Card.js b/ExampleExpo/components/Card.js
@@ -1,60 +1,67 @@
-import React, { PropTypes } from 'react';
-import Placeholder from 'rn-placeholder';
-import { View, Text, Image, StyleSheet } from 'react-native';
+import React, { PropTypes } from "react";
+import Placeholder from "rn-placeholder";
+import { View, Text, Image, StyleSheet } from "react-native";
 
 const DEFAULT_SIZE = 12;
 const IMAGE_SIZE = 40;
 const styles = StyleSheet.create({
   card: {
     padding: 20,
-    backgroundColor: '#ffffff',
+    backgroundColor: "#ffffff",
     borderRadius: 2,
-    shadowColor: '#000000',
+    shadowColor: "#000000",
     shadowOpacity: 0.3,
     shadowRadius: 1,
     shadowOffset: {
       height: 1,
-      width: 0.3,
+      width: 0.3
     },
     marginBottom: DEFAULT_SIZE,
     marginRight: DEFAULT_SIZE,
-    marginLeft: DEFAULT_SIZE,
+    marginLeft: DEFAULT_SIZE
   },
   media: {
     height: IMAGE_SIZE,
     width: IMAGE_SIZE,
-    marginRight: DEFAULT_SIZE,
+    marginRight: DEFAULT_SIZE
   },
   container: {
     flex: 1,
-    flexDirection: 'row',
+    flexDirection: "row"
   },
   username: {
     flex: 1,
-    color: '#3F51B5',
-    fontSize: 16,
+    color: "#3F51B5",
+    fontSize: 16
   },
   date: {
-    color: '#aaaaaa',
-    fontSize: 12,
+    color: "#aaaaaa",
+    fontSize: 12
   },
   content: {
     marginTop: DEFAULT_SIZE,
     lineHeight: DEFAULT_SIZE * 2,
-    color: '#444444',
-  },
+    color: "#444444"
+  }
 });
 
+const words = [
+  {
+    width: "20%"
+  },
+  {
+    width: "40%"
+  },
+  {
+    width: "40%"
+  }
+];
+
 export default function Card({ image, username, content, isLoaded, date }) {
   const heightStyle = { height: 150 };
   return (
     <View style={[styles.card, !isLoaded && heightStyle]}>
-      <Placeholder.ImageContent
-        onReady={isLoaded}
-        lineNumber={2}
-        animate="shine"
-        lastLineWidth="40%"
-      >
+      <Placeholder.MultiWords onReady={isLoaded} words={words} animate="fade">
         <View>
           <View style={styles.container}>
             <Image source={{ uri: image }} style={styles.media} />
@@ -65,7 +72,7 @@ export default function Card({ image, username, content, isLoaded, date }) {
           </View>
           <Text style={styles.content}>{content}</Text>
         </View>
-      </Placeholder.ImageContent>
+      </Placeholder.MultiWords>
     </View>
   );
 }
@@ -75,5 +82,5 @@ Card.propTypes = {
   username: PropTypes.string.isRequired,
   content: PropTypes.string.isRequired,
   date: PropTypes.string.isRequired,
-  isLoaded: PropTypes.bool.isRequired,
+  isLoaded: PropTypes.bool.isRequired
 };