fix: replace initProps to render field

This commit is contained in:
Chu Bin 2021-10-19 18:33:03 +08:00
parent 0b66372bec
commit a99262d1ea
5 changed files with 14 additions and 31 deletions

View File

@ -27,7 +27,6 @@
"@emotion/styled": "^11",
"@meta-ui/core": "^0.1.0",
"@meta-ui/runtime": "^0.0.0",
"@sinclair/typebox": "^0.20.5",
"codemirror": "^5.63.3",
"framer-motion": "^4",
"immer": "^9.0.6",

View File

@ -1,14 +1,17 @@
import { FormControl, FormLabel, Input, Box } from '@chakra-ui/react';
import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
import { Application } from '@meta-ui/core';
import { parseType, parseTypeBox } from '@meta-ui/runtime';
import _ from 'lodash';
import React from 'react';
import { eventBus } from '../../eventBus';
import { registry } from '../../metaUI';
import {
ModifyComponentIdOperation,
ModifyComponentPropertyOperation,
ModifyTraitPropertyOperation,
} from '../../operations/Operations';
import { TSchema } from '@sinclair/typebox';
type Props = { selectedId: string; app: Application };
@ -59,22 +62,22 @@ const renderField = (properties: {
};
const changeCompId = (selectedId: string, value: string) => {
eventBus.send(
'operation',
new ModifyComponentIdOperation(selectedId, value)
);
eventBus.send('operation', new ModifyComponentIdOperation(selectedId, value));
};
export const ComponentForm: React.FC<Props> = props => {
const { selectedId, app } = props;
const selectedComponent = app.spec.components.find(c => c.id === selectedId);
if (!selectedComponent) {
return <div>cannot find component with id: {selectedId}</div>;
}
const properties = selectedComponent.properties;
const { version, name } = parseType(selectedComponent.type);
const cImpl = registry.getComponent(version, name);
const properties = Object.assign(
parseTypeBox(cImpl.spec.properties as TSchema),
selectedComponent.properties,
);
const fields = Object.keys(properties || []).map(key => {
const value = properties![key];
return renderField({ key, value, fullKey: key, selectedId });

View File

@ -24,16 +24,6 @@ function genSlotTrait(parentId: string, slot: string): ComponentTrait {
},
};
}
// TODO JSONSchema7Type
const genInitProps = (init: Record<string, never>, properties: any, fullKey?: string) => {
for (const key of Object.keys(properties)) {
if (properties[key]?.type === 'object') {
genInitProps(init, properties[key].properties, fullKey ? `${fullKey}.${key}` : key);
} else {
_.set(init, fullKey ? `${fullKey}.${key}` : key, undefined);
}
}
};
function genComponent(
type: string,
@ -44,11 +34,7 @@ function genComponent(
const { version, name } = parseType(type);
const cImpl = registry.getComponent(version, name);
const traits = parentId && slot ? [genSlotTrait(parentId, slot)] : [];
const initProps = {};
genInitProps(initProps, cImpl.spec.properties.properties);
const initProperties = Object.assign(initProps, cImpl.metadata.exampleProperties);
const initProperties = cImpl.metadata.exampleProperties;
return {
id,
type: type,

View File

@ -20,7 +20,7 @@
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@meta-ui/core": "^0.1.0",
"@sinclair/typebox": "^0.19.2",
"@sinclair/typebox": "^0.20.5",
"@vue-reactivity/watch": "^0.1.6",
"@vue/reactivity": "^3.1.5",
"copy-to-clipboard": "^3.3.1",

View File

@ -2804,15 +2804,10 @@
estree-walker "^2.0.1"
picomatch "^2.2.2"
"@sinclair/typebox@^0.19.2":
version "0.19.2"
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.19.2.tgz#3a526594d6f652ada78e6c00be84463ae48047e4"
integrity sha512-0U/RVPZQw1QxhrbKV0o281ZWI1Ve3osJnyEYnwOp3slydIQHyXumbJANJeNv9BqABDiHWlmzsxSVopPHMvt3Aw==
"@sinclair/typebox@^0.20.5":
version "0.20.5"
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.20.5.tgz#d5828bbb8237876d7937dd229e3dac71d1220771"
integrity sha512-WNiVFcS1rdz5KyEutpl3Wmp/AwSQHBUFTyJz7KqMLkpLhOXCj1dnvMytBM6uMS5OTwhwwq877T7EC4vDGrX5Eg==
resolved "https://registry.nlark.com/@sinclair/typebox/download/@sinclair/typebox-0.20.5.tgz#d5828bbb8237876d7937dd229e3dac71d1220771"
integrity sha1-1YKLu4I3h215N90inj2scdEiB3E=
"@sinonjs/commons@^1.7.0":
version "1.8.3"