[TagInput] renderTagItem API with remove function

[Saul-BT]

Which Component Need Enhancement 期望新增功能的组件

• TagInput
• Form.TagInput

What does the proposed API look like 期望支持的API

(value: string, index: number, onRemove: () => void) => React.ReactNode

Where:

• value: is the current tag value (exists in the current API)

• index: is the index of current tag (exists in the current API)

• onRemove: the function to remove the tag item (does not exist in the current API)

Feature Description 功能描述

I know that this component can be controlled, but I think this feature can be interesting to add the functionality to remove tags in a simpler and compact way.

Usage example:

import React from 'react';
import { Button, TagInput } from '@douyinfe/semi-ui';

() => (
    <TagInput 
        defaultValue={['Semi', 'Hotsoon', 'Pipixia']} 
        renderTagItem={(value, _index, onRemove) => (
            <div style={{ margin: 5, backgroundColor: '#AEF' }}>
                <span>{value}</span>
                <Button onClick={onRemove} size='small' icon={<IconClose />} />
            </div>
        )}
    />
);

PROS:

• Less state bloat of the component that uses the TagInput.

• Have all the basic functionalities to handle the Tags, without adding complexity to the existing API.

CONS:

• It is a controlled component, and technically it is possible to have this functionality without modifying the API.

Additional information 补充说明

I have not spent much time thinking about the naming of the onRemove function, obviously it can be changed to a more convenient one.

M

[YyumeiZhang]

We will add support for this parameter in next beta version(2.23.0-beta.0)

[pointhalo]

2.23.0-beta.0 support

[Saul-BT]

Thank you all for your awesome work and support ❤️