Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Select]maxTagCount对tagInline不生效 #2703

Open
luhaopeng opened this issue Feb 20, 2021 · 1 comment
Open

[Select]maxTagCount对tagInline不生效 #2703

luhaopeng opened this issue Feb 20, 2021 · 1 comment
Assignees
Labels
🧐 Experience Make Fusion easy and robust to use improvement improve some features PR welcome We need you to help us by sending a pull request :)

Comments

@luhaopeng
Copy link

Component

Select

Reproduction link

https://codepen.io/luhaopeng/pen/jOVwEOK

Steps to reproduce

重现

点击重现链接,选择子节点,虽然设置了maxTagCount=3,但超出后依然会继续渲染tag。

描述

设置了tagInline的情况下,无论maxTagCount设置为多少都不会生效,在普通情况下影响不大,而对于子节点数量极多的树型组件如TreeSelect,(参考重现链接),选中父节点Component,然后反选一个子节点,Select的value就会由一个Component tag,变成999个tag,此时有明显卡顿。根据文档的参数描述:

maxTagCount: 最多显示多少个 tag

再加上,渲染多余的tag并没有实际意义,还会造成额外开销,所以让maxTagCount在tagInline模式下也生效是不是更合适?

期望表现

tagInline模式下,value数量超过maxTagCount时,表现为额外渲染一个不带有close icon、label为"..."的tag。

问题所在代码

// src/select/select.jsx/Select/renderValues
if (maxTagCount !== undefined && value.length > maxTagCount && !tagInline) {
    limitedCountValue = limitedCountValue.slice(0, maxTagCount);
    maxTagPlaceholderEl = (
        <Tag key="_count" type="primary" size={size === 'large' ? 'medium' : 'small'} animation={false}>
            {holder(value, totalValue)}
        </Tag>
    );
}

解决方案

    let limitedCountValue = value;
    let maxTagPlaceholderEl;
    const totalValue = this.dataStore.getFlattenDS();
    const holder = 'maxTagPlaceholder' in this.props ? maxTagPlaceholder : this.maxTagPlaceholder;
+   const overflow = maxTagCount !== undefined && value.length > maxTagCount;

-   if (maxTagCount !== undefined && value.length > maxTagCount && !tagInline) {
+   if (overflow) {
        limitedCountValue = limitedCountValue.slice(0, maxTagCount);
+       if (!tagInline) {
            maxTagPlaceholderEl = (
                <Tag key="_count" type="primary" size={size === 'large' ? 'medium' : 'small'} animation={false}>
                    {holder(value, totalValue)}
                </Tag>
            );
+       }
    }

    if (value.length > 0 && tagInline) {
        maxTagPlaceholderEl = (
            <div className={`${prefix}select-tag-compact`} key="_count">
                {holder(value, totalValue)}
            </div>
        );
    }

    value = limitedCountValue;
    if (!Array.isArray(value)) {
        value = [value];
    }

    const selectedValueNodes = value.map(v => {
        if (!v) {
            return null;
        }
        const labelNode = fillProps ? v[fillProps] : valueRender(v);

        return (
            <Tag
                key={v.value}
                disabled={disabled || v.disabled}
                type="primary"
                size={size === 'large' ? 'medium' : 'small'}
                animation={false}
                onClose={this.handleTagClose.bind(this, v)}
                closable={tagClosable}
            >
                {labelNode}
            </Tag>
        );
    });

    if (maxTagPlaceholderEl) {
        if (tagInline) {
            selectedValueNodes.unshift(maxTagPlaceholderEl);
        } else {
            selectedValueNodes.push(maxTagPlaceholderEl);
        }
    }
+   if (overflow && tagInline) {
+       selectedValueNodes.push(
+           <Tag
+               key="_rest_tags_"
+               type="primary"
+               size={size === 'large' ? 'medium' : 'small'}
+               animation={false}
+           >
+               ...
+           </Tag>
+       )
+   }
    return selectedValueNodes;

preview

@bindoon bindoon added the PR welcome We need you to help us by sending a pull request :) label Jul 27, 2021
@bindoon
Copy link
Member

bindoon commented Jul 27, 2021

能帮忙提 PR 吗?

@bindoon bindoon added the improvement improve some features label Jul 27, 2021
@YSMJ1994 YSMJ1994 added the 🧐 Experience Make Fusion easy and robust to use label Mar 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧐 Experience Make Fusion easy and robust to use improvement improve some features PR welcome We need you to help us by sending a pull request :)
Projects
None yet
Development

No branches or pull requests

3 participants