2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2017-01-10 15:11:43 +08:00
|
|
|
import { Component, PropTypes, cloneElement } from 'react';
|
2016-03-31 17:46:35 +08:00
|
|
|
import classNames from 'classnames';
|
2016-06-10 16:44:01 +08:00
|
|
|
import calculateNodeHeight from './calculateNodeHeight';
|
2016-06-22 13:18:43 +08:00
|
|
|
import assign from 'object-assign';
|
2016-09-10 17:17:55 +08:00
|
|
|
import omit from 'omit.js';
|
2016-03-31 17:46:35 +08:00
|
|
|
|
|
|
|
function fixControlledValue(value) {
|
|
|
|
if (typeof value === 'undefined' || value === null) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
return value;
|
|
|
|
}
|
|
|
|
|
2016-06-10 16:44:01 +08:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface AutoSizeType {
|
2016-08-19 17:11:06 +08:00
|
|
|
minRows?: number;
|
|
|
|
maxRows?: number;
|
|
|
|
};
|
|
|
|
|
|
|
|
export interface InputProps {
|
|
|
|
prefixCls?: string;
|
2016-08-22 17:26:14 +08:00
|
|
|
className?: string;
|
2016-09-10 17:17:55 +08:00
|
|
|
type?: string;
|
2016-08-19 17:11:06 +08:00
|
|
|
id?: number | string;
|
2017-01-05 17:19:50 +08:00
|
|
|
name?: string;
|
2016-08-19 17:11:06 +08:00
|
|
|
value?: any;
|
|
|
|
defaultValue?: any;
|
2016-08-22 17:26:14 +08:00
|
|
|
placeholder?: string;
|
2016-08-19 17:11:06 +08:00
|
|
|
size?: 'large' | 'default' | 'small';
|
|
|
|
disabled?: boolean;
|
2016-08-22 17:26:14 +08:00
|
|
|
readOnly?: boolean;
|
2016-08-19 17:11:06 +08:00
|
|
|
addonBefore?: React.ReactNode;
|
|
|
|
addonAfter?: React.ReactNode;
|
2016-10-19 17:51:33 +08:00
|
|
|
onPressEnter?: React.FormEventHandler<any>;
|
|
|
|
onKeyDown?: React.FormEventHandler<any>;
|
|
|
|
onChange?: React.FormEventHandler<any>;
|
|
|
|
onClick?: React.FormEventHandler<any>;
|
2017-01-01 01:06:19 +08:00
|
|
|
onFocus?: React.FormEventHandler<any>;
|
2016-10-19 17:51:33 +08:00
|
|
|
onBlur?: React.FormEventHandler<any>;
|
2016-08-19 17:11:06 +08:00
|
|
|
autosize?: boolean | AutoSizeType;
|
2016-09-19 10:17:07 +08:00
|
|
|
autoComplete?: 'on' | 'off';
|
2016-09-27 12:04:01 +08:00
|
|
|
style?: React.CSSProperties;
|
2017-01-01 01:06:19 +08:00
|
|
|
prefix?: React.ReactNode;
|
|
|
|
suffix?: React.ReactNode;
|
2016-08-19 17:11:06 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class Input extends Component<InputProps, any> {
|
2016-08-22 17:26:14 +08:00
|
|
|
static Group: any;
|
2016-11-24 14:03:57 +08:00
|
|
|
static Search: any;
|
2016-03-31 17:46:35 +08:00
|
|
|
static defaultProps = {
|
|
|
|
disabled: false,
|
|
|
|
prefixCls: 'ant-input',
|
|
|
|
type: 'text',
|
2016-06-10 16:44:01 +08:00
|
|
|
autosize: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-31 17:46:35 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
2016-06-10 15:29:01 +08:00
|
|
|
type: PropTypes.string,
|
|
|
|
id: PropTypes.oneOfType([
|
|
|
|
PropTypes.string,
|
|
|
|
PropTypes.number,
|
2016-03-31 17:46:35 +08:00
|
|
|
]),
|
2016-06-10 15:29:01 +08:00
|
|
|
size: PropTypes.oneOf(['small', 'default', 'large']),
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
value: PropTypes.any,
|
|
|
|
defaultValue: PropTypes.any,
|
|
|
|
className: PropTypes.string,
|
|
|
|
addonBefore: PropTypes.node,
|
|
|
|
addonAfter: PropTypes.node,
|
|
|
|
prefixCls: PropTypes.string,
|
2016-06-10 16:44:01 +08:00
|
|
|
autosize: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
2016-06-10 15:29:01 +08:00
|
|
|
onPressEnter: PropTypes.func,
|
|
|
|
onKeyDown: PropTypes.func,
|
2017-01-01 01:06:19 +08:00
|
|
|
onFocus: PropTypes.func,
|
|
|
|
onBlur: PropTypes.func,
|
|
|
|
prefix: PropTypes.node,
|
|
|
|
suffix: PropTypes.node,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-04-06 18:12:41 +08:00
|
|
|
|
2016-08-19 17:11:06 +08:00
|
|
|
nextFrameActionId: number;
|
2016-08-24 16:09:55 +08:00
|
|
|
refs: {
|
|
|
|
input: any;
|
|
|
|
};
|
2016-08-19 17:11:06 +08:00
|
|
|
|
2016-11-15 15:18:40 +08:00
|
|
|
state = {
|
|
|
|
textareaStyles: null,
|
2017-01-01 01:06:19 +08:00
|
|
|
isFocus: false,
|
2016-11-15 15:18:40 +08:00
|
|
|
};
|
2016-06-10 16:44:01 +08:00
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-04-06 18:12:41 +08:00
|
|
|
handleKeyDown = (e) => {
|
2016-10-24 12:04:26 +08:00
|
|
|
const { onPressEnter, onKeyDown } = this.props;
|
|
|
|
if (e.keyCode === 13 && onPressEnter) {
|
|
|
|
onPressEnter(e);
|
|
|
|
}
|
|
|
|
if (onKeyDown) {
|
|
|
|
onKeyDown(e);
|
2016-04-06 18:12:41 +08:00
|
|
|
}
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|
|
|
|
|
2016-06-10 16:44:01 +08:00
|
|
|
handleTextareaChange = (e) => {
|
2016-08-11 15:27:59 +08:00
|
|
|
if (!('value' in this.props)) {
|
|
|
|
this.resizeTextarea();
|
2016-06-10 16:44:01 +08:00
|
|
|
}
|
2016-10-24 12:04:26 +08:00
|
|
|
const onChange = this.props.onChange;
|
|
|
|
if (onChange) {
|
|
|
|
onChange(e);
|
|
|
|
}
|
2016-06-10 16:44:01 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
resizeTextarea = () => {
|
|
|
|
const { type, autosize } = this.props;
|
|
|
|
if (type !== 'textarea' || !autosize || !this.refs.input) {
|
|
|
|
return;
|
|
|
|
}
|
2016-08-22 17:26:14 +08:00
|
|
|
const minRows = autosize ? (autosize as AutoSizeType).minRows : null;
|
|
|
|
const maxRows = autosize ? (autosize as AutoSizeType).maxRows : null;
|
2016-06-10 16:44:01 +08:00
|
|
|
const textareaStyles = calculateNodeHeight(this.refs.input, false, minRows, maxRows);
|
|
|
|
this.setState({ textareaStyles });
|
|
|
|
}
|
|
|
|
|
2016-12-07 11:08:30 +08:00
|
|
|
focus() {
|
|
|
|
this.refs.input.focus();
|
|
|
|
}
|
|
|
|
|
2017-01-01 01:06:19 +08:00
|
|
|
renderLabeledInput(children) {
|
2016-03-31 17:46:35 +08:00
|
|
|
const props = this.props;
|
2016-12-04 16:42:49 +08:00
|
|
|
|
|
|
|
// Not wrap when there is not addons
|
|
|
|
if (props.type === 'textarea' || (!props.addonBefore && !props.addonAfter)) {
|
|
|
|
return children;
|
|
|
|
}
|
|
|
|
|
2016-03-31 17:46:35 +08:00
|
|
|
const wrapperClassName = `${props.prefixCls}-group`;
|
|
|
|
const addonClassName = `${wrapperClassName}-addon`;
|
|
|
|
const addonBefore = props.addonBefore ? (
|
|
|
|
<span className={addonClassName}>
|
|
|
|
{props.addonBefore}
|
|
|
|
</span>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const addonAfter = props.addonAfter ? (
|
|
|
|
<span className={addonClassName}>
|
|
|
|
{props.addonAfter}
|
|
|
|
</span>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const className = classNames({
|
|
|
|
[`${props.prefixCls}-wrapper`]: true,
|
|
|
|
[wrapperClassName]: (addonBefore || addonAfter),
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span className={className}>
|
|
|
|
{addonBefore}
|
|
|
|
{children}
|
|
|
|
{addonAfter}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-01-01 01:06:19 +08:00
|
|
|
renderLabeledIcon(children) {
|
|
|
|
const { props } = this;
|
|
|
|
|
2017-03-10 17:04:52 +08:00
|
|
|
if (props.type === 'textarea' || !('prefix' in props || 'suffix' in props)) {
|
2017-01-01 01:06:19 +08:00
|
|
|
return children;
|
|
|
|
}
|
|
|
|
|
|
|
|
const prefix = props.prefix ? (
|
|
|
|
<span className={`${props.prefixCls}-prefix`}>
|
|
|
|
{props.prefix}
|
|
|
|
</span>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const suffix = props.suffix ? (
|
|
|
|
<span className={`${props.prefixCls}-suffix`}>
|
|
|
|
{props.suffix}
|
|
|
|
</span>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
return (
|
2017-01-10 15:11:43 +08:00
|
|
|
<span className={`${props.prefixCls}-preSuffix-wrapper`} style={props.style}>
|
2017-01-01 01:06:19 +08:00
|
|
|
{prefix}
|
2017-01-10 15:11:43 +08:00
|
|
|
{cloneElement(children, { style: null })}
|
2017-01-01 01:06:19 +08:00
|
|
|
{suffix}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-03-31 17:46:35 +08:00
|
|
|
renderInput() {
|
2016-06-22 13:18:43 +08:00
|
|
|
const props = assign({}, this.props);
|
2016-07-06 12:21:49 +08:00
|
|
|
// Fix https://fb.me/react-unknown-prop
|
|
|
|
const otherProps = omit(this.props, [
|
|
|
|
'prefixCls',
|
|
|
|
'onPressEnter',
|
|
|
|
'autosize',
|
|
|
|
'addonBefore',
|
|
|
|
'addonAfter',
|
2017-01-01 01:06:19 +08:00
|
|
|
'prefix',
|
|
|
|
'suffix',
|
2016-07-06 12:21:49 +08:00
|
|
|
]);
|
|
|
|
|
2016-03-31 17:46:35 +08:00
|
|
|
const prefixCls = props.prefixCls;
|
|
|
|
if (!props.type) {
|
|
|
|
return props.children;
|
|
|
|
}
|
|
|
|
|
2016-11-30 10:20:23 +08:00
|
|
|
const inputClassName = classNames(prefixCls, {
|
2016-03-31 17:46:35 +08:00
|
|
|
[`${prefixCls}-sm`]: props.size === 'small',
|
|
|
|
[`${prefixCls}-lg`]: props.size === 'large',
|
2016-11-30 10:20:23 +08:00
|
|
|
}, props.className);
|
2016-03-31 17:46:35 +08:00
|
|
|
|
|
|
|
if ('value' in props) {
|
2016-07-10 15:09:34 +08:00
|
|
|
otherProps.value = fixControlledValue(props.value);
|
2016-04-14 11:58:01 +08:00
|
|
|
// Input elements must be either controlled or uncontrolled,
|
|
|
|
// specify either the value prop, or the defaultValue prop, but not both.
|
2016-07-06 12:21:49 +08:00
|
|
|
delete otherProps.defaultValue;
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|
2016-04-14 11:22:53 +08:00
|
|
|
|
2016-03-31 17:46:35 +08:00
|
|
|
switch (props.type) {
|
|
|
|
case 'textarea':
|
2016-04-06 18:12:41 +08:00
|
|
|
return (
|
2016-06-10 15:29:01 +08:00
|
|
|
<textarea
|
2016-07-06 12:21:49 +08:00
|
|
|
{...otherProps}
|
2016-06-22 13:18:43 +08:00
|
|
|
style={assign({}, props.style, this.state.textareaStyles)}
|
2016-06-10 15:29:01 +08:00
|
|
|
className={inputClassName}
|
|
|
|
onKeyDown={this.handleKeyDown}
|
2016-06-10 16:44:01 +08:00
|
|
|
onChange={this.handleTextareaChange}
|
2016-06-10 15:29:01 +08:00
|
|
|
ref="input"
|
2016-06-06 13:54:10 +08:00
|
|
|
/>
|
2016-04-06 18:12:41 +08:00
|
|
|
);
|
2016-03-31 17:46:35 +08:00
|
|
|
default:
|
2017-01-01 01:06:19 +08:00
|
|
|
return this.renderLabeledIcon(
|
2016-06-10 15:29:01 +08:00
|
|
|
<input
|
2016-07-06 12:21:49 +08:00
|
|
|
{...otherProps}
|
2016-06-10 15:29:01 +08:00
|
|
|
className={inputClassName}
|
|
|
|
onKeyDown={this.handleKeyDown}
|
|
|
|
ref="input"
|
2016-06-06 13:54:10 +08:00
|
|
|
/>
|
2016-04-06 18:12:41 +08:00
|
|
|
);
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-01-01 01:06:19 +08:00
|
|
|
return this.renderLabeledInput(this.renderInput());
|
2016-03-31 17:46:35 +08:00
|
|
|
}
|
|
|
|
}
|