ant-design/components/input/Input.tsx

276 lines
6.8 KiB
TypeScript
Raw Normal View History

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';
import calculateNodeHeight from './calculateNodeHeight';
2016-06-22 13:18:43 +08:00
import assign from 'object-assign';
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;
}
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 {
minRows?: number;
maxRows?: number;
};
export interface InputProps {
prefixCls?: string;
2016-08-22 17:26:14 +08:00
className?: string;
type?: string;
id?: number | string;
2017-01-05 17:19:50 +08:00
name?: string;
value?: any;
defaultValue?: any;
2016-08-22 17:26:14 +08:00
placeholder?: string;
size?: 'large' | 'default' | 'small';
disabled?: boolean;
2016-08-22 17:26:14 +08:00
readOnly?: boolean;
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>;
onFocus?: React.FormEventHandler<any>;
2016-10-19 17:51:33 +08:00
onBlur?: React.FormEventHandler<any>;
autosize?: boolean | AutoSizeType;
autoComplete?: 'on' | 'off';
style?: React.CSSProperties;
prefix?: React.ReactNode;
suffix?: React.ReactNode;
}
export default class Input extends Component<InputProps, any> {
2016-08-22 17:26:14 +08:00
static Group: any;
static Search: any;
2016-03-31 17:46:35 +08:00
static defaultProps = {
disabled: false,
prefixCls: 'ant-input',
type: 'text',
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,
autosize: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
2016-06-10 15:29:01 +08:00
onPressEnter: PropTypes.func,
onKeyDown: PropTypes.func,
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
nextFrameActionId: number;
2016-08-24 16:09:55 +08:00
refs: {
input: any;
};
2016-11-15 15:18:40 +08:00
state = {
textareaStyles: null,
isFocus: false,
2016-11-15 15:18:40 +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
}
handleTextareaChange = (e) => {
if (!('value' in this.props)) {
this.resizeTextarea();
}
2016-10-24 12:04:26 +08:00
const onChange = this.props.onChange;
if (onChange) {
onChange(e);
}
}
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;
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();
}
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>
);
}
renderLabeledIcon(children) {
const { props } = this;
2017-03-10 17:04:52 +08:00
if (props.type === 'textarea' || !('prefix' in props || 'suffix' in props)) {
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}>
{prefix}
2017-01-10 15:11:43 +08:00
{cloneElement(children, { style: null })}
{suffix}
</span>
);
}
2016-03-31 17:46:35 +08:00
renderInput() {
2016-06-22 13:18:43 +08:00
const props = assign({}, this.props);
// Fix https://fb.me/react-unknown-prop
const otherProps = omit(this.props, [
'prefixCls',
'onPressEnter',
'autosize',
'addonBefore',
'addonAfter',
'prefix',
'suffix',
]);
2016-03-31 17:46:35 +08:00
const prefixCls = props.prefixCls;
if (!props.type) {
return props.children;
}
const inputClassName = classNames(prefixCls, {
2016-03-31 17:46:35 +08:00
[`${prefixCls}-sm`]: props.size === 'small',
[`${prefixCls}-lg`]: props.size === 'large',
}, props.className);
2016-03-31 17:46:35 +08:00
if ('value' in props) {
otherProps.value = fixControlledValue(props.value);
// Input elements must be either controlled or uncontrolled,
// specify either the value prop, or the defaultValue prop, but not both.
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
{...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}
onChange={this.handleTextareaChange}
2016-06-10 15:29:01 +08:00
ref="input"
/>
2016-04-06 18:12:41 +08:00
);
2016-03-31 17:46:35 +08:00
default:
return this.renderLabeledIcon(
2016-06-10 15:29:01 +08:00
<input
{...otherProps}
2016-06-10 15:29:01 +08:00
className={inputClassName}
onKeyDown={this.handleKeyDown}
ref="input"
/>
2016-04-06 18:12:41 +08:00
);
2016-03-31 17:46:35 +08:00
}
}
render() {
return this.renderLabeledInput(this.renderInput());
2016-03-31 17:46:35 +08:00
}
}