wix-style-react
Version:
wix-style-react
34 lines • 1.73 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './Timeline.st.css';
import { dataHooks } from './constants';
import TimelineItem from './TimelineItem';
/** A timeline is a display of a list of events */
class Timeline extends React.PureComponent {
render() {
const { dataHook, items, className, gap } = this.props;
return (React.createElement("ol", { className: st(classes.root, className), "data-hook": dataHook }, items.map((item, idx) => (React.createElement(TimelineItem, { key: idx, item: item, idx: idx, dataHook: `${dataHooks.timelineListEvent}-${idx}`, gap: gap })))));
}
}
Timeline.displayName = 'Timeline';
Timeline.propTypes = {
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Applies a CSS class to the component’s root element */
className: PropTypes.string,
/** Sets the distance that separates each item from the one below */
gap: PropTypes.string,
/** Defines each individual event item in the component:
* - `label` stores a text string naming the event or renders other components as its children
* - `labelAction` stores an action button (or other components) related to the event
* - `customPrefix` defines a custom milestone symbol for an item on the vertical axis
* - `suffix` stores a date of the event (or other components) */
items: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.node,
labelAction: PropTypes.node,
customPrefix: PropTypes.node,
suffix: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
})).isRequired,
};
export default Timeline;
//# sourceMappingURL=Timeline.js.map