customizable context menu

Author: Ni55aN

src/presets/context-menu/components/Item.tsx

@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components'
 
 import { useDebounce } from '../hooks'
 import { CommonStyle } from '../styles'
-import { Item } from '../types'
+import { Customize, Item } from '../types'
 import { $width } from '../vars'
 
-const ItemStyle = styled(CommonStyle)<{ hasSubitems?: boolean }>`
+export const ItemStyle = styled(CommonStyle) <{ hasSubitems?: boolean }>`
     ${props => props.hasSubitems && css`&:after {
     content: '►';
     position: absolute;
@@ -16,39 +16,48 @@ const ItemStyle = styled(CommonStyle)<{ hasSubitems?: boolean }>`
     }`}
 `
 
-const SubitemStyles = styled.div`
+export const SubitemStyles = styled.div`
     position: absolute;
     top: 0;
     left: 100%;
     width: ${$width}px;
 `
 
-export function ItemElement(props: { onClick(): void, delay: number, hide(): void, subitems?: Item[], children: React.ReactNode }) {
+type Props = {
+  data: Item
+  delay: number
+  hide(): void
+  children: React.ReactNode
+  components?: Pick<Customize, 'item' | 'subitems'>
+}
+
+export function ItemElement(props: Props) {
   const [visibleSubitems, setVisibleSubitems] = React.useState(false)
   const setInvisibile = React.useCallback(() => setVisibleSubitems(false), [setVisibleSubitems])
   const [hide, cancelHide] = useDebounce(setInvisibile, props.delay)
+  const Component = props.components?.item?.(props.data) || ItemStyle
+  const Subitems = props.components?.subitems?.(props.data) || SubitemStyles
 
-  return <ItemStyle
-    onClick={e => { e.stopPropagation(); props.onClick(); props.hide() }}
-    hasSubitems={Boolean(props.subitems)}
+  return <Component
+    onClick={e => { e.stopPropagation(); props.data.handler(); props.hide() }}
+    hasSubitems={Boolean(props.data.subitems)}
     onPointerDown={e => e.stopPropagation()}
     onPointerOver={() => { cancelHide(); setVisibleSubitems(true) }}
     onPointerLeave={() => hide && hide()}
     data-testid="context-menu-item"
   >
     {props.children}
-    {props.subitems && visibleSubitems && (
-      <SubitemStyles>
-        {props.subitems.map(item => (
+    {props.data.subitems && visibleSubitems && (
+      <Subitems>
+        {props.data.subitems.map(item => (
           <ItemElement
             key={item.key}
-            onClick={item.handler}
+            data={item}
             delay={props.delay}
             hide={props.hide}
-            subitems={item.subitems}
           >{item.label}</ItemElement>
         ))}
-      </SubitemStyles>
+      </Subitems>
     )}
-  </ItemStyle>
+  </Component>
 }

src/presets/context-menu/components/Menu.tsx

@@ -3,47 +3,57 @@ import styled from 'styled-components'
 
 import { useDebounce } from '../hooks'
 import { CommonStyle } from '../styles'
-import { Item } from '../types'
+import { Customize, Item } from '../types'
 import { $width } from '../vars'
 import { ItemElement } from './Item'
 import { Search } from './Search'
 
-const Styles = styled.div`
+export const Styles = styled.div`
   padding: 10px;
   width: ${$width}px;
   margin-top: -20px;
-  margin-left: -${$width/2}px;
+  margin-left: -${$width / 2}px;
 `
 
-export function Menu(props: { items: Item[], delay: number, searchBar?: boolean, onHide(): void }) {
+type Props = {
+  items: Item[]
+  delay: number
+  searchBar?: boolean
+  onHide(): void
+  components?: Customize
+}
+
+export function Menu(props: Props) {
   const [hide, cancelHide] = useDebounce(props.onHide, props.delay)
   const [filter, setFilter] = React.useState('')
   const filterRegexp = new RegExp(filter, 'i')
   const filteredList = props.items.filter(item => (
     item.label.match(filterRegexp)
   ))
+  const Component = props.components?.main?.() || Styles
+  const Common = props.components?.common?.() || CommonStyle
 
-  return <Styles
+  return <Component
     onMouseOver={() => cancelHide()}
     onMouseLeave={() => hide && hide()}
     onWheel={e => e.stopPropagation()}
     data-testid="context-menu"
   >
     {props.searchBar && (
-      <CommonStyle>
-        <Search value={filter} onChange={setFilter} />
-      </CommonStyle>
+      <Common>
+        <Search value={filter} onChange={setFilter} component={props.components?.search?.()} />
+      </Common>
     )}
     {filteredList.map(item => {
       return <ItemElement
         key={item.key}
-        onClick={item.handler}
+        data={item}
         delay={props.delay}
         hide={props.onHide}
-        subitems={item.subitems}
+        components={props.components}
       >
         {item.label}
       </ItemElement>
     })}
-  </Styles>
+  </Component>
 }

src/presets/context-menu/components/Search.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react'
 import styled from 'styled-components'
 
-const SearchInput = styled.input`
+import { ComponentType } from '../types'
+
+export const SearchInput = styled.input`
   color: white;
   padding: 1px 8px;
   border: 1px solid white;
@@ -13,11 +15,14 @@ const SearchInput = styled.input`
   background: transparent;
 `
 
-export function Search(props: {value: string, onChange(value: string): void }) {
+export function Search(props: { value: string, onChange(value: string): void, component?: ComponentType }) {
+  const Component = props.component || SearchInput
+
   return (
-    <SearchInput
+    <Component
       value={props.value}
       onInput={e => props.onChange((e.target as HTMLInputElement).value)}
+      onPointerDown={e => e.stopPropagation()}
       data-testid="context-menu-search-input"
     />
   )

src/presets/context-menu/index.tsx

@@ -4,9 +4,19 @@ import { BaseSchemes } from 'rete'
 
 import { RenderPreset } from '../types'
 import { Menu } from './components/Menu'
-import { ContextMenuRender } from './types'
+import { ContextMenuRender, Customize } from './types'
 
-export function setup<Schemes extends BaseSchemes, K extends ContextMenuRender>(props?: { delay?: number }): RenderPreset<Schemes, K> {
+export { ItemStyle as Item, SubitemStyles as Subitems } from './components/Item'
+export { Styles as Menu } from './components/Menu'
+export { SearchInput as Search } from './components/Search'
+export { CommonStyle as Common } from './styles'
+
+type Props = {
+  delay?: number
+  customize?: Customize
+}
+
+export function setup<Schemes extends BaseSchemes, K extends ContextMenuRender>(props?: Props): RenderPreset<Schemes, K> {
   const delay = typeof props?.delay === 'undefined' ? 1000 : props.delay
 
   return {
@@ -17,6 +27,7 @@ export function setup<Schemes extends BaseSchemes, K extends ContextMenuRender>(
           delay={delay}
           searchBar={context.data.searchBar}
           onHide={context.data.onHide}
+          components={props?.customize}
         />
       }
     }

src/presets/context-menu/types.ts

@@ -9,3 +9,13 @@ export type Item = {
 
 export type ContextMenuRender =
   | RenderSignal<'contextmenu', { items: Item[], onHide(): void, searchBar?: boolean }>
+
+export type ComponentType = React.ComponentType<React.HTMLProps<any>>
+
+export type Customize = {
+  main?: () => ComponentType
+  item?: (item: Item) => ComponentType
+  search?: () => ComponentType
+  common?: () => ComponentType
+  subitems?: (Item: Item) => ComponentType
+}