[feat-76] added drag n drop in mods slide dropdown

This commit is contained in:
silentrald
2024-12-08 23:33:44 +08:00
parent 431494da94
commit c978d4689e
12 changed files with 24 additions and 2 deletions
@@ -17,9 +17,10 @@ type Props = {
uninstallMod?: (mods: Mod) => void;
uninstallAllMods?: () => void;
unselectAllMods?: () => void;
openModsDropZone?: () => void;
};
export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos, disabled, uninstallMod, uninstallAllMods, unselectAllMods }: Props) {
export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreInfoMod, onWantInfos, disabled, uninstallMod, uninstallAllMods, unselectAllMods, openModsDropZone }: Props) {
const [filter, setFilter] = useState("");
const [filterEnabled, setFilterEnabled] = useState(false);
@@ -68,6 +69,7 @@ export function ModsGrid({ modsMap, installed, modsSelected, onModChange, moreIn
<span className="z-10 sticky flex items-center justify-center top-0 bg-inherit border-b-2 border-main-color-1 h-8 whitespace-nowrap">{t("pages.version-viewer.mods.mods-grid.header-bar.description")}</span>
<span className="z-10 sticky top-0 bg-inherit border-b-2 border-main-color-1 h-8 flex justify-start items-center py-1 pl-[3px] min-w-[50px]">
<BsmDropdownButton className="h-full aspect-square relative rounded-full bg-light-main-color-1 dark:bg-main-color-3" withBar={false} icon="three-dots" buttonClassName="!rounded-full !p-[2px] !bg-light-main-color-2 dark:!bg-main-color-2 hover:!bg-light-main-color-1 dark:hover:!bg-main-color-3" menuTranslationY="5px" items={[
{ text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.import-mods", icon: "download", onClick: () => openModsDropZone?.() },
{ text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.unselect-all", icon: "cancel", onClick: () => unselectAllMods?.() },
{ text: "pages.version-viewer.mods.mods-grid.header-bar.dropdown.uninstall-all", icon: "trash", onClick: () => uninstallAllMods?.() }
]} />
@@ -45,6 +45,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
const isOnline = useObservable(() => os.isOnline$);
const [installing, setInstalling] = useState(false);
const [uninstalling, setUninstalling] = useState(false);
const [modsDropZoneOpen, setModsDropZoneOpen] = useState(false);
const downloadRef = useRef(null);
const [downloadWith, setDownloadWidth] = useState(0);
@@ -170,6 +171,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
};
const importMods = (files: string[]): void => {
setModsDropZoneOpen(false);
modsManager.importMods(files, version);
};
@@ -287,6 +289,7 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
uninstallMod={uninstallMod}
uninstallAllMods={uninstallAllMods}
unselectAllMods={unselectAllMods}
openModsDropZone={() => setModsDropZoneOpen(true)}
/>
</div>
<div className="shrink-0 flex items-center justify-between px-3 py-2">
@@ -310,10 +313,15 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
onFiles={importMods}
text={t("pages.version-viewer.mods.drop-zone.text")}
subtext={t("pages.version-viewer.mods.drop-zone.subtext")}
open={modsDropZoneOpen}
onClose={modsDropZoneOpen ? () => setModsDropZoneOpen(false) : undefined}
filters={[
{ name: ".zip", extensions: ["zip"] },
{ name: ".dll", extensions: ["dll"] }
]}
dialogOptions={{ dialog: {
properties: ["openFile", "multiSelections"],
}}}
>
<div className="relative flex flex-col grow-0 bg-light-main-color-2 dark:bg-main-color-2 size-full rounded-md shadow-black shadow-center overflow-hidden">{renderContent()}</div>
</Dropzone>