feat: 🎸 完善 utils 面板, 默认不用传入类型则表示支持NPM, TNPM 和 function 类型

packages/plugin-utils-pane/package.json

@@ -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",

packages/plugin-utils-pane/src/form-components/js-function.tsx

@@ -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);

packages/plugin-utils-pane/src/index.tsx

@@ -13,7 +13,7 @@ export interface UtilsPaneProps extends PluginProps {
   /**
    * 支持的 Util 的类型
    */
-  utilsTypes: UtilTypeInfo[];
+  utilsTypes?: UtilTypeInfo[];
 
   /**
    * 初始的 Utils (若 schema 中尚未定义 utils)

packages/plugin-utils-pane/src/list.tsx

@@ -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>

packages/plugin-utils-pane/src/pane.tsx

@@ -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()}

packages/plugin-utils-pane/src/utils-defaults.tsx

@@ -1,31 +1,31 @@
 import { UtilItem } from '@ali/lowcode-types';
 
 export const DEFAULT_UTILS: UtilItem[] = [
-  {
+  //   {
-    type: 'npm',
+  //     type: 'npm',
-    name: 'clone',
+  //     name: 'clone',
-    content: {
+  //     content: {
-      package: 'lodash',
+  //       package: 'lodash',
-      destructuring: true,
+  //       destructuring: true,
-    },
+  //     },
-  },
+  //   },
-  {
+  //   {
-    type: 'npm',
+  //     type: 'npm',
-    name: 'moment',
+  //     name: 'moment',
-    content: {
+  //     content: {
-      package: 'moment',
+  //       package: 'moment',
-      destructuring: false,
+  //       destructuring: false,
-    },
+  //     },
-  },
+  //   },
-  {
+  //   {
-    type: 'function',
+  //     type: 'function',
-    name: 'record',
+  //     name: 'record',
-    content: {
+  //     content: {
-      type: 'JSFunction',
+  //       type: 'JSFunction',
-      value: `function(logkey, gmkey, gokey, reqMethod) {
+  //       value: `function(logkey, gmkey, gokey, reqMethod) {
-  goldlog.record('/demo.event.' + logkey, gmkey, gokey, reqMethod);
+  //   goldlog.record('/demo.event.' + logkey, gmkey, gokey, reqMethod);
-}
+  // }
-`,
+  // `,
-    },
+  //     },
-  },
+  //   },
 ];

packages/plugin-utils-pane/src/utils-form.tsx

@@ -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_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_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}