Browse Source

fix Timeline className and style

pull/1447/head
afc163 9 years ago
parent
commit
cec56b40bf
  1. 7
      components/timeline/Timeline.jsx
  2. 5
      components/timeline/TimelineItem.jsx
  3. 8
      style/components/timeline.less

7
components/timeline/Timeline.jsx

@ -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, {

5
components/timeline/TimelineItem.jsx

@ -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>

8
style/components/timeline.less

@ -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;

Loading…
Cancel
Save