feat(table): add new api actionRef.saveEditable

[shijistar]

[EditableTable]

editable对象actionRender方法的defaultDoms参数对每个action按钮都扩展了一个ref对象，可以让调用者以编程的方式直接触发对应的action。
相较于新的api，调用者只能调用config对象的onSave/onDelete/onCancel方法，但需要传递很多参数(尤其是onSave)，需要了解很多内部知识，自己需要用form来获取整个编辑行的数据，门槛太高。而新的方法，内部获取所有信息，无需传参。

应用场景：

如果页面上存在多个tab，或者编辑表格会动态显示/隐藏，如果编辑行没有保存就被隐藏了，那最后保存表单时这一行就会丢失掉。借助新方法，调用者可以在隐藏表格之前自动保存编辑行，避免数据丢失的问题。

• bad(图)
  
• good(图)
  

[github-actions]

🎊 PR Preview has been successfully built and deployed to https://pro-components-preview-pr-6081.surge.sh

[codecov]

Codecov Report

Base: 98.55% // Head: 98.80% // Increases project coverage by +0.25% 🎉

Coverage data is based on head (0aafa3c) compared to base (662d12c).
Patch coverage: 100.00% of modified lines in pull request are covered.

❗ Current head 0aafa3c differs from pull request most recent head 832b3fd. Consider uploading reports for the commit 832b3fd to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6081      +/-   ##
==========================================
+ Coverage   98.55%   98.80%   +0.25%     
==========================================
  Files         320      268      -52     
  Lines        9731     7896    -1835     
  Branches     3282     2724     -558     
==========================================
- Hits         9590     7802    -1788     
+ Misses        134       94      -40     
+ Partials        7        0       -7     

Impacted Files	Coverage Δ
...kages/layout/src/components/SiderMenu/BaseMenu.tsx	99.41% <ø> (-0.06%)	⬇️
packages/utils/src/useEditableArray/index.tsx	100.00% <100.00%> (ø)
packages/utils/src/useEditableMap/index.tsx	100.00% <100.00%> (ø)
packages/card/src/components/TabPane/index.tsx	69.23% <0.00%> (-8.55%)	⬇️
packages/form/src/components/Checkbox/index.tsx	80.00% <0.00%> (-7.50%)	⬇️
...ages/utils/src/components/FilterDropdown/index.tsx	78.57% <0.00%> (-6.43%)	⬇️
packages/field/src/components/Slider/index.tsx	75.00% <0.00%> (-6.25%)	⬇️
...ckages/utils/src/components/LabelIconTip/index.tsx	83.33% <0.00%> (-3.63%)	⬇️
packages/card/src/components/Actions/index.tsx	88.88% <0.00%> (-3.42%)	⬇️
...layout/src/components/AppsLogoComponents/index.tsx	83.87% <0.00%> (-3.31%)	⬇️
... and 305 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[lgtm-com]

This pull request fixes 1 alert when merging 0aafa3c into 7a38415 - view on LGTM.com

fixed alerts:

• 1 for Unused variable, import, function or class

[lgtm-com]

This pull request fixes 1 alert when merging 99f8a78 into 7a38415 - view on LGTM.com

fixed alerts:

• 1 for Unused variable, import, function or class

[chenshuai2144]

没看懂你的新用法

[shijistar]

@chenshuai2144 可能文字描述不直观，我加了一段示例代码，手动保存编辑行，比调用config.onSave要容易很多

import type { FC, RefObject } from 'react';
import { useRef } from 'react';
import { Button } from 'antd';
import { EditableProTable } from '@ant-design/pro-table';
import type { EditableFormInstance } from '@ant-design/pro-table/es/components/EditableTable';
import type { SaveEditableActionRef } from '@ant-design/pro-utils/es/useEditableArray';

const AdvancedProperties: FC = () => {
  const editableRef = useRef<EditableFormInstance>();
  const saveActionRef = useRef<RefObject<SaveEditableActionRef>>();
  return (
    <div>
      <Button
        onClick={async () => {
          // validate editing row and save
          await editableRef.current.validateFields();
          await saveActionRef.current.current.save(); // NEW API: saveRef.save
          /*  then continue submitting the form data...  */
        }}
      >
        Save row and submit
      </Button>
      <EditableProTable
        editableFormRef={editableRef}
        editable={{
          actionRender: (row, config, defaultDom) => {
            saveActionRef.current = defaultDom.saveRef; // NEW API: saveRef
            return [defaultDom.save, defaultDom.cancel];
          },
        }}
      />
    </div>
  );
};

[chenshuai2144]

await saveActionRef.current.current.save();

这个写法也太离谱了

[shijistar]

@chenshuai2144 这样设计API怎么样？

import type { FC, Key } from 'react';
import { useState, useRef } from 'react';
import { Button } from 'antd';
import type { ActionType } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import type { EditableFormInstance } from '@ant-design/pro-table/es/components/EditableTable';

const AdvancedProperties: FC = () => {
  const editableRef = useRef<EditableFormInstance>();
  const [editableKeys, setEditableKeys] = useState<Key[]>([]);
  const actionRef = useRef<ActionType>();
  return (
    <div>
      <Button
        onClick={async () => {
          // validate editing row and save
          await editableRef.current.validateFields();
          await actionRef.current.saveRecord(editingKeys[0]); // NEW API: actionRef.saveRecord
          /*  then continue submitting the form data...  */
        }}
      >
        Save row and submit
      </Button>
      <EditableProTable
        editableFormRef={editableRef}
        actionRef={actionRef}
        editable={{
          editableKeys,
          onChange(keys) {
            setEditableKeys(keys);
          },
        }}
      />
    </div>
  );
};

[shijistar]

重新实现了一下，补了一个单元测试

[chenshuai2144]

saveRecord 和 save 的区别是什么？

[shijistar]

1. save 是把save按钮的click事件包装了一下（现在已经变成内部方法了），大致相当于点击save按钮。
2. saveRecord 是添加到actionRef中一个新的api方法，和startEditable、cancelEditable类似，可以输入recordKey，把对应的行保存并退出编辑状态。也可以把名称改成saveEditable，这样startEditable、cancelEditable、saveEditable就和editable的三个按钮一一对应了。

第一个save现在变成一个内部使用的方法了，不再公开出来了。你在 #6081 (comment) 中也评论了，太丑了，所以换成了第二种的api

基于saveRecord api，还有一个好处，我们可以增加一个特性，当editable设置为 type="single" 单行模式时，可以在点击新增按钮时自动保存上一行，这样用户操作更连贯，体验更好。很多人都是在输入一行的内容后，直接点击新增按钮再增加一行，结果每次都给一个警告，提示一次只能新增一行，用户需要手动点击保存按钮，才能再增加一行。 @chenshuai2144

[chenshuai2144]

现在 actionRef 上开了什么东西出来，我记得好像有个差不多的

[shijistar]

跟EditableTable相关的是这几个 @chenshuai2144

{
    isEditable,
    startEditable,
    cancelEditable,
    addEditRecord,
    preEditableKeys,
    onValuesChange
}

[shijistar]

我把方法名改成saveEditable了，与startEditable、cancelEditable可以对齐。

@chenshuai2144 麻烦review下吧，看是否需要merge进去？

另外，我还准备了另外一个commit，添加了一个editable.autoSaveEditable开关，可以支持添加新纪录时自动保存上一条记录，可以实现连续添加。当添加按钮在底部的时候提效的效果更明显。
这里是预览图哈：

`

[chenshuai2144]

autoSaveEditable 这个有点hack了，让用户手动调用 saveEditable 吧

[chenshuai2144]

覆盖率降低了 提一下

[shijistar]

done

[704998200]

但是我发现使用这种方法触发不了onSave方法

• @example 保存的时候请求后端
  • editable={{ onSave:async (rows)=>{ await save(rows) } }}