Merge remote-tracking branch 'origin/components-panel' into refactor/react-renderer

This commit is contained in:
wuji.xwt 2020-07-20 16:07:11 +08:00
commit d3c69a1703
10 changed files with 515 additions and 170 deletions

File diff suppressed because it is too large Load Diff

View File

@ -49,7 +49,7 @@
"initValue": "李雷"
},
"children": [{
"componentName": "From.Input",
"componentName": "Input",
"props": {
"placeholder": "请输入",
"size": "medium",
@ -94,7 +94,7 @@
}
}]
}, {
"componentName": "Box",
"componentName": "Form.Item",
"props": {
"style": {
"textAlign": "center"
@ -112,7 +112,15 @@
},
"htmlType": "submit"
},
"children": "提交"
"children": [
{
"componentName": "Icon",
"props": {
"type": "success"
}
},
"提交"
]
}, {
"componentName": "Button",
"props": {

View File

@ -14,6 +14,14 @@ const Codeout = ({ editor }: PluginProps) => {
const handleClick = () => {
const designer = editor.get(Designer);
if (designer) {
const assets = editor.get('assets');
console.log(assets.components);
const componentsMap = assets.components.map((c) => ({
componentName: c.componentName,
...(c.npm || {}),
}));
const fullSchema = {
...designer.schema,
config: {
@ -23,30 +31,28 @@ const Codeout = ({ editor }: PluginProps) => {
meta: {
name: 'demoproject',
},
componentsMap,
};
console.info('codeout schema:', fullSchema);
// localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
method: 'POST',
body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
headers: new Headers({
'Content-Type': 'application/json',
}),
mode: 'cors',
}).then((res) => {
console.log(res);
const fileStream = streamSaver.createWriteStream('demoProject.zip');
res.body.pipeTo(fileStream).then(
() => {
console.log('success');
},
(err) => {
console.log(err);
},
);
});
// fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
// method: 'POST',
// body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
// headers: new Headers({
// 'Content-Type': 'application/json',
// }),
// mode: 'cors',
// }).then((res) => {
// const fileStream = streamSaver.createWriteStream('demoProject.zip');
// res.body.pipeTo(fileStream).then(
// () => {
// console.log('success');
// },
// (err) => {
// console.log(err);
// },
// );
// });
}
};

View File

@ -33,15 +33,24 @@ export default class EventsSetter extends Component<{
relatedEventName: '',
};
// constructor (){
// super();
// debugger;
// if (!this.props || !this.props.value){
// this.setState({
// eventDataList:[]
// })
// }
// }
static getDerivedStateFromProps(nextProps, prevState) {
const { value } = nextProps;
if (value !== prevState.eventDataList) {
return {
value,
};
}
// const { value } = nextProps;
// debugger;
// if (value !== prevState.eventDataList) {
// return {
// value,
// };
// }
return null;
}

View File

@ -179,7 +179,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
title: { type: 'i18n', 'zh-CN': '事件', 'en-US': 'Events' },
items: [
{
name: '!events',
name: 'events',
title: { type: 'i18n', 'zh-CN': '事件设置', 'en-US': 'Events' },
setter: {
componentName: 'EventsSetter',
@ -188,12 +188,25 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
},
},
getValue(field: SettingTarget, val?: any[]) {
// todo:
return val;
let eventDataList = []
for (let key in val){
if (val[key].__eventData){
eventDataList.push(val[key].__eventData)
}
}
return eventDataList;
},
setValue(field: SettingTarget, eventDataList: any[]) {
// todo:
eventDataList.map((item)=>{
field.setPropValue(item.name,{
type: 'JSFunction',
value: `function(){ this.${item.relatedEventName}() }`,
__eventData:item
})
return item;
})
return;
},
},

View File

@ -5,21 +5,21 @@ import './index.scss';
export default class EventBindDialog extends Component<PluginProps> {
private eventList: any[] = [
{
name: 'getData',
},
{
name: 'deleteData',
},
{
name: 'initData',
},
{
name: 'editData',
},
{
name: 'submitData',
},
// {
// name: 'getData',
// },
// {
// name: 'deleteData',
// },
// {
// name: 'initData',
// },
// {
// name: 'editData',
// },
// {
// name: 'submitData',
// },
];
state: any = {
@ -41,10 +41,24 @@ export default class EventBindDialog extends Component<PluginProps> {
});
};
componentDidMount() {
const { editor, config } = this.props;
editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String) => {
this.openDialog(bindEventName);
let schema = editor.get('designer').project.getSchema();
let pageNode = schema.componentsTree[0];
if (pageNode.methods){
this.eventList = [];
for (let key in pageNode.methods){
this.eventList.push({
name:key
})
}
}
});
}

View File

@ -258,7 +258,7 @@ export default class SourceEditor extends Component<{
<MonacoEditor
value={jsCode}
{...defaultEditorOption}
{...{ language: 'typescript' }}
{...{ language: 'javascript' }}
onChange={(newCode) => this.updateCode(newCode)}
editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco,TAB_KEY.JS_TAB)}
/>

View File

@ -308,7 +308,7 @@ export default class BaseRender extends PureComponent {
...componentInfo,
props: transformArrayToMap(componentInfo.props, 'name'),
},
});
}) || {};
// ref
if (acceptsRef(Comp)) {
otherProps.ref = (ref) => {

View File

@ -63,6 +63,8 @@ const ENV = {
*/
export function isSchema(schema, ignoreArr) {
if (isEmpty(schema)) return false;
// Leaf 组件也返回 true
if (schema.componentName === 'Leaf') return true;
if (!ignoreArr && Array.isArray(schema)) return schema.every((item) => isSchema(item));
return !!(schema.componentName && schema.props && (typeof schema.props === 'object' || isJSExpression(schema.props)));
}

View File

@ -108,6 +108,17 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
const leaf = host.document.getNode(__id);
viewProps._leaf = leaf;
viewProps._componentName = leaf?.componentName;
// 如果是容器 && 无children && 高宽为空 增加一个占位容器,方便拖动
if (leaf.isContainer() && children == null && !viewProps.style){
Object.assign(viewProps, {
style:{
height:'100px',
backgroundColor:'#f0f0f0',
borderColor:'#666666',
border: '1px dotted'
}
})
}
if (viewProps._componentName === 'Menu') {
Object.assign(viewProps, {
@ -128,11 +139,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
});
console.info('menuprops', viewProps);
}
return createElement(
getDeviceView(Component, device, designMode),
viewProps,
leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : null,
leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children,
);
}}
onCompGetRef={(schema: any, ref: ReactInstance | null) => {