cleanup style and class name of ArticleDetail

browser/components/ModeSelect.js

@@ -37,27 +37,9 @@ export default class ModeSelect extends React.Component {
   }
 
   handleIdleSelectClick (e) {
-    this.setState({mode: EDIT_MODE})
-  }
-
-  componentDidUpdate (prevProps, prevState) {
-    if (prevState.mode !== this.state.mode && this.state.mode === EDIT_MODE) {
-      let searchElement = ReactDOM.findDOMNode(this.refs.search)
-      searchElement.focus()
-      if (this.searchKeyDownListener == null) {
-        this.searchKeyDownListener = e => this.handleSearchKeyDown
-      }
-      searchElement.addEventListener('keydown', this.searchKeyDownListener)
-    }
-  }
-
-  componentWillUpdate (nextProps, nextState) {
-    if (nextProps.mode !== this.state.mode && nextState.mode === IDLE_MODE) {
-      let searchElement = ReactDOM.findDOMNode(this.refs.search)
-      if (searchElement != null && this.searchKeyDownListener != null) {
-        searchElement.removeEventListener('keydown', this.searchKeyDownListener)
-      }
-    }
+    this.setState({mode: EDIT_MODE, search: this.props.value}, () => {
+      ReactDOM.findDOMNode(this.refs.search).select()
+    })
   }
 
   handleModeOptionClick (modeName) {
@@ -82,9 +64,9 @@ export default class ModeSelect extends React.Component {
       case 40:
         e.preventDefault()
         {
+          let search = _.escapeRegExp(this.state.search)
           let filteredModes = modes
             .filter(mode => {
-              let search = this.state.search
               let nameMatched = mode.name.match(search)
               let aliasMatched = _.some(mode.alias, alias => alias.match(search))
               return nameMatched || aliasMatched
@@ -97,9 +79,9 @@ export default class ModeSelect extends React.Component {
       case 13:
         e.preventDefault()
         {
+          let search = _.escapeRegExp(this.state.search)
           let filteredModes = modes
             .filter(mode => {
-              let search = this.state.search
               let nameMatched = mode.name.match(search)
               let aliasMatched = _.some(mode.alias, alias => alias.match(search))
               return nameMatched || aliasMatched
@@ -148,33 +130,31 @@ export default class ModeSelect extends React.Component {
     if (this.state.mode === IDLE_MODE) {
       let mode = _.findWhere(modes, {name: this.props.value})
       let modeName = mode != null ? mode.name : 'text'
-      let modeLabel = mode != null ? mode.label : 'Plain text'
 
       return (
         <div className={className + ' idle'} onClick={e => this.handleIdleSelectClick(e)}>
           <ModeIcon mode={modeName}/>
-          <span className='modeLabel'>{modeLabel}</span>
         </div>
       )
     }
 
+    let search = _.escapeRegExp(this.state.search)
     let filteredOptions = modes
       .filter(mode => {
-        let search = this.state.search
-        let nameMatched = mode.name.match(_.escapeRegExp(search))
-        let aliasMatched = _.some(mode.alias, alias => alias.match(_.escapeRegExp(search)))
+        let nameMatched = mode.name.match(search)
+        let aliasMatched = _.some(mode.alias, alias => alias.match(search))
         return nameMatched || aliasMatched
       })
       .map((mode, index) => {
         return (
-          <div key={mode.name} className={index === this.state.focusIndex ? 'option active' : 'option'} onClick={e => this.handleModeOptionClick(mode.name)(e)}><ModeIcon mode={mode.name}/>{mode.label}</div>
+          <div key={mode.name} className={index === this.state.focusIndex ? 'ModeSelect-options-item active' : 'ModeSelect-options-item'} onClick={e => this.handleModeOptionClick(mode.name)(e)}><ModeIcon mode={mode.name}/>{mode.label}</div>
           )
       })
 
     return (
       <div className={className + ' edit'}>
         <input onKeyDown={e => this.handleSearchKeyDown(e)} ref='search' onChange={e => this.handleSearchChange(e)} value={this.state.search} type='text'/>
-        <div ref='options' className='modeOptions hide'>
+        <div ref='options' className='ModeSelect-options hide'>
           {filteredOptions}
         </div>
       </div>

browser/components/TagSelect.js

@@ -117,10 +117,10 @@ export default class TagSelect extends React.Component {
 
     let tagElements = _.isArray(tags)
       ? this.props.tags.map(tag => (
-        <span key={tag} className='tagItem'>
-          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='tagRemoveBtn'><i className='fa fa-fw fa-times'/></button>
-          <span className='tagLabel'>{tag}</span>
-        </span>))
+        <div key={tag} className='TagSelect-tags-item'>
+          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='TagSelect-tags-item-remove'><i className='fa fa-fw fa-times'/></button>
+          <div className='TagSelect-tags-item-label'>{tag}</div>
+        </div>))
       : null
 
     let suggestElements = this.shouldShowSuggest() ? suggestTags
@@ -134,7 +134,7 @@ export default class TagSelect extends React.Component {
 
     return (
       <div className='TagSelect' onClick={e => this.handleThisClick(e)}>
-        <div className='tags'>
+        <div className='TagSelect-tags'>
           {tagElements}
           <input
             type='text'
@@ -142,13 +142,13 @@ export default class TagSelect extends React.Component {
             ref='tagInput'
             valueLink={this.linkState('input')}
             placeholder='Click here to add tags'
-            className='tagInput'
+            className='TagSelect-input'
             onFocus={e => this.handleInputFocus(e)}
           />
         </div>
         {suggestElements != null && suggestElements.length > 0
           ? (
-            <div ref='suggestTags' className='suggestTags'>
+            <div ref='suggestTags' className='TagSelect-suggest'>
               {suggestElements}
             </div>
           )