fix Timeline className and style

This commit is contained in:
afc163 2016-04-18 16:17:16 +08:00
parent 902b196687
commit cec56b40bf
3 changed files with 14 additions and 6 deletions

View File

@ -8,14 +8,15 @@ export default class Timeline extends React.Component {
}
render() {
const { prefixCls, children, pending } = this.props;
const { prefixCls, children, pending, className, ...restProps } = this.props;
const pendingNode = typeof pending === 'boolean' ? null : pending;
const className = classNames({
const classString = classNames({
[prefixCls]: true,
[`${prefixCls}-pending`]: !!pending,
[className]: className,
});
return (
<ul className={className}>
<ul {...restProps} className={classString}>
{
React.Children.map(children, (ele, idx) =>
React.cloneElement(ele, {

View File

@ -10,14 +10,15 @@ export default class TimelineItem extends React.Component {
}
render() {
const { prefixCls, color, last, children, pending } = this.props;
const { prefixCls, color, last, children, pending, className, ...restProps } = this.props;
const itemClassName = classNames({
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-last`]: last,
[`${prefixCls}-item-pending`]: pending,
[className]: className,
});
return (
<li className={itemClassName}>
<li {...restProps} className={itemClassName}>
<div className={`${prefixCls}-item-tail`} />
<div className={`${prefixCls}-item-head ${prefixCls}-item-head-${color}`} />
<div className={`${prefixCls}-item-content`}>{children}</div>

View File

@ -5,9 +5,15 @@
@timeline-color: @border-color-split;
.@{timeline-prefix-cls} {
list-style: none;
margin: 0;
padding: 0;
&-item {
position: relative;
padding-bottom: 12px;
padding: 0 0 12px 0;
list-style: none;
margin: 0;
&-tail {
position: absolute;