Merge branch 'feature/update' into develop

app-ui/about/About.jsx

@@ -28,18 +28,24 @@ export default class About extends React.Component {
   }
 
   show () {
-    this.setState({
-      visible: true
-    }, () => {
-      let links = this.refs.content.querySelectorAll('a')
+    const updateLink = () => {
+      if (!this.el_content) {
+        setTimeout(updateLink, 500)
+        return
+      }
+      let links = this.el_content.querySelectorAll('a')
       links = Array.from(links)
       links.map(a => {
         a.onclick = () => {
           this.openUrl(a.href)
           return false
         }
       })
-    })
+    }
+
+    this.setState({
+      visible: true
+    }, updateLink)
   }
 
   openUrl (url) {
@@ -71,7 +77,7 @@ export default class About extends React.Component {
           <div className={styles.logo}>
             <img src={logo} alt=""/>
           </div>
-          <div className={styles.content} ref="content">
+          <div className={styles.content} ref={c => this.el_content = c}>
             <h2>SwitchHosts!</h2>
             <div className={styles.version}>{ver}</div>
             <div>

app-ui/content/SearchBar.jsx

@@ -47,10 +47,10 @@ export default class SearchBar extends React.Component {
   }
 
   componentDidMount () {
-    this.refs.ipt.focus()
+    this.el_ipt.focus()
     Agent.on('search:state', d => this.setState({...d}))
     Agent.on('search:start', () => {
-      let ipt = this.refs.ipt
+      let ipt = this.el_ipt
       ipt && ipt.focus()
     })
   }
@@ -64,7 +64,7 @@ export default class SearchBar extends React.Component {
         <Row gutter={16}>
           <Col span={12}>
             <Input
-              ref="ipt"
+              ref={c => this.el_ipt = c}
               value={kw}
               onChange={e => this.setState({kw: e.target.value}, () => this.doSearch())}
               placeholder={lang.search_placeholder}

app-ui/frame/EditPrompt.jsx

@@ -38,7 +38,7 @@ export default class EditPrompt extends React.Component {
   }
 
   tryToFocus () {
-    let el = this.refs.body && this.refs.body.querySelector('input[type=text]')
+    let el = this.el_body && this.el_body.querySelector('input[type=text]')
     el && el.focus()
   }
 
@@ -116,12 +116,12 @@ export default class EditPrompt extends React.Component {
     })
 
     if (this.state.title === '') {
-      this.refs.title.focus()
+      this.el_title.focus()
       return false
     }
 
     if (this.state.where === 'remote' && this.state.url === '') {
-      this.refs.url.focus()
+      this.el_url.focus()
       return false
     }
 
@@ -239,7 +239,7 @@ export default class EditPrompt extends React.Component {
           <div className="title">{lang.url}</div>
           <div className="cnt">
             <Input
-              ref="url"
+              ref={c => this.el_url = c}
               value={this.state.url}
               placeholder="http://"
               onChange={e => this.setState({url: e.target.value})}
@@ -283,7 +283,7 @@ export default class EditPrompt extends React.Component {
   body () {
     let {lang} = this.props
     return (
-      <div ref="body">
+      <div ref={c => this.el_body = c}>
         <div className="ln">
           <RadioGroup onChange={e => this.setState({where: e.target.value})} value={this.state.where}>
             <RadioButton value="local"><Icon type="file-text" /> {lang.where_local}</RadioButton>
@@ -296,7 +296,7 @@ export default class EditPrompt extends React.Component {
           <div className="title">{lang.hosts_title}</div>
           <div className="cnt">
             <Input
-              ref="title"
+              ref={c => this.el_title = c}
               value={this.state.title}
               onChange={(e) => this.setState({title: e.target.value})}
               onKeyDown={(e) => (e.keyCode === 13 && this.onOK() || e.keyCode === 27 && this.onCancel())}

app-ui/frame/Group.jsx

@@ -61,7 +61,7 @@ export default class Group extends React.Component {
 
     return (
       <div id="hosts-group-valid">
-        <div ref="group_valid" className="hosts-group-list">
+        <div ref={c => this.el_group_valid = c} className="hosts-group-list">
           {items}
         </div>
       </div>
@@ -76,7 +76,7 @@ export default class Group extends React.Component {
 
     return (
       <div id="hosts-group-current">
-        <div ref="group_current" className="hosts-group-list">
+        <div ref={c => this.el_group_current = c} className="hosts-group-list">
           {items}
         </div>
       </div>
@@ -85,7 +85,7 @@ export default class Group extends React.Component {
 
   getCurrentListFromDOM () {
     let {updateInclude} = this.props
-    let nodes = this.refs.group_current.getElementsByClassName('hosts-item')
+    let nodes = this.el_group_current.getElementsByClassName('hosts-item')
     nodes = listToArray(nodes)
     let ids = nodes.map(item => item.getAttribute('data-id'))
     this.ids = ids
@@ -100,13 +100,13 @@ export default class Group extends React.Component {
   }
 
   componentDidMount () {
-    Sortable.create(this.refs.group_valid, {
+    Sortable.create(this.el_group_valid, {
       group: 'sorting'
       , animation: 150
       , sort: false
     })
 
-    Sortable.create(this.refs.group_current, {
+    Sortable.create(this.el_group_current, {
       group: 'sorting'
       , animation: 150
       , sort: true

app-ui/frame/PreferencesPrompt.less

@@ -4,7 +4,7 @@
   .frame {
     .current-version {
       float: right;
-      margin-top: -50px;
+      margin-top: -61px;
       margin-right: 30px;
       color: #999;
 

app-ui/frame/SudoPrompt.jsx

@@ -27,7 +27,7 @@ export default class SudoPrompt extends React.Component {
       this.setState({show: true})
       this.onSuccess = success
       setTimeout(() => {
-        let el = this.refs.body
+        let el = this.el_body
         el && el.querySelector('input').focus()
       }, 100)
     })
@@ -38,7 +38,7 @@ export default class SudoPrompt extends React.Component {
     if (!pswd) {
       //let el = body
       //el && el.querySelector('input').focus()
-      this.refs.pswd.focus()
+      this.el_pswd.focus()
       return
     }
 
@@ -64,13 +64,13 @@ export default class SudoPrompt extends React.Component {
   body () {
     let {lang} = this.props
     return (
-      <div ref="body">
+      <div ref={c => this.el_body = c}>
         <div className="ln">
           <div className="title">{lang.sudo_pswd}</div>
           <div className="cnt">
             <Input
               type="password"
-              ref="pswd"
+              ref={c => this.el_pswd = c}
               onKeyDown={e => (e.keyCode === 13 && this.onOK() || e.keyCode === 27 && this.onCancel())}
               onChange={e => this.setState({pswd: e.target.value})}
             />

app-ui/panel/List.jsx

@@ -53,15 +53,15 @@ export default class List extends React.Component {
   }
 
   getCurrentListFromDOM () {
-    let nodes = this.refs.items.getElementsByClassName('list-item')
+    let nodes = this.el_items.getElementsByClassName('list-item')
     nodes = listToArray(nodes)
     let ids = nodes.map(el => el.getAttribute('data-id'))
 
     Agent.emit('sort', ids)
   }
 
   componentDidMount () {
-    Sortable.create(this.refs.items, {
+    Sortable.create(this.el_items, {
       group: 'list-sorting'
       , sort: true
       , animation: 150
@@ -85,7 +85,7 @@ export default class List extends React.Component {
           data={this.props.sys_hosts}
           {...this.props}
           sys="1"/>
-        <div ref="items" className={styles['custom-items']}>
+        <div ref={c => this.el_items = c} className={styles['custom-items']}>
           {this.customItems()}
         </div>
       </div>

app-ui/panel/searchbar.jsx

@@ -27,7 +27,7 @@ export default class SearchBar extends React.Component {
         show: true
       }, () => {
         setTimeout(() => {
-          this.refs.keyword.focus()
+          this.el_keyword.focus()
         }, 100)
       })
     })
@@ -48,7 +48,7 @@ export default class SearchBar extends React.Component {
   emptySearch () {
     this.setState({keyword: ''})
     Agent.emit('search', '')
-    this.refs.keyword.focus()
+    this.el_keyword.focus()
   }
 
   onBlur () {
@@ -80,7 +80,7 @@ export default class SearchBar extends React.Component {
     return (
       <div id="sh-searchbar">
         <Input
-          ref="keyword"
+          ref={c => this.el_keyword = c}
           size="large"
           //placeholder="keyword"
           suffix={this.state.keyword ? <Icon type="close-circle" onClick={this.emptySearch.bind(this)}/> : null}