Refactor upProp

src/style_manager/index.js

@@ -571,16 +571,6 @@ export default () => {
       sectors.map(sector => {
         sector.getProperties().map(prop => {
           this.__upProp(prop, style, parentStyles, opts);
-          const props = prop.getProperties?.();
-
-          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));
-          }
         });
       });
     },
@@ -596,17 +586,23 @@ export default () => {
       const isStack = prop.getType() === 'stack';
       const isComposite = prop.getType() === 'composite';
       let newLayers = isStack ? prop.__getLayersFromStyle(style) : [];
-      // let newProps = isComposite ? prop.__getPropsFromStyle(style) : {};
+      let newProps = isComposite ? prop.__getPropsFromStyle(style) : {};
       let newValue = hasVal ? value : null;
       let parentTarget = null;
 
-      if (isStack && newLayers === null) {
-        const parentItem = parentStyles.filter(p => prop.__getLayersFromStyle(p.style) !== null)[0];
+      if ((isStack && newLayers === null) || (isComposite && newProps === null)) {
+        const method = isStack ? '__getLayersFromStyle' : '__getPropsFromStyle';
+        const parentItem = parentStyles.filter(p => prop[method](p.style) !== null)[0];
 
         if (parentItem) {
           newValue = parentItem.style[name];
           parentTarget = parentItem.target;
-          newLayers = prop.__getLayersFromStyle(parentItem.style);
+          const val = prop[method](parentItem.style);
+          if (isStack) {
+            newLayers = val;
+          } else {
+            newProps = val;
+          }
         }
       } else if (!hasVal) {
         newValue = null;
@@ -621,6 +617,7 @@ export default () => {
       prop.__setParentTarget(parentTarget);
       prop.__getFullValue() !== newValue && prop.upValue(newValue, { ...opts, __up: true });
       isStack && prop.__setLayers(newLayers || []);
+      isComposite && prop.__setProperties(newProps || {});
     },
 
     destroy() {

src/style_manager/model/PropertyComposite.js

@@ -178,6 +178,13 @@ export default Property.extend({
     return result;
   },
 
+  __setProperties(values = {}, opts = {}) {
+    this.getProperties().forEach(prop => {
+      const value = values[prop.getId()];
+      !isUndefined(value) && prop.upValue(value, { ...opts, __up: true });
+    });
+  },
+
   clear() {
     this.getProperties().map(p => p.clear({ __clearIn: !this.isDetached() }));
     return Property.prototype.clear.call(this);

src/style_manager/model/PropertyStack.js

@@ -127,12 +127,6 @@ export default Property.extend({
         }, {});
   },
 
-  __getFromStyle(style = {}) {
-    const fromStyle = this.get('fromStyle');
-
-    return fromStyle ? fromStyle(style) : style;
-  },
-
   __getLayersFromStyle(style = {}) {
     if (!this.__styleHasProps(style)) return null;
 

test/specs/style_manager/model/Properties.js

@@ -134,6 +134,24 @@ describe('StyleManager properties logic', () => {
       expect(compTypeProp.__getPropsFromStyle({ color: 'red' })).toEqual(null);
     });
 
+    test('Custom fromStyle', () => {
+      compTypeProp.set('fromStyle', (style, { separator }) => {
+        const values = style[propTest].split(separator);
+        return {
+          [propATest]: values[0],
+          [propBTest]: values[1],
+        };
+      });
+      expect(
+        compTypeProp.__getPropsFromStyle({
+          [propTest]: 'rgba(valueA 1) rgba(value B)',
+        })
+      ).toEqual({
+        [propATest]: 'rgba(valueA 1)',
+        [propBTest]: 'rgba(value B)',
+      });
+    });
+
     test('Update on properties reflects to the rule correctly', () => {
       compTypeProp.set('detached', false);
       rule1.setStyle({ padding: '1px 2px 3px 4px' });