Merge pull request #1039 from hypothesis/react-annotation-action-button

Convert `<annotation-action-button>` component to React

src/sidebar/components/annotation-action-button.js

 'use strict';
 
-module.exports = {
-  controllerAs: 'vm',
-  bindings: {
-    icon: '<',
-    isDisabled: '<',
-    label: '<',
-    onClick: '&',
-  },
-  template: require('../templates/annotation-action-button.html'),
+const classnames = require('classnames');
+const propTypes = require('prop-types');
+const { createElement } = require('preact');
+
+function AnnotationActionButton({ icon, isDisabled, label, onClick }) {
+  return (
+    <button
+      className="btn btn-clean annotation-action-btn"
+      onClick={onClick}
+      disabled={isDisabled}
+      aria-label={label}
+      h-tooltip
+    >
+      <i className={classnames(icon, 'btn-icon')} />
+    </button>
+  );
+}
+
+AnnotationActionButton.propTypes = {
+  /** A CSS classname corresponding to an `h` icon */
+  icon: propTypes.string.isRequired,
+  isDisabled: propTypes.bool.isRequired,
+  label: propTypes.string.isRequired,
+  onClick: propTypes.func.isRequired,
 };
+
+module.exports = AnnotationActionButton;

src/sidebar/components/test/annotation-test.js

@@ -155,7 +155,12 @@ describe('annotation', function() {
         .module('h', [])
         .component('annotation', annotationComponent())
         .component('annotationActionButton', {
-          bindings: require('../annotation-action-button').bindings,
+          bindings: {
+            icon: '<',
+            isDisabled: '<',
+            label: '<',
+            onClick: '&',
+          },
         })
         .component('markdown', {
           bindings: require('../markdown').bindings,

src/sidebar/index.js

@@ -142,7 +142,7 @@ function startAngularApp(config) {
     .component('annotationHeader', require('./components/annotation-header'))
     .component(
       'annotationActionButton',
-      require('./components/annotation-action-button')
+      wrapReactComponent(require('./components/annotation-action-button'))
     )
     .component(
       'annotationShareDialog',

src/sidebar/templates/annotation-action-button.html

-<button class="btn btn-clean annotation-action-btn"
-  ng-click="vm.onClick()"
-  ng-disabled="vm.isDisabled"
-  aria-label="{{ vm.label }}"
-  h-tooltip>
-  <i class="{{ vm.icon }} btn-icon"></i>
-</button>