feat(doraemon): support hightlight keywords

Author: mydearxym

containers/Doraemon/ResultsList.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import R from 'ramda'
+import Highlighter from 'react-highlight-words'
 
 import { ICON_CMD } from 'config'
 
@@ -29,7 +30,7 @@ const HintIcon = ({ index, active, cur, length }) => {
   return null
 }
 
-const ResultsList = ({ searchThread, suggestions, activeRaw }) => (
+const ResultsList = ({ searchValue, searchThread, suggestions, activeRaw }) => (
   <Wrapper>
     <SuggestionWrapper empty={suggestions.length === 0}>
       {suggestions.map((suggestion, i) => (
@@ -47,7 +48,14 @@ const ResultsList = ({ searchThread, suggestions, activeRaw }) => (
             searchThread={searchThread}
           />
           <ContentWraper>
-            <Title>{suggestion.title}</Title>
+            <Title>
+              <Highlighter
+                highlightClassName="YourHighlightClass"
+                searchWords={[searchValue]}
+                autoEscape
+                textToHighlight={suggestion.title}
+              />
+            </Title>
             <Desc>{suggestion.desc}</Desc>
           </ContentWraper>
           <HintIcon

containers/Doraemon/index.js

@@ -64,6 +64,7 @@ class DoraemonContainer extends React.Component {
             <AlertBar value={inputValue} searchThread={searchThread} />
           )}
           <ResultsList
+            searchValue={inputValue}
             suggestions={suggestions}
             activeRaw={activeRaw}
             searchThread={searchThread}

containers/Doraemon/styles/results_list.js

@@ -112,6 +112,11 @@ export const Title = styled.div`
   > a {
     color: ${theme('shell.link')};
   }
+
+  ${cs.truncate('400px')};
+  ${cs.media.mobile`
+    ${cs.truncate('200px')};
+  `};
 `
 export const Desc = styled.div`
   color: ${theme('shell.desc')};

package-docker.json

@@ -59,6 +59,7 @@
     "react-calendar-heatmap": "^1.6.3",
     "react-content-loader": "3.1.2",
     "react-dom": "16.6.0",
+    "react-highlight-words": "^0.16.0",
     "react-intl": "2.4.0",
     "react-json-view": "1.19.1",
     "react-keydown": "1.9.7",

package.json

@@ -99,6 +99,7 @@
     "react-calendar-heatmap": "^1.6.3",
     "react-content-loader": "3.1.2",
     "react-dom": "16.6.0",
+    "react-highlight-words": "^0.16.0",
     "react-intl": "2.4.0",
     "react-json-view": "1.19.1",
     "react-keydown": "1.9.7",