@rjsf/mui
Version:
Material UI 7 theme, fields and widgets for react-jsonschema-form
25 lines • 1.96 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import { getUiOptions, getTemplate, } from '@rjsf/utils';
import { computeSxProps, getMuiProps } from '../util.js';
/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
*
* @param props - The `ArrayFieldItemTemplateProps` props for the component
*/
export default function ArrayFieldItemTemplate(props) {
const { children, buttonsProps, hasDescription, hasToolbar, uiSchema, registry } = props;
const uiOptions = getUiOptions(uiSchema);
const ArrayFieldItemButtonsTemplate = getTemplate('ArrayFieldItemButtonsTemplate', registry, uiOptions);
const btnStyle = {
flex: 1,
paddingLeft: 6,
paddingRight: 6,
fontWeight: 'bold',
minWidth: 0,
};
const { rjsfSlotProps: { arrayItemGridContainer, arrayItemGridItem, arrayItemInnerBox, arrayItemOuterBox, arrayItemPaper, arrayItemToolbarGrid, } = {}, } = getMuiProps(uiOptions);
return (_jsxs(Grid, { container: true, ...arrayItemGridContainer, sx: computeSxProps({ alignItems: 'center' }, arrayItemGridContainer), children: [_jsx(Grid, { size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 }, ...arrayItemGridItem, sx: computeSxProps({ overflow: 'auto' }, arrayItemGridItem), children: _jsx(Box, { ...arrayItemOuterBox, sx: computeSxProps({ mb: 2 }, arrayItemOuterBox), children: _jsx(Paper, { elevation: 2, ...arrayItemPaper, children: _jsx(Box, { ...arrayItemInnerBox, sx: computeSxProps({ p: 2 }, arrayItemInnerBox), children: children }) }) }) }), hasToolbar && (_jsx(Grid, { ...arrayItemToolbarGrid, sx: computeSxProps({ mt: hasDescription ? -5 : -1.5 }, arrayItemToolbarGrid), children: _jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) }))] }));
}
//# sourceMappingURL=ArrayFieldItemTemplate.js.map