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

packages/contact-list/index.js

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { use, noop } from '../utils';
 import Icon from '../icon';
 import Cell from '../cell';
 import Button from '../button';
@@ -7,55 +7,57 @@ import RadioGroup from '../radio-group';
 
 const [sfc, bem, t] = use('contact-list');
 
-export default sfc({
+export default sfc(
+  {
     props: {
       value: null,
       list: Array,
       addText: String
     },
 
-  render(h) {
+    render(h, context) {
-    return (
+      const { props, listeners } = context;
-      <div class={bem()}>
+
-        <RadioGroup
+      const List = props.list.map((item, index) => (
-          value={this.value}
+        <Cell
-          class={bem('group')}
+          key={item.id}
-          onInput={event => {
+          isLink
-            this.$emit('input', event);
-          }}
-        >
-          {this.list.map((item, index) => (
-            <Cell key={item.id} isLink>
-              <Radio
-                name={item.id}
           onClick={() => {
-                  this.$emit('select', item, index);
+            listeners.input && listeners.input(item.id);
+            listeners.select && listeners.select(item, index);
           }}
         >
+          <Radio name={item.id}>
             <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
           </Radio>
           <Icon
             slot="right-icon"
             name="edit"
             class={bem('edit')}
-                onClick={() => {
+            onClick={event => {
-                  this.$emit('edit', item, index);
+              event.stopPropagation();
+              listeners.edit && listeners.edit(item, index);
             }}
           />
         </Cell>
-          ))}
+      ));
+
+      return (
+        <div class={bem()} {...context.data}>
+          <RadioGroup value={props.value} class={bem('group')}>
+            {List}
           </RadioGroup>
           <Button
             square
             size="large"
             type="danger"
             class={bem('add')}
-          text={this.addText || t('addText')}
+            text={props.addText || t('addText')}
-          onClick={() => {
+            onClick={listeners.add || noop}
-            this.$emit('add');
-          }}
           />
         </div>
       );
     }
-});
+  },
+  true
+);

packages/contact-list/index.less

@@ -19,16 +19,24 @@
     margin-left: 27px;
   }
 
-  .van-radio__input {
+  .van-radio__icon {
     top: 50%;
     left: 0;
-    font-size: 16px;
+    height: 16px;
     position: absolute;
+    line-height: 16px;
     transform: translate(0, -50%);
+
+    .van-icon {
+      width: 16px;
+      height: 16px;
+      font-size: 12px;
+    }
   }
 
-  .van-icon-checked {
+  .van-radio__icon--checked .van-icon {
-    color: @red;
+    border-color: @red;
+    background-color: @red;
   }
 
   &__group {

packages/nav-bar/index.js

@@ -1,9 +1,10 @@
-import { use } from '../utils';
+import { use, noop } from '../utils';
 import Icon from '../icon';
 
 const [sfc, bem] = use('nav-bar');
 
-export default sfc({
+export default sfc(
+  {
     props: {
       title: String,
       fixed: Boolean,
@@ -20,34 +21,35 @@ export default sfc({
       }
     },
 
-  render(h) {
+    render(h, context) {
+      const { props, listeners } = context;
+      const slots = context.slots();
+
       return (
         <div
-        class={[bem({ fixed: this.fixed }), { 'van-hairline--bottom': this.border }]}
+          class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
-        style={{ zIndex: this.zIndex }}
+          style={{ zIndex: props.zIndex }}
+          {...context.data}
         >
           <div
             class={bem('left')}
-          onClick={() => {
+            onClick={listeners['click-left'] || noop}
-            this.$emit('click-left');
-          }}
           >
-          {this.$slots.left || [
+            {slots.left || [
-            this.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
+              props.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
-            this.leftText && <span class={bem('text')}>{this.leftText}</span>
+              props.leftText && <span class={bem('text')}>{props.leftText}</span>
             ]}
           </div>
-        <div class={[bem('title'), 'van-ellipsis']}>{this.$slots.title || this.title}</div>
+          <div class={[bem('title'), 'van-ellipsis']}>{slots.title || props.title}</div>
           <div
             class={bem('right')}
-          onClick={() => {
+            onClick={listeners['click-right'] || noop}
-            this.$emit('click-right');
-          }}
           >
-          {this.$slots.right ||
+            {slots.right || (props.rightText && <span class={bem('text')}>{props.rightText}</span>)}
-            (this.rightText && <span class={bem('text')}>{this.rightText}</span>)}
           </div>
         </div>
       );
     }
-});
+  },
+  true
+);

packages/panel/index.js

@@ -4,7 +4,8 @@ import CellGroup from '../cell-group';
 
 const [sfc, bem] = use('panel');
 
-export default sfc({
+export default sfc(
+  {
     props: {
       icon: String,
       desc: String,
@@ -12,18 +13,19 @@ export default sfc({
       status: String
     },
 
-  render(h) {
+    render(h, context) {
-    const slots = this.$slots;
+      const { props } = context;
+      const slots = context.slots();
 
       return (
-      <CellGroup class={bem()}>
+        <CellGroup class={bem()} {...context.data}>
           {slots.header || (
             <Cell
               class={bem('header')}
-            icon={this.icon}
+              icon={props.icon}
-            label={this.desc}
+              label={props.desc}
-            title={this.title}
+              title={props.title}
-            value={this.status}
+              value={props.status}
             />
           )}
           <div class={bem('content')}>{slots.default}</div>
@@ -31,4 +33,6 @@ export default sfc({
         </CellGroup>
       );
     }
-});
+  },
+  true
+);

packages/submit-bar/index.js

@@ -1,9 +1,10 @@
-import { use } from '../utils';
+import { use, noop } from '../utils';
 import Button from '../button';
 
 const [sfc, bem, t] = use('submit-bar');
 
-export default sfc({
+export default sfc(
+  {
     props: {
       tip: String,
       label: String,
@@ -24,40 +25,42 @@ export default sfc({
       }
     },
 
-  render(h) {
+    render(h, context) {
-    const { tip, price, $slots } = this;
+      const { props, listeners } = context;
+      const { tip, price } = props;
+      const slots = context.slots();
       const hasPrice = typeof price === 'number';
 
       return (
-      <div class={bem()}>
+        <div class={bem()} {...context.data}>
-        {$slots.top}
+          {slots.top}
-        {($slots.tip || tip) && (
+          {(slots.tip || tip) && (
             <div class={bem('tip')}>
               {tip}
-            {$slots.tip}
+              {slots.tip}
             </div>
           )}
           <div class={bem('bar')}>
-          {$slots.default}
+            {slots.default}
             <div class={bem('text')}>
               {hasPrice && [
-              <span>{this.label || t('label')}</span>,
+                <span>{props.label || t('label')}</span>,
-              <span class={bem('price')}>{`${this.currency} ${(price / 100).toFixed(2)}`}</span>
+                <span class={bem('price')}>{`${props.currency} ${(price / 100).toFixed(2)}`}</span>
               ]}
             </div>
             <Button
               square
               size="large"
-            type={this.buttonType}
+              type={props.buttonType}
-            loading={this.loading}
+              loading={props.loading}
-            disabled={this.disabled}
+              disabled={props.disabled}
-            text={this.loading ? '' : this.buttonText}
+              text={props.loading ? '' : props.buttonText}
-            onClick={() => {
+              onClick={listeners.submit || noop}
-              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: {
+    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();
+  expect(submit.mock.calls[0]).toBeFalsy();
-
-  // submit
-  wrapper.vm.disabled = false;
-  button.trigger('click');
-  expect(wrapper.emitted('submit')).toBeTruthy();
 });

packages/switch-cell/index.js

@@ -5,7 +5,8 @@ import SwitchMixin from '../mixins/switch';
 
 const [sfc, bem] = use('switch-cell');
 
-export default sfc({
+export default sfc(
+  {
     mixins: [SwitchMixin],
 
     props: {
@@ -17,22 +18,21 @@ export default sfc({
       }
     },
 
-  watch: {
+    render(h, context) {
-    value() {
+      const { props } = context;
-      this.$emit('change', this.value);
-    }
-  },
 
-  render(h) {
       return (
-      <Cell center title={this.title} border={this.border} class={bem()}>
+        <Cell
-        <Switch
+          center
-          {...{ props: this.$props }}
+          title={props.title}
-          onInput={value => {
+          border={props.border}
-            this.$emit('input', value);
+          style={context.style}
-          }}
+          class={[bem(), context.class, context.staticClass]}
-        />
+        >
+          <Switch {...{ props, on: context.listeners }} />
         </Cell>
       );
     }
-});
+  },
+  true
+);

packages/switch-cell/test/index.spec.js

@@ -1,13 +1,20 @@
 import SwitchCell from '..';
 import { mount } from '../../../test/utils';
 
-test('emit event', () => {
+test('change event', () => {
-  const wrapper = mount(SwitchCell);
+  const onChange = jest.fn();
+  const wrapper = mount(SwitchCell, {
+    context: {
+      on: {
+        change: onChange
+      }
+    }
+  });
 
   wrapper.vm.$on('input', value => {
     wrapper.setProps({ value });
   });
   wrapper.find('.van-switch').trigger('click');
 
-  expect(wrapper.emitted('change')).toBeTruthy();
+  expect(onChange.mock.calls[0]).toBeTruthy();
 });

packages/tag/index.js

@@ -9,7 +9,8 @@ const COLOR_MAP = {
   success: GREEN
 };
 
-export default sfc({
+export default sfc(
+  {
     props: {
       size: String,
       type: String,
@@ -20,40 +21,33 @@ export default sfc({
       textColor: String
     },
 
-  computed: {
+    render(h, context) {
-    style() {
+      const { props } = context;
-      const color = this.color || COLOR_MAP[this.type] || GRAY_DARK;
+      const { mark, plain, round, size } = context.props;
-      const key = this.plain ? 'color' : 'backgroundColor';
+
+      const color = props.color || COLOR_MAP[props.type] || GRAY_DARK;
+      const key = plain ? 'color' : 'backgroundColor';
       const style = { [key]: color };
 
-      if (this.textColor) {
+      if (props.textColor) {
-        style.color = this.textColor;
+        style.color = props.textColor;
       }
 
-      return style;
-    }
-  },
-
-  render(h) {
-    const {
-      mark,
-      plain,
-      round,
-      size
-    } = this;
-
       return (
         <span
+          style={style}
           class={[
             bem({ mark, plain, round, [size]: size }),
             {
               'van-hairline--surround': plain
             }
           ]}
-        style={this.style}
+          {...context.data}
         >
-        {this.$slots.default}
+          {context.children}
         </span>
       );
     }
-});
+  },
+  true
+);

packages/utils/index.js

@@ -4,6 +4,8 @@ export { use, useSlots } from './use';
 
 export const isServer = Vue.prototype.$isServer;
 
+export function noop() {}
+
 export function isDef(value) {
   return value !== undefined && value !== null;
 }