fk-react-ui-components/components/Breadcrumbs/index.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

/**
 * Created by godfrey.f on 20/11/17.
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { BreadcrumbContainer } from './styles/index';

function BreadcrumbListItem(props) {
    return (
        <li>
            <span
                className="section-link"
                onClick={props.changeBreadCrumbState}
                role="button"
            >
                {props.breadcrumb.label}
            </span>
            <span className="separator">{props.separator}</span>
        </li>
    );
}

BreadcrumbListItem.propTypes = {
    changeBreadCrumbState: PropTypes.func,
    breadcrumb: PropTypes.shape({
        label: PropTypes.string.isRequired
    }).isRequired,
    separator: PropTypes.string.isRequired
};

BreadcrumbListItem.defaultProps = {
    changeBreadCrumbState: undefined
};

class Breadcrumbs extends Component {
    componentWillMount() {
        if (this.props.breadcrumbItems) {
            this.props.breadcrumbItems[
                this.props.breadcrumbItems.length - 1
            ].current = true;
        }
    }
    changeBreadCrumbState(breadcrumb) {
        if (breadcrumb.current) {
            return;
        }
        this.props.breadcrumbItems[
            this.props.breadcrumbItems.length - 1
        ].current = true;

        if (this.props.changeBreadCrumbState) {
            this.props.changeBreadCrumbState(breadcrumb.state);
        }
    }

    render() {
        const breadcrumbs = this.props.breadcrumbItems;
        const separator =
            (this.props.options && this.props.options.separator) || '>';

        if (!breadcrumbs.length) {
            return null;
        }
        return (
            <BreadcrumbContainer>
                <ul>
                    {breadcrumbs.map(breadcrumb => (
                        <BreadcrumbListItem
                            key={breadcrumb.state}
                            breadcrumb={breadcrumb}
                            changeBreadCrumbState={e =>
                                this.changeBreadCrumbState(breadcrumb, e)
                            }
                            separator={separator}
                        />
                    ))}
                </ul>
            </BreadcrumbContainer>
        );
    }
}

Breadcrumbs.propTypes = {
    changeBreadCrumbState: PropTypes.func,
    options: PropTypes.shape({
        separator: PropTypes.string
    }),
    breadcrumbItems: PropTypes.arrayOf(
        PropTypes.shape({
            label: PropTypes.string.isRequired,
            current: PropTypes.bool
        })
    ).isRequired
};
Breadcrumbs.defaultProps = {
    options: undefined,
    changeBreadCrumbState: undefined
};

export default Breadcrumbs;