refactor(AddressList): improve code

src/address-list/Item.js

@@ -20,14 +20,14 @@ export default createComponent({
   emits: ['edit', 'click', 'select'],
 
   setup(props, { slots, emit }) {
-    function onClick() {
+    const onClick = () => {
       if (props.switchable) {
         emit('select');
       }
       emit('click');
-    }
+    };
 
-    const genRightIcon = () => (
+    const renderRightIcon = () => (
       <Icon
         name="edit"
         class={bem('edit')}
@@ -39,7 +39,7 @@ export default createComponent({
       />
     );
 
-    function genTag() {
+    const renderTag = () => {
       if (props.data.isDefault && props.defaultTagText) {
         return (
           <Tag type="danger" round class={bem('tag')}>
@@ -47,19 +47,20 @@ export default createComponent({
           </Tag>
         );
       }
-    }
+    };
+
+    const renderContent = () => {
+      const { data, disabled, switchable } = props;
 
-    function genContent() {
-      const { data } = props;
       const Info = [
         <div class={bem('name')}>
           {`${data.name} ${data.tel}`}
-          {genTag()}
+          {renderTag()}
         </div>,
         <div class={bem('address')}>{data.address}</div>,
       ];
 
-      if (props.switchable && !props.disabled) {
+      if (switchable && !disabled) {
         return (
           <Radio name={data.id} iconSize={18}>
             {Info}
@@ -68,7 +69,7 @@ export default createComponent({
       }
 
       return Info;
-    }
+    };
 
     return () => {
       const { disabled } = props;
@@ -77,8 +78,8 @@ export default createComponent({
         <div class={bem({ disabled })} onClick={onClick}>
           <Cell
             v-slots={{
-              default: genContent,
+              default: renderContent,
-              'right-icon': genRightIcon,
+              'right-icon': renderRightIcon,
             }}
             border={false}
             valueClass={bem('value')}

src/address-list/index.js

@@ -33,63 +33,82 @@ export default createComponent({
   ],
 
   setup(props, { slots, emit }) {
-    return () => {
+    const renderItem = (item, index, disabled) => {
-      function genList(list, disabled) {
+      const onEdit = () => {
-        if (!list) {
+        const name = disabled ? 'edit-disabled' : 'edit';
-          return;
+        emit(name, item, index);
+      };
+
+      const onClick = () => {
+        emit('click-item', item, index);
+      };
+
+      const onSelect = () => {
+        const name = disabled ? 'select-disabled' : 'select';
+        emit(name, item, index);
+
+        if (!disabled) {
+          emit('update:modelValue', item.id);
         }
+      };
 
-        return list.map((item, index) => (
+      return (
-          <AddressItem
+        <AddressItem
-            v-slots={{
+          v-slots={{
-              bottom: slots['item-bottom'],
+            bottom: slots['item-bottom'],
-            }}
+          }}
-            data={item}
+          key={item.id}
-            key={item.id}
+          data={item}
-            disabled={disabled}
+          disabled={disabled}
-            switchable={props.switchable}
+          switchable={props.switchable}
-            defaultTagText={props.defaultTagText}
+          defaultTagText={props.defaultTagText}
-            onSelect={() => {
+          onEdit={onEdit}
-              emit(disabled ? 'select-disabled' : 'select', item, index);
+          onClick={onClick}
+          onSelect={onSelect}
+        />
+      );
+    };
 
-              if (!disabled) {
+    const renderList = (list, disabled) => {
-                emit('update:modelValue', item.id);
+      if (list) {
-              }
+        return list.map((item, index) => renderItem(item, index, disabled));
-            }}
-            onEdit={() => {
-              emit(disabled ? 'edit-disabled' : 'edit', item, index);
-            }}
-            onClick={() => {
-              emit('click-item', item, index);
-            }}
-          />
-        ));
       }
+    };
 
-      const List = genList(props.list);
+    const renderBottom = () => {
-      const DisabledList = genList(props.disabledList, true);
+      const onClick = () => {
+        emit('add');
+      };
+
+      return (
+        <div class={bem('bottom')}>
+          <Button
+            round
+            block
+            type="danger"
+            text={props.addButtonText || t('add')}
+            class={bem('add')}
+            onClick={onClick}
+          />
+        </div>
+      );
+    };
+
+    return () => {
+      const List = renderList(props.list);
+      const DisabledList = renderList(props.disabledList, true);
+      const DisabledText = props.disabledText && (
+        <div class={bem('disabled-text')}>{props.disabledText}</div>
+      );
 
       return (
         <div class={bem()}>
           {slots.top?.()}
           <RadioGroup modelValue={props.modelValue}>{List}</RadioGroup>
-          {props.disabledText && (
+          {DisabledText}
-            <div class={bem('disabled-text')}>{props.disabledText}</div>
-          )}
           {DisabledList}
           {slots.default?.()}
-          <div class={bem('bottom')}>
+          {renderBottom()}
-            <Button
-              round
-              block
-              type="danger"
-              class={bem('add')}
-              text={props.addButtonText || t('add')}
-              onClick={() => {
-                emit('add');
-              }}
-            />
-          </div>
         </div>
       );
     };