Replace Backbone with React lightbox

js/views/attachment_view.js

@@ -4,6 +4,7 @@
 /* global moment: false */
 
 /* global i18n: false */
+/* global Signal: false */
 /* global textsecure: false */
 /* global Whisper: false */
 
@@ -92,8 +93,8 @@
     unload() {
       this.blob = null;
 
-      if (this.lightBoxView) {
-        this.lightBoxView.remove();
+      if (this.lightboxView) {
+        this.lightboxView.remove();
       }
       if (this.fileView) {
         this.fileView.remove();
@@ -111,14 +112,26 @@
       }
     },
     onClick() {
-      if (this.isImage()) {
-        this.lightBoxView = new Whisper.LightboxView({ model: this });
-        this.lightBoxView.render();
-        this.lightBoxView.$el.appendTo(this.el);
-        this.lightBoxView.$el.trigger('show');
-      } else {
+      if (!this.isImage()) {
         this.saveFile();
+        return;
       }
+
+      const lightboxContainer = document.querySelector('.lightboxContainer');
+      lightboxContainer.innerHTML = '';
+      lightboxContainer.style.display = 'block';
+
+      const props = {
+        imageURL: this.objectUrl,
+      };
+      this.lightboxView = new Whisper.ReactWrapperView({
+        Component: Signal.Components.Lightbox,
+        props,
+        onClose: () => {
+          lightboxContainer.style.display = 'none';
+        },
+      });
+      lightboxContainer.appendChild(this.lightboxView.el);
     },
     isVoiceMessage() {
       // eslint-disable-next-line no-bitwise

js/views/inbox_view.js

@@ -172,7 +172,6 @@
       'click .conversation': 'focusConversation',
       'select .gutter .conversation-list-item': 'openConversation',
       'input input.search': 'filterContacts',
-      'show .lightbox': 'showLightbox',
     },
     startConnectionListener() {
       this.interval = setInterval(() => {
@@ -259,9 +258,6 @@
         this.focusConversation();
       }
     },
-    showLightbox(e) {
-      this.$el.append(e.target);
-    },
     closeRecording(e) {
       if (e && this.$(e.target).closest('.capture-audio').length > 0) {
         return;