@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
146 lines (145 loc) • 4.42 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _span;
const _excluded = ["icon", "iconAlt", "title", "subtitle", "infoMessage", "state", "skeleton"],
_excluded2 = ["title"];
import React from 'react';
import classnames from 'classnames';
import FormStatus from '../form-status/FormStatus';
import IconPrimary from '../icon-primary/IconPrimary';
import { createSkeletonClass } from '../skeleton/SkeletonHelper';
import checkIcon from '../../icons/check';
import calendarIcon from '../../icons/calendar';
import pinIcon from '../../icons/pin';
import Context from '../../shared/Context';
import { extendPropsWithContext } from '../../shared/component-helper';
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 === 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 = 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 = _ref => {
let {
title
} = _ref,
iconProps = _objectWithoutProperties(_ref, _excluded2);
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"
}, _span || (_span = React.createElement("span", {
key: "icon-alignment",
"aria-hidden": true
}, "\u200C")), !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