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

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

@@ -18,7 +18,7 @@ import {
} from "../InstallMachine";
import { TextInput } from "@/src/components/Form/TextInput";
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 { Orienter } from "@/src/components/Form/Orienter";
import { Button } from "@/src/components/Button/Button";
@@ -576,32 +576,6 @@ const PromptsFields = (props: PromptsFieldsProps) => {
const [inputType, setInputType] =
createSignal(defaultInputType);
let endComponent:
| ((props: { inverted?: boolean }) => JSX.Element)
| undefined = undefined;
if (defaultInputType === "password") {
endComponent = (props) => (
<KButton
onClick={() => {
setInputType((type) =>
type === "password" ? "text" : "password",
);
}}
>
<Icon
icon={
inputType() == "password"
? "EyeClose"
: "EyeOpen"
}
color="quaternary"
inverted={props.inverted}
/>
</KButton>
);
}
return (
<TextInput
{...f}
@@ -609,7 +583,29 @@ const PromptsFields = (props: PromptsFieldsProps) => {
fieldInfo.prompt.display?.label ||
fieldInfo.prompt.name
}
endComponent={endComponent}
endComponent={(local) => (
<Show when={defaultInputType === "password"}>
<KButton
onClick={() => {
setInputType((type) =>
type === "password"
? "text"
: "password",
);
}}
>
<Icon
icon={
inputType() == "password"
? "EyeClose"
: "EyeOpen"
}
color="quaternary"
inverted={local.inverted}
/>
</KButton>
</Show>
)}
description={fieldInfo.prompt.description}
value={f.value || fieldInfo.value || ""}
required={fieldInfo.prompt.display?.required}