From d8e30bdcacb1553ebfcf64f8423a64d65e1eb8c3 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 26 Nov 2019 20:59:47 +0800
Subject: [PATCH] feat(AddressEdit): add click feedback of area cell (#5120)

---
 src/address-edit/Detail.js                    | 25 ++++++++++---------
 src/address-edit/index.js                     |  1 +
 src/address-edit/index.less                   |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/index.spec.js.snap     | 12 ++++-----
 src/contact-list/index.less                   |  2 +-
 src/contact-list/index.tsx                    | 18 +++++++------
 7 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/src/address-edit/Detail.js b/src/address-edit/Detail.js
index f2c10d4ba..0ecf36720 100644
--- a/src/address-edit/Detail.js
+++ b/src/address-edit/Detail.js
@@ -53,24 +53,25 @@ export default createComponent({
         return searchResult.map(express => (
           <Cell
             key={express.name + express.address}
-            class={bem('search-item')}
-            label={express.address}
+            clickable
             border={false}
             icon="location-o"
-            clickable
+            label={express.address}
+            class={bem('search-item')}
             onClick={() => {
               this.onSelect(express);
             }}
             scopedSlots={{
-              title: () =>
-                express.name && (
-                  <div
-                    domPropsInnerHTML={express.name.replace(
-                      value,
-                      `<span class=${bem('keyword')}>${value}</span>`
-                    )}
-                  />
-                )
+              title: () => {
+                if (express.name) {
+                  const text = express.name.replace(
+                    value,
+                    `<span class=${bem('keyword')}>${value}</span>`
+                  );
+
+                  return <div domPropsInnerHTML={text} />;
+                }
+              }
             }}
           />
         ));
diff --git a/src/address-edit/index.js b/src/address-edit/index.js
index 2d85422fc..f26643071 100644
--- a/src/address-edit/index.js
+++ b/src/address-edit/index.js
@@ -272,6 +272,7 @@ export default createComponent({
           <Field
             vShow={this.showArea}
             readonly
+            clickable
             label={t('area')}
             placeholder={t('areaPlaceholder')}
             rightIcon="arrow"
diff --git a/src/address-edit/index.less b/src/address-edit/index.less
index feca9d61f..4dec6ca3e 100644
--- a/src/address-edit/index.less
+++ b/src/address-edit/index.less
@@ -26,7 +26,7 @@
     padding: 0;
 
     &__search-item {
-      background-color: #f2f3f5;
+      background-color: @gray-2;
     }
 
     &__keyword {
diff --git a/src/address-edit/test/__snapshots__/demo.spec.js.snap b/src/address-edit/test/__snapshots__/demo.spec.js.snap
index 5006885a2..100c392e3 100644
--- a/src/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/src/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -17,7 +17,7 @@ exports[`renders demo correctly 1`] = `
             <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
           </div>
         </div>
-        <div class="van-cell van-field">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
           <div class="van-cell__title van-field__label"><span>地区</span></div>
           <div class="van-cell__value">
             <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
diff --git a/src/address-edit/test/__snapshots__/index.spec.js.snap b/src/address-edit/test/__snapshots__/index.spec.js.snap
index 462c99692..1e0659574 100644
--- a/src/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/src/address-edit/test/__snapshots__/index.spec.js.snap
@@ -15,7 +15,7 @@ exports[`create a AddressEdit 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -54,7 +54,7 @@ exports[`create a AddressEdit with props 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -107,7 +107,7 @@ exports[`set-default 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -160,7 +160,7 @@ exports[`show area component 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -213,7 +213,7 @@ exports[`show area component 2`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
@@ -266,7 +266,7 @@ exports[`valid area placeholder confirm 1`] = `
         <div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-cell van-field">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
       <div class="van-cell__title van-field__label"><span>地区</span></div>
       <div class="van-cell__value">
         <div class="van-field__body"><input type="text" placeholder="选择省 / 市 / 区" readonly="readonly" class="van-field__control">
diff --git a/src/contact-list/index.less b/src/contact-list/index.less
index ddaa26716..2a6058c0c 100644
--- a/src/contact-list/index.less
+++ b/src/contact-list/index.less
@@ -42,7 +42,7 @@
     left: 0;
     z-index: @contact-list-add-button-z-index;
     padding: 5px 16px;
-    background-color: #fff;
+    background-color: @white;
   }
 
   &__add {
diff --git a/src/contact-list/index.tsx b/src/contact-list/index.tsx
index 4d8066856..9027d47bc 100644
--- a/src/contact-list/index.tsx
+++ b/src/contact-list/index.tsx
@@ -9,7 +9,7 @@ import Radio from '../radio';
 import RadioGroup from '../radio-group';
 
 // Types
-import { CreateElement, RenderContext } from 'vue/types';
+import { CreateElement, RenderContext, VNode } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
 export type ContactListItem = {
@@ -67,14 +67,17 @@ function ContactList(
       }
 
       function Content() {
-        return [
-          `${item.name}，${item.tel}`,
-          item.isDefault && props.defaultTagText && (
+        const nodes = ([`${item.name}，${item.tel}`] as unknown[]) as VNode[];
+
+        if (item.isDefault && props.defaultTagText) {
+          nodes.push(
             <Tag type="danger" round class={bem('item-tag')}>
               {props.defaultTagText}
             </Tag>
-          )
-        ];
+          );
+        }
+
+        return nodes;
       }
 
       return (
@@ -84,11 +87,10 @@ function ContactList(
           center
           class={bem('item')}
           valueClass={bem('item-value')}
-          // @ts-ignore
           scopedSlots={{
+            icon: LeftIcon,
             default: Content,
             'right-icon': RightIcon,
-            icon: LeftIcon
           }}
           onClick={onClick}
         />