From bca2864859c2278814f9c7f23ab6336a21b6d3f4 Mon Sep 17 00:00:00 2001 From: Quentin Valmori Date: Wed, 30 Sep 2015 12:40:33 +0200 Subject: [PATCH 1/3] First step to implement cards --- lib/index.js | 2 ++ lib/mdl/Card.js | 93 ++++++++++++++++++++++++++++++++++++++++++++++++ lib/mdl/index.js | 1 + 3 files changed, 96 insertions(+) create mode 100644 lib/mdl/Card.js diff --git a/lib/index.js b/lib/index.js index 0dc41e03..600a1730 100644 --- a/lib/index.js +++ b/lib/index.js @@ -19,3 +19,5 @@ 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; \ No newline at end of file diff --git a/lib/mdl/Card.js b/lib/mdl/Card.js new file mode 100644 index 00000000..90d192a7 --- /dev/null +++ b/lib/mdl/Card.js @@ -0,0 +1,93 @@ + +const React = require('react-native'); +const MKColor = require('../MKColor'); +const {getTheme} = require('../theme'); + +const { + Component, + PropTypes, + View, + Text, + Image, + StyleSheet +} = React; + +var style = StyleSheet.create({ + image : { + flex : 1, + height : 170, + resizeMode: 'cover' + }, + title : { + position : "absolute", + top : 120, + left : 26, + backgroundColor: 'transparent', + padding : 16, + fontSize : 24, + color : "#ffffff", + fontWeight: 'bold', + }, + content : { + padding : 15, + + }, + action : { + borderStyle:"solid", + borderTopColor : "rgba(0,0,0,.1)", + borderTopWidth : 1, + padding : 15, + + }, + menu : { + position : "absolute", + top : 16, + right : 16, + backgroundColor : "transparent", + + } +}); + +class Card extends Component { + constructor(props) { + super(props); + + } + + render(){ + return ( + + + {this.props.title} + + {this.props.content} + + + {this.props.action} + + + {this.props.menu} + + + ) + } +} + +Card.propTypes = { + backgroundImage : Image.propTypes.source, + title : PropTypes.string, + content : PropTypes.node, + menu : PropTypes.node, + action : PropTypes.node + +}; + +// ##
Defaults
+Card.defaultProps = { + // backgroundImage: {}, + // title : "", + // content : "", + // menu : '', + // action : '' +}; +module.exports = Card; \ No newline at end of file diff --git a/lib/mdl/index.js b/lib/mdl/index.js index fb49a79f..6936aa2a 100644 --- a/lib/mdl/index.js +++ b/lib/mdl/index.js @@ -8,3 +8,4 @@ exports.Spinner = require('./Spinner'); exports.Slider = require('./Slider'); exports.Button = require('./Button'); exports.Ripple = require('./Ripple'); +exports.Card = require('./Card'); From b9fb185c572843eb725634b76c8aa04fe8845f27 Mon Sep 17 00:00:00 2001 From: Quentin Valmori Date: Thu, 1 Oct 2015 10:52:23 +0200 Subject: [PATCH 2/3] Cards are now only style. If needed, ReactComponent are created but not used yet --- lib/index.js | 8 +++- lib/mdl/Card.js | 93 -------------------------------------- lib/mdl/cards/action.js | 17 +++++++ lib/mdl/cards/container.js | 20 ++++++++ lib/mdl/cards/content.js | 24 ++++++++++ lib/mdl/cards/image.js | 19 ++++++++ lib/mdl/cards/menu.js | 18 ++++++++ lib/mdl/cards/styles.js | 56 +++++++++++++++++++++++ lib/mdl/cards/title.js | 18 ++++++++ lib/mdl/index.js | 8 +++- 10 files changed, 186 insertions(+), 95 deletions(-) delete mode 100644 lib/mdl/Card.js create mode 100644 lib/mdl/cards/action.js create mode 100644 lib/mdl/cards/container.js create mode 100644 lib/mdl/cards/content.js create mode 100644 lib/mdl/cards/image.js create mode 100644 lib/mdl/cards/menu.js create mode 100644 lib/mdl/cards/styles.js create mode 100644 lib/mdl/cards/title.js diff --git a/lib/index.js b/lib/index.js index 600a1730..f1f7b2fd 100644 --- a/lib/index.js +++ b/lib/index.js @@ -20,4 +20,10 @@ exports.MKProgress = exports.mdl.Progress; exports.MKSlider = exports.mdl.Slider; exports.MKSpinner = exports.mdl.Spinner; -exports.MKCard = exports.mdl.Card; \ No newline at end of file +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; diff --git a/lib/mdl/Card.js b/lib/mdl/Card.js deleted file mode 100644 index 90d192a7..00000000 --- a/lib/mdl/Card.js +++ /dev/null @@ -1,93 +0,0 @@ - -const React = require('react-native'); -const MKColor = require('../MKColor'); -const {getTheme} = require('../theme'); - -const { - Component, - PropTypes, - View, - Text, - Image, - StyleSheet -} = React; - -var style = StyleSheet.create({ - image : { - flex : 1, - height : 170, - resizeMode: 'cover' - }, - title : { - position : "absolute", - top : 120, - left : 26, - backgroundColor: 'transparent', - padding : 16, - fontSize : 24, - color : "#ffffff", - fontWeight: 'bold', - }, - content : { - padding : 15, - - }, - action : { - borderStyle:"solid", - borderTopColor : "rgba(0,0,0,.1)", - borderTopWidth : 1, - padding : 15, - - }, - menu : { - position : "absolute", - top : 16, - right : 16, - backgroundColor : "transparent", - - } -}); - -class Card extends Component { - constructor(props) { - super(props); - - } - - render(){ - return ( - - - {this.props.title} - - {this.props.content} - - - {this.props.action} - - - {this.props.menu} - - - ) - } -} - -Card.propTypes = { - backgroundImage : Image.propTypes.source, - title : PropTypes.string, - content : PropTypes.node, - menu : PropTypes.node, - action : PropTypes.node - -}; - -// ##
Defaults
-Card.defaultProps = { - // backgroundImage: {}, - // title : "", - // content : "", - // menu : '', - // action : '' -}; -module.exports = Card; \ No newline at end of file diff --git a/lib/mdl/cards/action.js b/lib/mdl/cards/action.js new file mode 100644 index 00000000..be09ef1f --- /dev/null +++ b/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 {this.props.content} + }, + +}) + +module.exports = Action; diff --git a/lib/mdl/cards/container.js b/lib/mdl/cards/container.js new file mode 100644 index 00000000..04d75ca6 --- /dev/null +++ b/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 ( + + {this.props.children} + + ) + }, +}) + +module.exports = Container; diff --git a/lib/mdl/cards/content.js b/lib/mdl/cards/content.js new file mode 100644 index 00000000..e1f9f0d5 --- /dev/null +++ b/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 {this.props.children} + }else{ + return {this.props.children} + } + + }, + +}) + +module.exports = Content; diff --git a/lib/mdl/cards/image.js b/lib/mdl/cards/image.js new file mode 100644 index 00000000..c7b9c47e --- /dev/null +++ b/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 {this.props.children}; + }, + +}) + +module.exports = Imag; diff --git a/lib/mdl/cards/menu.js b/lib/mdl/cards/menu.js new file mode 100644 index 00000000..c73fe34e --- /dev/null +++ b/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; diff --git a/lib/mdl/cards/styles.js b/lib/mdl/cards/styles.js new file mode 100644 index 00000000..809ae188 --- /dev/null +++ b/lib/mdl/cards/styles.js @@ -0,0 +1,56 @@ +const React = require('react-native'); + +const { + StyleSheet +} = React; + +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; diff --git a/lib/mdl/cards/title.js b/lib/mdl/cards/title.js new file mode 100644 index 00000000..0f9ca469 --- /dev/null +++ b/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 {this.props.children} + }, + +}) + +module.exports = Title; diff --git a/lib/mdl/index.js b/lib/mdl/index.js index 6936aa2a..045f8c69 100644 --- a/lib/mdl/index.js +++ b/lib/mdl/index.js @@ -8,4 +8,10 @@ exports.Spinner = require('./Spinner'); exports.Slider = require('./Slider'); exports.Button = require('./Button'); exports.Ripple = require('./Ripple'); -exports.Card = require('./Card'); +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'); From d020f72e74e5fab0b9ce973fd298f28b429fe8f4 Mon Sep 17 00:00:00 2001 From: Quentin Valmori Date: Thu, 1 Oct 2015 11:02:14 +0200 Subject: [PATCH 3/3] Readme + todo --- README.md | 24 ++++++++++++++++++++++++ lib/mdl/cards/styles.js | 1 + 2 files changed, 25 insertions(+) diff --git a/README.md b/README.md index e869e14d..3c959bfd 100644 --- a/README.md +++ b/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; + + + + Welcome + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Mauris sagittis pellentesque lacus eleifend lacinia... + + {menu} + My Action + + +``` ### Buttons ![buttons-mdl][img-buttons] @@ -111,6 +134,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 diff --git a/lib/mdl/cards/styles.js b/lib/mdl/cards/styles.js index 809ae188..e8264d05 100644 --- a/lib/mdl/cards/styles.js +++ b/lib/mdl/cards/styles.js @@ -4,6 +4,7 @@ const { StyleSheet } = React; +// TODO: Plug colors etc with MKTheme var style = StyleSheet.create({ card: { flex : 1,