127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
import * as React from 'react';
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { useFormContext, useWatch } from 'react-hook-form';
|
|
import Typography from '@mui/material/Typography';
|
|
import Stack from '@mui/material/Stack';
|
|
import Box from '@mui/material/Box';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import RemoveIcon from '@mui/icons-material/Remove';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
|
|
import { IFieldDynamic } from '@automatisch/types';
|
|
import InputCreator from 'components/InputCreator';
|
|
import { EditorContext } from 'contexts/Editor';
|
|
|
|
interface DynamicFieldProps {
|
|
onChange?: (value: string) => void;
|
|
onBlur?: (value: string) => void;
|
|
defaultValue?: Record<string, unknown>[];
|
|
name: string;
|
|
label: string;
|
|
type?: string;
|
|
required?: boolean;
|
|
readOnly?: boolean;
|
|
description?: string;
|
|
docUrl?: string;
|
|
clickToCopy?: boolean;
|
|
disabled?: boolean;
|
|
fields: IFieldDynamic["fields"];
|
|
shouldUnregister?: boolean;
|
|
}
|
|
|
|
function DynamicField(
|
|
props: DynamicFieldProps
|
|
): React.ReactElement {
|
|
const { label, description, fields, name, defaultValue } = props;
|
|
const { control, setValue, getValues } = useFormContext();
|
|
const fieldsValue = useWatch({ control, name }) as Record<string, unknown>[];
|
|
const editorContext = React.useContext(EditorContext);
|
|
|
|
const createEmptyItem = React.useCallback(() => {
|
|
return fields.reduce((previousValue, field) => {
|
|
return {
|
|
...previousValue,
|
|
[field.key]: '',
|
|
__id: uuidv4(),
|
|
}
|
|
}, {});
|
|
}, [fields]);
|
|
|
|
const addItem = React.useCallback(() => {
|
|
const values = getValues(name);
|
|
|
|
if (!values) {
|
|
setValue(name, [createEmptyItem()]);
|
|
} else {
|
|
setValue(name, values.concat(createEmptyItem()));
|
|
}
|
|
}, [getValues, createEmptyItem]);
|
|
|
|
const removeItem = React.useCallback((index) => {
|
|
if (fieldsValue.length === 1) return;
|
|
|
|
const newFieldsValue = fieldsValue.filter((fieldValue, fieldIndex) => fieldIndex !== index);
|
|
|
|
setValue(name, newFieldsValue);
|
|
}, [fieldsValue]);
|
|
|
|
React.useEffect(function addInitialGroupWhenEmpty() {
|
|
const fieldValues = getValues(name);
|
|
|
|
if (!fieldValues && defaultValue) {
|
|
setValue(name, defaultValue);
|
|
} else if (!fieldValues) {
|
|
setValue(name, [createEmptyItem()]);
|
|
}
|
|
}, [createEmptyItem, defaultValue]);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Typography variant="subtitle2">{label}</Typography>
|
|
|
|
{fieldsValue?.map((field, index) => (
|
|
<Stack direction="row" spacing={2} key={`fieldGroup-${field.__id}`}>
|
|
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 2 }} sx={{ display: 'flex', flex: 1 }}>
|
|
{fields.map((fieldSchema, fieldSchemaIndex) => (
|
|
<Box sx={{ display: 'flex', flex: '1 0 0px' }} key={`field-${field.__id}-${fieldSchemaIndex}`}>
|
|
<InputCreator
|
|
schema={fieldSchema}
|
|
namePrefix={`${name}.${index}`}
|
|
disabled={editorContext.readOnly}
|
|
shouldUnregister={false}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
|
|
<IconButton
|
|
size="small"
|
|
edge="start"
|
|
onClick={() => removeItem(index)}
|
|
sx={{ width: 61, height: 61 }}
|
|
>
|
|
<RemoveIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
))}
|
|
|
|
<Stack direction="row" spacing={2}>
|
|
<Stack spacing={{ xs: 2 }} sx={{ display: 'flex', flex: 1 }} />
|
|
|
|
<IconButton
|
|
size="small"
|
|
edge="start"
|
|
onClick={addItem}
|
|
sx={{ width: 61, height: 61 }}
|
|
>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
|
|
<Typography variant="caption">{description}</Typography>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
export default DynamicField;
|