react-cms/src/app/components/Gallery/Slider/index.js

For personal use. Not production.

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import Slider from 'react-slick';

export default class MyComponent extends Component{

	static propTypes = {
		gallery: PropTypes.array.isRequired,
		// galleryExpanded: PropTypes.bool.isRequired,
	};

	
	static defaultProps = {
		// galleryExpanded: false,
	};

	
	static contextTypes = {

	};


	constructor(props){

		super(props);

		this.state = {
			galleryExpanded: false,
		};
	}


	componentWillMount(){
	
	}


	componentDidMount(){

	}

	
	render(){

		const {
			gallery,
			...other
		} = this.props;

		const {
			galleryExpanded,
		} = this.state;

		if(!gallery || !gallery.length){
			return null;
		}

		let galleryItems = [];

		let galleryThumbs = [];


		gallery.map((n, index) => {

			// if(index === 0){
			// 	return;
			// }

			const {
				imageFormats: image,
			} = n;

			if(!image){
				return;
			}

			const {
				original,
				thumb,
				slider_thumb,
				slider_dot_thumb,
				big,

			} = image;

			galleryThumbs.push(slider_dot_thumb);

			// if(galleryItem && galleryItem === n.image){

				

			// 	return;
			// }

			galleryItems.push(<img 
				key={index}
				// key={original}
				src={galleryExpanded ? big : slider_thumb}
				// src={original}
				style={{
					// cursor: !galleryExpanded ? 'pointer' : undefined,
					cursor: 'pointer',
					// height: "auto",
				}}
				onClick={event => {
					this.setState({
						galleryExpanded: !galleryExpanded,
					});
				}}
				// onClick={event => {
				// 	this.setState({
				// 		galleryItem: big,
				// 	});
				// }}
			/>);
		});

		let responsive;

		if(gallery.length  === 1){

			responsive = [ 
      	{ breakpoint: 768, settings: { slidesToShow: 1 } }, 
      	// { breakpoint: 1024, settings: { slidesToShow: galleryExpanded ? 1 : 2 } }, 
      	// { breakpoint: 1200, settings: { slidesToShow: galleryExpanded ? 1 : 3 } }, 
      	// { breakpoint: 100000, settings: { slidesToShow: galleryExpanded ? 1 : 5 } } ,
      ];

		}
		else if(gallery.length  === 2){

			responsive = [ 
      	{ breakpoint: 768, settings: { slidesToShow: 1 } }, 
      	{ breakpoint: 1024, settings: { slidesToShow: galleryExpanded ? 1 : 2 } }, 
      	{ breakpoint: 1200, settings: { slidesToShow: galleryExpanded ? 1 : 2 } }, 
      	{ breakpoint: 100000, settings: { slidesToShow: galleryExpanded ? 1 : 2 } } ,
      ];

		}
		else{

			responsive = [ 
      	{ breakpoint: 768, settings: { slidesToShow: 1 } }, 
      	{ breakpoint: 1024, settings: { slidesToShow: galleryExpanded ? 1 : 2 } }, 
      	{ breakpoint: 1200, settings: { slidesToShow: galleryExpanded ? 1 : 3 } }, 
      	{ breakpoint: 100000, settings: { slidesToShow: galleryExpanded ? 1 : 5 } } ,
      ];

		}

		return <div
			{...other}
			className={typeof window === "undefined" ? "no-js" : ""}
		>
			<Slider {
				...{
		      dots: true,
		      // lazyLoad: typeof window === "undefined" ? false : true,
		      // adaptiveHeight: true,
		      adaptiveHeight: galleryExpanded ? true : false,
		      dotsClass: "slick-dots slick-paging",
		      infinite: true,
		      // centerMode: true,
		      speed: 2000,
		      slidesToShow: 1,
		      slidesToScroll: 1,
		      // lazyLoad: true,
		      responsive: responsive,
		      customPaging: function(i) {
		        // return <a><img src={`${baseUrl}/abstract0${i+1}.jpg`}/></a>



		        const thumb = galleryThumbs[i];
		        return <a><img src={thumb}/></a>
		      },
		    }}
	      className={[
	      	galleryExpanded ? "" : "no-expanded",
	      ].join(" ")}
      >
        {galleryItems}
      </Slider> 
		</div>
	}
}