yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(ui): refine input to allow start and end components

Browse Source
This commit is contained in:
Brian McGee
2025-09-03 10:03:12 +01:00
committed by Johannes Kirschbauer
parent ffbf22eb60
commit aaaa310c7f
1 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx
View File

@@ -18,7 +18,7 @@ import {
} from "../InstallMachine"; } from "../InstallMachine";
import { TextInput } from "@/src/components/Form/TextInput"; import { TextInput } from "@/src/components/Form/TextInput";
import { Alert, AlertProps } from "@/src/components/Alert/Alert"; import { Alert, AlertProps } from "@/src/components/Alert/Alert";
import { createSignal, For, Match, Show, Switch, JSX } from "solid-js"; import { createSignal, For, Match, Show, Switch } from "solid-js";
import { Divider } from "@/src/components/Divider/Divider"; import { Divider } from "@/src/components/Divider/Divider";
import { Orienter } from "@/src/components/Form/Orienter"; import { Orienter } from "@/src/components/Form/Orienter";
import { Button } from "@/src/components/Button/Button"; import { Button } from "@/src/components/Button/Button";
@@ -576,16 +576,21 @@ const PromptsFields = (props: PromptsFieldsProps) => {
const [inputType, setInputType] = const [inputType, setInputType] =
createSignal(defaultInputType); createSignal(defaultInputType);
let endComponent: return (
| ((props: { inverted?: boolean }) => JSX.Element) <TextInput
| undefined = undefined; {...f}
label={
if (defaultInputType === "password") { fieldInfo.prompt.display?.label ||
endComponent = (props) => ( fieldInfo.prompt.name
}
endComponent={(local) => (
<Show when={defaultInputType === "password"}>
<KButton <KButton
onClick={() => { onClick={() => {
setInputType((type) => setInputType((type) =>
type === "password" ? "text" : "password", type === "password"
? "text"
: "password",
); );
}} }}
> >
@@ -596,20 +601,11 @@ const PromptsFields = (props: PromptsFieldsProps) => {
: "EyeOpen" : "EyeOpen"
} }
color="quaternary" color="quaternary"
inverted={props.inverted} inverted={local.inverted}
/> />
</KButton> </KButton>
); </Show>
} )}
return (
<TextInput
{...f}
label={
fieldInfo.prompt.display?.label ||
fieldInfo.prompt.name
}
endComponent={endComponent}
description={fieldInfo.prompt.description} description={fieldInfo.prompt.description}
value={f.value || fieldInfo.value || ""} value={f.value || fieldInfo.value || ""}
required={fieldInfo.prompt.display?.required} required={fieldInfo.prompt.display?.required}