github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-14 21:12:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat/joint-editor' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into feat/joint-editor

Browse Source
This commit is contained in:
jianfang.rjf 2020-03-16 23:38:57 +08:00
commit a5821af405
13 changed files with 180 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/designer/src/builtins/simulator/renderer/renderer.ts
View File

@ -314,7 +314,10 @@ export interface LibraryMap {
function buildComponents(libraryMap: LibraryMap, componentsMap: { [componentName: string]: NpmInfo }) {
const components: any = {};
Object.keys(componentsMap).forEach(componentName => {
components[componentName] = findComponent(libraryMap, componentName, componentsMap[componentName]);
const component = findComponent(libraryMap, componentName, componentsMap[componentName]);
if (component) {
components[componentName] = component;
}
});
return components;
}

85
packages/editor/src/config/assets.js
View File

@ -13,6 +13,44 @@ export default {
}
},
components: {
Page: {
componentName: 'Page',
title: '页面',
configure: {
events: {
supportedLifecycles: [
{
description: '初始化时',
name: 'constructor',
},
{
description: '装载后',
name: 'componentDidMount',
},
{
description: '更新时',
name: 'componentDidMount',
},
{
description: '卸载时',
name: 'componentWillUnmount',
},
]
},
component: {
isContainer: true,
}
}
},
Div: {
componentName: 'Div',
title: '容器',
configure: {
component: {
isContainer: true,
}
}
},
Button: {
componentName: 'Button',
title: '按钮',
@ -164,7 +202,15 @@ export default {
name: 'children',
propType: 'node'
}
]
],
configure: {
component: {
isContainer: true,
nestingRule: {
childWhitelist: 'Button'
}
}
}
},
Input: {
componentName: 'Input',
@ -446,7 +492,12 @@ export default {
propType: 'bool',
description: '是否开启预览态'
}
]
],
configure: {
component: {
isContainer: true,
}
}
},
'Form.Item': {
componentName: 'Form.Item',
@ -743,7 +794,15 @@ export default {
propType: 'func',
description: '预览态模式下渲染的内容\n@param {any} value 根据包裹的组件的 value 类型而决定'
}
]
],
configure: {
component: {
isContainer: true,
nestingRule: {
parentWhitelist: 'Form'
}
}
}
},
NumberPicker: {
componentName: 'NumberPicker',
@ -1131,7 +1190,15 @@ export default {
name: 'locale',
propType: 'object'
}
]
],
configure: {
component: {
isContainer: true,
nestingRule: {
childWhitelist: 'Select.Option'
}
}
}
},
'Select.Option': {
componentName: 'Select.Option',
@ -1162,7 +1229,15 @@ export default {
name: 'children',
propType: 'any'
}
]
],
configure: {
component: {
isContainer: true,
nestingRule: {
parentWhitelist: 'Select'
}
}
}
}
},
componentList: [

22
packages/editor/src/config/setters.ts
View File

@ -1,8 +1,7 @@
import { DatePicker, Input, Radio, Select, Switch } from '@alifd/next';
import NumberSetter from '../../../plugin-setters/src/number-setter';
import { DatePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next';
import ExpressionSetter from '../../../plugin-setters/src/expression-setter';
import MixinSetter from '../../../plugin-setters/src/mixin-setter';
import EventsSetter from '../../../plugin-settings/src/builtin-setters/events-setter'
import EventsSetter from '../../../plugin-setters/src/events-setter';
import { registerSetter } from '../../../plugin-settings/src';
import { createElement } from 'react';
@ -17,17 +16,20 @@ registerSetter('ClassNameSetter', () => {
});
registerSetter('EventsSetter', EventsSetter);
registerSetter('StringSetter', { component: Input, props: { placeholder: '请输入' } });
registerSetter('NumberSetter', NumberSetter as any);
registerSetter('StringSetter', { component: Input, props: { placeholder: '请输入' } });
registerSetter('StringSetter', { component: Input, defaultProps: { placeholder: '请输入' } });
registerSetter('NumberSetter', NumberPicker);
registerSetter('ExpressionSetter', ExpressionSetter);
registerSetter('MixinSetter', MixinSetter);
registerSetter('BoolSetter', Switch);
registerSetter('RadioGroupSetter', Radio.RadioGroup);
registerSetter('RadioGroupSetter', {
component: Radio.Group,
defaultProps: {
shape: 'button'
}
});
registerSetter('SelectSetter', Select);
// suggest: 做成 StringSetter 的一个参数，
registerSetter('TextAreaSetter', Input.TextArea);
registerSetter('DateSetter', DatePicker);
registerSetter('DateYearSetter', DatePicker.YearPicker);

0
packages/plugin-settings/src/builtin-setters/events-setter/event-dialog.tsx → packages/plugin-setters/src/events-setter/event-dialog.tsx
View File

0
packages/plugin-settings/src/builtin-setters/events-setter/index.tsx → packages/plugin-setters/src/events-setter/index.tsx
View File

0
packages/plugin-settings/src/builtin-setters/events-setter/native-events.ts → packages/plugin-setters/src/events-setter/native-events.ts
View File

0
packages/plugin-settings/src/builtin-setters/events-setter/style.less → packages/plugin-setters/src/events-setter/style.less
View File

3
packages/plugin-setters/src/mixin-setter.tsx
View File

@ -34,7 +34,8 @@ export default class Mixin extends PureComponent {
};
static defaultProps = {
locale: 'zh-CN',
messages: zhCN
messages: zhCN,
types: ['StringSetter', 'ExpressionSetter', 'NumberSetter', 'BoolSetter', 'SelectSetter', 'RadioGroupSetter'],
};
constructor(props) {
super(props);

6
packages/plugin-settings/src/index.tsx
View File

@ -8,6 +8,7 @@ import Node from '../../designer/src/designer/document/node/node';
import ArraySetter from './builtin-setters/array-setter';
import ObjectSetter from './builtin-setters/object-setter';
import './register-transducer';
import { TipContainer } from './tip';
export default class SettingsMainView extends Component {
private main: SettingsMain;
@ -42,10 +43,10 @@ export default class SettingsMainView extends Component {
let node: Node | null = this.main.nodes[0]!;
const items = [];
let l = 4;
let l = 3;
while (l-- > 0 && node) {
const props =
l === 3
l === 2
? {}
: {
onMouseOver: hoverNode.bind(null, node, true),
@ -101,6 +102,7 @@ export default class SettingsMainView extends Component {
return (
<div className="lc-settings-main">
<TipContainer />
<Tab
navClassName="lc-settings-tabs"
animation={false}

2
packages/plugin-settings/src/main.ts
View File

@ -535,7 +535,7 @@ export class SettingsMain implements SettingTarget {
let theSame = true;
for (let i = 1; i < l; i++) {
const other = this.nodes[i];
if ((other as any).componentType !== meta) {
if (other.componentMeta !== meta) {
theSame = false;
break;
}

82
packages/plugin-settings/src/register-transducer.ts
View File

@ -11,7 +11,13 @@ import { SetterType, FieldConfig, SettingField } from './main';
import { registerMetadataTransducer } from '../../designer/src/designer/component-meta';
export function propConfigToFieldConfig(propConfig: PropConfig): FieldConfig {
const { name, description } = propConfig;
const title = {
label: description?.slice(0, 10) || name,
tip: description ? `${name} | ${description}` : undefined,
};
return {
title,
...propConfig,
setter: propTypeToSetter(propConfig.propType),
};
@ -55,7 +61,7 @@ export function propTypeToSetter(propType: PropType): SetterType {
value,
};
});
const componentName = dataSource.length > 4 ? 'SelectSetter' : 'RadioSetter';
const componentName = dataSource.length > 4 ? 'SelectSetter' : 'RadioGroupSetter';
return {
componentName,
props: { dataSource },
@ -135,7 +141,8 @@ export function propTypeToSetter(propType: PropType): SetterType {
return {
componentName: 'MixinSetter',
props: {
setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
// TODO:
// setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)),
},
isRequired,
};
@ -163,21 +170,23 @@ registerMetadataTransducer(metadata => {
return metadata as any;
}
}
const { configure = {} } = metadata;
if (!metadata.props) {
return {
...metadata,
configure: {
props: metadata.configure && Array.isArray(metadata.configure) ? metadata.configure : [],
...configure,
props: [],
},
};
}
const { configure = {} } = metadata;
const { props = [], component = {}, events = {}, styles = {} } = configure;
const supportEvents: string[] | null = (events as any).supportEvents ? null : [];
const supportedEvents: any[] | null = (events as any).supportedEvents ? null : [];
metadata.props.forEach(prop => {
const { name, propType } = prop;
const { name, propType, description } = prop;
if (
name === 'children' &&
(component.isContainer || propType === 'node' || propType === 'element' || propType === 'any')
@ -189,9 +198,12 @@ registerMetadataTransducer(metadata => {
}
if (EVENT_RE.test(name) && (propType === 'func' || propType === 'any')) {
if (supportEvents) {
supportEvents.push(name);
(events as any).supportEvents = supportEvents;
if (supportedEvents) {
supportedEvents.push({
name,
description,
});
(events as any).supportedEvents = supportedEvents;
}
return;
}
@ -279,11 +291,12 @@ registerMetadataTransducer(metadata => {
setter: {
componentName: 'MixinSetter',
props: {
// TODO:
setters: [
{
componentName: 'StringSetter',
props: {
// todo:
// TODO: textarea mode
multiline: true,
},
initialValue: '',
@ -304,17 +317,10 @@ registerMetadataTransducer(metadata => {
};
}
const { props, events, styles } = configure as any;
let eventsDefinition: any;
let isRoot: boolean = false;
if (componentName === 'Page' || componentName === 'Component') {
isRoot = true;
// 平台配置的，一般只有根节点才会配置
eventsDefinition = [
{
type: 'lifeCycleEvent',
title: '生命周期',
list: [
const { props, events = {}, styles } = configure as any;
const isRoot: boolean = componentName === 'Page' || componentName === 'Component';
const eventsDefinition: any[] = [];
const supportedLifecycles = events.supportedLifecycles || (isRoot ? [
{
description: '初始化时',
name: 'constructor',
@ -331,17 +337,20 @@ registerMetadataTransducer(metadata => {
description: '卸载时',
name: 'componentWillUnmount',
},
],
},
];
} else {
eventsDefinition = [
{
] : null);
if (supportedLifecycles) {
eventsDefinition.push({
type: 'lifeCycleEvent',
title: '生命周期',
list: supportedLifecycles.map((event: any) => (typeof event === 'string' ? { name: event } : event)),
});
}
if (events.supportedEvents) {
eventsDefinition.push({
type: 'events',
title: '事件',
list: (events?.supportEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
},
];
list: (events.supportedEvents || []).map((event: any) => (typeof event === 'string' ? { name: event } : event)),
});
}
// 通用设置
const propsGroup = props || [];
@ -402,7 +411,7 @@ registerMetadataTransducer(metadata => {
});
}
if (eventsDefinition) {
if (eventsDefinition.length > 0) {
combined.push({
name: '#events',
title: '事件',
@ -416,15 +425,14 @@ registerMetadataTransducer(metadata => {
definition: eventsDefinition,
},
},
getValue(field: SettingField, val?:any[]) {
getValue(field: SettingField, val?: any[]) {
// todo:
return val;
},
setValue(field: SettingField, eventDataList: any[]) {
// todo:
return;
// console.info(eventDataList);
// field.parent.setPropValue('eventDataList', eventDataList);
},
},
],
@ -432,7 +440,6 @@ registerMetadataTransducer(metadata => {
}
if (isRoot) {
// todo...
combined.push({
name: '#advanced',
title: '高级',
@ -458,6 +465,7 @@ registerMetadataTransducer(metadata => {
setter: {
componentName: 'MixinSetter',
props: {
// TODO:
setters: [
{
componentName: 'JSONSetter',

9
packages/plugin-settings/src/title/index.tsx
View File

@ -6,7 +6,7 @@ import './title.less';
export interface IconConfig {
type: string;
size?: number | "small" | "xxs" | "xs" | "medium" | "large" | "xl" | "xxl" | "xxxl" | "inherit";
size?: number | 'small' | 'xxs' | 'xs' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
className?: string;
}
@ -51,7 +51,12 @@ export default class Title extends Component<{ title: TitleContent; onClick?: ()
}
return (
<div className={classNames('lc-title', title.className)} onClick={this.props.onClick}>
<div
className={classNames('lc-title', title.className, {
'has-tip': !!tip,
})}
onClick={this.props.onClick}
>
{icon ? <div className="lc-title-icon">{icon}</div> : null}
{title.label ? <span className="lc-title-label">{title.label}</span> : null}
{tip}

7
packages/plugin-settings/src/title/title.less
View File

@ -7,6 +7,13 @@
align-items: center;
margin-right: 4px;
}
&.has-tip {
cursor: help;
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: rgba(31, 56, 88, .3);
}
padding: 2px 0;
}
.actived .lc-title {