add input-number

components/input-number/demo/basic.md

@@ -0,0 +1,20 @@
+# 基本
+
+- order: 0
+
+数字输入框
+
+---
+
+````jsx
+var InputNumber = antd.InputNumber;
+
+function onChange(v){
+  console.log('changed',v);
+}
+
+React.render(
+  <div><InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/></div>
+, document.getElementById('components-inputnumber-demo-basic'));
+````
+

components/input-number/index.jsx

@@ -0,0 +1,15 @@
+var InputNumber = require('rc-input-number');
+var React = require('react');
+
+var AntInputNumber = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-input-number'
+    };
+  },
+  render() {
+    return <InputNumber {...this.props}/>;
+  }
+});
+
+module.exports = AntInputNumber;

components/input-number/index.md

@@ -0,0 +1,26 @@
+# InputNumber
+
+- category: Components
+- chinese: 数字输入框
+
+---
+
+通过鼠标或键盘，输入范围内的数值。
+
+## 何时使用
+
+- 当需要获取标准数值时。
+
+## API
+
+属性如下
+
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| min     | 最小值   | Number | -Infinity        |
+| max     | 最大值       | Number      | Infinity           |
+| value     | 当前值       | Number      |            |
+| defaultValue     | 初始值       | Number      |            |
+| onChange     | 变化回调       | Function      |            |
+| disabled     | 禁用       | Boolean      |            |
+| style     | 根节点样式       | Object      |

components/inputNumber/index.md

@@ -1,12 +0,0 @@
-# InputNumber
-
-- category: Components
-- chinese: 数字输入框
-
----
-
-通过鼠标或键盘，输入范围内的数值。
-
-## 何时使用
-
-- 当需要获取标准数值时。

index.js

@@ -12,7 +12,8 @@ var antd = {
   Select: require('./components/select'),
   Popconfirm: require('./components/popconfirm'),
   confirm: require('./components/modal/confirm'),
-  Steps: require('./components/steps')
+  Steps: require('./components/steps'),
+  InputNumber: require('./components/input-number')
 };
 
 module.exports = window.antd = antd;

package.json

@@ -17,6 +17,7 @@
     "rc-calendar": "~3.9.0",
     "rc-dialog": "~4.3.5",
     "rc-dropdown": "~1.1.1",
+    "rc-input-number": "~2.0.0",
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.0.0",

site/templates/layout.html

@@ -13,7 +13,7 @@
     {% block styles %}{% endblock %}
     <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/tomorrow.css">
-    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.min.js,bluebird/2.9.30/bluebird.js"></script>
+    <script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js,bluebird/2.9.30/bluebird.js"></script>
     <script src="/static/script.js"></script>
     {% block scripts %}{% endblock %}
 </head>

style/components/index.less

@@ -11,4 +11,5 @@
 @import "form";
 @import "loading";
 @import "progress";
-@import "steps";
+@import "steps";
+@import "inputNumber";

style/components/inputNumber.less

@@ -0,0 +1,115 @@
+@inputNumberPrefixCls: ant-input-number;
+
+@import "../mixins/iconfont";
+
+.@{inputNumberPrefixCls} {
+  margin: 0;
+  padding: 0;
+  line-height: 26px;
+  font-size: 12px;
+  height: 26px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid #D9D9D9;
+  border-radius: 5px;
+
+  &-handler {
+    text-align: center;
+    line-height: 12px;
+    height: 12px;
+    overflow: hidden;
+  }
+
+  &-handler-up-inner, &-handler-down-inner {
+    color: #666666;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  &:hover {
+    border-color: #23c0fa;
+
+    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+      border-color: #23c0fa;
+    }
+  }
+
+  &-disabled:hover {
+    border-color: #d9d9d9;
+
+    .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap {
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-input-wrap {
+    overflow: hidden;
+    height: 26px;
+  }
+
+  &-input {
+    width: 100%;
+    text-align: center;
+    outline: 0;
+    -moz-appearance: textfield;
+    line-height: 26px;
+    height: 24px;
+    transition: all 0.3s ease;
+    color: #666666;
+    border: 0;
+    border-radius: 5px;
+    padding: 0;
+  }
+
+  &-handler-wrap {
+    float: right;
+    border-left: 1px solid #D9D9D9;
+    width: 20px;
+    height: 26px;
+  }
+
+  &-handler-up {
+    border-bottom: 1px solid #D9D9D9;
+    &-inner {
+      .iconfont-mixin();
+      top:-2px;
+      &:before {
+        content: "\e611";
+        transform: rotate(270deg) scale(0.8);
+      }
+    }
+  }
+
+  &-handler-down {
+    &-inner {
+      .iconfont-mixin();
+      &:before {
+        content: "\e611";
+        transform: rotate(90deg) scale(0.8);
+      }
+    }
+  }
+
+  .handler-disabled() {
+    opacity: 0.72;
+    &:hover {
+      color: #999;
+      border-color: #d9d9d9;
+    }
+  }
+
+  &-handler-down-disabled, &-handler-up-disabled {
+    .handler-disabled();
+  }
+
+  &-disabled {
+    .@{inputNumberPrefixCls}-input {
+      opacity: 0.72;
+      cursor: not-allowed;
+      background-color: #f3f3f3;
+    }
+    .@{inputNumberPrefixCls}-handler {
+      .handler-disabled();
+    }
+  }
+}

style/core/iconfont.less

@@ -1,3 +1,5 @@
+@import "../mixins/iconfont";
+
 // font-face
 // @icon-url： 字体源文件的地址
 @font-face {
@@ -10,22 +12,7 @@
 }
 
 .@{iconfont-css-prefix} {
-  position: relative;
-  display: inline-block;
-  font-style: normal;
-  vertical-align: baseline;
-  text-align: center;
-  text-transform: none;
-  text-rendering: auto;
-  // 更好地渲染字体
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0px;
-  -moz-osx-font-smoothing: grayscale;
-
-  &:before {
-    display: block;
-    font-family: "anticon" !important;
-  }
+ .iconfont-mixin();
 }
 // 方向性图标
 .@{iconfont-css-prefix}-step-backward:before          {content:"\e662";}

style/mixins/iconfont.less

@@ -0,0 +1,18 @@
+.iconfont-mixin() {
+  position: relative;
+  display: inline-block;
+  font-style: normal;
+  vertical-align: baseline;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  // 更好地渲染字体
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0px;
+  -moz-osx-font-smoothing: grayscale;
+
+  &:before {
+    display: block;
+    font-family: "anticon" !important;
+  }
+}