From a21c593356232ce3da129fb1d3258ba40132fc8e Mon Sep 17 00:00:00 2001 From: leMaik Date: Fri, 6 Apr 2018 22:18:14 +0200 Subject: [PATCH] Update Slide to use withStyles. --- package-lock.json | 3 +- package.json | 1 + src/Slide.js | 249 ++++++++++++++++++++-------------------------- src/Slide.md | 34 ++++++- 4 files changed, 140 insertions(+), 147 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3753c31..67761fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2228,8 +2228,7 @@ "classnames": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz", - "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=", - "dev": true + "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=" }, "clean-css": { "version": "4.1.11", diff --git a/package.json b/package.json index cbb9614..e6511b4 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react-swipeable-views": "^0.12.0" }, "dependencies": { + "classnames": "^2.2.5", "material-ui-dots": "^2.0.0-pre.1", "prop-types": "^15.5.8" }, diff --git a/src/Slide.js b/src/Slide.js index 5c9f48d..005c16b 100644 --- a/src/Slide.js +++ b/src/Slide.js @@ -1,154 +1,121 @@ import React from 'react' import PropTypes from 'prop-types' import { blue } from 'material-ui/colors' +import withStyles from 'material-ui/styles/withStyles' +import classNames from 'classnames' const styles = { - mobile: { - root: { - color: 'white', - backgroundColor: blue[500], - height: '100%' - }, - media: { - position: 'relative', - top: '50%', - transform: 'translateY(-50%)' - }, - mediaBackground: { - backgroundColor: blue[700], - height: 'calc(100% - 241px)', - textAlign: 'center' - }, - subtitle: { - fontSize: '15px', - fontWeight: 400, - lineHeight: '18px', - margin: 0 - }, - text: { - textAlign: 'center', - maxWidth: '80%', - margin: '0 auto', - paddingTop: 30 - }, - title: { - fontSize: '24px', - fontWeight: 700, - lineHeight: '32px', - marginBottom: 8 + root: { + color: 'white', + backgroundColor: blue[500], + height: '100%' + }, + rootMobileLandscape: { + width: '100%', + display: 'flex', + flexDirection: 'row' + }, + media: { + height: '100%', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + '& > *': { + maxHeight: '100%' } }, - mobileLandscape: { - root: { - color: 'white', - backgroundColor: blue[500], - height: '100%', - width: '100%', - display: 'flex', - flexDirection: 'row' - }, - media: { - position: 'relative', - top: '50%', - transform: 'translateY(-50%)' - }, - mediaBackground: { - backgroundColor: blue[700], - height: '100%', - textAlign: 'center', - flex: '1 1', - alignSelf: 'stretch' - }, - subtitle: { - fontSize: '15px', - fontWeight: 400, - lineHeight: '18px', - margin: 0 - }, - text: { - minWidth: 300, - maxWidth: 'calc(50% - 48px)', - padding: '24px 24px 128px', - flex: '0 1', - alignSelf: 'center' - }, - title: { - fontSize: '24px', - fontWeight: 700, - lineHeight: '32px', + mediaMobile: { + position: 'relative', + top: '50%', + transform: 'translateY(-50%)' + }, + mediaMobileLandscape: {}, + mediaBackground: { + backgroundColor: blue[700], + height: 'calc(100% - 216px)', + textAlign: 'center' + }, + mediaBackgroundMobile: { + height: 'calc(100% - 241px)' + }, + mediaBackgroundMobileLandscape: { + height: '100%', + flex: '1 1', + alignSelf: 'stretch' + }, + text: { + textAlign: 'center', + maxWidth: '80%', + margin: '0 auto', + paddingTop: 32 + }, + textMobile: { + paddingTop: 30, + '& $title': { marginBottom: 8 } }, - desktop: { - root: { - color: 'white', - backgroundColor: blue[500], - height: '100%' - }, - media: { - height: '100%', - display: 'flex', - justifyContent: 'center', - alignItems: 'center' - }, - mediaBackground: { - backgroundColor: blue[700], - height: 'calc(100% - 216px)', - textAlign: 'center' - }, - subtitle: { - fontSize: '15px', - fontWeight: 400, - lineHeight: '18px', - margin: 0 - }, - text: { - textAlign: 'center', - maxWidth: '80%', - margin: '0 auto', - paddingTop: 32 - }, - title: { - fontSize: '24px', - fontWeight: 700, - lineHeight: '32px', - marginBottom: 12, - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden' - } + textMobileLandscape: { + minWidth: 300, + maxWidth: 'calc(50% - 48px)', + padding: '24px 24px 128px', + flex: '0 1', + alignSelf: 'center', + textAlign: 'left' + }, + title: { + fontSize: '24px', + fontWeight: 700, + lineHeight: '32px', + marginBottom: 12, + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden' + }, + subtitle: { + fontSize: '15px', + fontWeight: 400, + lineHeight: '18px', + margin: 0 } } -export default function Slide (props) { +function Slide (props) { const { - contentStyle, + classes, media, - mediaBackgroundStyle, - mediaStyle, subtitle, - subtitleStyle, - textStyle, title, - titleStyle, mobile, - landscape + landscape: landscapeProp } = props - const style = mobile ? (landscape ? styles.mobileLandscape : styles.mobile) : styles.desktop + const mobileLandscape = mobile && landscapeProp return ( -
-
-
{React.cloneElement(media, { - style: {...media.style, maxHeight: '100%'} - })}
+
+
+
+ {media} +
-
-
+
+
{title}
-

+

{subtitle}

@@ -157,24 +124,22 @@ export default function Slide (props) { } Slide.propTypes = { - /** Override the inline-styles of the content. */ - contentStyle: PropTypes.object, - /** Object to display in the upper half. */ + /** + * Useful to extend the style applied to components. + */ + classes: PropTypes.object.isRequired, + /** + * Object to display in the upper half. + */ media: PropTypes.node.isRequired, - /** Override the inline-styles of the media container. */ - mediaBackgroundStyle: PropTypes.object, - /** Override the inline-styles of the media. */ - mediaStyle: PropTypes.object, - /** Subtitle of the slide. */ + /** + * Subtitle of the slide. + **/ subtitle: PropTypes.string.isRequired, - /** Override the inline-styles of the subtitle. */ - subtitleStyle: PropTypes.object, - /** Override the inline-styles of the text container. */ - textStyle: PropTypes.object, - /** Title of the slide. */ + /** + * Title of the slide. + **/ title: PropTypes.string.isRequired, - /** Override the inline-styles of the title. */ - titleStyle: PropTypes.object, /** * If `true`, the screen width and height is filled. * @ignore @@ -186,3 +151,5 @@ Slide.propTypes = { */ landscape: PropTypes.bool } + +export default withStyles(styles)(Slide) diff --git a/src/Slide.md b/src/Slide.md index fdb19e7..8169568 100644 --- a/src/Slide.md +++ b/src/Slide.md @@ -3,11 +3,23 @@ The `Slide` supports landscape and portrait mode, which will be selected automat ### Portrait mode ``` const { red } = require('material-ui/colors'); +const { withStyles } = require('material-ui/styles'); -} - mediaBackgroundStyle={{backgroundColor: red[400]}} - contentStyle={{backgroundColor: red[600], height: 500, width: 400}} title='This is a very cool feature' subtitle='Just using this will blow your mind.' /> @@ -16,8 +28,22 @@ const { red } = require('material-ui/colors'); ### Landscape mode ``` const { red } = require('material-ui/colors'); +const { withStyles } = require('material-ui/styles'); + +const styles = { + root: { + backgroundColor: red[600], + height: 400, + width: 800 + }, + media: { + backgroundColor: red[400] + } +} + +const StyledSlide = withStyles(styles)(Slide); -} mediaBackgroundStyle={{backgroundColor: red[400]}} contentStyle={{backgroundColor: red[600], height: 400, width: 800}}