mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
demo(AutoComplete): opt options type by AutoCompleteProps (#49768)
* demo(AutoComplete): opt options type by AutoCompleteProps * lint fix
This commit is contained in:
parent
eef48c87c2
commit
05a0179616
@ -1,13 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import { CloseSquareFilled } from '@ant-design/icons';
|
||||
import { AutoComplete } from 'antd';
|
||||
import type { AutoCompleteProps } from 'antd';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
|
||||
const getPanelValue = (searchText: string) =>
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
import type { AutoCompleteProps } from 'antd';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
@ -7,8 +8,8 @@ const mockVal = (str: string, repeat = 1) => ({
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState('');
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
const [anotherOptions, setAnotherOptions] = useState<{ value: string }[]>([]);
|
||||
const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
const [anotherOptions, setAnotherOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
|
||||
const getPanelValue = (searchText: string) =>
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
||||
|
@ -1,10 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import type { AutoCompleteProps } from 'antd';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setOptions(
|
||||
|
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import { AutoComplete } from 'antd';
|
||||
import type { DefaultOptionType } from 'antd/es/select';
|
||||
import type { AutoCompleteProps } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = React.useState<DefaultOptionType[]>([]);
|
||||
const [options, setOptions] = React.useState<AutoCompleteProps['options']>([]);
|
||||
const handleSearch = (value: string) => {
|
||||
setOptions(() => {
|
||||
if (!value || value.includes('@')) {
|
||||
return [];
|
||||
}
|
||||
return ['gmail.com', '163.com', 'qq.com'].map<DefaultOptionType>((domain) => ({
|
||||
return ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
|
||||
label: `${value}@${domain}`,
|
||||
value: `${value}@${domain}`,
|
||||
}));
|
||||
|
@ -1,13 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Space } from 'antd';
|
||||
import type { AutoCompleteProps } from 'antd';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
const [anotherOptions, setAnotherOptions] = useState<{ value: string }[]>([]);
|
||||
const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
const [anotherOptions, setAnotherOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
|
||||
const getPanelValue = (searchText: string) =>
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Input } from 'antd';
|
||||
import type { SelectProps } from 'antd';
|
||||
import type { AutoCompleteProps } from 'antd';
|
||||
|
||||
const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
|
||||
@ -36,7 +36,7 @@ const searchResult = (query: string) =>
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<SelectProps<object>['options']>([]);
|
||||
const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
setOptions(value ? searchResult(value) : []);
|
||||
|
@ -1,12 +1,13 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AutoComplete, Flex } from 'antd';
|
||||
import type { AutoCompleteProps } from 'antd';
|
||||
|
||||
const mockVal = (str: string, repeat = 1) => ({
|
||||
value: str.repeat(repeat),
|
||||
});
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [options, setOptions] = useState<{ value: string }[]>([]);
|
||||
const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
|
||||
|
||||
const getPanelValue = (searchText: string) =>
|
||||
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
|
||||
|
Loading…
Reference in New Issue
Block a user