add remove event trait

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

@@ -1,15 +1,7 @@
 import React from 'react';
-import _, { startCase } from 'lodash';
+import _ from 'lodash';
 import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
-import {
-  FormControl,
-  FormLabel,
-  Input,
-  Box,
-  Divider,
-  VStack,
-  HStack,
-} from '@chakra-ui/react';
+import { FormControl, FormLabel, Input, VStack } from '@chakra-ui/react';
 import { TSchema } from '@sinclair/typebox';
 import { Application } from '@meta-ui/core';
 import { parseType, parseTypeBox } from '@meta-ui/runtime';

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

@@ -1,8 +1,18 @@
-import { FormControl, FormLabel, Input, Select, VStack } from '@chakra-ui/react';
-import { Static } from '@sinclair/typebox';
 import { useEffect, useState } from 'react';
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Input,
+  Select,
+  VStack,
+} from '@chakra-ui/react';
+import { Static } from '@sinclair/typebox';
+import { CloseIcon } from '@chakra-ui/icons';
 import { useFormik } from 'formik';
 import { EventHandlerSchema } from '@meta-ui/runtime';
+
 import { registry } from '../../../metaUI';
 import { useAppModel } from '../../../operations/useAppModel';
 import { formWrapperCSS } from '../style';
@@ -11,10 +21,11 @@ type Props = {
   eventTypes: string[];
   handler: Static<typeof EventHandlerSchema>;
   onChange: (hanlder: Static<typeof EventHandlerSchema>) => void;
+  onRemove: () => void;
 };
 
 export const EventHandlerForm: React.FC<Props> = props => {
-  const { handler, eventTypes, onChange } = props;
+  const { handler, eventTypes, onChange, onRemove } = props;
   const { app } = useAppModel();
   const [methods, setMethods] = useState<string[]>([]);
 
@@ -113,11 +124,24 @@ export const EventHandlerForm: React.FC<Props> = props => {
   );
 
   return (
-    <VStack css={formWrapperCSS}>
-      {typeField}
-      {targetField}
-      {methodField}
-      {parametersField}
-    </VStack>
+    <Box position="relative">
+      <VStack css={formWrapperCSS}>
+        {typeField}
+        {targetField}
+        {methodField}
+        {parametersField}
+      </VStack>
+      <IconButton
+        position="absolute"
+        right="4"
+        top="4"
+        aria-label="remove event handler"
+        variant="ghost"
+        colorScheme="red"
+        size="xs"
+        icon={<CloseIcon />}
+        onClick={onRemove}
+      />
+    </Box>
   );
 };

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

@@ -1,7 +1,8 @@
-import { AddIcon } from '@chakra-ui/icons';
-import { Box, HStack, IconButton, VStack } from '@chakra-ui/react';
-import { Static } from '@sinclair/typebox';
 import { useMemo } from 'react';
+import { AddIcon } from '@chakra-ui/icons';
+import { HStack, IconButton, VStack } from '@chakra-ui/react';
+import { Static } from '@sinclair/typebox';
+import produce from 'immer';
 import { ApplicationComponent } from '@meta-ui/core';
 import { EventHandlerSchema } from '@meta-ui/runtime';
 import { eventBus } from '../../../eventBus';
@@ -11,14 +12,12 @@ import {
   ModifyTraitPropertyOperation,
 } from '../../../operations/Operations';
 import { EventHandlerForm } from './EventHandlerForm';
-import produce from 'immer';
-import { formWrapperCSS } from '../style';
 
 type EventHandler = Static<typeof EventHandlerSchema>;
 
 type Props = {
   component: ApplicationComponent;
-  handlers: EventHandler[];
+  handlers?: EventHandler[];
 };
 
 export const EventTraitForm: React.FC<Props> = props => {
@@ -39,7 +38,7 @@ export const EventTraitForm: React.FC<Props> = props => {
       },
     };
 
-    if (handlers.length === 0) {
+    if (!handlers) {
       eventBus.send(
         'operation',
         new AddTraitOperation(component.id, 'core/v1/event', { handlers: [newHandler] })
@@ -55,9 +54,9 @@ export const EventTraitForm: React.FC<Props> = props => {
     }
   };
 
-  const handlerForms = handlers.map((h, i) => {
+  const handlerForms = (handlers || []).map((h, i) => {
     const onChange = (handler: EventHandler) => {
-      const newHanlders = produce(handlers, draft => {
+      const newHanlders = produce(handlers!, draft => {
         draft[i] = handler;
       });
       eventBus.send(
@@ -70,8 +69,29 @@ export const EventTraitForm: React.FC<Props> = props => {
         )
       );
     };
+
+    const onRemove = () => {
+      const newHanlders = produce(handlers!, draft => {
+        draft.splice(i, 1);
+      });
+      eventBus.send(
+        'operation',
+        new ModifyTraitPropertyOperation(
+          component.id,
+          'core/v1/event',
+          'handlers',
+          newHanlders
+        )
+      );
+    };
     return (
-      <EventHandlerForm key={i} handler={h} eventTypes={eventTypes} onChange={onChange} />
+      <EventHandlerForm
+        key={i}
+        handler={h}
+        eventTypes={eventTypes}
+        onChange={onChange}
+        onRemove={onRemove}
+      />
     );
   });
 
@@ -83,6 +103,7 @@ export const EventTraitForm: React.FC<Props> = props => {
           aria-label="add event"
           size="sm"
           variant="ghost"
+          colorScheme="blue"
           icon={<AddIcon />}
           onClick={onClickAddHandler}
         />

packages/editor/src/operations/Operations.ts

@@ -35,12 +35,10 @@ export class AddTraitOperation {
     public properties: any
   ) {}
 }
+
 export class ModifyComponentIdOperation {
   kind = 'modifyComponentId';
-  constructor(
-    public componentId: string,
-    public value: string
-  ) {}
+  constructor(public componentId: string, public value: string) {}
 }
 
 export class ModifyTraitPropertyOperation {