feat: 完善地址选择抽屉组件

src/components/AddressSelect/components/AddressRadioGroup/index.less

@@ -27,6 +27,7 @@
 
       .@{addressList-prefix}-item-actions {
         visibility: visible;
+        opacity: 1;
       }
     }
 
@@ -49,6 +50,7 @@
 
     &-actions {
       visibility: hidden;
+      opacity: 0;
       transition: all .3s;
     }
   }

src/components/AddressSelect/components/AddressRadioGroup/index.tsx

@@ -2,15 +2,16 @@
  * @Author: XieZhiXiong
  * @Date: 2021-08-05 14:23:40
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-05 18:12:24
+ * @LastEditTime: 2021-08-06 14:15:46
  * @Description: 地址单选框组
  */
 import React, { useState, useEffect, useMemo } from 'react';
-import { Radio, Button, Modal, message } from 'antd';
+import { Radio, Button, Modal, message, RadioChangeEvent } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { PublicApi } from '@/services/api';
 import { GetLogisticsShipperAddressGetResponse, GetLogisticsReceiverAddressGetResponse } from '@/services/LogisticsApi';
 import { IRequestSuccess } from '@/index';
+import AddressSelectContext from '@/components/AddressSelect/context';
 import styles from './index.less';
 
 const { confirm } = Modal;
@@ -78,6 +79,8 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
   const [list, setList] = useState<AddressValueType[]>([]);
   const [internalValue, setInternalValue] = useState<AddressValueType | undefined>(undefined);
 
+  const context = React.useContext(AddressSelectContext);
+
   const triggerChange = (value: AddressValueType) => {
     if (onChange) {
       onChange(value);
@@ -85,21 +88,47 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
   };
 
   const getAddressList = () => {
+    // context存在直接在context里边取
+    if (context) {
+      return;
+    }
     const fetchAction = addressType === 2 ? PublicApi.getLogisticsSelectListShipperAddress() : PublicApi.getLogisticsSelectListReceiverAddress();
 
     fetchAction.then((res: IRequestSuccess<AddressItemType[]>) => {
       if (res.code === 1000) {
         const defaultItem = res.data?.find((item) => item.isDefault);
-        setList(res.data?.map(({ shipperName, receiverName, ...rest }) => ({
+        const listArr = res.data?.map(({ shipperName, receiverName, ...rest }) => ({
           name: shipperName || receiverName,
           ...rest,
-        })));
+        }))
+        setList(listArr);
+
+        // 这里处理如果设置了回调默认地址，然后进行了删除这条默认地址地址操作
+        // 之后重新请求了列表，但因为之前的默认地址被删除了，需要重新置空地址值
+        if (
+          isDefaultAddress
+          && value
+          && value.id
+          && !listArr.find((item) => item.id === value.id)
+        ) {
+          if (!('value' in props)) {
+            setInternalValue(undefined);
+          }
+
+          triggerChange(undefined);
+        }
+
         if (isDefaultAddress && defaultItem) {
           const { shipperName, receiverName, ...rest } = defaultItem;
-          triggerChange({
+          const next = {
             name: shipperName || receiverName,
             ...rest,
-          });
+          };
+          
+          if (!('value' in props)) {
+            setInternalValue(next);
+          }
+          triggerChange(next);
         }
       }
     }).catch((err) => {
@@ -107,11 +136,19 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
     });
   };
 
+  const refresh = () => {
+    context ? context?.refresh() : getAddressList();
+  };
+
   useEffect(() => {
     if ('value' in props) {
       setInternalValue(value);
     }
   }, [value]);
+  
+  useEffect(() => {
+    setList(context?.addressList);
+  }, [context?.addressList]);
 
   useEffect(() => {
     getAddressList();
@@ -132,6 +169,18 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
   const handleRadioClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
     e.stopPropagation();
   };
+  
+  const handleRadioChange = (e: RadioChangeEvent) => {
+    const current = list.find((item) => item.id === e.target.value);
+
+    if (!('value' in props)) {
+      setInternalValue(current);
+    }
+
+    if (current) {
+      triggerChange(current);
+    }
+  };
 
   const handleEdit = (e: React.MouseEvent<HTMLElement, MouseEvent>, id: number) => {
     e.stopPropagation();
@@ -148,7 +197,11 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
           addressType === 2
             ? PublicApi.postLogisticsShipperAddressDelete({ id })
             : PublicApi.postLogisticsReceiverAddressDelete({ id })
-        );
+        ).then((res) => {
+          if (res.code === 1000) {
+            refresh();
+          }
+        });
       },
     });
   };
@@ -166,14 +219,14 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
       const res = addressType === 2 ? await PublicApi.getLogisticsShipperAddressGet({ id: `${id}`}) : await PublicApi.getLogisticsReceiverAddressGet({ id: `${id}`});
       if (res.code === 1000) {
         addressType === 2
-        ? await PublicApi.postLogisticsShipperAddressUpdate({
-          ...(res.data as GetLogisticsShipperAddressGetResponse),
-          isDefault: 1,
-        })
-        : await PublicApi.postLogisticsReceiverAddressUpdate({
-          ...(res.data as GetLogisticsReceiverAddressGetResponse),
-          isDefault: 1,
-        });
+          ? await PublicApi.postLogisticsShipperAddressUpdate({
+            ...(res.data as GetLogisticsShipperAddressGetResponse),
+            isDefault: 1,
+          })
+          : await PublicApi.postLogisticsReceiverAddressUpdate({
+            ...(res.data as GetLogisticsReceiverAddressGetResponse),
+            isDefault: 1,
+          });
       }
     } catch (error) {
       console.warn(error);
@@ -200,7 +253,13 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
             onClick={() => handleSelectItem(item.value)}
           >
             <div className={styles['addressList-item-left']}>
-              <Radio value={item.value} onClick={handleRadioClick}>{item.label}</Radio>
+              <Radio
+                value={item.value}
+                onClick={handleRadioClick}
+                onChange={handleRadioChange}
+              >
+                {item.label}
+              </Radio>
               {item.isDefault ? (
                 <span className={styles['addressList-item-default']}>默认地址</span>
               ) : (
@@ -217,13 +276,13 @@ const AddressRadioGroup: React.FC<IProps> = (props) => {
             </div>
             <div className={styles['addressList-item-right']}>
               <div className={styles['addressList-item-actions']}>
-                <Button
+                {/* <Button
                   type="text"
                   size="small"
                   onClick={(e) => handleEdit(e, item.value)}
                 >
                   编辑
-                </Button>
+                </Button> */}
                 <Button
                   type="text"
                   size="small"

src/components/AddressSelect/components/AddressRadioGroupFormilyItem/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-08-05 14:54:18
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-05 14:54:19
+ * @LastEditTime: 2021-08-06 10:41:38
  * @Description: 
  */
 import React from 'react';
@@ -15,12 +15,14 @@ const AddressRadioGroupFormilyItem = connect()((props) => {
     value,
     onChange,
     addressType,
+    isDefault,
     ...rest
   } = props;
   return (
     <div style={{ flex: 1 }}>
       <AddressRadioGroup
         addressType={addressType}
+        isDefault={isDefault}
         value={value}
         onChange={onChange}
         {...rest}

src/components/AddressSelect/context.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-06 09:50:59
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-06 09:53:00
+ * @Description: 
+ */
+import * as React from 'react';
+import { AddressSelectContextProps } from './interface';
+
+const AddressSelectContext = React.createContext<AddressSelectContextProps | null>(null);
+
+export const AddressSelectContextProvider = AddressSelectContext.Provider;
+
+export default AddressSelectContext;
\ No newline at end of file

src/components/AddressSelect/interface.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-06 09:51:15
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-06 09:51:16
+ * @Description: 
+ */
+import { AddressValueType } from './components/AddressRadioGroup';
+
+export interface AddressSelectContextProps {
+  /**
+   * 地址列表
+   */
+  addressList: AddressValueType[],
+  /**
+   * 重新加载列表
+   */
+  refresh: () => void,
+}
\ No newline at end of file