From 174c98cdca29b2e4008b3fc392c05f7ef25712bd Mon Sep 17 00:00:00 2001 From: delesseps Date: Fri, 15 Sep 2017 17:47:06 +1000 Subject: [PATCH 1/2] Add focus and blur support to InputNumber (#7615) * Add focus support to InputNumber * Convert string ref to private ref * Added blur method and fixed linting --- components/input-number/index.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 94d99814dd..e29ba71cc8 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -28,6 +28,8 @@ export default class InputNumber extends React.Component 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 [`${this.props.prefixCls}-sm`]: size === 'small', }, className); - return ; + return this.inputNumberRef = c} className={inputNumberClass} {...others} />; + } + + focus() { + this.inputNumberRef.focus(); + } + + blur() { + this.inputNumberRef.blur(); } } From dab6f43c0297013c4387112703ae3e67a4bb4bc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Fri, 15 Sep 2017 17:03:43 +0800 Subject: [PATCH 2/2] Feat search enter button (#7620) * Add enterButton for Input.Search close #7596 * update snapshot --- components/button/button.tsx | 2 +- components/input/Search.tsx | 29 +++++--- .../__tests__/__snapshots__/demo.test.js.snap | 74 +++++++++++++++---- components/input/demo/search-input.md | 20 +++-- components/input/index.en-US.md | 1 + components/input/index.zh-CN.md | 9 +-- components/input/style/index.less | 3 +- components/input/style/search-input.less | 58 ++++----------- 8 files changed, 117 insertions(+), 79 deletions(-) diff --git a/components/button/button.tsx b/components/button/button.tsx index 6bfe1e595f..d6a5b1b72f 100644 --- a/components/button/button.tsx +++ b/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; diff --git a/components/input/Search.tsx b/components/input/Search.tsx index 775f247249..bf9c88787c 100644 --- a/components/input/Search.tsx +++ b/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 { static defaultProps = { prefixCls: 'ant-input-search', + enterButton: false, }; input: Input; @@ -27,20 +30,28 @@ export default class Search extends React.Component { } render() { - const { className, prefixCls, ...others } = this.props; + const { className, prefixCls, size, enterButton, ...others } = this.props; delete (others as any).onSearch; - const searchSuffix = ( - - ); + const searchSuffix = enterButton + ? ( + + ) : ; + const inputClassName = classNames(prefixCls, className, { + [`${prefixCls}-enter-button`]: !!enterButton, + }); return ( diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap index 8419ae2363..eabe53cd4a 100644 --- a/components/input/__tests__/__snapshots__/demo.test.js.snap +++ b/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`] = ` - - +
- + + + - +
+
+ + + + + + +
+
+ + + + + + +
`; exports[`renders ./components/input/demo/size.md correctly 1`] = ` diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md index e59e99d3c4..ed9fd783d5 100644 --- a/components/input/demo/search-input.md +++ b/components/input/demo/search-input.md @@ -18,10 +18,20 @@ import { Input } from 'antd'; const Search = Input.Search; ReactDOM.render( - console.log(value)} - /> +
+ console.log(value)} + style={{ width: 200 }} + /> +

+ console.log(value)} + enterButton + /> +

+ +
, mountNode); ```` diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index f97f734290..a46f4771e5 100644 --- a/components/input/index.en-US.md +++ b/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`. diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index dc81cab921..18c70e6919 100644 --- a/components/input/index.zh-CN.md +++ b/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 一致。 diff --git a/components/input/style/index.less b/components/input/style/index.less index 6271e4e96a..cadf15ee87 100644 --- a/components/input/style/index.less +++ b/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"; diff --git a/components/input/style/search-input.less b/components/input/style/search-input.less index 6a7ecddb54..d789ab2388 100644 --- a/components/input/style/search-input.less +++ b/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; } }