@carbon/ibm-products/es/components/CreateInfluencer/CreateInfluencer.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React__default from 'react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { Section, Heading, ProgressIndicator, ProgressStep } from '@carbon/react';
import '../../global/js/utils/props-helper.js';
import { pkg } from '../../settings.js';

// Import portions of React that are needed.

// The block part of our conventional BEM class names (blockClass__E--M).
const blockClass = `${pkg.prefix}--create-influencer`;
const componentName = 'CreateInfluencer';
const CreateInfluencer = _ref => {
  let {
    className,
    currentStep,
    onClickStep,
    stepData,
    title
  } = _ref;
  const getNumberOfDynamicStepsBeforeCurrentStep = (array, key) => {
    const dynamicSteps = [];
    array.forEach((item, index) => {
      if (array[index]?.[key] === false && index <= currentStep - 1) {
        dynamicSteps.push(item);
      }
    });
    return dynamicSteps.length;
  };

  // renders the step progression components in the left influencer area
  const renderProgressSteps = () => {
    const extractedSteps = stepData?.filter(item => !item?.introStep);
    const progressSteps = extractedSteps?.filter(item => item?.shouldIncludeStep);

    // To get the ProgressIndicator's `currentIndex`, accounting for dynamic steps,
    // we need to subtract the number of !shouldIncludeStep/s before the current step
    // which we get from `getNumberOfDynamicStepsBeforeCurrentStep()`
    const totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
    return /*#__PURE__*/React__default.createElement(Section, {
      className: `${blockClass}__left-nav`
    }, title && /*#__PURE__*/React__default.createElement(Heading, {
      className: `${blockClass}__title`
    }, title), currentStep === 1 && stepData[0]?.introStep ? null : /*#__PURE__*/React__default.createElement(ProgressIndicator, {
      currentIndex: stepData[0]?.introStep ? currentStep - totalDynamicSteps - 2 // minus 2 because we need to account for the intro step in addition to `currentIndex` being 0 index based and our steps being 1 index based
      : currentStep - totalDynamicSteps - 1 // minus 1 because ProgressIndicator currentIndex prop is 0 index based, but our steps are 1 index based
      ,
      spaceEqually: true,
      vertical: true,
      className: cx(`${blockClass}__progress-indicator`),
      onChange: onClickStep
    }, progressSteps.map((step, stepIndex) => {
      return /*#__PURE__*/React__default.createElement(ProgressStep, {
        label: step?.title,
        key: stepIndex,
        secondaryLabel: step.secondaryLabel || undefined,
        invalid: step.invalid
      });
    })));
  };
  return /*#__PURE__*/React__default.createElement("div", {
    className: cx(blockClass, className)
  }, renderProgressSteps());
};

// The display name of the component, used by React. Note that displayName
// is used in preference to relying on function.name.
CreateInfluencer.displayName = componentName;
CreateInfluencer.propTypes = {
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: PropTypes.string,
  /**
   * Used to mark the current step on the ProgressIndicator component
   */
  currentStep: PropTypes.number.isRequired,
  /**
   * onChange event for Progress Indicator
   */
  onClickStep: PropTypes.func,
  /**
   * The step data that renders the progress items
   */
  stepData: PropTypes.arrayOf(PropTypes.shape({
    introStep: PropTypes.bool,
    secondaryLabel: PropTypes.string,
    shouldIncludeStep: PropTypes.bool,
    title: PropTypes.node
  })),
  /**
   * The main title of the full page, displayed in the influencer area.
   */
  title: PropTypes.string
};

export { CreateInfluencer };