add badge the number scroll anim

components/badge/AntNumber.jsx

@@ -0,0 +1,97 @@
+import React, {createElement, cloneElement} from 'react';
+import {findDOMNode} from 'react-dom';
+import {toArrayChildren} from './utils';
+import assign from 'object-assign';
+
+class AntNumber extends React.Component {
+  constructor(props) {
+    super(props);
+    const children = toArrayChildren(this.props.children);
+    this.state = {
+      children,
+    };
+  }
+
+  getNumberOnly(c) {
+    const childrenToReturn = [];
+    for (let i = -1; i < 11; i++) {
+      let count = i >= 10 ? i - 10 : i;
+      count = i === -1 ? 9 : count;
+      const children = <p key={i}>{count}</p>;
+      childrenToReturn.push(children);
+    }
+    const key = 'only_' + c;
+    return createElement('span', {className: `${this.props.prefixCls}-only`, key: key}, childrenToReturn);
+  }
+
+  getNumberElement(props) {
+    const count = props.count;
+    if (!count || count === '') {
+      return null;
+    }
+    let length = count.toString().length;
+    let childrenWap = [];
+    const a = childrenWap.length || 0;
+    if (length < a) {
+      childrenWap.splice(0, 1);
+    }
+    let i = a;//length - 1;
+    while (i < length) {
+      const children = this.getNumberOnly(i);
+      childrenWap.unshift(children);
+      i++;
+    }
+    const height = findDOMNode(this).offsetHeight;
+    childrenWap = childrenWap.map((child, j)=> {
+      let oneData = Number(count.toString()[j]);
+      let offsetTop = -(oneData + 1) * height;
+      return cloneElement(child, {style: {transform: 'translateY(' + offsetTop + 'px)'}});
+    });
+    return childrenWap;
+  }
+
+
+  updateChildren(props) {
+    if (typeof props.count === 'string') {
+      return this.setState({
+        children: [props.count]
+      });
+    }
+    let newChildren = this.getNumberElement(props);
+    //newChildren = this.addStyle(props, newChildren);
+    if (newChildren && newChildren.length) {
+      this.setState({
+        children: newChildren
+      });
+    }
+  }
+
+  componentDidMount() {
+    this.updateChildren(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.updateChildren(nextProps);
+  }
+
+  render() {
+    const childrenToRender = this.state.children;
+    const props = assign({}, this.props, {className: this.props.prefixCls + ' ' + this.props.className});
+    return createElement(this.props.component, props, childrenToRender);
+  }
+}
+AntNumber.defaultProps = {
+  prefixCls: 'ant-number',
+  count: null,
+  component: 'sup'
+};
+
+AntNumber.propTypes = {
+  count: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number
+  ]),
+  component: React.PropTypes.string
+};
+
+export default AntNumber;

components/badge/demo/change.md

@@ -67,3 +67,15 @@ ReactDOM.render(
   <Test />
 , document.getElementById('components-badge-demo-change'));
 ````
+````css
+.ant-badge {
+  margin-right: 16px;
+}
+.head-example {
+  width: 42px;
+  height: 42px;
+  border-radius: 6px;
+  background: #eee;
+  display: inline-block;
+}
+````

components/badge/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Animate from 'rc-animate';
+import AntNumber from './AntNumber';
 
 class AntBadge extends React.Component {
   constructor(props) {
@@ -30,9 +31,7 @@ class AntBadge extends React.Component {
           transitionAppear={true}>
           {
             hidden ? null :
-            <sup data-show={!hidden} className={className}>
-              {count}
-            </sup>
+            <AntNumber data-show={!hidden} className={className} count={count}/>
           }
         </Animate>
       </span>

components/badge/utils.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function toArrayChildren(children) {
+  const ret = [];
+  React.Children.forEach(children, (c) => {
+    ret.push(c);
+  });
+  return ret;
+}

style/components/badge.less

@@ -1,4 +1,5 @@
 @badge-prefix-cls: ~"@{css-prefix}badge";
+@number-prefix-cls: ~"@{css-prefix}number";
 
 .@{badge-prefix-cls} {
   position: relative;
@@ -62,6 +63,15 @@ a .@{badge-prefix-cls} {
   }
 }
 
+.@{number-prefix-cls}{
+  overflow: hidden;
+  &-only{
+    display: inline-block;
+
+    transition: transform .3s @ease-in-out;
+  }
+}
+
 @keyframes antZoomBadgeIn {
   0% {
     opacity: 0;