@kiwicom/orbit-components/es/Timeline/TimelineStep/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import { useStatuses, useStep } from "../TimelineContext";
import useMediaQuery from "../../hooks/useMediaQuery";
import TimelineStepDesktop from "./components/TimelineStepDesktop";
import TimelineStepMobile from "./components/TimelineStepMobile";
const getActiveState = ({
  active,
  last,
  type,
  nextType
}) => {
  if (active == null) return type && !nextType;
  if (last && type === "success") return false;
  return active;
};
const TimelineStep = ({
  children,
  label,
  subLabel,
  type,
  active
}) => {
  const {
    types,
    setTypes,
    isColumnOnDesktop
  } = useStatuses();
  const {
    index,
    last
  } = useStep();
  const {
    isDesktop
  } = useMediaQuery();
  const nextType = types[index + 1];
  const prevType = types[index - 1];
  const isActive = getActiveState({
    active,
    last,
    type,
    nextType
  });
  React.useEffect(() => {
    setTypes(prev => ({
      ...prev,
      [index]: type
    }));
  }, [setTypes, type, index]);
  if (isColumnOnDesktop) return /*#__PURE__*/React.createElement(TimelineStepMobile, {
    nextType: nextType,
    label: label,
    active: isActive,
    type: type,
    subLabel: subLabel,
    last: last
  }, children);
  if (isDesktop) return /*#__PURE__*/React.createElement(TimelineStepDesktop, {
    nextType: nextType,
    prevType: prevType,
    label: label,
    last: last,
    active: isActive,
    type: type,
    subLabel: subLabel
  }, children);
  return /*#__PURE__*/React.createElement(TimelineStepMobile, {
    nextType: nextType,
    label: label,
    type: type,
    active: isActive,
    subLabel: subLabel,
    last: last
  }, children);
};
export default TimelineStep;