feat: highlight the text when search database or table (#97)

* add dummy search highlight

* feat: add highlight when search

* fix code smell

Author: invisal

src/renderer/components/DatabaseTable/DatabaseSelection.tsx

@@ -37,7 +37,7 @@ function DatabaseSelectionModal({
   const { common } = useSqlExecute();
 
   const filteredDatabaseList = useMemo(() => {
-    return databaseList.filter(database =>
+    return databaseList.filter((database) =>
       database.toLowerCase().includes(searchTerm.toLowerCase())
     );
   }, [databaseList, searchTerm]);
@@ -82,6 +82,7 @@ function DatabaseSelectionModal({
             <p className={styles.noResultsText}>No matching databases found.</p>
           ) : (
             <ListView
+              highlight={searchTerm || undefined}
               selectedItem={selectedDatabase}
               onSelectChange={(item) => setSelectedDatabase(item)}
               items={filteredDatabaseList}

src/renderer/components/DatabaseTable/DatabaseTableList.tsx

@@ -179,6 +179,8 @@ export default function DatabaseTableList() {
         <Layout.Grow>
           {currentDatabase ? (
             <TreeView
+              highlight={search || undefined}
+              highlightDepth={1}
               selected={selected}
               onSelectChange={setSelected}
               collapsedKeys={collapsed}

src/renderer/components/ListView/index.tsx

@@ -3,6 +3,7 @@ import ListViewItem from '../ListViewItem';
 
 interface ListViewProps<T> {
   items: T[];
+  highlight?: string;
   selectedItem?: T;
   changeItemKeys?: string[];
   emptyComponent?: ReactElement;
@@ -20,6 +21,7 @@ interface ListViewProps<T> {
 
 export default function ListView<T>({
   items,
+  highlight,
   selectedItem,
   changeItemKeys,
   extractMeta,
@@ -64,6 +66,7 @@ export default function ListView<T>({
             key={key}
             text={text}
             icon={icon}
+            highlight={highlight}
             selected={key === selectedKey}
             changed={changeItemKeys?.includes(key)}
             onContextMenu={async (e) => {

src/renderer/components/ListViewItem/index.tsx

@@ -1,10 +1,11 @@
-import { ReactElement } from 'react';
+import { ReactElement, useMemo } from 'react';
 import styles from './styles.module.scss';
 import Icon from '../Icon';
 import { useAppFeature } from 'renderer/contexts/AppFeatureProvider';
 
 interface ListViewItemProps {
   text: string;
+  highlight?: string;
   icon?: ReactElement;
   changed?: boolean;
   selected?: boolean;
@@ -19,8 +20,16 @@ interface ListViewItemProps {
   onCollapsedClick?: () => void;
 }
 
+function encodeStringToHTML(s: string) {
+  const el = document.createElement('div');
+  el.innerText = el.textContent = s;
+  s = el.innerHTML;
+  return s;
+}
+
 export default function ListViewItem({
   text,
+  highlight,
   icon,
   selected,
   changed,
@@ -36,6 +45,24 @@ export default function ListViewItem({
 }: ListViewItemProps) {
   const { theme } = useAppFeature();
 
+  const finalText = useMemo(() => {
+    if (highlight) {
+      const highlightText = encodeStringToHTML(highlight);
+      const santizedText = encodeStringToHTML(text || '');
+      const regex = new RegExp(
+        '(' + highlightText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')',
+        'i'
+      );
+
+      return santizedText.replace(
+        regex,
+        `<mark style="padding: 0; background-color: #047bf8; color: white">$1</mark>`
+      );
+    } else {
+      return encodeStringToHTML(text || '');
+    }
+  }, [text, highlight]);
+
   return (
     <div
       className={[
@@ -76,7 +103,10 @@ export default function ListViewItem({
           </div>
         ))}
       {!hasCollapsed && <div className={styles.icon}>{icon}</div>}
-      <div className={styles.text}>{text}</div>
+      <div
+        className={styles.text}
+        dangerouslySetInnerHTML={{ __html: finalText }}
+      />
     </div>
   );
 }

src/renderer/components/TreeView/index.tsx

@@ -18,6 +18,8 @@ interface TreeViewProps<T> {
   onSelectChange?: (value?: TreeViewItemData<T>) => void;
   onDoubleClick?: (value: TreeViewItemData<T>) => void;
   onContextMenu?: React.MouseEventHandler;
+  highlight?: string;
+  highlightDepth?: number;
 }
 
 function TreeViewItem<T>({
@@ -30,6 +32,9 @@ function TreeViewItem<T>({
   collapsedKeys,
   onCollapsedChange,
   onDoubleClick,
+
+  highlight,
+  highlightDepth,
 }: {
   item: TreeViewItemData<T>;
   depth: number;
@@ -40,6 +45,8 @@ function TreeViewItem<T>({
   onCollapsedChange?: (value?: string[]) => void;
   collapsedKeys?: string[];
   onDoubleClick?: (value: TreeViewItemData<T>) => void;
+  highlight?: string;
+  highlightDepth?: number;
 }) {
   const hasCollapsed = item.children && item.children.length > 0;
   const isCollapsed = collapsedKeys?.includes(item.id);
@@ -62,6 +69,7 @@ function TreeViewItem<T>({
             onDoubleClick(item);
           }
         }}
+        highlight={depth === highlightDepth ? highlight : undefined}
         hasCollapsed={hasCollapsed}
         collapsed={isCollapsed}
         selected={selected?.id === item.id}
@@ -89,6 +97,8 @@ function TreeViewItem<T>({
                 key={item.id}
                 item={item}
                 depth={depth + 1}
+                highlight={highlight}
+                highlightDepth={highlightDepth}
                 selected={selected}
                 onSelectChange={onSelectChange}
                 collapsedKeys={collapsedKeys}
@@ -111,6 +121,8 @@ export default function TreeView<T>({
   collapsedKeys,
   onDoubleClick,
   onContextMenu,
+  highlight,
+  highlightDepth,
 }: TreeViewProps<T>) {
   return (
     <div className={`${styles.treeView} scroll`} onContextMenu={onContextMenu}>
@@ -120,6 +132,8 @@ export default function TreeView<T>({
             key={item.id}
             item={item}
             depth={0}
+            highlight={highlight}
+            highlightDepth={highlightDepth}
             selected={selected}
             onSelectChange={onSelectChange}
             onDoubleClick={onDoubleClick}