Optimize the style wrapper

eea · Oct 8, 2020 · a113ac7 · a113ac7
1 parent 48ceafb
commit a113ac7
Showing 1 changed file with 32 additions and 20 deletions.
diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import cx from 'classnames';
 import { settings } from '~/config';
 
-export function getStyles(data) {
+export function getInlineStyles(data) {
   return {
-    backgroundColor: data.backgroundColor,
-    color: data.textColor,
-    textAlign: data.textAlign,
-    fontSize: data.fontSize,
+    ...(data.backgroundColor ? { backgroundColor: data.backgroundColor } : {}),
+    ...(data.textColor ? { color: data.textColor } : {}),
+    ...(data.textAlign ? { textAlign: data.textAlign } : {}),
+    ...(data.fontSize ? { fontSize: data.fontSize } : {}),
     // fill in more
   };
 }
@@ -21,23 +21,35 @@ export default (props) => {
   const { data = {}, children } = props;
   const { style_name, align, size } = data;
   const style = getStyle(style_name);
+  const inlineStyles = getInlineStyles(data);
   const ViewComponentWrapper = style?.viewComponent;
 
-  return (
-    <div
-      className={cx('block align', style?.cssClass, align)}
-      style={getStyles(data)}
-    >
-      <div
-        className={cx({
-          'full-width': align === 'full',
-          large: size === 'l',
-          medium: size === 'm',
-          small: size === 's',
-        })}
-      >
-        {ViewComponentWrapper ? <ViewComponentWrapper {...props} /> : children}
-      </div>
+  return Object.keys(inlineStyles).length > 0 || style || align || size ? (
+    <div className={cx(style?.cssClass, { align }, align)} style={inlineStyles}>
+      {size ? (
+        <div
+          className={cx({
+            'full-width': align === 'full',
+            large: size === 'l',
+            medium: size === 'm',
+            small: size === 's',
+          })}
+        >
+          {ViewComponentWrapper ? (
+            <ViewComponentWrapper {...props} />
+          ) : (
+            children
+          )}
+        </div>
+      ) : ViewComponentWrapper ? (
+        <ViewComponentWrapper {...props} />
+      ) : (
+        children
+      )}
     </div>
+  ) : ViewComponentWrapper ? (
+    <ViewComponentWrapper {...props} />
+  ) : (
+    children
   );
 };