mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-09 12:59:12 +08:00
29a15e2a5d
* refactor: use enum instead of multiple constants and refines types * fix: siganture and direction prop passing * Update Editable.tsx * refine types * test: update snap * style: prefer literal constants over enum * fix: refine types for typography * fix: restore ellipsis const * fix: restore ellipsis const * fix: restore textare importing
150 lines
3.6 KiB
TypeScript
150 lines
3.6 KiB
TypeScript
import EnterOutlined from '@ant-design/icons/EnterOutlined';
|
|
import classNames from 'classnames';
|
|
import type { AutoSizeType } from 'rc-textarea/lib/ResizableTextArea';
|
|
import KeyCode from 'rc-util/lib/KeyCode';
|
|
import * as React from 'react';
|
|
import type { DirectionType } from '../config-provider';
|
|
import TextArea from '../input/TextArea';
|
|
import type { TextAreaRef } from '../input/TextArea';
|
|
import { cloneElement } from '../_util/reactNode';
|
|
|
|
interface EditableProps {
|
|
prefixCls?: string;
|
|
value: string;
|
|
['aria-label']?: string;
|
|
onSave: (value: string) => void;
|
|
onCancel: () => void;
|
|
onEnd?: () => void;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
direction?: DirectionType;
|
|
maxLength?: number;
|
|
autoSize?: boolean | AutoSizeType;
|
|
enterIcon?: React.ReactNode;
|
|
component?: string;
|
|
}
|
|
|
|
const Editable: React.FC<EditableProps> = ({
|
|
prefixCls,
|
|
'aria-label': ariaLabel,
|
|
className,
|
|
style,
|
|
direction,
|
|
maxLength,
|
|
autoSize = true,
|
|
value,
|
|
onSave,
|
|
onCancel,
|
|
onEnd,
|
|
component,
|
|
enterIcon = <EnterOutlined />,
|
|
}) => {
|
|
const ref = React.useRef<TextAreaRef>(null);
|
|
|
|
const inComposition = React.useRef(false);
|
|
const lastKeyCode = React.useRef<number>();
|
|
|
|
const [current, setCurrent] = React.useState(value);
|
|
|
|
React.useEffect(() => {
|
|
setCurrent(value);
|
|
}, [value]);
|
|
|
|
React.useEffect(() => {
|
|
if (ref.current && ref.current.resizableTextArea) {
|
|
const { textArea } = ref.current.resizableTextArea;
|
|
textArea.focus();
|
|
const { length } = textArea.value;
|
|
textArea.setSelectionRange(length, length);
|
|
}
|
|
}, []);
|
|
|
|
const onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target }) => {
|
|
setCurrent(target.value.replace(/[\n\r]/g, ''));
|
|
};
|
|
|
|
const onCompositionStart = () => {
|
|
inComposition.current = true;
|
|
};
|
|
|
|
const onCompositionEnd = () => {
|
|
inComposition.current = false;
|
|
};
|
|
|
|
const onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = ({ keyCode }) => {
|
|
// We don't record keyCode when IME is using
|
|
if (inComposition.current) return;
|
|
|
|
lastKeyCode.current = keyCode;
|
|
};
|
|
|
|
const confirmChange = () => {
|
|
onSave(current.trim());
|
|
};
|
|
|
|
const onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = ({
|
|
keyCode,
|
|
ctrlKey,
|
|
altKey,
|
|
metaKey,
|
|
shiftKey,
|
|
}) => {
|
|
// Check if it's a real key
|
|
if (
|
|
lastKeyCode.current === keyCode &&
|
|
!inComposition.current &&
|
|
!ctrlKey &&
|
|
!altKey &&
|
|
!metaKey &&
|
|
!shiftKey
|
|
) {
|
|
if (keyCode === KeyCode.ENTER) {
|
|
confirmChange();
|
|
onEnd?.();
|
|
} else if (keyCode === KeyCode.ESC) {
|
|
onCancel();
|
|
}
|
|
}
|
|
};
|
|
|
|
const onBlur: React.FocusEventHandler<HTMLTextAreaElement> = () => {
|
|
confirmChange();
|
|
};
|
|
|
|
const textClassName = component ? `${prefixCls}-${component}` : '';
|
|
|
|
const textAreaClassName = classNames(
|
|
prefixCls,
|
|
`${prefixCls}-edit-content`,
|
|
{
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
},
|
|
className,
|
|
textClassName,
|
|
);
|
|
|
|
return (
|
|
<div className={textAreaClassName} style={style}>
|
|
<TextArea
|
|
ref={ref}
|
|
maxLength={maxLength}
|
|
value={current}
|
|
onChange={onChange}
|
|
onKeyDown={onKeyDown}
|
|
onKeyUp={onKeyUp}
|
|
onCompositionStart={onCompositionStart}
|
|
onCompositionEnd={onCompositionEnd}
|
|
onBlur={onBlur}
|
|
aria-label={ariaLabel}
|
|
rows={1}
|
|
autoSize={autoSize}
|
|
/>
|
|
{enterIcon !== null
|
|
? cloneElement(enterIcon, { className: `${prefixCls}-edit-content-confirm` })
|
|
: null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Editable;
|