You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

59 lines
1.3 KiB

9 years ago
import React from 'react';
import Animate from 'rc-animate';
import ScrollNumber from './ScrollNumber';
class AntBadge extends React.Component {
constructor(props) {
super(props);
}
render() {
let { count, prefixCls, overflowCount } = this.props;
9 years ago
const dot = this.props.dot;
count = count > overflowCount ? '${overflowCount}+' : count;
// dot mode don't need count
if (dot) {
count = '';
}
// null undefined "" "0" 0
const hidden = (!count || count === '0') && !dot;
const className = prefixCls + (dot ? '-dot' : '-count');
9 years ago
return (
<span className={prefixCls} title={count} {...this.props}>
{this.props.children}
9 years ago
<Animate component=""
showProp="data-show"
transitionName={prefixCls + '-zoom'}
transitionAppear>
{
hidden ? null :
<ScrollNumber data-show={!hidden} className={className} count={count} />
}
9 years ago
</Animate>
</span>
);
}
}
AntBadge.defaultProps = {
prefixCls: 'ant-badge',
count: null,
dot: false,
overflowCount: 99,
};
AntBadge.propTypes = {
9 years ago
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
]),
dot: React.PropTypes.bool,
overflowCount: React.PropTypes.number,
};
export default AntBadge;