acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 07:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Correction de l'affichage des numéros de téléphone [#41]

Browse Source
This commit is contained in:
Luc SORIGNET
2025-04-11 16:59:15 +02:00
parent a157d53932
commit 4f774c18e4
11 changed files with 125 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
Front-End/src/components/InputPhone.js
View File

@ -1,40 +1,32 @@
import { useEffect, useRef } from 'react';
export default function InputPhone({ name, label, value, onChange, errorMsg, placeholder, className, required }) {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, []);
const handleChange = (e) => {
const newValue = e.target.value;
onChange(newValue);
};
import React from 'react';
import { PhoneInput } from 'react-international-phone';
import 'react-international-phone/style.css';
export default function InputPhone({ name, label, value, onChange, errorMsg, className, required }) {
return (
<>
<div className={`mb-4 ${className}`}>
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
{label}
{required && <span className="text-red-500 ml-1">*</span>}
</label>
<div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500`}>
<input
type="tel"
name={name}
ref={inputRef}
className="flex-1 px-3 py-2 block w-full sm:text-sm focus:ring-0 rounded-md border-none outline-none"
value={typeof value === 'string' ? value : ''}
onChange={handleChange}
placeholder={placeholder}
/>
</div>
{errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
</div>
</>
)
<div className={`${className}`}>
<label htmlFor={name} className="block text-sm font-medium text-gray-700">
{label}
{required && <span className="text-red-500 ml-1">*</span>}
</label>
<PhoneInput
defaultCountry="fr"
value={value}
onChange={(phone) => onChange(phone)}
inputProps={{
name: name,
required: required,
}}
className="!w-full mt-1 !h-[38px]"
containerClassName="!w-full !h-[36px] !flex !items-center !rounded-md"
inputClassName={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none !rounded-r-md !outline-none items-center !border !border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500` }
buttonClassName="!h-[38px] !flex !items-center !justify-center !rounded-l-md !border border-gray-200 !border-r-0"
/>
{errorMsg && (
<p className="mt-2 text-sm text-red-600">{errorMsg}</p>
)}
</div>
);
}