Skip to content

feat(input-text): 多选模式支持 maxTagCount 标签收纳功能 #21258

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.

Sign up for GitHub

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

Open
bamzc wants to merge 1 commit into
base: master
Choose a base branch
from
+150 −21
Open

feat(input-text): 多选模式支持 maxTagCount 标签收纳功能 #21258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions packages/amis-ui/scss/components/form/_text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -506,3 +506,44 @@ input.#{$ns}TextControl-input-password {
color: var(--Form-input-onDisabled-color);
}
}

// 多选模式下收纳标签的浮层样式
.#{$ns}TextControl-overflow-wrapper {
.#{$ns}TextControl-overflow {
display: flex;
flex-wrap: wrap;
gap: var(--gap-xs);
max-width: px2rem(300px);
}

.#{$ns}TextControl-overflow-value {
display: inline-flex;
align-items: center;
line-height: calc(
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
);
font-size: var(--Form-selectValue-fontSize);
background: var(--Form-select-multiple-bgColor);
border-radius: px2rem(2px);
padding: 0 var(--gap-sm);
max-width: 100%;
word-break: break-all;
}

.#{$ns}TextControl-overflow-valueLabel {
line-height: var(--gap-xl);
word-break: break-all;
}

.#{$ns}TextControl-overflow-valueIcon {
cursor: pointer;
margin-left: var(--gap-sm);
min-width: px2rem(10px);
color: var(--default-icon-color);
flex-shrink: 0;

&:hover {
color: var(--danger);
}
}
}
130 changes: 109 additions & 21 deletions packages/amis/src/renderers/Form/InputText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,14 @@ import {
isEffectiveApi,
getVariable
} from 'amis-core';
import {Icon, SpinnerExtraProps, Input, Spinner, OverflowTpl} from 'amis-ui';
import {
Icon,
SpinnerExtraProps,
Input,
Spinner,
OverflowTpl,
TooltipWrapper
} from 'amis-ui';
import {ActionSchema} from '../Action';
import {FormOptionsSchema, SchemaApi, SchemaObject} from '../../Schema';
import {supportStatic} from './StaticHoc';
Expand Down Expand Up @@ -127,6 +134,16 @@ export interface AMISInputTextSchema extends AMISFormItemWithOptions {

/** 内容为空时清除值 */
clearValueOnEmpty?: boolean;

/**
* 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
*/
maxTagCount?: number;

/**
* 收纳标签的Popover配置
*/
overflowTagPopover?: object;
}

export type InputTextRendererEvent =
Expand All @@ -139,7 +156,7 @@ export type InputTextRendererEvent =
| 'enter';

export interface TextProps extends OptionsControlProps, SpinnerExtraProps {
placeholder?: string | { [propName: string]: string; };
placeholder?: string | {[propName: string]: string};
addOn?: ActionObject & {
position?: 'left' | 'right';
label?: string;
Expand All @@ -163,6 +180,11 @@ export interface TextProps extends OptionsControlProps, SpinnerExtraProps {
nativeInputClassName?: string;

popOverContainer?: any;

/** 标签的最大展示数量 */
maxTagCount?: number;
/** 收纳标签的Popover配置 */
overflowTagPopover?: object;
}

export interface TextState {
Expand Down Expand Up @@ -792,7 +814,9 @@ export default class TextControl extends React.PureComponent<
css,
id,
nativeAutoComplete,
testIdBuilder
testIdBuilder,
maxTagCount,
overflowTagPopover
} = this.props;
let type = this.props.type?.replace(/^(?:native|input)\-/, '');

Expand Down Expand Up @@ -883,25 +907,89 @@ export default class TextControl extends React.PureComponent<
</div>
) : null}

{selectedOptions.map((item, index) =>
multiple ? (
<div className={cx('TextControl-value')} key={index}>
<OverflowTpl
className={cx('TextControl-valueLabel')}
tooltip={`${item[labelField || 'label']}`}
{multiple ? (
<>
{(typeof maxTagCount === 'number' && maxTagCount > 0
? selectedOptions.slice(0, maxTagCount)
: selectedOptions
).map((item, index) => (
<div className={cx('TextControl-value')} key={index}>
<OverflowTpl
className={cx('TextControl-valueLabel')}
tooltip={`${item[labelField || 'label']}`}
>
{`${item[labelField || 'label']}`}
</OverflowTpl>
<Icon
icon="close"
className={cx('TextControl-valueIcon', 'icon')}
onClick={this.removeItem.bind(this, index)}
/>
</div>
))}
{typeof maxTagCount === 'number' &&
maxTagCount > 0 &&
selectedOptions.length > maxTagCount ? (
<TooltipWrapper
container={popOverContainer}
placement="top"
tooltip={{
tooltipClassName: cx('TextControl-overflow-wrapper'),
children: () => (
<div className={cx('TextControl-overflow')}>
{selectedOptions
.slice(maxTagCount)
.map((item, index) => (
<div
className={cx('TextControl-overflow-value')}
key={index + maxTagCount}
>
<span
className={cx(
'TextControl-overflow-valueLabel'
)}
>
{`${item[labelField || 'label']}`}
</span>
<Icon
icon="close"
className={cx(
'TextControl-overflow-valueIcon',
'icon'
)}
onClick={this.removeItem.bind(
this,
index + maxTagCount
)}
/>
</div>
))}
</div>
),
...overflowTagPopover
}}
trigger="hover"
>
{`${item[labelField || 'label']}`}
</OverflowTpl>
<Icon
icon="close"
className={cx('TextControl-valueIcon', 'icon')}
onClick={this.removeItem.bind(this, index)}
/>
</div>
) : (inputValue && isOpen) || creatable !== false ? null : (
<div className={cx('TextControl-value')} key={index}>
{item.label}
</div>
<div
className={cx(
'TextControl-value',
'TextControl-value--overflow'
)}
>
<span className={cx('TextControl-valueLabel')}>
+{selectedOptions.length - maxTagCount}
</span>
</div>
</TooltipWrapper>
) : null}
</>
) : (
selectedOptions.map((item, index) =>
(inputValue && isOpen) || creatable !== false ? null : (
<div className={cx('TextControl-value')} key={index}>
{item.label}
</div>
)
)
)}

Expand Down
Loading