fk-react-ui-components/lib/ImageCarousel/ImageCarousel.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import React from 'react';
import PropTypes from 'prop-types';
import { Section } from './styles/index';
import CarouselContent from './CarouselContent';
import NavButton from './NavButton';

export default class ImageCarousel extends React.Component {
    constructor() {
        super();
        this.state = {
            left: 0,
            slideWidth: 0,
            imageCount: 0,
            currentIndex: 1
        };
        this.initializeSlider = this.initializeSlider.bind(this);
        this.moveCarousel = this.moveCarousel.bind(this);
    }

    initializeSlider(width) {
        this.setState(prevState => ({
            slideWidth: width,
            imageCount: prevState.imageCount + 1
        }));
    }

    moveCarousel(direction) {
        if (direction === 'next') {
            if (this.state.currentIndex < this.state.imageCount) {
                this.setState({
                    left: this.state.left - this.state.slideWidth,
                    currentIndex: this.state.currentIndex + 1
                });
            }
        } else if (direction === 'prev') {
            if (this.state.currentIndex > 1) {
                this.setState({
                    left: this.state.left + this.state.slideWidth,
                    currentIndex: this.state.currentIndex - 1
                });
            }
        }
    }

    render() {
        const items = React.Children.map(this.props.children, child => {
            if (child.type === CarouselContent) {
                return React.cloneElement(child, {
                    initializeSlider: this.initializeSlider,
                    left: this.state.left
                });
            } else if (child.type === NavButton) {
                return React.cloneElement(child, {
                    moveCarousel: this.moveCarousel
                });
            }
        });

        return React.createElement(
            Section,
            {
                width: this.props.width,
                padding: this.props.padding,
                margin: this.props.margin
            },
            items
        );
    }
}

ImageCarousel.propTypes = {
    children: PropTypes.arrayOf(PropTypes.node).isRequired,
    width: PropTypes.string.isRequired,
    padding: PropTypes.string.isRequired,
    margin: PropTypes.string.isRequired
};
//# sourceMappingURL=ImageCarousel.js.map