102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { Box, Flex, useTheme, Grid, type GridProps, theme, Image, Radio } from '@chakra-ui/react';
|
|
import MyIcon from '@fastgpt/web/components/common/Icon';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { useToast } from '@fastgpt/web/hooks/useToast';
|
|
|
|
// @ts-ignore
|
|
interface Props extends GridProps {
|
|
list: {
|
|
icon?: string;
|
|
title: string | React.ReactNode;
|
|
desc?: string;
|
|
value: any;
|
|
forbidTip?: string; // If this value is exists, it will be prompted to disable when clicked
|
|
}[];
|
|
iconSize?: string;
|
|
align?: 'top' | 'center';
|
|
value: any;
|
|
hiddenCircle?: boolean;
|
|
|
|
onChange: (e: any) => void;
|
|
}
|
|
|
|
const MyRadio = ({
|
|
list,
|
|
value,
|
|
align = 'center',
|
|
iconSize = '18px',
|
|
hiddenCircle = false,
|
|
p,
|
|
onChange,
|
|
...props
|
|
}: Props) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
const { toast } = useToast();
|
|
|
|
return (
|
|
<Grid gridGap={[3, 5]} {...props}>
|
|
{list.map((item) => (
|
|
<Flex
|
|
key={item.value}
|
|
alignItems={align}
|
|
cursor={'pointer'}
|
|
userSelect={'none'}
|
|
py={3}
|
|
px={'4'}
|
|
p={p !== undefined ? `${p} !important` : undefined}
|
|
border={theme.borders.sm}
|
|
borderWidth={'1.5px'}
|
|
borderRadius={'md'}
|
|
position={'relative'}
|
|
{...(value === item.value
|
|
? {
|
|
borderColor: 'primary.400',
|
|
bg: 'primary.50'
|
|
}
|
|
: {
|
|
bg: 'myWhite.300',
|
|
_hover: {
|
|
borderColor: 'primary.400'
|
|
}
|
|
})}
|
|
onClick={() => {
|
|
if (item.forbidTip) {
|
|
toast({
|
|
status: 'warning',
|
|
title: item.forbidTip
|
|
});
|
|
} else {
|
|
onChange(item.value);
|
|
}
|
|
}}
|
|
>
|
|
{!!item.icon && (
|
|
<>
|
|
{item.icon.startsWith('/') ? (
|
|
<Image src={item.icon} mr={'14px'} w={iconSize} alt={''} />
|
|
) : (
|
|
<MyIcon mr={'14px'} name={item.icon as any} w={iconSize} />
|
|
)}
|
|
</>
|
|
)}
|
|
<Box pr={hiddenCircle ? 0 : 2} flex={'1 0 0'}>
|
|
<Box fontSize={'sm'} color={'myGray.800'}>
|
|
{typeof item.title === 'string' ? t(item.title) : item.title}
|
|
</Box>
|
|
{!!item.desc && (
|
|
<Box fontSize={'mini'} color={'myGray.500'} lineHeight={1.2}>
|
|
{t(item.desc)}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
<Radio isChecked={value === item.value} />
|
|
</Flex>
|
|
))}
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default MyRadio;
|