Merge branch 'master' of github.com:xinthink/react-native-material-kit

README.md

@@ -32,6 +32,7 @@ A set of UI components, in the purpose of introducing [Material Design][md] to a
 [debug-with-demo]: https://github.com/xinthink/rnmk-demo#debugging-local-rnmk-module
 
 ## Components
+- [Cards](#cards)
 - [Buttons](#buttons)
 - [Textfields](#text-fields)
 - [Toggles](#toggles)
@@ -42,6 +43,28 @@ A set of UI components, in the purpose of introducing [Material Design][md] to a
   - [Spinner](#spinner)
 - [Sliders](#sliders)
 
+### Cards
+![img-cards]
+
+Apply `Card Style` with only few styles !.  
+```jsx
+require('react-native-material-kit');
+const {
+  MKCardStyles
+} = MK;
+
+<View style={MKCardStyles.card}>
+  <Image source={{uri : base64Icon}} style={MKCardStyles.image}/>
+  <Text style={MKCardStyles.title}>Welcome</Text>
+  <Text style={MKCardStyles.content}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Mauris sagittis pellentesque lacus eleifend lacinia...
+  </Text>
+  <View style={MKCardStyles.menu}>{menu}</View>
+  <Text style={MKCardStyles.action}>My Action</Text>
+</View>
+
+```
 ### Buttons
 
 ![buttons-mdl][img-buttons]
@@ -113,6 +136,7 @@ the jsx equivalent:
 > Why builders? See the ‘[Builder vs. configuration object][issue-3]’ discussion.
 
 [img-buttons]: https://cloud.githubusercontent.com/assets/390805/8888853/69f8d9f8-32f2-11e5-9823-c235ab8c0dd2.gif
+[img-cards]: https://cloud.githubusercontent.com/assets/1107936/10191049/2cb85614-6771-11e5-8dc2-17e5847a7abf.png
 [mdl-buttons]: http://www.getmdl.io/components/index.html#buttons-section
 [mdl-theme]: http://www.getmdl.io/customize/index.html
 [buttons-sample]: https://github.com/xinthink/rnmk-demo/blob/master/app/buttons.js

lib/index.js

@@ -19,3 +19,11 @@ exports.MKRipple = exports.mdl.Ripple;
 exports.MKProgress = exports.mdl.Progress;
 exports.MKSlider = exports.mdl.Slider;
 exports.MKSpinner = exports.mdl.Spinner;
+
+exports.MKCard = exports.mdl.Card;
+exports.MKCardTitle = exports.mdl.Title;
+exports.MKCardImage = exports.mdl.MKCardImage;
+exports.MKCardContent = exports.mdl.MKCardContent;
+exports.MKCardMenu = exports.mdl.MKCardMenu;
+exports.MKCardAction = exports.mdl.MKCardAction;
+exports.MKCardStyles = exports.mdl.MKCardStyles;

lib/mdl/cards/action.js

@@ -0,0 +1,17 @@
+const React = require('react-native');
+let styles = require('./styles');
+
+const {
+  PropTypes,
+  View,
+} = React;
+
+var Action = React.createClass({
+
+  render(){
+    return <View style={styles.action}>{this.props.content}</View>
+  },
+
+})
+
+module.exports = Action;

lib/mdl/cards/container.js

@@ -0,0 +1,20 @@
+const React = require('react-native');
+let styles = require('./styles');
+
+const {
+  PropTypes,
+  View,
+} = React;
+
+var Container = React.createClass({
+
+  render(){
+  	return (
+  		<View style={styles.card}>
+  			{this.props.children}
+  		</View>
+  	)
+  },
+})
+
+module.exports = Container;

lib/mdl/cards/content.js

@@ -0,0 +1,24 @@
+const React = require('react-native');
+let styles = require('./styles');
+
+const {
+  PropTypes,
+  View,
+  Text,
+} = React;
+
+var Content = React.createClass({
+
+  render(){
+    console.log(this.props);
+    if(this.props.children.type.displayName === "Text"){
+        return <Text style={styles.content}>{this.props.children}</Text>
+    }else{
+      return <View>{this.props.children}</View>
+    }
+
+  },
+
+})
+
+module.exports = Content;

lib/mdl/cards/image.js

@@ -0,0 +1,19 @@
+const React = require('react-native');
+let styles = require('./styles');
+
+const {
+  PropTypes,
+  View,
+  Image,
+} = React;
+
+var Imag = React.createClass({
+
+  render(){
+    console.log(this.props);
+    return <View>{this.props.children}</View>;
+  },
+
+})
+
+module.exports = Imag;

lib/mdl/cards/menu.js

@@ -0,0 +1,18 @@
+const React = require('react-native');
+let styles = require('./styles');
+
+const {
+  PropTypes,
+  View,
+  Text,
+} = React;
+
+var Menu = React.createClass({
+
+  render(){
+    return this.props.children
+  },
+
+})
+
+module.exports = Menu;

lib/mdl/cards/styles.js

@@ -0,0 +1,57 @@
+const React = require('react-native');
+
+const {
+  StyleSheet
+} = React;
+
+// TODO: Plug colors etc with MKTheme 
+var style = StyleSheet.create({
+    card: {
+    flex : 1,
+    backgroundColor: "#ffffff",
+    borderRadius: 2,
+
+    shadowColor: "rgba(0,0,0,.12)",
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+    shadowOffset: {
+      height: 1,
+      width: 2
+    }
+  },
+	image : {
+		flex : 1,
+		height : 170,
+		resizeMode: 'cover'
+	},
+	title : {
+		position : "absolute",
+		top : 120,
+		left : 26,
+		backgroundColor: 'transparent',
+		padding : 16,
+		fontSize : 24,
+		color : "#000000",
+		fontWeight: 'bold',
+	},
+	content : {
+		padding : 15,
+		color: "rgba(0,0,0,.54)",
+	},
+	action : {
+		borderStyle:"solid",
+		borderTopColor : "rgba(0,0,0,.1)",
+		borderTopWidth : 1,
+		padding : 15,
+
+	},
+	menu : {
+		position : "absolute",
+		top : 16,
+		right : 16,
+		backgroundColor : "transparent",
+
+	}
+});
+
+module.exports = style;

lib/mdl/cards/title.js

@@ -0,0 +1,18 @@
+const React = require('react-native');
+let styles = require('./styles');
+
+const {
+  PropTypes,
+  View,
+  Text,
+} = React;
+
+var Title = React.createClass({
+
+  render(){
+      return <Text style={styles.title}>{this.props.children}</Text>      
+  },
+
+})
+
+module.exports = Title;

lib/mdl/index.js

@@ -8,3 +8,10 @@ exports.Spinner = require('./Spinner');
 exports.Slider = require('./Slider');
 exports.Button = require('./Button');
 exports.Ripple = require('./Ripple');
+exports.Card = require('./cards/container');
+exports.Title = require('./cards/title');
+exports.MKCardImage = require('./cards/image');
+exports.MKCardContent= require('./cards/content');
+exports.MKCardMenu= require('./cards/menu');
+exports.MKCardAction= require('./cards/action');
+exports.MKCardStyles = require('./cards/styles');