feat(ArrayField): enhance add method to support optional index-based insertion issue#2544

[Shabi-x]

中文模板 / Chinese Template

• I have read and followed Pull Request Guidelines of the contributing guide.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Test Case
• TypeScript definition update
• Document improve
• CI/CD improve
• Branch sync
• Other, please describe:

PR description

Fixes #

Changelog

🇨🇳 Chinese
-feat: 根据 issue#2544的建议，针对arrayfiled组件add只能始终添加到最后一个位置，我阅读代码后修改了一下add方法，提供了一个可选的index来给与使用者添加新项位置的可选性，并添加了一个storybook测试项进行了一些测试。

---

🇺🇸 English

• feat(ArrayField): enhance add method to support optional index-based insertion related to issue [Form] ArrayField组件的add方法希望可以传入索引 #2544

Checklist

• Test or no need
• Document or no need
• Changelog or no need

Other

• Skip Changelog

Additional information

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 62565be:

Sandbox	Source
pr-story	Configuration

[Shabi-x]

@pointhalo 麻烦您了 请问这样解决这个issue可以嘛 希望得到您的批评指点~

[pointhalo]

抱歉，最近事情比较多。处理速度没跟上，预计下周整体看一下

• 另外可以先补充一下对应逻辑的测试用例，jest unit test 或者 cypress e2e test都可以

[Shabi-x]

抱歉，最近事情比较多。处理速度没跟上，预计下周整体看一下

• 另外可以先补充一下对应逻辑的测试用例，jest unit test 或者 cypress e2e test都可以

好的，我看一下哈

[Shabi-x]

新增的测试用例通过，但arrayfield.test.js的一项遇到了问题，我会排查一下错误根源

[Shabi-x]

新增的测试用例通过，但arrayfield.test.js的一项遇到了问题，我会排查一下错误根源

之前的做法是希望用户使用add时默认在最后一行插入新行，用户可以传入索引在任意位置插入，未传入索引，默认插在最后一行。由于我的测试代码都是箭头函数调用，没有出现问题。之前的demo出现了如下的问题：

调整add方法后，支持传入索引

add(index?: number) {
        const { keys } = this.state;
        const { field } = this.props;
        const updater = this.context;
        const newKey = getUuidv4();

        if (index === undefined) {
            keys.push(newKey);
        } else {
            keys.splice(index + 1, 0, newKey);
        }

        this.shouldUseInitValue = true;
        this.setState({ keys });

        let updateKey = new Date().valueOf();
        updater.updateArrayField(field, { updateKey });
        this.cacheUpdateKey = updateKey;

        return newKey;
    }

但是这样修改之后，用户用

 <Button onClick={() => add()} type="primary">
      Add
 </Button>

箭头函数的方式调用，表现正常。
但是不兼容直接

<Button onClick={add} type="primary">
     Add
</Button>

的调用方法了
所以测试没有通过，这里还需要寻找问题并修改

[Shabi-x]

新增的测试用例通过，但arrayfield.test.js的一项遇到了问题，我会排查一下错误根源

之前的做法是希望用户使用add时默认在最后一行插入新行，用户可以传入索引在任意位置插入，未传入索引，默认插在最后一行。由于我的测试代码都是箭头函数调用，没有出现问题。之前的demo出现了如下的问题：

调整add方法后，支持传入索引

add(index?: number) {
        const { keys } = this.state;
        const { field } = this.props;
        const updater = this.context;
        const newKey = getUuidv4();

        if (index === undefined) {
            keys.push(newKey);
        } else {
            keys.splice(index + 1, 0, newKey);
        }

        this.shouldUseInitValue = true;
        this.setState({ keys });

        let updateKey = new Date().valueOf();
        updater.updateArrayField(field, { updateKey });
        this.cacheUpdateKey = updateKey;

        return newKey;
    }

但是这样修改之后，用户用

 <Button onClick={() => add()} type="primary">
      Add
 </Button>

箭头函数的方式调用，表现正常。 但是不兼容直接

<Button onClick={add} type="primary">
     Add
</Button>

的调用方法了 所以测试没有通过，这里还需要寻找问题并修改

[Shabi-x]

新增的测试用例通过，但arrayfield.test.js的一项遇到了问题，我会排查一下错误根源

之前的做法是希望用户使用add时默认在最后一行插入新行，用户可以传入索引在任意位置插入，未传入索引，默认插在最后一行。由于我的测试代码都是箭头函数调用，没有出现问题。之前的demo出现了如下的问题：
调整add方法后，支持传入索引

add(index?: number) {
        const { keys } = this.state;
        const { field } = this.props;
        const updater = this.context;
        const newKey = getUuidv4();

        if (index === undefined) {
            keys.push(newKey);
        } else {
            keys.splice(index + 1, 0, newKey);
        }

        this.shouldUseInitValue = true;
        this.setState({ keys });

        let updateKey = new Date().valueOf();
        updater.updateArrayField(field, { updateKey });
        this.cacheUpdateKey = updateKey;

        return newKey;
    }

但是这样修改之后，用户用

 <Button onClick={() => add()} type="primary">
      Add
 </Button>

箭头函数的方式调用，表现正常。 但是不兼容直接

<Button onClick={add} type="primary">
     Add
</Button>

的调用方法了 所以测试没有通过，这里还需要寻找问题并修改

经过debug发现当onclick={add}时的index并不是undifined，而是

所以

zhe'ya这样的逻辑处理是出现了上述的问题，是处理边界的问题，这边对index的类型加以判断，修正了这个问题：）

@pointhalo @YyumeiZhang