diff --git a/packages/noodl-editor/src/editor/src/utils/universal-search.ts b/packages/noodl-editor/src/editor/src/utils/universal-search.ts index 7d16883..6d3cf8c 100644 --- a/packages/noodl-editor/src/editor/src/utils/universal-search.ts +++ b/packages/noodl-editor/src/editor/src/utils/universal-search.ts @@ -3,18 +3,25 @@ import type { NodeGraphNode } from '@noodl-models/nodegraphmodel'; import { ProjectModel } from '../models/projectmodel'; +export type SearchResult = { + componentTarget: ComponentModel; + nodeTarget?: NodeGraphNode; + type?: string; + userLabel?: string; + label: string; +}; + function matchStrings(string1: string, string2: string) { return string1.toLowerCase().indexOf(string2.toLowerCase()) !== -1; } function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, component: ComponentModel) { - let results = []; - let matchLabel = null; - let i = 0; + let results: SearchResult[] = []; + let matchLabel: string | null = null; if (node._label !== undefined && matchStrings(node._label, searchTerms)) { matchLabel = node.label; - } else if (matchStrings(node.id, searchTerms)) { + } else if (node.id === searchTerms) { matchLabel = node.id; } else if (matchStrings(node.type.displayName || node.type.name, searchTerms)) { matchLabel = node.label; @@ -55,7 +62,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone if (matchLabel === null) { const ports = node.dynamicports; - for (i = 0; i < ports.length; ++i) { + for (let i = 0; i < ports.length; ++i) { const port = ports[i]; if (matchStrings(port.name, searchTerms)) { matchLabel = node.label + ' : ' + port.name; @@ -66,7 +73,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone if (matchLabel === null) { const ports = node.ports; - for (i = 0; i < ports.length; ++i) { + for (let i = 0; i < ports.length; ++i) { const port = ports[i]; if (matchStrings(port.name, searchTerms)) { matchLabel = node.label + ' : ' + port.name; @@ -86,7 +93,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone }); } - for (i = 0; i < node.children.length; ++i) { + for (let i = 0; i < node.children.length; ++i) { const child = node.children[i]; const childResults = searchInNodeRecursive(child, searchTerms, component); results = results.concat(childResults); @@ -96,7 +103,7 @@ function searchInNodeRecursive(node: NodeGraphNode, searchTerms: string, compone } function searchInComponent(component: ComponentModel, searchTerms: string) { - let results = []; + let results: SearchResult[] = []; if (matchStrings(component.displayName, searchTerms)) { results.push({ componentTarget: component, @@ -136,7 +143,7 @@ function searchInComponent(component: ComponentModel, searchTerms: string) { } export function performSearch(searchTerms: string) { - const results = []; + const results: ReturnType[] = []; const root = ProjectModel.instance.getRootNode(); if (root === undefined) return; diff --git a/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx b/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx index e9d3298..1628aac 100644 --- a/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx +++ b/packages/noodl-editor/src/editor/src/views/panels/search-panel/search-panel.tsx @@ -5,10 +5,8 @@ import { useSidePanelKeyboardCommands } from '@noodl-hooks/useKeyboardCommands'; import classNames from 'classnames'; import React, { useEffect, useRef, useState } from 'react'; -import { ComponentModel } from '@noodl-models/componentmodel'; -import { NodeGraphNode } from '@noodl-models/nodegraphmodel'; import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode'; -import { performSearch } from '@noodl-utils/universal-search'; +import { performSearch, SearchResult } from '@noodl-utils/universal-search'; import { SearchInput } from '@noodl-core-ui/components/inputs/SearchInput'; import { Container } from '@noodl-core-ui/components/layout/Container'; @@ -21,7 +19,7 @@ import css from './search-panel.module.scss'; export function SearchPanel() { const [searchTerm, setSearchTerm] = useState(''); - const [searchResults, setSearchResults] = useState([]); + const [searchResults, setSearchResults] = useState>([]); const inputRef = useRef(null); // TODO: Not same context @@ -56,7 +54,7 @@ export function SearchPanel() { } }, [debouncedSearchTerm]); - function onSearchItemClicked(searchResult: SearchResultItem) { + function onSearchItemClicked(searchResult: SearchResult) { if (searchResult.type === 'Component') { NodeGraphContextTmp.switchToComponent(searchResult.componentTarget, { breadcrumbs: false, @@ -99,21 +97,9 @@ export function SearchPanel() { ); } -type SearchResultItem = { - componentTarget: ComponentModel; - label: string; - nodeTarget: NodeGraphNode; - type: string; - userLabel: string; -}; - type SearchItemProps = { - component: { - componentName: string; - componentId: string; - results: SearchResultItem[]; - }; - onSearchItemClicked: (item: SearchResultItem) => void; + component: ReturnType[0]; + onSearchItemClicked: (item: SearchResult) => void; }; function SearchItem({ component, onSearchItemClicked }: SearchItemProps) { @@ -130,11 +116,11 @@ function SearchItem({ component, onSearchItemClicked }: SearchItemProps) {
{component.results.map((result, index) => (
onSearchItemClicked(result)} >