@atlaskit/progress-tracker/dist/es2019/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 "./progress-tracker.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useEffect, useRef } from 'react';
import Link from './internal/link';
import Stage from './internal/stage';
const containerStyles = null;
const 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)
 */
const ProgressTracker = ({
  items = [],
  spacing = 'cozy',
  render = {
    link: ({
      item
    }) =>
    /*#__PURE__*/
    // Anchor content is coming from another location
    // eslint-disable-next-line @atlassian/a11y/anchor-has-content
    React.createElement(Link, item)
  },
  animated = true,
  testId,
  label = 'Progress'
}) => {
  const prevItems = useRef(items.map(stage => ({
    ...stage,
    percentageComplete: 0
  })));
  const previousStages = items.map(stage => {
    var _prevItems$current;
    const oldStage = (_prevItems$current = prevItems.current) === null || _prevItems$current === void 0 ? void 0 : _prevItems$current.find(st => st.id === stage.id);
    return !!oldStage ? oldStage : stage;
  });
  useEffect(() => {
    prevItems.current = items;
  }, [items]);
  const progressChanges = items.filter((stage, index) => stage.percentageComplete !== previousStages[index].percentageComplete).length;
  const totalStepsForward = items.filter((stage, index) => stage.percentageComplete > previousStages[index].percentageComplete).length;
  const totalStepsBack = items.filter((stage, index) => stage.percentageComplete < previousStages[index].percentageComplete).length;
  let stepsForward = totalStepsForward;
  let stepsBack = totalStepsBack;
  const progressItems = items.map((stage, index) => {
    let transitionSpeed = 0;
    let transitionDelay = 0;
    const 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
    });
  });
  const listInlineStyles = {
    gridTemplateColumns: `repeat(${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;