modify select the final result's signal, delay render, some style

Author: chenyunan

app/commons/Search/action.js

@@ -33,14 +33,18 @@ function searchPattern() {
 }
 
 function commonSearch() {
-  if(!state.searched.end) {
+  if(!state.searched.end && !state.ws.first) {
     api.searchInterrupt(state.searched.taskId);
   }
   if(state.searched.taskId != null) {
     state.searched.former.taskId = state.searched.taskId
     state.searched.former.results = state.searched.results.splice(0, state.searched.results.length);
     state.searched.taskId = ''
   }
+  state.searched.taskId = ''
+  state.searched.pattern = state.searching.isPattern
+  state.searched.message = ''
+  state.searched.end = false
   state.searched.randomKey = randomForOne()
 }
 

app/commons/Search/state.js

@@ -2,7 +2,8 @@ import { observable } from 'mobx'
 
 export const ws = observable({
   name: '',
-  status: false
+  status: false,
+  first: true
 })
 
 export const searching = observable({
@@ -20,7 +21,7 @@ export const searched = observable({
   pattern: false,
   message: '',
   results: [],
-  end: true,
+  end: false,
   former: {
       taskId: '',
       results: []

app/commons/Search/subscribeToSearch.js

@@ -3,6 +3,7 @@ import { SearchSocketClient } from 'backendAPI/websocketClients'
 import { autorun } from 'mobx'
 import state from './state'
 import * as api from 'backendAPI/searchAPI'
+import debounce from 'lodash/debounce'
 
 
 export default function subscribeToSearch() {
@@ -75,26 +76,31 @@ export default function subscribeToSearch() {
             }
             if(result.randomKey === state.searched.randomKey) {
                 state.searched.message = results.message;
-                state.searched.end = true;
             }
         });
 
         // end result
         client.subscribe('/user/topic/search/end', response => {
-            let result = JSON.parse(response.body);
-            if(result == null) {
-                return ;
-            }
-            if(result.randomKey === state.searched.randomKey) {
-                state.searched.end = true;
-            }
+            end(response)
         });
 
         // modify workspace status to up and init workspace files in mem
         api.searchWorkspaceUp();
+
     })
 }
 
+// end 
+const end = debounce((response) => {
+        let result = JSON.parse(response.body);
+        if(result == null) {
+            return ;
+        }
+        if(result.randomKey === state.searched.randomKey) {
+            state.searched.end = true;
+        }
+    }, 500)
+
 function setData(result) {
     if(result.randomKey === state.searched.randomKey) {
         if(result.joinResultMessage) {
@@ -125,7 +131,7 @@ function editWsStatus(result, wsStatus) {
                 break;
         }
     } else if(result.code == 1) {
-        log(result.message);
+        console.log(result.message);
     }
 }
 
@@ -135,11 +141,14 @@ function formatSearch(response, isPattern) {
         return ;
     }
     if(result.randomKey && result.randomKey === state.searched.randomKey) {
-        state.searched.taskId = result.taskId;
-        state.searched.isPattern = isPattern;
-        state.searched.message = '';
-        state.searched.end = false;
-    } else if(result.message) {
-        log(result.message);
+        if(result.message) {
+            state.searched.message = result.message
+            state.searched.end = true
+        } else {
+            state.searched.taskId = result.taskId;
+            state.searched.isPattern = isPattern;
+            state.searched.message = '';
+            state.searched.end = false;
+        }
     }
 }

app/components/Panel/PanelContent.jsx

@@ -9,8 +9,7 @@ import FileTree from '../FileTree'
 import SideBar from './SideBar/SideBar'
 import { SidePanelContainer, SidePanelView } from './SideBar/SidePanel'
 import FileList from '../Tab/fileList'
-import SearchPanel from '../Search/search'
-import SearchPanel2 from '../Search/search.new'
+import SearchPanel from '../Search/search.new'
 import config from '../../config'
 import PluginDev from 'components/PluginDev'
 import FileTreeToolBar from 'components/FileTreeToolBar'
@@ -58,11 +57,8 @@ const PanelContent = observer(({ panel }) => {
           <SidePanelView key='working' label={{ text: i18n`panel.left.working`, icon: 'fa fa-folder-open-o', weight: 1 }}>
             <FileList />
           </SidePanelView>
-          {/* <SidePanelView key='find' label={{ text: i18n`panel.left.find`, icon: 'fa fa-search' }}>
+          <SidePanelView key='find' label={{ text: i18n`panel.left.find`, icon: 'fa fa-search' }}>
             <SearchPanel />
-          </SidePanelView> */}
-          <SidePanelView key='find2' label={{ text: i18n`panel.left.find`, icon: 'fa fa-search' }}>
-            <SearchPanel2 />
           </SidePanelView>
         </SidePanelContainer>
       )

app/components/Search/search.new.jsx

@@ -67,7 +67,7 @@ export class SearchResultItem extends Component {
 }
 
 @observer
-class SearchPanel2 extends Component {
+class SearchPanel extends Component {
     componentDidMount () {
         subscribeToSearch()
     }
@@ -85,6 +85,9 @@ class SearchPanel2 extends Component {
     }
 
     searchTxt = () => {
+        if(state.ws.first) {
+            state.ws.first = false
+        }
         if(state.searching.isPattern) {
             delegate.searchPattern(state.searching);
         } else {
@@ -94,10 +97,11 @@ class SearchPanel2 extends Component {
 
     renderResult () {
         let content = '';
-        if (!state.searched.end) {
+        if (state.ws.first) {
+            content = ''
+        } else if (!state.searched.end) {
             content = 'Searching...'
-        } else if(state.searched.message != '') {
-            // todo 这里的错误信息是否显示
+        } else if(state.searched.message !== '') {
             content = state.searched.message;
         } else if (state.searched.results.length != 0) {
             const pattern = state.searching.pattern;
@@ -143,8 +147,10 @@ class SearchPanel2 extends Component {
                             onKeyDown={this.onKeyDown}
                             placeholder={i18n.get('panel.left.find')}
                         />
-
-                        <input title={i18n.get('panel.checkbox.case')}
+                    </div>
+                    <div className='search-checkbox'>
+                        <input 
+                            title={i18n.get('panel.checkbox.case')}
                             label={i18n.get('panel.checkbox.case')}
                             className='search-control-case-sensitive'
                             onChange={this.caseSensitive}
@@ -181,4 +187,4 @@ class SearchPanel2 extends Component {
 
 }
 
-export default SearchPanel2;
+export default SearchPanel;

app/styles/core-ui/Search.styl

@@ -7,7 +7,17 @@
     margin-bottom: 14px;  
   }
   .search-panel-input {
-    margin-bottom: 14px;  
+    margin-bottom: 14px;
+    background-color: #1e1e1e
+    border: 1px solid #333
+    display: flex
+    .search-controls {
+      border: none
+    }
+    .search-checkbox {
+      margin-right: inherit;
+      position inherit;
+    }
   }
   .search-item {
     cursor: pointer;