fk-react-ui-components/lib/ImageCarousel/CarouselContent.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 { Ul } from './styles/index';

export default class CarouselContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            totalWidth: 0,
            itemWidth: parseInt(this.props.width.replace('px', ''), 10)
        };
        this.setCarouselFullWidth = this.setCarouselFullWidth.bind(this);
    }

    setCarouselFullWidth() {
        this.setState(prevState => ({
            totalWidth: prevState.totalWidth + this.state.itemWidth
        }));
        this.props.initializeSlider(this.state.itemWidth);
    }

    render() {
        const items = React.Children.map(this.props.children, child => React.cloneElement(child, {
            setCarouselFullWidth: this.setCarouselFullWidth,
            itemWidth: this.state.itemWidth
        }));

        return React.createElement(
            'div',
            null,
            React.createElement(
                'div',
                {
                    style: {
                        width: `${this.state.itemWidth}px`,
                        overflow: 'hidden',
                        margin: '0 auto'
                    }
                },
                React.createElement(
                    Ul,
                    {
                        left: `${this.props.left}px`,
                        width: `${this.state.totalWidth}px`
                    },
                    items
                )
            )
        );
    }
}

CarouselContent.propTypes = {
    width: PropTypes.string.isRequired,
    initializeSlider: PropTypes.func,
    children: PropTypes.arrayOf(PropTypes.node).isRequired,
    left: PropTypes.number
};

CarouselContent.defaultProps = {
    left: 0,
    initializeSlider: f => f
};
//# sourceMappingURL=CarouselContent.js.map