feat: omit active note tags from dropdown
This commit is contained in:
@@ -5,20 +5,29 @@ import { useRef, useState } from 'preact/hooks';
|
|||||||
import { Icon } from './Icon';
|
import { Icon } from './Icon';
|
||||||
import { Disclosure, DisclosurePanel } from '@reach/disclosure';
|
import { Disclosure, DisclosurePanel } from '@reach/disclosure';
|
||||||
import { useCloseOnBlur } from './utils';
|
import { useCloseOnBlur } from './utils';
|
||||||
|
import { AppState } from '@/ui_models/app_state';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
application: WebApplication;
|
application: WebApplication;
|
||||||
|
appState: AppState;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const AutocompleteTagInput: FunctionalComponent<Props> = ({
|
export const AutocompleteTagInput: FunctionalComponent<Props> = ({
|
||||||
application,
|
application,
|
||||||
|
appState,
|
||||||
}) => {
|
}) => {
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [tagResults, setTagResults] = useState<SNTag[]>(() => {
|
|
||||||
return application.searchTags('');
|
|
||||||
});
|
|
||||||
const [dropdownVisible, setDropdownVisible] = useState(false);
|
const [dropdownVisible, setDropdownVisible] = useState(false);
|
||||||
|
|
||||||
|
const getActiveNoteTagResults = (query: string) => {
|
||||||
|
const { activeNote } = appState.notes;
|
||||||
|
return application.searchTags(query, activeNote);
|
||||||
|
};
|
||||||
|
|
||||||
|
const [tagResults, setTagResults] = useState<SNTag[]>(() => {
|
||||||
|
return getActiveNoteTagResults('');
|
||||||
|
});
|
||||||
|
|
||||||
const dropdownRef = useRef<HTMLDivElement>();
|
const dropdownRef = useRef<HTMLDivElement>();
|
||||||
const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) =>
|
const [closeOnBlur] = useCloseOnBlur(dropdownRef, (visible: boolean) =>
|
||||||
setDropdownVisible(visible)
|
setDropdownVisible(visible)
|
||||||
@@ -26,7 +35,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
|
|||||||
|
|
||||||
const onSearchQueryChange = (event: Event) => {
|
const onSearchQueryChange = (event: Event) => {
|
||||||
const query = (event.target as HTMLInputElement).value;
|
const query = (event.target as HTMLInputElement).value;
|
||||||
const tags = application.searchTags(query);
|
const tags = getActiveNoteTagResults(query);
|
||||||
|
|
||||||
setSearchQuery(query);
|
setSearchQuery(query);
|
||||||
setTagResults(tags);
|
setTagResults(tags);
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
|
|||||||
{tag.title}
|
{tag.title}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
<AutocompleteTagInput application={application} />
|
<AutocompleteTagInput application={application} appState={appState} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -70,6 +70,10 @@ export class NotesState {
|
|||||||
return this.application.editorGroup.editors[0];
|
return this.application.editorGroup.editors[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get activeNote(): SNNote | undefined {
|
||||||
|
return this.activeEditor?.note;
|
||||||
|
}
|
||||||
|
|
||||||
get selectedNotesCount(): number {
|
get selectedNotesCount(): number {
|
||||||
return Object.keys(this.selectedNotes).length;
|
return Object.keys(this.selectedNotes).length;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user