@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 _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import * as React from "react";
import CheckCircle from "../../icons/CheckCircle";
import Circle from "../../icons/CircleEmpty";
import AlertCircle from "../../icons/AlertCircle";
import CloseCircle from "../../icons/CloseCircle";
import { useStatuses, useStep } from "../TimelineContext";
import useMediaQuery from "../../hooks/useMediaQuery";
import TimelineStepDesktop from "./components/TimelineStepDesktop";
import TimelineStepMobile from "./components/TimelineStepMobile";

const TypeIcon = ({
  type
}) => {
  if (type === "success") return /*#__PURE__*/React.createElement(CheckCircle, {
    color: "success"
  });
  if (type === "warning") return /*#__PURE__*/React.createElement(AlertCircle, {
    color: "warning"
  });
  if (type === "critical") return /*#__PURE__*/React.createElement(CloseCircle, {
    color: "critical"
  });
  return /*#__PURE__*/React.createElement(Circle, {
    color: "tertiary",
    size: "small"
  });
};

const TimelineStep = ({
  children,
  label,
  subLabel,
  type
}) => {
  const {
    types,
    setTypes
  } = useStatuses();
  const {
    index,
    last
  } = useStep();
  const {
    isDesktop
  } = useMediaQuery();
  const nextType = types[index + 1];
  React.useEffect(() => {
    setTypes(prev => _objectSpread(_objectSpread({}, prev), {}, {
      [index]: type
    }));
  }, [setTypes, type, index]);
  return isDesktop ? /*#__PURE__*/React.createElement(TimelineStepDesktop, {
    typeIcon: /*#__PURE__*/React.createElement(TypeIcon, {
      type: type
    }),
    nextType: nextType,
    label: label,
    type: type,
    subLabel: subLabel,
    last: last
  }, children) : /*#__PURE__*/React.createElement(TimelineStepMobile, {
    typeIcon: /*#__PURE__*/React.createElement(TypeIcon, {
      type: type
    }),
    nextType: nextType,
    label: label,
    type: type,
    subLabel: subLabel,
    last: last
  }, children);
};

export default TimelineStep;