@carbon/ibm-products 1.2.5 → 1.6.0

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -2,18 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CreateInfluencer = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,28 +15,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
-var _UIShell = require("carbon-components-react/lib/components/UIShell");
-
-var _motion = require("@carbon/motion");
-
-var _hasValidType = require("../../global/js/utils/hasValidType");
-
 require("../../global/js/utils/props-helper");
 
 var _settings = require("../../settings");
 
-var _constants = require("../CreateTearsheet/constants");
-
-var _constants2 = require("../CreateFullPage/constants");
-
-var _CreateTearsheet = require("../CreateTearsheet");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -53,153 +31,57 @@ var blockClass = "".concat(_settings.pkg.prefix, "--create-influencer");
 var componentName = 'CreateInfluencer';
 
 var CreateInfluencer = function CreateInfluencer(_ref) {
-  var activeSectionIndex = _ref.activeSectionIndex,
-      className = _ref.className,
-      componentBlockClass = _ref.componentBlockClass,
-      createComponentName = _ref.createComponentName,
-      createComponents = _ref.createComponents,
+  var className = _ref.className,
       currentStep = _ref.currentStep,
-      handleToggleState = _ref.handleToggleState,
-      handleActiveSectionIndex = _ref.handleActiveSectionIndex,
-      includeViewAllToggle = _ref.includeViewAllToggle,
-      open = _ref.open,
-      previousState = _ref.previousState,
-      sideNavAriaLabel = _ref.sideNavAriaLabel,
-      toggleState = _ref.toggleState,
-      viewAllToggleLabelText = _ref.viewAllToggleLabelText,
-      viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
-      viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText;
-
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      progressIndicatorState = _useState2[0],
-      setProgressIndicatorState = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      sideNavState = _useState4[0],
-      setSideNavState = _useState4[1]; // Animating states need to be reset here otherwise things won't render
-  // the way they should after the component mounts/unmounts
-
-  /* istanbul ignore next */
-
-
-  (0, _react.useEffect)(function () {
-    if (!(previousState !== null && previousState !== void 0 && previousState.open) && open) {
-      setSideNavState('');
-      setProgressIndicatorState('');
-    }
-  }, [open, previousState]);
-  /* istanbul ignore next */
-
-  var handleViewAllToggle = function handleViewAllToggle(newToggleValue) {
-    if (newToggleValue) {
-      setProgressIndicatorState('closing');
-      setTimeout(function () {
-        handleToggleState(newToggleValue);
-        setSideNavState('opening');
-      }, _motion.moderate02);
-    } else {
-      setSideNavState('closing');
-      setTimeout(function () {
-        handleToggleState(newToggleValue);
-        setProgressIndicatorState('opening');
-      }, _motion.moderate02);
-    }
+      stepData = _ref.stepData;
 
-    handleActiveSectionIndex(0);
-    var createComponentContainer = document.querySelector(".".concat(componentBlockClass));
+  var getNumberOfDynamicStepsBeforeCurrentStep = function getNumberOfDynamicStepsBeforeCurrentStep(array, key) {
+    var dynamicSteps = [];
+    array.forEach(function (item, index) {
+      var _array$index;
 
-    if (createComponentContainer) {
-      createComponentContainer.scrollTop = 0;
-    }
-  };
-
-  var renderViewAllToggle = function renderViewAllToggle() {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
-      id: "".concat(blockClass, "__view-all-toggle"),
-      toggled: toggleState,
-      labelText: viewAllToggleLabelText,
-      labelA: viewAllToggleOffLabelText,
-      labelB: viewAllToggleOnLabelText,
-      onToggle: function onToggle(value) {
-        return handleViewAllToggle(value);
-      },
-      className: "".concat(blockClass, "__view-all-toggle"),
-      defaultToggled: false
+      if (((_array$index = array[index]) === null || _array$index === void 0 ? void 0 : _array$index[key]) === false && index <= currentStep - 1) {
+        dynamicSteps.push(item);
+      }
     });
+    return dynamicSteps.length;
   }; // renders the step progression components in the left influencer area
 
 
   var renderProgressSteps = function renderProgressSteps() {
-    var _createComponents$ste, _createComponents$ste2, _cx2;
-
-    /* istanbul ignore next */
-    if (toggleState) {
-      var _cx, _createComponents$sec;
-
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(blockClass, "__left-nav")
-      }, /*#__PURE__*/_react.default.createElement(_UIShell.SideNav, {
-        expanded: true,
-        isFixedNav: true,
-        "aria-label": sideNavAriaLabel,
-        className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__side-nav-opening"), sideNavState === 'opening'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__side-nav-closing"), sideNavState === 'closing'), _cx))
-      }, /*#__PURE__*/_react.default.createElement(_UIShell.SideNavItems, null, ((_createComponents$sec = createComponents.sections) === null || _createComponents$sec === void 0 ? void 0 : _createComponents$sec.length) && createComponents.sections.map(function (sectionComponent, sectionIndex) {
-        var _sectionComponent$pro;
+    var _stepData$, _stepData$2;
 
-        return /*#__PURE__*/_react.default.createElement(_UIShell.SideNavLink, {
-          href: "#".concat(sectionComponent === null || sectionComponent === void 0 ? void 0 : (_sectionComponent$pro = sectionComponent.props) === null || _sectionComponent$pro === void 0 ? void 0 : _sectionComponent$pro.id),
-          key: sectionIndex,
-          isActive: activeSectionIndex === sectionIndex,
-          onClick: function onClick(event) {
-            event.preventDefault();
-            handleActiveSectionIndex(sectionIndex);
-
-            if (sectionComponent.props.id) {
-              var _scrollTarget$getBoun;
-
-              var scrollTarget = document.querySelector("#".concat(sectionComponent.props.id));
-              var scrollContainer = document.querySelector(".".concat(componentBlockClass, "__content"));
-              var scrollTopValue = createComponentName === 'CreateFullPage' ? (scrollTarget === null || scrollTarget === void 0 ? void 0 : (_scrollTarget$getBoun = scrollTarget.getBoundingClientRect()) === null || _scrollTarget$getBoun === void 0 ? void 0 : _scrollTarget$getBoun.y) + (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) : scrollTarget === null || scrollTarget === void 0 ? void 0 : scrollTarget.offsetTop;
-              scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTo({
-                top: scrollTopValue,
-                behavior: 'smooth'
-              });
-            } else {
-              console.warn("".concat(createComponentName, ": ").concat(createComponentName, "Section component is missing a required prop of 'id'"));
-            }
-          }
-        }, sectionComponent.props.title);
-      }))));
-    }
-
-    var extractedSteps = (0, _hasValidType.getExtractedSteps)(createComponents.steps, createComponentName === _CreateTearsheet.CreateTearsheet.displayName ? _constants.CREATE_TEARSHEET_STEP : _constants2.CREATE_FULL_PAGE_STEP);
-    var stepsWithoutIntroStep = extractedSteps.filter(function (item) {
-      return !item.props.introStep;
+    var extractedSteps = stepData === null || stepData === void 0 ? void 0 : stepData.filter(function (item) {
+      return !(item !== null && item !== void 0 && item.introStep);
     });
-    var introStepFound = !!createComponents.steps.filter(function (item) {
-      return item.props.introStep;
-    }).length;
+    var progressSteps = extractedSteps === null || extractedSteps === void 0 ? void 0 : extractedSteps.filter(function (item) {
+      return item === null || item === void 0 ? void 0 : 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()`
+
+    var totalDynamicSteps = getNumberOfDynamicStepsBeforeCurrentStep(stepData, 'shouldIncludeStep') || 0;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__left-nav")
-    }, currentStep === 1 && (_createComponents$ste = createComponents.steps[0]) !== null && _createComponents$ste !== void 0 && (_createComponents$ste2 = _createComponents$ste.props) !== null && _createComponents$ste2 !== void 0 && _createComponents$ste2.introStep ? null : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
-      currentIndex: introStepFound ? currentStep - 2 : currentStep - 1,
+    }, currentStep === 1 && (_stepData$ = stepData[0]) !== null && _stepData$ !== void 0 && _stepData$.introStep ? null : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressIndicator, {
+      currentIndex: (_stepData$2 = stepData[0]) !== null && _stepData$2 !== void 0 && _stepData$2.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: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__progress-indicator-opening"), progressIndicatorState === 'opening'), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__progress-indicator-closing"), progressIndicatorState === 'closing'), _cx2))
-    }, stepsWithoutIntroStep.map(function (child, stepIndex) {
+      className: (0, _classnames.default)("".concat(blockClass, "__progress-indicator"))
+    }, progressSteps.map(function (step, stepIndex) {
       return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ProgressStep, {
-        label: child.props.title,
+        label: step.title,
         key: stepIndex,
-        secondaryLabel: child.props.secondaryLabel
+        secondaryLabel: step.secondaryLabel
       });
     })));
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(blockClass, className)
-  }, renderProgressSteps(), includeViewAllToggle && renderViewAllToggle());
+  }, renderProgressSteps());
 }; // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 
@@ -207,98 +89,23 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
 exports.CreateInfluencer = CreateInfluencer;
 CreateInfluencer.displayName = componentName;
 CreateInfluencer.propTypes = {
-  /**
-   * Sets the active side nav item when toggle is on
-   */
-  activeSectionIndex: _propTypes.default.number.isRequired,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
 
-  /**
-   * The blockClass for the create component (Tearsheet or FullPage)
-   */
-  componentBlockClass: _propTypes.default.string.isRequired,
-
-  /**
-   * Used to mark the current step on the ProgressIndicator component
-   */
-  createComponentName: _propTypes.default.string.isRequired,
-
-  /**
-   * An object with section and step components, needed to render the progress steps. This is where the titles are retrieved from.
-   */
-  createComponents: _propTypes.default.shape({
-    steps: _propTypes.default.arrayOf(_propTypes.default.element),
-    sections: _propTypes.default.arrayOf(_propTypes.default.element)
-  }).isRequired,
-
   /**
    * Used to mark the current step on the ProgressIndicator component
    */
   currentStep: _propTypes.default.number.isRequired,
 
   /**
-   * Handler used to set the active section index
-   */
-  handleActiveSectionIndex: _propTypes.default.func,
-
-  /**
-   * Handler used to track the state of the toggle
-   */
-  handleToggleState: _propTypes.default.func,
-
-  /**
-   * Used to optionally include view all toggle
-   */
-  includeViewAllToggle: _propTypes.default.bool,
-
-  /**
-   * This is the open state of the CreateComponent in which the CreateInfluencer is used from
-   */
-  open: _propTypes.default.bool,
-
-  /**
-   * This is the open state of the CreateComponent in which the CreateInfluencer is used from
-   */
-  previousState: _propTypes.default.object,
-
-  /**
-   * The aria label to be used for the UI Shell SideNav Carbon component
-   */
-  sideNavAriaLabel: _propTypes.default.string.isRequired.if(function (_ref2) {
-    var includeViewAllToggle = _ref2.includeViewAllToggle;
-    return includeViewAllToggle;
-  }),
-
-  /**
-   * The current toggled state to be provided to the Toggle component
-   */
-  toggleState: _propTypes.default.bool,
-
-  /**
-   * Sets the label text for the view all toggle component
-   */
-  viewAllToggleLabelText: _propTypes.default.string.isRequired.if(function (_ref3) {
-    var includeViewAllToggle = _ref3.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  }),
-
-  /**
-   * Sets the label text for the view all toggle `off` text
-   */
-  viewAllToggleOffLabelText: _propTypes.default.string.isRequired.if(function (_ref4) {
-    var includeViewAllToggle = _ref4.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  }),
-
-  /**
-   * Sets the label text for the view all toggle `on` text
+   * The step data that renders the progress items
    */
-  viewAllToggleOnLabelText: _propTypes.default.string.isRequired.if(function (_ref5) {
-    var includeViewAllToggle = _ref5.includeViewAllToggle;
-    return includeViewAllToggle === true;
-  })
+  stepData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    introStep: _propTypes.default.bool,
+    secondaryLabel: _propTypes.default.string,
+    shouldIncludeStep: _propTypes.default.bool,
+    title: _propTypes.default.node
+  }))
 };