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.

66 lines
1.6 KiB

9 years ago
import React from 'react';
import Animate from 'rc-animate';
import ScrollNumber from './ScrollNumber';
import classNames from 'classnames';
class AntBadge extends React.Component {
constructor(props) {
super(props);
}
render() {
let { count, prefixCls, overflowCount, className, style, children } = 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 scrollNumberCls = prefixCls + (dot ? '-dot' : '-count');
const badgeCls = classNames({
[className]: !!className,
[prefixCls]: true,
[`${prefixCls}-not-a-wrapper`]: !children,
});
9 years ago
return (
<span className={badgeCls} title={count} {...this.props} style={null}>
{children}
9 years ago
<Animate component=""
showProp="data-show"
transitionName={prefixCls + '-zoom'}
transitionAppear>
{
hidden ? null :
<ScrollNumber data-show={!hidden} className={scrollNumberCls}
count={count} style={style} />
}
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;