oiupoyt/OneLauncher-Cracked
1
1
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

fix: Fix previous / cancel / backdrop ClusterCreationModal issues

Browse source
This commit is contained in:
LynithDev 2024-08-14 10:05:01 +02:00
parent fcb7df0430
commit 6808c97b49
3 changed files with 44 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/frontend/src/ui/components/overlay/Modal.tsx
View file

@ -35,15 +35,21 @@ export function ModalProvider(props: ParentProps) {
},
closeModal: (index?: number) => {
if (modals.length === 0 || modals.length <= (index || 0))
console.log('closeModal', index, modals.length);
if (modals.length === 0 || modals.length < (index || 0))
return;
if (index !== undefined) {
setModals(prev => prev.filter((_, i) => i !== index));
return;
}
setModals((prev) => {
if (index === undefined) {
const next = [...prev];
next.pop();
setModals(prev => prev.slice(0, -1));
return next;
}
else {
return prev.filter((_, i) => i !== index);
}
});
},
isVisible: (index) => {

31
apps/frontend/src/ui/components/overlay/cluster/ClusterCreationModal.tsx
View file

@ -1,4 +1,4 @@
import { type Accessor, type Context, type JSX, type ParentProps, type Setter, Show, createContext, createEffect, createSignal, onMount, untrack, useContext } from 'solid-js';
import { type Accessor, type Context, type JSX, type ParentProps, type Setter, Show, createContext, createSignal, untrack, useContext } from 'solid-js';
import { ArrowRightIcon, Server01Icon } from '@untitled-theme/icons-solid';
import { createStore } from 'solid-js/store';
import HeaderImage from '../../../../assets/images/header.png';
@ -19,7 +19,7 @@ type PartialClusterUpdateFunc = <K extends keyof PartialCluster>(key: K, value:
interface ClusterModalController {
step: Accessor<CreationStage | undefined>;
setStep: (step: CreationStage | undefined) => void;
setStep: (step: CreationStage | number | undefined) => void;
partialCluster: Accessor<PartialCluster>;
setPartialCluster: Setter<PartialCluster>;
@ -51,7 +51,13 @@ export function ClusterModalControllerProvider(props: ParentProps) {
setStep: (stage) => {
setSteps((prev) => {
if (stage === undefined)
return prev.slice(0, -1);
return [];
if (stage < 0) {
const next = [...prev];
next.pop();
return next;
}
return [...prev, stage];
});
@ -71,14 +77,18 @@ export function ClusterModalControllerProvider(props: ParentProps) {
async start() {
setPartialCluster({});
controller.setStep(CreationStage.PROVIDER_SELECTION);
// eslint-disable-next-line ts/no-use-before-define -- It should still work
modal.show();
},
previous() {
controller.setStep(undefined);
controller.setStep(-1);
},
cancel() {
setSteps([]);
controller.setStep(undefined);
// eslint-disable-next-line ts/no-use-before-define -- It should still work
modal.hide();
},
async finish() {
@ -102,16 +112,11 @@ export function ClusterModalControllerProvider(props: ParentProps) {
};
const modal = createModal(() => (
<>{stepComponents[controller.step()!]()}</>
<Show when={controller.step() !== undefined}>
<>{stepComponents[controller.step()!]()}</>
</Show>
));
createEffect(() => {
if (steps().length > 0)
modal.show();
else
modal.hide();
});
return (
<ClusterModalContext.Provider value={controller}>
{props.children}

25
apps/frontend/src/ui/components/overlay/cluster/ClusterProviderSelection.tsx
View file

@ -1,6 +1,6 @@
import { Upload01Icon, User03Icon } from '@untitled-theme/icons-solid';
import { Index, type JSX, createSignal } from 'solid-js';
import { type ClusterStepProps, createClusterStep } from './ClusterCreationModal';
import { Index, type JSX, createEffect, createSignal } from 'solid-js';
import { type ClusterStepProps, CreationStage, createClusterStep } from './ClusterCreationModal';
import ModrinthIcon from '~assets/logos/modrinth.svg?component-solid';
import CurseforgeIcon from '~assets/logos/curseforge.svg?component-solid';
@ -29,18 +29,21 @@ export default createClusterStep({
Component: ClusterProviderSelection,
});
function ClusterProviderSelection(_props: ClusterStepProps) {
function ClusterProviderSelection(props: ClusterStepProps) {
const [selected, setSelected] = createSignal<number>();
// const check = () => {
// props.setCanGoForward(selected() !== undefined);
// };
const check = () => {
props.setCanGoForward(() => {
const isTrue = selected() !== undefined;
// createEffect(check);
// createEffect(on(() => props.isVisible(), (curr: boolean) => {
// if (curr)
// check();
// }));
if (isTrue)
props.setNextStage(CreationStage.GAME_SETUP);
return isTrue;
});
};
createEffect(check);
return (
<div class="grid grid-cols-3 gap-2">