import React from "react" ; import { FieldProps , Properties , Property } from "../../models" ; import { Box , FormControl , FormHelperText , Grid , InputLabel , MenuItem , Paper , Select } from "@mui/material" ; import { SelectChangeEvent } from "@mui/material/Select" ; import { formStyles } from "../styles" ; import { pick } from "../../core/util/objects" ; import { FieldDescription , LabelWithIcon } from "../components" ; import { useClearRestoreValue } from "../../hooks" ; import { buildPropertyField } from "../form_factory" ; import { isHidden } from "../../core/utils" ; category export function MapField < T extends object > ( { name , value , showError , disabled , property , setValue , tableMode , includeDescription , underlyingValueHasChanged , context } ) { const classes = formStyles ( ) ; const pickOnlySomeKeys = property . config ?. pickOnlySomeKeys || false ; if ( ! property . properties ) { throw Error ( `You need to specify a 'properties' prop (or specify a custom field) in your map property ${ name }` ) ; } let mapProperties ; if ( ! pickOnlySomeKeys ) { mapProperties = property . properties as Properties ; } else if ( value ) { mapProperties = pick ( property . properties as Properties , ... Object . keys ( value ) . filter ( key => key in property . properties ! ) ) ; } else { mapProperties = { } ; } useClearRestoreValue ( { property , value , setValue } ) ; function buildPickKeysSelect ( ) { const keys = Object . keys ( property . properties ! ) . filter ( ( key ) => ! value || ! ( key in value ) ) ; const handleAddProperty = ( event ) => { setValue ( { ... value , [ event . target . value as string ] : null } ) ; } ; if ( ! keys . length ) return < > < />; return < Box m = { 1 } > < FormControl fullWidth > < InputLabel > Add property < /InputLabel> < Select variant = { "standard" } value = { "" } disabled = { disabled } onChange = { handleAddProperty } > { keys . map ( ( key ) => ( < MenuItem key = { key } value = { key } > { ( property . properties as Properties ) [ key ] . title || key } < /MenuItem>))} < /Select> < /FormControl> < /Box>; } return ( < FormControl fullWidth error = { showError } > { ! tableMode && < FormHelperText filled required = { property . validation ?. required } > < LabelWithIcon property = { property } /> < /FormHelperText>} < Paper elevation = { 0 } variant = { "outlined" } className = { classes . paper } > < Grid container spacing = { 2 } > { Object . entries ( mapProperties ) . filter ( ( [ _ , property ] ) => ! isHidden ( property ) ) . map ( ( [ entryKey , childProperty ] , index ) => { return ( < Grid item sm = { 12 } xs = { 12 } key = { `map-${ name }-${ index }` } > { buildPropertyField < any , T > ( { name : `${ name } [ $ { entryKey } ] `,
                    disabled,
                    property: childProperty,
                    includeDescription,
                    underlyingValueHasChanged,
                    context,
                    tableMode,
                    partOfArray: false,
                    autoFocus: false,
                    shouldAlwaysRerender: false
                })}
                                    </Grid>);
        })}
                </Grid>

                {pickOnlySomeKeys && buildPickKeysSelect()}

            </Paper>

            {includeDescription &&
            <FieldDescription property={property}/>}

        </FormControl>);
}
