test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:39:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #9246 from lurunze1226/fix-select-autocomplete-loading

Browse Source 
feat: Select组件自动补全增加loading中间状态
This commit is contained in:
hsm-lv 2024-01-17 09:42:47 +08:00 committed by GitHub
commit a73b8a7685
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 52 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/zh-CN/components/form/select.md
View File

@ -1199,7 +1199,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
"name": "select1",
"type": "select",
"label": "选项自动补全（单选）",
"autoComplete": "/api/mock2/options/autoComplete3?delay=true&term=${term}",
"autoComplete": "/api/mock2/options/autoComplete3?delay=true&term=${term}&waitSeconds=2",
"placeholder": "请输入",
"clearable": true
},

94
packages/amis-ui/src/components/Select.tsx
View File

@ -1012,7 +1012,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
virtualThreshold = 100,
mobileUI,
filterOption = defaultFilterOption,
overlay
overlay,
loading
} = this.props;
const {selection} = this.state;
@ -1198,50 +1199,57 @@ export class Select extends React.Component<SelectProps, SelectState> {
) : null}
</div>
) : null}
{multiple && valuesNoWrap ? (
<div className={cx('Select-option')}>
{__('Select.selected')}({selectionValues.length})
</div>
) : null}
{multiple && checkAll && filtedOptions.length ? (
<div className={cx('Select-option')}>
<Checkbox
checked={checkedPartial}
partial={checkedPartial && !checkedAll}
onChange={this.toggleCheckAll}
size="sm"
>
{__(checkAllLabel)}
</Checkbox>
</div>
) : null}
{creatable && !disabled ? (
<a className={cx('Select-addBtn')} onClick={this.handleAddClick}>
<Icon icon="plus" className="icon" />
{__(createBtnLabel)}
</a>
) : null}
{filtedOptions.length ? (
filtedOptions.length > virtualThreshold ? ( // 较多数据时才启用 virtuallist，避免滚动条问题
<VirtualList
height={
filtedOptions.length > 8
? 266
: filtedOptions.length * virtualItemHeight
}
itemCount={filtedOptions.length}
itemSize={virtualItemHeight}
renderItem={renderItem}
/>
) : (
filtedOptions.map((item, index) => {
return renderItem({index});
})
)
{loading ? (
<div className={cx('Select-noResult')}>{__('loading')}</div>
) : (
<div className={cx('Select-noResult')}>{__(noResultsText)}</div>
<>
{multiple && valuesNoWrap ? (
<div className={cx('Select-option')}>
{__('Select.selected')}({selectionValues.length})
</div>
) : null}
{multiple && checkAll && filtedOptions.length ? (
<div className={cx('Select-option')}>
<Checkbox
checked={checkedPartial}
partial={checkedPartial && !checkedAll}
onChange={this.toggleCheckAll}
size="sm"
>
{__(checkAllLabel)}
</Checkbox>
</div>
) : null}
{creatable && !disabled ? (
<a className={cx('Select-addBtn')} onClick={this.handleAddClick}>
<Icon icon="plus" className="icon" />
{__(createBtnLabel)}
</a>
) : null}
{filtedOptions.length ? (
filtedOptions.length > virtualThreshold ? ( // 较多数据时才启用 virtuallist，避免滚动条问题
<VirtualList
height={
filtedOptions.length > 8
? 266
: filtedOptions.length * virtualItemHeight
}
itemCount={filtedOptions.length}
itemSize={virtualItemHeight}
renderItem={renderItem}
/>
) : (
filtedOptions.map((item, index) => {
return renderItem({index});
})
)
) : (
<div className={cx('Select-noResult')}>{__(noResultsText)}</div>
)}
</>
)}
</div>
);