fk-react-ui-components/lib/ImageCarousel/Image.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 { List, Wrapper, Img } from './styles/index';

export default class Image extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            success: true
        };
        this.onLoad = this.onLoad.bind(this);
        this.onError = this.onError.bind(this);
    }

    onLoad() {
        this.props.setCarouselFullWidth();
    }

    onError() {
        console.warn(`Unable to load ${this.props.src}`);
        this.setState({ success: false });
    }

    render() {
        let list = '';
        if (this.state.success) {
            list = React.createElement(
                List,
                { width: `${this.props.itemWidth}px` },
                React.createElement(
                    Wrapper,
                    { dimension: `${this.props.itemWidth}px` },
                    React.createElement(Img, {
                        onLoad: this.onLoad,
                        src: this.props.src,
                        onError: this.onError
                    })
                )
            );
        } else {
            list = null;
        }

        return list;
    }
}

Image.propTypes = {
    setCarouselFullWidth: PropTypes.func,
    itemWidth: PropTypes.number,
    src: PropTypes.string.isRequired
};

Image.defaultProps = {
    setCarouselFullWidth: f => f,
    itemWidth: 0
};
//# sourceMappingURL=Image.js.map