feat: 添加 内部自请求属性相关

src/pages/transaction/marketingAbility/components/MemberCheckboxGroup/index.less

@@ -45,4 +45,9 @@
       }
     }
   }
+
+  &-more {
+    padding: @padding-xss @padding-xss 0;
+    text-align: center;
+  }
 }
\ No newline at end of file

src/pages/transaction/marketingAbility/components/MemberCheckboxGroup/index.tsx

@@ -2,15 +2,18 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-25 11:34:36
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-01 17:57:53
+ * @LastEditTime: 2021-07-08 17:08:39
  * @Description: 会员方块复选框
  */
-import React, { useState, useEffect } from 'react';
-import { Checkbox, Row, Col, Descriptions } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { Checkbox, Row, Col, Descriptions, Button } from 'antd';
 import classNames from 'classnames';
+import { checkMore } from '@/utils';
 import LevelBrand from '@/components/LevelBrand';
 import styles from './index.less';
 
+const PAGE_SIZE = 8;
+
 export type OptionItemType = {
   /**
    * 名称
@@ -40,11 +43,27 @@ export type OptionItemType = {
 
 export type ValueType = any[];
 
-export type ApplicableListProps = {
+export type ParamsType = {
+  /**
+   * 当前页
+   */
+  current: number,
+  /**
+   * 当前页数
+   */
+  pageSize: number,
+};
+
+export type ResponseType = {
+  data: OptionItemType[],
+  totalCount: number,
+};
+
+export type MemberCheckboxGroupProps = {
   /**
    * 选项
    */
-  options: OptionItemType[],
+  options?: OptionItemType[],
   /**
    * 值
    */
@@ -57,17 +76,59 @@ export type ApplicableListProps = {
    * 选项改变触发事件
    */
   onChange?: (value: ValueType) => void,
+  /**
+   * 是否显示加载更多按钮，默认 false
+   */
+  showMoreAction?: Boolean,
+  /**
+   * 请求 options 的异步方法，与 options 属性互斥，options优先级高
+   */
+  fetchOptions?: (params: ParamsType) => Promise<ResponseType>,
+  /**
+   * fetchOptions 额外的请求参数
+   */
+  extraParams?: { [key: string]: any },
 };
 
-const MemberCheckboxGroup: React.FC<ApplicableListProps> = (props) => {
+const MemberCheckboxGroup: React.FC<MemberCheckboxGroupProps> = (props) => {
   const {
-    options = [],
+    options,
     value: outerValue,
     defaultValue = [],
     onChange,
+    showMoreAction = false,
+    fetchOptions,
+    extraParams,
   } = props;
   const initValue = 'value' in props ? outerValue : defaultValue;
   const [value, setValue] = useState<ValueType>(initValue);
+  const [internalOptions, setInternalOptions] = useState<ResponseType>({ data: [], totalCount: 0 });
+  const [loading, setLoading] = useState(false);
+
+  const pageRef = useRef<number>(1);
+  const sizeRef = useRef<number>(PAGE_SIZE);
+  const hasMoreRef = useRef<boolean>(true);
+
+  const getOptions: () => Promise<ResponseType> = () => {
+    if (fetchOptions) {
+      if (!hasMoreRef.current) {
+        return;
+      }
+      setLoading(true);
+      return new Promise((resolve, reject) => {
+        const params: ParamsType = Object.assign({}, { current: pageRef.current, pageSize: sizeRef.current }, extraParams);
+        fetchOptions(params).then((res) => {
+          if (res) {
+            resolve(res);
+            hasMoreRef.current = checkMore(pageRef.current, sizeRef.current, res.data.length, res.totalCount);
+          }
+          reject();
+        }).finally(() => {
+          setLoading(false);
+        });
+      });
+    }
+  };
 
   useEffect(() => {
     if ('value' in props) {
@@ -75,6 +136,29 @@ const MemberCheckboxGroup: React.FC<ApplicableListProps> = (props) => {
     }
   }, [props.value]);
 
+  useEffect(() => {
+    if (!fetchOptions) {
+      return;
+    }
+    pageRef.current = 1;
+    hasMoreRef.current = true;
+    getOptions()?.then((res) => {
+      setInternalOptions(res);
+    });
+  }, [fetchOptions]);
+
+  useEffect(() => {
+    // 初始请求一次之后才生效
+    if (!extraParams) {
+      return;
+    }
+    pageRef.current = 1;
+    hasMoreRef.current = true;
+    getOptions()?.then((res) => {
+      setInternalOptions(res);
+    });
+  }, [extraParams]);
+
   const handleChange = (val: ValueType) => {
     if (!('value' in props)) {
       setValue(val);
@@ -84,6 +168,19 @@ const MemberCheckboxGroup: React.FC<ApplicableListProps> = (props) => {
     }
   };
 
+  const handleLoadMore = () => {
+    if (loading) {
+      return;
+    }
+    pageRef.current += 1;
+    getOptions()?.then((res) => {
+      setInternalOptions({ data: internalOptions.data.concat(res.data), totalCount: res.totalCount });
+    });
+  };
+
+  const optionList = options || internalOptions.data;
+  const isShowMoreAction = showMoreAction && internalOptions.data.length < internalOptions.totalCount;
+
   return (
     <div className={styles['member-list']}>
       <Checkbox.Group
@@ -92,7 +189,7 @@ const MemberCheckboxGroup: React.FC<ApplicableListProps> = (props) => {
         className={styles['member-list-checkboxGroup']}
       >
         <Row gutter={[16, 16]}>
-          {options.map((item) => {
+          {optionList.map((item) => {
             const itemCls = classNames(styles['member-list-item'], {
               [styles['member-list-item-checked']]: Array.isArray(value) && value.includes(item.value),
             });
@@ -130,6 +227,17 @@ const MemberCheckboxGroup: React.FC<ApplicableListProps> = (props) => {
           })}
         </Row>
       </Checkbox.Group>
+      {isShowMoreAction && (
+        <div className={styles['member-list-more']}>
+          <Button
+            type="link"
+            loading={loading}
+            onClick={handleLoadMore}
+          >
+            {!loading ? '加载更多' : '正在加载'}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };