From 70cabce324f50beffddf08ad0b43d66a8e6da573 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 14 Dec 2021 14:39:07 +0100
Subject: [PATCH] Update __upProp in order to support Stack with parent targets

---
 src/style_manager/index.js                   | 31 ++++++++++++--------
 src/style_manager/model/PropertyStack.js     |  4 +--
 test/specs/style_manager/model/Properties.js | 21 +++++++++++++
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/style_manager/index.js b/src/style_manager/index.js
index 2137e46ef..21372cf0e 100644
--- a/src/style_manager/index.js
+++ b/src/style_manager/index.js
@@ -569,17 +569,13 @@ export default () => {
           this.__upProp(prop, style, parentStyles, opts);
           const props = prop.getProperties?.();
 
-          if (props) {
-            if (prop.getType() === 'stack') {
-              prop.__setLayers(prop.__getLayersFromStyle(style));
-            } else {
-              const newStyle = prop.__getFromStyle(style);
-              const newParentStyles = parentStyles.map(p => ({
-                ...p,
-                style: prop.__getFromStyle(p.style),
-              }));
-              props.forEach(prop => this.__upProp(prop, newStyle, newParentStyles, opts));
-            }
+          if (props && prop.getType() !== 'stack') {
+            const newStyle = prop.__getFromStyle(style);
+            const newParentStyles = parentStyles.map(p => ({
+              ...p,
+              style: prop.__getFromStyle(p.style),
+            }));
+            props.forEach(prop => this.__upProp(prop, newStyle, newParentStyles, opts));
           }
         });
       });
@@ -593,10 +589,20 @@ export default () => {
       const name = prop.getName();
       const value = style[name];
       const hasVal = propDef(value);
+      const isStack = prop.getType() === 'stack';
+      let newLayers = isStack ? prop.__getLayersFromStyle(style) : [];
       let newValue = hasVal ? value : null;
       let parentTarget = null;
 
-      if (!hasVal) {
+      if (isStack && newLayers === null) {
+        const parentItem = parentStyles.filter(p => prop.__getLayersFromStyle(p.style) !== null)[0];
+
+        if (parentItem) {
+          newValue = parentItem.style[name];
+          parentTarget = parentItem.target;
+          newLayers = prop.__getLayersFromStyle(parentItem.style);
+        }
+      } else if (!hasVal) {
         newValue = null;
         const parentItem = parentStyles.filter(p => propDef(p.style[name]))[0];
 
@@ -608,6 +614,7 @@ export default () => {
 
       prop.__setParentTarget(parentTarget);
       prop.__getFullValue() !== newValue && prop.upValue(newValue, { ...opts, __up: true });
+      isStack && prop.__setLayers(newLayers || []);
     },
 
     destroy() {
diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js
index 4b330de10..0cefc13fd 100644
--- a/src/style_manager/model/PropertyStack.js
+++ b/src/style_manager/model/PropertyStack.js
@@ -151,10 +151,10 @@ export default Property.extend({
     const props = this.getProperties();
     const nameProps = props.map(prop => prop.getName());
     const allNameProps = [name, ...nameProps];
-    const hasProps = allNameProps.some(prop => !isUndefined(style[prop]));
+    const hasProps = allNameProps.some(prop => !isUndefined(style[prop]) && style[prop] !== '');
 
     if (!hasProps) {
-      return [];
+      return null;
     } else {
       const sep = this.getLayerSeparator();
       const fromStyle = this.get('fromStyle');
diff --git a/test/specs/style_manager/model/Properties.js b/test/specs/style_manager/model/Properties.js
index 7737d4221..e798cfed5 100644
--- a/test/specs/style_manager/model/Properties.js
+++ b/test/specs/style_manager/model/Properties.js
@@ -163,6 +163,11 @@ describe('StyleManager properties logic', () => {
       ]);
     });
 
+    test('getLayersFromStyle with empty values', () => {
+      expect(compTypeProp.__getLayersFromStyle({ [propTest]: '' })).toBe(null);
+      expect(compTypeProp.__getLayersFromStyle({ color: 'red' })).toBe(null);
+    });
+
     test('Custom fromStyle', () => {
       compTypeProp.set('fromStyle', (style, { separatorLayers }) => {
         const layerValues = style[propTest].split(separatorLayers);
@@ -302,6 +307,22 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test('Get the values from parent style', () => {
+      const rule2 = cssc.addRules(`
+        @media (max-width: 992px) {
+            .cls { color: red; }
+        }
+      `)[0];
+      dv.select('tablet');
+      obj.__upSel();
+      expect(obj.getLastSelected()).toBe(rule2);
+      expect(obj.getSelectedParents()).toEqual([rule1]);
+
+      expect(compTypeProp.hasValue()).toBe(true);
+      expect(compTypeProp.hasValue({ noParent: true })).toBe(false);
+      expect(compTypeProp.getLayers().length).toBe(2);
+    });
+
     test('Adding new layer, updates the rule', () => {
       compTypeProp.addLayer(
         {