refactor: revamp picker block (#4227)
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>pull/6078/head
Whitewater
2 years ago
committed by
GitHub
parent
68b1d063f7
commit
0046ef7707
@ -1,85 +0,0 @@
|
||||
import { memo } from 'react'
|
||||
import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin'
|
||||
|
||||
export class VariableOption extends MenuOption {
|
||||
title: string
|
||||
icon?: JSX.Element
|
||||
extraElement?: JSX.Element
|
||||
keywords: Array<string>
|
||||
keyboardShortcut?: string
|
||||
onSelect: (queryString: string) => void
|
||||
|
||||
constructor(
|
||||
title: string,
|
||||
options: {
|
||||
icon?: JSX.Element
|
||||
extraElement?: JSX.Element
|
||||
keywords?: Array<string>
|
||||
keyboardShortcut?: string
|
||||
onSelect: (queryString: string) => void
|
||||
},
|
||||
) {
|
||||
super(title)
|
||||
this.title = title
|
||||
this.keywords = options.keywords || []
|
||||
this.icon = options.icon
|
||||
this.extraElement = options.extraElement
|
||||
this.keyboardShortcut = options.keyboardShortcut
|
||||
this.onSelect = options.onSelect.bind(this)
|
||||
}
|
||||
}
|
||||
|
||||
type VariableMenuItemProps = {
|
||||
isSelected: boolean
|
||||
onClick: () => void
|
||||
onMouseEnter: () => void
|
||||
option: VariableOption
|
||||
queryString: string | null
|
||||
}
|
||||
export const VariableMenuItem = memo(({
|
||||
isSelected,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
option,
|
||||
queryString,
|
||||
}: VariableMenuItemProps) => {
|
||||
const title = option.title
|
||||
let before = title
|
||||
let middle = ''
|
||||
let after = ''
|
||||
|
||||
if (queryString) {
|
||||
const regex = new RegExp(queryString, 'i')
|
||||
const match = regex.exec(option.title)
|
||||
|
||||
if (match) {
|
||||
before = title.substring(0, match.index)
|
||||
middle = match[0]
|
||||
after = title.substring(match.index + match[0].length)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={option.key}
|
||||
className={`
|
||||
flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
|
||||
${isSelected && 'bg-primary-50'}
|
||||
`}
|
||||
tabIndex={-1}
|
||||
ref={option.setRefElement}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onClick={onClick}>
|
||||
<div className='mr-2'>
|
||||
{option.icon}
|
||||
</div>
|
||||
<div className='grow text-[13px] text-gray-900 truncate' title={option.title}>
|
||||
{before}
|
||||
<span className='text-[#2970FF]'>{middle}</span>
|
||||
{after}
|
||||
</div>
|
||||
{option.extraElement}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
VariableMenuItem.displayName = 'VariableMenuItem'
|
||||
@ -0,0 +1,31 @@
|
||||
import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin'
|
||||
import { Fragment } from 'react'
|
||||
|
||||
/**
|
||||
* Corresponds to the `MenuRenderFn` type from `@lexical/react/LexicalTypeaheadMenuPlugin`.
|
||||
*/
|
||||
type MenuOptionRenderProps = {
|
||||
isSelected: boolean
|
||||
onSelect: () => void
|
||||
onSetHighlight: () => void
|
||||
queryString: string | null
|
||||
}
|
||||
|
||||
export class PickerBlockMenuOption extends MenuOption {
|
||||
public group?: string
|
||||
|
||||
constructor(
|
||||
private data: {
|
||||
key: string
|
||||
group?: string
|
||||
onSelect?: () => void
|
||||
render: (menuRenderProps: MenuOptionRenderProps) => JSX.Element
|
||||
},
|
||||
) {
|
||||
super(data.key)
|
||||
this.group = data.group
|
||||
}
|
||||
|
||||
public onSelectMenuOption = () => this.data.onSelect?.()
|
||||
public renderMenuOption = (menuRenderProps: MenuOptionRenderProps) => <Fragment key={this.data.key}>{this.data.render(menuRenderProps)}</Fragment>
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
import { memo } from 'react'
|
||||
import { PromptMenuItem } from './prompt-option'
|
||||
|
||||
type PromptMenuProps = {
|
||||
startIndex: number
|
||||
selectedIndex: number | null
|
||||
options: any[]
|
||||
onClick: (index: number, option: any) => void
|
||||
onMouseEnter: (index: number, option: any) => void
|
||||
}
|
||||
const PromptMenu = ({
|
||||
startIndex,
|
||||
selectedIndex,
|
||||
options,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
}: PromptMenuProps) => {
|
||||
return (
|
||||
<div className='p-1'>
|
||||
{
|
||||
options.map((option, index: number) => (
|
||||
<PromptMenuItem
|
||||
startIndex={startIndex}
|
||||
index={index}
|
||||
isSelected={selectedIndex === index + startIndex}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
key={option.key}
|
||||
option={option}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(PromptMenu)
|
||||
@ -1,40 +0,0 @@
|
||||
import { memo } from 'react'
|
||||
import { VariableMenuItem } from './variable-option'
|
||||
|
||||
type VariableMenuProps = {
|
||||
startIndex: number
|
||||
selectedIndex: number | null
|
||||
options: any[]
|
||||
onClick: (index: number, option: any) => void
|
||||
onMouseEnter: (index: number, option: any) => void
|
||||
queryString: string | null
|
||||
}
|
||||
const VariableMenu = ({
|
||||
startIndex,
|
||||
selectedIndex,
|
||||
options,
|
||||
onClick,
|
||||
onMouseEnter,
|
||||
queryString,
|
||||
}: VariableMenuProps) => {
|
||||
return (
|
||||
<div className='p-1'>
|
||||
{
|
||||
options.map((option, index: number) => (
|
||||
<VariableMenuItem
|
||||
startIndex={startIndex}
|
||||
index={index}
|
||||
isSelected={selectedIndex === index + startIndex}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
key={option.key}
|
||||
option={option}
|
||||
queryString={queryString}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(VariableMenu)
|
||||
Loading…
Reference in New Issue