import React, { useState } from 'react'; import { Button, Dialog, DialogActions, DialogContent, FormControl, InputLabel, MenuItem, Select, TextField, } from '@material-ui/core'; import { Autocomplete, createFilterOptions } from '@material-ui/lab'; import t from '../common/localization'; const AddAttributeDialog = ({ open, onResult, definitions }) => { const filter = createFilterOptions({ stringify: (option) => option.name, }); const options = Object.entries(definitions).map(([key, value]) => ({ key, name: value.name, type: value.type, })); const [key, setKey] = useState(); const [type, setType] = useState('string'); return ( { setKey(option && typeof option === 'object' ? option.key : option); if (option && option.type) { setType(option.type); } }} filterOptions={(options, params) => { const filtered = filter(options, params); if (params.inputValue) { filtered.push({ key: params.inputValue, name: params.inputValue, }); } return filtered; }} options={options} getOptionLabel={(option) => (option && typeof option === 'object' ? option.name : option)} renderOption={(option) => option.name} freeSolo renderInput={(params) => ( )} /> {t('sharedType')} ); }; export default AddAttributeDialog;