mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
fix(sqllab): avoid unexpected re-rendering on DatabaseSelector (#21316)
This commit is contained in:
parent
2ec744da21
commit
e2b77a7543
@ -132,17 +132,7 @@ export default function DatabaseSelector({
|
||||
}: DatabaseSelectorProps) {
|
||||
const [loadingSchemas, setLoadingSchemas] = useState(false);
|
||||
const [schemaOptions, setSchemaOptions] = useState<SchemaValue[]>([]);
|
||||
const [currentDb, setCurrentDb] = useState<DatabaseValue | undefined>(
|
||||
db
|
||||
? {
|
||||
label: (
|
||||
<SelectLabel backend={db.backend} databaseName={db.database_name} />
|
||||
),
|
||||
value: db.id,
|
||||
...db,
|
||||
}
|
||||
: undefined,
|
||||
);
|
||||
const [currentDb, setCurrentDb] = useState<DatabaseValue | undefined>();
|
||||
const [currentSchema, setCurrentSchema] = useState<SchemaValue | undefined>(
|
||||
schema ? { label: schema, value: schema } : undefined,
|
||||
);
|
||||
@ -208,6 +198,25 @@ export default function DatabaseSelector({
|
||||
[formMode, getDbList, sqlLabMode],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentDb(current =>
|
||||
current?.id !== db?.id
|
||||
? db
|
||||
? {
|
||||
label: (
|
||||
<SelectLabel
|
||||
backend={db.backend}
|
||||
databaseName={db.database_name}
|
||||
/>
|
||||
),
|
||||
value: db.id,
|
||||
...db,
|
||||
}
|
||||
: undefined
|
||||
: current,
|
||||
);
|
||||
}, [db]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentDb) {
|
||||
setLoadingSchemas(true);
|
||||
|
@ -185,6 +185,7 @@ const AsyncSelect = forwardRef(
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [loadingEnabled, setLoadingEnabled] = useState(!lazyLoading);
|
||||
const [allValuesLoaded, setAllValuesLoaded] = useState(false);
|
||||
const selectValueRef = useRef(selectValue);
|
||||
const fetchedQueries = useRef(new Map<string, number>());
|
||||
const mappedMode = isSingleMode
|
||||
? undefined
|
||||
@ -193,10 +194,14 @@ const AsyncSelect = forwardRef(
|
||||
: 'multiple';
|
||||
const allowFetch = !fetchOnlyOnSearch || inputValue;
|
||||
|
||||
useEffect(() => {
|
||||
selectValueRef.current = selectValue;
|
||||
}, [selectValue]);
|
||||
|
||||
const sortSelectedFirst = useCallback(
|
||||
(a: AntdLabeledValue, b: AntdLabeledValue) =>
|
||||
sortSelectedFirstHelper(a, b, selectValue),
|
||||
[selectValue],
|
||||
sortSelectedFirstHelper(a, b, selectValueRef.current),
|
||||
[],
|
||||
);
|
||||
|
||||
const sortComparatorWithSearch = useCallback(
|
||||
@ -334,6 +339,7 @@ const AsyncSelect = forwardRef(
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
|
||||
const fetchOptions = options as SelectOptionsPagePromise;
|
||||
fetchOptions(search, page, pageSize)
|
||||
.then(({ data, totalCount }: SelectOptionsTypePage) => {
|
||||
@ -342,7 +348,7 @@ const AsyncSelect = forwardRef(
|
||||
setTotalCount(totalCount);
|
||||
if (
|
||||
!fetchOnlyOnSearch &&
|
||||
value === '' &&
|
||||
search === '' &&
|
||||
mergedData.length >= totalCount
|
||||
) {
|
||||
setAllValuesLoaded(true);
|
||||
@ -360,7 +366,6 @@ const AsyncSelect = forwardRef(
|
||||
internalOnError,
|
||||
options,
|
||||
pageSize,
|
||||
value,
|
||||
],
|
||||
);
|
||||
|
||||
@ -512,10 +517,6 @@ const AsyncSelect = forwardRef(
|
||||
[ref],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectValue(value);
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
{header}
|
||||
|
@ -258,7 +258,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
|
||||
function renderDatabaseSelector() {
|
||||
return (
|
||||
<DatabaseSelector
|
||||
key={database?.id}
|
||||
db={database}
|
||||
emptyState={emptyState}
|
||||
formMode={formMode}
|
||||
|
Loading…
Reference in New Issue
Block a user