ThemePreact/src/Input.tsx

92 lines
1.7 KiB
TypeScript

import { h, JSX } from "preact";
export function Input({
className,
children,
class: c,
...props
}: JSX.HTMLAttributes<HTMLInputElement>) {
return (
<input className={"ht-inp " + (className || "") + (c || "")} {...props}>
{children}
</input>
);
}
export function TextArea({
className,
children,
class: c,
...props
}: JSX.HTMLAttributes<HTMLTextAreaElement>) {
return (
<textarea
className={"ht-inp " + (className || "") + (c || "")}
{...props}
>
{children}
</textarea>
);
}
export function InputGroup({
className,
children,
class: c,
...props
}: JSX.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={"ht-input-group " + (className || "") + (c || "")}
{...props}
>
{children}
</div>
);
}
export interface IInputCheckboxProps {
label: string;
}
export function InputCheckbox({
label,
...props
}: IInputCheckboxProps & JSX.HTMLAttributes<HTMLInputElement>) {
return (
<label class="ht-input-checkbox">
{label}
<input type="checkbox" {...props} />
<span></span>
</label>
);
}
export interface IInputRadioProps {
label: string;
}
export function InputRadio({
label,
...props
}: IInputCheckboxProps & JSX.HTMLAttributes<HTMLInputElement>) {
return (
<label class="ht-input-checkbox">
{label}
<input type="radio" {...props} />
<span></span>
</label>
);
}
export function InputSelect({
className,
class: c,
children,
...props
}: JSX.HTMLAttributes<HTMLSelectElement>) {
return (
<select className={"ht-inp " + (className || "") + c} {...props}>
{children}
</select>
);
}