@mskcc/carbon-react/lib/components/MskStepper/Stepper.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var React = require('react');
var StepperStep = require('./Step/StepperStep.js');
var StepperContext = require('./StepperContext.js');
var PropTypes = require('prop-types');
var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

const Stepper = _ref => {
  let {
    title,
    steps,
    children,
    className,
    stepClassName = '',
    activeStep = 0,
    size = 'default',
    vertical = false,
    ...rest
  } = _ref;
  const contextValue = React.useMemo(() => ({
    activeStep,
    vertical
  }), [activeStep, vertical]);
  const useStepsProp = steps instanceof Array && steps.length > 0;
  const stepsArray = useStepsProp ? steps : React.Children.toArray(children);
  const stepsToRender = stepsArray.map((step, index) => {
    if (!useStepsProp && ! /*#__PURE__*/React.isValidElement(step)) {
      return null;
    }
    const stepProps = {
      className: stepClassName,
      index
    };
    return /*#__PURE__*/React__default["default"].createElement("div", {
      key: index,
      className: "stepper-step-container"
    }, /*#__PURE__*/React.isValidElement(step) ? /*#__PURE__*/React.cloneElement(step, {
      ...stepProps,
      ...step.props
    }) : /*#__PURE__*/React__default["default"].createElement(StepperStep.StepperStep, _rollupPluginBabelHelpers["extends"]({}, stepProps, typeof step === 'object' ? step : {})));
  });
  const ref = /*#__PURE__*/React__default["default"].createRef();
  const stepperRef = /*#__PURE__*/React__default["default"].createRef();

  // for horizontal stepper
  useIsomorphicEffect["default"](() => {
    const progressBar = ref.current;
    if (!progressBar) {
      return;
    }
    if (activeStep === -1) {
      if (vertical) {
        progressBar.style.height = '0%';
      } else {
        progressBar.style.width = '0%';
      }
    } else {
      const percentage = activeStep / (stepsArray.length - 1) * 100;
      if (vertical) {
        if (activeStep > stepsArray.length - 1) {
          progressBar.style.height = '100%';
        } else {
          progressBar.style.height = `${percentage}%`;
        }
      } else {
        if (activeStep > stepsArray.length - 1) {
          progressBar.style.width = '100%';
        } else {
          progressBar.style.width = `${percentage}%`;
        }
      }
    }
  }, [activeStep, stepsArray.length, vertical, ref]);

  //   for vertical stepper
  useIsomorphicEffect["default"](() => {
    const stepper = stepperRef.current;
    if (!stepper) {
      return;
    }
  }, [stepperRef]);
  return /*#__PURE__*/React__default["default"].createElement(StepperContext["default"].Provider, {
    value: contextValue
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: cx__default["default"]('msk-stepper-container', className)
  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
    ref: stepperRef,
    role: "progressbar",
    "aria-valuemin": 1,
    "aria-valuemax": stepsArray.length,
    "aria-valuenow": activeStep + 1
    // eslint-disable-next-line react/no-unknown-property, jsx-a11y/aria-props
    ,
    "aria-defaultValue": activeStep + 1,
    "aria-label": title || `Stepper ${activeStep + 1} of ${stepsArray.length}`,
    className: cx__default["default"]('msk-stepper', `msk-stepper-${size}`, {
      'msk-stepper-vertical': vertical,
      'msk-stepper-horizontal': !vertical
    }),
    style: {
      height: `${vertical ? `${stepsArray.length * 4}rem` : 'auto'}`
    }
  }, rest), stepsToRender, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `msk-stepper--progress-bar`,
    ref: ref
  }))));
};
Stepper.displayName = 'Stepper';
Stepper.propTypes = {
  activeStep: PropTypes__default["default"].number,
  children: PropTypes__default["default"].node,
  className: PropTypes__default["default"].string,
  size: PropTypes__default["default"].oneOf(['small', 'default']),
  stepClassName: PropTypes__default["default"].string,
  steps: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
    label: PropTypes__default["default"].string,
    active: PropTypes__default["default"].bool,
    completed: PropTypes__default["default"].bool,
    disabled: PropTypes__default["default"].bool,
    icon: PropTypes__default["default"].node,
    index: PropTypes__default["default"].number,
    className: PropTypes__default["default"].string,
    children: PropTypes__default["default"].node
  }), PropTypes__default["default"].element // Allow for JSX elements
  ])),

  title: PropTypes__default["default"].string,
  vertical: PropTypes__default["default"].bool
};

exports.Stepper = Stepper;