ant-design/components/badge/index.tsx

218 lines
5.9 KiB
TypeScript
Raw Normal View History

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';
import classNames from 'classnames';
import ScrollNumber from './ScrollNumber';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
2015-09-01 13:59:07 +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 */
count?: React.ReactNode;
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;
scrollNumberPrefixCls?: string;
2016-07-14 13:29:50 +08:00
className?: string;
status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
text?: string;
2017-11-03 11:37:35 +08:00
offset?: [number | string, number | string];
title?: string;
2016-07-14 13:29:50 +08:00
}
export default class Badge extends React.Component<BadgeProps, any> {
static defaultProps = {
count: null,
showZero: false,
dot: false,
overflowCount: 99,
2016-07-13 11:14:24 +08:00
};
static propTypes = {
count: PropTypes.node,
showZero: PropTypes.bool,
dot: PropTypes.bool,
overflowCount: PropTypes.number,
2016-07-13 11:14:24 +08:00
};
getBadgeClassName(prefixCls: string) {
2018-12-07 20:02:01 +08:00
const { className, status, children } = this.props;
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;
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() {
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;
}
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;
}
renderStatusText(prefixCls: string) {
const { text } = this.props;
const hidden = this.isHidden();
2018-12-07 20:02:01 +08:00
return hidden || !text ? null : <span className={`${prefixCls}-status-text`}>{text}</span>;
}
renderDispayComponent() {
const { count } = this.props;
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),
},
});
}
renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) {
2018-12-07 20:02:01 +08:00
const { count, status } = this.props;
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,
[`${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()}
style={this.getStyleWithOffset()}
key="scrollNumber"
/>
);
}
renderBadge = ({ getPrefixCls }: ConfigConsumerProps) => {
const {
count,
showZero,
prefixCls: customizePrefixCls,
scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
overflowCount,
className,
style,
children,
dot,
status,
text,
2017-11-03 11:37:35 +08:00
offset,
title,
...restProps
} = this.props;
const prefixCls = getPrefixCls('badge', customizePrefixCls);
const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
const scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls);
const statusText = this.renderStatusText(prefixCls);
const statusCls = classNames({
[`${prefixCls}-status-dot`]: !!status,
2017-11-12 14:10:41 +08:00
[`${prefixCls}-status-${status}`]: !!status,
});
2016-10-12 19:42:10 +08:00
// <Badge status="success" />
if (!children && status) {
return (
<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 (
<span {...restProps} className={this.getBadgeClassName(prefixCls)}>
{children}
2016-07-08 17:17:57 +08:00
<Animate
component=""
2015-11-18 23:42:01 +08:00
showProp="data-show"
transitionName={children ? `${prefixCls}-zoom` : ''}
2017-05-31 15:48:11 +08:00
transitionAppear
>
{scrollNumber}
2015-11-18 23:42:01 +08:00
</Animate>
{statusText}
2015-11-18 23:42:01 +08:00
</span>
);
2018-12-07 20:02:01 +08:00
};
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderBadge}</ConfigConsumer>;
}
2015-09-01 13:59:07 +08:00
}