poi-plugin-quest-info-2 0.9.15 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # poi-plugin-quest-info-2
 
+## 0.10.0
+
+### Minor Changes
+
+- 5e2ba3a: Highlight search results
+
 ## 0.9.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-quest-info-2",
-  "version": "0.9.15",
+  "version": "0.10.0",
   "private": false,
   "description": "show quest info",
   "homepage": "https://github.com/lawvs/poi-plugin-quest-2/",
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "moize": "^6.1.1",
+    "react-highlight-words": "^0.20.0",
     "react-use": "^17.3.1",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.7"
@@ -51,6 +52,7 @@
     "@storybook/react": "^6.3.4",
     "@types/jest": "^27.4.1",
     "@types/pangu": "^3.3.0",
+    "@types/react-highlight-words": "^0.16.4",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/sharp": "^0.27.1",

package/src/Toolbar.tsx

@@ -2,7 +2,6 @@ import { Button, InputGroup } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
 import type { ChangeEvent } from 'react'
 import React, { useCallback } from 'react'
-import { useThrottle } from 'react-use'
 import styled from 'styled-components'
 import { usePluginTranslation } from './poi/hooks'
 import { QUEST_STATUS, UnionQuest } from './questHelper'
@@ -13,8 +12,8 @@ import {
   useSyncGameTagEffect,
 } from './store/filterTags'
 import { useGlobalQuestStatusQuery } from './store/gameQuest'
-import { useSearchInput } from './store/search'
-import { CategoryTags, CATEGORY_TAGS, TypeTags, TYPE_TAGS } from './tags'
+import { useSearchInput, useStableSearchWords } from './store/search'
+import { CATEGORY_TAGS, CategoryTags, TYPE_TAGS, TypeTags } from './tags'
 import { And, Or } from './utils'
 
 const ToolbarWrapper = styled.div`
@@ -71,14 +70,7 @@ export const Toolbar = () => {
 }
 
 const useInputStringFilter = () => {
-  const { searchInput } = useSearchInput()
-  const throttledSearchInput = useThrottle(searchInput)
-  const searchKeywords = throttledSearchInput
-    .split(' ')
-    // Remove empty string
-    .filter((i) => !!i)
-    .map((i) => i.toUpperCase())
-
+  const searchKeywords = useStableSearchWords()
   const stringFilter = useCallback(
     (quest: UnionQuest) => {
       if (!searchKeywords || !searchKeywords.length) {

package/src/components/QuestCard/index.tsx

@@ -1,13 +1,15 @@
 import { Card, Elevation, H5 } from '@blueprintjs/core'
 import React, { forwardRef } from 'react'
+import Highlighter from 'react-highlight-words'
 import type { StyledComponentProps } from 'styled-components'
 import { usePluginTranslation } from '../../poi/hooks'
 import {
+  QUEST_STATUS,
   getQuestPrePost,
   guessQuestCategory,
-  QUEST_STATUS,
 } from '../../questHelper'
 import { useQuestStatus } from '../../store/quest'
+import { useStableSearchWords } from '../../store/search'
 import { QuestTag } from '../QuestTag'
 import {
   CardActionWrapper,
@@ -24,7 +26,7 @@ export type QuestCardProps = {
   gameId: number
   code: string
   name: string
-  desc: string | JSX.Element
+  desc: string
   tip?: string
   tip2?: string
   status?: QUEST_STATUS
@@ -70,6 +72,7 @@ export const QuestCard = forwardRef<
   const status = useQuestStatus(gameId)
   const headIcon = questIconMap[guessQuestCategory(code).type]
   const TailIcon = questStatusMap[status]
+  const searchWords = useStableSearchWords()
 
   return (
     <FlexCard
@@ -80,10 +83,38 @@ export const QuestCard = forwardRef<
     >
       <CardMedia src={headIcon}></CardMedia>
       <CardBody>
-        <H5>{[code, name].filter((i) => i != undefined).join(' - ')}</H5>
-        <div>{desc}</div>
-        {tip2 && <b>{tip2}</b>}
-        {tip && <i>{tip}</i>}
+        <H5>
+          <Highlighter
+            searchWords={searchWords}
+            autoEscape={false}
+            textToHighlight={[code, name]
+              .filter((i) => i != undefined)
+              .join(' - ')}
+          />
+        </H5>
+        <Highlighter
+          searchWords={searchWords}
+          autoEscape={false}
+          textToHighlight={desc}
+        />
+        {tip2 && (
+          <b>
+            <Highlighter
+              searchWords={searchWords}
+              autoEscape={false}
+              textToHighlight={tip2}
+            />
+          </b>
+        )}
+        {tip && (
+          <i>
+            <Highlighter
+              searchWords={searchWords}
+              autoEscape={false}
+              textToHighlight={tip}
+            />
+          </i>
+        )}
 
         <CardAction gameId={gameId}></CardAction>
       </CardBody>

package/src/store/search.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useThrottle } from 'react-use'
 import { useStore } from './store'
 
 export const useSearchInput = () => {
@@ -15,3 +16,15 @@ export const useSearchInput = () => {
     setSearchInput,
   }
 }
+
+export const useStableSearchWords = () => {
+  const { searchInput } = useSearchInput()
+  const throttledSearchInput = useThrottle(searchInput)
+  const searchKeywords = throttledSearchInput
+    .split(' ')
+    // Remove empty string
+    .filter((i) => !!i)
+    .map((i) => i.toUpperCase())
+
+  return searchKeywords
+}