78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
// src/components/EventCommentSection/CommentInput.js
|
|
/**
|
|
* 评论输入框组件
|
|
* 功能：输入评论内容、字数限制、发布按钮
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {
|
|
Box,
|
|
Textarea,
|
|
Button,
|
|
HStack,
|
|
Text,
|
|
useColorModeValue,
|
|
} from '@chakra-ui/react';
|
|
|
|
const CommentInput = ({
|
|
value,
|
|
onChange,
|
|
onSubmit,
|
|
isSubmitting,
|
|
maxLength = 500,
|
|
placeholder = '说点什么...',
|
|
}) => {
|
|
const bgColor = useColorModeValue('white', 'gray.800');
|
|
const borderColor = useColorModeValue('gray.200', 'gray.600');
|
|
const textColor = useColorModeValue('gray.600', 'gray.400');
|
|
const countColor = useColorModeValue('gray.500', 'gray.500');
|
|
|
|
const handleKeyDown = (e) => {
|
|
// Ctrl/Cmd + Enter 快捷键提交
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
|
onSubmit();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Textarea
|
|
value={value}
|
|
onChange={onChange}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={placeholder}
|
|
bg={bgColor}
|
|
borderColor={borderColor}
|
|
color={textColor}
|
|
rows={3}
|
|
maxLength={maxLength}
|
|
resize="vertical"
|
|
_hover={{
|
|
borderColor: 'blue.300',
|
|
}}
|
|
_focus={{
|
|
borderColor: 'blue.500',
|
|
boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)',
|
|
}}
|
|
/>
|
|
<HStack justify="space-between" mt={2}>
|
|
<Text fontSize="sm" color={countColor}>
|
|
{value.length}/{maxLength}
|
|
{value.length === 0 && ' · Ctrl+Enter 快速发布'}
|
|
</Text>
|
|
<Button
|
|
colorScheme="blue"
|
|
size="sm"
|
|
onClick={onSubmit}
|
|
isLoading={isSubmitting}
|
|
isDisabled={!value.trim() || isSubmitting}
|
|
>
|
|
发布
|
|
</Button>
|
|
</HStack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CommentInput;
|