import React from "react" ; import { FormControl , FormHelperText , InputLabel , MenuItem , Select as MuiSelect } from "@mui/material" ; import { EnumType , EnumValues , FieldProps } from "../../models" ; import { FieldDescription } from "../../form" ; import { LabelWithIcon } from "../components" ; import { useClearRestoreValue } from "../../hooks" ; import { enumToObjectEntries , isEnumValueDisabled } from "../../core/util/enums" ; import { EnumValuesChip } from "../../preview/components/CustomChip" ; import { formStyles } from "../styles" ; type SelectProps < T extends EnumType > = FieldProps < T > ; category export function Select < T extends EnumType > ( { name , value , setValue , error , showError , disabled , autoFocus , touched , property , includeDescription , shouldAlwaysRerender } ) { const classes = formStyles ( ) ; const enumValues = property . config ?. enumValues as EnumValues ; useClearRestoreValue ( { property , value , setValue } ) ; return ( < FormControl variant = "filled" fullWidth required = { property . validation ?. required } error = { showError } disabled = { disabled } > < InputLabel id = { `${ name }-select-label` } classes = { { root : classes . inputLabel , shrink : classes . shrinkInputLabel } } > < LabelWithIcon property = { property } /> < /InputLabel> < MuiSelect classes = { { select : classes . input } } variant = { "filled" } labelId = { `${ name }-select-label` } autoFocus = { autoFocus } value = { value !== undefined ? value : "" } disabled = { disabled } onChange = { ( evt ) => { const eventValue = evt . target . value ; const newValue = eventValue ? ( property . dataType === "number" ? parseFloat ( eventValue ) : eventValue ) : null ; return setValue ( newValue ) ; } } renderValue = { ( enumKey ) => { return < EnumValuesChip enumKey = { enumKey } enumValues = { enumValues } small = { false } / > ; } } > { enumToObjectEntries ( enumValues ) . map ( ( [ enumKey , labelOrConfig ] ) => { return ( < MenuItem key = { `select_${ name }_${ enumKey }` } value = { enumKey } disabled = { isEnumValueDisabled ( labelOrConfig ) } > < EnumValuesChip enumKey = { enumKey } enumValues = { enumValues } small = { true } / > < /MenuItem>); } ) } < /MuiSelect> { includeDescription && < FieldDescription property = { property } />} { showError && < FormHelperText > { error } < /FormHelperText>} < /FormControl>); }