Add getStyleFromProps to Composite type

src/style_manager/model/PropertyComposite.js

@@ -76,53 +76,56 @@ export default Property.extend({
     return Property.prototype.__upTargetsStyle.call(this, newStyle, opts);
   },
 
-  __getFullValue(opts = {}) {
-    if (this.isDetached() || opts.__clear) {
-      return '';
-    }
-
-    return this.getProperties()
-      .map(p => p.__getFullValue({ withDefault: 1 }))
-      .filter(Boolean)
-      .join(this.__getJoin());
-  },
-
-  __getJoin() {
-    const join = this.get('join');
-    return isString(join) ? join : this.get('separator');
-  },
-
-  // TODO remove
-  __getFromStyle(style = {}) {
-    let result = {};
-    const fromStyle = this.get('fromStyle');
-    const sep = this.getSplitSeparator();
+  /**
+   * Get style object from current properties
+   * @returns {Object} Style object
+   */
+  getStyleFromProps(opts = {}) {
     const name = this.getName();
+    const join = this.__getJoin();
+    const toStyle = this.get('toStyle');
+    let values = this.getValues();
+    let style = {};
 
-    if (fromStyle) {
-      result = fromStyle(style, { property: this, separator: sep });
+    if (toStyle) {
+      style = toStyle(values, { join, name, property: this });
     } else {
-      const value = style[name];
-      if (value) {
-        const values = value.split(sep);
-        this.getProperties().forEach((prop, i) => {
-          const len = values.length;
-          // Try to get value from a shorthand:
-          // 11px -> 11px 11px 11px 11xp
-          // 11px 22px -> 11px 22px 11px 22xp
-          const value = values[i] || values[(i % len) + (len != 1 && len % 2 ? 1 : 0)];
-          result[prop.getId()] = value || '';
-        });
-        result = {
-          ...result,
-          ...style,
-        };
+      values = this.getValues({ byName: true });
+
+      if (this.isDetached()) {
+        style = { [name]: '', ...values };
       } else {
-        result = style;
+        const value = this.getProperties()
+          .map(p => p.__getFullValue({ withDefault: 1 }))
+          .filter(Boolean)
+          .join(join);
+        style = {
+          [name]: value,
+          ...Object.keys(values).reduce((acc, prop) => {
+            acc[prop] = '';
+            return acc;
+          }, {}),
+        };
       }
     }
 
-    return result;
+    return opts.camelCase
+      ? Object.keys(style).reduce((res, key) => {
+          res[camelCase(key)] = style[key];
+          return res;
+        }, {})
+      : style;
+  },
+
+  __getFullValue(opts = {}) {
+    if (this.isDetached() || opts.__clear) return '';
+
+    return this.getStyleFromProps()[this.getName()] || '';
+  },
+
+  __getJoin() {
+    const join = this.get('join');
+    return isString(join) ? join : this.get('separator');
   },
 
   __styleHasProps(style = {}) {

test/specs/style_manager/model/Properties.js

@@ -152,6 +152,26 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test('getStyleFromProps', () => {
+      rule1.setStyle({ padding: '1px 2px 3px 4px' });
+      obj.__upSel();
+      expect(compTypeProp.getStyleFromProps()).toEqual({
+        [propTest]: '',
+        [propATest]: '1px',
+        [propBTest]: '2px',
+        [propCTest]: '3px',
+        [propDTest]: '4px',
+      });
+      compTypeProp.set('detached', false);
+      expect(compTypeProp.getStyleFromProps()).toEqual({
+        [propTest]: '1px 2px 3px 4px',
+        [propATest]: '',
+        [propBTest]: '',
+        [propCTest]: '',
+        [propDTest]: '',
+      });
+    });
+
     test('Update on properties reflects to the rule correctly', () => {
       compTypeProp.set('detached', false);
       rule1.setStyle({ padding: '1px 2px 3px 4px' });