2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2018-08-07 21:07:52 +08:00
|
|
|
import * as PropTypes from 'prop-types';
|
2015-11-18 23:42:01 +08:00
|
|
|
import Animate from 'rc-animate';
|
2015-12-18 17:27:22 +08:00
|
|
|
import classNames from 'classnames';
|
2018-12-05 19:12:18 +08:00
|
|
|
import ScrollNumber from './ScrollNumber';
|
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
2015-09-01 13:59:07 +08:00
|
|
|
|
2017-09-25 22:14:49 +08:00
|
|
|
export { ScrollNumberProps } from './ScrollNumber';
|
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface BadgeProps {
|
2016-07-14 13:29:50 +08:00
|
|
|
/** Number to show in badge */
|
2018-10-16 15:07:24 +08:00
|
|
|
count?: React.ReactNode;
|
2017-03-01 11:16:58 +08:00
|
|
|
showZero?: boolean;
|
2016-07-14 13:29:50 +08:00
|
|
|
/** Max count to show */
|
|
|
|
overflowCount?: number;
|
|
|
|
/** whether to show red dot without number */
|
|
|
|
dot?: boolean;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
prefixCls?: string;
|
2017-10-14 14:29:18 +08:00
|
|
|
scrollNumberPrefixCls?: string;
|
2016-07-14 13:29:50 +08:00
|
|
|
className?: string;
|
2016-08-20 17:43:46 +08:00
|
|
|
status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
|
|
|
|
text?: string;
|
2017-11-03 11:37:35 +08:00
|
|
|
offset?: [number | string, number | string];
|
2018-04-10 01:09:18 +08:00
|
|
|
title?: string;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class Badge extends React.Component<BadgeProps, any> {
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
|
|
|
count: null,
|
2017-03-01 11:16:58 +08:00
|
|
|
showZero: false,
|
2016-03-29 14:01:10 +08:00
|
|
|
dot: false,
|
|
|
|
overflowCount: 99,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
2018-10-16 15:07:24 +08:00
|
|
|
count: PropTypes.node,
|
2017-03-01 11:16:58 +08:00
|
|
|
showZero: PropTypes.bool,
|
|
|
|
dot: PropTypes.bool,
|
|
|
|
overflowCount: PropTypes.number,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
getBadgeClassName(prefixCls: string) {
|
2018-12-07 20:02:01 +08:00
|
|
|
const { className, status, children } = this.props;
|
2018-10-16 15:07:24 +08:00
|
|
|
return classNames(className, prefixCls, {
|
|
|
|
[`${prefixCls}-status`]: !!status,
|
|
|
|
[`${prefixCls}-not-a-wrapper`]: !children,
|
|
|
|
}) as string;
|
|
|
|
}
|
|
|
|
|
|
|
|
isZero() {
|
|
|
|
const numberedDispayCount = this.getNumberedDispayCount();
|
|
|
|
return numberedDispayCount === '0' || numberedDispayCount === 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
isDot() {
|
|
|
|
const { dot, status } = this.props;
|
|
|
|
const isZero = this.isZero();
|
|
|
|
return (dot && !isZero) || status;
|
|
|
|
}
|
|
|
|
|
|
|
|
isHidden() {
|
|
|
|
const { showZero } = this.props;
|
|
|
|
const displayCount = this.getDispayCount();
|
|
|
|
const isZero = this.isZero();
|
|
|
|
const isDot = this.isDot();
|
|
|
|
const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
|
|
|
|
return (isEmpty || (isZero && !showZero)) && !isDot;
|
|
|
|
}
|
|
|
|
|
|
|
|
getNumberedDispayCount() {
|
|
|
|
const { count, overflowCount } = this.props;
|
2018-12-07 20:02:01 +08:00
|
|
|
const displayCount =
|
|
|
|
(count as number) > (overflowCount as number) ? `${overflowCount}+` : count;
|
2018-10-16 15:07:24 +08:00
|
|
|
return displayCount as string | number | null;
|
|
|
|
}
|
|
|
|
|
|
|
|
getDispayCount() {
|
|
|
|
const isDot = this.isDot();
|
|
|
|
// dot mode don't need count
|
|
|
|
if (isDot) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
return this.getNumberedDispayCount();
|
|
|
|
}
|
|
|
|
|
2018-12-28 20:59:49 +08:00
|
|
|
getScrollNumberTitle() {
|
2018-10-16 15:07:24 +08:00
|
|
|
const { title, count } = this.props;
|
|
|
|
if (title) {
|
|
|
|
return title;
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
return typeof count === 'string' || typeof count === 'number' ? count : undefined;
|
2018-10-16 15:07:24 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
getStyleWithOffset() {
|
|
|
|
const { offset, style } = this.props;
|
2018-12-07 20:02:01 +08:00
|
|
|
return offset
|
|
|
|
? {
|
|
|
|
right: -parseInt(offset[0] as string, 10),
|
|
|
|
marginTop: offset[1],
|
|
|
|
...style,
|
|
|
|
}
|
|
|
|
: style;
|
2018-10-16 15:07:24 +08:00
|
|
|
}
|
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderStatusText(prefixCls: string) {
|
|
|
|
const { text } = this.props;
|
2018-10-16 15:07:24 +08:00
|
|
|
const hidden = this.isHidden();
|
2018-12-07 20:02:01 +08:00
|
|
|
return hidden || !text ? null : <span className={`${prefixCls}-status-text`}>{text}</span>;
|
2018-10-16 15:07:24 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
renderDispayComponent() {
|
|
|
|
const { count } = this.props;
|
2018-12-18 18:31:12 +08:00
|
|
|
const customNode = count as React.ReactElement<any>;
|
|
|
|
if (!customNode || typeof customNode !== 'object') {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
return React.cloneElement(customNode, {
|
|
|
|
style: {
|
|
|
|
...this.getStyleWithOffset(),
|
|
|
|
...(customNode.props && customNode.props.style),
|
|
|
|
},
|
|
|
|
});
|
2018-10-16 15:07:24 +08:00
|
|
|
}
|
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) {
|
2018-12-07 20:02:01 +08:00
|
|
|
const { count, status } = this.props;
|
2018-10-16 15:07:24 +08:00
|
|
|
|
|
|
|
const displayCount = this.getDispayCount();
|
|
|
|
const isDot = this.isDot();
|
|
|
|
const hidden = this.isHidden();
|
|
|
|
|
|
|
|
const scrollNumberCls = classNames({
|
|
|
|
[`${prefixCls}-dot`]: isDot,
|
|
|
|
[`${prefixCls}-count`]: !isDot,
|
2018-12-07 20:02:01 +08:00
|
|
|
[`${prefixCls}-multiple-words`]:
|
|
|
|
!isDot && count && count.toString && count.toString().length > 1,
|
2018-10-16 15:07:24 +08:00
|
|
|
[`${prefixCls}-status-${status}`]: !!status,
|
|
|
|
});
|
|
|
|
|
|
|
|
return hidden ? null : (
|
|
|
|
<ScrollNumber
|
|
|
|
prefixCls={scrollNumberPrefixCls}
|
|
|
|
data-show={!hidden}
|
|
|
|
className={scrollNumberCls}
|
|
|
|
count={displayCount}
|
|
|
|
displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
|
2018-12-28 20:59:49 +08:00
|
|
|
title={this.getScrollNumberTitle()}
|
2018-12-18 18:31:12 +08:00
|
|
|
style={this.getStyleWithOffset()}
|
2018-10-16 15:07:24 +08:00
|
|
|
key="scrollNumber"
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderBadge = ({ getPrefixCls }: ConfigConsumerProps) => {
|
2017-03-01 11:16:58 +08:00
|
|
|
const {
|
|
|
|
count,
|
|
|
|
showZero,
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
|
2017-03-01 11:16:58 +08:00
|
|
|
overflowCount,
|
|
|
|
className,
|
|
|
|
style,
|
|
|
|
children,
|
|
|
|
dot,
|
|
|
|
status,
|
|
|
|
text,
|
2017-11-03 11:37:35 +08:00
|
|
|
offset,
|
2018-04-10 01:09:18 +08:00
|
|
|
title,
|
2018-06-02 20:12:09 +08:00
|
|
|
...restProps
|
2017-03-01 11:16:58 +08:00
|
|
|
} = this.props;
|
2018-10-16 15:07:24 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('badge', customizePrefixCls);
|
|
|
|
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
|
|
|
|
|
|
|
|
const scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls);
|
|
|
|
const statusText = this.renderStatusText(prefixCls);
|
2018-10-16 15:07:24 +08:00
|
|
|
|
2017-11-12 13:58:12 +08:00
|
|
|
const statusCls = classNames({
|
|
|
|
[`${prefixCls}-status-dot`]: !!status,
|
2017-11-12 14:10:41 +08:00
|
|
|
[`${prefixCls}-status-${status}`]: !!status,
|
|
|
|
});
|
2018-10-16 15:07:24 +08:00
|
|
|
|
2016-10-12 19:42:10 +08:00
|
|
|
// <Badge status="success" />
|
|
|
|
if (!children && status) {
|
|
|
|
return (
|
2018-12-19 12:09:12 +08:00
|
|
|
<span
|
|
|
|
{...restProps}
|
|
|
|
className={this.getBadgeClassName(prefixCls)}
|
|
|
|
style={this.getStyleWithOffset()}
|
|
|
|
>
|
2016-10-12 19:42:10 +08:00
|
|
|
<span className={statusCls} />
|
|
|
|
<span className={`${prefixCls}-status-text`}>{text}</span>
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-11-18 23:42:01 +08:00
|
|
|
return (
|
2018-12-05 19:12:18 +08:00
|
|
|
<span {...restProps} className={this.getBadgeClassName(prefixCls)}>
|
2015-12-18 17:27:22 +08:00
|
|
|
{children}
|
2016-07-08 17:17:57 +08:00
|
|
|
<Animate
|
|
|
|
component=""
|
2015-11-18 23:42:01 +08:00
|
|
|
showProp="data-show"
|
2016-11-03 16:58:51 +08:00
|
|
|
transitionName={children ? `${prefixCls}-zoom` : ''}
|
2017-05-31 15:48:11 +08:00
|
|
|
transitionAppear
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-11-25 12:03:39 +08:00
|
|
|
{scrollNumber}
|
2015-11-18 23:42:01 +08:00
|
|
|
</Animate>
|
2016-11-25 12:03:39 +08:00
|
|
|
{statusText}
|
2015-11-18 23:42:01 +08:00
|
|
|
</span>
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderBadge}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2015-09-01 13:59:07 +08:00
|
|
|
}
|