Don't use babel in FindView
MODIFY
lib/find-view.js
lib/find-view.js
-/** @babel */
-/** @jsx etch.dom */
-
const _ = require('underscore-plus');
const {TextBuffer, TextEditor, CompositeDisposable} = require('atom');
const Util = require('./project/util');
-const etch = require('etch')
-const h = require('virtual-dom/h')
-const svg = require('virtual-dom/virtual-hyperscript/svg')
+const etch = require('etch');
+const h = require('virtual-dom/h');
+const $ = require('./dom-helpers');
module.exports =
class FindView {
@@ -33,71 +30,82 @@ class FindView {
render() {
return (
- <div tabIndex={-1} className='find-and-replace'>
- <header className='header'>
- <span ref='descriptionLabel' className='header-item description'>
- Find in Current Buffer
- </span>
-
- <span className='header-item options-label pull-right'>
- <span>Finding with Options: </span>
- <span ref='optionsLabel' className='options'></span>
- <span className='btn-group btn-toggle btn-group-options'>
- <button ref='regexOptionButton' className='btn'>
- <svg className="icon" innerHTML='<use href="#find-and-replace-icon-regex" />' />
- </button>
-
- <button ref='caseOptionButton' className='btn'>
- <svg className="icon" innerHTML='<use href="#find-and-replace-icon-case" />' />
- </button>
-
- <button ref='selectionOptionButton' className='btn option-selection'>
- <svg className="icon" innerHTML='<use href="#find-and-replace-icon-selection" />' />
- </button>
-
- <button ref='wholeWordOptionButton' className='btn option-whole-word'>
- <svg className="icon" innerHTML='<use href="#find-and-replace-icon-word" />' />
- </button>
- </span>
- </span>
- </header>
-
- <section className='input-block find-container'>
- <div className='input-block-item input-block-item--flex editor-container'>
- <TextEditor ref='findEditor' mini placeholderText='Find in current buffer' buffer={this.findBuffer} />
- <div className='find-meta-container'>
- <span ref='resultCounter' className='text-subtle result-counter'></span>
- </div>
- </div>
-
- <div className='input-block-item'>
- <div className='btn-group btn-group-find'>
- <button ref='nextButton' className='btn btn-next'>Find</button>
- </div>
-
- <div className='btn-group btn-group-find-all'>
- <button ref='findAllButton' className='btn btn-all'>Find All</button>
- </div>
- </div>
- </section>
-
- <section className='input-block replace-container'>
- <div className='input-block-item input-block-item--flex editor-container'>
- <TextEditor ref='replaceEditor' mini placeholderText='Replace in current buffer' buffer={this.replaceBuffer}/>
- </div>
-
- <div className='input-block-item'>
- <div className='btn-group btn-group-replace'>
- <button ref='replaceNextButton' className='btn btn-next'>Replace</button>
- </div>
-
- <div className='btn-group btn-group-replace-all'>
- <button ref='replaceAllButton' className='btn btn-all'>Replace All</button>
- </div>
- </div>
- </section>
-
- <svg style='display: none;' innerHTML={`
+ $.div({tabIndex: -1, className: 'find-and-replace'},
+ $.header({className: 'header'},
+ $.span({ref: 'descriptionLabel', className: 'header-item description'},
+ 'Find in Current Buffer'
+ ),
+
+ $.span({className: 'header-item options-label pull-right'},
+ $.span({}, 'Finding with Options: '),
+ $.span({ref: 'optionsLabel', className: 'options'}),
+ $.span({className: 'btn-group btn-toggle btn-group-options'},
+ $.button({ref: 'regexOptionButton', className: 'btn'},
+ $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-regex" />'})
+ ),
+
+ $.button({ref: 'caseOptionButton', className: 'btn'},
+ $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-case" />'})
+ ),
+
+ $.button({ref: 'selectionOptionButton', className: 'btn option-selection'},
+ $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-selection" />'})
+ ),
+
+ $.button({ref: 'wholeWordOptionButton', className: 'btn option-whole-word'},
+ $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-word" />'})
+ )
+ )
+ )
+ ),
+
+ $.section({className: 'input-block find-container'},
+ $.div({className: 'input-block-item input-block-item--flex editor-container'},
+ $(TextEditor, {
+ ref: 'findEditor',
+ mini: true,
+ placeholderText: 'Find in current buffer',
+ buffer: this.findBuffer
+ }),
+
+ $.div({className: 'find-meta-container'},
+ $.span({ref: 'resultCounter', className: 'text-subtle result-counter'})
+ )
+ ),
+
+ $.div({className: 'input-block-item'},
+ $.div({className: 'btn-group btn-group-find'},
+ $.button({ref: 'nextButton', className: 'btn btn-next'}, 'Find')
+ ),
+
+ $.div({className: 'btn-group btn-group-find-all'},
+ $.button({ref: 'findAllButton', className: 'btn btn-all'}, 'Find All')
+ )
+ )
+ ),
+
+ $.section({className: 'input-block replace-container'},
+ $.div({className: 'input-block-item input-block-item--flex editor-container'},
+ $(TextEditor, {
+ ref: 'replaceEditor',
+ mini: true,
+ placeholderText: 'Replace in current buffer',
+ buffer: this.replaceBuffer
+ })
+ ),
+
+ $.div({className: 'input-block-item'},
+ $.div({className: 'btn-group btn-group-replace'},
+ $.button({ref: 'replaceNextButton', className: 'btn btn-next'}, 'Replace')
+ ),
+
+ $.div({className: 'btn-group btn-group-replace-all'},
+ $.button({ref: 'replaceAllButton', className: 'btn btn-all'}, 'Replace All')
+ )
+ )
+ ),
+
+ $.svg({style: 'display: none;', innerHTML: `
<symbol id="find-and-replace-icon-regex" viewBox="0 0 20 16" stroke="none" fill-rule="evenodd">
<rect x="3" y="10" width="3" height="3" rx="1"></rect>
<rect x="12" y="3" width="2" height="9" rx="1"></rect>
@@ -127,8 +135,8 @@ class FindView {
<path d="M4,10.5 L4,12.5 L4,13 L5,13 L5,12.5 L5,10.5 L5,10 L4,10 L4,10.5 L4,10.5 Z"></path>
<path d="M15,10.5 L15,12.5 L15,13 L16,13 L16,12.5 L16,10.5 L16,10 L15,10 L15,10.5 L15,10.5 Z"></path>
</symbol>
- `} />
- </div>
+ `})
+ )
);
}

Don't use babel in FindView