mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-11 10:05:07 +08:00
c80136a9a7
* text with prefix * add edit style * support editable * enhance accessibility & type experience * optimize IME case * support copy * add locale * add secondary & disabled * add ellipsis shadow text * split to 3 components * update snapshot * update desc * change lines also need update ellipsis * skip aria when is in ellipsis * add ResizeObserver in _util * update snapshot * move TestBase into test file * update test case * update doc * fix typo * important => level * use rows * update demo cols to 1 * fix cssText not work in firefox * update doc * add miss point * support extendable * update snapshot * fix doc * copyable support string * update snapshot * update doc * update doc desc * adjust style * full test * reset after test * rename * update snapshot * fix compile * adjust style * update desc * update prefixCls * update margin * adjust * nest wrap of tag content * adjust style * update comment * rm % * one more thing * tmp of measure * merge string as children * update snapshot * update testcase * remove comment * use internal variable for configProvider passing * update snapshot * use expandable instead of extendable * less variable it * update demo * update less * adjust code & mark style * remove mark padding * update measure logic * support nest element style * use childNode.textContent to fix react 15 error * update css * popout Typography * add link style * adjust doc * use ellipsis instead of rows & expandable * update doc * update doc * update doc & style * fix typo * add css ellipsis support * client render * update snapshot * enhance copyable * support onExpand * update test case * add test of css ellipsis * fix logic in react 15 * rename onChange -> onSave * use tagName of article * fix lint
150 lines
3.9 KiB
TypeScript
150 lines
3.9 KiB
TypeScript
import * as React from 'react';
|
|
import omit from 'omit.js';
|
|
import classNames from 'classnames';
|
|
import { polyfill } from 'react-lifecycles-compat';
|
|
import calculateNodeHeight from './calculateNodeHeight';
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
import ResizeObserver from '../_util/resizeObserver';
|
|
|
|
function onNextFrame(cb: () => void) {
|
|
if (window.requestAnimationFrame) {
|
|
return window.requestAnimationFrame(cb);
|
|
}
|
|
return window.setTimeout(cb, 1);
|
|
}
|
|
|
|
function clearNextFrameAction(nextFrameId: number) {
|
|
if (window.cancelAnimationFrame) {
|
|
window.cancelAnimationFrame(nextFrameId);
|
|
} else {
|
|
window.clearTimeout(nextFrameId);
|
|
}
|
|
}
|
|
|
|
export interface AutoSizeType {
|
|
minRows?: number;
|
|
maxRows?: number;
|
|
}
|
|
|
|
export type HTMLTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
|
|
export interface TextAreaProps extends HTMLTextareaProps {
|
|
prefixCls?: string;
|
|
autosize?: boolean | AutoSizeType;
|
|
onPressEnter?: React.KeyboardEventHandler<HTMLTextAreaElement>;
|
|
}
|
|
|
|
export interface TextAreaState {
|
|
textareaStyles?: React.CSSProperties;
|
|
}
|
|
|
|
class TextArea extends React.Component<TextAreaProps, TextAreaState> {
|
|
nextFrameActionId: number;
|
|
|
|
state = {
|
|
textareaStyles: {},
|
|
};
|
|
|
|
private textAreaRef: HTMLTextAreaElement;
|
|
|
|
componentDidMount() {
|
|
this.resizeTextarea();
|
|
}
|
|
|
|
componentDidUpdate(prevProps: TextAreaProps) {
|
|
// Re-render with the new content then recalculate the height as required.
|
|
if (prevProps.value !== this.props.value) {
|
|
this.resizeOnNextFrame();
|
|
}
|
|
}
|
|
|
|
resizeOnNextFrame = () => {
|
|
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, maxRows } = autosize as AutoSizeType;
|
|
const textareaStyles = calculateNodeHeight(this.textAreaRef, false, minRows, maxRows);
|
|
this.setState({ textareaStyles });
|
|
};
|
|
|
|
handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
if (!('value' in this.props)) {
|
|
this.resizeTextarea();
|
|
}
|
|
const { onChange } = this.props;
|
|
if (onChange) {
|
|
onChange(e);
|
|
}
|
|
};
|
|
|
|
handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
const { onPressEnter, onKeyDown } = this.props;
|
|
if (e.keyCode === 13 && onPressEnter) {
|
|
onPressEnter(e);
|
|
}
|
|
if (onKeyDown) {
|
|
onKeyDown(e);
|
|
}
|
|
};
|
|
|
|
saveTextAreaRef = (textArea: HTMLTextAreaElement) => {
|
|
this.textAreaRef = textArea;
|
|
};
|
|
|
|
renderTextArea = ({ getPrefixCls }: ConfigConsumerProps) => {
|
|
const { prefixCls: customizePrefixCls, className, disabled, autosize } = this.props;
|
|
const { ...props } = this.props;
|
|
const otherProps = omit(props, ['prefixCls', 'onPressEnter', 'autosize']);
|
|
const prefixCls = getPrefixCls('input', customizePrefixCls);
|
|
const cls = classNames(prefixCls, className, {
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
});
|
|
|
|
const style = {
|
|
...props.style,
|
|
...this.state.textareaStyles,
|
|
};
|
|
// 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 || '';
|
|
}
|
|
return (
|
|
<ResizeObserver onResize={this.resizeOnNextFrame} disabled={!autosize}>
|
|
<textarea
|
|
{...otherProps}
|
|
className={cls}
|
|
style={style}
|
|
onKeyDown={this.handleKeyDown}
|
|
onChange={this.handleTextareaChange}
|
|
ref={this.saveTextAreaRef}
|
|
/>
|
|
</ResizeObserver>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return <ConfigConsumer>{this.renderTextArea}</ConfigConsumer>;
|
|
}
|
|
}
|
|
|
|
polyfill(TextArea);
|
|
|
|
export default TextArea;
|