Files
FastGPT/projects/app/src/components/common/Textarea/MyTextarea/index.tsx
Archer 9b0706ed92 HTTP support jsonPath; System plugin support save file. (#2969)
* perf: system plugin auto save file

* feat: http support jsonPath

* fix: assistant response

* reset milvus version

* fix: textarea register

* fix: global variable

* delete tip

* doc
2024-10-23 00:40:54 +08:00

145 lines
3.6 KiB
TypeScript

import React, { useRef, useState } from 'react';
import {
Box,
Button,
ModalBody,
ModalFooter,
Textarea,
TextareaProps,
useDisclosure
} from '@chakra-ui/react';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import { useTranslation } from 'next-i18next';
import MyIcon from '@fastgpt/web/components/common/Icon';
import MyModal from '@fastgpt/web/components/common/MyModal';
import ResizeTextarea from 'react-textarea-autosize';
type Props = TextareaProps & {
title?: string;
iconSrc?: string;
autoHeight?: boolean;
};
const MyTextarea = React.forwardRef<HTMLTextAreaElement, Props>(function MyTextarea(props, ref) {
const ModalTextareaRef = useRef<HTMLTextAreaElement>(null);
const TextareaRef = useRef<HTMLTextAreaElement>(null);
React.useImperativeHandle(ref, () => TextareaRef.current!);
const { t } = useTranslation();
const {
title = t('common:core.app.edit.Prompt Editor'),
iconSrc = 'modal/edit',
autoHeight = false,
onChange,
maxH,
minH,
...childProps
} = props;
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Editor
textareaRef={TextareaRef}
autoHeight={autoHeight}
onChange={onChange}
maxH={maxH}
minH={minH}
showResize={!autoHeight}
{...childProps}
onOpenModal={onOpen}
/>
{isOpen && (
<MyModal iconSrc={iconSrc} title={title} isOpen onClose={onClose}>
<ModalBody>
<Editor
textareaRef={ModalTextareaRef}
onChange={onChange}
{...childProps}
maxH={500}
minH={500}
minW={['100%', '512px']}
showResize={false}
/>
</ModalBody>
<ModalFooter>
<Button
onClick={() => {
if (ModalTextareaRef.current && TextareaRef.current) {
TextareaRef.current.value = ModalTextareaRef.current.value;
}
onClose();
}}
>
{t('common:common.Confirm')}
</Button>
</ModalFooter>
</MyModal>
)}
</>
);
});
export default React.memo(MyTextarea);
const Editor = React.memo(function Editor({
onOpenModal,
textareaRef,
autoHeight = false,
onChange,
maxH,
minH,
showResize,
...props
}: Props & {
textareaRef: React.RefObject<HTMLTextAreaElement>;
onOpenModal?: () => void;
showResize?: boolean;
}) {
const { t } = useTranslation();
const [scrollHeight, setScrollHeight] = useState(0);
return (
<Box h={'100%'} w={'100%'} position={'relative'}>
<Textarea
ref={textareaRef}
maxW={'100%'}
as={autoHeight ? ResizeTextarea : undefined}
sx={
!showResize
? {
'::-webkit-resizer': {
display: 'none'
}
}
: {}
}
{...props}
maxH={`${maxH}px`}
minH={`${minH}px`}
onChange={(e) => {
setScrollHeight(e.target.scrollHeight);
onChange?.(e);
}}
/>
{onOpenModal && maxH && scrollHeight > Number(maxH) && (
<Box
zIndex={1}
position={'absolute'}
bottom={1}
right={2}
cursor={'pointer'}
onClick={onOpenModal}
>
<MyTooltip label={t('common:common.ui.textarea.Magnifying')}>
<MyIcon name={'common/fullScreenLight'} w={'14px'} color={'myGray.600'} />
</MyTooltip>
</Box>
)}
</Box>
);
});