Merge branch 'hight-words' into dev

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="doramon-search-highlighter"
+                searchWords={[searchValue]}
+                autoEscape
+                textToHighlight={suggestion.title}
+              />
+            </Title>
             <Desc>{suggestion.desc}</Desc>
           </ContentWraper>
           <HintIcon

containers/Doraemon/ThreadSelectBar.js

@@ -2,7 +2,12 @@ import React from 'react'
 
 // import { ICON_CMD } from 'config'
 import { THREAD } from 'utils'
-import { Wrapper, Selector } from './styles/thread_select_bar'
+import {
+  Wrapper,
+  Selector,
+  VideoSelector,
+  RepoSelector,
+} from './styles/thread_select_bar'
 import { searchThreadOnChange } from './logic'
 
 const ThreadSelectBar = ({ active }) => (
@@ -19,18 +24,18 @@ const ThreadSelectBar = ({ active }) => (
     >
       帖子
     </Selector>
-    <Selector
+    <VideoSelector
       onClick={searchThreadOnChange.bind(this, THREAD.VIDEO)}
       active={active === THREAD.VIDEO}
     >
       视频
-    </Selector>
-    <Selector
+    </VideoSelector>
+    <RepoSelector
       onClick={searchThreadOnChange.bind(this, THREAD.REPO)}
       active={active === THREAD.REPO}
     >
       项目
-    </Selector>
+    </RepoSelector>
     <Selector
       onClick={searchThreadOnChange.bind(this, THREAD.JOB)}
       active={active === THREAD.JOB}

containers/Doraemon/index.js

@@ -35,6 +35,7 @@ class DoraemonContainer extends React.Component {
     const { doraemon } = this.props
     const {
       inputValue,
+      inputValueRaw,
       suggestions,
       activeRaw,
       prefix,
@@ -64,6 +65,7 @@ class DoraemonContainer extends React.Component {
             <AlertBar value={inputValue} searchThread={searchThread} />
           )}
           <ResultsList
+            searchValue={inputValueRaw}
             suggestions={suggestions}
             activeRaw={activeRaw}
             searchThread={searchThread}

containers/Doraemon/store.js

@@ -79,6 +79,14 @@ const DoraemonStore = t
     get curRoute() {
       return self.root.curRoute
     },
+    get inputValueRaw() {
+      if (R.startsWith('/', self.inputValue)) {
+        return R.last(self.inputValue.split('/'))
+      }
+      if (R.startsWith('@', self.inputValue)) return self.inputValue.slice(1)
+
+      return self.inputValue
+    },
     get curCmdChain() {
       if (!self.cmdChain && self.activeRaw) {
         return [self.activeRaw]

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')};

containers/Doraemon/styles/thread_select_bar.js

@@ -27,6 +27,13 @@ export const Selector = styled.div`
   }
 `
 
+export const VideoSelector = styled(Selector)`
+  ${cs.media.mobile`display: none;`};
+`
+export const RepoSelector = styled(Selector)`
+  ${cs.media.mobile`display: none;`};
+`
+
 export const Info = styled.div`
   ${cs.flexGrow()};
 `

containers/ThemeWrapper/GlobalStyle.js

@@ -18,7 +18,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     ${cs.media.mobile`
       position: relative;
-    `};
+`};
   }
   *::-moz-selection {
     background-color: ${theme('selectionBg')} !important;
@@ -132,6 +132,12 @@ const GlobalStyle = createGlobalStyle`
       text-decoration: underline;
     }
   }
+
+  .doramon-search-highlighter {
+    background-color: ${theme('searchHighlight.doramonBg')};
+    padding: 0 1px;
+    color: ${theme('searchHighlight.doramonFg')};
+  }
 `
 
 export default GlobalStyle

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",

utils/themes/skins/cyan.js

@@ -313,6 +313,10 @@ const cyan = {
     border: '#e8e8e8',
     hoverBg: '#fffef1',
   },
+  searchHighlight: {
+    doramonFg: '#F6DE38',
+    doramonBg: 'transparent',
+  },
 }
 
 export default cyan