2015-11-18 23:42:01 +08:00
|
|
|
import React from 'react';
|
|
|
|
import Animate from 'rc-animate';
|
2015-11-23 22:58:11 +08:00
|
|
|
import ScrollNumber from './ScrollNumber';
|
2015-09-01 13:59:07 +08:00
|
|
|
|
|
|
|
class AntBadge extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2015-11-19 00:13:16 +08:00
|
|
|
let { count, prefixCls } = this.props;
|
2015-11-18 23:42:01 +08:00
|
|
|
const dot = this.props.dot;
|
2015-11-19 00:13:16 +08:00
|
|
|
|
2015-11-23 15:21:52 +08:00
|
|
|
count = count >= 100 ? '99+' : count;
|
2015-11-19 00:13:16 +08:00
|
|
|
|
|
|
|
// 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');
|
|
|
|
|
2015-11-18 23:42:01 +08:00
|
|
|
return (
|
2015-11-19 00:13:16 +08:00
|
|
|
<span className={prefixCls} title={count} {...this.props}>
|
|
|
|
{this.props.children}
|
2015-11-18 23:42:01 +08:00
|
|
|
<Animate component=""
|
|
|
|
showProp="data-show"
|
2015-11-19 00:13:16 +08:00
|
|
|
transitionName={prefixCls + '-zoom'}
|
|
|
|
transitionAppear={true}>
|
|
|
|
{
|
|
|
|
hidden ? null :
|
2015-11-23 22:58:11 +08:00
|
|
|
<ScrollNumber data-show={!hidden} className={className} count={count} />
|
2015-11-19 00:13:16 +08:00
|
|
|
}
|
2015-11-18 23:42:01 +08:00
|
|
|
</Animate>
|
|
|
|
</span>
|
|
|
|
);
|
2015-09-01 13:59:07 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
AntBadge.defaultProps = {
|
2015-11-19 00:13:16 +08:00
|
|
|
prefixCls: 'ant-badge',
|
2015-09-01 13:59:07 +08:00
|
|
|
count: null,
|
2015-11-20 14:41:11 +08:00
|
|
|
dot: false,
|
2015-09-01 13:59:07 +08:00
|
|
|
};
|
|
|
|
|
2015-09-01 16:18:46 +08:00
|
|
|
AntBadge.propTypes = {
|
2015-09-01 17:19:31 +08:00
|
|
|
count: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.string,
|
|
|
|
React.PropTypes.number
|
|
|
|
]),
|
2015-11-20 14:41:11 +08:00
|
|
|
dot: React.PropTypes.bool,
|
2015-09-01 16:18:46 +08:00
|
|
|
};
|
|
|
|
|
2015-09-01 13:59:07 +08:00
|
|
|
export default AntBadge;
|