types(ContactList): use tsx (#8146)

src/contact-list/index.tsx

@@ -0,0 +1,107 @@
+import { PropType } from 'vue';
+
+// Utils
+import { createNamespace } from '../utils';
+import { RED } from '../utils/constant';
+
+// Components
+import Tag from '../tag';
+import Icon from '../icon';
+import Cell from '../cell';
+import Radio from '../radio';
+import Button from '../button';
+import RadioGroup from '../radio-group';
+
+const [createComponent, bem, t] = createNamespace('contact-list');
+
+export type ContactListItem = {
+  id?: number | string;
+  tel: number | string;
+  name: string;
+  isDefault?: boolean;
+};
+
+export default createComponent({
+  props: {
+    list: Array as PropType<ContactListItem[]>,
+    addText: String,
+    modelValue: null as any,
+    defaultTagText: String,
+  },
+
+  emits: ['add', 'edit', 'select', 'update:modelValue'],
+
+  setup(props, { emit }) {
+    const renderItem = (item: ContactListItem, index: number) => {
+      const onClick = () => {
+        emit('update:modelValue', item.id);
+        emit('select', item, index);
+      };
+
+      const renderRightIcon = () => (
+        <Radio name={item.id} iconSize={16} checkedColor={RED} />
+      );
+
+      const renderEditIcon = () => (
+        <Icon
+          name="edit"
+          class={bem('edit')}
+          onClick={(event) => {
+            event.stopPropagation();
+            emit('edit', item, index);
+          }}
+        />
+      );
+
+      const renderContent = () => {
+        const nodes: JSX.Element[] = [`${item.name}，${item.tel}`];
+
+        if (item.isDefault && props.defaultTagText) {
+          nodes.push(
+            <Tag type="danger" round class={bem('item-tag')}>
+              {props.defaultTagText}
+            </Tag>
+          );
+        }
+
+        return nodes;
+      };
+
+      return (
+        <Cell
+          v-slots={{
+            icon: renderEditIcon,
+            default: renderContent,
+            'right-icon': renderRightIcon,
+          }}
+          key={item.id}
+          isLink
+          center
+          class={bem('item')}
+          valueClass={bem('item-value')}
+          onClick={onClick}
+        />
+      );
+    };
+
+    return () => (
+      <div class={bem()}>
+        <RadioGroup modelValue={props.modelValue} class={bem('group')}>
+          {props.list && props.list.map(renderItem)}
+        </RadioGroup>
+        <div class={bem('bottom')}>
+          <Button
+            round
+            block
+            type="danger"
+            class={bem('add')}
+            text={props.addText || t('addText')}
+            onClick={() => {
+              emit('add');
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+});