68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
import { Flex, Text } from '@chakra-ui/react';
|
|
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
|
|
|
|
export type FormGroupProps = {
|
|
error?: ReactNode;
|
|
help?: ReactNode;
|
|
label?: ReactNode;
|
|
isModify?: boolean;
|
|
onRestore?: () => void;
|
|
isRequired?: boolean;
|
|
children: ReactNode;
|
|
enableModifyNotification?: boolean;
|
|
enableReset?: boolean;
|
|
};
|
|
|
|
export const FormGroup = ({
|
|
children,
|
|
error,
|
|
help,
|
|
label,
|
|
isModify = false,
|
|
isRequired = false,
|
|
enableModifyNotification = false,
|
|
enableReset = false,
|
|
onRestore,
|
|
}: FormGroupProps) => (
|
|
<Flex
|
|
borderLeftWidth="3px"
|
|
borderLeftColor={error ? 'red' : enableModifyNotification && isModify ? 'blue' : '#00000000'}
|
|
paddingLeft="7px"
|
|
paddingY="4px"
|
|
width="full"
|
|
direction="column"
|
|
>
|
|
<Flex direction="row" width="full" gap="52px">
|
|
{!!label && (
|
|
<Text marginRight="auto" fontWeight="bold">
|
|
{label}{' '}
|
|
{isRequired && (
|
|
<Text as="span" color="red.600">
|
|
*
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
)}
|
|
{!!onRestore && isModify && enableReset && (
|
|
<MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
|
|
)}
|
|
</Flex>
|
|
{children}
|
|
{!!help && (
|
|
<Flex direction="row">
|
|
<MdHelpOutline />
|
|
<Text>{help}</Text>
|
|
</Flex>
|
|
)}
|
|
|
|
{!!error && (
|
|
<Flex direction="row">
|
|
<MdErrorOutline />
|
|
<Text>{error}</Text>
|
|
</Flex>
|
|
)}
|
|
</Flex>
|
|
);
|