import { handlePrevent } from "../utils/a11y"; import BaseFoundation, { DefaultAdapter } from "../base/foundation"; import { strings } from './constants'; const { SEND_HOT_KEY } = strings; export interface InputBoxAdapter
, S = Record {
notifyInputChange: (props: { inputValue: string; attachment: any[]}) => void;
setInputValue: (value: string) => void;
setAttachment: (attachment: any[]) => void;
notifySend: (content: string, attachment: any[]) => void
}
export default class InputBoxFoundation , S = Record ) {
super({ ...adapter });
}
onInputAreaChange = (value: string) => {
const attachment = this.getState('attachment');
this._adapter.setInputValue(value);
this._adapter.notifyInputChange({ inputValue: value, attachment });
}
onAttachmentAdd = (props: any) => {
const { fileList } = props;
const { uploadProps } = this.getProps();
const { onChange } = uploadProps;
if (onChange) {
onChange(props);
}
const { content } = this.getStates();
let newFileList = [...fileList];
this._adapter.setAttachment(newFileList);
this._adapter.notifyInputChange({
inputValue: content,
attachment: newFileList
});
}
onAttachmentDelete = (props: any) => {
const { content, attachment } = this.getStates();
const newAttachMent = attachment.filter(item => item.uid !== props.uid);
this._adapter.setAttachment(newAttachMent);
this._adapter.notifyInputChange({
inputValue: content,
attachment: newAttachMent
});
}
onSend = (e: any) => {
if (this.getDisableSend()) {
return;
}
const { content, attachment } = this.getStates();
this._adapter.setInputValue('');
this._adapter.setAttachment([]);
this._adapter.notifySend(content, attachment);
}
getDisableSend = () => {
const { content, attachment } = this.getStates();
const { disableSend: disableSendInProps } = this.getProps();
/** 不能发送的条件:(满足任1)
* 1. props 中禁止发送;2. 没有文本输入,且没有上传文件; 3.上传文件中有状态不为 success 的
* Conditions under which content cannot be sent: (any one of the following conditions must be met)
* 1. Sending is disabled in props; 2. No text input and no file upload; 3. There are files uploaded that do not have a success status.
*/
const disabledSend = disableSendInProps ||
(content.length === 0 && attachment.length === 0) ||
attachment.find(item => item.status !== strings.FILE_STATUS.SUCCESS)
;
return disabledSend;
}
onEnterPress = (e: any) => {
const { sendHotKey } = this.getProps();
if (sendHotKey === SEND_HOT_KEY.SHIFT_PLUS_ENTER && e.shiftKey === false) {
return ;
} else if (sendHotKey === SEND_HOT_KEY.ENTER && e.shiftKey === true) {
return ;
}
handlePrevent(e);
this.onSend(e);
};
onPaste = (e: any) => {
const items = e.clipboardData?.items;
const { manualUpload, pasteUpload } = this.getProps();
let files = [];
if (pasteUpload && items) {
for (const it of items) {
const file = it.getAsFile();
file && files.push(it.getAsFile());
}
if (files.length) {
// 文件上传,则需要阻止默认粘贴行为
// File upload, you need to prevent the default paste behavior
manualUpload(files);
e.preventDefault();
e.stopPropagation();
}
}
}
}