88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import type { TextInputProps } from "$/types/InputTypes";
|
|
import clsx from "clsx";
|
|
import { useId } from "react";
|
|
|
|
|
|
export default function PhoneInput({
|
|
id,
|
|
className,
|
|
inputClassName,
|
|
labelClassName,
|
|
name,
|
|
maxLength,
|
|
spellCheck,
|
|
placeholder,
|
|
value,
|
|
onChange,
|
|
onKeyDown,
|
|
disabled
|
|
}: Readonly<TextInputProps>){
|
|
const componentId = useId();
|
|
const activeId = id ?? componentId;
|
|
|
|
//TODO: Figure out how to setup phone number
|
|
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"flex flex-row items-center justify-center rounded-lg border-2 w-full",
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
|
|
>
|
|
<input
|
|
type="text"
|
|
id={activeId}
|
|
className={clsx(
|
|
"peer bg-transparent outline-none placeholder-transparent w-full",
|
|
inputClassName
|
|
)}
|
|
name={name}
|
|
placeholder={placeholder}
|
|
maxLength={maxLength}
|
|
value={value}
|
|
onChange={(e) => onChange?.(e.target.value)}
|
|
onKeyDown={onKeyDown}
|
|
disabled={disabled}
|
|
spellCheck={spellCheck}
|
|
/>
|
|
<label
|
|
className={clsx(
|
|
"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
|
|
"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]",
|
|
"peer-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
|
|
"flex items-center",
|
|
labelClassName
|
|
)}
|
|
style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
|
|
htmlFor={activeId}
|
|
>
|
|
{placeholder}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/*
|
|
function formatPhoneNumber(phoneNumber: string): string {
|
|
const chars: string[] = [];
|
|
|
|
// Separate the string into individual characters
|
|
for(let cnt = 0;cnt < phoneNumber.length;++cnt){
|
|
chars.push(phoneNumber.charAt(cnt));
|
|
}
|
|
|
|
// Add _ for any chars that don't exist
|
|
for(let cnt = chars.length;cnt < 10;++cnt){
|
|
chars.push("_");
|
|
}
|
|
|
|
// Put the values into the correct format
|
|
return "(" + chars.slice(0, 3).join() + ") " + chars.slice(3, 6).join() + "-" + chars.slice(6).join();
|
|
}
|
|
*/
|