129 lines
3.1 KiB
TypeScript
129 lines
3.1 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
import { Box, Flex, Text } from '@chakra-ui/react';
|
|
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
|
|
|
|
import { useFormidableContextElement } from '../formidable';
|
|
|
|
const DisplayLabel = ({
|
|
label,
|
|
isRequired,
|
|
}: {
|
|
label?: ReactNode;
|
|
isRequired: boolean;
|
|
}) => {
|
|
if (!label) {
|
|
return <></>;
|
|
}
|
|
return (
|
|
<Text marginRight="auto" fontWeight="bold">
|
|
{label}{' '}
|
|
{isRequired && (
|
|
<Text as="span" color="red.600">
|
|
*
|
|
</Text>
|
|
)}
|
|
</Text>
|
|
);
|
|
};
|
|
|
|
const DisplayHelp = ({ help }: { help?: ReactNode }) => {
|
|
if (!help) {
|
|
return <></>;
|
|
}
|
|
return (
|
|
<Flex direction="row">
|
|
<MdHelpOutline />
|
|
<Text alignContent="center">{help}</Text>
|
|
</Flex>
|
|
);
|
|
};
|
|
const DisplayError = ({ error }: { error?: ReactNode }) => {
|
|
if (!error) {
|
|
return <></>;
|
|
}
|
|
return (
|
|
<Flex direction="row" color="red.600">
|
|
<MdErrorOutline />
|
|
<Text alignContent="center">{error}</Text>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export type FormGroupProps = {
|
|
children: ReactNode;
|
|
name: string;
|
|
error?: ReactNode;
|
|
help?: ReactNode;
|
|
label?: ReactNode;
|
|
isRequired?: boolean;
|
|
disableSingleLine?: boolean;
|
|
};
|
|
|
|
export const FormGroup = ({
|
|
children,
|
|
name,
|
|
help,
|
|
label,
|
|
isRequired = false,
|
|
disableSingleLine,
|
|
}: FormGroupProps) => {
|
|
const { form, error, isModify, onRestore } =
|
|
useFormidableContextElement(name);
|
|
const enableModifyNotification =
|
|
form.configuration.enableModifyNotification ?? false;
|
|
const enableReset = form.configuration.enableReset ?? false;
|
|
const singleLine = disableSingleLine
|
|
? false
|
|
: form.configuration.singleLineForm;
|
|
return (
|
|
<Flex
|
|
borderLeftWidth="3px"
|
|
borderLeftColor={
|
|
error
|
|
? 'red.600'
|
|
: enableModifyNotification && isModify
|
|
? 'blue.600'
|
|
: '#00000000'
|
|
}
|
|
paddingLeft="7px"
|
|
paddingY="4px"
|
|
width="full"
|
|
direction="column"
|
|
>
|
|
{singleLine && (
|
|
<>
|
|
<Flex direction="row" width="full" gap="52px">
|
|
<Box width="10%">
|
|
<DisplayLabel label={label} isRequired={isRequired} />
|
|
{!!onRestore && isModify && enableReset && (
|
|
<MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
|
|
)}
|
|
</Box>
|
|
<Flex direction="column" width={'90%'} gap="5px">
|
|
{children}
|
|
<DisplayHelp help={help} />
|
|
<DisplayError error={error} />
|
|
</Flex>
|
|
</Flex>
|
|
</>
|
|
)}
|
|
{!singleLine && (
|
|
<>
|
|
<Flex direction="row" width="full" gap="52px">
|
|
<Box width="full">
|
|
<DisplayLabel label={label} isRequired={isRequired} />
|
|
{!!onRestore && isModify && enableReset && (
|
|
<MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
|
|
)}
|
|
</Box>
|
|
</Flex>
|
|
{children}
|
|
<DisplayHelp help={help} />
|
|
<DisplayError error={error} />
|
|
</>
|
|
)}
|
|
</Flex>
|
|
);
|
|
};
|