ant-design/components/auto-complete/demo/variant.tsx
thinkasany 05a0179616
demo(AutoComplete): opt options type by AutoCompleteProps (#49768)
* demo(AutoComplete): opt options type by AutoCompleteProps

* lint fix
2024-07-08 16:01:02 +08:00

45 lines
1.2 KiB
TypeScript

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<AutoCompleteProps['options']>([]);
const getPanelValue = (searchText: string) =>
!searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
return (
<Flex vertical gap={12}>
<AutoComplete
options={options}
style={{ width: 200 }}
placeholder="Outlined"
onSearch={(text) => setOptions(getPanelValue(text))}
onSelect={globalThis.console.log}
/>
<AutoComplete
options={options}
style={{ width: 200 }}
placeholder="Filled"
onSearch={(text) => setOptions(getPanelValue(text))}
onSelect={globalThis.console.log}
variant="filled"
/>
<AutoComplete
options={options}
style={{ width: 200 }}
placeholder="Borderless"
onSearch={(text) => setOptions(getPanelValue(text))}
onSelect={globalThis.console.log}
variant="borderless"
/>
</Flex>
);
};
export default App;