@atlaskit/progress-tracker/dist/esm/progress-tracker.js

A progress tracker displays the steps and progress through a journey.

/* progress-tracker.tsx generated by @compiled/babel-plugin v3.0.2 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./progress-tracker.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { useEffect, useRef } from 'react';
import Link from './internal/link';
import Stage from './internal/stage';
var containerStyles = null;
var spacingOptions = {
  comfortable: "var(--ds-space-500, 40px)",
  cozy: "var(--ds-space-200, 16px)",
  // @deprecated left for backwards compatibility
  cosy: "var(--ds-space-200, 16px)",
  compact: "var(--ds-space-050, 4px)"
};
/**
 * __Progress tracker__
 *
 * A progress tracker displays the steps and progress through a journey.
 *
 * - [Examples](https://atlassian.design/components/progress-tracker/examples)
 * - [Code](https://atlassian.design/components/progress-tracker/code)
 * - [Usage](https://atlassian.design/components/progress-tracker/usage)
 */
var ProgressTracker = function ProgressTracker(_ref) {
  var _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    _ref$spacing = _ref.spacing,
    spacing = _ref$spacing === void 0 ? 'cozy' : _ref$spacing,
    _ref$render = _ref.render,
    render = _ref$render === void 0 ? {
      link: function link(_ref2) {
        var item = _ref2.item;
        return (
          /*#__PURE__*/
          // Anchor content is coming from another location
          // eslint-disable-next-line @atlassian/a11y/anchor-has-content
          React.createElement(Link, item)
        );
      }
    } : _ref$render,
    _ref$animated = _ref.animated,
    animated = _ref$animated === void 0 ? true : _ref$animated,
    testId = _ref.testId,
    _ref$label = _ref.label,
    label = _ref$label === void 0 ? 'Progress' : _ref$label;
  var prevItems = useRef(items.map(function (stage) {
    return _objectSpread(_objectSpread({}, stage), {}, {
      percentageComplete: 0
    });
  }));
  var previousStages = items.map(function (stage) {
    var _prevItems$current;
    var oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(function (st) {
      return st.id === stage.id;
    });
    return !!oldStage ? oldStage : stage;
  });
  useEffect(function () {
    prevItems.current = items;
  }, [items]);
  var progressChanges = items.filter(function (stage, index) {
    return stage.percentageComplete !== previousStages[index].percentageComplete;
  }).length;
  var totalStepsForward = items.filter(function (stage, index) {
    return stage.percentageComplete > previousStages[index].percentageComplete;
  }).length;
  var totalStepsBack = items.filter(function (stage, index) {
    return stage.percentageComplete < previousStages[index].percentageComplete;
  }).length;
  var stepsForward = totalStepsForward;
  var stepsBack = totalStepsBack;
  var progressItems = items.map(function (stage, index) {
    var transitionSpeed = 0;
    var transitionDelay = 0;
    var transitionEasing = progressChanges > 1 ? 'linear' : 'cubic-bezier(0.15,1,0.3,1)';
    if (animated) {
      transitionSpeed = progressChanges > 1 ? 50 : 300;
      if (stage.percentageComplete < previousStages[index].percentageComplete) {
        /**
         * Load each transition sequentially in reverse.
         */
        transitionDelay = (stepsBack - 1) * transitionSpeed;
        stepsBack -= 1;
      } else if (stage.percentageComplete > previousStages[index].percentageComplete) {
        /**
         * Load each transition sequentially.
         */
        transitionDelay = (totalStepsForward - stepsForward) * transitionSpeed;
        stepsForward -= 1;
      }
    }
    return /*#__PURE__*/React.createElement(Stage, {
      transitionSpeed: transitionSpeed,
      transitionDelay: transitionDelay,
      transitionEasing: transitionEasing,
      key: stage.id,
      item: stage,
      render: render
    });
  });
  var listInlineStyles = _defineProperty(_defineProperty({
    gridTemplateColumns: "repeat(".concat(items.length, ", 1fr)")
  }, '--ds--pt--sp', spacingOptions[spacing]), "maxWidth", 8 * 10 * items.length * 2);
  return /*#__PURE__*/React.createElement("ol", {
    "data-testid": testId,
    style: listInlineStyles,
    "aria-label": label,
    className: ax(["_19pkidpf _2hwx1wug _otyridpf _18u01wug _zulp6odm _1e0c11p5 _1bsb1osq _2mzuglyw _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t _rxvc1jfw"])
  }, progressItems);
};
export default ProgressTracker;