scratch-www/src/components/carousel/carousel.jsx

93 lines
3 KiB
React
Raw Normal View History

var classNames = require('classnames');
var defaults = require('lodash.defaults');
2015-09-08 14:56:28 -04:00
var React = require('react');
var Slider = require('react-slick');
2015-09-08 14:56:28 -04:00
var Thumbnail = require('../thumbnail/thumbnail.jsx');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./carousel.scss');
2016-01-14 10:25:03 -05:00
/**
* Displays content in horizontal scrolling box. Example usage: splash page rows.
*/
var Carousel = React.createClass({
2015-10-09 16:16:37 -04:00
type: 'Carousel',
2015-09-08 14:56:28 -04:00
propTypes: {
items: React.PropTypes.array
},
getDefaultProps: function () {
return {
items: require('./carousel.json'),
showRemixes: false,
showLoves: false
2015-09-08 14:56:28 -04:00
};
},
render: function () {
var settings = this.props.settings || {};
defaults(settings, {
2016-07-21 10:12:16 -04:00
centerMode: false,
dots: false,
infinite: false,
lazyLoad: true,
slidesToShow: 5,
slidesToScroll: 5,
2016-07-21 10:12:16 -04:00
variableWidth: true,
responsive: [
{breakpoint: 480, settings: {
arrows: true,
slidesToScroll: 1,
slidesToShow: 1,
centerMode: true
}},
{breakpoint: 640, settings: {
slidesToScroll: 2,
slidesToShow: 2
}},
{breakpoint: 942, settings: {
slidesToScroll: 4,
slidesToShow: 4
}}
]
});
var arrows = this.props.items.length > settings.slidesToShow;
var classes = classNames(
'carousel',
this.props.className
);
2015-09-08 14:56:28 -04:00
return (
<Slider className={classes} arrows={arrows} {... settings}>
2015-09-10 15:00:07 -04:00
{this.props.items.map(function (item) {
var href = '';
switch (item.type) {
case 'gallery':
2015-10-24 12:20:19 -04:00
href = '/studios/' + item.id + '/';
break;
case 'project':
href = '/projects/' + item.id + '/';
break;
default:
href = '/' + item.type + '/' + item.id + '/';
}
2015-09-08 14:56:28 -04:00
return (
<Thumbnail key={[this.key, item.id].join('.')}
showLoves={this.props.showLoves}
showRemixes={this.props.showRemixes}
type={item.type}
href={href}
2015-09-08 14:56:28 -04:00
title={item.title}
src={item.thumbnail_url}
creator={item.creator}
remixes={item.remixers_count}
loves={item.love_count} />
2015-09-08 14:56:28 -04:00
);
}.bind(this))}
2015-09-08 14:56:28 -04:00
</Slider>
);
}
});
module.exports = Carousel;