[improvement] Cell: jsx (#2461)

2019-01-07 21:52:46 +08:00
parent dd20a170ab
commit 5f9a4cf479
19 changed files with 200 additions and 315 deletions
@@ -0,0 +1,75 @@
+import { use, isDef } from '../utils';
+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],
+
+  props: {
+    size: String,
+    clickable: Boolean,
+    arrowDirection: String
+  },
+
+  computed: {
+    arrowIcon() {
+      return this.arrowDirection ? `arrow-${this.arrowDirection}` : 'arrow';
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+      this.routerLink();
+    }
+  },
+
+  render(h) {
+    const slots = this.$slots;
+    const showTitle = slots.title || isDef(this.title);
+    const showValue = slots.default || isDef(this.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>
+    );
+
+    const Value = showValue && (
+      <div class={[bem('value', { alone: !slots.title && !this.title }), this.valueClass]}>
+        {slots.default || <span>{this.value}</span>}
+      </div>
+    );
+
+    const LeftIcon = slots.icon || (
+      this.icon && <Icon class={bem('left-icon')} name={this.icon} />
+    );
+
+    const RightIcon = slots['right-icon'] || (
+      this.isLink && <Icon class={bem('right-icon')} name={this.arrowIcon} />
+    );
+
+    return (
+      <div
+        class={bem({
+          center: this.center,
+          required: this.required,
+          borderless: !this.border,
+          clickable: this.isLink || this.clickable,
+          [this.size]: this.size
+        })}
+        onClick={this.onClick}
+      >
+        {LeftIcon}
+        {Title}
+        {Value}
+        {RightIcon}
+        {slots.extra}
+      </div>
+    );
+  }
+});