feat: add handlers sort

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

@@ -3,23 +3,38 @@ import { EventWidget } from '@sunmao-ui/editor-sdk';
 import { Box, IconButton, VStack } from '@chakra-ui/react';
 import { Static } from '@sinclair/typebox';
 import { JSONSchema7 } from 'json-schema';
-import { CloseIcon } from '@chakra-ui/icons';
+import { CloseIcon, ArrowUpIcon, ArrowDownIcon } from '@chakra-ui/icons';
 import { EventHandlerSchema } from '@sunmao-ui/runtime';
 import { ComponentSchema } from '@sunmao-ui/core';
 import { formWrapperCSS } from '../style';
 import { EditorServices } from '../../../types';
 
 type Props = {
+  index: number;
+  size: number;
   component: ComponentSchema;
   handler: Static<typeof EventHandlerSchema>;
   onChange: (handler: Static<typeof EventHandlerSchema>) => void;
   onRemove: () => void;
+  onUp: () => void;
+  onDown: () => void;
   services: EditorServices;
   schema?: JSONSchema7;
 };
 
 export const EventHandlerForm: React.FC<Props> = props => {
-  const { schema = EventHandlerSchema, handler, component, onChange, onRemove, services } = props;
+  const {
+    index,
+    size,
+    schema = EventHandlerSchema,
+    handler,
+    component,
+    services,
+    onChange,
+    onRemove,
+    onUp,
+    onDown,
+  } = props;
 
   return (
     <Box position="relative" width="100%">
@@ -34,17 +49,32 @@ export const EventHandlerForm: React.FC<Props> = props => {
           onChange={onChange}
         />
       </VStack>
+      <Box position="absolute" right="4" top="4">
+        <IconButton
+          aria-label="up event handler"
+          icon={<ArrowUpIcon />}
+          size="xs"
+          variant="ghost"
+          disabled={index === 0}
+          onClick={onUp}
+        />
+        <IconButton
+          aria-label="down event handler"
+          icon={<ArrowDownIcon />}
+          size="xs"
+          variant="ghost"
+          disabled={index === size - 1}
+          onClick={onDown}
+        />
         <IconButton
           aria-label="remove event handler"
           colorScheme="red"
           icon={<CloseIcon />}
           onClick={onRemove}
-        position="absolute"
-        right="4"
           size="xs"
-        top="4"
           variant="ghost"
         />
       </Box>
+    </Box>
   );
 };

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

@@ -103,12 +103,42 @@ export const EventTraitForm: React.FC<Props> = props => {
           })
         );
       };
+
+      const onSort = (isUp: boolean) => {
+        const index = component.traits.findIndex(t => t.type === 'core/v1/event');
+        const newHandlers = [...handlers];
+        const switchedIndex = isUp ? i - 1 : i + 1;
+
+        if (newHandlers[switchedIndex]) {
+          const temp = newHandlers[switchedIndex];
+          newHandlers[switchedIndex] = newHandlers[i];
+          newHandlers[i] = temp;
+
+          eventBus.send(
+            'operation',
+            genOperation(registry, 'modifyTraitProperty', {
+              componentId: component.id,
+              traitIndex: index,
+              properties: {
+                handlers: newHandlers,
+              },
+            })
+          );
+        }
+      };
+      const onUp = ()=> onSort(true);
+      const onDown = ()=> onSort(false);
+
       return (
         <EventHandlerForm
           key={i}
+          index={i}
+          size={handlers.length}
           component={component}
           services={services}
           handler={h}
+          onUp={onUp}
+          onDown={onDown}
           onChange={onChange}
           onRemove={onRemove}
         />

packages/editor/src/components/DataSource/ApiForm/Basic.tsx

@@ -19,7 +19,7 @@ import { EventHandlerForm } from '../../ComponentForm/EventTraitForm/EventHandle
 import {
   FetchTraitPropertiesSchema,
   EventCallBackHandlerSchema,
-  BaseEventSchema
+  BaseEventSchema,
 } from '@sunmao-ui/runtime';
 import { Static, Type } from '@sinclair/typebox';
 import { EditorServices } from '../../../types';
@@ -69,16 +69,37 @@ export const Basic: React.FC<Props> = props => {
       </HStack>
       <Accordion allowMultiple>
         {(formik.values[type] ?? []).map((handler, i) => {
-          const onChange = (handler: EventHandler) => {
+          const onChange = (bewHandler: EventHandler) => {
-            const newOnComplete = formik.values[type].map((onComplete, index)=> index === i ? handler : onComplete);
+            const newHandlers = formik.values[type].map((handler, index) =>
-            formik.setFieldValue(type, newOnComplete);
+              index === i ? bewHandler : handler
+            );
+            formik.setFieldValue(type, newHandlers);
             formik.submitForm();
           };
           const onRemove = () => {
-            const newOnComplete = formik.values[type].filter((_, index)=> i !== index);
+            const newHandlers = formik.values[type].filter((_, index) => i !== index);
-            formik.setFieldValue(type, newOnComplete);
+            formik.setFieldValue(type, newHandlers);
             formik.submitForm();
           };
+          const onSort = (isUp: boolean) => {
+            const newHandlers = [...formik.values[type]];
+            const switchedIndex = isUp ? i - 1 : i + 1;
+
+            if (newHandlers[switchedIndex]) {
+              const temp = newHandlers[switchedIndex];
+              newHandlers[switchedIndex] = newHandlers[i];
+              newHandlers[i] = temp;
+
+              formik.setFieldValue(type, newHandlers);
+              formik.submitForm();
+            }
+          };
+          const onUp = () => {
+            onSort(true);
+          };
+          const onDown = () => {
+            onSort(false);
+          };
 
           return (
             <AccordionItem key={i}>
@@ -93,11 +114,15 @@ export const Basic: React.FC<Props> = props => {
               <AccordionPanel pb={4} pt={2} padding={0}>
                 <Box pt={2}>
                   <EventHandlerForm
+                    index={i}
+                    size={(formik.values[type] ?? []).length}
                     component={api}
                     handler={{ type: '', ...handler }}
                     schema={Type.Object(BaseEventSchema)}
                     onChange={onChange}
                     onRemove={onRemove}
+                    onUp={onUp}
+                    onDown={onDown}
                     services={services}
                   />
                 </Box>