fix position and add transition (#11799)

pull/11807/head^2
Anik Dhabal Babu 2023-10-11 00:45:26 +05:30 committed by GitHub
parent 150dc3acb9
commit 0cfbf7159e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 4 deletions

View File

@ -69,7 +69,7 @@ export const FormBuilder = function FormBuilder({
// I would have liked to give Form Builder it's own Form but nested Forms aren't something that browsers support. // I would have liked to give Form Builder it's own Form but nested Forms aren't something that browsers support.
// So, this would reuse the same Form as the parent form. // So, this would reuse the same Form as the parent form.
const fieldsForm = useFormContext<RhfForm>(); const fieldsForm = useFormContext<RhfForm>();
const [parent] = useAutoAnimate<HTMLUListElement>();
const { t } = useLocale(); const { t } = useLocale();
const { fields, swap, remove, update, append } = useFieldArray({ const { fields, swap, remove, update, append } = useFieldArray({
@ -112,7 +112,7 @@ export const FormBuilder = function FormBuilder({
{LockedIcon} {LockedIcon}
</div> </div>
<p className="text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px]">{description}</p> <p className="text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px]">{description}</p>
<ul className="border-subtle divide-subtle mt-2 divide-y rounded-md border"> <ul ref={parent} className="border-subtle divide-subtle mt-2 divide-y rounded-md border">
{fields.map((field, index) => { {fields.map((field, index) => {
const options = field.options const options = field.options
? field.options ? field.options

View File

@ -10,13 +10,13 @@ export function ArrowButton(props: ArrowButtonProps) {
<> <>
{props.arrowDirection === "up" ? ( {props.arrowDirection === "up" ? (
<button <button
className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]" className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[12px]"
onClick={props.onClick}> onClick={props.onClick}>
<ArrowUp className="h-5 w-5" /> <ArrowUp className="h-5 w-5" />
</button> </button>
) : ( ) : (
<button <button
className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]" className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[12px]"
onClick={props.onClick}> onClick={props.onClick}>
<ArrowDown className="h-5 w-5" /> <ArrowDown className="h-5 w-5" />
</button> </button>