使用新搜索控件。

app-ui/content/Content.jsx

@@ -28,9 +28,13 @@ export default class Content extends React.Component {
   }
 
   componentDidMount () {
-    Agent.on('to_search', () => {
+    Agent.on('search:start', () => {
       this.setState({show_search: true})
     })
+
+    Agent.on('search:end', () => {
+      this.setState({show_search: false})
+    })
   }
 
   render () {

app-ui/content/Editor.jsx

@@ -30,7 +30,7 @@ export default class Editor extends React.Component {
 
     this.state = {}
 
-    Agent.on('search', (kw) => {
+    Agent.on('search:kw', kw => {
       this.kw = kw
       this.highlightKeyword()
     })
@@ -129,7 +129,8 @@ export default class Editor extends React.Component {
         id="sh-editor"
         className={classnames({
           [styles.root]: 1,
-          readonly: this.props.readonly
+          readonly: this.props.readonly,
+          [styles.show_search]: this.props.show_search
         })}>
                 <textarea
                   ref={(c) => this.cnt_node = c}

app-ui/content/Editor.less

@@ -2,6 +2,7 @@
 
 .root {
   height: 100%;
+  box-sizing: border-box;
   font-family: @font-editor;
 
   // CodeMirror
@@ -18,6 +19,10 @@
       }
     }
   }
+
+  &.show_search {
+    padding-bottom: 40px;
+  }
 }
 
 :global {

app-ui/content/SearchBar.jsx

@@ -26,20 +26,23 @@ export default class SearchBar extends React.Component {
   }
 
   gotoPrevious () {
-    Agent.xemit('search:goto_previous')
+    Agent.emit('search:goto_previous')
   }
 
   gotoNext () {
-    Agent.xemit('search:goto_next')
+    Agent.emit('search:goto_next')
   }
 
   doSearch () {
-    Agent.xemit('search:kw', this.state.kw)
+    clearTimeout(this._t)
+    this._t = setTimeout(() => {
+      Agent.emit('search:kw', this.state.kw)
+    }, 300)
   }
 
   searchEnd () {
-    Agent.xemit('search:kw', '')
-    Agent.xemit('search:end')
+    Agent.emit('search:kw', '')
+    Agent.emit('search:end')
     this.setState({kw: undefined})
   }
 

app-ui/content/SearchBar.less

@@ -1,9 +1,10 @@
 .root {
   padding: 6px 10px;
+  box-shadow: 0 -2px 0 0 rgba(0, 0, 0, 0.05);
 }
 
 .btn_close {
-  line-height: 28px;
+  margin-top: 8px;
   cursor: pointer;
   float: right;
 }

app-ui/panel/Buttons.jsx

@@ -62,7 +62,7 @@ export default class Buttons extends React.Component {
     this.setState({
       search_on: !this.state.search_on
     }, () => {
-      Agent.emit(this.state.search_on ? 'search_on' : 'search_off')
+      Agent.emit(this.state.search_on ? 'search:start' : 'search:end')
     })
   }
 

app-ui/panel/List.jsx

@@ -22,7 +22,7 @@ export default class List extends React.Component {
       kw: ''
     }
 
-    Agent.on('search', kw => {
+    Agent.on('search:kw', kw => {
       this.setState({kw})
     })
   }

app-ui/panel/Panel.jsx

@@ -7,7 +7,7 @@
 
 import React from 'react'
 import Buttons from './Buttons'
-import SearchBar from './searchbar'
+//import SearchBar from './searchbar'
 import List from './List'
 import styles from './Panel.less'
 
@@ -16,7 +16,7 @@ export default class Panel extends React.Component {
     return (
       <div id="panel" className={styles.root}>
         <List {...this.props}/>
-        <SearchBar/>
+        {/*<SearchBar/>*/}
         <Buttons/>
       </div>
     )

app/main.js

@@ -148,7 +148,7 @@ app.on('show', function () {
 app.on('activate', function () {
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
+  if (!mainWindow) {
     createWindow()
   } else if (mainWindow.isMinimized()) {
     mainWindow.restore()

app/menu/main_menu.js

@@ -115,7 +115,7 @@ function doInit (app, lang) {
           click () {
             // ipcMain.emit('to_search');
             //app.mainWindow.webContents.send('to_search')
-            svr.broadcast('to_search')
+            svr.broadcast('search:start')
           }
         }, {
           label: lang.comment,

app/version.js

@@ -1 +1 @@
-exports.version = [3,3,7,5300];
+exports.version = [3,3,7,5305];

package.json

@@ -29,7 +29,7 @@
   },
   "homepage": "https://oldj.github.io/SwitchHosts/",
   "devDependencies": {
-    "antd": "^2.10.2",
+    "antd": "^2.12.6",
     "autoprefixer": "^6.7.2",
     "ava": "^0.18.2",
     "babel-core": "^6.22.1",
@@ -93,11 +93,12 @@
     "style-loader": "^0.16.0",
     "uglify-loader": "^2.0.0",
     "url-loader": "^0.5.7",
-    "webpack": "^2.6.1",
+    "webpack": "^3.5.4",
     "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
     "webpack-merge": "^2.6.1",
+    "webpack-notifier": "^1.5.0",
     "wheel-js": "^0.0.21",
     "yargs": "^6.5.0"
   },

webpack.config.js

@@ -8,6 +8,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const moment = require('moment')
+const WebpackNotifierPlugin = require('webpack-notifier')
 const version = require('./app/version').version.join('.')
 
 module.exports = {
@@ -69,6 +70,10 @@ module.exports = {
       manifest: require('./tmp/manifest.json')
     })
     , new webpack.IgnorePlugin(new RegExp('^(electron|fs|path)$'))
+    , new WebpackNotifierPlugin({
+      title: 'SwitchHosts!',
+      alwaysNotify: true
+    })
     , new webpack.BannerPlugin(`SwitchHosts! [file] v${version}, ${moment().format('YYYY-MM-DD HH:mm:ss')}`)
   ]
 }