From 810c5da6e26fdfc4f29df75dca13c0fdb787f34a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 09:29:41 +0700 Subject: update auto scrool to when error --- src-migrate/modules/register/components/Form.tsx | 32 +++++----- .../modules/register/components/FormBisnis.tsx | 69 ++++++++++++++-------- 2 files changed, 64 insertions(+), 37 deletions(-) (limited to 'src-migrate') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index b04e763c..55d542f2 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -26,7 +26,7 @@ const Form: React.FC = ({ }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); - + console.log('buttonSubmitClick', buttonSubmitClick); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); @@ -35,7 +35,7 @@ const Form: React.FC = ({ const emailRef = useRef(null); const nameRef = useRef(null); const passwordRef = useRef(null); - const teleponRef = useRef(null); + const phoneRef = useRef(null); const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; @@ -51,29 +51,33 @@ const Form: React.FC = ({ const loadIndustries = async () => { const response = await mutation.mutateAsync(form); if (!response?.register) { - // Logic to focus on first invalid input + const options: ScrollIntoViewOptions = { + behavior: 'smooth', + block: 'center', + }; + if (errors.email_partner && emailRef.current) { - emailRef.current.focus(); + emailRef.current.scrollIntoView(options); return; } if (errors.name && nameRef.current) { - nameRef.current.focus(); + nameRef.current.scrollIntoView(options); return; } if (errors.password && passwordRef.current) { - passwordRef.current.focus(); + passwordRef.current.scrollIntoView(options); return; } - if (errors.phone && teleponRef.current) { - teleponRef.current.scrollIntoView(); + if (errors.phone && phoneRef.current) { + phoneRef.current.scrollIntoView(options); return; } } }; loadIndustries(); - }, [buttonSubmitClick]); + }, [buttonSubmitClick, chekValid]); const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -133,7 +137,7 @@ const Form: React.FC = ({ type='text' id='name' name='name' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-700' placeholder='Masukan nama lengkap anda' value={form.name} ref={nameRef} @@ -155,7 +159,7 @@ const Form: React.FC = ({ type='text' id='email' name='email' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='Masukan alamat email anda' value={form.email} ref={emailRef} @@ -177,7 +181,7 @@ const Form: React.FC = ({ type='password' name='password' id='password' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='••••••••••••' value={form.password} ref={passwordRef} @@ -200,10 +204,10 @@ const Form: React.FC = ({ type='tel' id='phone' name='phone' - className='form-input mt-3' - ref={passwordRef} + className='form-input mt-3 transition-all duration-500' placeholder='08xxxxxxxx' value={form.phone} + ref={phoneRef} onChange={handleInputChange} aria-invalid={chekValid && !!errors.phone} /> diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx index 2ac998c9..50f3522b 100644 --- a/src-migrate/modules/register/components/FormBisnis.tsx +++ b/src-migrate/modules/register/components/FormBisnis.tsx @@ -47,6 +47,8 @@ const form: React.FC = ({ chekValid, buttonSubmitClick, }) => { + console.log('buttonSubmitClick', buttonSubmitClick); + const { form, errors, updateForm, validate } = useRegisterStore(); const { control, watch, setValue } = useForm(); const [selectedCategory, setSelectedCategory] = useState(''); @@ -65,13 +67,15 @@ const form: React.FC = ({ const emailRef = useRef(null); const businessNameRef = useRef(null); - const comppanyTypeRef = useRef(null); + const companyTypeRef = useRef(null); const industryRef = useRef(null); const addressRef = useRef(null); const namaWajibPajakRef = useRef(null); const alamatWajibPajakRef = useRef(null); const npwpRef = useRef(null); const sppkpRef = useRef(null); + const docsSppkpRef = useRef(null); + const docsNpwpRef = useRef(null); useEffect(() => { const loadCompanyTypes = async () => { @@ -248,44 +252,55 @@ const form: React.FC = ({ const loadIndustries = async () => { const response = await mutation.mutateAsync(form); if (!response?.register) { - // Logic to focus on first invalid input + const options: ScrollIntoViewOptions = { + behavior: 'smooth', + block: 'center', + }; if (errors.email_partner && emailRef.current) { - emailRef.current.focus(); + emailRef.current.scrollIntoView(options); return; } - if (errors.company_type_id && businessNameRef.current) { - businessNameRef.current.focus(); + if (errors.company_type_id && companyTypeRef.current) { + companyTypeRef.current.scrollIntoView(options); return; } if (errors.business_name && businessNameRef.current) { - businessNameRef.current.focus(); + businessNameRef.current.scrollIntoView(options); return; } if (errors.industry_id && industryRef.current) { - industryRef.current.scrollIntoView(); + industryRef.current.scrollIntoView(options); return; } if (errors.alamat_bisnis && addressRef.current) { - addressRef.current.focus(); + addressRef.current.scrollIntoView(options); return; } if (errors.npwp && npwpRef.current) { - npwpRef.current.focus(); + npwpRef.current.scrollIntoView(options); return; } if (errors.sppkp && sppkpRef.current) { - sppkpRef.current.focus(); + sppkpRef.current.scrollIntoView(options); + return; + } + if (errors.sppkp_document && docsSppkpRef.current) { + docsSppkpRef.current.scrollIntoView(options); + return; + } + if (errors.npwp_document && docsNpwpRef.current) { + docsNpwpRef.current.scrollIntoView(options); return; } } }; loadIndustries(); - }, [buttonSubmitClick]); + }, [buttonSubmitClick, chekValid]); const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -374,7 +389,7 @@ const form: React.FC = ({ name='email_partner' placeholder='example@email.com' value={!required ? form.email_partner : ''} - className={`form-input max-h-11 mt-3 ${ + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ required ? 'cursor-no-drop' : '' }`} disabled={required} @@ -398,7 +413,10 @@ const form: React.FC = ({ Nama Bisnis
-
+
= ({ type='text' name='business_name' id='business_name' - className='form-input max-h-11' + className='form-input max-h-11 transition-all duration-500' placeholder='Nama Perusahaan' autoCapitalize='true' value={form.business_name} @@ -442,7 +460,10 @@ const form: React.FC = ({ -
+
= ({ name='alamat_bisnis' placeholder='Masukan alamat bisnis anda' value={!required ? form.alamat_bisnis : ''} - className={`form-input mt-3 max-h-11 ${ + className={`form-input mt-3 max-h-11 transition-all duration-500 ${ required ? 'cursor-no-drop' : '' }`} disabled={required} @@ -507,7 +528,7 @@ const form: React.FC = ({ name='nama_wajib_pajak' placeholder='Masukan nama lengkap anda' value={!required ? form.nama_wajib_pajak : ''} - className={`form-input mt-3 max-h-11 ${ + className={`form-input mt-3 max-h-11 transition-all duration-500${ required ? 'cursor-no-drop' : '' }`} disabled={required} @@ -536,7 +557,7 @@ const form: React.FC = ({ (opsional) )}

-
+
= ({ : form.alamat_wajib_pajak : '' } - className={`form-input max-h-11 mt-3 ${ + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ required ? 'cursor-no-drop' : '' }`} disabled={isChekBox || required} @@ -592,7 +613,7 @@ const form: React.FC = ({ type='tel' id='npwp' name='npwp' - className={`form-input max-h-11 mt-3 ${ + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ required ? 'cursor-no-drop' : '' }`} disabled={required} @@ -652,7 +673,7 @@ const form: React.FC = ({ type='tel' id='sppkp' name='sppkp' - className={`form-input max-h-11 mt-3 ${ + className={`form-input max-h-11 mt-3 transition-all duration-500 ${ required ? 'cursor-no-drop' : '' }`} disabled={required} @@ -682,11 +703,12 @@ const form: React.FC = ({ type='file' id='npwp_document' name='npwp_document' - className={`form-input ${ + className={`form-input transition-all duration-500 ${ type === 'bisnis' ? '' : 'border-none' } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} + ref={docsNpwpRef} readOnly={required} onChange={handleFileChange} accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types @@ -709,11 +731,12 @@ const form: React.FC = ({ type='file' id='sppkp_document' name='sppkp_document' - className={`form-input ${ + className={`form-input transition-all duration-500 ${ type === 'bisnis' ? '' : 'border-none' } mt-3 ${required ? 'cursor-no-drop' : ''}`} disabled={required} contentEditable={required} + ref={docsSppkpRef} readOnly={required} onChange={handleFileChange} accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types -- cgit v1.2.3