Allow to specify a list of options for parameters of an action/condition of an extension made in the editor (#2046)

This commit is contained in:
Arthur Pacaud
2020-11-15 13:37:48 +01:00
committed by GitHub
parent 6446bb20a0
commit 6ad69d4c74

View File

@@ -25,9 +25,11 @@ import {
} from '../../EventsFunctionsExtensionsLoader/MetadataDeclarationHelpers';
import { getParametersIndexOffset } from '../../EventsFunctionsExtensionsLoader';
import Add from '@material-ui/icons/Add';
import Delete from '@material-ui/icons/Delete';
import DismissableAlertMessage from '../../UI/DismissableAlertMessage';
import { ColumnStackLayout, ResponsiveLineStackLayout } from '../../UI/Layout';
import { getLastObjectParameterObjectType } from '../../EventsSheet/ParameterFields/ParameterMetadataTools';
import useForceUpdate from '../../Utils/UseForceUpdate';
const gd: libGDevelop = global.gd;
@@ -74,6 +76,67 @@ const validateParameterName = (i18n: I18nType, newName: string) => {
return true;
};
type StringSelectorEditorProps = {|
extraInfo: string,
setExtraInfo: string => void,
|};
const StringSelectorEditor = ({
extraInfo,
setExtraInfo,
}: StringSelectorEditorProps) => {
let array = [];
try {
if (extraInfo !== '') array = JSON.parse(extraInfo);
if (!Array.isArray(array)) array = [];
} catch (e) {
console.error('Cannot parse parameter extraInfo: ', e);
}
const updateExtraInfo = () => setExtraInfo(JSON.stringify(array));
return (
<ResponsiveLineStackLayout>
<Column justifyContent="flex-end" expand>
{array.map((item, index) => (
<Line key={index} justifyContent="flex-end" expand marginSize="5px">
<SemiControlledTextField
commitOnBlur
value={item}
onChange={text => {
array[index] = text;
updateExtraInfo();
}}
fullWidth
/>
<IconButton
tooltip={t`Delete option`}
onClick={() => {
array.splice(index, 1);
updateExtraInfo();
}}
>
<Delete />
</IconButton>
</Line>
))}
<Line justifyContent="flex-end" expand>
<RaisedButton
primary
onClick={() => {
array.push('New Option');
updateExtraInfo();
}}
label={<Trans>Add a new option</Trans>}
icon={<Add />}
/>
</Line>
</Column>
</ResponsiveLineStackLayout>
);
};
export default class EventsFunctionParametersEditor extends React.Component<
Props,
State
@@ -297,6 +360,10 @@ export default class EventsFunctionParametersEditor extends React.Component<
value="string"
primaryText={t`String (text)`}
/>
<SelectOption
value="stringWithSelector"
primaryText={t`String from a list of options (text)`}
/>
<SelectOption
value="key"
primaryText={t`Keyboard Key (text)`}
@@ -350,6 +417,15 @@ export default class EventsFunctionParametersEditor extends React.Component<
/>
)}
</ResponsiveLineStackLayout>
{parameter.getType() === 'stringWithSelector' && (
<StringSelectorEditor
extraInfo={parameter.getExtraInfo()}
setExtraInfo={newExtraInfo => {
parameter.setExtraInfo(newExtraInfo);
this.forceUpdate();
}}
/>
)}
{isParameterDescriptionAndTypeShown(i) && (
<SemiControlledTextField
commitOnBlur