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

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);