2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2017-05-22 14:44:58 +08:00
|
|
|
import omit from 'omit.js';
|
|
|
|
import classNames from 'classnames';
|
2018-11-27 13:46:42 +08:00
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
|
|
|
import ResizeObserver from 'resize-observer-polyfill';
|
2017-05-22 14:44:58 +08:00
|
|
|
import calculateNodeHeight from './calculateNodeHeight';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
2017-05-22 14:44:58 +08:00
|
|
|
|
2017-11-21 19:51:31 +08:00
|
|
|
function onNextFrame(cb: () => void) {
|
2017-05-22 14:44:58 +08:00
|
|
|
if (window.requestAnimationFrame) {
|
|
|
|
return window.requestAnimationFrame(cb);
|
|
|
|
}
|
|
|
|
return window.setTimeout(cb, 1);
|
|
|
|
}
|
|
|
|
|
2017-11-21 19:51:31 +08:00
|
|
|
function clearNextFrameAction(nextFrameId: number) {
|
2017-05-22 14:44:58 +08:00
|
|
|
if (window.cancelAnimationFrame) {
|
|
|
|
window.cancelAnimationFrame(nextFrameId);
|
|
|
|
} else {
|
|
|
|
window.clearTimeout(nextFrameId);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface AutoSizeType {
|
|
|
|
minRows?: number;
|
|
|
|
maxRows?: number;
|
|
|
|
}
|
|
|
|
|
2018-07-31 20:27:20 +08:00
|
|
|
export type HTMLTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
|
|
|
|
|
|
export interface TextAreaProps extends HTMLTextareaProps {
|
2018-05-21 21:30:37 +08:00
|
|
|
prefixCls?: string;
|
2017-05-22 14:44:58 +08:00
|
|
|
autosize?: boolean | AutoSizeType;
|
2018-05-21 21:30:37 +08:00
|
|
|
onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
|
2017-05-22 14:44:58 +08:00
|
|
|
}
|
|
|
|
|
2017-11-01 11:47:22 +08:00
|
|
|
export interface TextAreaState {
|
|
|
|
textareaStyles?: React.CSSProperties;
|
|
|
|
}
|
|
|
|
|
2018-11-27 13:46:42 +08:00
|
|
|
class TextArea extends React.Component<TextAreaProps, TextAreaState> {
|
2017-05-22 14:44:58 +08:00
|
|
|
nextFrameActionId: number;
|
2018-11-27 13:46:42 +08:00
|
|
|
resizeObserver: ResizeObserver | null;
|
2017-09-17 15:48:44 +08:00
|
|
|
|
2017-05-22 14:44:58 +08:00
|
|
|
state = {
|
2017-11-01 11:47:22 +08:00
|
|
|
textareaStyles: {},
|
2017-05-22 14:44:58 +08:00
|
|
|
};
|
|
|
|
|
2017-09-17 15:48:44 +08:00
|
|
|
private textAreaRef: HTMLTextAreaElement;
|
|
|
|
|
2017-05-22 14:44:58 +08:00
|
|
|
componentDidMount() {
|
|
|
|
this.resizeTextarea();
|
2018-11-27 13:46:42 +08:00
|
|
|
this.updateResizeObserverHook();
|
2017-05-22 14:44:58 +08:00
|
|
|
}
|
|
|
|
|
2018-11-27 13:46:42 +08:00
|
|
|
componentDidUpdate(prevProps: TextAreaProps) {
|
2017-05-22 14:44:58 +08:00
|
|
|
// Re-render with the new content then recalculate the height as required.
|
2018-11-27 13:46:42 +08:00
|
|
|
if (prevProps.value !== this.props.value) {
|
|
|
|
this.resizeOnNextFrame();
|
|
|
|
}
|
|
|
|
this.updateResizeObserverHook();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.resizeObserver) {
|
|
|
|
this.resizeObserver.disconnect();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
resizeOnNextFrame = () => {
|
|
|
|
if (this.nextFrameActionId) {
|
|
|
|
clearNextFrameAction(this.nextFrameActionId);
|
|
|
|
}
|
|
|
|
this.nextFrameActionId = onNextFrame(this.resizeTextarea);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-11-27 13:46:42 +08:00
|
|
|
|
|
|
|
// We will update hooks if `autosize` prop change
|
|
|
|
updateResizeObserverHook() {
|
|
|
|
if (!this.resizeObserver && this.props.autosize) {
|
|
|
|
// Add resize observer
|
|
|
|
this.resizeObserver = new ResizeObserver(this.resizeOnNextFrame);
|
|
|
|
this.resizeObserver.observe(this.textAreaRef);
|
|
|
|
} else if (this.resizeObserver && !this.props.autosize) {
|
|
|
|
// Remove resize observer
|
|
|
|
this.resizeObserver.disconnect();
|
|
|
|
this.resizeObserver = null;
|
2017-05-22 14:44:58 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
focus() {
|
|
|
|
this.textAreaRef.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
blur() {
|
|
|
|
this.textAreaRef.blur();
|
|
|
|
}
|
|
|
|
|
|
|
|
resizeTextarea = () => {
|
|
|
|
const { autosize } = this.props;
|
|
|
|
if (!autosize || !this.textAreaRef) {
|
|
|
|
return;
|
|
|
|
}
|
2019-01-28 11:52:40 +08:00
|
|
|
const { minRows, maxRows } = autosize as AutoSizeType;
|
2017-05-22 14:44:58 +08:00
|
|
|
const textareaStyles = calculateNodeHeight(this.textAreaRef, false, minRows, maxRows);
|
|
|
|
this.setState({ textareaStyles });
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-05-22 14:44:58 +08:00
|
|
|
|
2017-11-21 19:51:31 +08:00
|
|
|
handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
2017-05-22 14:44:58 +08:00
|
|
|
if (!('value' in this.props)) {
|
|
|
|
this.resizeTextarea();
|
|
|
|
}
|
|
|
|
const { onChange } = this.props;
|
|
|
|
if (onChange) {
|
|
|
|
onChange(e);
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-05-22 14:44:58 +08:00
|
|
|
|
2017-11-21 19:51:31 +08:00
|
|
|
handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
2017-05-22 14:44:58 +08:00
|
|
|
const { onPressEnter, onKeyDown } = this.props;
|
|
|
|
if (e.keyCode === 13 && onPressEnter) {
|
|
|
|
onPressEnter(e);
|
|
|
|
}
|
|
|
|
if (onKeyDown) {
|
|
|
|
onKeyDown(e);
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-05-22 14:44:58 +08:00
|
|
|
|
2017-11-21 19:51:31 +08:00
|
|
|
saveTextAreaRef = (textArea: HTMLTextAreaElement) => {
|
2017-05-22 14:44:58 +08:00
|
|
|
this.textAreaRef = textArea;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2017-05-22 14:44:58 +08:00
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
renderTextArea = ({ getPrefixCls }: ConfigConsumerProps) => {
|
|
|
|
const { prefixCls: customizePrefixCls, className, disabled } = this.props;
|
|
|
|
const { ...props } = this.props;
|
2018-12-07 20:02:01 +08:00
|
|
|
const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autosize']);
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('input', customizePrefixCls);
|
|
|
|
const cls = classNames(prefixCls, className, {
|
|
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
|
|
});
|
|
|
|
|
2017-05-22 14:44:58 +08:00
|
|
|
const style = {
|
|
|
|
...props.style,
|
|
|
|
...this.state.textareaStyles,
|
|
|
|
};
|
2017-07-16 15:39:21 +08:00
|
|
|
// Fix https://github.com/ant-design/ant-design/issues/6776
|
|
|
|
// Make sure it could be reset when using form.getFieldDecorator
|
|
|
|
if ('value' in otherProps) {
|
|
|
|
otherProps.value = otherProps.value || '';
|
|
|
|
}
|
2017-05-22 14:44:58 +08:00
|
|
|
return (
|
|
|
|
<textarea
|
|
|
|
{...otherProps}
|
2018-12-05 19:12:18 +08:00
|
|
|
className={cls}
|
2017-05-22 14:44:58 +08:00
|
|
|
style={style}
|
|
|
|
onKeyDown={this.handleKeyDown}
|
|
|
|
onChange={this.handleTextareaChange}
|
|
|
|
ref={this.saveTextAreaRef}
|
|
|
|
/>
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderTextArea}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2017-05-22 14:44:58 +08:00
|
|
|
}
|
2018-11-27 13:46:42 +08:00
|
|
|
|
|
|
|
polyfill(TextArea);
|
|
|
|
|
|
|
|
export default TextArea;
|