File size: 2,634 Bytes
1813a37 a417977 1813a37 a417977 1813a37 1982de5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import {FunctionalComponent} from "preact";
import {useState} from "preact/hooks";
import cn from "classnames";
import {JSX} from "preact";
// import GenericEventHandler = JSXInternal.GenericEventHandler;
import style from "./style.module.scss";
import {Settings} from "preact-feather";
import {FeatherProps} from "preact-feather/src/types";
interface InputProps<T> {
type: "text" | "number" | "email" | "password";
icon: FunctionalComponent<FeatherProps>;
value: T;
placeholder?: string;
onChange: (value: T) => void;
className?: string;
disabled?: boolean;
id?: string;
name?: string;
}
export const Input: FunctionalComponent<InputProps<string | number>> = ({
type,
icon,
value,
placeholder,
onChange,
className,
disabled,
id,
name,
}) => {
const inputClass = cn(style.input, className);
const handleInputChange: JSX.GenericEventHandler<HTMLInputElement> = (event) => {
console.log("handleInputChange")
const target = event.target as HTMLInputElement;
onChange(type === "number" ? (parseFloat(target.value) || 0) : target.value);
};
const Icon = icon;
return (
<div className={cn(style.wrapper, {[style.disabled]: disabled})}>
<Icon className={style.icon} size={18}/>
<input
// required=""
// minLength="3"
// maxLength="15"
title="Le pseudo doit avoir une longueur comprise entre 3 et 15 caractères."
// tabIndex="10"
type={type}
id={id}
name={name}
value={value}
placeholder={placeholder}
// onChange={handleInputChange}
onInput={handleInputChange}
className={inputClass}
disabled={disabled}
/>
</div>
)
}; |