ant-design/components/badge/index.jsx

57 lines
1.2 KiB
React
Raw Normal View History

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'}
2015-11-25 17:47:55 +08:00
transitionAppear>
2015-11-19 00:13:16 +08:00
{
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;