From ff19dcc1fc3239314bd4f78075cd57593d629e8f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sat, 20 Aug 2016 17:43:46 +0800 Subject: [PATCH] feat: add Badge[status, text], close: #2715 (#2780) * feat: add Badge[status, text], close: #2715 * feat: optimize Badge[status, text] --- components/badge/demo/status.md | 36 ++++++++++++++++++++++++ components/badge/index.en-US.md | 2 ++ components/badge/index.tsx | 22 ++++++++++++--- components/badge/index.zh-CN.md | 4 ++- components/badge/style/index.less | 42 ++++++++++++++++++++++++++++ components/style/themes/default.less | 1 + 6 files changed, 102 insertions(+), 5 deletions(-) create mode 100644 components/badge/demo/status.md diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md new file mode 100644 index 0000000000..312581cab5 --- /dev/null +++ b/components/badge/demo/status.md @@ -0,0 +1,36 @@ +--- +order: 7 +title: + zh-CN: 状态点 + en-US: Status +--- + +## zh-CN + +用于表示状态的小圆点。 + +## en-US + +Standalone badge with status. + +````jsx +import { Badge } from 'antd'; + +ReactDOM.render( +
+ + + + + + +
+
+
+
+
+ +
, + mountNode +); +```` diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 9b40049c6a..560680cda6 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -28,3 +28,5 @@ Badge normally appears in proximity to notification or head picture with eye-cat | count | Number to show in badge | Number | | | overflowCount | Max count to show | Number | 99 | | dot | whether to show red dot without number | Boolean | false | +| status | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | +| text | If `status` is set, `text` is to set the text of status dot | String | '' | diff --git a/components/badge/index.tsx b/components/badge/index.tsx index e326905133..3864a63294 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -13,6 +13,8 @@ interface BadgeProps { style?: React.CSSProperties; prefixCls?: string; className?: string; + status?: 'success' | 'processing' | 'default' | 'error' | 'warning'; + text?: string; } export default class Badge extends React.Component { @@ -21,6 +23,7 @@ export default class Badge extends React.Component { count: null, dot: false, overflowCount: 99, + // status: 'default', }; static propTypes = { @@ -33,18 +36,25 @@ export default class Badge extends React.Component { }; render() { - let { count, prefixCls, overflowCount, className, style, children, dot } = this.props; + let { count, prefixCls, overflowCount, className, style, children, dot, status, text } = this.props; + const isDot = dot || status; count = count > overflowCount ? `${overflowCount}+` : count; // dot mode don't need count - if (dot) { + if (isDot) { count = ''; } // null undefined "" "0" 0 - const hidden = (!count || count === '0') && !dot; - const scrollNumberCls = prefixCls + (dot ? '-dot' : '-count'); + const hidden = (!count || count === '0') && !isDot; + const scrollNumberCls = classNames({ + [`${prefixCls}-dot`]: isDot, + [`${prefixCls}-count`]: !isDot, + [`${prefixCls}-status`]: status, + [`${prefixCls}-status-${status}`]: status, + [`${prefixCls}-status-with-text`]: text, + }); const badgeCls = classNames({ [className]: !!className, [prefixCls]: true, @@ -70,6 +80,10 @@ export default class Badge extends React.Component { /> } + { + hidden || !text ? null : + {text} + } ); } diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 4a93a7e40e..cae9f198f3 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -28,4 +28,6 @@ english: Badge |----------------|----------------------------------|------------|---------|--------| | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number | | | | overflowCount | 展示封顶的数字值 | Number | | 99 | -| dot | 不展示数字，只有一个小红点 | boolean | | false | +| dot | 不展示数字，只有一个小红点 | Boolean | | false | +| status | 设置 Badge 为状态点 | Enum | 'success'、'processing'、'default'、'error'、'warning' | '' | +| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | String | | '' | diff --git a/components/badge/style/index.less b/components/badge/style/index.less index 84f4f114f4..af5bcb6d1a 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -47,6 +47,38 @@ box-shadow: 0 0 0 1px #fff; } + &-status { + width: 6px; + height: 6px; + + &-success { + background-color: @success-color; + } + &-processing { + background-color: @primary-color; + animation: antStatusProcessing 1.2s infinite ease-in-out; + } + &-default { + background-color: @normal-color; + } + &-error { + background-color: @error-color; + } + &-warning { + background-color: @warning-color; + } + + &-with-text { + top: 5px; + } + + &-text { + color: @text-color; + font-size: @font-size-base; + margin-left: 8px; // 8 - (6 / 2) === 5 + } + } + &-zoom-appear, &-zoom-enter { animation: antZoomBadgeIn .3s @ease-out-back; @@ -66,6 +98,16 @@ } } +@keyframes antStatusProcessing { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0; + } +} + a & { &-count:hover { background: tint(@error-color, 20%); diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 8bf9f773df..8bd5980024 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -4,6 +4,7 @@ @success-color : #87d068; @error-color : #f50; @warning-color : #fa0; +@normal-color : #d9d9d9; // ------ Base & Require ------ @body-background : #fff;