ant-design/components/input/Input.tsx

325 lines
9.0 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2018-08-07 21:07:52 +08:00
import * as PropTypes from 'prop-types';
2016-03-31 17:46:35 +08:00
import classNames from 'classnames';
import omit from 'omit.js';
2018-12-26 22:47:55 +08:00
import { polyfill } from 'react-lifecycles-compat';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
import { CloseCircleFilled } from '@ant-design/icons';
2017-05-22 14:44:58 +08:00
import Group from './Group';
import Search from './Search';
import TextArea from './TextArea';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
2018-11-29 10:03:16 +08:00
import Password from './Password';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
import { Omit, tuple } from '../_util/type';
import warning from '../_util/warning';
2016-03-31 17:46:35 +08:00
function fixControlledValue<T>(value: T) {
2016-03-31 17:46:35 +08:00
if (typeof value === 'undefined' || value === null) {
return '';
}
return value;
}
function hasPrefixSuffix(props: InputProps) {
2019-03-07 15:47:43 +08:00
return !!('prefix' in props || props.suffix || props.allowClear);
}
const InputSizes = tuple('small', 'default', 'large');
2018-12-07 20:02:01 +08:00
export interface InputProps
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
prefixCls?: string;
size?: (typeof InputSizes)[number];
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
addonBefore?: React.ReactNode;
addonAfter?: React.ReactNode;
prefix?: React.ReactNode;
suffix?: React.ReactNode;
2018-12-28 12:27:26 +08:00
allowClear?: boolean;
}
2018-12-26 22:47:55 +08:00
class Input extends React.Component<InputProps, any> {
2017-05-22 14:44:58 +08:00
static Group: typeof Group;
2019-08-05 18:38:10 +08:00
2017-05-22 14:44:58 +08:00
static Search: typeof Search;
2019-08-05 18:38:10 +08:00
2017-05-22 14:44:58 +08:00
static TextArea: typeof TextArea;
2019-08-05 18:38:10 +08:00
2018-11-29 10:03:16 +08:00
static Password: typeof Password;
2017-05-22 14:44:58 +08:00
2016-03-31 17:46:35 +08:00
static defaultProps = {
type: 'text',
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.string,
size: PropTypes.oneOf(InputSizes),
maxLength: PropTypes.number,
2016-06-10 15:29:01 +08:00
disabled: PropTypes.bool,
value: PropTypes.any,
defaultValue: PropTypes.any,
className: PropTypes.string,
addonBefore: PropTypes.node,
addonAfter: PropTypes.node,
prefixCls: PropTypes.string,
onPressEnter: PropTypes.func,
onKeyDown: PropTypes.func,
onKeyUp: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
prefix: PropTypes.node,
suffix: PropTypes.node,
2018-12-26 22:34:29 +08:00
allowClear: PropTypes.bool,
};
2018-12-28 17:07:02 +08:00
static getDerivedStateFromProps(nextProps: InputProps) {
2018-12-26 22:47:55 +08:00
if ('value' in nextProps) {
return {
value: nextProps.value,
};
}
return null;
}
2016-04-06 18:12:41 +08:00
input: HTMLInputElement;
2018-12-26 22:47:55 +08:00
constructor(props: InputProps) {
super(props);
2018-12-28 17:31:17 +08:00
const value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
2018-12-26 22:47:55 +08:00
this.state = {
value,
};
}
2019-08-05 18:38:10 +08:00
// Since polyfill `getSnapshotBeforeUpdate` need work with `componentDidUpdate`.
// We keep an empty function here.
componentDidUpdate() {}
getSnapshotBeforeUpdate(prevProps: InputProps) {
if (hasPrefixSuffix(prevProps) !== hasPrefixSuffix(this.props)) {
warning(
this.input !== document.activeElement,
'Input',
`When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ`,
);
}
return null;
}
getInputClassName(prefixCls: string) {
const { size, disabled } = this.props;
return classNames(prefixCls, {
[`${prefixCls}-sm`]: size === 'small',
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-disabled`]: disabled,
});
}
2018-12-26 22:34:29 +08:00
setValue(
value: string,
e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLElement, MouseEvent>,
callback?: () => void,
2018-12-26 22:34:29 +08:00
) {
if (!('value' in this.props)) {
this.setState({ value }, callback);
2018-12-26 22:34:29 +08:00
}
2018-12-28 17:08:38 +08:00
const { onChange } = this.props;
if (onChange) {
let event = e;
if (e.type === 'click') {
// click clear icon
event = Object.create(e);
event.target = this.input;
event.currentTarget = this.input;
const originalInputValue = this.input.value;
// change input value cause e.target.value should be '' when clear input
this.input.value = '';
onChange(event as React.ChangeEvent<HTMLInputElement>);
2018-12-28 17:08:38 +08:00
// reset input value
this.input.value = originalInputValue;
return;
}
onChange(event as React.ChangeEvent<HTMLInputElement>);
2018-12-26 22:34:29 +08:00
}
}
2019-08-05 18:38:10 +08:00
saveInput = (node: HTMLInputElement) => {
this.input = node;
};
handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
const { onPressEnter, onKeyDown } = this.props;
if (e.keyCode === 13 && onPressEnter) {
onPressEnter(e);
}
if (onKeyDown) {
onKeyDown(e);
}
};
2018-12-26 22:34:29 +08:00
handleReset = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
this.setValue('', e, () => {
this.focus();
});
2018-12-26 22:34:29 +08:00
};
handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
this.setValue(e.target.value, e);
};
2019-08-05 18:38:10 +08:00
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
select() {
this.input.select();
}
2018-12-26 22:34:29 +08:00
renderClearIcon(prefixCls: string) {
const { allowClear, disabled } = this.props;
2018-12-26 22:34:29 +08:00
const { value } = this.state;
if (!allowClear || disabled || value === undefined || value === null || value === '') {
2018-12-26 22:34:29 +08:00
return null;
}
return (
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
<CloseCircleFilled
2018-12-26 22:34:29 +08:00
onClick={this.handleReset}
className={`${prefixCls}-clear-icon`}
2018-12-28 17:07:02 +08:00
role="button"
2018-12-26 22:34:29 +08:00
/>
);
}
renderSuffix(prefixCls: string) {
const { suffix, allowClear } = this.props;
if (suffix || allowClear) {
return (
<span className={`${prefixCls}-suffix`}>
{this.renderClearIcon(prefixCls)}
{suffix}
</span>
);
}
return null;
}
renderLabeledInput(prefixCls: string, children: React.ReactElement<any>) {
const { addonBefore, addonAfter, style, size, className } = this.props;
2016-12-04 16:42:49 +08:00
// Not wrap when there is not addons
if (!addonBefore && !addonAfter) {
2016-12-04 16:42:49 +08:00
return children;
}
const wrapperClassName = `${prefixCls}-group`;
2016-03-31 17:46:35 +08:00
const addonClassName = `${wrapperClassName}-addon`;
const addonBeforeNode = addonBefore ? (
<span className={addonClassName}>{addonBefore}</span>
2016-03-31 17:46:35 +08:00
) : null;
const addonAfterNode = addonAfter ? <span className={addonClassName}>{addonAfter}</span> : null;
2016-03-31 17:46:35 +08:00
const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, {
2018-12-07 20:02:01 +08:00
[wrapperClassName]: addonBefore || addonAfter,
2016-03-31 17:46:35 +08:00
});
const mergedGroupClassName = classNames(className, `${prefixCls}-group-wrapper`, {
[`${prefixCls}-group-wrapper-sm`]: size === 'small',
[`${prefixCls}-group-wrapper-lg`]: size === 'large',
});
// Need another wrapper for changing display:table to display:inline-block
// and put style prop in wrapper
return (
<span className={mergedGroupClassName} style={style}>
<span className={mergedWrapperClassName}>
{addonBeforeNode}
2018-07-31 16:40:48 +08:00
{React.cloneElement(children, { style: null })}
{addonAfterNode}
2018-07-31 16:40:48 +08:00
</span>
2016-03-31 17:46:35 +08:00
</span>
);
}
renderLabeledIcon(prefixCls: string, children: React.ReactElement<any>) {
const { props } = this;
2018-12-26 22:34:29 +08:00
const suffix = this.renderSuffix(prefixCls);
if (!hasPrefixSuffix(props)) {
return children;
}
const prefix = props.prefix ? (
2018-12-07 20:02:01 +08:00
<span className={`${prefixCls}-prefix`}>{props.prefix}</span>
) : null;
const affixWrapperCls = classNames(props.className, `${prefixCls}-affix-wrapper`, {
[`${prefixCls}-affix-wrapper-sm`]: props.size === 'small',
[`${prefixCls}-affix-wrapper-lg`]: props.size === 'large',
[`${prefixCls}-affix-wrapper-with-clear-btn`]:
props.suffix && props.allowClear && this.state.value,
});
return (
2018-12-07 20:02:01 +08:00
<span className={affixWrapperCls} style={props.style}>
{prefix}
2018-12-07 20:02:01 +08:00
{React.cloneElement(children, {
style: null,
className: this.getInputClassName(prefixCls),
})}
{suffix}
</span>
);
}
renderInput(prefixCls: string) {
const { className, addonBefore, addonAfter } = this.props;
2018-12-26 22:34:29 +08:00
const { value } = this.state;
// Fix https://fb.me/react-unknown-prop
const otherProps = omit(this.props, [
'prefixCls',
'onPressEnter',
'addonBefore',
'addonAfter',
'prefix',
'suffix',
2018-12-26 22:34:29 +08:00
'allowClear',
// Input elements must be either controlled or uncontrolled,
// specify either the value prop, or the defaultValue prop, but not both.
'defaultValue',
'size',
]);
2017-05-22 14:44:58 +08:00
return this.renderLabeledIcon(
prefixCls,
2017-05-22 14:44:58 +08:00
<input
{...otherProps}
value={fixControlledValue(value)}
2018-12-26 22:34:29 +08:00
onChange={this.handleChange}
className={classNames(this.getInputClassName(prefixCls), {
[className!]: className && !addonBefore && !addonAfter,
})}
2017-05-22 14:44:58 +08:00
onKeyDown={this.handleKeyDown}
ref={this.saveInput}
2017-05-22 14:44:58 +08:00
/>,
);
2016-03-31 17:46:35 +08:00
}
renderComponent = ({ getPrefixCls }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls } = this.props;
const prefixCls = getPrefixCls('input', customizePrefixCls);
return this.renderLabeledInput(prefixCls, this.renderInput(prefixCls));
};
2016-03-31 17:46:35 +08:00
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderComponent}</ConfigConsumer>;
2016-03-31 17:46:35 +08:00
}
}
2018-12-26 22:47:55 +08:00
polyfill(Input);
export default Input;