Merge branch 'antd-3.0' of github.com:ant-design/ant-design into antd-3.0

components/button/button.tsx

@@ -35,7 +35,7 @@ function insertSpace(child: React.ReactChild, needInserted: boolean) {
 
 export type ButtonType = 'primary' | 'ghost' | 'dashed' | 'danger';
 export type ButtonShape = 'circle' | 'circle-outline';
-export type ButtonSize = 'small' | 'large';
+export type ButtonSize = 'small' | 'default' | 'large';
 
 export interface ButtonProps {
   type?: ButtonType;

components/input-number/index.tsx

@@ -28,6 +28,8 @@ export default class InputNumber extends React.Component<InputNumberProps, any>
     step: 1,
   };
 
+  private inputNumberRef: any;
+
   render() {
     const { className, size, ...others } = this.props;
     const inputNumberClass = classNames({
@@ -35,6 +37,14 @@ export default class InputNumber extends React.Component<InputNumberProps, any>
       [`${this.props.prefixCls}-sm`]: size === 'small',
     }, className);
 
-    return <RcInputNumber className={inputNumberClass} {...others} />;
+    return <RcInputNumber ref={c => this.inputNumberRef = c} className={inputNumberClass} {...others} />;
+  }
+
+  focus() {
+    this.inputNumberRef.focus();
+  }
+
+  blur() {
+    this.inputNumberRef.blur();
   }
 }

components/input/Search.tsx

@@ -2,14 +2,17 @@ import React from 'react';
 import classNames from 'classnames';
 import Input, { InputProps } from './Input';
 import Icon from '../icon';
+import Button from '../button';
 
 export interface SearchProps extends InputProps {
   onSearch?: (value: string) => any;
+  enterButton?: boolean | React.ReactNode;
 }
 
 export default class Search extends React.Component<SearchProps, any> {
   static defaultProps = {
     prefixCls: 'ant-input-search',
+    enterButton: false,
   };
 
   input: Input;
@@ -27,20 +30,28 @@ export default class Search extends React.Component<SearchProps, any> {
   }
 
   render() {
-    const { className, prefixCls, ...others } = this.props;
+    const { className, prefixCls, size, enterButton, ...others } = this.props;
     delete (others as any).onSearch;
-    const searchSuffix = (
-      <Icon
-        className={`${prefixCls}-icon`}
-        onClick={this.onSearch}
-        type="search"
-      />
-    );
+    const searchSuffix = enterButton
+      ? (
+        <Button
+          className={`${prefixCls}-button`}
+          type="primary"
+          size={size}
+          onClick={this.onSearch}
+        >
+          {enterButton === true ? <Icon type="search" /> : enterButton}
+        </Button>
+      ) : <Icon className={`${prefixCls}-icon`} type="search" />;
+    const inputClassName = classNames(prefixCls, className, {
+      [`${prefixCls}-enter-button`]: !!enterButton,
+    });
     return (
       <Input
         onPressEnter={this.onSearch}
         {...others}
-        className={classNames(prefixCls, className)}
+        size={size}
+        className={inputClassName}
         suffix={searchSuffix}
         ref={this.saveInput}
       />

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -667,23 +667,71 @@ exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
 `;
 
 exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
-<span
-  class="ant-input-search ant-input-affix-wrapper"
-  style="width:200px;"
->
-  <input
-    class="ant-input"
-    placeholder="input search text"
-    type="text"
-  />
+<div>
   <span
-    class="ant-input-suffix"
+    class="ant-input-search ant-input-affix-wrapper"
+    style="width:200px;"
   >
-    <i
-      class="anticon anticon-search ant-input-search-icon"
+    <input
+      class="ant-input"
+      placeholder="input search text"
+      type="text"
     />
+    <span
+      class="ant-input-suffix"
+    >
+      <i
+        class="anticon anticon-search ant-input-search-icon"
+      />
+    </span>
   </span>
-</span>
+  <br />
+  <br />
+  <span
+    class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+  >
+    <input
+      class="ant-input"
+      placeholder="input search text"
+      type="text"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <button
+        class="ant-btn ant-input-search-button ant-btn-primary"
+        type="button"
+      >
+        <i
+          class="anticon anticon-search"
+        />
+      </button>
+    </span>
+  </span>
+  <br />
+  <br />
+  <span
+    class="ant-input-search ant-input-search-enter-button ant-input-affix-wrapper"
+  >
+    <input
+      class="ant-input ant-input-lg"
+      placeholder="input search text"
+      type="text"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <button
+        class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
+        type="button"
+      >
+        <span>
+          Search
+        </span>
+      </button>
+    </span>
+  </span>
+</div>
 `;
 
 exports[`renders ./components/input/demo/size.md correctly 1`] = `

components/input/demo/search-input.md

@@ -18,10 +18,20 @@ import { Input } from 'antd';
 const Search = Input.Search;
 
 ReactDOM.render(
-  <Search
-    placeholder="input search text"
-    style={{ width: 200 }}
-    onSearch={value => console.log(value)}
-  />
+  <div>
+    <Search
+      placeholder="input search text"
+      onSearch={value => console.log(value)}
+      style={{ width: 200 }}
+    />
+    <br /><br />
+    <Search
+      placeholder="input search text"
+      onSearch={value => console.log(value)}
+      enterButton
+    />
+    <br /><br />
+    <Search placeholder="input search text" enterButton="Search" size="large" />
+  </div>
 , mountNode);
 ````

components/input/index.en-US.md

@@ -55,6 +55,7 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
 | Property  | Description                          | Type       | Default |
 |-----------|--------------------------------------|------------|---------|
 | onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value) |  |
+| enterButton | to show a enter button after input | boolean\|ReactNode | false |
 
 Supports all props of `Input`.
 

components/input/index.zh-CN.md

@@ -49,11 +49,10 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 
 #### Input.Search
 
-`Added in 2.5.0`
-
-| 参数      | 说明                                     | 类型       | 默认值 |
-|-----------|-----------------------------------------|-----------|-------|
-| onSearch | 点击搜索或按下回车键时的回调                 | function(value) |  |
+| 参数         | 说明                                     | 类型       | 默认值 |
+|-------------|-----------------------------------------|-----------|-------|
+| onSearch    | 点击搜索或按下回车键时的回调                 | function(value) |  |
+| enterButton | 是否有确认按钮，可设为按钮文字 | boolean\|ReactNode | false |
 
 其余属性和 Input 一致。
 

components/input/style/index.less

@@ -1,7 +1,6 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 @import "./mixin";
-@import "./search-input";
 
 // Input styles
 .@{ant-prefix}-input {
@@ -27,3 +26,5 @@
     min-height: 100%;  // use min-height, assume that no smaller height to override
   }
 }
+
+@import "./search-input";

components/input/style/search-input.less

@@ -3,56 +3,24 @@
 @import "../../button/style/mixin";
 @import "./mixin";
 
-.@{ant-prefix}-input-search-icon {
-  cursor: pointer;
-  transition: all .3s;
-  font-size: 14px;
-  &:hover {
-    color: @input-hover-border-color;
-  }
-}
-
-// code blow is keeped for compatibility
-// for this demo: http://1x.ant.design/components/select/#components-select-demo-search-box
-// do not delete until 3.x
-.@{ant-prefix}-search-input-wrapper {
-  display: inline-block;
-  vertical-align: middle;
-}
+@search-prefix: ~"@{ant-prefix}-input-search";
 
-.@{ant-prefix}-search-input {
-  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
-  &.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
-    border-radius: @border-radius-base;
-    position: absolute;
-    top: -1px;
-    width: 100%;
+.@{search-prefix} {
+  &-icon {
+    pointer-events: none;
+    color: @text-color-secondary;
   }
 
-  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child {
-    padding-right: 36px;
+  > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
-  .@{ant-prefix}-search-btn {
-    .btn-default;
-    border-radius: 0 @border-radius-base - 1px @border-radius-base - 1px 0;
-    left: -1px;
-    position: relative;
-    border-width: 0 0 0 1px;
-    z-index: 2;
-    padding-left: 8px;
-    padding-right: 8px;
-    &:hover {
-      border-color: @border-color-base;
-    }
-  }
-  &&-focus .@{ant-prefix}-search-btn-noempty,
-  &:hover .@{ant-prefix}-search-btn-noempty {
-    .btn-primary;
+  &.@{search-prefix}-enter-button > .@{ant-prefix}-input {
+    padding-right: 46px;
   }
-  .@{ant-prefix}-select-combobox {
-    .@{ant-prefix}-select-selection__rendered {
-      margin-right: 29px;
-    }
+
+  &.@{search-prefix}-enter-button > .@{ant-prefix}-input-suffix {
+    right: 0;
   }
 }