github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-20 15:38:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

修改表格datasource，支持setter继承特性

Browse Source
This commit is contained in:
荣彬 2020-07-26 12:43:05 +08:00
parent f9bfb0a7c7
commit 1da85ced92
7 changed files with 180 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/demo/public/assets.json
View File

@ -300,6 +300,13 @@
"configure": { "configure": {
"component": { "component": {
"isContainer": true "isContainer": true
},
"props": {
"isExtends": true,
"override": [{
"name": "dataSource",
"setter": "JsonSetter"
}]
} }
} }
}, },

149
packages/editor-setters/src/json-setter/index.tsx
View File

@ -21,8 +21,8 @@ class MonacoEditorView extends PureComponent {
static displayName = 'MonacoEditor'; static displayName = 'MonacoEditor';
render() { render() {
const { type, ...restProps } = this.props; const { type, ...restProps } = this.props;
let Node = type == 'button' ? MonacoEditorButtonView : MonacoEditorDefaultView; const Node = type == 'button' ? MonacoEditorButtonView : MonacoEditorDefaultView;
return <Node {...restProps} registerApi={apis => Object.assign(this, apis)} />; return <Node {...restProps} registerApi={(apis) => Object.assign(this, apis)} />;
} }
} }
@ -33,14 +33,15 @@ class MonacoEditorDefaultView extends PureComponent {
static displayName = 'MonacoEditorDefault'; static displayName = 'MonacoEditorDefault';
static propTypes = { static propTypes = {
locale: PropTypes.string, locale: PropTypes.string,
messages: PropTypes.object messages: PropTypes.object,
language: PropTypes.string,
}; };
static defaultProps = { static defaultProps = {
locale: 'zh-CN', locale: 'zh-CN',
messages: zhCN, messages: zhCN,
width: '100%', width: '100%',
height: '300px', height: '300px',
language: 'javascript', language: 'json',
autoFocus: false, //自动获得焦点 autoFocus: false, //自动获得焦点
autoSubmit: true, //自动提交 autoSubmit: true, //自动提交
placeholder: '', //默认占位内容 placeholder: '', //默认占位内容
@ -60,14 +61,14 @@ class MonacoEditorDefaultView extends PureComponent {
fixedOverflowWidgets: false, fixedOverflowWidgets: false,
snippetSuggestions: 'top', snippetSuggestions: 'top',
minimap: { minimap: {
enabled: true enabled: true,
}, },
scrollbar: { scrollbar: {
vertical: 'hidden', vertical: 'hidden',
horizontal: 'hidden', horizontal: 'hidden',
verticalScrollbarSize: 0 verticalScrollbarSize: 0,
} },
} },
}; };
strValue: string; strValue: string;
i18n: any; i18n: any;
@ -90,11 +91,11 @@ class MonacoEditorDefaultView extends PureComponent {
folding: true, folding: true,
scrollBeyondLastLine: true, scrollBeyondLastLine: true,
minimap: { minimap: {
enabled: true enabled: true,
} },
}; };
this.state = { this.state = {
isFullScreen: false isFullScreen: false,
}; };
this.onChange = this.onChange.bind(this); this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this); this.onSubmit = this.onSubmit.bind(this);
@ -118,18 +119,18 @@ class MonacoEditorDefaultView extends PureComponent {
setTimeout(() => { setTimeout(() => {
this.editor.setPosition({ this.editor.setPosition({
column: 4, column: 4,
lineNumber: 2 lineNumber: 2,
}); });
this.editor.focus(); this.editor.focus();
}, 100); }, 100);
} }
//快捷键编码 //快捷键编码
let CtrlCmd = 2048; const CtrlCmd = 2048;
let KEY_S = 49; const KEY_S = 49;
let Shift = 1024; const Shift = 1024;
let KEY_F = 36; const KEY_F = 36;
let KEY_B = 32; const KEY_B = 32;
let Escape = 9; const Escape = 9;
this.editor.addCommand(CtrlCmd | KEY_S, () => { this.editor.addCommand(CtrlCmd | KEY_S, () => {
this.onSubmit(); //保存快捷键 this.onSubmit(); //保存快捷键
@ -152,12 +153,12 @@ class MonacoEditorDefaultView extends PureComponent {
this.editor.toFunction = this.toFunction; this.editor.toFunction = this.toFunction;
//针对object情况，改写setValue和getValue api //针对object情况，改写setValue和getValue api
if (this.props.language === 'object') { if (this.props.language === 'object') {
let getValue = this.editor.getValue; const getValue = this.editor.getValue;
let setValue = this.editor.setValue; const setValue = this.editor.setValue;
this.editor.getValue = () => { this.editor.getValue = () => {
return getValue.call(this.editor).substring(this.valuePrefix.length); return getValue.call(this.editor).substring(this.valuePrefix.length);
}; };
this.editor.setValue = value => { this.editor.setValue = (value) => {
return setValue.call(this.editor, [this.valuePrefix + value]); return setValue.call(this.editor, [this.valuePrefix + value]);
}; };
} }
@ -175,7 +176,7 @@ class MonacoEditorDefaultView extends PureComponent {
theme, theme,
editorWillMount, editorWillMount,
editorDidMount, editorDidMount,
registerApi registerApi,
} = this.props; } = this.props;
const { isFullScreen } = this.state; const { isFullScreen } = this.state;
@ -183,8 +184,8 @@ class MonacoEditorDefaultView extends PureComponent {
if (language === 'object') this.valuePrefix = 'export default '; if (language === 'object') this.valuePrefix = 'export default ';
if (!this.isFullScreenAction) { if (!this.isFullScreenAction) {
//将值转换成目标值 //将值转换成目标值
let nowValue = this.valueHandler(value || placeholder, language); const nowValue = this.valueHandler(value || placeholder, language);
let curValue = this.valueHandler(this.strValue, language); const curValue = this.valueHandler(this.strValue, language);
if (nowValue !== curValue) this.strValue = nowValue; if (nowValue !== curValue) this.strValue = nowValue;
if (language === 'object') this.strValue = this.strValue || placeholder || '{\n\t\n}'; //设置初始化值 if (language === 'object') this.strValue = this.strValue || placeholder || '{\n\t\n}'; //设置初始化值
if (language === 'json' && this.strValue === '{}') this.strValue = '{\n\t\n}'; if (language === 'json' && this.strValue === '{}') this.strValue = '{\n\t\n}';
@ -195,16 +196,24 @@ class MonacoEditorDefaultView extends PureComponent {
if (language === 'object' || language === 'function') { if (language === 'object' || language === 'function') {
tarLanguage = 'javascript'; tarLanguage = 'javascript';
} }
let classes = classNames('monaco-editor-wrap', { const classes = classNames('monaco-editor-wrap', {
['monaco-fullscreen']: !!isFullScreen, 'monaco-fullscreen': !!isFullScreen,
['monaco-nofullscreen']: !isFullScreen 'monaco-nofullscreen': !isFullScreen,
}); });
let tarStyle = Object.assign({ minHeight: 60, width, height }, style); const tarStyle = Object.assign({ minHeight: 60, width, height }, style);
let tempValue = this.valuePrefix + this.strValue;
if (tarLanguage === 'json') {
try {
tempValue = JSON.stringify(JSON.parse(tempValue || '{}'), null, 2);
} catch (err) {
console.log(err);
}
}
return ( return (
<div className={className} style={tarStyle}> <div className={className} style={tarStyle}>
<div ref={this.editorRef} style={{ height: '100%' }} className={classes}> <div ref={this.editorRef} style={{ height: '100%' }} className={classes}>
<MonacoEditor <MonacoEditor
value={this.valuePrefix + this.strValue} value={tempValue}
width="100%" width="100%"
height="300" height="300"
language={tarLanguage} language={tarLanguage}
@ -241,7 +250,7 @@ class MonacoEditorDefaultView extends PureComponent {
if (this.ct) clearTimeout(this.ct); if (this.ct) clearTimeout(this.ct);
this.ct = setTimeout(() => { this.ct = setTimeout(() => {
this.position = this.editor.getPosition(); this.position = this.editor.getPosition();
let ret = this.resultHandler(curValue, language); const ret = this.resultHandler(curValue, language);
if (autoSubmit) onChange && onChange(ret.value); if (autoSubmit) onChange && onChange(ret.value);
onAfterChange && onAfterChange(ret.value, ret.error, this.editor); onAfterChange && onAfterChange(ret.value, ret.error, this.editor);
}, 300); }, 300);
@ -250,8 +259,8 @@ class MonacoEditorDefaultView extends PureComponent {
//提交动作 //提交动作
onSubmit() { onSubmit() {
const { onSubmit, onChange, language } = this.props; const { onSubmit, onChange, language } = this.props;
let curValue = this.editor.getValue(); const curValue = this.editor.getValue();
let ret = this.resultHandler(curValue, language); const ret = this.resultHandler(curValue, language);
if (!ret.error) onChange && onChange(ret.value); if (!ret.error) onChange && onChange(ret.value);
onSubmit && onSubmit(ret.value, ret.error, this.editor); onSubmit && onSubmit(ret.value, ret.error, this.editor);
} }
@ -264,7 +273,7 @@ class MonacoEditorDefaultView extends PureComponent {
tarValue = JSON.stringify(value, null, 2); tarValue = JSON.stringify(value, null, 2);
} else if (value && typeof value === 'string') { } else if (value && typeof value === 'string') {
try { try {
let ret = this.toJson(value); const ret = this.toJson(value);
if (!ret.error) tarValue = JSON.stringify(ret.value, null, 2); if (!ret.error) tarValue = JSON.stringify(ret.value, null, 2);
} catch (err) {} } catch (err) {}
} }
@ -285,7 +294,7 @@ class MonacoEditorDefaultView extends PureComponent {
} catch (err) {} } catch (err) {}
} else if (typeof value === 'string') { } else if (typeof value === 'string') {
try { try {
let ret = this.resultHandler(value, 'object'); const ret = this.resultHandler(value, 'object');
tarValue = ret.error ? ret.value : serialize(ret.value, { unsafe: true }); tarValue = ret.error ? ret.value : serialize(ret.value, { unsafe: true });
tarValue = js_beautify(tarValue, { indent_size: 2, indent_empty_lines: true }); tarValue = js_beautify(tarValue, { indent_size: 2, indent_empty_lines: true });
} catch (err) {} } catch (err) {}
@ -323,27 +332,28 @@ class MonacoEditorDefaultView extends PureComponent {
} else { } else {
document.body.appendChild(this.editorNode); document.body.appendChild(this.editorNode);
} }
let nextFs = !this.state.isFullScreen; const nextFs = !this.state.isFullScreen;
this.isFullScreenAction = true; //记录是全屏幕操作 this.isFullScreenAction = true; //记录是全屏幕操作
this.setState( this.setState(
{ {
isFullScreen: nextFs isFullScreen: nextFs,
}, },
() => { () => {
this.editor.updateOptions(nextFs ? this.fullScreenOptions : this.options); this.editor.updateOptions(nextFs ? this.fullScreenOptions : this.options);
} },
); );
} }
//美化代码 //美化代码
format() { format() {
const { language } = this.props;
if (!this.editor) return; if (!this.editor) return;
if (/^\$_obj?\{.*?\}$/m.test(this.editor.getValue())) return; if (/^\$_obj?\{.*?\}$/m.test(this.editor.getValue())) return;
if (this.props.language === 'json' || this.props.language === 'object' || this.props.language === 'function') { if (this.props.language === 'json' || this.props.language === 'object' || this.props.language === 'function') {
let tarValue = js_beautify(this.editor.getValue(), { indent_size: 2 }); const tarValue = js_beautify(this.editor.getValue(), { indent_size: 2 });
this.editor.setValue(tarValue); this.editor.setValue(tarValue);
} else if (this.props.language === 'less' || this.props.language === 'css' || this.props.language === 'scss') { } else if (this.props.language === 'less' || this.props.language === 'css' || this.props.language === 'scss') {
let tarValue = css_beautify(this.editor.getValue(), { indent_size: 2 }); const tarValue = css_beautify(this.editor.getValue(), { indent_size: 2 });
this.editor.setValue(tarValue); this.editor.setValue(tarValue);
} else { } else {
this.editor.getAction('editor.action.formatDocument').run(); this.editor.getAction('editor.action.formatDocument').run();
@ -353,9 +363,9 @@ class MonacoEditorDefaultView extends PureComponent {
//校验是否是json //校验是否是json
toJson(value) { toJson(value) {
try { try {
let obj = new Function(`'use strict'; return ${value.replace(/[\r\n\t]/g, '')}`)(); const obj = new Function(`'use strict'; return ${value.replace(/[\r\n\t]/g, '')}`)();
if (typeof obj === 'object' && obj) { if (typeof obj === 'object' && obj) {
let tarValue = new Function(`'use strict'; return ${value}`)(); const tarValue = new Function(`'use strict'; return ${value}`)();
return { value: JSON.parse(JSON.stringify(tarValue)) }; return { value: JSON.parse(JSON.stringify(tarValue)) };
} }
return { error: this.i18n('jsonIllegal'), value }; return { error: this.i18n('jsonIllegal'), value };
@ -367,7 +377,7 @@ class MonacoEditorDefaultView extends PureComponent {
//校验是否为object对象 //校验是否为object对象
toObject(value) { toObject(value) {
try { try {
let obj = new Function(`'use strict';return ${value}`)(); const obj = new Function(`'use strict';return ${value}`)();
if (obj && typeof obj === 'object') { if (obj && typeof obj === 'object') {
if (jsonuri.isCircular(obj)) return { error: this.i18n('circularRef'), value }; if (jsonuri.isCircular(obj)) return { error: this.i18n('circularRef'), value };
return { value: obj }; return { value: obj };
@ -382,7 +392,7 @@ class MonacoEditorDefaultView extends PureComponent {
//校验是否为function //校验是否为function
toFunction(value) { toFunction(value) {
try { try {
let fun = new Function(`'use strict';return ${value}`)(); const fun = new Function(`'use strict';return ${value}`)();
if (fun && typeof fun === 'function') { if (fun && typeof fun === 'function') {
return { value: fun }; return { value: fun };
} else { } else {
@ -398,13 +408,13 @@ class MonacoEditorDefaultView extends PureComponent {
if (registerApiAndSnippetStatus) return; if (registerApiAndSnippetStatus) return;
registerApiAndSnippetStatus = true; registerApiAndSnippetStatus = true;
//注册this.提示的方法; //注册this.提示的方法;
let thisSuggestions = []; const thisSuggestions = [];
Snippets.map(item => { Snippets.map((item) => {
if (!item.label || !item.kind || !item.insertText) return; if (!item.label || !item.kind || !item.insertText) return;
let tarItem = Object.assign(item, { const tarItem = Object.assign(item, {
label: item.label, label: item.label,
kind: monaco.languages.CompletionItemKind[item.kind], kind: monaco.languages.CompletionItemKind[item.kind],
insertText: item.insertText insertText: item.insertText,
}); });
if (item.insertTextRules) if (item.insertTextRules)
tarItem.insertTextRules = monaco.languages.CompletionItemInsertTextRule[item.insertTextRules]; tarItem.insertTextRules = monaco.languages.CompletionItemInsertTextRule[item.insertTextRules];
@ -412,17 +422,17 @@ class MonacoEditorDefaultView extends PureComponent {
}); });
monaco.languages.registerCompletionItemProvider('javascript', { monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: (model, position) => { provideCompletionItems: (model, position) => {
let textUntilPosition = model.getValueInRange({ const textUntilPosition = model.getValueInRange({
startLineNumber: position.lineNumber, startLineNumber: position.lineNumber,
startColumn: 1, startColumn: 1,
endLineNumber: position.lineNumber, endLineNumber: position.lineNumber,
endColumn: position.column endColumn: position.column,
}); });
let match = textUntilPosition.match(/(^this\.)|(\sthis\.)/); const match = textUntilPosition.match(/(^this\.)|(\sthis\.)/);
let suggestions = match ? thisSuggestions : []; const suggestions = match ? thisSuggestions : [];
return { suggestions: suggestions }; return { suggestions: suggestions };
}, },
triggerCharacters: ['.'] triggerCharacters: ['.'],
}); });
} }
} }
@ -448,18 +458,18 @@ window.MonacoEnvironment = {
} }
return `${prefix}${encodeURIComponent(` return `${prefix}${encodeURIComponent(`
importScripts('${baseUrl}editor.worker.js');`)}`; importScripts('${baseUrl}editor.worker.js');`)}`;
} },
}; };
export default class MonacoEditorButtonView extends PureComponent { export default class MonacoEditorButtonView extends PureComponent {
static displayName = 'MonacoEditorButton'; static displayName = 'MonacoEditorButton';
static propTypes = { static propTypes = {
locale: PropTypes.string, locale: PropTypes.string,
messages: PropTypes.object messages: PropTypes.object,
}; };
static defaultProps = { static defaultProps = {
locale: 'zh-CN', locale: 'zh-CN',
messages: zhCN messages: zhCN,
}; };
i18n: any; i18n: any;
objectButtonRef: React.RefObject<unknown>; objectButtonRef: React.RefObject<unknown>;
@ -470,7 +480,7 @@ export default class MonacoEditorButtonView extends PureComponent {
// 兼容代码，待去除 // 兼容代码，待去除
window.__ctx.appHelper.constants = window.__ctx.appHelper.constants || {}; window.__ctx.appHelper.constants = window.__ctx.appHelper.constants || {};
} }
afterHandler(value: { nrs_temp_field: any; }) { afterHandler(value: { nrs_temp_field: any }) {
if (!value) return; if (!value) return;
return value.nrs_temp_field; return value.nrs_temp_field;
} }
@ -485,32 +495,32 @@ export default class MonacoEditorButtonView extends PureComponent {
duration: 1000, duration: 1000,
align: 'cc cc', align: 'cc cc',
overlayProps: { overlayProps: {
target: dom target: dom,
} },
}); });
} }
componentDidMount() { componentDidMount() {
const { registerApi } = this.props; const { registerApi } = this.props;
let objectButtonThis = this.objectButtonRef; const objectButtonThis = this.objectButtonRef;
registerApi && registerApi &&
registerApi({ registerApi({
show: objectButtonThis.showModal, show: objectButtonThis.showModal,
hide: objectButtonThis.hideModal, hide: objectButtonThis.hideModal,
submit: objectButtonThis.submitHandler, submit: objectButtonThis.submitHandler,
setValues: objectButtonThis.setValues setValues: objectButtonThis.setValues,
}); });
} }
render() { render() {
const self = this; const self = this;
const { locale, messages, value, onChange, field, ...restProps } = this.props; const { locale, messages, value, onChange, field, languages, ...restProps } = this.props;
const { id } = field; const { id } = field;
let tarRestProps = { ...restProps }; const tarRestProps = { ...restProps };
tarRestProps.autoSubmit = true; tarRestProps.autoSubmit = true;
tarRestProps.autoFocus = true; tarRestProps.autoFocus = true;
let tarOnSubmit = tarRestProps.onSubmit; const tarOnSubmit = tarRestProps.onSubmit;
//确保monaco快捷键保存，能出发最外层的保存 //确保monaco快捷键保存，能出发最外层的保存
tarRestProps.onSubmit = (value, error) => { tarRestProps.onSubmit = (value, error) => {
let msgDom = document.querySelector('.object-button-overlay .next-dialog-body'); const msgDom = document.querySelector('.object-button-overlay .next-dialog-body');
if (error) return this.message('error', this.i18n('formatError'), msgDom); if (error) return this.message('error', this.i18n('formatError'), msgDom);
this.objectButtonRef && this.objectButtonRef &&
this.objectButtonRef.current && this.objectButtonRef.current &&
@ -518,16 +528,17 @@ export default class MonacoEditorButtonView extends PureComponent {
this.message('success', this.i18n('saved'), msgDom); this.message('success', this.i18n('saved'), msgDom);
}); });
}; };
let tarObjProps = { }; const tarObjProps = {};
tarObjProps.className = 'luna-monaco-button'; tarObjProps.className = 'luna-monaco-button';
if (tarRestProps['data-meta']) { if (tarRestProps['data-meta']) {
delete tarRestProps['data-meta']; delete tarRestProps['data-meta'];
tarObjProps['data-meta'] = 'Field'; tarObjProps['data-meta'] = 'Field';
} }
tarObjProps.id = id; tarObjProps.id = id;
tarObjProps.value = value || ''; tarObjProps.value = value || '';
tarObjProps.onChange = onChange; tarObjProps.onChange = onChange;
let tarRule = []; const tarRule = [];
//判断，如果是json，function, object等类型，自动追加校验规则； //判断，如果是json，function, object等类型，自动追加校验规则；
if (tarRestProps.language && ['json', 'function', 'object'].includes(tarRestProps.language)) { if (tarRestProps.language && ['json', 'function', 'object'].includes(tarRestProps.language)) {
if (['json', 'object'].includes(tarRestProps.language)) { if (['json', 'object'].includes(tarRestProps.language)) {
@ -538,7 +549,7 @@ export default class MonacoEditorButtonView extends PureComponent {
} else { } else {
callback(); callback();
} }
} },
}); });
} else { } else {
tarRule.push({ tarRule.push({
@ -548,7 +559,7 @@ export default class MonacoEditorButtonView extends PureComponent {
} else { } else {
callback(); callback();
} }
} },
}); });
} }
} }
@ -564,7 +575,7 @@ export default class MonacoEditorButtonView extends PureComponent {
onSubmit={tarOnSubmit} onSubmit={tarOnSubmit}
> >
<FormItem name="nrs_temp_field" rules={tarRule}> <FormItem name="nrs_temp_field" rules={tarRule}>
<MonacoEditorDefaultView {...tarRestProps} registerApi={(apis: any) => Object.assign(this, apis)} /> <MonacoEditorDefaultView {...tarRestProps} registerApi={(apis: any) => Object.assign(this, apis)} />
</FormItem> </FormItem>
</ObjectButton> </ObjectButton>
</div> </div>

9
packages/editor-skeleton/src/components/array-setter/index.tsx
View File

@ -39,7 +39,7 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
} }
const itemsMap = state ? state.itemsMap : new Map<string | number, SettingField>(); const itemsMap = state ? state.itemsMap : new Map<string | number, SettingField>();
let items = state ? state.items.slice() : []; const items = state ? state.items.slice() : [];
if (newLength > originLength) { if (newLength > originLength) {
for (let i = originLength; i < newLength; i++) { for (let i = originLength; i < newLength; i++) {
const item = field.createField({ const item = field.createField({
@ -82,9 +82,10 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
}); });
} }
private scrollToLast: boolean = false; private scrollToLast = false;
onAdd() { onAdd() {
const { items, itemsMap } = this.state; const { items, itemsMap } = this.state;
debugger;
const { itemSetter } = this.props; const { itemSetter } = this.props;
const initialValue = typeof itemSetter === 'object' ? (itemSetter as any).initialValue : null; const initialValue = typeof itemSetter === 'object' ? (itemSetter as any).initialValue : null;
const item = this.props.field.createField({ const item = this.props.field.createField({
@ -134,7 +135,9 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> {
render() { render() {
let columns: any = null; let columns: any = null;
if (this.props.columns) { if (this.props.columns) {
columns = this.props.columns.map((column) => <Title key={column.name} title={column.title || (column.name as string)} />); columns = this.props.columns.map((column) => (
<Title key={column.name} title={column.title || (column.name as string)} />
));
} }
const { items } = this.state; const { items } = this.state;

4
packages/editor-skeleton/src/register-defaults.ts
View File

@ -37,7 +37,7 @@ registerSetter('SlotSetter', {
title: { title: {
type: 'i18n', type: 'i18n',
'zh-CN': '插槽输入', 'zh-CN': '插槽输入',
'en-US': 'Slot Setter' 'en-US': 'Slot Setter',
}, },
condition: (field: any) => { condition: (field: any) => {
return isJSSlot(field.getValue()); return isJSSlot(field.getValue());
@ -48,7 +48,7 @@ registerSetter('SlotSetter', {
} }
return { return {
type: 'JSSlot', type: 'JSSlot',
value: value value: value,
}; };
}, },
recommend: true, recommend: true,

87
packages/editor-skeleton/src/transducers/addon-combine.ts
View File

@ -46,7 +46,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
const isRoot: boolean = componentName === 'Page' || componentName === 'Component'; const isRoot: boolean = componentName === 'Page' || componentName === 'Component';
const eventsDefinition: any[] = []; const eventsDefinition: any[] = [];
const supportedLifecycles = const supportedLifecycles =
supports.lifecycles || supports.lifecycles ||
(isRoot (isRoot
? /*[ ? /*[
{ {
@ -87,22 +87,24 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
if (componentName === 'Slot') { if (componentName === 'Slot') {
if (!configure.component) { if (!configure.component) {
configure.component = { configure.component = {
isContainer: true isContainer: true,
} };
} else if (typeof configure.component === 'object'){ } else if (typeof configure.component === 'object') {
configure.component.isContainer = true; configure.component.isContainer = true;
} }
basicInfo.icon = IconSlot; basicInfo.icon = IconSlot;
propsGroup = [{ propsGroup = [
name: getConvertedExtraKey('title'), {
title: { name: getConvertedExtraKey('title'),
type: 'i18n', title: {
'en-US': 'Slot Title', type: 'i18n',
'zh-CN': '插槽标题' 'en-US': 'Slot Title',
'zh-CN': '插槽标题',
},
setter: 'StringSetter',
defaultValue: '插槽容器',
}, },
setter: 'StringSetter', ];
defaultValue: '插槽容器'
}]
} }
/* /*
propsGroup.push({ propsGroup.push({
@ -199,13 +201,13 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
}, },
setValue(field: SettingTarget, eventDataList: any[]) { setValue(field: SettingTarget, eventDataList: any[]) {
eventDataList.map((item)=>{ eventDataList.map((item) => {
field.parent.setPropValue(item.name,{ field.parent.setPropValue(item.name, {
type: 'JSFunction', type: 'JSFunction',
value: `function(){ this.${item.relatedEventName}() }` value: `function(){ this.${item.relatedEventName}() }`,
}) });
return item; return item;
}) });
return; return;
}, },
}, },
@ -219,11 +221,14 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
name: getConvertedExtraKey('condition'), name: getConvertedExtraKey('condition'),
title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' }, title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' },
defaultValue: true, defaultValue: true,
setter: [{ setter: [
componentName: 'BoolSetter', {
}, { componentName: 'BoolSetter',
componentName: 'VariableSetter' },
}], {
componentName: 'VariableSetter',
},
],
}); });
} }
if (supports.loop !== false) { if (supports.loop !== false) {
@ -235,14 +240,17 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
name: getConvertedExtraKey('loop'), name: getConvertedExtraKey('loop'),
title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' }, title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
defaultValue: [], defaultValue: [],
setter: [{ setter: [
componentName: 'JsonSetter', {
props: { componentName: 'JsonSetter',
label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'}, props: {
label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data' },
},
}, },
}, { {
componentName: 'VariableSetter' componentName: 'VariableSetter',
}], },
],
}, },
{ {
name: getConvertedExtraKey('loopArgs.0'), name: getConvertedExtraKey('loopArgs.0'),
@ -251,7 +259,7 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
componentName: 'StringSetter', componentName: 'StringSetter',
props: { props: {
placeholder: { type: 'i18n', 'zh-CN': '默认为: item', 'en-US': 'Defaults: item' }, placeholder: { type: 'i18n', 'zh-CN': '默认为: item', 'en-US': 'Defaults: item' },
} },
}, },
}, },
{ {
@ -261,20 +269,23 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
componentName: 'StringSetter', componentName: 'StringSetter',
props: { props: {
placeholder: { type: 'i18n', 'zh-CN': '默认为: index', 'en-US': 'Defaults: index' }, placeholder: { type: 'i18n', 'zh-CN': '默认为: index', 'en-US': 'Defaults: index' },
} },
}, },
}, },
{ {
name: 'key', name: 'key',
title: '循环 Key', title: '循环 Key',
setter: [{ setter: [
componentName: 'StringSetter', {
}, { componentName: 'StringSetter',
componentName: 'VariableSetter' },
}], {
componentName: 'VariableSetter',
},
],
}, },
], ],
}) });
} }
} }
if (advanceGroup.length > 0) { if (advanceGroup.length > 0) {

38
packages/editor-skeleton/src/transducers/parse-props.ts
View File

@ -23,7 +23,8 @@ function propConfigToFieldConfig(propConfig: PropConfig): FieldConfig {
return { return {
title, title,
...propConfig, ...propConfig,
setter: propTypeToSetter(propConfig.propType), // TODO 这边直接用propConfig，将setter丢在propconfig里，需要确认是否在PropConfig扩展还是换实现
setter: propConfig.setter ? propConfig.setter : propTypeToSetter(propConfig.propType),
}; };
} }
@ -32,7 +33,7 @@ function propTypeToSetter(propType: PropType): SetterType {
let isRequired: boolean | undefined = false; let isRequired: boolean | undefined = false;
if (typeof propType === 'string') { if (typeof propType === 'string') {
typeName = propType; typeName = propType;
} else if (typeof propType === 'object'){ } else if (typeof propType === 'object') {
typeName = propType.type; typeName = propType.type;
isRequired = propType.isRequired; isRequired = propType.isRequired;
} else { } else {
@ -123,6 +124,7 @@ function propTypeToSetter(propType: PropType): SetterType {
}, },
}, },
isRequired, isRequired,
initialValue: {},
}; };
case 'array': case 'array':
case 'arrayOf': case 'arrayOf':
@ -163,9 +165,29 @@ function propTypeToSetter(propType: PropType): SetterType {
const EVENT_RE = /^on[A-Z][\w]*$/; const EVENT_RE = /^on[A-Z][\w]*$/;
export default function(metadata: TransformedComponentMetadata): TransformedComponentMetadata { export default function(metadata: TransformedComponentMetadata): TransformedComponentMetadata {
const { configure } = metadata; const { configure = {} } = metadata;
// TODO types后续补充
let extendsProps: any = null;
if (configure.props) { if (configure.props) {
return metadata; if (Array.isArray(configure.props)) {
return metadata;
}
const { isExtends, override = [] } = configure.props;
// 不开启继承时，直接返回configure配置
if (!isExtends) {
return {
...metadata,
configure: {
props: [...override],
},
};
}
extendsProps = {};
// 开启继承后，缓存重写内容的配置
override.forEach((prop: any) => {
extendsProps[prop.name] = prop;
});
} }
if (!metadata.props) { if (!metadata.props) {
@ -218,6 +240,14 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
return; return;
} }
// 存在覆盖配置时
if (extendsProps) {
debugger;
if (name in extendsProps) {
prop = extendsProps[name];
}
}
props.push(propConfigToFieldConfig(prop)); props.push(propConfigToFieldConfig(prop));
}); });

2
packages/types/src/field-config.ts
View File

@ -51,7 +51,7 @@ export interface FieldExtraProps {
mode?: 'plaintext' | 'paragraph' | 'article'; mode?: 'plaintext' | 'paragraph' | 'article';
// 从 contentEditable 获取内容并设置到属性 // 从 contentEditable 获取内容并设置到属性
onSaveContent?: (content: string, prop: any) => any; onSaveContent?: (content: string, prop: any) => any;
} };
} }
export interface FieldConfig extends FieldExtraProps { export interface FieldConfig extends FieldExtraProps {