feat(comp:select): add loading prop

IDuxFE · Feb 14, 2023 · 998a681 · 998a681
1 parent caf4dbf
commit 998a681
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 5 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,37 @@
+<template>
+  <IxSpace vertical>
+    <IxSelect v-model:value="value" :dataSource="dataSource" :loading="isLoading"></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 isLoading = ref<boolean>(false)
+
+const onLoad = () => {
+  dataSource.value = [{ label: 'Tom', value: 'tom' }]
+  value.value = 'tom'
+
+  if (isLoading.value) {
+    return
+  }
+
+  isLoading.value = true
+
+  setTimeout(() => {
+    isLoading.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
@@ -37,6 +37,7 @@
 | `status` | 手动指定校验状态 | `valid \| invalid \| validating` | - | - | - |
 | `suffix` | 设置后缀图标 | `string \| #suffix` | `down` | ✅ | - |
 | `virtual` | 是否开启虚拟滚动 | `boolean` | `false` | - | - |
+| `loading` | 是否显示加载中状态 | `boolean \| SpinPublicProps` | `false` | - | - |
 | `onChange` | 选中值发生改变后的回调 | `(value: any, oldValue: any) => void` | - | - | - |
 | `onClear` | 清除图标被点击后的回调 | `(evt: MouseEvent) => void` | - | - | - |
 | `onSearch` | 开启搜索功能后，输入后的回调 | `(searchValue: string) => void` | - | - | 通常用于服务端搜索 |

diff --git a/packages/components/select/src/Select.tsx b/packages/components/select/src/Select.tsx
@@ -17,6 +17,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'
@@ -107,7 +108,13 @@ export default defineComponent({
       }
     }
 
-    const handleBlur = () => accessor.markAsBlurred()
+    const handleBlur = () => {
+      if (props.allowInput && inputValue.value) {
+        changeSelected(inputValue.value)
+        clearInput()
+      }
+      accessor.markAsBlurred()
+    }
     const handleItemRemove = (value: VKey) => {
       focus()
       handleRemove(value)
@@ -160,8 +167,20 @@ export default defineComponent({
       />
     )
 
+    const renderLoading = (children: JSX.Element) => {
+      const { loading } = props
+      if (!loading) {
+        return children
+      }
+      if (typeof loading === 'boolean') {
+        return <IxSpin>{children}</IxSpin>
+      } else {
+        return <IxSpin {...loading}>{children}</IxSpin>
+      }
+    }
+
     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/panel/Panel.tsx b/packages/components/select/src/panel/Panel.tsx
@@ -107,7 +107,7 @@ export default defineComponent({
         children.push(<ɵEmpty v-slots={slots} empty={props.empty} />)
       }
 
-      return <div onMousedown={handlePanelMouseDown}>{children}</div>
+      return <div onMousedown={handlePanelMouseDown}>{children} </div>
     }
   },
 })

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 { SpinPublicProps } from '@idux/components/spin/src/types'
 import type { OverlayContainerType } from '@idux/components/utils'
 import type { DefineComponent, FunctionalComponent, HTMLAttributes, PropType, VNode, VNodeChild } from 'vue'
 
@@ -80,6 +81,7 @@ export const selectProps = {
   status: String as PropType<ValidateStatus>,
   suffix: { type: String, default: undefined },
   virtual: { type: Boolean, default: false },
+  loading: { type: [Boolean, Object] as PropType<boolean | SpinPublicProps>, default: false },
 
   // events
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<(value: any) => void>>,

diff --git a/packages/components/select/style/index.less b/packages/components/select/style/index.less
@@ -32,7 +32,7 @@
       margin-left: @select-option-label-margin-left;
     }
   }
-
+  
   &-option-group {
     .reset-component();
     .select-option(@select-option-font-size - 2px, @select-option-group-color);

diff --git a/packages/components/select/style/themes/default.variable.less b/packages/components/select/style/themes/default.variable.less
@@ -51,6 +51,8 @@
 
 @select-overlay-search-wrapper-padding: 4px 12px 8px;
 
+@select-loading-height: @height-3xl;
+
 @select-icon-font-size: @font-size-lg;
 @select-icon-margin-right: @spacing-xs;
 @select-icon-color: @select-placeholder-color;