[improvement] Functional: button (#2676)

packages/button/index.js

@@ -3,65 +3,70 @@ import Loading from '../loading';
 
 const [sfc, bem] = use('button');
 
-export default sfc({
+export default sfc(
-  props: {
+  {
-    text: String,
+    props: {
-    block: Boolean,
+      text: String,
-    plain: Boolean,
+      block: Boolean,
-    round: Boolean,
+      plain: Boolean,
-    square: Boolean,
+      round: Boolean,
-    loading: Boolean,
+      square: Boolean,
-    disabled: Boolean,
+      loading: Boolean,
-    nativeType: String,
+      disabled: Boolean,
-    bottomAction: Boolean,
+      nativeType: String,
-    tag: {
+      bottomAction: Boolean,
-      type: String,
+      tag: {
-      default: 'button'
+        type: String,
-    },
+        default: 'button'
-    type: {
+      },
-      type: String,
+      type: {
-      default: 'default'
+        type: String,
-    },
+        default: 'default'
-    size: {
+      },
-      type: String,
+      size: {
-      default: 'normal'
+        type: String,
-    }
+        default: 'normal'
-  },
-
-  methods: {
-    onClick(event) {
-      if (!this.loading && !this.disabled) {
-        this.$emit('click', event);
       }
+    },
+
+    render(h, context, inherit) {
+      const { props, listeners } = context;
+      const { type, disabled, loading } = props;
+
+      const onClick = event => {
+        if (!loading && !disabled && listeners.click) {
+          listeners.click(event);
+        }
+      };
+
+      return (
+        <props.tag
+          type={props.nativeType}
+          disabled={disabled}
+          class={bem([
+            type,
+            props.size,
+            {
+              loading,
+              disabled,
+              block: props.block,
+              plain: props.plain,
+              round: props.round,
+              square: props.square,
+              'bottom-action': props.bottomAction
+            }
+          ])}
+          onClick={onClick}
+          {...inherit}
+        >
+          {loading ? (
+            <Loading size="20px" color={type === 'default' ? undefined : ''} />
+          ) : (
+            <span class={bem('text')}>{context.children || props.text}</span>
+          )}
+        </props.tag>
+      );
     }
   },
-
+  true
-  render(h) {
+);
-    return (
-      <this.tag
-        type={this.nativeType}
-        disabled={this.disabled}
-        class={bem([
-          this.type,
-          this.size,
-          {
-            block: this.block,
-            plain: this.plain,
-            round: this.round,
-            square: this.square,
-            loading: this.loading,
-            disabled: this.disabled,
-            'bottom-action': this.bottomAction
-          }
-        ])}
-        onClick={this.onClick}
-      >
-        {this.loading ? (
-          <Loading size="20px" color={this.type === 'default' ? undefined : ''} />
-        ) : (
-          <span class={bem('text')}>{this.$slots.default || this.text}</span>
-        )}
-      </this.tag>
-    );
-  }
-});

packages/contact-list/index.js

@@ -15,7 +15,7 @@ export default sfc(
       addText: String
     },
 
-    render(h, context) {
+    render(h, context, inherit) {
       const { props, listeners } = context;
 
       const List = props.list.map((item, index) => (
@@ -43,7 +43,7 @@ export default sfc(
       ));
 
       return (
-        <div class={bem()} {...context.data}>
+        <div class={bem()} {...inherit}>
           <RadioGroup value={props.value} class={bem('group')}>
             {List}
           </RadioGroup>

packages/nav-bar/index.js

@@ -21,7 +21,7 @@ export default sfc(
       }
     },
 
-    render(h, context) {
+    render(h, context, inherit) {
       const { props, listeners } = context;
       const slots = context.slots();
 
@@ -29,7 +29,7 @@ export default sfc(
         <div
           class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
           style={{ zIndex: props.zIndex }}
-          {...context.data}
+          {...inherit}
         >
           <div
             class={bem('left')}

packages/submit-bar/index.js

@@ -25,14 +25,14 @@ export default sfc(
       }
     },
 
-    render(h, context) {
+    render(h, context, inherit) {
       const { props, listeners } = context;
       const { tip, price } = props;
       const slots = context.slots();
       const hasPrice = typeof price === 'number';
 
       return (
-        <div class={bem()} {...context.data}>
+        <div class={bem()} {...inherit}>
           {slots.top}
           {(slots.tip || tip) && (
             <div class={bem('tip')}>

packages/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -13,14 +13,14 @@ exports[`renders demo correctly 1`] = `
     <div class="van-submit-bar">
       <div class="van-submit-bar__tip">你的收货地址不支持同城送, 我们已为你推荐快递</div>
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled"><span class="van-button__text">提交订单</span></button>
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
   <div>
     <div class="van-submit-bar">
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--square van-button--loading">
+        <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 30.50</span></div><button class="van-button van-button--danger van-button--large van-button--loading van-button--square">
           <div class="van-loading van-loading--circular van-loading" style="color:;width:20px;height:20px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
         </button>
       </div>

packages/submit-bar/test/__snapshots__/index.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`disable submit 1`] = `
 <div class="van-submit-bar">
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.00</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled"><span class="van-button__text"></span></button>
+    <div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥ 0.00</span></div><button disabled="disabled" class="van-button van-button--danger van-button--large van-button--disabled van-button--square"><span class="van-button__text"></span></button>
   </div>
 </div>
 `;

packages/switch-cell/index.js

@@ -18,7 +18,7 @@ export default sfc(
       }
     },
 
-    render(h, context) {
+    render(h, context, inherit) {
       const { props } = context;
 
       return (
@@ -26,8 +26,8 @@ export default sfc(
           center
           title={props.title}
           border={props.border}
-          style={context.style}
+          class={bem()}
-          class={[bem(), context.class, context.staticClass]}
+          {...inherit}
         >
           <Switch {...{ props, on: context.listeners }} />
         </Cell>

packages/utils/use/sfc.js

@@ -27,10 +27,21 @@ function defaultProps(props) {
 function install(Vue) {
   const { name } = this;
   Vue.component(name, this);
-  Vue.component((camelize(`-${name}`)), this);
+  Vue.component(camelize(`-${name}`), this);
 }
 
-export default name => (sfc, functional) => {
+function functional(sfc) {
+  const { render } = sfc;
+  sfc.functional = true;
+  sfc.render = (h, context) =>
+    render(h, context, {
+      style: context.data.style,
+      class: context.data.class,
+      staticClass: context.data.staticClass
+    });
+}
+
+export default name => (sfc, isFunctional) => {
   sfc.name = name;
   sfc.install = install;
 
@@ -38,8 +49,8 @@ export default name => (sfc, functional) => {
     defaultProps(sfc.props);
   }
 
-  if (functional) {
+  if (isFunctional) {
-    sfc.functional = true;
+    functional(sfc);
   }
 
   return sfc;