mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-21 03:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add handlers sort

Browse Source
This commit is contained in:
MrWindlike 2022-04-07 16:40:41 +08:00
parent 7683ea8b9a
commit 04efd82f1d
3 changed files with 104 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/editor/src/components/ComponentForm/EventTraitForm/EventHandlerForm.tsx
View File

@ -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>
<IconButton
aria-label="remove event handler"
colorScheme="red"
icon={<CloseIcon />}
onClick={onRemove}
position="absolute"
right="4"
size="xs"
top="4"
variant="ghost"
/>
<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}
size="xs"
variant="ghost"
/>
</Box>
</Box>
);
};

30
packages/editor/src/components/ComponentForm/EventTraitForm/EventTraitForm.tsx
View File

@ -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}
/>

37
packages/editor/src/components/DataSource/ApiForm/Basic.tsx
View File

@ -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 newOnComplete = formik.values[type].map((onComplete, index)=> index === i ? handler : onComplete);
formik.setFieldValue(type, newOnComplete);
const onChange = (bewHandler: EventHandler) => {
const newHandlers = formik.values[type].map((handler, index) =>
index === i ? bewHandler : handler
);
formik.setFieldValue(type, newHandlers);
formik.submitForm();
};
const onRemove = () => {
const newOnComplete = formik.values[type].filter((_, index)=> i !== index);
formik.setFieldValue(type, newOnComplete);
const newHandlers = formik.values[type].filter((_, index) => i !== index);
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>