StepLabel.js

import React from 'react';
import PropTypes from 'prop-types';
import CheckCircle from '../svg-icons/action/check-circle';
import SvgIcon from '../SvgIcon';

const getStyles = ({active, completed, disabled}, {muiTheme, stepper}) => {
  const {
    textColor,
    disabledTextColor,
    iconColor,
    inactiveIconColor,
  } = muiTheme.stepper;
  const {baseTheme} = muiTheme;
  const {orientation} = stepper;

  const styles = {
    root: {
      height: orientation === 'horizontal' ? 72 : 64,
      color: textColor,
      display: 'flex',
      alignItems: 'center',
      fontFamily: baseTheme.fontFamily,
      fontSize: 14,
      paddingLeft: 14,
      paddingRight: 14,
    },
    icon: {
      color: iconColor,
      display: 'block',
      fontSize: 24,
      width: 24,
      height: 24,
    },
    iconContainer: {
      paddingRight: 8,
    },
  };

  if (active) {
    styles.root.fontWeight = 500;
  }

  if (!completed && !active) {
    styles.icon.color = inactiveIconColor;
  }

  if (disabled) {
    styles.icon.color = inactiveIconColor;
    styles.root.color = disabledTextColor;
    styles.root.cursor = 'default';
  }

  return styles;
};

const renderIcon = (completed, icon, styles) => {
  const iconType = typeof icon;

  if (iconType === 'number' || iconType === 'string') {
    if (completed) {
      return (
        <CheckCircle
          color={styles.icon.color}
          style={styles.icon}
        />
      );
    }

    return (
      <SvgIcon color={styles.icon.color} style={styles.icon}>
        <circle cx="12" cy="12" r="10" />
        <text
          x="12"
          y="16"
          textAnchor="middle"
          fontSize="12"
          fill="#fff"
        >
          {icon}
        </text>
      </SvgIcon>
    );
  }

  return icon;
};

const StepLabel = (props, context) => {
  const {
    active, // eslint-disable-line no-unused-vars
    children,
    completed,
    icon: userIcon,
    iconContainerStyle,
    last, // eslint-disable-line no-unused-vars
    style,
    ...other
  } = props;

  const {prepareStyles} = context.muiTheme;
  const styles = getStyles(props, context);
  const icon = renderIcon(completed, userIcon, styles);

  return (
    <span style={prepareStyles(Object.assign(styles.root, style))} {...other}>
      {icon && (
        <span style={prepareStyles(Object.assign(styles.iconContainer, iconContainerStyle))}>
          {icon}
        </span>
      )}
      {children}
    </span>
  );
};

StepLabel.muiName = 'StepLabel';

StepLabel.propTypes = {
  /**
   * Sets active styling. Overrides disabled coloring.
   */
  active: PropTypes.bool,
  /**
   * The label text node
   */
  children: PropTypes.node,
  /**
   * Sets completed styling. Overrides disabled coloring.
   */
  completed: PropTypes.bool,
  /**
   * Sets disabled styling.
   */
  disabled: PropTypes.bool,
  /**
   * The icon displayed by the step label.
   */
  icon: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.string,
    PropTypes.number,
  ]),
  /**
   * Override the inline-styles of the icon container element.
   */
  iconContainerStyle: PropTypes.object,
  /**
   * @ignore
   */
  last: PropTypes.bool,
  /**
   * Override the inline-style of the root element.
   */
  style: PropTypes.object,
};

StepLabel.contextTypes = {
  muiTheme: PropTypes.object.isRequired,
  stepper: PropTypes.object,
};

export default StepLabel;