feat(ContactList): refactor style & add new prop defaultTagText (#5089)

src/contact-card/README.md

@@ -155,6 +155,7 @@ export default {
 | v-model | Id of chosen contact | *string \| number* | - | - |
 | list | Contact list | *Contact[]* | `[]` | - |
 | add-text | Add button text | *string* | `Add new contact` | - |
+| default-tag-text | Default tag text | *string* | - | - |
 
 ### ContactList Events
 
@@ -164,6 +165,7 @@ export default {
 | edit | Triggered when click edit button | item: contact object，index |
 | select | Triggered when select contact | item: contact object |
 
+
 ### ContactEdit Props
 
 | Attribute | Description | Type | Default | Version |
@@ -190,3 +192,4 @@ export default {
 | id | ID | *string \| number* |
 | name | Name | *string* |
 | tel | Phone | *string* |
+| isDefault | Is default contact | *boolean* |

src/contact-card/README.zh-CN.md

@@ -159,6 +159,7 @@ export default {
 | v-model | 当前选中联系人的 id | *string \| number* | - | - |
 | list | 联系人列表 | *Contact[]* | `[]` | - |
 | add-text | 新建按钮文案 | *string* | `新建联系人` | - |
+| default-tag-text | 默认联系人标签文案 | *string* | - | - |
 
 ### ContactList Events
 
@@ -194,3 +195,4 @@ export default {
 | id | 每位联系人的唯一标识 | *string \| number* |
 | name | 联系人姓名 | *string* |
 | tel | 联系人手机号 | *string \| number* |
+| isDefault | 是否为默认联系人 | *boolean* |

src/contact-card/demo/index.vue

@@ -16,6 +16,7 @@
         <van-contact-list
           v-model="chosenContactId"
           :list="list"
+          :default-tag-text="$t('defaultTagText')"
           @add="onAdd"
           @edit="onEdit"
           @select="onSelect"
@@ -54,11 +55,13 @@ export default {
   i18n: {
     'zh-CN': {
       name: '张三',
-      defaultLabel: '设为默认联系人'
+      defaultLabel: '设为默认联系人',
+      defaultTagText: '默认'
     },
     'en-US': {
       name: 'John Snow',
-      defaultLabel: 'Set as the default contact'
+      defaultLabel: 'Set as the default contact',
+      defaultTagText: 'default'
     }
   },
 
@@ -78,7 +81,8 @@ export default {
       return {
         name: this.$t('name'),
         tel: '13000000000',
-        id: 0
+        id: 0,
+        isDefault: 1
       };
     },
 

src/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -11,16 +11,16 @@ exports[`renders demo correctly 1`] = `
     <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
       <div class="van-contact-list">
         <div role="radiogroup" class="van-radio-group van-contact-list__group">
-          <div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item">
-            <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
-              <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
-                <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
-                    <!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span>
-              </div>
-            </div><i class="van-icon van-icon-edit van-contact-list__edit">
+          <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
               <!----></i>
+            <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></div>
+            <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+              <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
+                  <!----></i></div>
+            </div>
           </div>
-        </div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
+        </div>
+        <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
       </div>
     </div>
     <div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">

src/contact-card/test/__snapshots__/index.spec.js.snap

@@ -3,15 +3,15 @@
 exports[`ContactList render 1`] = `
 <div class="van-contact-list">
   <div role="radiogroup" class="van-radio-group van-contact-list__group">
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-contact-list__item">
-      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
-        <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-          <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
-              <!----></i></div><span class="van-radio__label"><div class="van-contact-list__name">test，123123213</div></span>
-        </div>
-      </div><i class="van-icon van-icon-edit van-contact-list__edit">
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
         <!----></i>
+      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">test，123123213</div>
+      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
+            <!----></i></div>
+      </div>
     </div>
-  </div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
+  </div>
+  <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
 </div>
 `;

src/contact-list/index.less

@@ -10,7 +10,18 @@
   }
 
   &__item-value {
+    display: flex;
+    align-items: center;
     padding-right: @padding-xl;
+    padding-left: @padding-xs;
+  }
+
+  &__item-tag {
+    flex: none;
+    margin-left: @padding-xs;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 1.4em;
   }
 
   &__group {
@@ -20,24 +31,22 @@
     -webkit-overflow-scrolling: touch;
   }
 
-  &__name {
-    font-weight: @font-weight-bold;
-    font-size: @font-size-md;
-    line-height: 20px;
-  }
-
   &__edit {
-    position: absolute;
-    top: 50%;
-    right: @padding-md;
     font-size: @contact-list-edit-icon-size;
-    transform: translate(0, -50%);
   }
 
-  &__add {
+  &__bottom {
     position: fixed;
+    right: 0;
     bottom: 0;
     left: 0;
     z-index: @contact-list-add-button-z-index;
+    padding: 5px 16px;
+    background-color: #fff;
+  }
+
+  &__add {
+    height: 40px;
+    line-height: 38px;
   }
 }

src/contact-list/index.tsx

@@ -3,6 +3,7 @@ import { RED } from '../utils/constant';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 import Cell from '../cell';
+import Tag from '../tag';
 import Button from '../button';
 import Radio from '../radio';
 import RadioGroup from '../radio-group';
@@ -15,12 +16,14 @@ export type ContactListItem = {
   id: string | number;
   tel: string | number;
   name: string;
+  isDefault: boolean;
 };
 
 export type ContactListProps = {
   value?: any;
   list?: ContactListItem[];
   addText?: string;
+  defaultTagText?: string;
 };
 
 const [createComponent, bem, t] = createNamespace('contact-list');
@@ -39,15 +42,18 @@ function ContactList(
         emit(ctx, 'select', item, index);
       }
 
-      function Content() {
+      function RightIcon() {
         return (
-          <Radio name={item.id} iconSize={16} checkedColor={RED} onClick={onClick}>
-            <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
-          </Radio>
+          <Radio
+            name={item.id}
+            iconSize={16}
+            checkedColor={RED}
+            onClick={onClick}
+          />
         );
       }
 
-      function RightIcon() {
+      function LeftIcon() {
         return (
           <Icon
             name="edit"
@@ -60,15 +66,29 @@ function ContactList(
         );
       }
 
+      function Content() {
+        return [
+          `${item.name}，${item.tel}`,
+          item.isDefault && props.defaultTagText && (
+            <Tag type="danger" round class={bem('item-tag')}>
+              {props.defaultTagText}
+            </Tag>
+          )
+        ];
+      }
+
       return (
         <Cell
           key={item.id}
           isLink
+          center
           class={bem('item')}
           valueClass={bem('item-value')}
+          // @ts-ignore
           scopedSlots={{
             default: Content,
-            'right-icon': RightIcon
+            'right-icon': RightIcon,
+            icon: LeftIcon
           }}
           onClick={onClick}
         />
@@ -80,16 +100,18 @@ function ContactList(
       <RadioGroup value={props.value} class={bem('group')}>
         {List}
       </RadioGroup>
-      <Button
-        square
-        size="large"
-        type="danger"
-        class={bem('add')}
-        text={props.addText || t('addText')}
-        onClick={() => {
-          emit(ctx, 'add');
-        }}
-      />
+      <div class={bem('bottom')}>
+        <Button
+          round
+          block
+          type="danger"
+          class={bem('add')}
+          text={props.addText || t('addText')}
+          onClick={() => {
+            emit(ctx, 'add');
+          }}
+        />
+      </div>
     </div>
   );
 }
@@ -97,7 +119,8 @@ function ContactList(
 ContactList.props = {
   value: null as any,
   list: Array,
-  addText: String
+  addText: String,
+  defaultTagText: String
 };
 
 export default createComponent(ContactList);