chore(Cell): improve jsx segment

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);
+
+  function Label() {
     const showLabel = slots.label || isDef(label);
 
-  const Label = showLabel && (
+    if (showLabel) {
+      return (
         <div class={[bem('label'), props.labelClass]}>
           {slots.label ? slots.label() : label}
         </div>
       );
+    }
+  }
 
-  const Title = showTitle && (
+  function Title() {
+    if (showTitle) {
+      return (
         <div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
           {slots.title ? slots.title() : <span>{title}</span>}
-      {Label}
+          {Label()}
         </div>
       );
+    }
+  }
 
-  const Value = showValue && (
+  function Value() {
-    <div class={[bem('value', { alone: !slots.title && !title }), props.valueClass]}>
+    const showValue = slots.default || isDef(value);
+
+    if (showValue) {
+      return (
+        <div class={[bem('value', { alone: !showTitle }), props.valueClass]}>
           {slots.default ? slots.default() : <span>{value}</span>}
         </div>
       );
+    }
+  }
 
-  const LeftIcon = slots.icon
+  function LeftIcon() {
-    ? slots.icon()
+    if (slots.icon) {
-    : icon && <Icon class={bem('left-icon')} name={icon} />;
+      return slots.icon();
+    }
 
+    if (icon) {
+      return <Icon class={bem('left-icon')} name={icon} />;
+    }
+  }
+
+  function RightIcon() {
     const rightIconSlot = slots['right-icon'];
-  const RightIcon = rightIconSlot
+
-    ? rightIconSlot()
+    if (rightIconSlot) {
-    : isLink && (
+      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}
+      {LeftIcon()}
-      {Title}
+      {Title()}
-      {Value}
+      {Value()}
-      {RightIcon}
+      {RightIcon()}
-      {slots.extra && slots.extra()}
+      {slots.extra?.()}
     </div>
   );
 }