xchain-components/src/components/XBreadcrumb/index.js

Xchain Components

/* eslint react/jsx-filename-extension: 0 */
import * as React from 'react';
import { Breadcrumb, Icon } from 'semantic-ui-react';
import XDisplayText from 'components/XDisplayText';

type Props = {
  breadCrumbs: Array<string>,
  size?:string,
  goBackAllowed?: boolean,
  iconName?: string,
  iconWidth?: string,
  iconHeight?: string,
};

const BreadCrumbRow = {
  display: 'flex',
  flexDirection: 'row',
};

const XBreadcrumb = (props: Props) => {
  const {
    size, breadCrumbs, goBackAllowed, iconName, iconWidth, iconHeight,
  } = props;
  let breadCrumbElement = null;
  if (breadCrumbs !== undefined && breadCrumbs !== null) {
    breadCrumbElement = (
      <Breadcrumb
        style={BreadCrumbRow}
        size={size}
      >
        {
        breadCrumbs.map((breadCrumb, index) => {
          const link = index < breadCrumbs.length - 1;
          return (
            <div>
              <Breadcrumb.Section link={link && goBackAllowed} active={!link}>
                <XDisplayText displayText={breadCrumb} />
              </Breadcrumb.Section>
              {
                link
                  ? (
                    <Breadcrumb.Divider
                      icon={(
                        <Icon
                          style={{
                            width: iconWidth,
                            height: iconHeight,
                          }}
                          name={iconName}
                        />
                      )}
                    />
                  ) : null
              }
            </div>
          );
        })
      }
      </Breadcrumb>
    );
  }
  return breadCrumbElement;
};

XBreadcrumb.defaultProps = {
  size: 'small',
  goBackAllowed: false,
  iconName: 'caret right',
  iconWidth: '6.7px',
  iconHeight: '3.3px',
};

export default XBreadcrumb;