ant-design/components/timeline/TimelineItem.tsx
Zheeeng d016471638 Feature 3.5.0 time line reverse api (#10057)
* Add reverse api for TimeLine

* Update TimeLine test snapshot

* Add specifications for reverse api and pending api
2018-04-20 11:23:37 +08:00

50 lines
1.2 KiB
TypeScript

import * as React from 'react';
import classNames from 'classnames';
export interface TimeLineItemProps {
prefixCls?: string;
className?: string;
color?: string;
dot?: React.ReactNode;
pending?: boolean;
style?: React.CSSProperties;
}
export default class TimelineItem extends React.Component<TimeLineItemProps, any> {
static defaultProps = {
prefixCls: 'ant-timeline',
color: 'blue',
pending: false,
};
render() {
const { prefixCls, className, color = '', children, pending, dot, ...restProps } = this.props;
const itemClassName = classNames({
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-pending`]: pending,
}, className);
const dotClassName = classNames({
[`${prefixCls}-item-head`]: true,
[`${prefixCls}-item-head-custom`]: dot,
[`${prefixCls}-item-head-${color}`]: true,
});
return (
<li {...restProps} className={itemClassName}>
<div className={`${prefixCls}-item-tail`} />
<div
className={dotClassName}
style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }}
>
{dot}
</div>
<div className={`${prefixCls}-item-content`}>
{children}
</div>
</li>
);
}
}