@atlaskit/progress-tracker/dist/es2019/internal/stage.js

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

/* stage.tsx generated by @compiled/babel-plugin v3.0.2 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./stage.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { PureComponent } from 'react';
import { Box } from '@atlaskit/primitives/compiled';
import ProgressBar from './bar';
import ProgressMarker from './marker';
const styles = {
  listItemContent: "_1bsb1osq _kqswh2mm"
};
const textColor = {
  unvisited: "_syaz1rpy",
  current: "_syaz1oa5",
  visited: "_syazi7uo",
  disabled: "_syaz1gmx"
};
const fontWeight = {
  unvisited: "_k48pi7a9",
  current: "_k48pwu06",
  visited: "_k48pwu06",
  disabled: "_k48pwu06"
};
const listItemStyles = null;
const fadeAnimationBase = null;
const fadeIn = null;
const fadeAnimationActive = null;
const titleStyles = null;

// eslint-disable-next-line @repo/internal/react/no-class-components
export default class ProgressTrackerStage extends PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "onEntered", () => {
      this.setState({
        transitioning: false,
        oldPercentageComplete: this.props.item.percentageComplete
      });
    });
    this.state = {
      transitioning: false,
      oldPercentageComplete: 0
    };
  }
  componentDidUpdate(prevProps) {
    if (prevProps.item.status !== this.props.item.status || prevProps.item.percentageComplete !== this.props.item.percentageComplete) {
      this.startTransition();
    }
  }
  componentWillUnmount() {
    if (this.animationTimeoutId) {
      clearTimeout(this.animationTimeoutId);
    }
  }
  startTransition() {
    if (this.animationTimeoutId) {
      clearTimeout(this.animationTimeoutId);
    }
    this.setState({
      ...this.state,
      transitioning: true
    });
    const timeout = this.props.transitionDelay + this.props.transitionSpeed;
    this.animationTimeoutId = setTimeout(() => {
      this.onEntered();
    }, timeout);
  }
  shouldShowLink() {
    return this.props.item.status === 'visited' &&
    // TODO: `noLink` is unnecessary as we should just be detecting if the `href` is set...
    !this.props.item.noLink;
  }
  render() {
    const {
      item,
      render,
      transitionDelay,
      transitionSpeed,
      transitionEasing,
      testId
    } = this.props;
    const ariaCurrent = item.status === 'current' ? 'step' : 'false';
    const listInlineStyles = {
      ['--ds--pt--ts']: `${transitionSpeed}ms`,
      ['--ds--pt--td']: `${transitionDelay}ms`,
      ['--ds--pt--te']: transitionEasing
    };
    return /*#__PURE__*/React.createElement("li", {
      "data-testid": testId
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      ,
      style: listInlineStyles,
      "aria-current": ariaCurrent,
      className: ax(["_2mzuglyw _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _1i4q1hna"])
    }, /*#__PURE__*/React.createElement(Box, {
      xcss: styles.listItemContent
    }, /*#__PURE__*/React.createElement(ProgressMarker, {
      testId: testId && `${testId}-marker`,
      status: item.percentageComplete > 0 ? 'visited' : item.status
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        animationPlayState: this.state.transitioning ? 'running' : 'paused',
        animationDuration: ['visited', 'disabled'].includes(this.props.item.status) ? '0ms' : undefined
      },
      className: ax(["_tzy4kb7n", "_y44v18do _ju251oqq _1y0ctrqk"])
    }, /*#__PURE__*/React.createElement(ProgressBar, {
      testId: testId && `${testId}-bar`,
      percentageComplete: item.percentageComplete
    })), /*#__PURE__*/React.createElement("div", {
      "data-testid": testId && `${testId}-title`,
      className: ax(["_tzy4kb7n", "_11c8fhey _1pfhv47k _y3gn1h6o", textColor[item.status], fontWeight[item.status]])
    }, this.shouldShowLink() ? render.link({
      item
    }) : item.label)));
  }
}