60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
// src/views/Company/components/CompanyHeader/SearchBar.js
|
|
// 股票搜索栏组件
|
|
|
|
import React from 'react';
|
|
import {
|
|
HStack,
|
|
Input,
|
|
Button,
|
|
InputGroup,
|
|
InputLeftElement,
|
|
} from '@chakra-ui/react';
|
|
import { SearchIcon } from '@chakra-ui/icons';
|
|
|
|
/**
|
|
* 股票搜索栏组件
|
|
*
|
|
* @param {Object} props
|
|
* @param {string} props.inputCode - 输入框当前值
|
|
* @param {Function} props.onInputChange - 输入变化回调
|
|
* @param {Function} props.onSearch - 搜索按钮点击回调
|
|
* @param {Function} props.onKeyPress - 键盘事件回调
|
|
*/
|
|
const SearchBar = ({
|
|
inputCode,
|
|
onInputChange,
|
|
onSearch,
|
|
onKeyPress,
|
|
}) => {
|
|
return (
|
|
<HStack spacing={3}>
|
|
<InputGroup size="lg" maxW="300px">
|
|
<InputLeftElement pointerEvents="none">
|
|
<SearchIcon color="gray.400" />
|
|
</InputLeftElement>
|
|
<Input
|
|
placeholder="输入股票代码"
|
|
value={inputCode}
|
|
onChange={(e) => onInputChange(e.target.value)}
|
|
onKeyPress={onKeyPress}
|
|
borderRadius="md"
|
|
_focus={{
|
|
borderColor: 'blue.500',
|
|
boxShadow: '0 0 0 1px #3182ce',
|
|
}}
|
|
/>
|
|
</InputGroup>
|
|
<Button
|
|
colorScheme="blue"
|
|
size="lg"
|
|
onClick={onSearch}
|
|
leftIcon={<SearchIcon />}
|
|
>
|
|
查询
|
|
</Button>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default SearchBar;
|