2016-05-20 22:05:03 +03:00
|
|
|
import React, { PropTypes } from 'react';
|
|
|
|
import { themr } from 'react-css-themr';
|
|
|
|
import classnames from 'classnames';
|
2016-05-28 20:15:12 +03:00
|
|
|
import { CARD } from '../identifiers.js';
|
2015-11-18 00:24:22 +03:00
|
|
|
|
2016-05-20 22:05:03 +03:00
|
|
|
const CardMedia = ({ aspectRatio, children, className, color, contentOverlay, image, theme, ...other }) => {
|
|
|
|
const classes = classnames(theme.cardMedia, {
|
|
|
|
[theme[aspectRatio]]: aspectRatio
|
|
|
|
}, className);
|
2015-11-18 00:24:22 +03:00
|
|
|
|
2016-05-20 22:05:03 +03:00
|
|
|
const innerClasses = classnames(theme.content, {
|
|
|
|
[theme.contentOverlay]: contentOverlay
|
|
|
|
});
|
2015-11-22 04:43:18 +03:00
|
|
|
|
2016-05-20 22:05:03 +03:00
|
|
|
const bgStyle = {
|
|
|
|
backgroundColor: color ? color : undefined,
|
|
|
|
backgroundImage: typeof image === 'string' ? `url('${image}')` : undefined
|
|
|
|
};
|
2015-11-18 00:24:22 +03:00
|
|
|
|
2016-05-20 22:05:03 +03:00
|
|
|
return (
|
|
|
|
<div style={bgStyle} className={classes} {...other}>
|
|
|
|
<div className={innerClasses}>
|
|
|
|
{children}
|
2015-11-18 00:24:22 +03:00
|
|
|
</div>
|
2016-05-20 22:05:03 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
CardMedia.propTypes = {
|
|
|
|
aspectRatio: PropTypes.oneOf([ 'wide', 'square' ]),
|
|
|
|
children: PropTypes.any,
|
|
|
|
className: PropTypes.string,
|
|
|
|
color: PropTypes.string,
|
|
|
|
contentOverlay: PropTypes.bool,
|
|
|
|
image: PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
|
|
|
PropTypes.element
|
|
|
|
]),
|
2016-06-04 00:44:33 +03:00
|
|
|
theme: PropTypes.shape({
|
|
|
|
cardMedia: PropTypes.string,
|
|
|
|
content: PropTypes.string,
|
|
|
|
contentOverlay: PropTypes.string,
|
|
|
|
square: PropTypes.string,
|
|
|
|
wide: PropTypes.string
|
2016-05-20 22:05:03 +03:00
|
|
|
})
|
|
|
|
};
|
2015-11-18 00:24:22 +03:00
|
|
|
|
2016-05-28 20:15:12 +03:00
|
|
|
export default themr(CARD)(CardMedia);
|
|
|
|
export { CardMedia };
|