From 5def5ef3047d312c14e44249548469615a63dd50 Mon Sep 17 00:00:00 2001
From: Konv Suu <2583695112@qq.com>
Date: Tue, 21 Feb 2023 19:46:32 +0800
Subject: [PATCH] feat(comp:select): add `loading` prop for select component
 (#1439)

* feat(comp:select): add loading prop

* fix(comp:select): spin type in api doc
---
 packages/components/select/demo/Loading.md    | 13 +++++++
 packages/components/select/demo/Loading.vue   | 34 +++++++++++++++++++
 packages/components/select/docs/Api.zh.md     |  1 +
 packages/components/select/src/Select.tsx     | 11 +++++-
 .../select/src/composables/usePanelProps.ts   |  1 -
 packages/components/select/src/types.ts       |  2 ++
 6 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/select/demo/Loading.md
 create mode 100644 packages/components/select/demo/Loading.vue

diff --git a/packages/components/select/demo/Loading.md b/packages/components/select/demo/Loading.md
new file mode 100644
index 000000000..1dd823e04
--- /dev/null
+++ 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
new file mode 100644
index 000000000..31ea1af9d
--- /dev/null
+++ 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
index 4359ee204..9d3898671 100644
--- 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
index 7ed60fbc6..bd871bfc1 100644
--- 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
index 3c64c7670..ca9e75b60 100644
--- 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
index 8268e8086..692374fb0 100644
--- 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