From 5ff48cace82bae78d2a8afd4b521d1d068fd48b3 Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Mon, 22 Jul 2024 16:58:57 +0200 Subject: [PATCH] feat: add more checks and update data in context --- .../src/ui/components/base/SelectList.tsx | 20 +++++--- .../overlay/cluster/ClusterCreationModal.tsx | 9 ++++ .../overlay/cluster/ClusterStepTwo.tsx | 47 ++++++++++++------- 3 files changed, 54 insertions(+), 22 deletions(-) diff --git a/apps/desktop/src/ui/components/base/SelectList.tsx b/apps/desktop/src/ui/components/base/SelectList.tsx index 89881ec5..d2f43138 100644 --- a/apps/desktop/src/ui/components/base/SelectList.tsx +++ b/apps/desktop/src/ui/components/base/SelectList.tsx @@ -1,12 +1,18 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid'; -import { type Context, type JSX, type ParentProps, type Signal, createContext, createSignal, splitProps, useContext } from 'solid-js'; +import { type Context, type JSX, type ParentProps, type Signal, createContext, createEffect, createSignal, splitProps, useContext } from 'solid-js'; import styles from './SelectList.module.scss'; type SelectListContextHelpers = Signal; const SelectListContext = createContext() as Context; -function SelectListContextProvider(props: ParentProps) { - const [selected, setSelected] = createSignal(); +function SelectListContextProvider(props: ParentProps & { + onChanged?: ((index: number | undefined) => any) | undefined; +}) { + const [selected, setSelected] = createSignal(); + + createEffect(() => { + props.onChanged?.(selected()); + }); return ( @@ -19,12 +25,14 @@ function useSelectListContext() { return useContext(SelectListContext); } -export type SelectListProps = JSX.HTMLAttributes; +export type SelectListProps = Omit, 'onChange'> & { + onChange?: (index: number | undefined) => any; +}; function SelectList(props: SelectListProps) { - const [split, rest] = splitProps(props, ['class']); + const [split, rest] = splitProps(props, ['class', 'onChange']); return ( - +
diff --git a/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx b/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx index 61a07460..37895ad6 100644 --- a/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx +++ b/apps/desktop/src/ui/components/overlay/cluster/ClusterCreationModal.tsx @@ -16,6 +16,7 @@ interface ClusterModalContextFunc { setStep: Setter; partialCluster: Accessor; setPartialCluster: Setter; + updatePartialCluster: (key: K, value: PartialCluster[K]) => any; setVisible: Setter; } @@ -38,6 +39,14 @@ export function ClusterModalController(props: ParentProps) { setStep, partialCluster, setPartialCluster, + updatePartialCluster(key, value) { + setPartialCluster((prev) => { + return { + ...prev, + [key]: value, + }; + }); + }, setVisible, }; diff --git a/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx b/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx index 6d35da55..e3e15b19 100644 --- a/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx +++ b/apps/desktop/src/ui/components/overlay/cluster/ClusterStepTwo.tsx @@ -1,8 +1,6 @@ -import { Camera01Icon, FilterFunnel01Icon, TextInputIcon } from '@untitled-theme/icons-solid'; -import { For, Index, type JSX, Show, createEffect, createMemo, createSignal, on, onMount, splitProps } from 'solid-js'; -import { Select } from '@thisbeyond/solid-select'; -import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid'; -import type { ClusterStepProps } from './ClusterCreationModal'; +import { TextInputIcon } from '@untitled-theme/icons-solid'; +import { For, Index, type JSX, type Setter, Show, createEffect, createSignal, on, splitProps, untrack } from 'solid-js'; +import { type ClusterStepProps, useClusterModalController } from './ClusterCreationModal'; import Dropdown from '~ui/components/base/Dropdown'; import TextField from '~ui/components/base/TextField'; import VanillaImage from '~assets/logos/vanilla.png'; @@ -11,12 +9,9 @@ import ForgeImage from '~assets/logos/forge.png'; import QuiltImage from '~assets/logos/quilt.png'; import useCommand from '~ui/hooks/useCommand'; import { bridge } from '~imports'; -import Button from '~ui/components/base/Button'; -import Tooltip from '~ui/components/base/Tooltip'; import SelectList from '~ui/components/base/SelectList'; import Checkbox from '~ui/components/base/Checkbox'; -import { getEnumMembers } from '~utils/primitives'; -import type { VersionType } from '~bindings'; +import type { Loader, VersionType } from '~bindings'; import { formatVersionRelease } from '~utils/helpers'; const loaders: { @@ -42,12 +37,14 @@ const loaders: { ]; export function ClusterStepTwo(props: ClusterStepProps) { - const [name, setName] = createSignal(''); + const { partialCluster, updatePartialCluster } = useClusterModalController(); const check = () => { - const hasName = name().length > 0; + const hasName = (partialCluster().name?.length ?? 0) > 0; + const hasVersion = (partialCluster().mc_version?.length ?? 0) > 0; + const hasLoader = (partialCluster().mod_loader?.length ?? 0) > 0; - props.setCanGoForward(hasName); + props.setCanGoForward(hasName && hasVersion && hasLoader); }; createEffect(check); @@ -56,6 +53,10 @@ export function ClusterStepTwo(props: ClusterStepProps) { check(); })); + const setName = (name: string) => updatePartialCluster('name', name); + const setVersion = (version: string) => updatePartialCluster('mc_version', version); + const setLoader = (loader: string) => updatePartialCluster('mod_loader', loader.toLowerCase() as Loader); + return (