signal-desktop/js/views/react_wrapper_view.js
Scott Nonnenberg 26e4e97592
Tighten up CSS
- Remove extra padding at top of Android bubbles, via sibling selector
- Don't include .attachments, .quote-wrapper, .content in bubble unless
  we actually need them. This allows for sibling selectors.
- This is a different technique for adding the ReactWrapperView for
  quotes - it is now appended to the DOM instead of attaching to
  something already in the DOM. This allows us to use .remove(), so it's
  a bit cleaner.
- Users of ReactWrapperView can now specify tagName and className
2018-04-20 15:23:47 -07:00

49 lines
1.2 KiB
JavaScript

/* global Backbone: false */
// Additional globals used:
// window.React
// window.ReactDOM
// window.i18n
// eslint-disable-next-line func-names
(function () {
'use strict';
window.Whisper = window.Whisper || {};
window.Whisper.ReactWrapperView = Backbone.View.extend({
className: 'react-wrapper',
initialize(options) {
const { Component, props, onClose } = options;
this.render();
this.tagName = options.tagName;
this.className = options.className;
this.Component = Component;
this.onClose = onClose;
this.update(props);
},
update(props) {
const updatedProps = this.augmentProps(props);
const element = window.React.createElement(this.Component, updatedProps);
window.ReactDOM.render(element, this.el);
},
augmentProps(props) {
return Object.assign({}, props, {
close: () => {
if (this.onClose) {
this.onClose();
return;
}
this.remove();
},
i18n: window.i18n,
});
},
remove() {
window.ReactDOM.unmountComponentAtNode(this.el);
Backbone.View.prototype.remove.call(this);
},
});
}());