mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

docs(select): fix type (#35726)

Browse Source 
* fix: demo ts type

* mend

* Update select-users.md
This commit is contained in:
zhao-huo-long 2022-05-25 21:10:07 +08:00 committed by GitHub
parent 1666313a14
commit 1fda3ece9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/select/demo/select-users.md
View File

@ -14,20 +14,20 @@ title:
A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
```tsx
import React, { useState, useRef, useMemo } from 'react';
import { Select, Spin } from 'antd';
import type { SelectProps } from 'antd/es/select';
import debounce from 'lodash/debounce';
import React, { useMemo, useRef, useState } from 'react';
export interface DebounceSelectProps<ValueType = any>
extends Omit<SelectProps<ValueType>, 'options' | 'children'> {
extends Omit<SelectProps<ValueType | ValueType[]>, 'options' | 'children'> {
fetchOptions: (search: string) => Promise<ValueType[]>;
debounceTimeout?: number;
}
function DebounceSelect<
ValueType extends { key?: string; label: React.ReactNode; value: string | number } = any,
>({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps) {
>({ fetchOptions, debounceTimeout = 800, ...props }: DebounceSelectProps<ValueType>) {
const [fetching, setFetching] = useState(false);
const [options, setOptions] = useState<ValueType[]>([]);
const fetchRef = useRef(0);
@ -54,7 +54,7 @@ function DebounceSelect<
}, [fetchOptions, debounceTimeout]);
return (
<Select<ValueType>
<Select
labelInValue
filterOption={false}
onSearch={debounceFetcher}
@ -96,7 +96,7 @@ const App: React.FC = () => {
placeholder="Select users"
fetchOptions={fetchUserList}
onChange={newValue => {
setValue(newValue);
setValue(newValue as UserValue[]);
}}
style={{ width: '100%' }}
/>