mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-26 04:00:13 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Merge pull request #6138 from ant-design/fix-typescript

Browse Source 
refactor: extract Input.Textarea
This commit is contained in:
偏右 2017-07-04 09:56:33 +08:00 committed by GitHub
commit 340cbda2d7
10 changed files with 201 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
components/input/Input.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import { Component, cloneElement } from 'react';
import React, { Component, cloneElement } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import calculateNodeHeight from './calculateNodeHeight';
import assign from 'object-assign';
import omit from 'omit.js';
import Group from './Group';
import Search from './Search';
import TextArea from './TextArea';
function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
@ -13,49 +13,31 @@ function fixControlledValue(value) {
return value;
}
function onNextFrame(cb) {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame(cb);
}
return window.setTimeout(cb, 1);
}
function clearNextFrameAction(nextFrameId) {
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(nextFrameId);
} else {
window.clearTimeout(nextFrameId);
}
}
export interface AutoSizeType {
minRows?: number;
maxRows?: number;
}
export interface InputProps {
export interface AbstractInputProps {
prefixCls?: string;
className?: string;
defaultValue?: any;
value?: any;
style?: React.CSSProperties;
}
export interface InputProps extends AbstractInputProps {
placeholder?: string;
type?: string;
id?: number | string;
name?: string;
value?: any;
defaultValue?: any;
placeholder?: string;
size?: 'large' | 'default' | 'small';
disabled?: boolean;
readOnly?: boolean;
addonBefore?: React.ReactNode;
addonAfter?: React.ReactNode;
onPressEnter?: React.FormEventHandler<any>;
onKeyDown?: React.FormEventHandler<any>;
onChange?: React.FormEventHandler<any>;
onPressEnter?: React.FormEventHandler<any>;
onClick?: React.FormEventHandler<any>;
onFocus?: React.FormEventHandler<any>;
onBlur?: React.FormEventHandler<any>;
autosize?: boolean | AutoSizeType;
autoComplete?: 'on' | 'off';
style?: React.CSSProperties;
prefix?: React.ReactNode;
suffix?: React.ReactNode;
spellCheck?: boolean;
@ -63,13 +45,14 @@ export interface InputProps {
}
export default class Input extends Component<InputProps, any> {
static Group: any;
static Search: any;
static Group: typeof Group;
static Search: typeof Search;
static TextArea: typeof TextArea;
static defaultProps = {
disabled: false,
prefixCls: 'ant-input',
type: 'text',
autosize: false,
disabled: false,
};
static propTypes = {
@ -95,30 +78,10 @@ export default class Input extends Component<InputProps, any> {
suffix: PropTypes.node,
};
nextFrameActionId: number;
refs: {
input: any;
input: HTMLInputElement;
};
state = {
textareaStyles: null,
isFocus: false,
};
componentDidMount() {
this.resizeTextarea();
}
componentWillReceiveProps(nextProps) {
// Re-render with the new content then recalculate the height as required.
if (this.props.value !== nextProps.value) {
if (this.nextFrameActionId) {
clearNextFrameAction(this.nextFrameActionId);
}
this.nextFrameActionId = onNextFrame(this.resizeTextarea);
}
}
handleKeyDown = (e) => {
const { onPressEnter, onKeyDown } = this.props;
if (e.keyCode === 13 && onPressEnter) {
@ -129,36 +92,18 @@ export default class Input extends Component<InputProps, any> {
}
}
handleTextareaChange = (e) => {
if (!('value' in this.props)) {
this.resizeTextarea();
}
const onChange = this.props.onChange;
if (onChange) {
onChange(e);
}
}
resizeTextarea = () => {
const { type, autosize } = this.props;
if (type !== 'textarea' || !autosize || !this.refs.input) {
return;
}
const minRows = autosize ? (autosize as AutoSizeType).minRows : null;
const maxRows = autosize ? (autosize as AutoSizeType).maxRows : null;
const textareaStyles = calculateNodeHeight(this.refs.input, false, minRows, maxRows);
this.setState({ textareaStyles });
}
focus() {
this.refs.input.focus();
}
blur() {
this.refs.input.blur();
}
renderLabeledInput(children) {
const props = this.props;
// Not wrap when there is not addons
if (props.type === 'textarea' || (!props.addonBefore && !props.addonAfter)) {
if ((!props.addonBefore && !props.addonAfter)) {
return children;
}
@ -207,8 +152,7 @@ export default class Input extends Component<InputProps, any> {
renderLabeledIcon(children) {
const { props } = this;
if (props.type === 'textarea' || !('prefix' in props || 'suffix' in props)) {
if (!('prefix' in props || 'suffix' in props)) {
return children;
}
@ -234,12 +178,11 @@ export default class Input extends Component<InputProps, any> {
}
renderInput() {
const props = assign({}, this.props);
const props = this.props;
// Fix https://fb.me/react-unknown-prop
const otherProps = omit(this.props, [
const otherProps = omit(props, [
'prefixCls',
'onPressEnter',
'autosize',
'addonBefore',
'addonAfter',
'prefix',
@ -247,10 +190,6 @@ export default class Input extends Component<InputProps, any> {
]);
const prefixCls = props.prefixCls;
if (!props.type) {
return props.children;
}
const inputClassName = classNames(prefixCls, {
[`${prefixCls}-sm`]: props.size === 'small',
[`${prefixCls}-lg`]: props.size === 'large',
@ -262,32 +201,20 @@ export default class Input extends Component<InputProps, any> {
// specify either the value prop, or the defaultValue prop, but not both.
delete otherProps.defaultValue;
}
switch (props.type) {
case 'textarea':
return (
<textarea
{...otherProps}
style={assign({}, props.style, this.state.textareaStyles)}
className={inputClassName}
onKeyDown={this.handleKeyDown}
onChange={this.handleTextareaChange}
ref="input"
/>
);
default:
return this.renderLabeledIcon(
<input
{...otherProps}
className={inputClassName}
onKeyDown={this.handleKeyDown}
ref="input"
/>,
);
}
return this.renderLabeledIcon(
<input
{...otherProps}
className={inputClassName}
onKeyDown={this.handleKeyDown}
ref="input"
/>,
);
}
render() {
if (this.props.type === 'textarea') {
return <TextArea {...this.props as any} ref="input" />;
}
return this.renderLabeledInput(this.renderInput());
}
}

14
components/input/Search.tsx
View File

@ -1,15 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import Input from './Input';
import Input, { AbstractInputProps } from './Input';
import Icon from '../icon';
export interface SearchProps {
className?: string;
export interface SearchProps extends AbstractInputProps {
placeholder?: string;
prefixCls?: string;
style?: React.CSSProperties;
defaultValue?: any;
value?: any;
onSearch?: (value: string) => any;
onChange?: React.FormEventHandler<any>;
size?: 'large' | 'default' | 'small';
@ -21,7 +16,6 @@ export interface SearchProps {
export default class Search extends React.Component<SearchProps, any> {
static defaultProps = {
prefixCls: 'ant-input-search',
onSearch() {},
};
input: any;
onSearch = () => {
@ -29,7 +23,7 @@ export default class Search extends React.Component<SearchProps, any> {
if (onSearch) {
onSearch(this.input.refs.input.value);
}
this.input.refs.input.focus();
this.input.focus();
}
render() {
const { className, prefixCls, ...others } = this.props;
@ -45,8 +39,8 @@ export default class Search extends React.Component<SearchProps, any> {
<Input
onPressEnter={this.onSearch}
{...others}
suffix={searchSuffix}
className={classNames(prefixCls, className)}
suffix={searchSuffix}
ref={node => this.input = node}
/>
);

124
components/input/TextArea.tsx Normal file
View File

@ -0,0 +1,124 @@
import React from 'react';
import omit from 'omit.js';
import classNames from 'classnames';
import { AbstractInputProps } from './Input';
import calculateNodeHeight from './calculateNodeHeight';
function onNextFrame(cb) {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame(cb);
}
return window.setTimeout(cb, 1);
}
function clearNextFrameAction(nextFrameId) {
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(nextFrameId);
} else {
window.clearTimeout(nextFrameId);
}
}
export interface AutoSizeType {
minRows?: number;
maxRows?: number;
}
export interface TextAreaProps extends AbstractInputProps {
autosize?: boolean | AutoSizeType;
onPressEnter?: React.FormEventHandler<any>;
}
export type HTMLTextareaProps = React.HTMLProps<HTMLTextAreaElement>;
export default class TextArea extends React.Component<TextAreaProps & HTMLTextareaProps, any> {
static defaultProps = {
prefixCls: 'ant-input',
};
nextFrameActionId: number;
textAreaRef: HTMLTextAreaElement;
state = {
textareaStyles: null,
};
componentDidMount() {
this.resizeTextarea();
}
componentWillReceiveProps(nextProps) {
// Re-render with the new content then recalculate the height as required.
if (this.props.value !== nextProps.value) {
if (this.nextFrameActionId) {
clearNextFrameAction(this.nextFrameActionId);
}
this.nextFrameActionId = onNextFrame(this.resizeTextarea);
}
}
focus() {
this.textAreaRef.focus();
}
blur() {
this.textAreaRef.blur();
}
resizeTextarea = () => {
const { autosize } = this.props;
if (!autosize || !this.textAreaRef) {
return;
}
const minRows = autosize ? (autosize as AutoSizeType).minRows : null;
const maxRows = autosize ? (autosize as AutoSizeType).maxRows : null;
const textareaStyles = calculateNodeHeight(this.textAreaRef, false, minRows, maxRows);
this.setState({ textareaStyles });
}
handleTextareaChange = (e) => {
if (!('value' in this.props)) {
this.resizeTextarea();
}
const { onChange } = this.props;
if (onChange) {
onChange(e);
}
}
handleKeyDown = (e) => {
const { onPressEnter, onKeyDown } = this.props;
if (e.keyCode === 13 && onPressEnter) {
onPressEnter(e);
}
if (onKeyDown) {
onKeyDown(e);
}
}
saveTextAreaRef = (textArea) => {
this.textAreaRef = textArea;
}
render() {
const props = this.props;
const otherProps = omit(props, [
'prefixCls',
'onPressEnter',
'autosize',
]);
const style = {
...props.style,
...this.state.textareaStyles,
};
return (
<textarea
{...otherProps}
className={classNames(props.prefixCls, props.className)}
style={style}
onKeyDown={this.handleKeyDown}
onChange={this.handleTextareaChange}
ref={this.saveTextAreaRef}
/>
);
}
}

3
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -152,7 +152,6 @@ exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
<textarea
class="ant-input"
placeholder="Autosize height based on content lines"
type="textarea"
/>
<div
style="margin:24px 0;"
@ -160,7 +159,6 @@ exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
<textarea
class="ant-input"
placeholder="Autosize height with minimum and maximum number of lines"
type="textarea"
/>
</div>
`;
@ -712,7 +710,6 @@ exports[`renders ./components/input/demo/textarea.md correctly 1`] = `
<textarea
class="ant-input"
rows="4"
type="textarea"
/>
`;

5
components/input/demo/autosize-textarea.md
View File

@ -17,12 +17,13 @@ An options object can be provided to `autosize` to specify the minimum and maxim
````jsx
import { Input } from 'antd';
const { TextArea } = Input;
ReactDOM.render(
<div>
<Input type="textarea" placeholder="Autosize height based on content lines" autosize />
<TextArea placeholder="Autosize height based on content lines" autosize />
<div style={{ margin: '24px 0' }} />
<Input type="textarea" placeholder="Autosize height with minimum and maximum number of lines" autosize={{ minRows: 2, maxRows: 6 }} />
<TextArea placeholder="Autosize height with minimum and maximum number of lines" autosize={{ minRows: 2, maxRows: 6 }} />
</div>
, mountNode);
````

3
components/input/demo/textarea.md
View File

@ -15,6 +15,7 @@ For multi-line user input cases, an input whose `type` prop has the value of `"t
````jsx
import { Input } from 'antd';
const { TextArea } = Input;
ReactDOM.render(<Input type="textarea" rows={4} />, mountNode);
ReactDOM.render(<TextArea rows={4} />, mountNode);
````

17
components/input/index.en-US.md
View File

@ -18,7 +18,7 @@ Keyboard and mouse can be used for providing or changing data.
| Property | Description | Type | Default |
|----------------|-----------------------|----------|---------------|
| type | The type of input, `text` or `textarea` | string | `text` |
| type | The type of input, `text` or `textarea`(`type=textarea` are deprecated after `2.12`, please use `Input.TextArea`) | string | `text` |
| id | The ID for input | string | |
| value | The input content value | string | |
| defaultValue | The initial input content | string | |
@ -29,13 +29,24 @@ Keyboard and mouse can be used for providing or changing data.
| prefix | The Input with prefix icon. | string\|ReactNode | |
| suffix | The Input with suffix icon. | string\|ReactNode | |
| onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) | |
| autosize | Height autosize feature, available when type="textarea", can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
then `value`, `defaultValue`, and `id` props are automatically set.
The rest props fo Input is exactly same as original [input](https://facebook.github.io/react/docs/events.html#supported-events).
The rest props of Input is exactly same as original [input](https://facebook.github.io/react/docs/events.html#supported-events).
### Input.TextArea
> It you are using `antd@<2.12`, please use `Input[type=textarea]`.
| Property | Description | Type | Default |
|----------------|-----------------------|----------|---------------|
| defaultValue | The initial input content | string | |
| value | The input content value | string | |
| onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) | |
| autosize | Height autosize feature, can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
The rest props of `Input.TextArea` is the same as original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
#### Input.Search

2
components/input/index.tsx
View File

@ -1,7 +1,9 @@
import Input from './Input';
import Group from './Group';
import Search from './Search';
import TextArea from './TextArea';
Input.Group = Group;
Input.Search = Search;
Input.TextArea = TextArea;
export default Input;

16
components/input/index.zh-CN.md
View File

@ -18,7 +18,7 @@ title: Input
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|------------|-------|--------|
| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`。 | string | `text` |
| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`(该 type `2.12` 后废弃，请直接使用 `Input.TextArea`)。 | string | `text` |
| id | 输入框的 id | string | |
| value | 输入框内容 | string | |
| defaultValue | 输入框默认内容 | string | |
@ -29,12 +29,24 @@ title: Input
| prefix | 带有前缀图标的 input | string\|ReactNode | |
| suffix | 带有后缀图标的 input | string\|ReactNode | |
| onPressEnter | 按下回车的回调 | function(e) | |
| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
Input 的其他属性和 React 自带的 [input](https://facebook.github.io/react/docs/events.html#supported-events) 一致。
### Input.TextArea
> `2.12` 后新增的组件，旧版请使用 `Input[type=textarea]`。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|------------|-------|--------|
| defaultValue | 输入框默认内容 | string | |
| value | 输入框内容 | string | |
| onPressEnter | 按下回车的回调 | function(e) | |
| autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
#### Input.Search
`Added in 2.5.0`

2
components/transfer/__tests__/__snapshots__/search.test.js.snap
View File

@ -7,7 +7,6 @@ exports[`Search should show cross icon when input value exists 1`] = `
>
<div>
<Input
autosize={false}
disabled={false}
onChange={[Function]}
placeholder=""
@ -47,7 +46,6 @@ exports[`Search should show cross icon when input value exists 2`] = `
>
<div>
<Input
autosize={false}
disabled={false}
onChange={[Function]}
placeholder=""