mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-12 17:08:14 +00:00
feat: 🎸 完善 utils 面板, 默认不用传入类型则表示支持NPM, TNPM 和 function 类型
This commit is contained in:
牧毅
parent
425c24d03b
commit
3e9a445001
@ -24,6 +24,11 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ali/lowcode-editor-core": "^1.0.8-0",
|
||||
"@formily/next": "^1.3.2",
|
||||
"@formily/next-components": "^1.3.2",
|
||||
"@formily/react-schema-renderer": "^1.3.2",
|
||||
"react-monaco-editor": "^0.40.0",
|
||||
"styled-components": "^5.2.0",
|
||||
"prop-types": "^15.5.8",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1",
|
||||
|
||||
@ -6,6 +6,7 @@ import noop from 'lodash/noop';
|
||||
export interface JSFunctionProps {
|
||||
className: string;
|
||||
value: string;
|
||||
defaultValue: string;
|
||||
onChange?: (val: string) => void;
|
||||
}
|
||||
|
||||
@ -21,6 +22,29 @@ class InternalJSFunction extends PureComponent<JSFunctionProps, unknown> {
|
||||
|
||||
private monacoRef: MonacoRef | null = null;
|
||||
|
||||
componentDidMount() {
|
||||
const { value, defaultValue, onChange } = this.props;
|
||||
|
||||
if (!value && defaultValue && onChange) {
|
||||
onChange(defaultValue);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value, defaultValue } = this.props;
|
||||
return (
|
||||
<MonacoEditor
|
||||
theme="vs-dark"
|
||||
width={400}
|
||||
height={150}
|
||||
defaultValue={value || defaultValue}
|
||||
language="js"
|
||||
onChange={this.handleEditorChange}
|
||||
editorWillMount={this.handleEditorWillMount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
private handleEditorChange = () => {
|
||||
if (
|
||||
this.monacoRef &&
|
||||
@ -35,21 +59,6 @@ class InternalJSFunction extends PureComponent<JSFunctionProps, unknown> {
|
||||
private handleEditorWillMount: EditorWillMount = (monaco) => {
|
||||
this.monacoRef = monaco;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value } = this.props;
|
||||
return (
|
||||
<MonacoEditor
|
||||
theme="vs-dark"
|
||||
width={400}
|
||||
height={150}
|
||||
defaultValue={value}
|
||||
language="js"
|
||||
onChange={this.handleEditorChange}
|
||||
editorWillMount={this.handleEditorWillMount}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const JSFunction = connect()(InternalJSFunction);
|
||||
|
||||
@ -13,7 +13,7 @@ export interface UtilsPaneProps extends PluginProps {
|
||||
/**
|
||||
* 支持的 Util 的类型
|
||||
*/
|
||||
utilsTypes: UtilTypeInfo[];
|
||||
utilsTypes?: UtilTypeInfo[];
|
||||
|
||||
/**
|
||||
* 初始的 Utils (若 schema 中尚未定义 utils)
|
||||
|
||||
@ -51,7 +51,7 @@ export class UtilList extends PureComponent<UtilsListProps, State> {
|
||||
}
|
||||
};
|
||||
|
||||
private handleRemoveDataSource = (id: any) => {
|
||||
private handleRemoveUtilItem = (id: any) => {
|
||||
if (this.props.onRemoveUtil) {
|
||||
this.props.onRemoveUtil(id);
|
||||
}
|
||||
@ -103,7 +103,7 @@ export class UtilList extends PureComponent<UtilsListProps, State> {
|
||||
复制
|
||||
</Button>
|
||||
)}
|
||||
<Button size="small" onClick={this.handleRemoveDataSource.bind(this, item.name)}>
|
||||
<Button size="small" onClick={this.handleRemoveUtilItem.bind(this, item.name)}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -136,7 +136,7 @@ export class UtilsPane extends PureComponent<UtilsPaneProps, State> {
|
||||
return;
|
||||
}
|
||||
|
||||
this.openEditDataSourceTab(cloneDeep(targetUtil));
|
||||
this.openEditItemTab(cloneDeep(targetUtil));
|
||||
};
|
||||
|
||||
private handleTabChange = (activeTabKey: string | number) => {
|
||||
@ -165,19 +165,19 @@ export class UtilsPane extends PureComponent<UtilsPaneProps, State> {
|
||||
}
|
||||
};
|
||||
|
||||
private handleCreateItemBtnClick = (dataSourceType: string) => {
|
||||
private handleCreateItemBtnClick = (utilType: string) => {
|
||||
this.openCreateItemTab({
|
||||
type: dataSourceType as UtilItem['type'],
|
||||
type: utilType as UtilItem['type'],
|
||||
});
|
||||
};
|
||||
|
||||
private handleCreateItemMenuBtnClick = (dataSourceType: string) => {
|
||||
private handleCreateItemMenuBtnClick = (utilType: string) => {
|
||||
this.openCreateItemTab({
|
||||
type: dataSourceType as UtilItem['type'],
|
||||
type: utilType as UtilItem['type'],
|
||||
});
|
||||
};
|
||||
|
||||
private openEditDataSourceTab = (utilItem: UtilItem) => {
|
||||
private openEditItemTab = (utilItem: UtilItem) => {
|
||||
const { tabItems } = this.state;
|
||||
|
||||
if (!tabItems.find((item) => item.key === PaneTabKey.Edit)) {
|
||||
@ -287,7 +287,7 @@ export class UtilsPane extends PureComponent<UtilsPaneProps, State> {
|
||||
const { activeTabKey, tabItems } = this.state;
|
||||
|
||||
return (
|
||||
<div className="lowcode-plugin-datasource-pane">
|
||||
<div className="lowcode-plugin-utils-pane">
|
||||
<Tab
|
||||
activeKey={activeTabKey}
|
||||
extra={this.renderTabExtraContent()}
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
import { UtilItem } from '@ali/lowcode-types';
|
||||
|
||||
export const DEFAULT_UTILS: UtilItem[] = [
|
||||
{
|
||||
type: 'npm',
|
||||
name: 'clone',
|
||||
content: {
|
||||
package: 'lodash',
|
||||
destructuring: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'npm',
|
||||
name: 'moment',
|
||||
content: {
|
||||
package: 'moment',
|
||||
destructuring: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'function',
|
||||
name: 'record',
|
||||
content: {
|
||||
type: 'JSFunction',
|
||||
value: `function(logkey, gmkey, gokey, reqMethod) {
|
||||
goldlog.record('/demo.event.' + logkey, gmkey, gokey, reqMethod);
|
||||
}
|
||||
`,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: 'npm',
|
||||
// name: 'clone',
|
||||
// content: {
|
||||
// package: 'lodash',
|
||||
// destructuring: true,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: 'npm',
|
||||
// name: 'moment',
|
||||
// content: {
|
||||
// package: 'moment',
|
||||
// destructuring: false,
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: 'function',
|
||||
// name: 'record',
|
||||
// content: {
|
||||
// type: 'JSFunction',
|
||||
// value: `function(logkey, gmkey, gokey, reqMethod) {
|
||||
// goldlog.record('/demo.event.' + logkey, gmkey, gokey, reqMethod);
|
||||
// }
|
||||
// `,
|
||||
// },
|
||||
// },
|
||||
];
|
||||
|
||||
@ -9,8 +9,8 @@ import React, { PureComponent } from 'react';
|
||||
import { JSFunction } from './form-components';
|
||||
|
||||
registerValidationFormats({
|
||||
util_npm_version_format: /^\d+\.\d+\.\d+(-[a-z0-9-]+(\.[a-z0-9]+))?$/i,
|
||||
util_name_js_identifier: /[a-z$_][a-z$_0-9]+/i,
|
||||
util_npm_version_format: /^\d+\.\d+\.\d+(-[a-z0-9-]+(\.[a-z0-9]+))?$/i, // 版本号的规范
|
||||
util_name_js_identifier: /^[a-z$_][a-z$_0-9]*$/i, // JS 标识符的规范
|
||||
});
|
||||
|
||||
type FlatUtilItem = {
|
||||
@ -160,7 +160,7 @@ export class UtilsForm extends PureComponent<UtilsFormProps, unknown> {
|
||||
const { item } = this.props;
|
||||
|
||||
return (
|
||||
<div className="lowcode-plugin-datasource-form">
|
||||
<div className="lowcode-plugin-utils-form">
|
||||
<SchemaForm
|
||||
onSubmit={this.handleFormSubmit}
|
||||
components={this.formComponents}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user