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.
|
// 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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue