@@ -4,18 +4,16 @@ import { FormControl, Grid, IconButton, InputLabel, MenuItem, Select, Typography
44import AddIcon from "@mui/icons-material/Add" ;
55import DeleteIcon from '@mui/icons-material/Delete' ;
66import { useState } from "react" ;
7- import { BorderAllOutlined } from "@mui/icons-material" ;
87
9-
10- interface BaseTypeControlProps {
8+ interface MultiSelectionControlProps {
119 data : any ;
1210 handleChange ( path : string , value : any ) : void ;
1311 path : string ;
1412 schema : JsonSchema
1513}
1614
17- const BaseTypeControl = ( { data, handleChange, path, schema} : BaseTypeControlProps ) => {
18- const [ selectedBaseTypes , setSelectedBaseTypes ] = useState ( data ?? [ ] ) ;
15+ const MultiSelectionControl = ( { data, handleChange, path, schema} : MultiSelectionControlProps ) => {
16+ const [ items , setItems ] = useState ( data ?? [ ] ) ;
1917 const [ filled , setFilled ] = useState ( true ) ;
2018 const itemsSchema = schema ?. items as any ;
2119 const baseTypes = itemsSchema . oneOf ;
@@ -26,24 +24,25 @@ const BaseTypeControl = ({data, handleChange, path, schema}: BaseTypeControlProp
2624 </ Grid >
2725 < Grid item >
2826 < IconButton onClick = { ( ) => { if ( filled ) {
29- setSelectedBaseTypes ( [ ...selectedBaseTypes , { const :'' , title :'' } ] )
27+ setItems ( [ ...items , { const :'' , title :'' } ] )
3028 setFilled ( ! filled ) ;
3129 } } } > < AddIcon sx = { { color : 'var(--vscode-statusBarItem-remoteBackground)' } } /> </ IconButton >
3230 </ Grid >
3331 </ Grid >
34- { selectedBaseTypes . length === 0 ? < Typography > Keine BaseTypes vorhanden</ Typography > :
35- selectedBaseTypes . map ( ( value : any , index : number ) => (
36- < FormControl size = 'small' sx = { { width : '60%' } } >
32+ { items . length === 0
33+ ? < Typography > No Items</ Typography >
34+ : items . map ( ( value : any , index : number ) => (
35+ < FormControl size = 'small' sx = { { width : '80%' } } >
3736 < Grid container >
3837 < Grid item xs = { 11 } >
3938 < Select fullWidth = { true }
4039 value = { value }
4140 onChange = {
4241 ( e ) => {
43- const changedValue = [ ...selectedBaseTypes ] ;
42+ const changedValue = [ ...items ] ;
4443 changedValue [ index ] = e . target . value ;
4544 setFilled ( true ) ;
46- setSelectedBaseTypes ( changedValue ) ;
45+ setItems ( changedValue ) ;
4746 handleChange ( path , changedValue ) ;
4847 }
4948 }
@@ -56,14 +55,14 @@ const BaseTypeControl = ({data, handleChange, path, schema}: BaseTypeControlProp
5655 < Grid item xs = { 1 } >
5756 < IconButton onClick = {
5857 ( e ) => {
59- const changedValue = [ ...selectedBaseTypes ] ;
58+ const changedValue = [ ...items ] ;
6059 if ( changedValue [ index ] . const === '' ) {
6160 setFilled ( true ) ;
6261 }
6362 if ( index > - 1 ) {
6463 changedValue . splice ( index , 1 ) ;
6564 }
66- setSelectedBaseTypes ( changedValue ) ;
65+ setItems ( changedValue ) ;
6766 handleChange ( path , changedValue ) ;
6867 }
6968 } > < DeleteIcon sx = { { color : 'var(--vscode-statusBarItem-remoteBackground)' } } /> </ IconButton >
@@ -73,6 +72,6 @@ const BaseTypeControl = ({data, handleChange, path, schema}: BaseTypeControlProp
7372 ) ) }
7473 </ div > }
7574
76- export default withJsonFormsControlProps ( BaseTypeControl ) ;
75+ export default withJsonFormsControlProps ( MultiSelectionControl ) ;
7776
7877
0 commit comments