PoC Click to focus on element through URL param
This commit is contained in:
parent
2260b08c30
commit
df2204cb45
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import Container from 'react-bootstrap/Container';
|
import Container from 'react-bootstrap/Container';
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
@ -8,9 +8,48 @@ export type Props = {
|
|||||||
style?: 'primary' | 'light'
|
style?: 'primary' | 'light'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const focusChangedEventName = "focus-changed"
|
||||||
|
|
||||||
|
function useFocusedElement(elementKey: string) {
|
||||||
|
const [isFocusedElement, setFocusedElement] = useState(false);
|
||||||
|
const focusedClass = isFocusedElement ? 'focused-element' : ''
|
||||||
|
const elementRef = useRef<HTMLSpanElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function getFocusedState() {
|
||||||
|
const params = new URLSearchParams(window.location.search)
|
||||||
|
const focusedElement = params.get('focus')
|
||||||
|
const focused: boolean = focusedElement && focusedElement == elementKey || false
|
||||||
|
setFocusedElement(focused)
|
||||||
|
}
|
||||||
|
|
||||||
|
getFocusedState()
|
||||||
|
addEventListener(focusChangedEventName, getFocusedState)
|
||||||
|
return () => {
|
||||||
|
removeEventListener(focusChangedEventName, getFocusedState)
|
||||||
|
}
|
||||||
|
}, [elementKey, setFocusedElement])
|
||||||
|
|
||||||
|
isFocusedElement && elementRef.current?.scrollIntoView()
|
||||||
|
|
||||||
|
return {isFocusedElement, focusedClass, elementRef}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setFocusedElement(elementKey: string) {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set('focus', elementKey);
|
||||||
|
const focusChangeEvent = new Event(focusChangedEventName);
|
||||||
|
history.pushState({}, "", url);
|
||||||
|
window.dispatchEvent(focusChangeEvent)
|
||||||
|
}
|
||||||
|
|
||||||
function Tag(props: {text: string}) {
|
function Tag(props: {text: string}) {
|
||||||
|
const tagKey = 'tag_' + props.text;
|
||||||
|
const {focusedClass, elementRef} = useFocusedElement(tagKey)
|
||||||
return (
|
return (
|
||||||
<span className='badge text-bg-light'>{props.text}</span>
|
<span ref={elementRef}
|
||||||
|
onClick={() => setFocusedElement(tagKey)}
|
||||||
|
className={`badge text-bg-light ${focusedClass}`}>{props.text}</span>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -29,3 +29,6 @@
|
|||||||
.tag-badges > span:hover {
|
.tag-badges > span:hover {
|
||||||
filter: brightness(95%);
|
filter: brightness(95%);
|
||||||
}
|
}
|
||||||
|
.focused-element {
|
||||||
|
border: 2px solid red;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user