|
|
|
|
|
|
|
|
useEffect, |
|
|
useEffect, |
|
|
useRef, |
|
|
useRef, |
|
|
useState, |
|
|
useState, |
|
|
|
|
|
KeyboardEventHandler, |
|
|
} from 'react'; |
|
|
} from 'react'; |
|
|
import FileIcon from '../file-icon'; |
|
|
import FileIcon from '../file-icon'; |
|
|
import styles from './index.less'; |
|
|
import styles from './index.less'; |
|
|
|
|
|
|
|
|
setFileList([]); |
|
|
setFileList([]); |
|
|
}, [fileList, onPressEnter, isUploadingFile]); |
|
|
}, [fileList, onPressEnter, isUploadingFile]); |
|
|
|
|
|
|
|
|
|
|
|
const handleInputKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => { |
|
|
|
|
|
if (e.key === 'Enter' && !e.nativeEvent.shiftKey) { |
|
|
|
|
|
e.preventDefault(); |
|
|
|
|
|
handlePressEnter(); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const handleRemove = useCallback( |
|
|
const handleRemove = useCallback( |
|
|
async (file: UploadFile) => { |
|
|
async (file: UploadFile) => { |
|
|
const ids = get(file, 'response.data', []); |
|
|
const ids = get(file, 'response.data', []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<Flex gap={20} vertical className={styles.messageInputWrapper}> |
|
|
<Flex gap={20} vertical className={styles.messageInputWrapper}> |
|
|
<Input |
|
|
|
|
|
size="large" |
|
|
|
|
|
placeholder={t('sendPlaceholder')} |
|
|
|
|
|
value={value} |
|
|
|
|
|
disabled={disabled} |
|
|
|
|
|
className={classNames({ [styles.inputWrapper]: fileList.length === 0 })} |
|
|
|
|
|
suffix={ |
|
|
|
|
|
<Space> |
|
|
|
|
|
{showUploadIcon && ( |
|
|
|
|
|
<Upload |
|
|
|
|
|
onPreview={handlePreview} |
|
|
|
|
|
onChange={handleChange} |
|
|
|
|
|
multiple={false} |
|
|
|
|
|
onRemove={handleRemove} |
|
|
|
|
|
showUploadList={false} |
|
|
|
|
|
beforeUpload={() => { |
|
|
|
|
|
return false; |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<Button |
|
|
|
|
|
type={'text'} |
|
|
|
|
|
disabled={disabled} |
|
|
|
|
|
icon={<Paperclip></Paperclip>} |
|
|
|
|
|
></Button> |
|
|
|
|
|
</Upload> |
|
|
|
|
|
)} |
|
|
|
|
|
<Button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
onClick={handlePressEnter} |
|
|
|
|
|
loading={sendLoading} |
|
|
|
|
|
disabled={sendDisabled || isUploadingFile} |
|
|
|
|
|
|
|
|
<Flex align="center" gap={8}> |
|
|
|
|
|
<Input.TextArea |
|
|
|
|
|
size="large" |
|
|
|
|
|
placeholder={t('sendPlaceholder')} |
|
|
|
|
|
value={value} |
|
|
|
|
|
disabled={disabled} |
|
|
|
|
|
className={classNames({ [styles.inputWrapper]: fileList.length === 0 })} |
|
|
|
|
|
onKeyDown={handleInputKeyDown} |
|
|
|
|
|
onChange={onInputChange} |
|
|
|
|
|
autoSize={{ minRows: 1, maxRows: 6 }} |
|
|
|
|
|
/> |
|
|
|
|
|
<Space> |
|
|
|
|
|
{showUploadIcon && ( |
|
|
|
|
|
<Upload |
|
|
|
|
|
onPreview={handlePreview} |
|
|
|
|
|
onChange={handleChange} |
|
|
|
|
|
multiple={false} |
|
|
|
|
|
onRemove={handleRemove} |
|
|
|
|
|
showUploadList={false} |
|
|
|
|
|
beforeUpload={() => { |
|
|
|
|
|
return false; |
|
|
|
|
|
}} |
|
|
> |
|
|
> |
|
|
{t('send')} |
|
|
|
|
|
</Button> |
|
|
|
|
|
</Space> |
|
|
|
|
|
} |
|
|
|
|
|
onPressEnter={handlePressEnter} |
|
|
|
|
|
onChange={onInputChange} |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
type={'text'} |
|
|
|
|
|
disabled={disabled} |
|
|
|
|
|
icon={<Paperclip />} |
|
|
|
|
|
></Button> |
|
|
|
|
|
</Upload> |
|
|
|
|
|
)} |
|
|
|
|
|
<Button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
onClick={handlePressEnter} |
|
|
|
|
|
loading={sendLoading} |
|
|
|
|
|
disabled={sendDisabled || isUploadingFile} |
|
|
|
|
|
> |
|
|
|
|
|
{t('send')} |
|
|
|
|
|
</Button> |
|
|
|
|
|
</Space> |
|
|
|
|
|
</Flex> |
|
|
|
|
|
|
|
|
{fileList.length > 0 && ( |
|
|
{fileList.length > 0 && ( |
|
|
<List |
|
|
<List |