refactor: reorganize all components (#8303)

src/address-list/AddressList.tsx

@@ -0,0 +1,122 @@
+import { PropType, defineComponent } from 'vue';
+
+// Utils
+import { createNamespace } from '../utils';
+
+// Components
+import Button from '../button';
+import RadioGroup from '../radio-group';
+import AddressListItem, { AddressListAddress } from './AddressListItem';
+
+const [name, bem, t] = createNamespace('address-list');
+
+export default defineComponent({
+  name,
+
+  props: {
+    modelValue: [Number, String],
+    disabledText: String,
+    addButtonText: String,
+    defaultTagText: String,
+    list: {
+      type: Array as PropType<AddressListAddress[]>,
+      default: () => [],
+    },
+    disabledList: {
+      type: Array as PropType<AddressListAddress[]>,
+      default: () => [],
+    },
+    switchable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: [
+    'add',
+    'edit',
+    'select',
+    'click-item',
+    'edit-disabled',
+    'select-disabled',
+    'update:modelValue',
+  ],
+
+  setup(props, { slots, emit }) {
+    const renderItem = (
+      item: AddressListAddress,
+      index: number,
+      disabled?: boolean
+    ) => {
+      const onEdit = () => {
+        const name = disabled ? 'edit-disabled' : 'edit';
+        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 (
+        <AddressListItem
+          v-slots={{
+            bottom: slots['item-bottom'],
+          }}
+          key={item.id}
+          address={item}
+          disabled={disabled}
+          switchable={props.switchable}
+          defaultTagText={props.defaultTagText}
+          onEdit={onEdit}
+          onClick={onClick}
+          onSelect={onSelect}
+        />
+      );
+    };
+
+    const renderList = (list: AddressListAddress[], disabled?: boolean) => {
+      if (list) {
+        return list.map((item, index) => renderItem(item, index, disabled));
+      }
+    };
+
+    const renderBottom = () => (
+      <div class={bem('bottom')}>
+        <Button
+          round
+          block
+          type="danger"
+          text={props.addButtonText || t('add')}
+          class={bem('add')}
+          onClick={() => emit('add')}
+        />
+      </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>
+          {DisabledText}
+          {DisabledList}
+          {slots.default?.()}
+          {renderBottom()}
+        </div>
+      );
+    };
+  },
+});