wix-style-react
Version:
wix-style-react
86 lines • 4.86 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { classes, st } from './HorizontalTimeline.st.css';
import { classes as iconsClasses, st as iconSt, } from './HorizontalTimelineIcons.st.css';
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: [],
};
HorizontalTimeline.propTypes = {
/** Controls the style of the component.*/
skin: PropTypes.oneOf(['dark', 'standard']),
/** Aligns the labels of items. */
alignLabel: PropTypes.oneOf(['center', 'start']),
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A css class to be applied to the component's root element */
className: PropTypes.string,
/**
* Timeline items
* * `skin` - Controls line and text color (deprecated).
* * `line ` - Affects the line type, can be one of: 'filled' | 'dashed'.
* * `label` - Text displayed below the icon.
* * `icon ` - An icon representing a timeline item.
* * `width ` - The width of the timeline item, can be percentage or pixels.
* * `labelEllipsis ` - Set ellipsis for item's label .
*/
items: PropTypes.arrayOf(PropTypes.shape({
/** item's skin (deprecated)*/
skin: PropTypes.oneOf(['dark', 'light']),
/** item's line type */
line: PropTypes.oneOf(['filled', 'dashed']),
/** item's text */
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
/** item's icon */
icon: PropTypes.node,
/** custom width for item */
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Ellipsis for item's label */
labelEllipsis: PropTypes.bool,
})),
};
export default HorizontalTimeline;
//# sourceMappingURL=HorizontalTimeline.js.map