feat: Select组件自动补全增加loading中间状态 Close: baidu#9232

lhtuling · Dec 26, 2023 · c714042 · c714042
1 parent f64abad
commit c714042
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 44 deletions.
diff --git a/docs/zh-CN/components/form/select.md b/docs/zh-CN/components/form/select.md
@@ -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
         },

diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx
@@ -1007,7 +1007,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       virtualThreshold = 100,
       mobileUI,
       filterOption = defaultFilterOption,
-      overlay
+      overlay,
+      loading
     } = this.props;
     const {selection} = this.state;
 
@@ -1195,50 +1196,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>
     );