public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed: x button overlap (#9198)

pull/8946/head^2
VasuDevrani 2023-05-30 19:43:17 +05:30 committed by GitHub
parent e37e07ab3b
commit 35144e6f47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/features/form-builder/FormBuilder.tsx
View File

@ -185,33 +185,12 @@ export const FormBuilder = function FormBuilder({
},
]);
}
const crossButton = (index: number) => {
return (
<div className={className}>
<Label>{label}</Label>
<div className="bg-muted rounded-md p-4">
<ul ref={animationRef}>
{value?.map((option, index) => (
<li key={index}>
<div className="flex items-center">
<Input
required
value={option.label}
onChange={(e) => {
// Right now we use label of the option as the value of the option. It allows us to not separately lookup the optionId to know the optionValue
// It has the same drawback that if the label is changed, the value of the option will change. It is not a big deal for now.
value.splice(index, 1, {
label: e.target.value,
value: e.target.value.trim(),
});
onChange(value);
}}
readOnly={readOnly}
placeholder={`Enter Option ${index + 1}`}
/>
{value.length > 2 && !readOnly && (
<Button
type="button"
className="mb-2 -ml-8 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
className="ml-3 p-0 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
size="sm"
color="minimal"
StartIcon={X}
@ -224,7 +203,34 @@ export const FormBuilder = function FormBuilder({
onChange(newOptions);
}}
/>
)}
);
};
return (
<div className={className}>
<Label>{label}</Label>
<div className="bg-muted rounded-md p-4">
<ul ref={animationRef}>
{value?.map((option, index) => (
<li key={index}>
<div className="flex items-center">
<InputField
required
value={option.label}
onChange={(e) => {
// Right now we use label of the option as the value of the option. It allows us to not separately lookup the optionId to know the optionValue
// It has the same drawback that if the label is changed, the value of the option will change. It is not a big deal for now.
value.splice(index, 1, {
label: e.target.value,
value: e.target.value.trim(),
});
onChange(value);
}}
addOnSuffix={value.length > 2 && !readOnly && crossButton(index)}
readOnly={readOnly}
placeholder={`Enter Option ${index + 1}`}
containerClassName="w-full"
/>
</div>
</li>
))}