@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 _clsx = _interopRequireDefault(require("clsx"));
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 _TimelineContext = _interopRequireDefault(require("./TimelineContext.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _AlignmentHelper;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 timelineContext = _react.default.useContext(_TimelineContext.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
  }, timelineContext);
  const {
    icon,
    iconAlt,
    title,
    subtitle,
    infoMessage,
    state,
    skeleton,
    ...props
  } = allProps;
  const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
  const classes = (0, _clsx.default)(`dnb-timeline__item dnb-timeline__item--${state}`, skeletonClasses);
  return (0, _jsxRuntime.jsxs)("li", {
    className: classes,
    "aria-current": state === 'current' ? 'step' : undefined,
    ...props,
    children: [(0, _jsxRuntime.jsx)(TimelineItemLabel, {
      state: state,
      title: title,
      icon: icon,
      iconAlt: iconAlt,
      skeleton: skeleton,
      translations: context.translation.TimelineItem
    }), (0, _jsxRuntime.jsx)(TimelineItemContent, {
      subtitle: subtitle,
      infoMessage: infoMessage
    })]
  });
};
const TimelineItemLabel = ({
  title,
  ...iconProps
}) => {
  return (0, _jsxRuntime.jsxs)("span", {
    className: "dnb-timeline__item__label",
    children: [(0, _jsxRuntime.jsx)(TimelineItemIcon, {
      ...iconProps
    }), (0, _jsxRuntime.jsx)(TimelineItemTitle, {
      title: title
    })]
  });
};
const TimelineItemIcon = ({
  icon,
  state,
  iconAlt,
  skeleton,
  translations
}) => {
  const {
    altLabelCompleted,
    altLabelCurrent,
    altLabelUpcoming
  } = translations;
  const icons = {
    completed: _check.default,
    current: _pin.default,
    upcoming: _calendar.default
  };
  const labels = {
    completed: altLabelCompleted,
    current: altLabelCurrent,
    upcoming: altLabelUpcoming
  };
  const currentIcon = icon || icons[state];
  const currentAltLabel = iconAlt || labels[state];
  return (0, _jsxRuntime.jsxs)("span", {
    className: "dnb-timeline__item__label__icon",
    children: [_AlignmentHelper || (_AlignmentHelper = (0, _jsxRuntime.jsx)(_AlignmentHelper2.default, {
      pseudoElementOnly: true
    })), !skeleton && currentIcon && (0, _jsxRuntime.jsx)(_IconPrimary.default, {
      icon: currentIcon,
      alt: currentAltLabel,
      size: state === 'current' ? undefined : 'small'
    })]
  });
};
const TimelineItemTitle = ({
  title
}) => {
  return (0, _jsxRuntime.jsx)("span", {
    className: "dnb-timeline__item__label__title",
    children: title
  });
};
const TimelineItemContent = ({
  subtitle,
  infoMessage
}) => {
  var _TimelineItemSubtitle;
  const renderSubtitles = () => {
    if (!subtitle) {
      return null;
    }
    if (Array.isArray(subtitle)) {
      return subtitle.map((subtitle, i) => (0, _jsxRuntime.jsx)(TimelineItemSubtitle, {
        subtitle: subtitle
      }, i));
    }
    return _TimelineItemSubtitle || (_TimelineItemSubtitle = (0, _jsxRuntime.jsx)(TimelineItemSubtitle, {
      subtitle: subtitle
    }));
  };
  return (0, _jsxRuntime.jsxs)("div", {
    className: "dnb-timeline__item__content",
    children: [renderSubtitles(), infoMessage && (0, _jsxRuntime.jsx)(_FormStatus.default, {
      text: infoMessage,
      state: "information",
      className: "dnb-timeline__item__content__info",
      stretch: true
    })]
  });
};
const TimelineItemSubtitle = ({
  subtitle
}) => (0, _jsxRuntime.jsx)("div", {
  className: "dnb-timeline__item__content__subtitle",
  children: subtitle
});
var _default = exports.default = TimelineItem;
//# sourceMappingURL=TimelineItem.js.map