wix-style-react
Version:
wix-style-react
41 lines • 2.73 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import Text from '../Text';
import { classes, st, vars } from './TimelineItem.st.css';
import { dataHooks } from './constants';
import { isString } from '../utils/StringUtils';
/** A timeline item is a display of a timeline event */
class TimelineItem extends React.PureComponent {
render() {
const { idx, item, dataHook, gap } = this.props;
return (React.createElement("li", { className: classes.event, "data-hook": dataHook },
React.createElement(React.Fragment, null,
React.createElement("div", { className: classes.prefix },
item.customPrefix ? (React.createElement("div", { "data-hook": `${dataHooks.timelineBulletIndicator}-${idx}` }, item.customPrefix)) : (React.createElement("div", { "data-hook": `${dataHooks.timelineDefaultPrefix}-${idx}`, className: classes.defaultIndicator })),
React.createElement("div", { className: classes.line })),
React.createElement("div", { className: st(classes.label, { withSuffix: !!item.suffix }), style: { [vars.marginBottom]: gap } },
isString(item.label) ? (React.createElement(Text, { dataHook: `${dataHooks.timelineLabel}-${idx}`, weight: "thin", size: "small", className: classes.labelText }, item.label)) : (item.label),
item.labelAction ? (React.createElement("div", { className: classes.labelAction, "data-hook": `${dataHooks.timelineLabelAction}-${idx}` }, item.labelAction)) : null),
item.suffix ? (React.createElement("div", { className: classes.suffix, "data-hook": `${dataHooks.timelineSuffix}-${idx}` }, isString(item.suffix) ? (React.createElement(Text, { dataHook: `${dataHooks.timelineTextSuffix}-${idx}`, weight: "thin", light: true, secondary: true, size: "small" }, item.suffix)) : (item.suffix))) : null)));
}
}
TimelineItem.displayName = 'TimelineItem';
TimelineItem.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** timeline event item index*/
idx: PropTypes.number,
/** timeline event item */
item: PropTypes.shape({
/** event text - could be a node or a string */
label: PropTypes.node,
/** action element in the end of event text */
labelAction: PropTypes.node,
/** TODO: still in development. custom bullet element like icon or avatar */
customPrefix: PropTypes.node,
/** suffix text or element placed on the right */
suffix: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
}).isRequired,
};
export default TimelineItem;
//# sourceMappingURL=TimelineItem.js.map