[improvement] Cell: functional (#2729)

packages/cell/index.js

@@ -1,69 +1,83 @@
 import { use, isDef } from '../utils';
+import { cellProps } from './shared';
+import { emit, inherit, unifySlots } from '../utils/functional';
+import { routeProps, functionalRoute } from '../mixins/router-link';
 import Icon from '../icon';
-import CellMixin from '../mixins/cell';
-import RouterLink from '../mixins/router-link';
 
 const [sfc, bem] = use('cell');
 
 export default sfc({
-  mixins: [CellMixin, RouterLink],
+  functional: true,
 
   props: {
+    ...cellProps,
+    ...routeProps,
     size: String,
     clickable: Boolean,
     arrowDirection: String
   },
 
-  methods: {
-    onClick() {
-      this.$emit('click');
-      this.routerLink();
-    }
-  },
+  render(h, context) {
+    const slots = unifySlots(context);
+    const { props } = context;
+    const { icon, size, title, label, value, isLink, arrowDirection } = props;
 
-  render(h) {
-    const { slots } = this;
-    const showTitle = slots('title') || isDef(this.title);
-    const showValue = slots() || isDef(this.value);
+    const showTitle = slots.title || isDef(title);
+    const showValue = slots.default || isDef(value);
 
     const Title = showTitle && (
-      <div class={[bem('title'), this.titleClass]}>
-        {slots('title') || <span>{this.title}</span>}
-        {this.label && <div class={[bem('label'), this.labelClass]}>{this.label}</div>}
+      <div class={[bem('title'), props.titleClass]}>
+        {slots.title ? slots.title() : <span>{title}</span>}
+        {label && <div class={[bem('label'), props.labelClass]}>{label}</div>}
       </div>
     );
 
     const Value = showValue && (
-      <div class={[bem('value', { alone: !slots('title') && !this.title }), this.valueClass]}>
-        {slots() || <span>{this.value}</span>}
+      <div
+        class={[
+          bem('value', { alone: !slots.title && !title }),
+          props.valueClass
+        ]}
+      >
+        {slots.default ? slots.default() : <span>{value}</span>}
       </div>
     );
 
-    const LeftIcon = slots('icon') || (
-      this.icon && <Icon class={bem('left-icon')} name={this.icon} />
-    );
+    const LeftIcon = slots.icon
+      ? slots.icon()
+      : icon && <Icon class={bem('left-icon')} name={icon} />;
 
-    const arrowIcon = this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
-    const RightIcon = slots('right-icon') || (
-      this.isLink && <Icon class={bem('right-icon')} name={arrowIcon} />
-    );
+    const RightIcon = slots['right-icon']
+      ? slots['right-icon']()
+      : isLink && (
+          <Icon
+            class={bem('right-icon')}
+            name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
+          />
+      );
+
+    const onClick = event => {
+      emit(context, 'click', event);
+      functionalRoute(context);
+    };
 
     return (
       <div
         class={bem({
-          center: this.center,
-          required: this.required,
-          borderless: !this.border,
-          clickable: this.isLink || this.clickable,
-          [this.size]: this.size
+          center: props.center,
+          required: props.required,
+          borderless: !props.border,
+          clickable: isLink || props.clickable,
+          [size]: size
         })}
-        onClick={this.onClick}
+        onClick={onClick}
+        {...inherit(context)}
       >
         {LeftIcon}
         {Title}
         {Value}
         {RightIcon}
-        {slots('extra')}
+        {slots.extra && slots.extra()}
       </div>
     );
   }