feat: add onCancel and onEnd option for editable (#29615)

* feature: add onCancel and onEnd option for editable

* doc: editable

* doc: add EN doc

* optimize: code

Co-authored-by: chenliang <chenliang9@xiaomi.com>

components/typography/Base.tsx

@@ -37,6 +37,8 @@ interface EditConfig {
   tooltip?: boolean | React.ReactNode;
   onStart?: () => void;
   onChange?: (value: string) => void;
+  onCancel?: () => void;
+  onEnd?: () => void;
   maxLength?: number;
   autoSize?: boolean | AutoSizeType;
 }
@@ -204,6 +206,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
   };
 
   onEditCancel = () => {
+    this.getEditable().onCancel?.();
     this.triggerEdit(false);
   };
 
@@ -410,12 +413,13 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
   renderEditInput() {
     const { children, className, style } = this.props;
     const { direction } = this.context;
-    const { maxLength, autoSize } = this.getEditable();
+    const { maxLength, autoSize, onEnd } = this.getEditable();
     return (
       <Editable
         value={typeof children === 'string' ? children : ''}
         onSave={this.onEditChange}
         onCancel={this.onEditCancel}
+        onEnd={onEnd}
         prefixCls={this.getPrefixCls()}
         className={className}
         style={style}

components/typography/Editable.tsx

@@ -12,6 +12,7 @@ interface EditableProps {
   ['aria-label']?: string;
   onSave: (value: string) => void;
   onCancel: () => void;
+  onEnd?: () => void;
   className?: string;
   style?: React.CSSProperties;
   direction?: DirectionType;
@@ -30,6 +31,7 @@ const Editable: React.FC<EditableProps> = ({
   value,
   onSave,
   onCancel,
+  onEnd,
 }) => {
   const ref = React.useRef<any>();
 
@@ -92,6 +94,7 @@ const Editable: React.FC<EditableProps> = ({
     ) {
       if (keyCode === KeyCode.ENTER) {
         confirmChange();
+        onEnd?.();
       } else if (keyCode === KeyCode.ESC) {
         onCancel();
       }

components/typography/__tests__/index.test.js

@@ -469,6 +469,24 @@ describe('Typography', () => {
       testStep({ name: 'customize edit hide tooltip', tooltip: false });
       testStep({ name: 'customize edit tooltip text', tooltip: 'click to edit text' });
 
+      it('should trigger onEnd when type Enter', () => {
+        const onEnd = jest.fn();
+        const wrapper = mount(<Paragraph editable={{ onEnd }}>Bamboo</Paragraph>);
+        wrapper.find('.ant-typography-edit').first().simulate('click');
+        wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ENTER });
+        wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ENTER });
+        expect(onEnd).toHaveBeenCalledTimes(1);
+      });
+
+      it('should trigger onCancel when type ESC', () => {
+        const onCancel = jest.fn();
+        const wrapper = mount(<Paragraph editable={{ onCancel }}>Bamboo</Paragraph>);
+        wrapper.find('.ant-typography-edit').first().simulate('click');
+        wrapper.find('textarea').simulate('keyDown', { keyCode: KeyCode.ESC });
+        wrapper.find('textarea').simulate('keyUp', { keyCode: KeyCode.ESC });
+        expect(onCancel).toHaveBeenCalledTimes(1);
+      });
+
       it('should only trigger focus on the first time', () => {
         let triggerTimes = 0;
         const mockFocus = spyElementPrototype(HTMLElement, 'focus', () => {

components/typography/index.en-US.md

@@ -90,6 +90,8 @@ Basic text writing, including headings, body text, lists, and more.
       autoSize: boolean | { minRows: number, maxRows: number },
       onStart: function,
       onChange: function(string),
+      onCancel: function,
+      onEnd: function,
     }
 
 | Property | Description | Type | Default | Version |
@@ -101,6 +103,8 @@ Basic text writing, including headings, body text, lists, and more.
 | tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
 | onChange | Called when input at textarea | function(event) | - |  |
 | onStart | Called when enter editable state | function | - |  |
+| onCancel | Called when type ESC to exit editable state | function | - |  |
+| onEnd | Called when type ENTER to exit editable state | function | - |  |
 
 ### ellipsis
 

components/typography/index.zh-CN.md

@@ -90,6 +90,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
       autoSize: boolean | { minRows: number, maxRows: number },
       onStart: function,
       onChange: function(string),
+      onCancel: function,
+      onEnd: function,
     }
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -101,6 +103,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 | tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
 | onChange | 文本域编辑时触发 | function(event) | - |  |
 | onStart | 进入编辑中状态时触发 | function | - |  |
+| onCancel | 按 ESC 退出编辑状态时触发 | function | - |  |
+| onEnd | 按 ENTER 结束编辑状态时触发 | function | - |  |
 
 ### ellipsis