@spaced-out/ui-design-system/lib/components/Stepper/Stepper.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import {classify} from '../../utils/classify';

import css from './Stepper.module.css';


type ClassNames = $ReadOnly<{wrapper?: string}>;

export type StepperProps = {
  classNames?: ClassNames,
  activeStep?: number,
  children: React.Node,
  orientation?: 'horizontal' | 'vertical',
  disabled?: boolean,
};

export const Stepper: React$AbstractComponent<StepperProps, HTMLDivElement> =
  React.forwardRef<StepperProps, HTMLDivElement>(
    (
      {
        activeStep = 0,
        children,
        orientation = 'horizontal',
        classNames,
        disabled = false,
      }: StepperProps,
      ref,
    ) => {
      const childrenArray = React.Children.toArray(children).filter(Boolean);
      const steps = childrenArray.map((step, index) => {
        let isLastStepCompleted = false;
        const {disabled: disabledChild, onClick} = step.props;
        if (index === 0) {
          isLastStepCompleted = true;
        } else {
          isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
        }
        return React.cloneElement(step, {
          ...step.props,
          index,
          last: index + 1 === childrenArray.length,
          active: index === activeStep,
          allowClick: onClick && index !== activeStep && isLastStepCompleted,
          disabled: disabledChild || disabled,
        });
      });

      return (
        <div
          className={classify(
            css.stepperWrapper,
            css[orientation],
            classNames?.wrapper,
          )}
          ref={ref}
        >
          {steps}
        </div>
      );
    },
  );