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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus.js"));
var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary.js"));
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _check = _interopRequireDefault(require("../../icons/check.js"));
var _calendar = _interopRequireDefault(require("../../icons/calendar.js"));
var _pin = _interopRequireDefault(require("../../icons/pin.js"));
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _AlignmentHelper;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const defaultProps = {
  icon: null,
  iconAlt: null,
  title: null,
  subtitle: null,
  infoMessage: null,
  state: null,
  skeleton: false
};
const TimelineItem = localProps => {
  const context = _react.default.useContext(_Context.default);
  const allProps = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  });
  const {
    icon,
    iconAlt,
    title,
    subtitle,
    infoMessage,
    state,
    skeleton,
    ...props
  } = allProps;
  const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
  const classes = (0, _classnames.default)(`dnb-timeline__item dnb-timeline__item--${state}`, skeletonClasses);
  return _react.default.createElement("li", _extends({
    className: classes,
    "aria-current": state === 'current' ? 'step' : undefined
  }, props), _react.default.createElement(TimelineItemLabel, {
    state: state,
    title: title,
    icon: icon,
    iconAlt: iconAlt,
    skeleton: skeleton,
    translations: context.translation.TimelineItem
  }), _react.default.createElement(TimelineItemContent, {
    subtitle: subtitle,
    infoMessage: infoMessage
  }));
};
const TimelineItemLabel = ({
  title,
  ...iconProps
}) => {
  return _react.default.createElement("span", {
    className: "dnb-timeline__item__label"
  }, _react.default.createElement(TimelineItemIcon, iconProps), _react.default.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: _check.default,
    current: _pin.default,
    upcoming: _calendar.default
  };
  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.default.createElement("span", {
    className: "dnb-timeline__item__label__icon"
  }, _AlignmentHelper || (_AlignmentHelper = _react.default.createElement(_AlignmentHelper2.default, {
    pseudoElementOnly: true
  })), !skeleton && currentIcon && _react.default.createElement(_IconPrimary.default, {
    icon: currentIcon,
    alt: currentAltLabel,
    size: state === 'current' ? undefined : 'small'
  }));
};
const TimelineItemTitle = ({
  title
}) => {
  return _react.default.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.default.createElement(TimelineItemSubtitle, {
        key: i,
        subtitle: subtitle
      }));
    }
    return _TimelineItemSubtitle || (_TimelineItemSubtitle = _react.default.createElement(TimelineItemSubtitle, {
      subtitle: subtitle
    }));
  };
  return _react.default.createElement("div", {
    className: "dnb-timeline__item__content"
  }, renderSubtitles(), infoMessage && _react.default.createElement(_FormStatus.default, {
    text: infoMessage,
    state: "info",
    className: "dnb-timeline__item__content__info",
    stretch: true
  }));
};
const TimelineItemSubtitle = ({
  subtitle
}) => _react.default.createElement("div", {
  className: "dnb-timeline__item__content__subtitle"
}, subtitle);
var _default = exports.default = TimelineItem;
//# sourceMappingURL=TimelineItem.js.map