Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { ReactElement, useState } from "react"
import ReactDOM from "react-dom"
import { GlossaryExcerpt } from "../site/GlossaryExcerpt"
interface Component {
[key: string]: any
}
const availableComponents: Component = { GlossaryExcerpt }
export const ExpandableInlineBlock_name = "ExpandableInlineBlock"
export const ExpandableInlineBlock = ({
label,
type,
children,
}: {
label: string
type: string
children: ReactElement
}) => {
const [isVisible, setVisible] = useState(false)
const toggleVisibility = () => setVisible(!isVisible)
return (
<span className="expandable-inline-block">
<button
data-track-note={`${type.toLowerCase()}-toggle`}
onClick={toggleVisibility}
>
{label}
</button>
{isVisible && <span>{children}</span>}
</span>
)
}
export const runExpandableInlineBlock = () => {
const expandableInlineBlocks = document.querySelectorAll(
`[data-type=${ExpandableInlineBlock_name}]`
)
expandableInlineBlocks.forEach((expandableInlineBlock) => {
const props = JSON.parse(expandableInlineBlock.innerHTML)
const subComponent = expandableInlineBlock.getAttribute("data-block")
const label = expandableInlineBlock.getAttribute("data-label")
if (!subComponent || !label || !props) return
const Component = availableComponents[subComponent]
ReactDOM.render(
<ExpandableInlineBlock label={label} type={subComponent}>
<Component {...props} label={label} />
</ExpandableInlineBlock>,
expandableInlineBlock.parentElement
)
})
}
|