mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

demo(AutoComplete): opt options type by AutoCompleteProps (#49768)

Browse Source 
* demo(AutoComplete): opt options type by AutoCompleteProps

* lint fix
This commit is contained in:
thinkasany 2024-07-08 16:01:02 +08:00 committed by GitHub
parent eef48c87c2
commit 05a0179616
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/auto-complete/demo/allowClear.tsx
View File

@ -1,13 +1,14 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { CloseSquareFilled } from '@ant-design/icons'; import { CloseSquareFilled } from '@ant-design/icons';
import { AutoComplete } from 'antd'; import { AutoComplete } from 'antd';
import type { AutoCompleteProps } from 'antd';
const mockVal = (str: string, repeat = 1) => ({ const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat), value: str.repeat(repeat),
}); });
const App: React.FC = () => { const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]); const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
const getPanelValue = (searchText: string) => const getPanelValue = (searchText: string) =>
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];

5
components/auto-complete/demo/basic.tsx
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { AutoComplete } from 'antd'; import { AutoComplete } from 'antd';
import type { AutoCompleteProps } from 'antd';
const mockVal = (str: string, repeat = 1) => ({ const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat), value: str.repeat(repeat),
@ -7,8 +8,8 @@ const mockVal = (str: string, repeat = 1) => ({
const App: React.FC = () => { const App: React.FC = () => {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [options, setOptions] = useState<{ value: string }[]>([]); const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
const [anotherOptions, setAnotherOptions] = useState<{ value: string }[]>([]); const [anotherOptions, setAnotherOptions] = useState<AutoCompleteProps['options']>([]);
const getPanelValue = (searchText: string) => const getPanelValue = (searchText: string) =>
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];

3
components/auto-complete/demo/custom.tsx
View File

@ -1,10 +1,11 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { AutoComplete, Input } from 'antd'; import { AutoComplete, Input } from 'antd';
import type { AutoCompleteProps } from 'antd';
const { TextArea } = Input; const { TextArea } = Input;
const App: React.FC = () => { const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]); const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
const handleSearch = (value: string) => { const handleSearch = (value: string) => {
setOptions( setOptions(

6
components/auto-complete/demo/options.tsx
View File

@ -1,15 +1,15 @@
import React from 'react'; import React from 'react';
import { AutoComplete } from 'antd'; import { AutoComplete } from 'antd';
import type { DefaultOptionType } from 'antd/es/select'; import type { AutoCompleteProps } from 'antd';
const App: React.FC = () => { const App: React.FC = () => {
const [options, setOptions] = React.useState<DefaultOptionType[]>([]); const [options, setOptions] = React.useState<AutoCompleteProps['options']>([]);
const handleSearch = (value: string) => { const handleSearch = (value: string) => {
setOptions(() => { setOptions(() => {
if (!value || value.includes('@')) { if (!value || value.includes('@')) {
return []; return [];
} }
return ['gmail.com', '163.com', 'qq.com'].map<DefaultOptionType>((domain) => ({ return ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
label: `${value}@${domain}`, label: `${value}@${domain}`,
value: `${value}@${domain}`, value: `${value}@${domain}`,
})); }));

5
components/auto-complete/demo/status.tsx
View File

@ -1,13 +1,14 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { AutoComplete, Space } from 'antd'; import { AutoComplete, Space } from 'antd';
import type { AutoCompleteProps } from 'antd';
const mockVal = (str: string, repeat = 1) => ({ const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat), value: str.repeat(repeat),
}); });
const App: React.FC = () => { const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]); const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
const [anotherOptions, setAnotherOptions] = useState<{ value: string }[]>([]); const [anotherOptions, setAnotherOptions] = useState<AutoCompleteProps['options']>([]);
const getPanelValue = (searchText: string) => const getPanelValue = (searchText: string) =>
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];

4
components/auto-complete/demo/uncertain-category.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { AutoComplete, Input } from 'antd'; 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; 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 App: React.FC = () => {
const [options, setOptions] = useState<SelectProps<object>['options']>([]); const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
const handleSearch = (value: string) => { const handleSearch = (value: string) => {
setOptions(value ? searchResult(value) : []); setOptions(value ? searchResult(value) : []);

3
components/auto-complete/demo/variant.tsx
View File

@ -1,12 +1,13 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { AutoComplete, Flex } from 'antd'; import { AutoComplete, Flex } from 'antd';
import type { AutoCompleteProps } from 'antd';
const mockVal = (str: string, repeat = 1) => ({ const mockVal = (str: string, repeat = 1) => ({
value: str.repeat(repeat), value: str.repeat(repeat),
}); });
const App: React.FC = () => { const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string }[]>([]); const [options, setOptions] = useState<AutoCompleteProps['options']>([]);
const getPanelValue = (searchText: string) => const getPanelValue = (searchText: string) =>
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];