Use refs instead of accessing etch element

kuychaco · kuychaco · commit dc9fb5340cf9 · 2017-12-05T18:14:27.000-08:00
diff --git a/lib/views/commit-view.js b/lib/views/commit-view.js
@@ -84,7 +84,7 @@ export default class CommitView {
             scrollPastEnd={false}
           />
           {this.renderHardWrapIcons()}
-          <button className="github-CommitView-expandButton icon icon-screen-full"
+          <button ref="expandButton" className="github-CommitView-expandButton icon icon-screen-full"
             onClick={this.toggleExpandedCommitMessageEditor}
           />
         </div>
@@ -133,7 +133,7 @@ export default class CommitView {
     };
 
     return (
-      <div onclick={this.toggleHardWrap} className="github-CommitView-hardwrap hard-wrap-icons">
+      <div onclick={this.toggleHardWrap} ref="hardWrapButton" className="github-CommitView-hardwrap hard-wrap-icons">
         <div className={cx('icon', 'no-hardwrap', 'icon-hardwrap-disabled', {hidden: notApplicable || hardWrap})}>
           <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <g fill-rule="evenodd">
@@ -160,13 +160,11 @@ export default class CommitView {
   }
 
   registerTooltips() {
-    const expandButton = this.element.getElementsByClassName('github-CommitView-expandButton')[0];
-    const hardWrapButton = this.element.getElementsByClassName('github-CommitView-hardwrap')[0];
-    this.expandTooltip = this.props.tooltips.add(expandButton, {
+    this.expandTooltip = this.props.tooltips.add(this.refs.expandButton, {
       title: 'Expand commit message editor',
       class: 'github-CommitView-expandButton-tooltip',
     });
-    this.hardWrapTooltip = this.props.tooltips.add(hardWrapButton, {
+    this.hardWrapTooltip = this.props.tooltips.add(this.refs.hardWrapButton, {
       title: 'Toggle hard wrap on commit',
       class: 'github-CommitView-hardwrap-tooltip',
     });
