[improvement] Functional: ContactList, NavBar, Panel, SubmitBar, SwitchCell, Tag (#2675)

packages/submit-bar/index.js

@@ -1,63 +1,66 @@
-import { use } from '../utils';
+import { use, noop } from '../utils';
 import Button from '../button';
 
 const [sfc, bem, t] = use('submit-bar');
 
-export default sfc({
-  props: {
-    tip: String,
-    label: String,
-    loading: Boolean,
-    disabled: Boolean,
-    buttonText: String,
-    price: {
-      type: Number,
-      default: null
+export default sfc(
+  {
+    props: {
+      tip: String,
+      label: String,
+      loading: Boolean,
+      disabled: Boolean,
+      buttonText: String,
+      price: {
+        type: Number,
+        default: null
+      },
+      currency: {
+        type: String,
+        default: '¥'
+      },
+      buttonType: {
+        type: String,
+        default: 'danger'
+      }
     },
-    currency: {
-      type: String,
-      default: '¥'
-    },
-    buttonType: {
-      type: String,
-      default: 'danger'
+
+    render(h, context) {
+      const { props, listeners } = context;
+      const { tip, price } = props;
+      const slots = context.slots();
+      const hasPrice = typeof price === 'number';
+
+      return (
+        <div class={bem()} {...context.data}>
+          {slots.top}
+          {(slots.tip || tip) && (
+            <div class={bem('tip')}>
+              {tip}
+              {slots.tip}
+            </div>
+          )}
+          <div class={bem('bar')}>
+            {slots.default}
+            <div class={bem('text')}>
+              {hasPrice && [
+                <span>{props.label || t('label')}</span>,
+                <span class={bem('price')}>{`${props.currency} ${(price / 100).toFixed(2)}`}</span>
+              ]}
+            </div>
+            <Button
+              square
+              size="large"
+              type={props.buttonType}
+              loading={props.loading}
+              disabled={props.disabled}
+              text={props.loading ? '' : props.buttonText}
+              onClick={listeners.submit || noop}
+            />
+          </div>
+        </div>
+      );
     }
   },
-
-  render(h) {
-    const { tip, price, $slots } = this;
-    const hasPrice = typeof price === 'number';
-
-    return (
-      <div class={bem()}>
-        {$slots.top}
-        {($slots.tip || tip) && (
-          <div class={bem('tip')}>
-            {tip}
-            {$slots.tip}
-          </div>
-        )}
-        <div class={bem('bar')}>
-          {$slots.default}
-          <div class={bem('text')}>
-            {hasPrice && [
-              <span>{this.label || t('label')}</span>,
-              <span class={bem('price')}>{`${this.currency} ${(price / 100).toFixed(2)}`}</span>
-            ]}
-          </div>
-          <Button
-            square
-            size="large"
-            type={this.buttonType}
-            loading={this.loading}
-            disabled={this.disabled}
-            text={this.loading ? '' : this.buttonText}
-            onClick={() => {
-              this.$emit('submit');
-            }}
-          />
-        </div>
-      </div>
-    );
-  }
-});
+  true
+);

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`submit 1`] = `
+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>

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

@@ -2,10 +2,30 @@ import SubmitBar from '..';
 import { mount } from '../../../test/utils';
 
 test('submit', () => {
+  const submit = jest.fn();
   const wrapper = mount(SubmitBar, {
-    propsData: {
-      price: 0.01,
-      disabled: true
+    context: {
+      props: {
+        price: 0.01
+      },
+      on: { submit }
+    }
+  });
+
+  const button = wrapper.find('.van-button');
+  button.trigger('click');
+  expect(submit.mock.calls[0]).toBeTruthy();
+});
+
+test('disable submit', () => {
+  const submit = jest.fn();
+  const wrapper = mount(SubmitBar, {
+    context: {
+      props: {
+        price: 0.01,
+        disabled: true
+      },
+      on: { submit }
     }
   });
 
@@ -14,10 +34,5 @@ test('submit', () => {
   // disabled
   const button = wrapper.find('.van-button');
   button.trigger('click');
-  expect(wrapper.emitted('submit')).toBeFalsy();
-
-  // submit
-  wrapper.vm.disabled = false;
-  button.trigger('click');
-  expect(wrapper.emitted('submit')).toBeTruthy();
+  expect(submit.mock.calls[0]).toBeFalsy();
 });