114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
/* @refresh reload */
|
|
import { type Component, createSignal, JSX, Setter } from "solid-js";
|
|
import type { InputProps } from "../types/interfaces";
|
|
import Row from "./row";
|
|
|
|
function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void {
|
|
let isMounted = true;
|
|
|
|
function hover(hover: boolean): void {
|
|
if (isMounted) {
|
|
setIsHover(hover);
|
|
}
|
|
}
|
|
|
|
const el = document.getElementById(id);
|
|
el?.addEventListener("pointerenter", () => hover(true));
|
|
el?.addEventListener("pointerleave", () => hover(false));
|
|
|
|
return () => {
|
|
el?.removeEventListener("pointerenter", () => hover(true));
|
|
el?.removeEventListener("pointerleave", () => hover(false));
|
|
isMounted = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sets isText to 'true' or 'false' using the setIsText function.
|
|
* if the value of the input element is not empty and it's different from the current value
|
|
*/
|
|
function setSetIsText(id: string | undefined, isText: boolean, setIsText: Setter<boolean>): void {
|
|
if (id) {
|
|
const el = document.getElementById(id) as HTMLInputElement | HTMLTextAreaElement | null;
|
|
if (el && el.value !== "" !== isText) {
|
|
setIsText(el.value !== "");
|
|
}
|
|
}
|
|
}
|
|
|
|
interface Input<T> extends InputProps<T> {
|
|
leading?: JSX.Element,
|
|
trailing?: JSX.Element,
|
|
}
|
|
|
|
export const Input: Component<Input<HTMLInputElement>> = (
|
|
{
|
|
className,
|
|
id,
|
|
name,
|
|
type = "text",
|
|
title,
|
|
placeholder,
|
|
required = false,
|
|
onChange,
|
|
leading,
|
|
trailing
|
|
}): JSX.Element => {
|
|
|
|
/**
|
|
* Is 'true' if the input element is in focus
|
|
*/
|
|
const [isFocused, setIsFocused] = createSignal(false);
|
|
/**
|
|
* Is 'true' if the user is hovering over the input element
|
|
*/
|
|
const [isHover, setIsHover] = createSignal(false);
|
|
/**
|
|
* Is 'true' if the input element contains any characters
|
|
*/
|
|
const [isText, setIsText] = createSignal(false);
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
if (id && title) {
|
|
setupEventListener(id, setIsHover);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Row className={ "relative" }>
|
|
{ leading }
|
|
<HoverTitle title={ title } isActive={ isFocused() || isHover() || isText() } htmlFor={ id }/>
|
|
<input
|
|
class={ `bg-default-bg focus:border-cyan-500 outline-none border-2 border-gray-500
|
|
hover:border-t-cyan-400 ${ className }` }
|
|
id={ id }
|
|
onFocus={ () => setIsFocused(true) }
|
|
onBlur={ () => setIsFocused(false) }
|
|
name={ name ?? undefined }
|
|
type={ type }
|
|
placeholder={ placeholder ?? undefined }
|
|
required={ required }
|
|
onInput={ () => setSetIsText(id, isText(), setIsText) }
|
|
onChange={ onChange /*TODO only called after ENTER*/ }/>
|
|
{ trailing }
|
|
</Row>
|
|
);
|
|
}
|
|
|
|
function HoverTitle(
|
|
{
|
|
title,
|
|
isActive = false,
|
|
htmlFor
|
|
}: { title?: string | null, isActive?: boolean, htmlFor?: string }): JSX.Element {
|
|
return (
|
|
<label class={ `absolute pointer-events-none
|
|
${ isActive ? "-top-2 left-3 default-bg text-sm" : "left-2 top-1" }
|
|
transition-all duration-150 text-gray-600 dark:text-gray-400` }
|
|
for={ htmlFor }>
|
|
<div class={ "z-50 relative" }>{ title }</div>
|
|
<div class={ "w-full h-2 default-bg absolute bottom-1/3 z-10" }/>
|
|
</label>
|
|
);
|
|
}
|