ronds-metadata 1.3.76 → 1.3.78

package/es/comps/CodeEdit/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import 'monaco-editor/esm/vs/basic-languages/pgsql/pgsql.contribution.js';
+import './index.less';
 interface ICodeEditProps {
     value?: string;
     theme?: 'light' | 'vs-dark';

package/es/comps/CodeEdit/index.js

@@ -4,12 +4,13 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /*
  * @Author: wangxian
  * @Date: 2023-09-08 10:02:20
- * @LastEditTime: 2023-09-08 18:47:50
+ * @LastEditTime: 2024-08-22 16:37:50
  */
 import Editor, { useMonaco } from '@monaco-editor/react';
 import React from 'react';
 // 引入所需的语言库
 import 'monaco-editor/esm/vs/basic-languages/pgsql/pgsql.contribution.js';
+import './index.less';
 var CodeEdit = function CodeEdit(props) {
   var value = props.value,
     width = props.width,
@@ -20,6 +21,7 @@ var CodeEdit = function CodeEdit(props) {
     mode = _props$mode === void 0 ? 'javascript' : _props$mode,
     onChange = props.onChange;
   var editorRef = React.useRef(null);
+  var firstLoadRef = React.useRef(true);
   var monaco = useMonaco();
   var initSuggestion = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var l, _yield$import, conf, language;
@@ -40,13 +42,6 @@ var CodeEdit = function CodeEdit(props) {
           language = _yield$import.language;
           l = language;
         case 8:
-          if (mode === 'python') {
-            l = {
-              keywords: ['signal'],
-              operators: ['add'],
-              builtinFunctions: ['alarm', 'plot']
-            };
-          }
           monaco.languages.registerCompletionItemProvider(mode, {
             provideCompletionItems: function provideCompletionItems(model, position) {
               var _l, _l2, _l3;
@@ -89,43 +84,46 @@ var CodeEdit = function CodeEdit(props) {
             },
             triggerCharacters: ['$', '.', '=', ':'] // 触发提示的字符 可以定义多个
           });
-        case 10:
+        case 9:
         case "end":
           return _context.stop();
       }
     }, _callee);
   })), [monaco]);
-  var initHighlight = React.useCallback(function () {
-    monaco.languages.setMonarchTokensProvider(mode, {
-      ignoreCase: true,
-      tokenizer: {
-        root: [[/plot/, {
-          token: 'keyword'
-        }], [/alarm/, {
-          token: 'keyword'
-        }], [/add/, {
-          token: 'keyword'
-        }], [/signal/, {
-          token: 'string.escape'
-        }]]
-      }
-    });
-  }, [monaco]);
+  // const initHighlight = React.useCallback(() => {
+  //   monaco.languages.setMonarchTokensProvider(mode, {
+  //     ignoreCase: true,
+  //     tokenizer: {
+  //       root: [
+  //         [/plot/, { token: 'keyword' }],
+  //         [/alarm/, { token: 'keyword' }],
+  //         [/add/, { token: 'keyword' }],
+  //         [/signal/, { token: 'string.escape' }],
+  //       ],
+  //     },
+  //   });
+  // }, [monaco]);
   React.useEffect(function () {
-    if (monaco) {
-      initHighlight();
+    if (monaco && firstLoadRef.current) {
+      firstLoadRef.current = false;
+      // initHighlight();
       initSuggestion();
     }
   }, [monaco, value, initSuggestion]);
+  React.useEffect(function () {
+    if (value) {}
+  }, [value]);
   var onEditorChange = function onEditorChange(data) {
-    initHighlight();
+    // initHighlight();
     onChange && onChange(data);
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Editor, {
+    className: "my-code-editor",
     width: width || '100%',
     height: height || '100%',
     theme: theme,
     defaultLanguage: mode,
+    value: value,
     defaultValue: value
     // beforeMount={onEditorWillMount}
     ,
@@ -135,7 +133,9 @@ var CodeEdit = function CodeEdit(props) {
     options: {
       readOnly: false,
       automaticLayout: true,
-      wordWrap: 'on'
+      wordWrap: 'on',
+      quickSuggestions: true,
+      renderWhitespace: 'all'
     },
     onChange: onEditorChange
   }));

package/es/comps/CodeEdit/index.less

@@ -0,0 +1,6 @@
+.my-code-editor {
+  .suggest-widget {
+    position: absolute !important;
+    z-index: 1000 !important; /* 确保它在最顶层 */
+  }
+}

package/es/comps/MetadataForm/DataCell/business/config.d.ts

@@ -153,7 +153,6 @@ export declare const BusinessSchema: {
                     common: {
                         label: string;
                         colSpan: number;
-                        labelSpan: number;
                         require: boolean;
                     };
                     'common-en-US': {};
@@ -262,7 +261,6 @@ export declare const BusinessSchema: {
                     common: {
                         label: string;
                         colSpan: number;
-                        labelSpan: number;
                     };
                     'common-en-US': {};
                     text: {

package/es/comps/MetadataForm/DataCell/business/config.js

@@ -86,7 +86,7 @@ var ETL_SOURCE_SCHEMA = [{
       refId: 'com.ronds.schema.default.Rule.Form',
       value: {
         common: {
-          label: '批处理大小',
+          label: '获取尺寸',
           require: true,
           labelSpan: 4,
           depend: {
@@ -171,7 +171,6 @@ var ETL_SOURCE_SCHEMA = [{
         common: {
           label: 'Spark Sql',
           colSpan: 2,
-          labelSpan: 4,
           require: true
         },
         'common-en-US': {},
@@ -294,8 +293,7 @@ var ETL_DIRECTION_SCHEMA = [{
       value: {
         common: {
           label: '字段映射',
-          colSpan: 2,
-          labelSpan: 4
+          colSpan: 2
         },
         'common-en-US': {},
         text: {

package/es/comps/MetadataForm/DataCell/business/index.js

@@ -8,11 +8,17 @@ var BusinessForm = function BusinessForm(props) {
     disabled = props.disabled,
     value = props.value,
     onChange = props.onChange;
+  var formRef = React.useRef();
   var schema = React.useMemo(function () {
     var _extraInfo$bussiness;
     return BusinessSchema[extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$bussiness = extraInfo.bussiness) === null || _extraInfo$bussiness === void 0 ? void 0 : _extraInfo$bussiness.type];
   }, [extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$bussiness2 = extraInfo.bussiness) === null || _extraInfo$bussiness2 === void 0 ? void 0 : _extraInfo$bussiness2.type]);
   var valueRef = React.useRef({});
+  React.useEffect(function () {
+    if (value) {
+      formRef.current.setFieldsValue(_objectSpread({}, value));
+    }
+  }, [value]);
   var triggerChange = function triggerChange(changedValue) {
     valueRef.current = _objectSpread(_objectSpread({}, valueRef.current), changedValue);
     onChange && onChange(valueRef.current);
@@ -23,7 +29,7 @@ var BusinessForm = function BusinessForm(props) {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MetadataForm, {
     schema: schema,
     getFormInstance: function getFormInstance(form) {
-      // formRef.current = form;
+      formRef.current = form;
     },
     onValuesChange: onValuesChange
   }));

package/es/comps/MetadataForm/DataCell/plugin/Datasource/Cassandra.d.ts

@@ -5,6 +5,7 @@ interface ICassandraDatasourceProps {
     wrapperCol: string;
     labelCol: string;
     onChange?: any;
+    initialValue?: any;
 }
 declare const CassandraDatasource: (props: ICassandraDatasourceProps) => React.JSX.Element;
 export default CassandraDatasource;

package/es/comps/MetadataForm/DataCell/plugin/Datasource/Cassandra.js

@@ -19,25 +19,36 @@ var CassandraDatasource = function CassandraDatasource(props) {
     datasource = props.datasource,
     onChange = props.onChange,
     wrapperCol = props.wrapperCol,
-    labelCol = props.labelCol;
+    labelCol = props.labelCol,
+    initialValue = props.initialValue;
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     keySpace = _React$useState2[0],
     setKeySpace = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dataTable = _React$useState4[0],
+    setDataTable = _React$useState4[1];
   var keySpaceOpts = useGetDatasource('Cassandra', 2, datasource);
   var dataTableOpts = useGetDatasource('Cassandra', 3, datasource, keySpace ? JSON.parse(keySpace).name : undefined);
   var onKeySpaceChange = function onKeySpaceChange(value) {
-    debugger;
     setKeySpace(value);
     onChange && onChange({
       keyspace: value
     });
   };
   var onDataTableChange = function onDataTableChange(value) {
+    setDataTable(value);
     onChange && onChange({
       dt: value
     });
   };
+  React.useEffect(function () {
+    if (initialValue) {
+      onKeySpaceChange(initialValue.keyspace);
+      onDataTableChange(initialValue.dt);
+    }
+  }, [initialValue]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Col, {
     span: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan) && (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.layout) === 'vertical' && 24,
     flex: labelCol
@@ -60,6 +71,7 @@ var CassandraDatasource = function CassandraDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource = extraInfo.datasource) === null || _extraInfo$datasource === void 0 ? void 0 : (_extraInfo$datasource2 = _extraInfo$datasource.cassandra) === null || _extraInfo$datasource2 === void 0 ? void 0 : _extraInfo$datasource2.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: keySpace,
     options: keySpaceOpts,
     onChange: onKeySpaceChange
   })), /*#__PURE__*/React.createElement(_Col, {
@@ -86,6 +98,7 @@ var CassandraDatasource = function CassandraDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource3 = extraInfo.datasource) === null || _extraInfo$datasource3 === void 0 ? void 0 : (_extraInfo$datasource4 = _extraInfo$datasource3.cassandra) === null || _extraInfo$datasource4 === void 0 ? void 0 : _extraInfo$datasource4.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: dataTable,
     options: dataTableOpts,
     onChange: onDataTableChange,
     style: {

package/es/comps/MetadataForm/DataCell/plugin/Datasource/Kafka.d.ts

@@ -1,9 +1,11 @@
+import React from 'react';
 interface IKafkaDatasourceProps {
     extraInfo?: any;
     datasource?: any;
     wrapperCol: string;
     labelCol: string;
     onChange?: any;
+    initialValue?: any;
 }
-declare const KafkaDatasource: (props: IKafkaDatasourceProps) => import("react").JSX.Element;
+declare const KafkaDatasource: (props: IKafkaDatasourceProps) => React.JSX.Element;
 export default KafkaDatasource;

package/es/comps/MetadataForm/DataCell/plugin/Datasource/Kafka.js

@@ -2,22 +2,34 @@ import "antd/es/select/style";
 import _Select from "antd/es/select";
 import "antd/es/col/style";
 import _Col from "antd/es/col";
-import React from "react";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { tr } from '../../../../../framework/locale';
 import { useGetDatasource } from './hooks';
+import React from 'react';
 var KafkaDatasource = function KafkaDatasource(props) {
   var _extraInfo$datasource, _extraInfo$datasource2;
   var extraInfo = props.extraInfo,
     datasource = props.datasource,
     onChange = props.onChange,
     wrapperCol = props.wrapperCol,
-    labelCol = props.labelCol;
+    labelCol = props.labelCol,
+    initialValue = props.initialValue;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    topic = _React$useState2[0],
+    setTopic = _React$useState2[1];
   var topicOpts = useGetDatasource('Kafka', 2, datasource);
   var onTopicChange = function onTopicChange(value) {
+    setTopic(value);
     onChange && onChange({
       topics: value
     });
   };
+  React.useEffect(function () {
+    if (initialValue) {
+      onTopicChange(initialValue.topics);
+    }
+  }, [initialValue]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Col, {
     span: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan) && (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.layout) === 'vertical' && 24,
     flex: labelCol
@@ -39,6 +51,7 @@ var KafkaDatasource = function KafkaDatasource(props) {
     }
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource = extraInfo.datasource) === null || _extraInfo$datasource === void 0 ? void 0 : (_extraInfo$datasource2 = _extraInfo$datasource.kafka) === null || _extraInfo$datasource2 === void 0 ? void 0 : _extraInfo$datasource2.isMutiple) ? 'multiple' : undefined,
+    value: topic,
     allowClear: true,
     options: topicOpts,
     onChange: onTopicChange

package/es/comps/MetadataForm/DataCell/plugin/Datasource/PostgreSQL.d.ts

@@ -5,6 +5,7 @@ interface IPostgreSQLDatasourceProps {
     labelCol: string;
     datasource?: any;
     onChange?: any;
+    initialValue?: any;
 }
 declare const PostgreSQLDatasource: (props: IPostgreSQLDatasourceProps) => React.JSX.Element;
 export default PostgreSQLDatasource;

package/es/comps/MetadataForm/DataCell/plugin/Datasource/PostgreSQL.js

@@ -17,7 +17,8 @@ var PostgreSQLDatasource = function PostgreSQLDatasource(props) {
     wrapperCol = props.wrapperCol,
     labelCol = props.labelCol,
     datasource = props.datasource,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    initialValue = props.initialValue;
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     dataBase = _React$useState2[0],
@@ -26,6 +27,10 @@ var PostgreSQLDatasource = function PostgreSQLDatasource(props) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     schema = _React$useState4[0],
     setSchema = _React$useState4[1];
+  var _React$useState5 = React.useState(),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    dataTable = _React$useState6[0],
+    setDataTable = _React$useState6[1];
   var dataBaseOpts = useGetDatasource('PostgreSql', 2, datasource);
   var schemaOpts = useGetDatasource('PostgreSql', 3, datasource, dataBase ? JSON.parse(dataBase).name : undefined);
   var dataTableOpts = useGetDatasource('PostgreSql', 4, datasource, dataBase ? JSON.parse(dataBase).name : undefined, schema ? JSON.parse(schema).name : undefined);
@@ -42,10 +47,18 @@ var PostgreSQLDatasource = function PostgreSQLDatasource(props) {
     });
   };
   var onDataTableChange = function onDataTableChange(value) {
+    setDataTable(value);
     onChange && onChange({
       dt: value
     });
   };
+  React.useEffect(function () {
+    if (initialValue) {
+      onDataBaseChange(initialValue.db);
+      onSchemaChange(initialValue.schema);
+      onDataTableChange(initialValue.dt);
+    }
+  }, [initialValue]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Col, {
     span: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan) && (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.layout) === 'vertical' && 24,
     flex: labelCol
@@ -68,6 +81,7 @@ var PostgreSQLDatasource = function PostgreSQLDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource = extraInfo.datasource) === null || _extraInfo$datasource === void 0 ? void 0 : (_extraInfo$datasource2 = _extraInfo$datasource.postgreSql) === null || _extraInfo$datasource2 === void 0 ? void 0 : _extraInfo$datasource2.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: dataBase,
     options: dataBaseOpts,
     onChange: onDataBaseChange
   })), /*#__PURE__*/React.createElement(_Col, {
@@ -92,6 +106,7 @@ var PostgreSQLDatasource = function PostgreSQLDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource3 = extraInfo.datasource) === null || _extraInfo$datasource3 === void 0 ? void 0 : (_extraInfo$datasource4 = _extraInfo$datasource3.postgreSql) === null || _extraInfo$datasource4 === void 0 ? void 0 : _extraInfo$datasource4.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: schema,
     options: schemaOpts,
     onChange: onSchemaChange
   })), /*#__PURE__*/React.createElement(_Col, {
@@ -116,6 +131,7 @@ var PostgreSQLDatasource = function PostgreSQLDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource5 = extraInfo.datasource) === null || _extraInfo$datasource5 === void 0 ? void 0 : (_extraInfo$datasource6 = _extraInfo$datasource5.postgreSql) === null || _extraInfo$datasource6 === void 0 ? void 0 : _extraInfo$datasource6.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: dataTable,
     options: dataTableOpts,
     onChange: onDataTableChange
   })));

package/es/comps/MetadataForm/DataCell/plugin/Datasource/SqlServer.d.ts

@@ -5,6 +5,7 @@ interface ISqlServerDatasourceProps {
     wrapperCol: string;
     labelCol: string;
     onChange?: any;
+    initialValue?: any;
 }
 declare const SqlServerDatasource: (props: ISqlServerDatasourceProps) => React.JSX.Element;
 export default SqlServerDatasource;

package/es/comps/MetadataForm/DataCell/plugin/Datasource/SqlServer.js

@@ -12,7 +12,8 @@ var SqlServerDatasource = function SqlServerDatasource(props) {
     datasource = props.datasource,
     wrapperCol = props.wrapperCol,
     labelCol = props.labelCol,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    initialValue = props.initialValue;
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     dataBase = _React$useState2[0],
@@ -21,6 +22,10 @@ var SqlServerDatasource = function SqlServerDatasource(props) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     schema = _React$useState4[0],
     setSchema = _React$useState4[1];
+  var _React$useState5 = React.useState(),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    dataTable = _React$useState6[0],
+    setDataTable = _React$useState6[1];
   var dataBaseOpts = useGetDatasource('SqlServer', 2, datasource);
   var schemaOpts = useGetDatasource('SqlServer', 3, datasource, dataBase ? JSON.parse(dataBase).name : undefined);
   var dataTableOpts = useGetDatasource('SqlServer', 4, datasource, dataBase ? JSON.parse(dataBase).name : undefined, schema ? JSON.parse(schema).name : undefined);
@@ -37,10 +42,18 @@ var SqlServerDatasource = function SqlServerDatasource(props) {
     });
   };
   var onDataTableChange = function onDataTableChange(value) {
+    setDataTable(value);
     onChange && onChange({
       dt: value
     });
   };
+  React.useEffect(function () {
+    if (initialValue) {
+      onDataBaseChange(initialValue.db);
+      onSchemaChange(initialValue.schema);
+      onDataTableChange(initialValue.dt);
+    }
+  }, [initialValue]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Col, {
     span: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan) && (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.layout) === 'vertical' && 24,
     flex: labelCol
@@ -63,6 +76,7 @@ var SqlServerDatasource = function SqlServerDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource = extraInfo.datasource) === null || _extraInfo$datasource === void 0 ? void 0 : (_extraInfo$datasource2 = _extraInfo$datasource.sqlServer) === null || _extraInfo$datasource2 === void 0 ? void 0 : _extraInfo$datasource2.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: dataBase,
     options: dataBaseOpts,
     onChange: onDataBaseChange
   })), /*#__PURE__*/React.createElement(_Col, {
@@ -87,6 +101,7 @@ var SqlServerDatasource = function SqlServerDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource3 = extraInfo.datasource) === null || _extraInfo$datasource3 === void 0 ? void 0 : (_extraInfo$datasource4 = _extraInfo$datasource3.sqlServer) === null || _extraInfo$datasource4 === void 0 ? void 0 : _extraInfo$datasource4.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: schema,
     options: schemaOpts,
     onChange: onSchemaChange
   })), /*#__PURE__*/React.createElement(_Col, {
@@ -111,6 +126,7 @@ var SqlServerDatasource = function SqlServerDatasource(props) {
   }, /*#__PURE__*/React.createElement(_Select, {
     mode: (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource5 = extraInfo.datasource) === null || _extraInfo$datasource5 === void 0 ? void 0 : (_extraInfo$datasource6 = _extraInfo$datasource5.sqlServer) === null || _extraInfo$datasource6 === void 0 ? void 0 : _extraInfo$datasource6.isMutiple) ? 'multiple' : undefined,
     allowClear: true,
+    value: dataTable,
     options: dataTableOpts,
     onChange: onDataTableChange
   })));

package/es/comps/MetadataForm/DataCell/plugin/Datasource/index.js

@@ -34,6 +34,22 @@ var DataSource = function DataSource(props) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     datasource = _React$useState4[0],
     setDatasource = _React$useState4[1];
+  var _React$useState5 = React.useState(),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    kafkaInitValue = _React$useState6[0],
+    setKafkaInitValue = _React$useState6[1];
+  var _React$useState7 = React.useState(),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    postgreSQLInitValue = _React$useState8[0],
+    setPostgreSQLInitValue = _React$useState8[1];
+  var _React$useState9 = React.useState(),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    cassandraInitValue = _React$useState10[0],
+    setCassandraInitValue = _React$useState10[1];
+  var _React$useState11 = React.useState(),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    sqlServerInitValue = _React$useState12[0],
+    setSqlServerInitValue = _React$useState12[1];
   var valueRef = React.useRef({});
   var datasourceOpts = useGetDatasource(dsType);
   var labelCol = useGetLabelCol(extraInfo);
@@ -56,7 +72,8 @@ var DataSource = function DataSource(props) {
     setDsType(value);
     setDatasource('');
     triggerChange({
-      dsType: value
+      dsType: value,
+      datasource: ''
     });
   };
   var onDatasourceChange = function onDatasourceChange(value) {
@@ -68,10 +85,39 @@ var DataSource = function DataSource(props) {
   var onKafkaChange = function onKafkaChange(value) {
     triggerChange(_objectSpread({}, value));
   };
-  var onPgSqlChange = function onPgSqlChange(value) {};
+  var onPgSqlChange = function onPgSqlChange(value) {
+    triggerChange(_objectSpread({}, value));
+  };
   var onCassandraChange = function onCassandraChange(value) {
     triggerChange(_objectSpread({}, value));
   };
+  var onSqlServerChange = function onSqlServerChange(value) {
+    triggerChange(_objectSpread({}, value));
+  };
+  React.useEffect(function () {
+    if (value) {
+      if (value.dsType) {
+        setDsType(value.dsType);
+      }
+      if (value.datasource) {
+        setDatasource(value.datasource);
+      }
+      switch (value === null || value === void 0 ? void 0 : value.dsType) {
+        case 'Kafka':
+          setKafkaInitValue(value);
+          break;
+        case 'PostgreSql':
+          setPostgreSQLInitValue(value);
+          break;
+        case 'Cassandra':
+          setCassandraInitValue(value);
+          break;
+        case 'SqlServer':
+          setSqlServerInitValue(value);
+          break;
+      }
+    }
+  }, [value]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.borderHidden) ? {
       padding: '10px 10px 10px 10px',
@@ -131,25 +177,29 @@ var DataSource = function DataSource(props) {
     labelCol: labelCol,
     extraInfo: extraInfo,
     datasource: datasource,
-    onChange: onKafkaChange
+    onChange: onKafkaChange,
+    initialValue: kafkaInitValue
   }), dsType === 'PostgreSql' && /*#__PURE__*/React.createElement(PostgreSQLDatasource, {
     wrapperCol: wrapperCol,
     labelCol: labelCol,
     extraInfo: extraInfo,
     datasource: datasource,
-    onChange: onPgSqlChange
+    onChange: onPgSqlChange,
+    initialValue: postgreSQLInitValue
   }), dsType === 'Cassandra' && /*#__PURE__*/React.createElement(CassandraDatasource, {
     wrapperCol: wrapperCol,
     labelCol: labelCol,
     extraInfo: extraInfo,
     datasource: datasource,
-    onChange: onCassandraChange
+    onChange: onCassandraChange,
+    initialValue: cassandraInitValue
   }), dsType === 'SqlServer' && /*#__PURE__*/React.createElement(SqlServerDatasource, {
     wrapperCol: wrapperCol,
     labelCol: labelCol,
     extraInfo: extraInfo,
     datasource: datasource,
-    onChange: onCassandraChange
+    onChange: onSqlServerChange,
+    initialValue: sqlServerInitValue
   }))));
 };
 export default DataSource;