diff --git a/packages/core/src/mappers/renderer.ts b/packages/core/src/mappers/renderer.ts index f67730334..97e2d8aa3 100644 --- a/packages/core/src/mappers/renderer.ts +++ b/packages/core/src/mappers/renderer.ts @@ -791,10 +791,20 @@ export const mapStateToMasterListItemProps = ( state.jsonforms.i18n.translate, uischema ); + const subErrors = getSubErrorsAt(childPath, schema)(state); + const childErrors = getCombinedErrorMessage( + subErrors, + getErrorTranslator()(state), + getTranslator()(state), + undefined, + undefined, + undefined + ); return { ...ownProps, childLabel, + childErrors, }; }; @@ -823,6 +833,7 @@ export interface OwnPropsOfMasterListItem { export interface StatePropsOfMasterItem extends OwnPropsOfMasterListItem { childLabel: string; + childErrors: string; } /** diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx index 4814925ca..2b8c82fef 100644 --- a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx +++ b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx @@ -32,13 +32,18 @@ import { ListItemSecondaryAction, ListItemText, Tooltip, + SxProps, } from '@mui/material'; import DeleteIcon from '@mui/icons-material/Delete'; import React from 'react'; +import ValidationIcon from '../complex/ValidationIcon'; + +const avatarSx: SxProps = { display: 'inline-flex', marginRight: '.25rem' }; export const ListWithDetailMasterItem = ({ index, childLabel, + childErrors, selected, enabled, handleSelect, @@ -50,7 +55,10 @@ export const ListWithDetailMasterItem = ({ return ( - {index + 1} + + {index + 1} + + {enabled && !disableRemove && ( diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx index 22cbc2229..1b4aaee03 100644 --- a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx +++ b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx @@ -73,7 +73,8 @@ export const MaterialListWithDetailRenderer = ({ }: ArrayLayoutProps & { translations: ArrayTranslations }) => { const [selectedIndex, setSelectedIndex] = useState(undefined); const handleRemoveItem = useCallback( - (p: string, value: any) => () => { + (p: string, value: any) => (e?: React.MouseEvent) => { + e?.stopPropagation(); removeItems(p, [value])(); if (selectedIndex === value) { setSelectedIndex(undefined); @@ -81,7 +82,7 @@ export const MaterialListWithDetailRenderer = ({ setSelectedIndex(selectedIndex - 1); } }, - [removeItems, setSelectedIndex] + [removeItems, setSelectedIndex, selectedIndex] ); const handleListItemClick = useCallback( (index: number) => () => setSelectedIndex(index), diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx index fc02b28e6..59a1a3368 100644 --- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx +++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx @@ -30,6 +30,10 @@ import { ArrayTranslations, computeChildLabel, UpdateArrayContext, + subErrorsAt, + fetchErrorTranslator, + fetchTranslator, + getCombinedErrorMessage, } from '@jsonforms/core'; import { Accordion, @@ -39,13 +43,16 @@ import { Grid, IconButton, Tooltip, + SxProps, } from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ArrowUpward from '@mui/icons-material/ArrowUpward'; import ArrowDownward from '@mui/icons-material/ArrowDownward'; import DeleteIcon from '@mui/icons-material/Delete'; +import ValidationIcon from '../complex/ValidationIcon'; const iconStyle: any = { float: 'right' }; +const avatarSx: SxProps = { display: 'inline-flex', marginRight: '.25rem' }; interface OwnPropsOfExpandPanel { enabled: boolean; @@ -70,6 +77,7 @@ interface OwnPropsOfExpandPanel { interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel { childLabel: string; childPath: string; + childErrors: string; enableMoveUp: boolean; enableMoveDown: boolean; } @@ -100,6 +108,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => { enabled, childLabel, childPath, + childErrors, index, expanded, moveDown, @@ -146,11 +155,19 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => { onChange={handleExpansion(childPath)} > }> - + - + - {index + 1} + + {index + 1} + + {childErrors.length !== 0 && ( + + )} {childLabel} @@ -379,12 +396,26 @@ export const withContextToExpandPanelProps = ( uischema, ]); + const childErrors = useMemo( + () => + getCombinedErrorMessage( + subErrorsAt(childPath, schema)(ctx.core), + fetchErrorTranslator(ctx.i18n), + fetchTranslator(ctx.i18n), + undefined, + undefined, + undefined + ), + [ctx.core.errors, ctx.core.validationMode, ctx.i18n, schema, childPath] + ); + return ( );