Commit 189c1b69 authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: scroll step into view

parent 0b0da348
Pipeline #181569 passed with stage
in 5 minutes and 14 seconds
......@@ -5,7 +5,7 @@ import {
} from '@reach/disclosure'
import cx from 'clsx'
import dynamic from 'next/dynamic'
import { useEffect, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import type { WorkflowDto } from '@/api/sshoc'
import { useQueryParam } from '@/lib/hooks/useQueryParam'
......@@ -53,6 +53,7 @@ export default function Steps({ steps }: { steps: Steps }): JSX.Element | null {
}
function Step({ step, index }: { step: Step; index: number }) {
const ref = useRef<HTMLButtonElement>(null)
const stepId = useQueryParam('step', false)
const [isOpen, setOpen] = useState(false)
......@@ -65,6 +66,7 @@ function Step({ step, index }: { step: Step; index: number }) {
useEffect(() => {
if (stepId != null && step.persistentId === stepId) {
setOpen(true)
ref.current?.scrollIntoView({ behavior: 'smooth' })
}
}, [step, stepId])
......@@ -98,6 +100,7 @@ function Step({ step, index }: { step: Step; index: number }) {
: 'text-white bg-secondary-600 hover:bg-secondary-500',
)}
onClick={toggleOpen}
ref={ref}
>
<span className="px-4">{isOpen ? 'Collapse' : 'Expand'}</span>{' '}
<span className={isOpen ? 'transform rotate-180' : ''}>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment