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

changed layout structure

Browse Source
This commit was merged in pull request #58.
This commit is contained in:
victorAnumudu
2024-06-10 20:13:13 +01:00
parent cc44af7e55
commit 4637944fbd
3 changed files with 261 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shared/InputCompOne.tsx
+22 -9
View File
@@ -17,7 +17,7 @@ export interface InputCompOneProps {
selectValue?: string;
input?: boolean;
select?: boolean;
selectOptions?: {loading:boolean, data:{ value: string; label: string }[]};
selectOptions?: {loading:boolean, data:{ [index: string]: string; }[]};
inputType?: string;
inputClass?: string;
parentInputClass?: string;
@@ -25,6 +25,7 @@ export interface InputCompOneProps {
parentClass?: string;
maxLength?: number;
error?: string;
disabled?: boolean
}
const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -52,6 +53,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
parentClass,
maxLength,
error,
disabled=false
},
forwardedRef
) => {
@@ -78,6 +80,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
className={`px-4 ${floatLabel && 'peer pt-4 placeholder:text-transparent'} ${inputClass}`}
maxLength={maxLength}
id={label ? label : floatLabel}
disabled={disabled}
/>
{floatLabel &&
<label
@@ -96,17 +99,27 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
name={name}
id={label ? label : floatLabel}
value={selectValue}
className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass} ${disabled && 'opacity-50'}`}
onChange={onChange}
disabled={disabled}
>
{selectOptions.loading ?
<option value=''>Loading</option>
: selectOptions.data.length ?
selectOptions.data.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>
))
<option value=''>Loading...</option>
: selectOptions.data.length && name == 'employer' ?
<>
<option value=''>Please Select</option>
{selectOptions.data.map(({ uid, name }) => (
<option key={uid} value={uid}>
{name}
</option>
))}
</>
: selectOptions.data.length && name != 'employer' ?
selectOptions.data.map(({ value, label }) => (
<option key={value} value={value}>
{label}
</option>
))
:
<option value=''>Not Found</option>
}