feat: 优化文本模式在竖型模式下样式问题 (#662)

Tencent · Apr 21, 2022 · 213c67d · 213c67d
1 parent dd7e34d
commit 213c67d
Showing 1 changed file with 7 additions and 11 deletions.
diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx
@@ -30,24 +30,20 @@ const Divider = (props: DividerProps) => {
   } = props;
 
   const { classPrefix } = useConfig();
-  const hasChildren = typeof children !== 'undefined';
-  const hasContent = typeof content !== 'undefined';
-  let childrenNode = children;
+  const childrenNode = content || children;
+
+  const showText = layout !== 'vertical' && !!childrenNode;
 
-  if (!hasChildren && hasContent) {
-    childrenNode = content;
-  }
   const dividerClassNames = classNames(`${classPrefix}-divider`, className, {
-    [`${classPrefix}-divider--horizontal`]: layout === 'horizontal',
-    [`${classPrefix}-divider--vertical`]: layout === 'vertical',
+    [`${classPrefix}-divider--${layout}`]: layout,
     [`${classPrefix}-divider--dashed`]: !!dashed,
-    [`${classPrefix}-divider--with-text`]: !!childrenNode,
-    [`${classPrefix}-divider--with-text-${align}`]: !!childrenNode,
+    [`${classPrefix}-divider--with-text`]: showText,
+    [`${classPrefix}-divider--with-text-${align}`]: showText,
   });
 
   return (
     <div {...otherDividerProps} className={dividerClassNames} style={style}>
-      {childrenNode ? <span className={`${classPrefix}-divider__inner-text`}>{childrenNode}</span> : null}
+      {showText ? <span className={`${classPrefix}-divider__inner-text`}>{childrenNode}</span> : null}
     </div>
   );
 };