97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
import { CSSProperties } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Grid2 from '@mui/material/Grid2';
|
|
import Paper from '@mui/material/Paper';
|
|
import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
|
|
import Stack from "@mui/material/Stack";
|
|
|
|
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
|
|
*
|
|
* @param props - The `ArrayFieldTemplateItemType` props for the component
|
|
*/
|
|
export default function ArrayFieldItemTemplate<
|
|
T = any,
|
|
S extends StrictRJSFSchema = RJSFSchema,
|
|
F extends FormContextType = any
|
|
>(props: ArrayFieldTemplateItemType<T, S, F>) {
|
|
const {
|
|
children,
|
|
disabled,
|
|
hasToolbar,
|
|
hasCopy,
|
|
hasMoveDown,
|
|
hasMoveUp,
|
|
hasRemove,
|
|
index,
|
|
onCopyIndexClick,
|
|
onDropIndexClick,
|
|
onReorderClick,
|
|
readonly,
|
|
uiSchema,
|
|
registry,
|
|
} = props;
|
|
const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
|
|
const btnStyle: CSSProperties = {
|
|
flex: 1,
|
|
paddingLeft: 6,
|
|
paddingRight: 6,
|
|
fontWeight: 'bold',
|
|
minWidth: 0,
|
|
};
|
|
|
|
const displayToolbar = hasToolbar && !props.readonly;
|
|
return (
|
|
<Grid2 container alignItems='center'>
|
|
<Grid2 style={{ overflow: 'auto' }} size={ displayToolbar ? 11 : 12}>
|
|
<Box mb={2}>
|
|
<Paper elevation={2}>
|
|
<Box p={2}>{children}</Box>
|
|
</Paper>
|
|
</Box>
|
|
</Grid2>
|
|
{displayToolbar && (
|
|
<Grid2 size={1}>
|
|
<Stack direction="column">
|
|
{(hasMoveUp || hasMoveDown) && (
|
|
<MoveUpButton
|
|
style={btnStyle}
|
|
disabled={disabled || readonly || !hasMoveUp}
|
|
onClick={onReorderClick(index, index - 1)}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
)}
|
|
{(hasMoveUp || hasMoveDown) && (
|
|
<MoveDownButton
|
|
style={btnStyle}
|
|
disabled={disabled || readonly || !hasMoveDown}
|
|
onClick={onReorderClick(index, index + 1)}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
)}
|
|
{hasCopy && (
|
|
<CopyButton
|
|
style={btnStyle}
|
|
disabled={disabled || readonly}
|
|
onClick={onCopyIndexClick(index)}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
)}
|
|
{hasRemove && (
|
|
<RemoveButton
|
|
style={btnStyle}
|
|
disabled={disabled || readonly}
|
|
onClick={onDropIndexClick(index)}
|
|
uiSchema={uiSchema}
|
|
registry={registry}
|
|
/>
|
|
)}
|
|
</Stack>
|
|
</Grid2>
|
|
)}
|
|
</Grid2>
|
|
);
|
|
}
|