From 3e9a445001dd0e4ebbf45f18af1ee844ca3a7332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= <changyun.pcy@alibaba-inc.com>
Date: Wed, 2 Dec 2020 16:19:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=AE=8C=E5=96=84=20uti?=
 =?UTF-8?q?ls=20=E9=9D=A2=E6=9D=BF,=20=E9=BB=98=E8=AE=A4=E4=B8=8D=E7=94=A8?=
 =?UTF-8?q?=E4=BC=A0=E5=85=A5=E7=B1=BB=E5=9E=8B=E5=88=99=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81NPM,=20TNPM=20=E5=92=8C=20function=20?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/plugin-utils-pane/package.json       |  5 ++
 .../src/form-components/js-function.tsx       | 39 ++++++++------
 packages/plugin-utils-pane/src/index.tsx      |  2 +-
 packages/plugin-utils-pane/src/list.tsx       |  4 +-
 packages/plugin-utils-pane/src/pane.tsx       | 14 ++---
 .../plugin-utils-pane/src/utils-defaults.tsx  | 54 +++++++++----------
 packages/plugin-utils-pane/src/utils-form.tsx |  6 +--
 7 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/packages/plugin-utils-pane/package.json b/packages/plugin-utils-pane/package.json
index d5b55841e..d4291b9b7 100644
--- a/packages/plugin-utils-pane/package.json
+++ b/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",
diff --git a/packages/plugin-utils-pane/src/form-components/js-function.tsx b/packages/plugin-utils-pane/src/form-components/js-function.tsx
index 51651020b..358b80cf8 100644
--- a/packages/plugin-utils-pane/src/form-components/js-function.tsx
+++ b/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);
diff --git a/packages/plugin-utils-pane/src/index.tsx b/packages/plugin-utils-pane/src/index.tsx
index c6bcb2903..5b945162b 100644
--- a/packages/plugin-utils-pane/src/index.tsx
+++ b/packages/plugin-utils-pane/src/index.tsx
@@ -13,7 +13,7 @@ export interface UtilsPaneProps extends PluginProps {
   /**
    * 支持的 Util 的类型
    */
-  utilsTypes: UtilTypeInfo[];
+  utilsTypes?: UtilTypeInfo[];
 
   /**
    * 初始的 Utils (若 schema 中尚未定义 utils)
diff --git a/packages/plugin-utils-pane/src/list.tsx b/packages/plugin-utils-pane/src/list.tsx
index 64dbc1650..0cfe6e910 100644
--- a/packages/plugin-utils-pane/src/list.tsx
+++ b/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>
diff --git a/packages/plugin-utils-pane/src/pane.tsx b/packages/plugin-utils-pane/src/pane.tsx
index 2d02f0fef..01e54e4ec 100644
--- a/packages/plugin-utils-pane/src/pane.tsx
+++ b/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()}
diff --git a/packages/plugin-utils-pane/src/utils-defaults.tsx b/packages/plugin-utils-pane/src/utils-defaults.tsx
index 729268e9c..fe5e8f236 100644
--- a/packages/plugin-utils-pane/src/utils-defaults.tsx
+++ b/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',
-    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);
+  // }
+  // `,
+  //     },
+  //   },
 ];
diff --git a/packages/plugin-utils-pane/src/utils-form.tsx b/packages/plugin-utils-pane/src/utils-form.tsx
index 49f8c66b8..e01ccfdc2 100644
--- a/packages/plugin-utils-pane/src/utils-form.tsx
+++ b/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_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}