fix position and add transition (#11799)
parent
150dc3acb9
commit
0cfbf7159e
|
@ -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.
|
||||
// So, this would reuse the same Form as the parent form.
|
||||
const fieldsForm = useFormContext<RhfForm>();
|
||||
|
||||
const [parent] = useAutoAnimate<HTMLUListElement>();
|
||||
const { t } = useLocale();
|
||||
|
||||
const { fields, swap, remove, update, append } = useFieldArray({
|
||||
|
@ -112,7 +112,7 @@ export const FormBuilder = function FormBuilder({
|
|||
{LockedIcon}
|
||||
</div>
|
||||
<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) => {
|
||||
const options = field.options
|
||||
? field.options
|
||||
|
|
|
@ -10,13 +10,13 @@ export function ArrowButton(props: ArrowButtonProps) {
|
|||
<>
|
||||
{props.arrowDirection === "up" ? (
|
||||
<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}>
|
||||
<ArrowUp className="h-5 w-5" />
|
||||
</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}>
|
||||
<ArrowDown className="h-5 w-5" />
|
||||
</button>
|
||||
|
|
Loading…
Reference in New Issue