fix: only delete last file when select multiple files #1576 (#1578)

* fix the bug can't delete multiple files #1576

* using useEvent instead of useRef

* delete unused code

* delete unused code

* change hook file name

* refactor the useEvent

* delete unnecessary export

* fix import

* Apply suggestions from code review

---------

Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
CorrectRoadH 2023-04-29 00:17:08 +08:00 committed by GitHub
parent 4603f414db
commit f7a1680f72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 4 deletions

25
web/src/hooks/useEvent.ts Normal file
View File

@ -0,0 +1,25 @@
import React, { useEffect, useRef, EffectCallback, DependencyList } from "react";
const useIsoMorphicEffect = (effect: EffectCallback, deps?: DependencyList | undefined) => {
useEffect(effect, deps);
};
function useLatestValue<T>(value: T) {
const cache = useRef(value);
useIsoMorphicEffect(() => {
cache.current = value;
}, [value]);
return cache;
}
// TODO: Add React.useEvent ?? once the useEvent hook is available
function useEvent<F extends (...args: any[]) => any, P extends any[] = Parameters<F>, R = ReturnType<F>>(
cb: (...args: P) => R
) {
const cache = useLatestValue(cb);
return React.useCallback((...args: P) => cache.current(...args), [cache]);
};
export default useEvent;

View File

@ -13,6 +13,7 @@ import Dropdown from "@/components/kit/Dropdown";
import ResourceItem from "@/components/ResourceItem";
import { showCommonDialog } from "@/components/Dialog/CommonDialog";
import showCreateResourceDialog from "@/components/CreateResourceDialog";
import useEvent from "@/hooks/useEvent";
const ResourcesDashboard = () => {
const { t } = useTranslation();
@ -40,13 +41,13 @@ const ResourcesDashboard = () => {
});
}, []);
const handleCheckBtnClick = (resourceId: ResourceId) => {
const handleCheckBtnClick = useEvent((resourceId: ResourceId) => {
setSelectedList([...selectedList, resourceId]);
};
});
const handleUncheckBtnClick = (resourceId: ResourceId) => {
const handleUncheckBtnClick = useEvent((resourceId: ResourceId) => {
setSelectedList(selectedList.filter((id) => id !== resourceId));
};
});
const handleStyleChangeBtnClick = (listStyle: "GRID" | "TABLE") => {
setListStyle(listStyle);