You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/client/web/plugins/com.msgbyte.miaolang/src/SendMiaoModal.tsx

49 lines
1.2 KiB
TypeScript

import React from 'react';
import { useCallback } from 'react';
import { useState } from 'react';
import {
ModalWrapper,
useModalContext,
ChatInputActionContextProps,
} from '@capital/common';
import { Button, TextArea } from '@capital/component';
import { encode } from './miaotrans';
import { Translate } from './translate';
interface SendMiaoModalProps {
actions: ChatInputActionContextProps;
}
export const SendMiaoModal: React.FC<SendMiaoModalProps> = React.memo(
(props) => {
const [text, setText] = useState('');
const modalContext = useModalContext();
const handleSendMiao = useCallback(() => {
const miao = encode(text);
props.actions.sendMsg(miao);
modalContext?.closeModal();
}, [text, modalContext, props.actions]);
return (
<ModalWrapper title={Translate.title}>
<TextArea
placeholder={Translate.inputHuman}
value={text}
onChange={(e) => setText(e.target.value)}
/>
<Button
style={{ marginTop: 8 }}
type="primary"
block={true}
onClick={handleSendMiao}
>
{Translate.send}
</Button>
</ModalWrapper>
);
}
);
SendMiaoModal.displayName = 'SendMiaoModal';