Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

pass as ref or function

This commit is contained in:
Nate Kelley 2025-09-30 15:39:18 -06:00
parent 12b534db2a
commit 5ada81129b
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx
View File

@ -100,7 +100,8 @@ const arthurCharacters: MentionInputTriggerItem[] = [
const looneyTunesSuggestions = createMentionSuggestionExtension({ const looneyTunesSuggestions = createMentionSuggestionExtension({
trigger: '@', trigger: '@',
items: looneyTunesCharacters, items: ({ defaultQueryMentionsFilter, query }) =>
defaultQueryMentionsFilter(query, looneyTunesCharacters),
popoverContent: (props) => { popoverContent: (props) => {
return <div className="p-2">Hello {props.value}</div>; return <div className="p-2">Hello {props.value}</div>;
}, },
@ -158,7 +159,8 @@ const theSimpsonsCharacters: MentionInputTriggerItem[] = [
const theSimpsonsSuggestions = createMentionSuggestionExtension({ const theSimpsonsSuggestions = createMentionSuggestionExtension({
trigger: '#', trigger: '#',
items: theSimpsonsCharacters, items: ({ defaultQueryMentionsFilter, query }) =>
defaultQueryMentionsFilter(query, theSimpsonsCharacters),
pillStyling: { pillStyling: {
className: () => { className: () => {
return 'bg-blue-100 border-blue-300 text-blue-500 hover:bg-blue-200'; return 'bg-blue-100 border-blue-300 text-blue-500 hover:bg-blue-200';
@ -171,7 +173,8 @@ const theSimpsonsSuggestions = createMentionSuggestionExtension({
const arthurSuggestions = createMentionSuggestionExtension({ const arthurSuggestions = createMentionSuggestionExtension({
trigger: '$', trigger: '$',
items: arthurCharacters, items: ({ defaultQueryMentionsFilter, query }) =>
defaultQueryMentionsFilter(query, arthurCharacters),
pillStyling: { pillStyling: {
className: () => { className: () => {
return 'bg-green-100 border-green-300 text-green-500 hover:bg-green-200'; return 'bg-green-100 border-green-300 text-green-500 hover:bg-green-200';
@ -284,7 +287,8 @@ const manyCharacters: MentionInputTriggerItem[] = [
const spongebobSuggestions = createMentionSuggestionExtension({ const spongebobSuggestions = createMentionSuggestionExtension({
trigger: '%', trigger: '%',
items: manyCharacters, items: ({ defaultQueryMentionsFilter, query }) =>
defaultQueryMentionsFilter(query, manyCharacters),
pillStyling: { pillStyling: {
className: () => { className: () => {
return 'bg-yellow-100 border-yellow-300 text-yellow-500 hover:bg-yellow-200'; return 'bg-yellow-100 border-yellow-300 text-yellow-500 hover:bg-yellow-200';

4
apps/web/src/components/ui/inputs/MentionInput/createMentionSuggestionOption.tsx
View File

@ -21,7 +21,7 @@ export const createMentionSuggestionExtension = ({
}: { }: {
trigger: string; trigger: string;
items: items:
| MentionInputTriggerItem[] | React.RefObject<MentionInputTriggerItem[]>
| ((props: { | ((props: {
query: string; query: string;
defaultQueryMentionsFilter: typeof defaultQueryMentionsFilter; defaultQueryMentionsFilter: typeof defaultQueryMentionsFilter;
@ -37,7 +37,7 @@ export const createMentionSuggestionExtension = ({
? (props) => { ? (props) => {
return items({ ...props, defaultQueryMentionsFilter }); return items({ ...props, defaultQueryMentionsFilter });
} }
: ({ query }) => defaultQueryMentionsFilter(query, items), : ({ query }) => defaultQueryMentionsFilter(query, items.current),
render: () => { render: () => {
let component: ReactRenderer<MentionListImperativeHandle, MentionListProps<string>>; let component: ReactRenderer<MentionListImperativeHandle, MentionListProps<string>>;