[improvement] Functional components be just functions (#2735)

packages/nav-bar/index.js

@@ -4,46 +4,56 @@ import Icon from '../icon';
 
 const [sfc, bem] = use('nav-bar');
 
-export default sfc({
-  functional: true,
-
-  props: {
-    title: String,
-    fixed: Boolean,
-    leftText: String,
-    rightText: String,
-    leftArrow: Boolean,
-    border: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    }
-  },
-
-  render(h, context) {
-    const { props, listeners } = context;
-    const slots = context.slots();
-
-    return (
-      <div
-        class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
-        style={{ zIndex: props.zIndex }}
-        {...inherit(context)}
-      >
-        <div class={bem('left')} onClick={listeners['click-left'] || noop}>
-          {slots.left || [
-            props.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
-            props.leftText && <span class={bem('text')}>{props.leftText}</span>
+function NavBar(h, props, slots, ctx) {
+  return (
+    <div
+      class={[
+        bem({ fixed: props.fixed }),
+        { 'van-hairline--bottom': props.border }
+      ]}
+      style={{ zIndex: props.zIndex }}
+      {...inherit(ctx)}
+    >
+      <div class={bem('left')} onClick={ctx.listeners['click-left'] || noop}>
+        {slots.left
+          ? slots.left()
+          : [
+            props.leftArrow && (
+              <Icon class={bem('arrow')} name="arrow-left" />
+            ),
+            props.leftText && (
+              <span class={bem('text')}>{props.leftText}</span>
+            )
           ]}
-        </div>
-        <div class={[bem('title'), 'van-ellipsis']}>{slots.title || props.title}</div>
-        <div class={bem('right')} onClick={listeners['click-right'] || noop}>
-          {slots.right || (props.rightText && <span class={bem('text')}>{props.rightText}</span>)}
-        </div>
       </div>
-    );
+      <div class={[bem('title'), 'van-ellipsis']}>
+        {slots.title ? slots.title() : props.title}
+      </div>
+      <div class={bem('right')} onClick={ctx.listeners['click-right'] || noop}>
+        {slots.right
+          ? slots.right()
+          : props.rightText && (
+              <span class={bem('text')}>{props.rightText}</span>
+          )}
+      </div>
+    </div>
+  );
+}
+
+NavBar.props = {
+  title: String,
+  fixed: Boolean,
+  leftText: String,
+  rightText: String,
+  leftArrow: Boolean,
+  border: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: 1
   }
-});
+};
+
+export default sfc(NavBar);