mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-12 17:08:14 +00:00
Merge remote-tracking branch 'origin/components-panel' into refactor/react-renderer
This commit is contained in:
commit
d3c69a1703
File diff suppressed because it is too large
Load Diff
@ -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": {
|
||||
|
||||
@ -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);
|
||||
// },
|
||||
// );
|
||||
// });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -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)}
|
||||
/>
|
||||
|
||||
@ -308,7 +308,7 @@ export default class BaseRender extends PureComponent {
|
||||
...componentInfo,
|
||||
props: transformArrayToMap(componentInfo.props, 'name'),
|
||||
},
|
||||
});
|
||||
}) || {};
|
||||
// 对于可以获取到ref的组件做特殊处理
|
||||
if (acceptsRef(Comp)) {
|
||||
otherProps.ref = (ref) => {
|
||||
|
||||
2
packages/react-renderer/src/utils/index.js
vendored
2
packages/react-renderer/src/utils/index.js
vendored
@ -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)));
|
||||
}
|
||||
|
||||
@ -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) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user