[bugfix] functional component multi listeners (#2717)

packages/address-list/Item.js

@@ -45,7 +45,7 @@ export default sfc({
     return (
       <Cell
         class={bem({ disabled, unswitchable: !switchable })}
-        value-class={bem('value')}
+        valueClass={bem('value')}
         isLink={!disabled && switchable}
         scopedSlots={{
           default: this.renderContent,

packages/button/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { inheritContext } from '../utils/functional';
+import { emit, inherit } from '../utils/functional';
 import Loading from '../loading';
 
 const [sfc, bem] = use('button');
@@ -32,12 +32,12 @@ export default sfc({
   },
 
   render(h, context) {
-    const { props, listeners } = context;
+    const { props } = context;
     const { type, disabled, loading } = props;
 
     const onClick = event => {
-      if (!loading && !disabled && listeners.click) {
+      if (!loading && !disabled) {
-        listeners.click(event);
+        emit(context, 'click', event);
       }
     };
 
@@ -59,7 +59,7 @@ export default sfc({
           }
         ])}
         onClick={onClick}
-        {...inheritContext(context)}
+        {...inherit(context)}
       >
         {loading ? (
           <Loading size="20px" color={type === 'default' ? undefined : ''} />

packages/contact-card/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { inheritContext } from '../utils/functional';
+import { emit, inherit } from '../utils/functional';
 import Cell from '../cell';
 
 const [sfc, bem, t] = use('contact-card');
@@ -22,7 +22,7 @@ export default sfc({
   },
 
   render(h, context) {
-    const { props, listeners } = context;
+    const { props } = context;
     const { type, editable } = props;
 
     return (
@@ -31,14 +31,14 @@ export default sfc({
         border={false}
         isLink={editable}
         class={bem([type])}
-        value-class={bem('value')}
+        valueClass={bem('value')}
         icon={type === 'edit' ? 'contact' : 'add-square'}
         onClick={event => {
-          if (editable && listeners.click) {
+          if (editable) {
-            listeners.click(event);
+            emit(context, 'click', event);
           }
         }}
-        {...inheritContext(context)}
+        {...inherit(context)}
       >
         {type === 'add'
           ? props.addText || t('addText')

packages/contact-list/index.js

@@ -1,5 +1,5 @@
 import { use, noop } from '../utils';
-import { inheritContext } from '../utils/functional';
+import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
 import Button from '../button';
@@ -25,7 +25,7 @@ export default sfc({
         key={item.id}
         isLink
         class={bem('item')}
-        value-class={bem('item-value')}
+        valueClass={bem('item-value')}
         scopedSlots={{
           default: () => (
             <Radio name={item.id}>
@@ -38,20 +38,20 @@ export default sfc({
               class={bem('edit')}
               onClick={event => {
                 event.stopPropagation();
-                listeners.edit && listeners.edit(item, index);
+                emit(context, 'edit', item, index);
               }}
             />
           )
         }}
         onClick={() => {
-          listeners.input && listeners.input(item.id);
+          emit(context, 'input', item.id);
-          listeners.select && listeners.select(item, index);
+          emit(context, 'select', item, index);
         }}
       />
     ));
 
     return (
-      <div class={bem()} {...inheritContext(context)}>
+      <div class={bem()} {...inherit(context)}>
         <RadioGroup value={props.value} class={bem('group')}>
           {List}
         </RadioGroup>

packages/field/index.js

@@ -220,7 +220,7 @@ export default sfc({
         border={this.border}
         isLink={this.isLink}
         required={this.required}
-        title-class={bem('label', labelAlign)}
+        titleClass={bem('label', labelAlign)}
         class={bem({
           error: this.error,
           disabled: this.$attrs.disabled,

packages/nav-bar/index.js

@@ -1,5 +1,5 @@
 import { use, noop } from '../utils';
-import { inheritContext } from '../utils/functional';
+import { inherit } from '../utils/functional';
 import Icon from '../icon';
 
 const [sfc, bem] = use('nav-bar');
@@ -31,7 +31,7 @@ export default sfc({
       <div
         class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
         style={{ zIndex: props.zIndex }}
-        {...inheritContext(context)}
+        {...inherit(context)}
       >
         <div class={bem('left')} onClick={listeners['click-left'] || noop}>
           {slots.left || [

packages/panel/index.js

@@ -27,7 +27,7 @@ export default sfc({
             title={props.title}
             value={props.status}
             class={bem('header')}
-            value-class={bem('header-value')}
+            valueClass={bem('header-value')}
           />
         )}
         <div class={bem('content')}>{slots.default}</div>

packages/password-input/index.js

@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { emit } from '../utils/functional';
 
 const [sfc, bem] = use('password-input');
 
@@ -19,7 +20,7 @@ export default sfc({
   },
 
   render(h, context) {
-    const { props, listeners } = context;
+    const { props } = context;
     const info = props.errorInfo || props.info;
 
     const Points = [];
@@ -37,7 +38,7 @@ export default sfc({
           class={[bem('security'), 'van-hairline--surround']}
           onTouchstart={event => {
             event.stopPropagation();
-            listeners.focus && listeners.focus();
+            emit(context, 'focus', event);
           }}
           {...context.data}
         >

packages/submit-bar/index.js

@@ -1,5 +1,5 @@
 import { use, noop } from '../utils';
-import { inheritContext } from '../utils/functional';
+import { inherit } from '../utils/functional';
 import Button from '../button';
 
 const [sfc, bem, t] = use('submit-bar');
@@ -34,7 +34,7 @@ export default sfc({
     const hasPrice = typeof price === 'number';
 
     return (
-      <div class={bem()} {...inheritContext(context)}>
+      <div class={bem()} {...inherit(context)}>
         {slots.top}
         {(slots.tip || tip) && (
           <div class={bem('tip')}>

packages/switch-cell/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { inheritContext } from '../utils/functional';
+import { inherit } from '../utils/functional';
 import Cell from '../cell';
 import Switch from '../switch';
 import SwitchMixin from '../mixins/switch';
@@ -24,7 +24,7 @@ export default sfc({
     const { props } = context;
 
     return (
-      <Cell center title={props.title} border={props.border} class={bem()} {...inheritContext(context)}>
+      <Cell center title={props.title} border={props.border} class={bem()} {...inherit(context)}>
         <Switch {...{ props, on: context.listeners }} />
       </Cell>
     );

packages/utils/functional.ts

@@ -20,7 +20,8 @@ const inheritKey = [
 
 const mapInheritKey: ObjectIndex = { nativeOn: 'on' };
 
-export function inheritContext(context: Context): InheritContext {
+// inherit partial context, map nativeOn to on
+export function inherit(context: Context): InheritContext {
   return inheritKey.reduce(
     (obj, key) => {
       if (context.data[key]) {
@@ -31,3 +32,17 @@ export function inheritContext(context: Context): InheritContext {
     {} as InheritContext
   );
 }
+
+// emit event
+export function emit(context: Context, eventName: string, ...args: any[]) {
+  const listeners = context.listeners[eventName];
+  if (listeners) {
+    if (Array.isArray(listeners)) {
+      listeners.forEach(listener => {
+        listener(...args);
+      })
+    } else {
+      listeners(...args);
+    }
+  }
+}