Merge pull request #849 from purple-force/badge-api

feat(Badge): add API showZero, close #848

docs/badge/demo/change.md

@@ -61,6 +61,9 @@ class Demo extends React.Component {
                     <Badge count={this.state.count}>
                         <a href="#" className="head-example"><span className="next-sr-only">unread messages</span></a>
                     </Badge>
+                    <Badge count={this.state.count} showZero>
+                        <a href="#" className="head-example"><span className="next-sr-only">unread messages</span></a>
+                    </Badge>
                     <ButtonGroup>
                         <Button aria-label="add" onClick={this.increase}>
                             <Icon type="add"/>

docs/badge/index.en-us.md

@@ -25,6 +25,7 @@ You can add class as below, so that messages will not appear on pages, but can b
 | ------------- | ----------------------------------------------------- | ------------- | ----- |
 | children      | content of Badge based on                                               | ReactNode     | -     |
 | count         | number to display, display ${overflowCount}+ when count is greater than overflowCount, display none when count equal to 0 | Number/String | 0     |
+| showZero      | whether to show count when count is 0                                     | Boolean       | false |
 | content       | customized node content                                               | ReactNode     | -     |
 | overflowCount | max number to display                                              | Number/String | 99    |
 | dot           | display a red dot, not a number                                        | Boolean       | false |

docs/badge/index.md

@@ -22,10 +22,11 @@
 
 ### Badge
 
-| 参数            | 说明                                                    | 类型            | 默认值   |
-| ------------- | ----------------------------------------------------- | ------------- | ----- |
-| children      | 徽章依托的内容                                               | ReactNode     | -     |
-| count         | 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏 | Number/String | 0     |
-| content       | 自定义节点内容                                               | ReactNode     | -     |
-| overflowCount | 展示的封顶的数字                                              | Number/String | 99    |
-| dot           | 不展示数字，只展示一个小红点                                        | Boolean       | false |
+| 参数            | 说明                                                      | 类型            | 默认值   |
+| ------------- | ------------------------------------------------------- | ------------- | ----- |
+| children      | 徽章依托的内容                                                 | ReactNode     | -     |
+| count         | 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏 | Number/String | 0     |
+| showZero      | 当count为0时，是否显示count                                     | Boolean       | false |
+| content       | 自定义节点内容                                                 | ReactNode     | -     |
+| overflowCount | 展示的封顶的数字                                                | Number/String | 99    |
+| dot           | 不展示数字，只展示一个小红点                                          | Boolean       | false |

src/badge/index.jsx

@@ -22,9 +22,13 @@ class Badge extends Component {
          */
         children: PropTypes.node,
         /**
-         * 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏
+         * 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏
          */
         count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        /**
+         * 当count为0时，是否显示count
+         */
+        showZero: PropTypes.bool,
         /**
          * 自定义节点内容
          */
@@ -45,6 +49,7 @@ class Badge extends Component {
     static defaultProps = {
         prefix: 'next-',
         count: 0,
+        showZero: false,
         overflowCount: 99,
         dot: false,
     };
@@ -59,14 +64,15 @@ class Badge extends Component {
             style,
             rtl,
             count: originCount,
+            showZero,
             overflowCount: originOverflowCount,
         } = this.props;
         const count = parseInt(originCount, 10);
         const overflowCount = parseInt(originOverflowCount, 10);
         const others = obj.pickOthers(Badge.propTypes, this.props);
 
         // 如果是数字，则添加默认的 title
-        if (count) {
+        if (count || (count === 0 && showZero)) {
             others.title = others.title || `${count}`;
         }
 
@@ -82,7 +88,15 @@ class Badge extends Component {
             <span dir={rtl ? 'rtl' : undefined} className={classes} {...others}>
                 {children}
                 <Sup
-                    {...{ prefix, content, count, overflowCount, dot, style }}
+                    {...{
+                        prefix,
+                        content,
+                        count,
+                        showZero,
+                        overflowCount,
+                        dot,
+                        style,
+                    }}
                 />
             </span>
         );

src/badge/sup.jsx

@@ -20,6 +20,7 @@ export default class Sup extends Component {
     static propTypes = {
         prefix: PropTypes.string,
         count: PropTypes.number,
+        showZero: PropTypes.bool,
         overflowCount: PropTypes.number,
         content: PropTypes.node,
         dot: PropTypes.bool,
@@ -29,6 +30,7 @@ export default class Sup extends Component {
     static defaultProps = {
         prefix: 'next-',
         count: 0,
+        showZero: false,
         overflowCount: 99,
         dot: false,
     };
@@ -154,22 +156,23 @@ export default class Sup extends Component {
         const {
             prefix,
             count,
+            showZero,
             overflowCount,
             dot,
             style,
             content,
         } = this.props;
 
         const supClasses = classNames(`${prefix}badge-scroll-number`, {
-            [`${prefix}badge-count`]: !!count,
+            [`${prefix}badge-count`]: !!count || (count === 0 && showZero),
             [`${prefix}badge-dot`]: dot,
             [`${prefix}badge-custom`]: !!content,
         });
 
         let children = null;
-        const show = dot || count > 0 || content;
+        const show = dot || count > 0 || (count === 0 && showZero) || content;
 
-        if (count > 0) {
+        if (count > 0 || (count === 0 && showZero)) {
             const realCount =
                 overflowCount > 0 && count > overflowCount
                     ? `${overflowCount}+`

test/badge/index-spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
-import Enzyme, { mount } from 'enzyme';
+import Enzyme, { mount, render } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import assert from 'power-assert';
 import co from 'co';
@@ -269,4 +269,10 @@ describe('Badge', () => {
         ReactDOM.unmountComponentAtNode(div);
         document.body.removeChild(div);
     });
+
+    it('should show zero when count is even zero by setting showZero', () => {
+        const wrapper = render(<Badge count={0} showZero />);
+        assert.notStrictEqual(wrapper.find('.next-badge-count'), null);
+        assert(wrapper.find('.next-badge-count').hasClass('next-badge-scroll-number'));
+    })
 });