fk-react-ui-components/lib/Breadcrumb/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

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import PrimaryHeader from 'components/PrimaryHeader';
import { BreadcrumbContainer } from './styles/index';

function BreadcrumbListItem(props) {
    return React.createElement(
        'li',
        null,
        React.createElement(
            'span',
            {
                className: 'section-link',
                onClick: props.changeBreadCrumbState,
                role: 'button'
            },
            props.breadcrumb.label
        ),
        React.createElement('i', { className: 'fa fa-chevron-right' })
    );
}

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

BreadcrumbListItem.defaultProps = {
    changeBreadCrumbState: undefined
};

class Breadcrumb extends Component {
    changeBreadCrumbState(breadcrumb) {
        if (this.props.changeBreadCrumbState) {
            this.props.changeBreadCrumbState(breadcrumb.state);
        }
    }

    render() {
        const breadcrumbs = this.props.breadcrumbItems;

        if (!breadcrumbs.length) {
            return null;
        }

        return React.createElement(
            BreadcrumbContainer,
            null,
            React.createElement(
                'ul',
                null,
                breadcrumbs.map((breadcrumb, index) => {
                    if (index === breadcrumbs.length - 1) {
                        return React.createElement(
                            'li',
                            null,
                            React.createElement(PrimaryHeader, {
                                headerText: breadcrumb.label
                            })
                        );
                    }

                    return React.createElement(BreadcrumbListItem, {
                        key: breadcrumb.state,
                        breadcrumb: breadcrumb,
                        changeBreadCrumbState: e => this.changeBreadCrumbState(breadcrumb, e)
                    });
                })
            )
        );
    }
}

Breadcrumb.propTypes = {
    changeBreadCrumbState: PropTypes.func,
    breadcrumbItems: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string.isRequired,
        current: PropTypes.bool
    })).isRequired
};

Breadcrumb.defaultProps = {
    changeBreadCrumbState: undefined
};

export default Breadcrumb;
//# sourceMappingURL=index.js.map