@gingkoo/pandora-metabase 1.0.126 → 1.0.127

package/lib/cjs/components/dialog/select-table/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _jsxRuntime = require("react/jsx-runtime");
 require("./index.less");
@@ -29,6 +29,7 @@ var SelectTable = function SelectTable(_ref) {
     value = _ref.value,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    onDatasourceTypeChange = _ref.onDatasourceTypeChange,
     didUpdate = _ref.didUpdate,
     _ref$tableFlat = _ref.tableFlat,
     tableFlat = _ref$tableFlat === void 0 ? false : _ref$tableFlat;
@@ -42,50 +43,198 @@ var SelectTable = function SelectTable(_ref) {
     datasource = _useState4[0];
   var _useState5 = (0, _react.useState)(sourceTable.slice()),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    datasourceTable = _useState6[0],
-    setDatasourceTable = _useState6[1];
-  var _useState7 = (0, _react.useState)([]),
+    originDatasourceTable = _useState6[0],
+    setOriginDatasourceTable = _useState6[1];
+  var _useState7 = (0, _react.useState)(sourceTable.slice()),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    list = _useState8[0],
-    setList = _useState8[1];
+    datasourceTable = _useState8[0],
+    setDatasourceTable = _useState8[1];
   var _useState9 = (0, _react.useState)([]),
     _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
-    originList = _useState0[0],
-    setOriginList = _useState0[1];
-  var _useState1 = (0, _react.useState)(value),
+    list = _useState0[0],
+    setList = _useState0[1];
+  var _useState1 = (0, _react.useState)([]),
     _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    val = _useState10[0],
-    setVal = _useState10[1];
+    originList = _useState10[0],
+    setOriginList = _useState10[1];
+  var _useState11 = (0, _react.useState)(value),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    val = _useState12[0],
+    setVal = _useState12[1];
+  var _useState13 = (0, _react.useState)(''),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    tableFilterValue = _useState14[0],
+    setTableFilterValue = _useState14[1];
   (0, _react.useEffect)(function () {
     if (value.datasourceId) {
-      getTables(value.datasourceId);
+      var datasourceItem = getDatasource(value.datasourceId);
+      var _datasourceType = value.datasourceType || getDefaultDatasourceType(datasourceItem);
+      var nextVal = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
+        datasourceType: _datasourceType
+      });
+      setVal(nextVal);
+      if (!value.datasourceType && _datasourceType) {
+        emitDatasourceTypeChange(nextVal);
+      }
+      loadTables(value.datasourceId, _datasourceType);
     }
   }, []);
-  function getTables(_x) {
-    return _getTables.apply(this, arguments);
+  function getDefaultDatasourceType(datasource) {
+    var _datasource$datasourc;
+    return (datasource === null || datasource === void 0 ? void 0 : datasource.defaultDatasourceType) || (datasource === null || datasource === void 0 ? void 0 : datasource.datasourceType) || (datasource === null || datasource === void 0 || (_datasource$datasourc = datasource.datasourceTypeList) === null || _datasource$datasourc === void 0 || (_datasource$datasourc = _datasource$datasourc[0]) === null || _datasource$datasourc === void 0 ? void 0 : _datasource$datasourc.value) || '';
+  }
+  function getDatasource(datasourceId) {
+    return datasource.find(function (v) {
+      return v.datasourceId === datasourceId;
+    });
+  }
+  function filterDatasourceTables(tables, keyword) {
+    var searchVal = keyword.toLocaleLowerCase();
+    if (!searchVal) return tables.slice();
+    return (0, _cloneDeep["default"])(tables.slice()).map(function (v) {
+      var _v$children;
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
+        children: v === null || v === void 0 || (_v$children = v.children) === null || _v$children === void 0 ? void 0 : _v$children.filter(function (vv) {
+          return ~(vv.name + (vv.name_zh || '')).toLocaleLowerCase().indexOf(searchVal);
+        })
+      });
+    }).filter(function (v) {
+      return (v.children || []).length > 0;
+    });
   }
-  function _getTables() {
-    _getTables = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(datasourceId) {
-      var tables;
+  function loadTables(_x) {
+    return _loadTables.apply(this, arguments);
+  }
+  function _loadTables() {
+    _loadTables = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(datasourceId) {
+      var datasourceType,
+        force,
+        tables,
+        _args = arguments;
       return _regenerator["default"].wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            datasourceType = _args.length > 1 && _args[1] !== undefined ? _args[1] : '';
+            force = _args.length > 2 && _args[2] !== undefined ? _args[2] : false;
             setLoading(true);
             _context.next = 1;
-            return store.fetchDataset(datasourceId);
+            return store.fetchDataset(datasourceId, datasourceType, force);
           case 1:
             tables = _context.sent;
             setLoading(false);
             setList(tables);
             setOriginList(tables);
+            return _context.abrupt("return", tables);
           case 2:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return _getTables.apply(this, arguments);
+    return _loadTables.apply(this, arguments);
+  }
+  function emitDatasourceTypeChange(nextVal) {
+    if (!nextVal.datasourceId || !nextVal.name) return;
+    onDatasourceTypeChange === null || onDatasourceTypeChange === void 0 || onDatasourceTypeChange(nextVal);
+  }
+  function handleSelectDatasource(datasource, datasourceType) {
+    var force = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var nextDatasourceType = datasourceType || getDefaultDatasourceType(datasource);
+    setVal({
+      datasourceId: datasource.datasourceId,
+      datasourceName: datasource.datasourceName,
+      datasourceType: nextDatasourceType,
+      name: '',
+      name_zh: '',
+      id: '',
+      tableUuid: (0, _helper.uuidv4)('table'),
+      alias: ''
+    });
+    loadTables(datasource.datasourceId, nextDatasourceType, force);
+  }
+  function handleDatasourceTypeChange(datasourceType) {
+    var nextVal = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, val), {}, {
+      datasourceType: datasourceType
+    });
+    setVal(nextVal);
+    emitDatasourceTypeChange(nextVal);
+    loadTables(nextVal.datasourceId, datasourceType, true);
+  }
+  function handleFlatDatasourceTypeChange(_x2, _x3) {
+    return _handleFlatDatasourceTypeChange.apply(this, arguments);
+  }
+  function _handleFlatDatasourceTypeChange() {
+    _handleFlatDatasourceTypeChange = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(datasourceItem, datasourceType) {
+      var nextVal, tables, updateDatasourceTable, nextOriginDatasourceTable;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (val.datasourceId === datasourceItem.datasourceId) {
+              nextVal = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, val), {}, {
+                datasourceType: datasourceType
+              });
+              setVal(nextVal);
+              emitDatasourceTypeChange(nextVal);
+            }
+            _context2.next = 1;
+            return loadTables(datasourceItem.datasourceId, datasourceType, true);
+          case 1:
+            tables = _context2.sent;
+            updateDatasourceTable = function updateDatasourceTable(tablesData) {
+              return tablesData.map(function (v) {
+                if (v.datasourceId !== datasourceItem.datasourceId) return v;
+                return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
+                  datasourceType: datasourceType,
+                  children: tables
+                });
+              });
+            };
+            nextOriginDatasourceTable = updateDatasourceTable(originDatasourceTable);
+            setOriginDatasourceTable(nextOriginDatasourceTable);
+            setDatasourceTable(filterDatasourceTables(nextOriginDatasourceTable, tableFilterValue));
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _handleFlatDatasourceTypeChange.apply(this, arguments);
+  }
+  function renderDatasourceTypeSelector(datasourceItem, datasourceType, onChange) {
+    var datasourceTypeList = datasourceItem.datasourceTypeList || [];
+    if (!datasourceTypeList.length) return null;
+    return (0, _jsxRuntime.jsx)("div", {
+      className: 'Sqb-DatasourceType-radio',
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: datasourceTypeList.map(function (item) {
+        var checked = datasourceType === item.value;
+        var handleChangeType = function handleChangeType(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!checked) onChange(item.value);
+        };
+        return (0, _jsxRuntime.jsxs)("label", {
+          className: 'Sqb-DatasourceType-radio-item',
+          onMouseDown: handleChangeType,
+          onClick: handleChangeType,
+          children: [(0, _jsxRuntime.jsx)("input", {
+            type: 'radio',
+            name: "datasourceType_".concat(datasourceItem.datasourceId || 'current'),
+            checked: checked,
+            readOnly: true
+          }), (0, _jsxRuntime.jsx)("span", {
+            children: item.label
+          })]
+        }, item.value);
+      })
+    });
   }
+  (0, _react.useEffect)(function () {
+    setOriginDatasourceTable(sourceTable.slice());
+    setDatasourceTable(filterDatasourceTables(sourceTable.slice(), tableFilterValue));
+  }, [sourceTable]);
   (0, _react.useEffect)(function () {
     didUpdate === null || didUpdate === void 0 || didUpdate();
   }, [list, loading, datasource]);
@@ -98,23 +247,14 @@ var SelectTable = function SelectTable(_ref) {
   }
   function onInput1(e) {
     var val = e.target.value;
-    var newList = (0, _cloneDeep["default"])(sourceTable.slice());
-    var _new = newList.map(function (v) {
-      var _v$children;
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
-        children: v === null || v === void 0 || (_v$children = v.children) === null || _v$children === void 0 ? void 0 : _v$children.filter(function (v) {
-          return ~(v.name + (v.name_zh || '')).toLocaleLowerCase().indexOf(val.toLocaleLowerCase());
-        })
-      });
-    }).filter(function (v) {
-      return v.children.length > 0;
-    });
-    setDatasourceTable(_new);
+    setTableFilterValue(val);
+    setDatasourceTable(filterDatasourceTables(originDatasourceTable, val));
   }
   function goPrevPage() {
     setVal({
       datasourceId: '',
       datasourceName: '',
+      datasourceType: '',
       name: '',
       name_zh: '',
       tableUuid: '',
@@ -150,14 +290,20 @@ var SelectTable = function SelectTable(_ref) {
             })
           }), datasourceTable.map(function (table) {
             var _table$children;
+            var datasourceType = table.datasourceType || getDefaultDatasourceType(table);
             return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-              children: [(0, _jsxRuntime.jsx)("div", {
+              children: [(0, _jsxRuntime.jsxs)("div", {
                 className: (0, _classnames["default"])("Sqb-List-title mx-4 pb-2 pt-2"),
-                children: table.datasourceName
+                children: [(0, _jsxRuntime.jsx)("span", {
+                  children: table.datasourceName
+                }), renderDatasourceTypeSelector(table, datasourceType, function (type) {
+                  return handleFlatDatasourceTypeChange(table, type);
+                })]
               }), Array.isArray(table.children) && (table === null || table === void 0 || (_table$children = table.children) === null || _table$children === void 0 ? void 0 : _table$children.map(function (v) {
                 var _val = {
                   datasourceId: table.datasourceId,
                   datasourceName: table.datasourceName,
+                  datasourceType: datasourceType,
                   name: '',
                   name_zh: '',
                   id: '',
@@ -168,10 +314,12 @@ var SelectTable = function SelectTable(_ref) {
                   className: (0, _classnames["default"])("Sqb-List-section"),
                   children: (0, _jsxRuntime.jsx)("div", {
                     className: (0, _classnames["default"])("Sqb-List-item mx-2", {
-                      active: value.name === v.name
+                      active: val.datasourceId === table.datasourceId && val.name === v.name && (val.datasourceType || datasourceType) === datasourceType
                     }),
                     onClick: function onClick() {
-                      onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _val), v));
+                      onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _val), v), {}, {
+                        datasourceType: datasourceType
+                      }));
                     },
                     children: (0, _jsxRuntime.jsxs)("a", {
                       className: 'p-2',
@@ -186,9 +334,9 @@ var SelectTable = function SelectTable(_ref) {
                       })]
                     })
                   })
-                }, v.name);
+                }, "".concat(datasourceType, "_").concat(v.name));
               }))]
-            }, table.datasourceId);
+            }, "".concat(table.datasourceId, "_").concat(datasourceType));
           })]
         })
       })
@@ -214,16 +362,7 @@ var SelectTable = function SelectTable(_ref) {
                   active: val.datasourceId === v.datasourceId
                 }),
                 onClick: function onClick() {
-                  setVal({
-                    datasourceId: v.datasourceId,
-                    datasourceName: v.datasourceName,
-                    name: '',
-                    name_zh: '',
-                    id: '',
-                    tableUuid: (0, _helper.uuidv4)('table'),
-                    alias: ''
-                  });
-                  getTables(v.datasourceId);
+                  handleSelectDatasource(v);
                 },
                 children: (0, _jsxRuntime.jsxs)("a", {
                   className: 'p-2',
@@ -244,6 +383,8 @@ var SelectTable = function SelectTable(_ref) {
       })
     });
   }
+  var selectedDatasource = getDatasource(val.datasourceId) || val;
+  var datasourceType = val.datasourceType || getDefaultDatasourceType(selectedDatasource);
   return (0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames["default"])("Sqb-SelectTable--box pb-2"),
     children: (0, _jsxRuntime.jsx)("div", {
@@ -256,12 +397,14 @@ var SelectTable = function SelectTable(_ref) {
         },
         children: [(0, _jsxRuntime.jsx)("div", {
           className: 'header',
-          children: (0, _jsxRuntime.jsx)("div", {
+          children: (0, _jsxRuntime.jsxs)("div", {
             className: 'left-info',
-            children: (0, _jsxRuntime.jsxs)("span", {
+            children: [(0, _jsxRuntime.jsxs)("span", {
               onClick: goPrevPage,
               children: [(0, _jsxRuntime.jsx)(_icons.LeftArrowIcon, {}), val.datasourceName]
-            })
+            }), renderDatasourceTypeSelector(selectedDatasource, datasourceType, function (type) {
+              return handleDatasourceTypeChange(type);
+            })]
           })
         }), loading ? (0, _jsxRuntime.jsx)("div", {
           className: 'Sqb-SelectTable-loading',
@@ -290,10 +433,12 @@ var SelectTable = function SelectTable(_ref) {
               className: (0, _classnames["default"])("Sqb-List-section"),
               children: (0, _jsxRuntime.jsx)("div", {
                 className: (0, _classnames["default"])("Sqb-List-item mx-2", {
-                  active: value.name === v.name
+                  active: val.datasourceId === value.datasourceId && val.name === v.name && (val.datasourceType || datasourceType) === datasourceType
                 }),
                 onClick: function onClick() {
-                  onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, val), v));
+                  onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, val), v), {}, {
+                    datasourceType: datasourceType
+                  }));
                 },
                 children: (0, _jsxRuntime.jsxs)("a", {
                   className: 'p-2',

package/lib/cjs/components/dialog/select-table/index.less

@@ -28,7 +28,7 @@
       color: #4c5773;
       margin-top: 0;
       margin-bottom: 0;
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 600;
     }
     &:not(.disabled):hover,
@@ -64,10 +64,16 @@
     color: #949aab;
     border-bottom: 1px solid #f0f0f0;
     .left-info {
+      flex: 1;
       padding: 0.5rem 0.5rem 0.5rem 0;
       display: flex;
       align-items: center;
-      span {
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      .Sqb-DatasourceType-radio {
+        margin-left: auto;
+      }
+      > span {
         font-weight: 900;
         font-size: 16px;
         color: #4c5773;
@@ -95,6 +101,13 @@
   .Sqb-List-section {
   }
 
+  .Sqb-List-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
   .Sqb-List-item {
     display: flex;
     border-radius: 4px;
@@ -167,3 +180,33 @@
     }
   }
 }
+
+.Sqb-DatasourceType-radio {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  justify-content: flex-end;
+}
+
+.Sqb-DatasourceType-radio-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: #4c5773;
+  cursor: pointer;
+  font-size: 13px !important;
+  font-weight: 600;
+  line-height: 1.2;
+
+  span {
+    font-size: 13px !important;
+    line-height: 15px;
+  }
+
+  input {
+    margin: 0;
+    width: 13px;
+    height: 13px;
+  }
+}