From 9c6ae2c28b8e5bc228dee765449c3ded3c305da9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 16 Dec 2019 11:45:28 +0800
Subject: [PATCH] chore(Cell): improve jsx segment

---
 src/cell/index.tsx | 95 ++++++++++++++++++++++++++++++----------------
 1 file changed, 62 insertions(+), 33 deletions(-)

diff --git a/src/cell/index.tsx b/src/cell/index.tsx
index 01d660391..78a512e7d 100644
--- a/src/cell/index.tsx
+++ b/src/cell/index.tsx
@@ -31,44 +31,72 @@ function Cell(
   slots: CellSlots,
   ctx: RenderContext<CellProps>
 ) {
-  const { icon, size, title, label, value, isLink, arrowDirection } = props;
-
+  const { icon, size, title, label, value, isLink } = props;
   const showTitle = slots.title || isDef(title);
-  const showValue = slots.default || isDef(value);
-  const showLabel = slots.label || isDef(label);
 
-  const Label = showLabel && (
-    <div class={[bem('label'), props.labelClass]}>
-      {slots.label ? slots.label() : label}
-    </div>
-  );
+  function Label() {
+    const showLabel = slots.label || isDef(label);
 
-  const Title = showTitle && (
-    <div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
-      {slots.title ? slots.title() : <span>{title}</span>}
-      {Label}
-    </div>
-  );
+    if (showLabel) {
+      return (
+        <div class={[bem('label'), props.labelClass]}>
+          {slots.label ? slots.label() : label}
+        </div>
+      );
+    }
+  }
 
-  const Value = showValue && (
-    <div class={[bem('value', { alone: !slots.title && !title }), props.valueClass]}>
-      {slots.default ? slots.default() : <span>{value}</span>}
-    </div>
-  );
+  function Title() {
+    if (showTitle) {
+      return (
+        <div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
+          {slots.title ? slots.title() : <span>{title}</span>}
+          {Label()}
+        </div>
+      );
+    }
+  }
 
-  const LeftIcon = slots.icon
-    ? slots.icon()
-    : icon && <Icon class={bem('left-icon')} name={icon} />;
+  function Value() {
+    const showValue = slots.default || isDef(value);
 
-  const rightIconSlot = slots['right-icon'];
-  const RightIcon = rightIconSlot
-    ? rightIconSlot()
-    : isLink && (
+    if (showValue) {
+      return (
+        <div class={[bem('value', { alone: !showTitle }), props.valueClass]}>
+          {slots.default ? slots.default() : <span>{value}</span>}
+        </div>
+      );
+    }
+  }
+
+  function LeftIcon() {
+    if (slots.icon) {
+      return slots.icon();
+    }
+
+    if (icon) {
+      return <Icon class={bem('left-icon')} name={icon} />;
+    }
+  }
+
+  function RightIcon() {
+    const rightIconSlot = slots['right-icon'];
+
+    if (rightIconSlot) {
+      return rightIconSlot();
+    }
+
+    if (isLink) {
+      const { arrowDirection } = props;
+
+      return (
         <Icon
           class={bem('right-icon')}
           name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
         />
-    );
+      );
+    }
+  }
 
   function onClick(event: Event) {
     emit(ctx, 'click', event);
@@ -76,6 +104,7 @@ function Cell(
   }
 
   const clickable = isLink || props.clickable;
+
   const classes: Mods = {
     clickable,
     center: props.center,
@@ -95,11 +124,11 @@ function Cell(
       onClick={onClick}
       {...inherit(ctx)}
     >
-      {LeftIcon}
-      {Title}
-      {Value}
-      {RightIcon}
-      {slots.extra && slots.extra()}
+      {LeftIcon()}
+      {Title()}
+      {Value()}
+      {RightIcon()}
+      {slots.extra?.()}
     </div>
   );
 }