DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

started input validation on forms

Browse Source
This commit was merged in pull request #40.
This commit is contained in:
victorAnumudu
2024-04-23 19:25:50 +01:00
parent fe759c6d0a
commit 0207bf631a
8 changed files with 819 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shared/InputCompOne.tsx
+31 -14
View File
@@ -8,16 +8,16 @@ export interface InputCompOneProps {
labelSpanClass?: string;
floatLabel?: string;
placeholder?: string;
value?: string;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
value?: string | any;
onChange?: (e:any) => any;
onInput?: (e:any) => any;
name: string;
tabIndex?: number;
ref?: React.RefObject<HTMLInputElement>;
selectValue?: string;
input?: boolean;
select?: boolean;
selectOptions?: { value: string; label: string }[];
selectOptions?: {loading:boolean, data:{ value: string; label: string }[]};
inputType?: string;
inputClass?: string;
parentInputClass?: string;
@@ -44,7 +44,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
selectValue,
input = false,
select = false,
selectOptions = [],
selectOptions = {loading:false, data:[]},
inputType = "text",
inputClass,
parentInputClass,
@@ -58,10 +58,10 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
return (
<div className={parentClass}>
{label && (
<label htmlFor={label ? label : floatLabel} className={labelClass}>
<label htmlFor={label ? label : floatLabel} className={`flex gap-2 items-center ${labelClass}`}>
{label}
{labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
{error && <span className='text-[10px] text-red-500'>{error}</span>}
{error && label && <span className='text-[10px] text-red-500'>{error}</span>}
</label>
)}
{input && (
@@ -82,8 +82,11 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
{floatLabel &&
<label
htmlFor={label ? label : floatLabel}
className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
>{floatLabel}</label>
className={`flex items-center gap-2 cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500`}
>
{floatLabel}
{error && floatLabel && !label && <span className='text-[10px] text-red-500'>{error}</span>}
</label>
}
</div>
)}
@@ -94,19 +97,33 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
id={label ? label : floatLabel}
value={selectValue}
className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
// onChange={onChange}
onChange={onChange}
>
{selectOptions.map(({ value, label }) => (
{selectOptions.loading ?
<option value=''>Loading</option>
: selectOptions.data.length ?
selectOptions.data.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>
))
:
<option value=''>Not Found</option>
}
{/* {selectOptions.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>
))}
))} */}
</select>
{floatLabel &&
<label
htmlFor={label ? label : floatLabel}
className={`cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
>{floatLabel}</label>
className={`flex items-center gap-2 cursor-pointer text-sm text-black/70 dark:text-white absolute left-4 top-0 translate-y-0 peer-focus:top-0 peer-focus:translate-y-0 transition-all duration-500`}
>
{floatLabel}
{error && floatLabel && !label && <span className='text-[10px] text-red-500'>{error}</span>}
</label>
}
{/* select custon arrow */}
<div className='absolute right-4 top-1/2 -translate-y-1/2'>