@gingkoo/pandora-metabase 1.0.130 → 1.0.132

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

@@ -7,21 +7,75 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
 require("./index.less");
 var _react = _interopRequireWildcard(require("react"));
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _pandora = require("@gingkoo/pandora");
 var _helper = require("../../../utils/helper");
 var _useProvider = require("../../../hooks/use-provider");
 var _Loading = _interopRequireDefault(require("../../../common/Loading"));
 var _locale = require("../../../locale");
 var _icons = require("../../icons");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function focusWithoutScroll(input) {
+  if (!input) return;
+  setTimeout(function () {
+    try {
+      input.focus({
+        preventScroll: true
+      });
+    } catch (e) {
+      input.focus();
+    }
+  }, 0);
+}
+function getTableTypeOptions(tables) {
+  return Array.from(new Set(tables.map(function (v) {
+    return v.table_type;
+  }).filter(function (v) {
+    return Boolean(v);
+  })));
+}
+function getFlatTableTypeOptions(sourceTable) {
+  return sourceTable.reduce(function (mo, datasource) {
+    if (datasource !== null && datasource !== void 0 && datasource.datasourceId && Array.isArray(datasource === null || datasource === void 0 ? void 0 : datasource.children)) {
+      mo[datasource.datasourceId] = getTableTypeOptions(datasource.children);
+    }
+    return mo;
+  }, {});
+}
+function matchTableName(table, searchVal) {
+  if (!searchVal) return true;
+  return Boolean(~(table.name + (table.name_zh || '')).toLocaleLowerCase().indexOf(searchVal.toLocaleLowerCase()));
+}
+function matchTableType(table, selectedTableTypes) {
+  if (!selectedTableTypes.length) {
+    return true;
+  }
+  return selectedTableTypes.includes(table.table_type || '');
+}
+function filterTables(tables, searchVal, selectedTableTypes) {
+  return tables.filter(function (table) {
+    return matchTableName(table, searchVal) && matchTableType(table, selectedTableTypes);
+  });
+}
+function filterDatasourceTable(sourceTable, searchVal, selectedTableTypesMap) {
+  return sourceTable.map(function (datasource) {
+    var children = Array.isArray(datasource === null || datasource === void 0 ? void 0 : datasource.children) ? datasource.children : [];
+    var selectedTableTypes = selectedTableTypesMap[datasource === null || datasource === void 0 ? void 0 : datasource.datasourceId] || [];
+    return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, datasource), {}, {
+      children: filterTables(children, searchVal, selectedTableTypes)
+    });
+  }).filter(function (datasource) {
+    var _selectedTableTypesMa;
+    return datasource.children.length > 0 || Boolean((_selectedTableTypesMa = selectedTableTypesMap[datasource === null || datasource === void 0 ? void 0 : datasource.datasourceId]) === null || _selectedTableTypesMa === void 0 ? void 0 : _selectedTableTypesMa.length);
+  });
+}
 var SelectTable = function SelectTable(_ref) {
   var _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
@@ -30,12 +84,10 @@ 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;
   var store = (0, _useProvider.useStore)();
-  var flatTableRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     loading = _useState2[0],
@@ -43,267 +95,145 @@ var SelectTable = function SelectTable(_ref) {
   var _useState3 = (0, _react.useState)(data.slice()),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
     datasource = _useState4[0];
-  var _useState5 = (0, _react.useState)(function () {
-      return sortSelectedDatasourceFirst(sourceTable.slice(), value.datasourceId);
-    }),
+  var _useState5 = (0, _react.useState)(sourceTable.slice()),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    originDatasourceTable = _useState6[0],
-    setOriginDatasourceTable = _useState6[1];
-  var _useState7 = (0, _react.useState)(function () {
-      return sortSelectedDatasourceFirst(sourceTable.slice(), value.datasourceId);
-    }),
+    datasourceTable = _useState6[0],
+    setDatasourceTable = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    datasourceTable = _useState8[0],
-    setDatasourceTable = _useState8[1];
+    list = _useState8[0],
+    setList = _useState8[1];
   var _useState9 = (0, _react.useState)([]),
     _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
-    list = _useState0[0],
-    setList = _useState0[1];
-  var _useState1 = (0, _react.useState)([]),
+    originList = _useState0[0],
+    setOriginList = _useState0[1];
+  var _useState1 = (0, _react.useState)(''),
     _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    originList = _useState10[0],
-    setOriginList = _useState10[1];
-  var _useState11 = (0, _react.useState)(value),
+    searchVal = _useState10[0],
+    setSearchVal = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    val = _useState12[0],
-    setVal = _useState12[1];
-  var _useState13 = (0, _react.useState)(''),
+    flatSearchVal = _useState12[0],
+    setFlatSearchVal = _useState12[1];
+  var _useState13 = (0, _react.useState)([]),
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    tableFilterValue = _useState14[0],
-    setTableFilterValue = _useState14[1];
+    selectedTableTypes = _useState14[0],
+    setSelectedTableTypes = _useState14[1];
+  var _useState15 = (0, _react.useState)({}),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    selectedFlatTableTypes = _useState16[0],
+    setSelectedFlatTableTypes = _useState16[1];
+  var _useState17 = (0, _react.useState)(value),
+    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+    val = _useState18[0],
+    setVal = _useState18[1];
+  var searchInputRef = (0, _react.useRef)(null);
+  var flatSearchInputRef = (0, _react.useRef)(null);
+  var tableTypeOptions = (0, _react.useMemo)(function () {
+    return getTableTypeOptions(originList);
+  }, [originList]);
+  var flatTableTypeOptions = (0, _react.useMemo)(function () {
+    return getFlatTableTypeOptions(sourceTable);
+  }, [sourceTable]);
+  var nextPage = !val.datasourceId;
   (0, _react.useEffect)(function () {
     if (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).then(function (tables) {
-        if (tableFlat) {
-          updateFlatDatasourceTables(value.datasourceId, _datasourceType, tables);
-        }
-      });
+      getTables(value.datasourceId);
     }
   }, []);
-  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 getFlatDatasourceType(datasourceItem) {
-    if (val.datasourceId === datasourceItem.datasourceId && val.datasourceType) {
-      return val.datasourceType;
-    }
-    return datasourceItem.datasourceType || getDefaultDatasourceType(datasourceItem);
-  }
-  function sortSelectedDatasourceFirst(tables, datasourceId) {
-    var selectedDatasourceId = datasourceId || value.datasourceId;
-    if (!tableFlat || !selectedDatasourceId) return tables.slice();
-    var selectedIndex = tables.findIndex(function (item) {
-      return item.datasourceId === selectedDatasourceId;
-    });
-    if (selectedIndex <= 0) return tables.slice();
-    var nextTables = tables.slice();
-    var _nextTables$splice = nextTables.splice(selectedIndex, 1),
-      _nextTables$splice2 = (0, _slicedToArray2["default"])(_nextTables$splice, 1),
-      selectedTable = _nextTables$splice2[0];
-    return [selectedTable].concat((0, _toConsumableArray2["default"])(nextTables));
-  }
-  function updateFlatDatasourceTables(datasourceId, datasourceType, tables) {
-    var tablesData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : originDatasourceTable;
-    var scrollToTop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-    var nextOriginDatasourceTable = sortSelectedDatasourceFirst(tablesData, datasourceId).map(function (v) {
-      if (v.datasourceId !== datasourceId) return v;
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
-        datasourceType: datasourceType,
-        children: tables
-      });
-    });
-    setOriginDatasourceTable(nextOriginDatasourceTable);
-    setDatasourceTable(filterDatasourceTables(nextOriginDatasourceTable, tableFilterValue));
-    if (scrollToTop) {
-      requestAnimationFrame(function () {
-        var _flatTableRef$current;
-        var scrollContainer = (_flatTableRef$current = flatTableRef.current) === null || _flatTableRef$current === void 0 ? void 0 : _flatTableRef$current.parentElement;
-        if (scrollContainer) {
-          scrollContainer.scrollTop = 0;
-        }
-      });
-    }
-  }
-  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(_x) {
+    return _getTables.apply(this, arguments);
   }
-  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;
+  function _getTables() {
+    _getTables = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(datasourceId) {
+      var tables;
       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, datasourceType, force);
+            return store.fetchDataset(datasourceId);
           case 1:
             tables = _context.sent;
             setLoading(false);
             setList(tables);
             setOriginList(tables);
-            return _context.abrupt("return", tables);
+            setSearchVal('');
+            setSelectedTableTypes([]);
           case 2:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    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);
-    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;
-      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);
-            }
-            _context2.next = 1;
-            return loadTables(datasourceItem.datasourceId, datasourceType, true);
-          case 1:
-            tables = _context2.sent;
-            updateFlatDatasourceTables(datasourceItem.datasourceId, datasourceType, tables, undefined, true);
-          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);
-      })
-    });
+    return _getTables.apply(this, arguments);
   }
-  (0, _react.useEffect)(function () {
-    var nextSourceTable = sourceTable.slice();
-    if (tableFlat && val.datasourceId) {
-      var _store$getDataset;
-      var _datasourceType2 = val.datasourceType;
-      var cachedTables = _datasourceType2 ? (_store$getDataset = store.getDataset) === null || _store$getDataset === void 0 ? void 0 : _store$getDataset.call(store, val.datasourceId, _datasourceType2) : [];
-      if (_datasourceType2 && cachedTables !== null && cachedTables !== void 0 && cachedTables.length) {
-        updateFlatDatasourceTables(val.datasourceId, _datasourceType2, cachedTables, nextSourceTable);
-        return;
-      }
-    }
-    var sortedSourceTable = sortSelectedDatasourceFirst(nextSourceTable, val.datasourceId);
-    setOriginDatasourceTable(sortedSourceTable);
-    setDatasourceTable(filterDatasourceTables(sortedSourceTable, tableFilterValue));
-  }, [sourceTable]);
   (0, _react.useEffect)(function () {
     didUpdate === null || didUpdate === void 0 || didUpdate();
   }, [list, loading, datasource]);
+  (0, _react.useEffect)(function () {
+    if (tableFlat) {
+      focusWithoutScroll(flatSearchInputRef.current);
+      return;
+    }
+    if (!nextPage && !loading) {
+      focusWithoutScroll(searchInputRef.current);
+    }
+  }, [tableFlat, nextPage, loading]);
+  (0, _react.useEffect)(function () {
+    setList(filterTables(originList, searchVal, selectedTableTypes));
+  }, [originList, searchVal, selectedTableTypes]);
+  (0, _react.useEffect)(function () {
+    setDatasourceTable(filterDatasourceTable(sourceTable, flatSearchVal, selectedFlatTableTypes));
+  }, [sourceTable, flatSearchVal, selectedFlatTableTypes]);
+  (0, _react.useEffect)(function () {
+    setSelectedTableTypes(function (prev) {
+      return prev.filter(function (v) {
+        return tableTypeOptions.includes(v);
+      });
+    });
+  }, [tableTypeOptions]);
+  (0, _react.useEffect)(function () {
+    setSelectedFlatTableTypes(function (prev) {
+      var next = Object.keys(flatTableTypeOptions).reduce(function (mo, datasourceId) {
+        var selected = prev[datasourceId] || [];
+        mo[datasourceId] = selected.filter(function (v) {
+          return flatTableTypeOptions[datasourceId].includes(v);
+        });
+        return mo;
+      }, {});
+      return next;
+    });
+  }, [flatTableTypeOptions]);
   function onInput(e) {
-    var val = e.target.value;
-    var newList = (0, _cloneDeep["default"])(originList.slice());
-    setList(newList.filter(function (v) {
-      return ~(v.name + (v.name_zh || '')).toLocaleLowerCase().indexOf(val.toLocaleLowerCase());
-    }));
+    setSearchVal(e.target.value);
   }
   function onInput1(e) {
-    var val = e.target.value;
-    setTableFilterValue(val);
-    setDatasourceTable(filterDatasourceTables(originDatasourceTable, val));
+    setFlatSearchVal(e.target.value);
+  }
+  function onTableTypeChange(tableType, checked) {
+    setSelectedTableTypes(function (prev) {
+      if (checked) {
+        return prev.includes(tableType) ? prev : prev.concat(tableType);
+      }
+      return prev.filter(function (v) {
+        return v !== tableType;
+      });
+    });
+  }
+  function onFlatTableTypeChange(datasourceId, tableType, checked) {
+    setSelectedFlatTableTypes(function (prev) {
+      var selectedTableTypes = prev[datasourceId] || [];
+      var nextTableTypes = checked ? selectedTableTypes.includes(tableType) ? selectedTableTypes : selectedTableTypes.concat(tableType) : selectedTableTypes.filter(function (v) {
+        return v !== tableType;
+      });
+      return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, prev), {}, (0, _defineProperty2["default"])({}, datasourceId, nextTableTypes));
+    });
   }
   function goPrevPage() {
     setVal({
       datasourceId: '',
       datasourceName: '',
-      datasourceType: '',
       name: '',
       name_zh: '',
       tableUuid: '',
@@ -311,10 +241,57 @@ var SelectTable = function SelectTable(_ref) {
       alias: ''
     });
   }
+  function renderTableTypeFilter(tableTypes) {
+    if (tableTypes.length <= 1) return null;
+    return (0, _jsxRuntime.jsx)("div", {
+      className: 'Sqb-TableType-tag-group',
+      children: tableTypes.map(function (tableType) {
+        var checked = selectedTableTypes.includes(tableType);
+        return (0, _jsxRuntime.jsx)(_pandora.Tag, {
+          className: ':Sqb-TableType-filter-tag',
+          checkable: true,
+          checked: checked,
+          size: 'mini',
+          onChange: function onChange(checked) {
+            return onTableTypeChange(tableType, checked);
+          },
+          children: tableType
+        }, tableType);
+      })
+    });
+  }
+  function renderFlatTableTypeFilter(datasourceId, tableTypes) {
+    if (tableTypes.length <= 1) return null;
+    var selectedTableTypes = selectedFlatTableTypes[datasourceId] || [];
+    return (0, _jsxRuntime.jsx)("div", {
+      className: 'Sqb-TableType-tag-group',
+      children: tableTypes.map(function (tableType) {
+        var checked = selectedTableTypes.includes(tableType);
+        return (0, _jsxRuntime.jsx)(_pandora.Tag, {
+          className: ':Sqb-TableType-filter-tag',
+          checkable: true,
+          checked: checked,
+          size: 'mini',
+          onChange: function onChange(checked) {
+            return onFlatTableTypeChange(datasourceId, tableType, checked);
+          },
+          children: tableType
+        }, tableType);
+      })
+    });
+  }
+  function renderDatasourceTitle(table) {
+    return (0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames["default"])("Sqb-List-title Sqb-List-title-with-filter mx-4 pb-2 pt-2"),
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: 'Sqb-List-title-text',
+        children: table.datasourceName
+      }), renderFlatTableTypeFilter(table.datasourceId, flatTableTypeOptions[table.datasourceId] || [])]
+    });
+  }
   if (tableFlat) {
     return (0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])("Sqb-SelectTable--box pb-2"),
-      ref: flatTableRef,
       children: (0, _jsxRuntime.jsx)("div", {
         style: {
           minWidth: 300
@@ -331,7 +308,7 @@ var SelectTable = function SelectTable(_ref) {
                 className: 'px-2',
                 children: (0, _jsxRuntime.jsx)(_icons.SearchIcon, {})
               }), (0, _jsxRuntime.jsx)("input", {
-                autoFocus: true,
+                ref: flatSearchInputRef,
                 type: 'text',
                 className: 'p-2',
                 placeholder: (0, _locale.__)('data.search'),
@@ -340,36 +317,26 @@ var SelectTable = function SelectTable(_ref) {
             })
           }), datasourceTable.map(function (table) {
             var _table$children;
-            var datasourceType = getFlatDatasourceType(table);
             return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-              children: [(0, _jsxRuntime.jsxs)("div", {
-                className: (0, _classnames["default"])("Sqb-List-title mx-4 pb-2 pt-2"),
-                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) {
+              children: [renderDatasourceTitle(table), 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: '',
                   tableUuid: (0, _helper.uuidv4)('table'),
                   alias: ''
                 };
+                var tableValue = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, _val), v);
                 return (0, _jsxRuntime.jsx)("div", {
                   className: (0, _classnames["default"])("Sqb-List-section"),
                   children: (0, _jsxRuntime.jsx)("div", {
                     className: (0, _classnames["default"])("Sqb-List-item mx-2", {
-                      active: val.datasourceId === table.datasourceId && val.id === v.id && (val.datasourceType || datasourceType) === datasourceType
+                      active: (0, _helper.isSameTableByIdFirst)(value, tableValue)
                     }),
                     onClick: function onClick() {
-                      onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _val), v), {}, {
-                        datasourceType: datasourceType
-                      }));
+                      onChange(tableValue);
                     },
                     children: (0, _jsxRuntime.jsxs)("a", {
                       className: 'p-2',
@@ -384,15 +351,14 @@ var SelectTable = function SelectTable(_ref) {
                       })]
                     })
                   })
-                }, "".concat(datasourceType, "_").concat(v.name));
+                }, (0, _helper.getTableIdFirstKey)(tableValue));
               }))]
-            }, "".concat(table.datasourceId, "_").concat(datasourceType));
+            }, table.datasourceId);
           })]
         })
       })
     });
   }
-  var nextPage = !val.datasourceId;
   if (nextPage) {
     return (0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])("Sqb-SelectDataSource--box pb-2 pt-2"),
@@ -412,7 +378,16 @@ var SelectTable = function SelectTable(_ref) {
                   active: val.datasourceId === v.datasourceId
                 }),
                 onClick: function onClick() {
-                  handleSelectDatasource(v);
+                  setVal({
+                    datasourceId: v.datasourceId,
+                    datasourceName: v.datasourceName,
+                    name: '',
+                    name_zh: '',
+                    id: '',
+                    tableUuid: (0, _helper.uuidv4)('table'),
+                    alias: ''
+                  });
+                  getTables(v.datasourceId);
                 },
                 children: (0, _jsxRuntime.jsxs)("a", {
                   className: 'p-2',
@@ -433,8 +408,6 @@ 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", {
@@ -445,17 +418,15 @@ var SelectTable = function SelectTable(_ref) {
         style: {
           width: '100%'
         },
-        children: [(0, _jsxRuntime.jsx)("div", {
+        children: [(0, _jsxRuntime.jsxs)("div", {
           className: 'header',
-          children: (0, _jsxRuntime.jsxs)("div", {
+          children: [(0, _jsxRuntime.jsx)("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);
-            })]
-          })
+            })
+          }), renderTableTypeFilter(tableTypeOptions)]
         }), loading ? (0, _jsxRuntime.jsx)("div", {
           className: 'Sqb-SelectTable-loading',
           children: (0, _jsxRuntime.jsx)(_Loading["default"], {
@@ -471,7 +442,7 @@ var SelectTable = function SelectTable(_ref) {
                 className: 'px-2',
                 children: (0, _jsxRuntime.jsx)(_icons.SearchIcon, {})
               }), (0, _jsxRuntime.jsx)("input", {
-                autoFocus: true,
+                ref: searchInputRef,
                 type: 'text',
                 className: 'p-2',
                 placeholder: (0, _locale.__)('data.search'),
@@ -479,16 +450,15 @@ var SelectTable = function SelectTable(_ref) {
               })]
             })
           }), Array.isArray(list) && list.map(function (v) {
+            var tableValue = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, val), v);
             return (0, _jsxRuntime.jsx)("div", {
               className: (0, _classnames["default"])("Sqb-List-section"),
               children: (0, _jsxRuntime.jsx)("div", {
                 className: (0, _classnames["default"])("Sqb-List-item mx-2", {
-                  active: val.datasourceId === value.datasourceId && val.id === v.id && (val.datasourceType || datasourceType) === datasourceType
+                  active: (0, _helper.isSameTableByIdFirst)(value, tableValue)
                 }),
                 onClick: function onClick() {
-                  onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, val), v), {}, {
-                    datasourceType: datasourceType
-                  }));
+                  onChange(tableValue);
                 },
                 children: (0, _jsxRuntime.jsxs)("a", {
                   className: 'p-2',
@@ -503,7 +473,7 @@ var SelectTable = function SelectTable(_ref) {
                   })]
                 })
               })
-            }, v.name);
+            }, (0, _helper.getTableIdFirstKey)(tableValue));
           })]
         })]
       })