Published
Edited
Jul 12, 2020
Importers
1 star
Insert cell
Insert cell
Insert cell
ContextMenu = ({
layerX,
layerY,
pageY,
pageX,
flipVertical,
flipHorizontal,
options,
onBlur
}) => {
let context_ref = React.useRef();
// React.useLayoutEffect(() => {
// console.log('context_ref:', context_ref);
// context_ref.current.focus();
// }, [layerX, layerY]);

return jsx`
<${shadow.div}
styleSheets=${[contextmenu_style]}
style=${{
position: 'fixed',
top: pageY,
left: pageX,
transform: [
flipVertical && 'translateY(-100%)',
flipHorizontal && 'translateX(-100%)'
]
.filter(Boolean)
.join(' ')
}}
>
<div
className="menu"
onContextMenu=${e => {
e.preventDefault();
e.stopPropagation();
}}
onKeyDown=${event => {
if (event.key === 'Escape') {
event.currentTarget.blur();
}
}}
tabIndex="0"
ref=${ref => {
if (ref) ref.focus();
context_ref.current = ref;
}}
onBlur=${() => {
onBlur();
}}
>
${options.map(
option => jsx`
<button
disabled=${option.disabled}
className="option"
onMouseDown=${event => event.preventDefault()}
onClick=${event => {
option.onClick(event);
context_ref.current.blur();
}}
>
${option.title}
</button>
`
)}
</div>
</${shadow.div}>
`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more