mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2025-04-12 21:50:23 +08:00
modify module schema
This commit is contained in:
Bowen Tan
parent
d885b3672d
commit
47b8fa120d
@ -22,7 +22,6 @@
|
||||
},
|
||||
spec: {
|
||||
properties: {
|
||||
$id: '',
|
||||
name: '',
|
||||
email: '',
|
||||
},
|
||||
@ -31,7 +30,7 @@
|
||||
components: [
|
||||
// list item
|
||||
{
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
type: 'chakra_ui/v1/hstack',
|
||||
properties: {
|
||||
spacing: '24px',
|
||||
@ -40,7 +39,7 @@
|
||||
},
|
||||
// name
|
||||
{
|
||||
id: '{{$id}}name',
|
||||
id: '{{$moduleId}}name',
|
||||
type: 'core/v1/text',
|
||||
properties: {
|
||||
value: {
|
||||
@ -53,7 +52,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
@ -62,7 +61,7 @@
|
||||
},
|
||||
// email
|
||||
{
|
||||
id: '{{$id}}email',
|
||||
id: '{{$moduleId}}email',
|
||||
type: 'core/v1/text',
|
||||
properties: {
|
||||
value: {
|
||||
@ -75,7 +74,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
@ -84,7 +83,7 @@
|
||||
},
|
||||
// delete button
|
||||
{
|
||||
id: '{{$id}}deleteButton',
|
||||
id: '{{$moduleId}}deleteButton',
|
||||
type: 'chakra_ui/v1/button',
|
||||
properties: {
|
||||
text: {
|
||||
@ -121,7 +120,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
@ -130,7 +129,7 @@
|
||||
},
|
||||
// edit button
|
||||
{
|
||||
id: '{{$id}}editButton',
|
||||
id: '{{$moduleId}}editButton',
|
||||
type: 'chakra_ui/v1/button',
|
||||
properties: {
|
||||
text: {
|
||||
@ -167,7 +166,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
@ -295,9 +294,9 @@
|
||||
properties: {
|
||||
listData: '{{ root.listData }}',
|
||||
template: {
|
||||
id: 'list{{$listItem.id}}',
|
||||
type: 'core/v1/listItem',
|
||||
properties: {
|
||||
$id: 'list{{$listItem.id}}',
|
||||
name: '{{$listItem.name}}',
|
||||
email: '{{$listItem.email}}',
|
||||
},
|
||||
|
||||
@ -22,13 +22,13 @@
|
||||
spec: {
|
||||
components: [
|
||||
{
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
type: 'chakra_ui/v1/hstack',
|
||||
properties: {},
|
||||
traits: [],
|
||||
},
|
||||
{
|
||||
id: '{{$id}}1',
|
||||
id: '{{$moduleId}}1',
|
||||
type: 'core/v1/text',
|
||||
properties: {
|
||||
value: {
|
||||
@ -41,7 +41,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
@ -49,7 +49,7 @@
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '{{$id}}input',
|
||||
id: '{{$moduleId}}input',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {},
|
||||
traits: [
|
||||
@ -57,7 +57,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
@ -65,7 +65,7 @@
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '{{$id}}button',
|
||||
id: '{{$moduleId}}button',
|
||||
type: 'chakra_ui/v1/button',
|
||||
properties: {
|
||||
text: {
|
||||
@ -97,7 +97,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: '{{$id}}hstack',
|
||||
id: '{{$moduleId}}hstack',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
@ -108,7 +108,7 @@
|
||||
properties: {},
|
||||
events: ['onEdit'],
|
||||
stateMap: {
|
||||
value: '{{$id}}input.value',
|
||||
value: '{{$moduleId}}input.value',
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -179,7 +179,7 @@
|
||||
template: {
|
||||
type: 'core/v1/littleItem',
|
||||
properties: {
|
||||
$id: '{{$listItem.id}}{{$i}}',
|
||||
$moduleId: '{{$listItem.id}}{{$i}}',
|
||||
value: '{{$listItem.name}}',
|
||||
},
|
||||
handlers: [
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Static } from '@sinclair/typebox';
|
||||
import React from 'react';
|
||||
import { RuntimeApplication } from '@meta-ui/core';
|
||||
import { MetaUIServices } from '../../types/RuntimeSchema';
|
||||
import { MetaUIServices, RuntimeModuleSchema } from '../../types/RuntimeSchema';
|
||||
import { EventHandlerSchema } from '../../types/TraitPropertiesSchema';
|
||||
import { parseTypeComponents } from '../chakra-ui/List';
|
||||
import { resolveAppComponents } from '../../services/resolveAppComponents';
|
||||
@ -10,30 +10,29 @@ import { watch } from '../../utils/watchReactivity';
|
||||
import { get } from 'lodash';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export type RuntimeModuleSchema = {
|
||||
moduleId: string;
|
||||
type: string;
|
||||
properties: Record<string, string>;
|
||||
handlers: Array<Static<typeof EventHandlerSchema>>;
|
||||
};
|
||||
|
||||
type Props = RuntimeModuleSchema & {
|
||||
type Props = Static<typeof RuntimeModuleSchema> & {
|
||||
evalScope: Record<string, any>;
|
||||
services: MetaUIServices;
|
||||
app?: RuntimeApplication;
|
||||
};
|
||||
|
||||
export const ModuleRenderer: React.FC<Props> = props => {
|
||||
const { moduleId, type, properties, handlers, evalScope, services, app } = props;
|
||||
const { type, properties, handlers, evalScope, services, app } = props;
|
||||
|
||||
// first eval the property of module
|
||||
const { properties: moduleProperties, handlers: moduleHandlers } =
|
||||
services.stateManager.mapValuesDeep({ properties, handlers }, ({ value }) => {
|
||||
const {
|
||||
properties: moduleProperties,
|
||||
handlers: moduleHandlers,
|
||||
moduleId,
|
||||
} = services.stateManager.mapValuesDeep(
|
||||
{ properties, handlers, moduleId: props.id },
|
||||
({ value }) => {
|
||||
if (typeof value === 'string') {
|
||||
return services.stateManager.maskedEval(value, true, evalScope);
|
||||
}
|
||||
return value;
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const runtimeModule = services.registry.getModuleByType(type);
|
||||
const parsedtemplete = runtimeModule.spec.components.map(parseTypeComponents);
|
||||
|
||||
@ -5,9 +5,11 @@ import { List as BaseList, ListItem as BaseListItem } from '@chakra-ui/react';
|
||||
import { ComponentImplementation } from '../../services/registry';
|
||||
import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../../constants';
|
||||
import { parseType } from '../../utils/parseType';
|
||||
import { RuntimeApplicationComponent } from 'src/types/RuntimeSchema';
|
||||
import {
|
||||
RuntimeApplicationComponent,
|
||||
RuntimeModuleSchema,
|
||||
} from '../../types/RuntimeSchema';
|
||||
import { ModuleRenderer } from '../_internal/ModuleRenderer';
|
||||
import { EventHandlerSchema } from '../../types/TraitPropertiesSchema';
|
||||
|
||||
export function parseTypeComponents(
|
||||
c: Application['spec']['components'][0]
|
||||
@ -50,7 +52,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
const listItemEle = (
|
||||
<BaseListItem key={listItem.id} spacing={3}>
|
||||
<ModuleRenderer
|
||||
moduleId={`${component.id}ListItem${i}`}
|
||||
id={`${component.id}ListItem${i}`}
|
||||
type={template.type}
|
||||
properties={template.properties}
|
||||
handlers={template.handlers}
|
||||
@ -73,11 +75,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
|
||||
|
||||
const PropsSchema = Type.Object({
|
||||
listData: Type.Array(Type.Record(Type.String(), Type.String())),
|
||||
template: Type.Object({
|
||||
type: Type.String(),
|
||||
properties: Type.Object({}),
|
||||
handlers: Type.Array(EventHandlerSchema),
|
||||
}),
|
||||
template: RuntimeModuleSchema,
|
||||
});
|
||||
|
||||
const exampleProperties = {
|
||||
|
||||
@ -4,6 +4,8 @@ import { GlobalHandlerMap } from 'src/services/handler';
|
||||
import { Registry } from 'src/services/registry';
|
||||
import { StateManager } from 'src/services/stateStore';
|
||||
import { Application, RuntimeApplication } from '@meta-ui/core';
|
||||
import { EventHandlerSchema } from './TraitPropertiesSchema';
|
||||
import { Type } from '@sinclair/typebox';
|
||||
|
||||
export type RuntimeApplicationComponent = RuntimeApplication['spec']['components'][0];
|
||||
|
||||
@ -87,3 +89,10 @@ export type TraitImplementation<T = any> = (
|
||||
services: MetaUIServices;
|
||||
}
|
||||
) => TraitResult;
|
||||
|
||||
export const RuntimeModuleSchema = Type.Object({
|
||||
id: Type.String(),
|
||||
type: Type.String(),
|
||||
properties: Type.Record(Type.String(), Type.Any()),
|
||||
handlers: Type.Array(EventHandlerSchema),
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user