fk-react-ui-components/components/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 = (
                <List width={`${this.props.itemWidth}px`}>
                    <Wrapper dimension={`${this.props.itemWidth}px`}>
                        <Img
                            onLoad={this.onLoad}
                            src={this.props.src}
                            onError={this.onError}
                        />
                    </Wrapper>
                </List>
            );
        } else {
            list = null;
        }

        return list;
    }
}

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

Image.defaultProps = {
    setCarouselFullWidth: f => f,
    itemWidth: 0
};