feat(comp:select): add loading prop for select component (#1439)

* feat(comp:select): add loading prop * fix(comp:select): spin type in api doc
IDuxFE · Feb 21, 2023 · 56c892e · 56c892e
1 parent 5b78ee6
commit 56c892e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 2 deletions.
diff --git a/packages/components/select/demo/Loading.md b/packages/components/select/demo/Loading.md
@@ -0,0 +1,13 @@
+---
+title:
+  zh: 加载中
+  en: Loading
+order: 51
+---
+## zh
+
+数据还未加载完成时，展示一个加载中的状态。
+
+## en
+
+When the data has not been loaded yet, display a loading status。
diff --git a/packages/components/select/demo/Loading.vue b/packages/components/select/demo/Loading.vue
@@ -0,0 +1,34 @@
+<template>
+  <IxSpace vertical>
+    <IxSelect v-model:value="value" :dataSource="dataSource" :spin="loading"></IxSelect>
+    <IxButton @click="onLoad">Load Data</IxButton>
+  </IxSpace>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { SelectData } from '@idux/components/select'
+
+const dataSource = ref<SelectData[]>([{ label: 'Tom', value: 'tom' }])
+const value = ref('tom')
+const loading = ref(false)
+
+const onLoad = () => {
+  dataSource.value = [{ label: 'Tom', value: 'tom' }]
+  value.value = 'tom'
+
+  if (loading.value) {
+    return
+  }
+
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+    dataSource.value = [
+      { label: 'Tom', value: 'tom' },
+      { label: 'Jack', value: 'jack' },
+      { label: 'Lucy', value: 'lucy' },
+    ]
+  }, 3000)
+}
+</script>
diff --git a/packages/components/select/docs/Api.zh.md b/packages/components/select/docs/Api.zh.md
@@ -34,6 +34,7 @@
 | `searchable` | 是否可搜索 | `boolean \| 'overlay'` | `false` | - | 当为 `true` 时搜索功能集成在选择器上，当为 `overlay` 时，搜索功能集成在悬浮层上 |
 | `searchFn` | 根据搜索的文本进行筛选 | `boolean \| SelectSearchFn` | `true` | - | 为 `true` 时使用默认的搜索规则, 如果使用远程搜索，应该设置为 `false` |
 | `size` | 设置选择器大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - |
+| `spin` | 是否显示加载中状态 | `boolean \| SpinProps` | `undefined` | - | - |
 | `status` | 手动指定校验状态 | `valid \| invalid \| validating` | - | - | - |
 | `suffix` | 设置后缀图标 | `string \| #suffix` | `down` | ✅ | - |
 | `virtual` | 是否开启虚拟滚动 | `boolean` | `false` | - | - |

diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
@@ -9,6 +9,8 @@
 
 import { type ComputedRef, Slots, computed, defineComponent, normalizeClass, provide, ref, watch } from 'vue'
 
+import { isBoolean } from 'lodash-es'
+
 import { useAccessorAndControl } from '@idux/cdk/forms'
 import { type VirtualScrollToFn } from '@idux/cdk/scroll'
 import { type VKey, callEmit, useState } from '@idux/cdk/utils'
@@ -17,6 +19,7 @@ import { ɵOverlay } from '@idux/components/_private/overlay'
 import { ɵSelector, type ɵSelectorInstance } from '@idux/components/_private/selector'
 import { type SelectConfig, useGlobalConfig } from '@idux/components/config'
 import { useFormItemRegister, useFormSize, useFormStatus } from '@idux/components/form'
+import { IxSpin } from '@idux/components/spin'
 
 import { useActiveState } from './composables/useActiveState'
 import { GetKeyFn, useGetOptionKey } from './composables/useGetOptionKey'
@@ -167,8 +170,14 @@ export default defineComponent({
       />
     )
 
+    const renderLoading = (children: JSX.Element) => {
+      const { spin } = props
+      const spinProps = isBoolean(spin) ? { spinning: spin } : spin
+      return spinProps ? <IxSpin {...spinProps}>{children}</IxSpin> : children
+    }
+
     const renderContent = () => {
-      const children = [<Panel ref={panelRef} v-slots={slots} {...panelProps.value} />]
+      const children = [renderLoading(<Panel ref={panelRef} v-slots={slots} {...panelProps.value} />)]
       const { searchable, overlayRender } = props
 
       if (searchable === 'overlay') {

diff --git a/packages/components/select/src/composables/usePanelProps.ts b/packages/components/select/src/composables/usePanelProps.ts
@@ -29,7 +29,6 @@ export function usePanelProps(
     multiple: props.multiple,
     multipleLimit: props.multipleLimit,
     virtual: props.virtual,
-
     'onUpdate:activeValue': setActiveValue,
     onOptionClick,
     onScroll: props.onScroll,

diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
@@ -12,6 +12,7 @@ import type { VirtualScrollToFn } from '@idux/cdk/scroll'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
 import type { EmptyProps } from '@idux/components/empty'
 import type { FormSize } from '@idux/components/form'
+import type { SpinProps } from '@idux/components/spin'
 import type { OverlayContainerType } from '@idux/components/utils'
 import type { DefineComponent, FunctionalComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
@@ -79,6 +80,7 @@ export const selectProps = {
   size: { type: String as PropType<FormSize>, default: undefined },
   status: String as PropType<ValidateStatus>,
   suffix: { type: String, default: undefined },
+  spin: { type: [Boolean, Object] as PropType<boolean | SpinProps>, default: undefined },
   virtual: { type: Boolean, default: false },
 
   // events