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.

58 lines
1.2 KiB

9 years ago
import React from 'react';
import Animate from 'rc-animate';
class AntBadge extends React.Component {
constructor(props) {
super(props);
}
render() {
let { count, prefixCls } = this.props;
9 years ago
const dot = this.props.dot;
9 years ago
count = count >= 100 ? '99+' : 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={true}>
{
hidden ? null :
<sup data-show={!hidden} className={className}>
{count}
</sup>
}
9 years ago
</Animate>
</span>
);
}
}
AntBadge.defaultProps = {
prefixCls: 'ant-badge',
count: null,
dot: false
};
AntBadge.propTypes = {
9 years ago
count: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
]),
dot: React.PropTypes.bool
};
export default AntBadge;