diff --git a/packages/apsara-ui/src/Combobox/Combobox.stories.tsx b/packages/apsara-ui/src/Combobox/Combobox.stories.tsx index 38c07f26..3df386da 100644 --- a/packages/apsara-ui/src/Combobox/Combobox.stories.tsx +++ b/packages/apsara-ui/src/Combobox/Combobox.stories.tsx @@ -1,14 +1,17 @@ -import React from "react"; -import Combobox from "./Combobox"; +import React, { useState } from "react"; import { SelectProps } from "rc-select"; +import Combobox from "./Combobox"; + export default { title: "General/Combobox", component: Combobox, argTypes: { mode: { control: "select", options: ["multiple", "tags", "combobox", undefined] } }, }; -const options = [ + +type SelectOptionType = SelectProps['options']; +const options: SelectOptionType = [ { value: "2", label: "pilotdata-integration:bq_smoke_test_json_insert_all_dataset - Bigquery Dataset" }, { value: "3", label: "Ford Raptor" }, { value: "4", label: "Ferrari Testarossa" }, @@ -25,7 +28,6 @@ const options = [ const Template = (args: SelectProps) => ; export const MultiSelectWithSearch = Template.bind({}); - MultiSelectWithSearch.args = { placeholder: "Please Select", options: options, @@ -35,3 +37,25 @@ MultiSelectWithSearch.args = { mode: "multiple", optionFilterProp: "label", }; + +export const WithAsyncOptions = () => { + const [isSearching, setIsSearching] = useState(false); + const [opts, setOpts] = useState(); + + const search = (q: string) => { + setIsSearching(true); + setOpts(undefined); + setTimeout(() => { + setOpts(options.filter((o) => (o.label as string).includes(q))) + setIsSearching(false); + }, 1000); + } + + return +}; diff --git a/packages/apsara-ui/src/Combobox/Combobox.tsx b/packages/apsara-ui/src/Combobox/Combobox.tsx index f5ba8af8..4ad548f5 100644 --- a/packages/apsara-ui/src/Combobox/Combobox.tsx +++ b/packages/apsara-ui/src/Combobox/Combobox.tsx @@ -13,6 +13,13 @@ const notFoundContent = ( ); +const loadingContent = ( + + +
Loading
+
+); + const Combobox = ({ options, mode, @@ -65,7 +72,7 @@ const Combobox = ({ return (