can edit event wait and disabled

packages/editor/src/components/ComponentForm/ComponentForm.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import _ from 'lodash';
 import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { FormControl, FormLabel, Input, VStack } from '@chakra-ui/react';
-import { TSchema } from '@sinclair/typebox';
+import { Static, TSchema } from '@sinclair/typebox';
 import { Application } from '@meta-ui/core';
-import { parseType, parseTypeBox } from '@meta-ui/runtime';
+import { EventHandlerSchema, parseType, parseTypeBox } from '@meta-ui/runtime';
 import { eventBus } from '../../eventBus';
 import { registry } from '../../metaUI';
 import {
@@ -88,7 +88,7 @@ export const ComponentForm: React.FC<Props> = props => {
   });
 
   const eventHandlers = selectedComponent.traits.find(t => t.type === 'core/v1/event')
-    ?.properties.handlers;
+    ?.properties.handlers as Array<Static<typeof EventHandlerSchema>>;
 
   return (
     <VStack p={4} spacing="4" background="gray.50">

packages/editor/src/components/ComponentForm/EventTraitForm/EventHandlerForm.tsx

@@ -6,6 +6,7 @@ import {
   IconButton,
   Input,
   Select,
+  Switch,
   VStack,
 } from '@chakra-ui/react';
 import { Static } from '@sinclair/typebox';
@@ -138,6 +139,46 @@ export const EventHandlerForm: React.FC<Props> = props => {
     </FormControl>
   );
 
+  const waitTypeField = (
+    <FormControl>
+      <FormLabel>Wait Type</FormLabel>
+      <Select
+        name="wait.type"
+        onChange={formik.handleChange}
+        onBlur={() => formik.submitForm()}
+        value={formik.values.wait?.type}
+      >
+        <option value="delay">delay</option>
+        <option value="debounce">debounce</option>
+        <option value="throttle">throttle</option>
+      </Select>
+    </FormControl>
+  );
+
+  const waitTimeField = (
+    <FormControl>
+      <FormLabel>Wait Time</FormLabel>
+      <Input
+        name="wait.time"
+        onChange={formik.handleChange}
+        onBlur={() => formik.submitForm()}
+        value={formik.values.wait?.time}
+      />
+    </FormControl>
+  );
+
+  const disabledField = (
+    <FormControl>
+      <FormLabel>Disabled</FormLabel>
+      <Switch
+        name="disabled"
+        isChecked={formik.values.disabled}
+        onChange={formik.handleChange}
+        onBlur={() => formik.submitForm()}
+      />
+    </FormControl>
+  );
+
   return (
     <Box position="relative">
       <VStack css={formWrapperCSS}>
@@ -145,6 +186,9 @@ export const EventHandlerForm: React.FC<Props> = props => {
         {targetField}
         {methodField}
         {parametersField}
+        {waitTypeField}
+        {waitTimeField}
+        {disabledField}
       </VStack>
       <IconButton
         position="absolute"

packages/editor/src/components/ComponentForm/EventTraitForm/EventTraitForm.tsx

@@ -36,6 +36,11 @@ export const EventTraitForm: React.FC<Props> = props => {
         name: '',
         parameters: {},
       },
+      disabled: false,
+      wait: {
+        type: 'delay',
+        time: 0,
+      },
     };
 
     if (!handlers) {