@wix/design-system
Version:
@wix/design-system
52 lines • 3.37 kB
JavaScript
import React from 'react';
import Text from '../Text';
import { classes, st } from './HorizontalTimeline.st.css.js';
import { classes as iconsClasses, st as iconSt, } from './HorizontalTimelineIcons.st.css.js';
import { dataHooks } from './constants';
import { StatusCompleteFilled, StatusAlertFilled, } from '@wix/wix-ui-icons-common';
class HorizontalTimeline extends React.PureComponent {
constructor() {
super(...arguments);
this._renderLine = ({ skin, line }) => (React.createElement("div", { className: st(classes.line, { skin, line }) }));
this._renderLabel = ({ label, index, labelEllipsis }) => {
const { alignLabel } = this.props;
return (React.createElement("div", { className: st(classes.label, { alignLabel }) },
React.createElement(Text, { size: "tiny", ellipsis: labelEllipsis, dataHook: `${dataHooks.horizontalTimelineLabel}-${index}` }, label)));
};
}
render() {
const { items, dataHook, className, skin } = this.props;
return (React.createElement("div", { className: st(classes.root, { skin }, className), "data-hook": dataHook, "data-skin": skin }, items.map(({ label, width = 'auto', skin: deprecatedSkin, icon = React.createElement(HorizontalTimeline.DefaultIcon, null), line = 'dashed', labelEllipsis = true, }, index) => {
const nextItemSkin = (items[index + 1] && items[index + 1].skin) || 'light';
const nextItemLine = (items[index + 1] && items[index + 1].line) || 'dashed';
return (React.createElement("div", { className: classes.column, key: index, style: { width } },
React.createElement("div", { className: st(classes.item) },
React.createElement("div", { className: classes.lineIconLine },
this._renderLine({ skin: deprecatedSkin, line }),
React.createElement("div", { className: classes.icon }, icon),
this._renderLine({
skin: nextItemSkin,
line: nextItemLine,
})),
this._renderLabel({ label, index, labelEllipsis }))));
})));
}
}
HorizontalTimeline.displayName = 'HorizontalTimeline';
HorizontalTimeline.DefaultIcon = ({ skin = 'dark' }) => (React.createElement("div", { className: iconSt(iconsClasses.upcomingIcon, { skin }) }));
HorizontalTimeline.ActiveIcon = ({ skin = 'dark' }) => (React.createElement("div", { className: iconSt(iconsClasses.activeIcon, { skin }) }));
HorizontalTimeline.BoundaryIcon = ({ skin = 'dark' }) => (React.createElement("div", { className: iconSt(iconsClasses.boundaryIcon, { skin }) }));
HorizontalTimeline.DestructiveIcon = () => (React.createElement(StatusAlertFilled, { className: iconsClasses.errorIcon }));
HorizontalTimeline.CompleteIcon = ({ skin = 'dark' }) => {
const className = iconSt(iconsClasses.completeIcon, { skin });
const standardSkin = React.createElement("div", { className: className });
const darkSkin = React.createElement(StatusCompleteFilled, { className: className });
return skin === 'standard' ? standardSkin : darkSkin;
};
HorizontalTimeline.defaultProps = {
skin: 'dark',
alignLabel: 'center',
items: [],
};
export default HorizontalTimeline;
//# sourceMappingURL=HorizontalTimeline.js.map