[improvement] Row: jsx (#2620)

packages/row/index.js

@@ -0,0 +1,39 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('row');
+
+export default sfc({
+  props: {
+    type: String,
+    align: String,
+    justify: String,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    gutter: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+
+  render(h) {
+    const { align, justify } = this;
+    const flex = this.type === 'flex';
+    const margin = `-${Number(this.gutter) / 2}px`;
+    const style = this.gutter ? { marginLeft: margin, marginRight: margin } : {};
+
+    return (
+      <this.tag
+        style={style}
+        class={bem({
+          flex,
+          [`align-${align}`]: flex && align,
+          [`justify-${justify}`]: flex && justify
+        })}
+      >
+        {this.$slots.default}
+      </this.tag>
+    );
+  }
+});

packages/row/index.vue

@@ -1,48 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    :class="b({
-      flex,
-      [`align-${align}`]: flex && align,
-      [`justify-${justify}`]: flex && justify
-    })"
-    :style="style"
-  >
-    <slot />
-  </component>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'row',
-
-  props: {
-    type: String,
-    align: String,
-    justify: String,
-    tag: {
-      type: String,
-      default: 'div'
-    },
-    gutter: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-
-  computed: {
-    flex() {
-      return this.type === 'flex';
-    },
-
-    style() {
-      const margin = `-${Number(this.gutter) / 2}px`;
-      return this.gutter
-        ? { marginLeft: margin, marginRight: margin }
-        : {};
-    }
-  }
-});
-</script>