From c591835bd91d5ae0c93471a246fa92d7c327464d Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Wed, 22 Jun 2022 19:07:34 -0700 Subject: Support custom attributes --- modern/src/settings/ComputedAttributePage.js | 61 +++++++++++++++++----------- 1 file changed, 37 insertions(+), 24 deletions(-) diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js index 67651fce..95681f2a 100644 --- a/modern/src/settings/ComputedAttributePage.js +++ b/modern/src/settings/ComputedAttributePage.js @@ -9,6 +9,8 @@ import { MenuItem, Select, TextField, + createFilterOptions, + Autocomplete, } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; @@ -33,7 +35,6 @@ const ComputedAttributePage = () => { const positionAttributes = usePositionAttributes(t); const [item, setItem] = useState(); - const [key, setKey] = useState(); const options = Object.entries(positionAttributes).map(([key, value]) => ({ key, @@ -41,16 +42,9 @@ const ComputedAttributePage = () => { type: value.type, })); - const handleChange = (event) => { - const newValue = event.target.value; - setKey(newValue); - const positionAttribute = positionAttributes[newValue]; - if (positionAttribute && positionAttribute.type) { - setItem({ ...item, attribute: newValue, type: positionAttribute.type }); - } else { - setItem({ ...item, attribute: newValue }); - } - }; + const filter = createFilterOptions({ + stringify: (option) => option.name, + }); const validate = () => item && item.description && item.expression; @@ -76,18 +70,37 @@ const ComputedAttributePage = () => { onChange={(event) => setItem({ ...item, description: event.target.value })} label={t('sharedDescription')} /> - - {t('sharedAttribute')} - - + { + const attribute = option ? option.key || option : null; + if (option && option.type) { + setItem({ ...item, attribute, type: option.type }); + } else { + setItem({ ...item, attribute }); + } + }} + 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.name || option} + renderOption={(props, option) => ( +
  • + {option.name} +
  • + )} + renderInput={(params) => ( + + )} + freeSolo + /> setItem({ ...item, expression: event.target.value })} @@ -95,7 +108,7 @@ const ComputedAttributePage = () => { multiline rows={4} /> - + {t('sharedType')}