fk-react-ui-components/lib/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 React.createElement(
        'li',
        null,
        React.createElement(
            'span',
            {
                className: 'section-link',
                onClick: props.changeBreadCrumbState,
                role: 'button'
            },
            props.breadcrumb.label
        ),
        React.createElement(
            'span',
            { className: 'separator' },
            props.separator
        )
    );
}

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 React.createElement(
            BreadcrumbContainer,
            null,
            React.createElement(
                'ul',
                null,
                breadcrumbs.map(breadcrumb => React.createElement(BreadcrumbListItem, {
                    key: breadcrumb.state,
                    breadcrumb: breadcrumb,
                    changeBreadCrumbState: e => this.changeBreadCrumbState(breadcrumb, e),
                    separator: separator
                }))
            )
        );
    }
}

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;
//# sourceMappingURL=index.js.map