@dnb/eufemia/es/components/timeline/TimelineItem.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
var _AlignmentHelper;
import React from 'react';
import classnames from 'classnames';
import FormStatus from "../form-status/FormStatus.js";
import IconPrimary from "../icon-primary/IconPrimary.js";
import { createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import checkIcon from "../../icons/check.js";
import calendarIcon from "../../icons/calendar.js";
import pinIcon from "../../icons/pin.js";
import Context from "../../shared/Context.js";
import { extendPropsWithContext } from "../../shared/component-helper.js";
import AlignmentHelper from "../../shared/AlignmentHelper.js";
const defaultProps = {
  icon: null,
  iconAlt: null,
  title: null,
  subtitle: null,
  infoMessage: null,
  state: null,
  skeleton: false
};
const TimelineItem = localProps => {
  const context = React.useContext(Context);
  const allProps = extendPropsWithContext(localProps, defaultProps, context?.TimelineItem, {
    skeleton: context?.skeleton
  });
  const {
    icon,
    iconAlt,
    title,
    subtitle,
    infoMessage,
    state,
    skeleton,
    ...props
  } = allProps;
  const skeletonClasses = createSkeletonClass('font', skeleton, context);
  const classes = classnames(`dnb-timeline__item dnb-timeline__item--${state}`, skeletonClasses);
  return React.createElement("li", _extends({
    className: classes,
    "aria-current": state === 'current' ? 'step' : undefined
  }, props), React.createElement(TimelineItemLabel, {
    state: state,
    title: title,
    icon: icon,
    iconAlt: iconAlt,
    skeleton: skeleton,
    translations: context.translation.TimelineItem
  }), React.createElement(TimelineItemContent, {
    subtitle: subtitle,
    infoMessage: infoMessage
  }));
};
const TimelineItemLabel = ({
  title,
  ...iconProps
}) => {
  return React.createElement("span", {
    className: "dnb-timeline__item__label"
  }, React.createElement(TimelineItemIcon, iconProps), React.createElement(TimelineItemTitle, {
    title: title
  }));
};
const TimelineItemIcon = ({
  icon,
  state,
  iconAlt,
  skeleton,
  translations
}) => {
  const {
    alt_label_completed,
    alt_label_current,
    alt_label_upcoming
  } = translations;
  const icons = {
    completed: checkIcon,
    current: pinIcon,
    upcoming: calendarIcon
  };
  const labels = {
    completed: alt_label_completed,
    current: alt_label_current,
    upcoming: alt_label_upcoming
  };
  const currentIcon = icon || icons[state];
  const currentAltLabel = iconAlt || labels[state];
  return React.createElement("span", {
    className: "dnb-timeline__item__label__icon"
  }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, {
    pseudoElementOnly: true
  })), !skeleton && currentIcon && React.createElement(IconPrimary, {
    icon: currentIcon,
    alt: currentAltLabel,
    size: state === 'current' ? undefined : 'small'
  }));
};
const TimelineItemTitle = ({
  title
}) => {
  return React.createElement("span", {
    className: "dnb-timeline__item__label__title"
  }, title);
};
const TimelineItemContent = ({
  subtitle,
  infoMessage
}) => {
  var _TimelineItemSubtitle;
  const renderSubtitles = () => {
    if (!subtitle) {
      return null;
    }
    if (Array.isArray(subtitle)) {
      return subtitle.map((subtitle, i) => React.createElement(TimelineItemSubtitle, {
        key: i,
        subtitle: subtitle
      }));
    }
    return _TimelineItemSubtitle || (_TimelineItemSubtitle = React.createElement(TimelineItemSubtitle, {
      subtitle: subtitle
    }));
  };
  return React.createElement("div", {
    className: "dnb-timeline__item__content"
  }, renderSubtitles(), infoMessage && React.createElement(FormStatus, {
    text: infoMessage,
    state: "info",
    className: "dnb-timeline__item__content__info",
    stretch: true
  }));
};
const TimelineItemSubtitle = ({
  subtitle
}) => React.createElement("div", {
  className: "dnb-timeline__item__content__subtitle"
}, subtitle);
export default TimelineItem;
//# sourceMappingURL=TimelineItem.js.map