mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-23 21:13:50 +00:00
V4.7-alpha (#985)
Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>
This commit is contained in:
129
packages/web/hooks/useEditTextarea.tsx
Normal file
129
packages/web/hooks/useEditTextarea.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import React, { useCallback, useRef } from 'react';
|
||||
import {
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
Input,
|
||||
useDisclosure,
|
||||
Button,
|
||||
Box,
|
||||
Textarea
|
||||
} from '@chakra-ui/react';
|
||||
import MyModal from '../components/common/CustomModal';
|
||||
import { useToast } from './useToast';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
export const useEditTextarea = ({
|
||||
title,
|
||||
tip,
|
||||
placeholder = '',
|
||||
canEmpty = true,
|
||||
valueRule
|
||||
}: {
|
||||
title: string;
|
||||
tip?: string;
|
||||
placeholder?: string;
|
||||
canEmpty?: boolean;
|
||||
valueRule?: (val: string) => string | void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const onSuccessCb = useRef<(content: string) => void | Promise<void>>();
|
||||
const onErrorCb = useRef<(err: any) => void>();
|
||||
const { toast } = useToast();
|
||||
const defaultValue = useRef('');
|
||||
|
||||
const onOpenModal = useCallback(
|
||||
({
|
||||
defaultVal,
|
||||
onSuccess,
|
||||
onError
|
||||
}: {
|
||||
defaultVal: string;
|
||||
onSuccess: (content: string) => any;
|
||||
onError?: (err: any) => void;
|
||||
}) => {
|
||||
onOpen();
|
||||
onSuccessCb.current = onSuccess;
|
||||
onErrorCb.current = onError;
|
||||
defaultValue.current = defaultVal;
|
||||
},
|
||||
[onOpen]
|
||||
);
|
||||
|
||||
const onclickConfirm = useCallback(async () => {
|
||||
if (!textareaRef.current || !onSuccessCb.current) return;
|
||||
const val = textareaRef.current.value;
|
||||
|
||||
if (!canEmpty && !val) {
|
||||
textareaRef.current.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (valueRule) {
|
||||
const result = valueRule(val);
|
||||
if (result) {
|
||||
return toast({
|
||||
status: 'warning',
|
||||
title: result
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await onSuccessCb.current(val);
|
||||
|
||||
onClose();
|
||||
} catch (err) {
|
||||
onErrorCb.current?.(err);
|
||||
}
|
||||
}, [canEmpty, onClose]);
|
||||
|
||||
// eslint-disable-next-line react/display-name
|
||||
const EditModal = useCallback(
|
||||
({
|
||||
maxLength = 30,
|
||||
iconSrc = 'modal/edit',
|
||||
closeBtnText = t('common.Close')
|
||||
}: {
|
||||
maxLength?: number;
|
||||
iconSrc?: string;
|
||||
closeBtnText?: string;
|
||||
}) => (
|
||||
<MyModal isOpen={isOpen} onClose={onClose} iconSrc={iconSrc} title={title} maxW={'500px'}>
|
||||
<ModalBody>
|
||||
{!!tip && (
|
||||
<Box mb={2} color={'myGray.500'} fontSize={'sm'}>
|
||||
{tip}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Textarea
|
||||
ref={textareaRef}
|
||||
defaultValue={defaultValue.current}
|
||||
placeholder={placeholder}
|
||||
autoFocus
|
||||
maxLength={maxLength}
|
||||
rows={10}
|
||||
bg={'myGray.50'}
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{!!closeBtnText && (
|
||||
<Button mr={3} variant={'whiteBase'} onClick={onClose}>
|
||||
{closeBtnText}
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onclickConfirm}>{t('common.Confirm')}</Button>
|
||||
</ModalFooter>
|
||||
</MyModal>
|
||||
),
|
||||
[isOpen, onClose, onclickConfirm, placeholder, tip, title]
|
||||
);
|
||||
|
||||
return {
|
||||
onOpenModal,
|
||||
EditModal
|
||||
};
|
||||
};
|
@@ -5,6 +5,7 @@ import { useMutation } from '@tanstack/react-query';
|
||||
|
||||
import { throttle } from 'lodash';
|
||||
import { useToast } from './useToast';
|
||||
import { getErrText } from '@fastgpt/global/common/error/utils';
|
||||
|
||||
const thresholdVal = 100;
|
||||
|
||||
@@ -62,7 +63,7 @@ export function usePagination<T = any>({
|
||||
onChange && onChange(num);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: error?.message || '获取数据异常',
|
||||
title: getErrText(error, '获取数据异常'),
|
||||
status: 'error'
|
||||
});
|
||||
console.log(error);
|
||||
|
@@ -1,13 +1,21 @@
|
||||
import { useToast as uToast, UseToastOptions } from '@chakra-ui/react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
|
||||
export const useToast = (props?: UseToastOptions) => {
|
||||
const toast = uToast({
|
||||
position: 'top',
|
||||
duration: 2000,
|
||||
...(props && props)
|
||||
...props
|
||||
});
|
||||
|
||||
const myToast = useCallback(
|
||||
(options?: UseToastOptions) => {
|
||||
toast(options);
|
||||
},
|
||||
[props]
|
||||
);
|
||||
|
||||
return {
|
||||
toast
|
||||
toast: myToast
|
||||
};
|
||||
};
|
||||
|
Reference in New Issue
Block a user