@gingkoo/pandora-metabase 1.0.130 → 1.0.131

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

@@ -1,19 +1,73 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './index.less';
-import React, { useState, useEffect, useRef } from 'react';
-import cloneDeep from 'lodash/cloneDeep';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import cx from 'classnames';
-import { uuidv4 } from '../../../utils/helper';
+import { Tag } from '@gingkoo/pandora';
+import { getTableIdFirstKey, isSameTableByIdFirst, uuidv4 } from '../../../utils/helper';
 import { useStore } from '../../../hooks/use-provider';
 import Loading from '../../../common/Loading';
 import { __ } from '../../../locale';
 import { replaceTpl } from '../../../utils/helper';
 import { TableIcon, SearchIcon, DataSourceIcon, LeftArrowIcon } from '../../icons';
+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 _objectSpread(_objectSpread({}, 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,
@@ -22,12 +76,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 = useStore();
-  var flatTableRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     loading = _useState2[0],
@@ -35,267 +87,145 @@ var SelectTable = function SelectTable(_ref) {
   var _useState3 = useState(data.slice()),
     _useState4 = _slicedToArray(_useState3, 1),
     datasource = _useState4[0];
-  var _useState5 = useState(function () {
-      return sortSelectedDatasourceFirst(sourceTable.slice(), value.datasourceId);
-    }),
+  var _useState5 = useState(sourceTable.slice()),
     _useState6 = _slicedToArray(_useState5, 2),
-    originDatasourceTable = _useState6[0],
-    setOriginDatasourceTable = _useState6[1];
-  var _useState7 = useState(function () {
-      return sortSelectedDatasourceFirst(sourceTable.slice(), value.datasourceId);
-    }),
+    datasourceTable = _useState6[0],
+    setDatasourceTable = _useState6[1];
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    datasourceTable = _useState8[0],
-    setDatasourceTable = _useState8[1];
+    list = _useState8[0],
+    setList = _useState8[1];
   var _useState9 = useState([]),
     _useState0 = _slicedToArray(_useState9, 2),
-    list = _useState0[0],
-    setList = _useState0[1];
-  var _useState1 = useState([]),
+    originList = _useState0[0],
+    setOriginList = _useState0[1];
+  var _useState1 = useState(''),
     _useState10 = _slicedToArray(_useState1, 2),
-    originList = _useState10[0],
-    setOriginList = _useState10[1];
-  var _useState11 = useState(value),
+    searchVal = _useState10[0],
+    setSearchVal = _useState10[1];
+  var _useState11 = useState(''),
     _useState12 = _slicedToArray(_useState11, 2),
-    val = _useState12[0],
-    setVal = _useState12[1];
-  var _useState13 = useState(''),
+    flatSearchVal = _useState12[0],
+    setFlatSearchVal = _useState12[1];
+  var _useState13 = useState([]),
     _useState14 = _slicedToArray(_useState13, 2),
-    tableFilterValue = _useState14[0],
-    setTableFilterValue = _useState14[1];
+    selectedTableTypes = _useState14[0],
+    setSelectedTableTypes = _useState14[1];
+  var _useState15 = useState({}),
+    _useState16 = _slicedToArray(_useState15, 2),
+    selectedFlatTableTypes = _useState16[0],
+    setSelectedFlatTableTypes = _useState16[1];
+  var _useState17 = useState(value),
+    _useState18 = _slicedToArray(_useState17, 2),
+    val = _useState18[0],
+    setVal = _useState18[1];
+  var searchInputRef = useRef(null);
+  var flatSearchInputRef = useRef(null);
+  var tableTypeOptions = useMemo(function () {
+    return getTableTypeOptions(originList);
+  }, [originList]);
+  var flatTableTypeOptions = useMemo(function () {
+    return getFlatTableTypeOptions(sourceTable);
+  }, [sourceTable]);
+  var nextPage = !val.datasourceId;
   useEffect(function () {
     if (value.datasourceId) {
-      var datasourceItem = getDatasource(value.datasourceId);
-      var _datasourceType = value.datasourceType || getDefaultDatasourceType(datasourceItem);
-      var nextVal = _objectSpread(_objectSpread({}, 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 = _slicedToArray(_nextTables$splice, 1),
-      selectedTable = _nextTables$splice2[0];
-    return [selectedTable].concat(_toConsumableArray(nextTables));
+  function getTables(_x) {
+    return _getTables.apply(this, arguments);
   }
-  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 _objectSpread(_objectSpread({}, 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 cloneDeep(tables.slice()).map(function (v) {
-      var _v$children;
-      return _objectSpread(_objectSpread({}, 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 loadTables(_x) {
-    return _loadTables.apply(this, arguments);
-  }
-  function _loadTables() {
-    _loadTables = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(datasourceId) {
-      var datasourceType,
-        force,
-        tables,
-        _args = arguments;
+  function _getTables() {
+    _getTables = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(datasourceId) {
+      var tables;
       return _regeneratorRuntime.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: uuidv4('table'),
-      alias: ''
-    });
-    loadTables(datasource.datasourceId, nextDatasourceType, force);
-  }
-  function handleDatasourceTypeChange(datasourceType) {
-    var nextVal = _objectSpread(_objectSpread({}, val), {}, {
-      datasourceType: datasourceType
-    });
-    setVal(nextVal);
-    loadTables(nextVal.datasourceId, datasourceType, true);
-  }
-  function handleFlatDatasourceTypeChange(_x2, _x3) {
-    return _handleFlatDatasourceTypeChange.apply(this, arguments);
-  }
-  function _handleFlatDatasourceTypeChange() {
-    _handleFlatDatasourceTypeChange = _asyncToGenerator(_regeneratorRuntime.mark(function _callee2(datasourceItem, datasourceType) {
-      var nextVal, tables;
-      return _regeneratorRuntime.wrap(function (_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            if (val.datasourceId === datasourceItem.datasourceId) {
-              nextVal = _objectSpread(_objectSpread({}, 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 _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 _jsxs("label", {
-          className: 'Sqb-DatasourceType-radio-item',
-          onMouseDown: handleChangeType,
-          onClick: handleChangeType,
-          children: [_jsx("input", {
-            type: 'radio',
-            name: "datasourceType_".concat(datasourceItem.datasourceId || 'current'),
-            checked: checked,
-            readOnly: true
-          }), _jsx("span", {
-            children: item.label
-          })]
-        }, item.value);
-      })
-    });
+    return _getTables.apply(this, arguments);
   }
-  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]);
   useEffect(function () {
     didUpdate === null || didUpdate === void 0 || didUpdate();
   }, [list, loading, datasource]);
+  useEffect(function () {
+    if (tableFlat) {
+      focusWithoutScroll(flatSearchInputRef.current);
+      return;
+    }
+    if (!nextPage && !loading) {
+      focusWithoutScroll(searchInputRef.current);
+    }
+  }, [tableFlat, nextPage, loading]);
+  useEffect(function () {
+    setList(filterTables(originList, searchVal, selectedTableTypes));
+  }, [originList, searchVal, selectedTableTypes]);
+  useEffect(function () {
+    setDatasourceTable(filterDatasourceTable(sourceTable, flatSearchVal, selectedFlatTableTypes));
+  }, [sourceTable, flatSearchVal, selectedFlatTableTypes]);
+  useEffect(function () {
+    setSelectedTableTypes(function (prev) {
+      return prev.filter(function (v) {
+        return tableTypeOptions.includes(v);
+      });
+    });
+  }, [tableTypeOptions]);
+  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 = cloneDeep(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 _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, datasourceId, nextTableTypes));
+    });
   }
   function goPrevPage() {
     setVal({
       datasourceId: '',
       datasourceName: '',
-      datasourceType: '',
       name: '',
       name_zh: '',
       tableUuid: '',
@@ -303,10 +233,57 @@ var SelectTable = function SelectTable(_ref) {
       alias: ''
     });
   }
+  function renderTableTypeFilter(tableTypes) {
+    if (tableTypes.length <= 1) return null;
+    return _jsx("div", {
+      className: 'Sqb-TableType-tag-group',
+      children: tableTypes.map(function (tableType) {
+        var checked = selectedTableTypes.includes(tableType);
+        return _jsx(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 _jsx("div", {
+      className: 'Sqb-TableType-tag-group',
+      children: tableTypes.map(function (tableType) {
+        var checked = selectedTableTypes.includes(tableType);
+        return _jsx(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 _jsxs("div", {
+      className: cx("Sqb-List-title Sqb-List-title-with-filter mx-4 pb-2 pt-2"),
+      children: [_jsx("span", {
+        className: 'Sqb-List-title-text',
+        children: table.datasourceName
+      }), renderFlatTableTypeFilter(table.datasourceId, flatTableTypeOptions[table.datasourceId] || [])]
+    });
+  }
   if (tableFlat) {
     return _jsx("div", {
       className: cx("Sqb-SelectTable--box pb-2"),
-      ref: flatTableRef,
       children: _jsx("div", {
         style: {
           minWidth: 300
@@ -323,7 +300,7 @@ var SelectTable = function SelectTable(_ref) {
                 className: 'px-2',
                 children: _jsx(SearchIcon, {})
               }), _jsx("input", {
-                autoFocus: true,
+                ref: flatSearchInputRef,
                 type: 'text',
                 className: 'p-2',
                 placeholder: __('data.search'),
@@ -332,36 +309,26 @@ var SelectTable = function SelectTable(_ref) {
             })
           }), datasourceTable.map(function (table) {
             var _table$children;
-            var datasourceType = getFlatDatasourceType(table);
             return _jsxs(React.Fragment, {
-              children: [_jsxs("div", {
-                className: cx("Sqb-List-title mx-4 pb-2 pt-2"),
-                children: [_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: uuidv4('table'),
                   alias: ''
                 };
+                var tableValue = _objectSpread(_objectSpread({}, _val), v);
                 return _jsx("div", {
                   className: cx("Sqb-List-section"),
                   children: _jsx("div", {
                     className: cx("Sqb-List-item mx-2", {
-                      active: val.datasourceId === table.datasourceId && val.id === v.id && (val.datasourceType || datasourceType) === datasourceType
+                      active: isSameTableByIdFirst(value, tableValue)
                     }),
                     onClick: function onClick() {
-                      onChange(_objectSpread(_objectSpread(_objectSpread({}, _val), v), {}, {
-                        datasourceType: datasourceType
-                      }));
+                      onChange(tableValue);
                     },
                     children: _jsxs("a", {
                       className: 'p-2',
@@ -376,15 +343,14 @@ var SelectTable = function SelectTable(_ref) {
                       })]
                     })
                   })
-                }, "".concat(datasourceType, "_").concat(v.name));
+                }, getTableIdFirstKey(tableValue));
               }))]
-            }, "".concat(table.datasourceId, "_").concat(datasourceType));
+            }, table.datasourceId);
           })]
         })
       })
     });
   }
-  var nextPage = !val.datasourceId;
   if (nextPage) {
     return _jsx("div", {
       className: cx("Sqb-SelectDataSource--box pb-2 pt-2"),
@@ -404,7 +370,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: uuidv4('table'),
+                    alias: ''
+                  });
+                  getTables(v.datasourceId);
                 },
                 children: _jsxs("a", {
                   className: 'p-2',
@@ -425,8 +400,6 @@ var SelectTable = function SelectTable(_ref) {
       })
     });
   }
-  var selectedDatasource = getDatasource(val.datasourceId) || val;
-  var datasourceType = val.datasourceType || getDefaultDatasourceType(selectedDatasource);
   return _jsx("div", {
     className: cx("Sqb-SelectTable--box pb-2"),
     children: _jsx("div", {
@@ -437,17 +410,15 @@ var SelectTable = function SelectTable(_ref) {
         style: {
           width: '100%'
         },
-        children: [_jsx("div", {
+        children: [_jsxs("div", {
           className: 'header',
-          children: _jsxs("div", {
+          children: [_jsx("div", {
             className: 'left-info',
-            children: [_jsxs("span", {
+            children: _jsxs("span", {
               onClick: goPrevPage,
               children: [_jsx(LeftArrowIcon, {}), val.datasourceName]
-            }), renderDatasourceTypeSelector(selectedDatasource, datasourceType, function (type) {
-              return handleDatasourceTypeChange(type);
-            })]
-          })
+            })
+          }), renderTableTypeFilter(tableTypeOptions)]
         }), loading ? _jsx("div", {
           className: 'Sqb-SelectTable-loading',
           children: _jsx(Loading, {
@@ -463,7 +434,7 @@ var SelectTable = function SelectTable(_ref) {
                 className: 'px-2',
                 children: _jsx(SearchIcon, {})
               }), _jsx("input", {
-                autoFocus: true,
+                ref: searchInputRef,
                 type: 'text',
                 className: 'p-2',
                 placeholder: __('data.search'),
@@ -471,16 +442,15 @@ var SelectTable = function SelectTable(_ref) {
               })]
             })
           }), Array.isArray(list) && list.map(function (v) {
+            var tableValue = _objectSpread(_objectSpread({}, val), v);
             return _jsx("div", {
               className: cx("Sqb-List-section"),
               children: _jsx("div", {
                 className: cx("Sqb-List-item mx-2", {
-                  active: val.datasourceId === value.datasourceId && val.id === v.id && (val.datasourceType || datasourceType) === datasourceType
+                  active: isSameTableByIdFirst(value, tableValue)
                 }),
                 onClick: function onClick() {
-                  onChange(_objectSpread(_objectSpread(_objectSpread({}, val), v), {}, {
-                    datasourceType: datasourceType
-                  }));
+                  onChange(tableValue);
                 },
                 children: _jsxs("a", {
                   className: 'p-2',
@@ -495,7 +465,7 @@ var SelectTable = function SelectTable(_ref) {
                   })]
                 })
               })
-            }, v.name);
+            }, getTableIdFirstKey(tableValue));
           })]
         })]
       })