@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"));
var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
var _SkeletonHelper = require("../skeleton/SkeletonHelper");
var _check = _interopRequireDefault(require("../../icons/check"));
var _calendar = _interopRequireDefault(require("../../icons/calendar"));
var _pin = _interopRequireDefault(require("../../icons/pin"));
var _Context = _interopRequireDefault(require("../../shared/Context"));
var _componentHelper = require("../../shared/component-helper");
var _span;
const _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"],
  _excluded2 = ["title"];
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); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
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
    } = allProps,
    props = _objectWithoutProperties(allProps, _excluded);
  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 = _ref => {
  let {
      title
    } = _ref,
    iconProps = _objectWithoutProperties(_ref, _excluded2);
  return _react.default.createElement("span", {
    className: "dnb-timeline__item__label"
  }, _react.default.createElement(TimelineItemIcon, iconProps), _react.default.createElement(TimelineItemTitle, {
    title: title
  }));
};
const TimelineItemIcon = _ref2 => {
  let {
    icon,
    state,
    iconAlt,
    skeleton,
    translations
  } = _ref2;
  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"
  }, _span || (_span = _react.default.createElement("span", {
    key: "icon-alignment",
    "aria-hidden": true
  }, "\u200C")), !skeleton && currentIcon && _react.default.createElement(_IconPrimary.default, {
    icon: currentIcon,
    alt: currentAltLabel,
    size: state === 'current' ? undefined : 'small'
  }));
};
const TimelineItemTitle = _ref3 => {
  let {
    title
  } = _ref3;
  return _react.default.createElement("span", {
    className: "dnb-timeline__item__label__title"
  }, title);
};
const TimelineItemContent = _ref4 => {
  var _TimelineItemSubtitle;
  let {
    subtitle,
    infoMessage
  } = _ref4;
  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 = _ref5 => {
  let {
    subtitle
  } = _ref5;
  return _react.default.createElement("div", {
    className: "dnb-timeline__item__content__subtitle"
  }, subtitle);
};
var _default = exports.default = TimelineItem;
//# sourceMappingURL=TimelineItem.js.map