edit parameters as JSON string

This commit is contained in:
Bowen Tan 2021-10-20 16:40:54 +08:00
parent a259fbd729
commit e63971fca7
2 changed files with 20 additions and 6 deletions

View File

@ -87,9 +87,8 @@ export const ComponentForm: React.FC<Props> = props => {
}); });
}); });
const eventHandlers = const eventHandlers = selectedComponent.traits.find(t => t.type === 'core/v1/event')
selectedComponent.traits.find(t => t.type === 'core/v1/event')?.properties.handlers || ?.properties.handlers;
([] as any);
return ( return (
<VStack p={4} spacing="4" background="gray.50"> <VStack p={4} spacing="4" background="gray.50">

View File

@ -12,10 +12,10 @@ import { Static } from '@sinclair/typebox';
import { CloseIcon } from '@chakra-ui/icons'; import { CloseIcon } from '@chakra-ui/icons';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import { EventHandlerSchema } from '@meta-ui/runtime'; import { EventHandlerSchema } from '@meta-ui/runtime';
import { registry } from '../../../metaUI'; import { registry } from '../../../metaUI';
import { useAppModel } from '../../../operations/useAppModel'; import { useAppModel } from '../../../operations/useAppModel';
import { formWrapperCSS } from '../style'; import { formWrapperCSS } from '../style';
import produce from 'immer';
type Props = { type Props = {
eventTypes: string[]; eventTypes: string[];
@ -47,10 +47,25 @@ export const EventHandlerForm: React.FC<Props> = props => {
updateMethods(e.target.value); updateMethods(e.target.value);
}; };
// because parameters is object, so it has to be converted to string to edit
const initialValues = produce(handler, draft => {
draft.method.parameters = JSON.stringify(draft.method.parameters);
});
const formik = useFormik({ const formik = useFormik({
initialValues: handler, initialValues,
onSubmit: values => { onSubmit: values => {
onChange(values); try {
const newHandler = produce(values, draft => {
draft.method.parameters = JSON.parse(draft.method.parameters);
});
onChange(newHandler);
} catch (e) {
console.error(
`Error happened when parsing method parameters. Cannot parse ${values.method.parameters} as JSON.`
);
return;
}
}, },
}); });