diff --git a/src/components/form/dump_seleft.tsx b/src/components/form/dump_seleft.tsx new file mode 100644 index 0000000..a73aaed --- /dev/null +++ b/src/components/form/dump_seleft.tsx @@ -0,0 +1,35 @@ +import { useState } from "react"; +import DebounceSelect from "./featch_select"; +import { inject, observer } from "mobx-react"; +import { Store } from "antd/es/form/interface"; +interface UserValue { + label: string; + value: string; +} +const Dumbselect = (props: Store) => { + const { usrStore } = props; + const [value, setValue] = useState([]); + + async function fetchUserList(username: string): Promise { + return usrStore.serchUser(username).then((res) => { + return res.data.record.map((item) => ({ + label: item.user_name, + value: item.identity, + })); + }); + } + return ( + { + setValue(newValue as UserValue[]); + }} + style={{ width: "100%" }} + /> + ); +}; + +export default inject("usrStore")(observer(Dumbselect)); diff --git a/src/components/form/featch_select.tsx b/src/components/form/featch_select.tsx new file mode 100644 index 0000000..8e0feab --- /dev/null +++ b/src/components/form/featch_select.tsx @@ -0,0 +1,51 @@ +import React, { useMemo, useRef, useState } from 'react'; +import { Select, Spin } from 'antd'; +import type { SelectProps } from 'antd'; +import debounce from 'lodash/debounce'; + +export interface DebounceSelectProps + extends Omit, 'options' | 'children'> { + fetchOptions: (search: string) => Promise; + debounceTimeout?: number; +} + +const DebounceSelect = < + ValueType extends { key?: string; label: React.ReactNode; value: string | number } = any, +>({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps) =>{ + const [fetching, setFetching] = useState(false); + const [options, setOptions] = useState([]); + const fetchRef = useRef(0); + + const debounceFetcher = useMemo(() => { + const loadOptions = (value: string) => { + fetchRef.current += 1; + const fetchId = fetchRef.current; + setOptions([]); + setFetching(true); + + fetchOptions(value).then((newOptions) => { + if (fetchId !== fetchRef.current) { + return; + } + + setOptions(newOptions); + setFetching(false); + }); + }; + + return debounce(loadOptions, debounceTimeout); + }, [fetchOptions, debounceTimeout]); + + return ( +