Use ES Class Fields & Static Properties (#3008)

Use ES Class Fields & Static Properties (currently stage 2) for improve class outlook.

Added babel-plugin-transform-class-properties as a Babel plugin.

app/javascript/mastodon/features/ui/index.js

@@ -20,27 +20,21 @@ const noOp = () => false;
 
 class UI extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      width: window.innerWidth,
-      draggingOver: false
-    };
-    this.handleResize = debounce(this.handleResize.bind(this), 500);
-    this.handleDragEnter = this.handleDragEnter.bind(this);
-    this.handleDragOver = this.handleDragOver.bind(this);
-    this.handleDrop = this.handleDrop.bind(this);
-    this.handleDragLeave = this.handleDragLeave.bind(this);
-    this.handleDragEnd = this.handleDragLeave.bind(this)
-    this.closeUploadModal = this.closeUploadModal.bind(this)
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    children: PropTypes.node
+  };
 
-  handleResize () {
+  state = {
+    width: window.innerWidth,
+    draggingOver: false
+  };
+
+  handleResize = () => {
     this.setState({ width: window.innerWidth });
   }
 
-  handleDragEnter (e) {
+  handleDragEnter = (e) => {
     e.preventDefault();
 
     if (!this.dragTargets) {
@@ -56,7 +50,7 @@ class UI extends React.PureComponent {
     }
   }
 
-  handleDragOver (e) {
+  handleDragOver = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -69,7 +63,7 @@ class UI extends React.PureComponent {
     return false;
   }
 
-  handleDrop (e) {
+  handleDrop = (e) => {
     e.preventDefault();
 
     this.setState({ draggingOver: false });
@@ -79,7 +73,7 @@ class UI extends React.PureComponent {
     }
   }
 
-  handleDragLeave (e) {
+  handleDragLeave = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -92,7 +86,7 @@ class UI extends React.PureComponent {
     this.setState({ draggingOver: false });
   }
 
-  closeUploadModal() {
+  closeUploadModal = () => {
     this.setState({ draggingOver: false });
   }
 
@@ -117,7 +111,7 @@ class UI extends React.PureComponent {
     document.removeEventListener('dragend', this.handleDragEnd);
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -160,9 +154,4 @@ class UI extends React.PureComponent {
 
 }
 
-UI.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  children: PropTypes.node
-};
-
 export default connect()(UI);