From 5fe2cd24cc4a465f17a52faad0cdb8a66f9e4328 Mon Sep 17 00:00:00 2001
From: Egor Blinov <escaton@yandex-team.ru>
Date: Mon, 14 Mar 2016 23:10:27 +0200
Subject: [PATCH] fix editing mods

---
 .../injected-helpers/injected-helpers.js      | 25 ++++++++++++-------
 .../mods-inspect/__mod/mods-inspect__mod.jsx  |  5 ++--
 .../bem-sidebar/blocks/sidebar/sidebar.jsx    | 12 ++++-----
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/pages/bem-sidebar/blocks/injected-helpers/injected-helpers.js b/src/pages/bem-sidebar/blocks/injected-helpers/injected-helpers.js
index 2143cb0..9ea4a69 100644
--- a/src/pages/bem-sidebar/blocks/injected-helpers/injected-helpers.js
+++ b/src/pages/bem-sidebar/blocks/injected-helpers/injected-helpers.js
@@ -76,37 +76,44 @@ export function getEntities() {
     return res;
 }
 
-export function modAdd(owner, mod) {
+export function modAdd(owner, mod, originalMod) {
     var el = $0;
     var classList = el.classList;
     var elInitedClass = BEM.INTERNAL.buildClass(owner.block, 'js', 'inited');
     var isElInited = classList.contains(elInitedClass);
     if (isElInited) {
-        $(el).bem(owner.block).setMod(mod.name, mod.value);
+        var block = $(el).bem(owner.block);
+        if (originalMod && (originalMod.name !== mod.name)) {
+            block.delMod(originalMod.name);
+        }
+        block.setMod(mod.name, mod.value);
     } else {
-        var oldClass = BEM.INTERNAL.buildClass(owner.block, owner.elem, mod.name, '.+');
-        var newClass = BEM.INTERNAL.buildClass(owner.block, owner.elem, mod.name, mod.value);
-        var modRegex = new RegExp('^' + oldClass + '$');
+        var maskToRemove = [BEM.INTERNAL.buildClass(owner.block, owner.elem, mod.name, '.+')];
+        if (originalMod && (originalMod.name !== mod.name)) {
+            maskToRemove.push(BEM.INTERNAL.buildClass(owner.block, owner.elem, originalMod.name, '.+'))
+        }
+        var regexToRemove = new RegExp('^(' + maskToRemove.join('|') + ')$');
         var classListArray = Array.prototype.slice.call(classList, 0);
         var classToRemove = classListArray.filter((className) => {
-            return modRegex.test(className);
+            return regexToRemove.test(className);
         });
         classToRemove.forEach((className) => {
             classList.remove(className);
         });
+        var newClass = BEM.INTERNAL.buildClass(owner.block, owner.elem, mod.name, mod.value);
         classList.add(newClass);
     }
 }
 
-export function modRemove(owner, mod) {
+export function modRemove(owner, mod, originalMod) {
     var el = $0;
     var classList = el.classList;
     var elInitedClass = BEM.INTERNAL.buildClass(owner.block, 'js', 'inited');
     var isElInited = classList.contains(elInitedClass);
     if (isElInited) {
-        $(el).bem(owner.block).delMod(mod.name);
+        $(el).bem(owner.block).delMod(originalMod.name);
     } else {
-        var deleteClass = BEM.INTERNAL.buildClass(owner.block, owner.elem, mod.name, mod.value);
+        var deleteClass = BEM.INTERNAL.buildClass(owner.block, owner.elem, originalMod.name, originalMod.value);
         classList.remove(deleteClass);
     }
 }
diff --git a/src/pages/bem-sidebar/blocks/mods-inspect/__mod/mods-inspect__mod.jsx b/src/pages/bem-sidebar/blocks/mods-inspect/__mod/mods-inspect__mod.jsx
index f4fad7c..67c53fa 100644
--- a/src/pages/bem-sidebar/blocks/mods-inspect/__mod/mods-inspect__mod.jsx
+++ b/src/pages/bem-sidebar/blocks/mods-inspect/__mod/mods-inspect__mod.jsx
@@ -42,7 +42,8 @@ class Mod extends React.Component {
         window.postMessage({
             cmd: 'mod-' + cmd,
             owner: self.props.owner,
-            mod: Object.assign({}, originalMod ? self.state.originalMod : self.state.mod)
+            mod: Object.assign({}, self.state.mod),
+            originalMod: originalMod && Object.assign({}, self.state.originalMod)
         }, '*');
     }
     modBlur(fieldName, e) {
@@ -63,7 +64,7 @@ class Mod extends React.Component {
                 self.props.removeMod();
                 self.commit('remove', true);
             } else if (fieldName === 'value' && self.checkChanges()) {
-                self.commit('add');
+                self.commit('add', true);
             }
         }
     }
diff --git a/src/pages/bem-sidebar/blocks/sidebar/sidebar.jsx b/src/pages/bem-sidebar/blocks/sidebar/sidebar.jsx
index 20fca41..c40d2a3 100644
--- a/src/pages/bem-sidebar/blocks/sidebar/sidebar.jsx
+++ b/src/pages/bem-sidebar/blocks/sidebar/sidebar.jsx
@@ -69,25 +69,25 @@ class App extends React.Component {
                 self.elementSelected();
                 break;
             case 'mod-add':
-                self.modAdd(data.owner, data.mod);
+                self.modAdd(data);
                 break;
             case 'mod-remove':
-                self.modRemove(data.owner, data.mod);
+                self.modRemove(data);
                 break;
             default:
         }
     }
-    modAdd(owner, mod) {
+    modAdd({owner, mod, originalMod}) {
         var self = this;
-        self.evalHelper.executeFunction('modAdd', [owner, mod], (result, error) => {
+        self.evalHelper.executeFunction('modAdd', [owner, mod, originalMod], (result, error) => {
             if (error) {
                 console.error(error);
             }
         });
     }
-    modRemove(owner, mod) {
+    modRemove({owner, mod, originalMod}) {
         var self = this;
-        self.evalHelper.executeFunction('modRemove', [owner, mod], (result, error) => {
+        self.evalHelper.executeFunction('modRemove', [owner, mod, originalMod], (result, error) => {
             if (error) {
                 console.error(error);
             }