ronds-metadata 1.3.74 → 1.3.75

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

@@ -17,7 +17,9 @@ import React from 'react';
 import KafkaDatasource from './Kafka';
 import { LinkOutlined } from '@ant-design/icons';
 import PostgreSQLDatasource from './PostgreSQL';
-import { useGetDatasource } from './hooks';
+import { useGetDatasource, useGetLabelCol, useGetWrapperCol } from './hooks';
+import CassandraDatasource from './Cassandra';
+import SqlServerDatasource from './SqlServer';
 var DataSource = function DataSource(props) {
   var _extraInfo$datasource2;
   var extraInfo = props.extraInfo,
@@ -34,6 +36,8 @@ var DataSource = function DataSource(props) {
     setDatasource = _React$useState4[1];
   var valueRef = React.useRef({});
   var datasourceOpts = useGetDatasource(dsType);
+  var labelCol = useGetLabelCol(extraInfo);
+  var wrapperCol = useGetWrapperCol(extraInfo);
   var datasourceTypeOpts = React.useMemo(function () {
     var _extraInfo$datasource;
     var typeEnum = (extraInfo === null || extraInfo === void 0 ? void 0 : (_extraInfo$datasource = extraInfo.datasource) === null || _extraInfo$datasource === void 0 ? void 0 : _extraInfo$datasource.type) || [];
@@ -50,6 +54,7 @@ var DataSource = function DataSource(props) {
   };
   var onDatasourceTypeChange = function onDatasourceTypeChange(value) {
     setDsType(value);
+    setDatasource('');
     triggerChange({
       dsType: value
     });
@@ -61,9 +66,11 @@ var DataSource = function DataSource(props) {
     }, JSON.parse(value)));
   };
   var onKafkaChange = function onKafkaChange(value) {
-    triggerChange({
-      topics: value
-    });
+    triggerChange(_objectSpread({}, value));
+  };
+  var onPgSqlChange = function onPgSqlChange(value) {};
+  var onCassandraChange = function onCassandraChange(value) {
+    triggerChange(_objectSpread({}, value));
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.borderHidden) ? {
@@ -79,7 +86,7 @@ var DataSource = function DataSource(props) {
     }
   }, /*#__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: (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan) && (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.layout) === 'horizontal' ? "0 0 ".concat((extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan) * 100 / 24, "%") : ''
+    flex: labelCol
   }, /*#__PURE__*/React.createElement("div", {
     className: "ant-form-item-label",
     style: {
@@ -90,7 +97,7 @@ var DataSource = function DataSource(props) {
   }, /*#__PURE__*/React.createElement("label", {
     className: "".concat((extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.require) && 'ant-form-item-required')
   }, tr('数据源')))), /*#__PURE__*/React.createElement(_Col, {
-    flex: (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan) && (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.layout) === 'horizontal' ? "0 0 ".concat((24 - (extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.labelSpan)) * 100 / 24, "%") : 1,
+    flex: wrapperCol,
     style: {
       paddingBottom: '8px'
     }
@@ -101,6 +108,7 @@ var DataSource = function DataSource(props) {
     style: {
       width: '30%'
     },
+    value: dsType,
     options: datasourceTypeOpts,
     onChange: onDatasourceTypeChange
   }), /*#__PURE__*/React.createElement(_Select, {
@@ -108,6 +116,7 @@ var DataSource = function DataSource(props) {
     style: {
       width: 'calc(70% - 32px)'
     },
+    value: datasource,
     options: datasourceOpts,
     onChange: onDatasourceChange
   }), /*#__PURE__*/React.createElement(_Tooltip, {
@@ -118,11 +127,29 @@ var DataSource = function DataSource(props) {
   }, /*#__PURE__*/React.createElement(_Button, {
     icon: /*#__PURE__*/React.createElement(LinkOutlined, null)
   })))), dsType === 'Kafka' && /*#__PURE__*/React.createElement(KafkaDatasource, {
+    wrapperCol: wrapperCol,
+    labelCol: labelCol,
     extraInfo: extraInfo,
     datasource: datasource,
     onChange: onKafkaChange
-  }), dsType === 'PgSql' && /*#__PURE__*/React.createElement(PostgreSQLDatasource, {
-    extraInfo: extraInfo
+  }), dsType === 'PostgreSql' && /*#__PURE__*/React.createElement(PostgreSQLDatasource, {
+    wrapperCol: wrapperCol,
+    labelCol: labelCol,
+    extraInfo: extraInfo,
+    datasource: datasource,
+    onChange: onPgSqlChange
+  }), dsType === 'Cassandra' && /*#__PURE__*/React.createElement(CassandraDatasource, {
+    wrapperCol: wrapperCol,
+    labelCol: labelCol,
+    extraInfo: extraInfo,
+    datasource: datasource,
+    onChange: onCassandraChange
+  }), dsType === 'SqlServer' && /*#__PURE__*/React.createElement(SqlServerDatasource, {
+    wrapperCol: wrapperCol,
+    labelCol: labelCol,
+    extraInfo: extraInfo,
+    datasource: datasource,
+    onChange: onCassandraChange
   }))));
 };
 export default DataSource;

package/es/comps/MetadataForm/DataCell/plugin/MapTable.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface IMapTableProps {
+    extraInfo?: any;
     value?: any;
     onChange?: (value: any) => void;
 }

package/es/comps/MetadataForm/DataCell/plugin/MapTable.js

@@ -1,5 +1,9 @@
 import "antd/es/checkbox/style";
 import _Checkbox from "antd/es/checkbox";
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
 import "antd/es/select/style";
@@ -11,9 +15,11 @@ import { CloseCircleFilled, ArrowRightOutlined } from '@ant-design/icons';
 import React from 'react';
 import Editable from '../../../../comps/Editable';
 import { MetadataFormContext } from '../../interface';
+import { useGetLabelCol } from './Datasource/hooks';
 var MapTable = function MapTable(props) {
   var value = props.value,
-    onChange = props.onChange;
+    onChange = props.onChange,
+    extraInfo = props.extraInfo;
   var _React$useState = React.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     tableDataSource = _React$useState2[0],
@@ -42,6 +48,7 @@ var MapTable = function MapTable(props) {
   var targetEditableStreamRef = React.useRef();
   var _React$useContext = React.useContext(MetadataFormContext),
     form = _React$useContext.form;
+  var labelCol = useGetLabelCol(extraInfo);
   var triggerChange = function triggerChange(changedValue) {
     onChange && onChange(_objectSpread({
       mapping: mapping,
@@ -107,16 +114,24 @@ var MapTable = function MapTable(props) {
   }, [disableArray]);
   React.useEffect(function () {
     var values = form.getFieldsValue().mapTable;
-    values.dataSource && setTableDataSource(values.dataSource);
-    values.dataTarget && setTableDataTarget(values.dataTarget);
-    values.options && setOptions(values.options);
-    if (!disableArray && values.dataSource && values.dataTarget) {
+    (values === null || values === void 0 ? void 0 : values.dataSource) && setTableDataSource(values.dataSource);
+    (values === null || values === void 0 ? void 0 : values.dataTarget) && setTableDataTarget(values.dataTarget);
+    (values === null || values === void 0 ? void 0 : values.options) && setOptions(values.options);
+    if (!disableArray && (values === null || values === void 0 ? void 0 : values.dataSource) && (values === null || values === void 0 ? void 0 : values.dataTarget)) {
       var _values$dataSource, _values$dataTarget;
       var valueArray = new Array(Math.min((_values$dataSource = values.dataSource) === null || _values$dataSource === void 0 ? void 0 : _values$dataSource.length, (_values$dataTarget = values.dataTarget) === null || _values$dataTarget === void 0 ? void 0 : _values$dataTarget.length)).fill(true);
       setDisableArray(valueArray);
     }
   }, [form.getFieldsValue()]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Row, {
+    className: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.borderHidden) && 'ant-form-item',
+    style: {
+      alignItems: 'center'
+    }
+  }, /*#__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
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%',
       height: '100%'
@@ -138,7 +153,7 @@ var MapTable = function MapTable(props) {
       width: '100%',
       height: '100%'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (tableDataSource === null || tableDataSource === void 0 ? void 0 : tableDataSource.length) > 0 && (tableDataTarget === null || tableDataTarget === void 0 ? void 0 : tableDataTarget.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
       width: '40%'
     }
@@ -190,7 +205,7 @@ var MapTable = function MapTable(props) {
     },
     onRowClick: function onRowClick(record) {},
     onMove: onTargetMove
-  })))));
+  }))))))));
 };
 export default MapTable;
 var columnSource = [{

package/es/comps/MetadataForm/DataCell/plugin/SparkSqlTable.d.ts

@@ -2,9 +2,8 @@ import React from 'react';
 interface ISparkSqlTableProps {
     extraDico?: any[];
     initSql?: string;
-    dataSource?: any[];
     value?: any;
-    onSearch?: (data: any) => void;
+    extraInfo?: any;
     onChange?: (value: any) => void;
 }
 declare const SparkSqlTable: (props: ISparkSqlTableProps) => React.JSX.Element;

package/es/comps/MetadataForm/DataCell/plugin/SparkSqlTable.js

@@ -1,3 +1,7 @@
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
 import "antd/es/input/style";
@@ -10,9 +14,11 @@ import React from 'react';
 import { EyeOutlined, MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import Split from '../../../Split';
 import SqlEdit from '../../../JsonEdit';
+import { useGetLabelCol } from './Datasource/hooks';
 var SparkSqlTable = function SparkSqlTable(props) {
   var extraDico = props.extraDico,
     value = props.value,
+    extraInfo = props.extraInfo,
     onChange = props.onChange;
   var _React$useState = React.useState('orgin'),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -26,6 +32,7 @@ var SparkSqlTable = function SparkSqlTable(props) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     list = _React$useState6[0],
     setList = _React$useState6[1];
+  var labelCol = useGetLabelCol(extraInfo);
   var handleAddItem = function handleAddItem() {
     var _list = [].concat(_toConsumableArray(list), [{
       alias: undefined,
@@ -86,10 +93,20 @@ var SparkSqlTable = function SparkSqlTable(props) {
       }
     }
   }, [value]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Row, {
+    className: !(extraInfo === null || extraInfo === void 0 ? void 0 : extraInfo.borderHidden) && 'ant-form-item',
+    style: {
+      alignItems: 'center'
+    }
+  }, /*#__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
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       border: '2px solid #bebebe',
-      height: '500px'
+      height: '500px',
+      margin: '6px',
+      width: '1135px'
     }
   }, /*#__PURE__*/React.createElement(Split, {
     gutterSize: 2,
@@ -223,6 +240,6 @@ var SparkSqlTable = function SparkSqlTable(props) {
       }]));
     },
     icon: /*#__PURE__*/React.createElement(PlusOutlined, null)
-  }, tr('添加SQL语句')))));
+  }, tr('添加SQL语句'))))))));
 };
 export default SparkSqlTable;

package/es/comps/MetadataForm/HOC/index.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2024-08-20 18:59:44
+ * @LastEditTime: 2024-08-21 09:26:31
  */
 import React from 'react';
 import { deepClone } from '../../../utils';

package/es/comps/MetadataForm/index.less

@@ -1,26 +1,29 @@
-.metadata-form {
-  // .ant-row {
-  //   display: flex !important;
-  // }
-  .ant-form-item {
-    margin: 0 !important;
-    // flex-wrap: nowrap !important;
-  }
-  .ant-form-item-label > label .ant-form-item-tooltip {
-    margin-left: 5px;
-  }
-  .ant-form-item-label {
-    padding: 0 0 2px !important;
-  }
-
-  // .ant-select-selection-overflow {
-  //   flex-wrap: nowrap;
-  //   overflow: hidden !important;
-  //   min-height: 26px;
-  // }
-
-  .ant-input-number,
-  .ant-picker {
-    width: 100%;
-  }
-}
+.metadata-form {
+  // .ant-row {
+  //   display: flex !important;
+  // }
+  .ant-form-item {
+    margin: 0 !important;
+    // flex-wrap: nowrap !important;
+  }
+  .ant-form-item-label > label .ant-form-item-tooltip {
+    margin-left: 5px;
+  }
+  .ant-form-item-label {
+    padding: 0 0 2px !important;
+  }
+
+  // .ant-select-selection-overflow {
+  //   flex-wrap: nowrap;
+  //   overflow: hidden !important;
+  //   min-height: 26px;
+  // }
+
+  .ant-input-number,
+  .ant-picker {
+    width: 100%;
+  }
+  .ant-form-item-no-colon {
+    width: 0 !important;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.3.74",
+  "version": "1.3.75",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",