From a52567bee63e819be2f3273a079a6b65f04d6378 Mon Sep 17 00:00:00 2001
From: jljsj <liangjun.jiang@alipay.com>
Date: Thu, 19 Nov 2015 16:58:56 +0800
Subject: [PATCH] add badge the number scroll anim

---
 components/badge/AntNumber.jsx  | 97 +++++++++++++++++++++++++++++++++
 components/badge/demo/change.md | 12 ++++
 components/badge/index.jsx      |  5 +-
 components/badge/utils.js       |  9 +++
 style/components/badge.less     | 10 ++++
 5 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 components/badge/AntNumber.jsx
 create mode 100644 components/badge/utils.js

diff --git a/components/badge/AntNumber.jsx b/components/badge/AntNumber.jsx
new file mode 100644
index 0000000000..c94d4dfa8a
--- /dev/null
+++ b/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;
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index 4ce034bdab..411f19b2ee 100644
--- a/components/badge/demo/change.md
+++ b/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;
+}
+````
diff --git a/components/badge/index.jsx b/components/badge/index.jsx
index 5c1f659d54..7444eb06d2 100644
--- a/components/badge/index.jsx
+++ b/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>
diff --git a/components/badge/utils.js b/components/badge/utils.js
new file mode 100644
index 0000000000..04d1574f43
--- /dev/null
+++ b/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;
+}
diff --git a/style/components/badge.less b/style/components/badge.less
index 0a99910403..91066ccf5b 100644
--- a/style/components/badge.less
+++ b/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;