@zohodesk/utils/es/combineCustomStyle.js

DOT Utils Collection

const REPLACER_SYMBOL = "$";
/**
 * 
 * if two is same ==> do the think if replace do, if append do.
 * replace vs append ==> append 
 * append vs replace ==> replace  
 * @param {*} style1
 * @param {*} style2 
 * @returns 
 */

export default function combineCustomStyle(style1, style2) {
  let resultStyle = { ...style1
  };
  Object.keys(style2).forEach(styleName => {
    let oldStyleName = style1[`$${styleName}`] ? `$${styleName}` : styleName;

    if (oldStyleName.startsWith(REPLACER_SYMBOL) && styleName.startsWith(REPLACER_SYMBOL)) {
      resultStyle[styleName] = style2[styleName];
    } else if (!oldStyleName.startsWith(REPLACER_SYMBOL) && !styleName.startsWith(REPLACER_SYMBOL)) {
      resultStyle[styleName] = `${resultStyle[styleName]} ${style2[styleName]}`;
    } else {
      delete resultStyle[oldStyleName];
      resultStyle[styleName] = style2[styleName];
    }
    /*else if (oldStyleName.startsWith(REPLACER_SYMBOL) && !styleName.startsWith(REPLACER_SYMBOL)  ) {
     
      delete resultStyle[oldStyleName];
      resultStyle[styleName] = style2[styleName];
       }
    else if (!oldStyleName.startsWith(REPLACER_SYMBOL) && styleName.startsWith(REPLACER_SYMBOL)  ) {
      
      delete resultStyle[oldStyleName];
      resultStyle[styleName] = style2[styleName];
     }*/

  });
  return resultStyle;
}