From 7174624d769e87d187f14e99de5f19f9dfc16352 Mon Sep 17 00:00:00 2001
From: Tom Greenfield <tom.greenfield@kineo.com>
Date: Mon, 1 Mar 2021 12:34:10 +0000
Subject: [PATCH 1/3] Update view properties on model change

---
 src/core/js/views/adaptView.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/core/js/views/adaptView.js b/src/core/js/views/adaptView.js
index d33d80b0b..990c750c1 100644
--- a/src/core/js/views/adaptView.js
+++ b/src/core/js/views/adaptView.js
@@ -18,6 +18,7 @@ class AdaptView extends Backbone.View {
     });
     this.isReact = (this.constructor.template || '').includes('.jsx');
     if (this.isReact) {
+      this.classSet = new Set(_.result(this, 'className').trim().split(/\s+/));
       this.listenTo(this.model, 'all', this.changed);
       // Facilitate adaptive react views
       this.listenTo(Adapt, 'device:changed', this.changed);
@@ -82,9 +83,19 @@ class AdaptView extends Backbone.View {
       return;
     }
     const element = render(this.constructor.template.replace('.jsx', ''), this.model, this);
+    this.updateViewProperties();
     ReactDOM.render(element, this.el);
   }
 
+  updateViewProperties() {
+    const classes = _.result(this, 'className').trim().split(/\s+/);
+    classes.forEach(i => this.classSet.add(i));
+    const difference = [ ...this.classSet ].filter(i => !classes.includes(i));
+    difference.forEach(i => this.classSet.delete(i));
+    this._setAttributes({ ..._.result(this, 'attributes'), id: _.result(this, 'id') });
+    this.$el.removeClass(difference).addClass(classes);
+  }
+
   setupOnScreenHandler() {
     const onscreen = this.model.get('_onScreen');
 

From 746975f044971ca06e39c7787df724bb2075e4ad Mon Sep 17 00:00:00 2001
From: Tom Greenfield <tom.greenfield@kineo.com>
Date: Mon, 1 Mar 2021 12:34:46 +0000
Subject: [PATCH 2/3] Fix ESLint environment

---
 .eslintrc.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 1d4c694f8..c431511c0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -2,7 +2,7 @@
     "env": {
         "browser": true,
         "commonjs": false,
-        "es6": false,
+        "es2020": true,
         "amd": true
     },
     "extends": [

From b65498a8d76126918e5cf7dfdff475ae0e2a1c67 Mon Sep 17 00:00:00 2001
From: Tom Greenfield <tom.greenfield@kineo.com>
Date: Tue, 2 Mar 2021 11:02:37 +0000
Subject: [PATCH 3/3] Improve variable clarity

---
 src/core/js/views/adaptView.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/core/js/views/adaptView.js b/src/core/js/views/adaptView.js
index 990c750c1..ae77f165e 100644
--- a/src/core/js/views/adaptView.js
+++ b/src/core/js/views/adaptView.js
@@ -18,7 +18,7 @@ class AdaptView extends Backbone.View {
     });
     this.isReact = (this.constructor.template || '').includes('.jsx');
     if (this.isReact) {
-      this.classSet = new Set(_.result(this, 'className').trim().split(/\s+/));
+      this._classSet = new Set(_.result(this, 'className').trim().split(/\s+/));
       this.listenTo(this.model, 'all', this.changed);
       // Facilitate adaptive react views
       this.listenTo(Adapt, 'device:changed', this.changed);
@@ -88,12 +88,12 @@ class AdaptView extends Backbone.View {
   }
 
   updateViewProperties() {
-    const classes = _.result(this, 'className').trim().split(/\s+/);
-    classes.forEach(i => this.classSet.add(i));
-    const difference = [ ...this.classSet ].filter(i => !classes.includes(i));
-    difference.forEach(i => this.classSet.delete(i));
+    const classesToAdd = _.result(this, 'className').trim().split(/\s+/);
+    classesToAdd.forEach(i => this._classSet.add(i));
+    const classesToRemove = [ ...this._classSet ].filter(i => !classesToAdd.includes(i));
+    classesToRemove.forEach(i => this._classSet.delete(i));
     this._setAttributes({ ..._.result(this, 'attributes'), id: _.result(this, 'id') });
-    this.$el.removeClass(difference).addClass(classes);
+    this.$el.removeClass(classesToRemove).addClass(classesToAdd);
   }
 
   setupOnScreenHandler() {