@cloudbase/weda-ui 3.4.2 → 3.4.4

package/dist/web/components/listView/index.js

@@ -1,30 +1,41 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useImperativeHandle, } from 'react';
 import { callDataSource } from '../../utils/tcb';
-import { isInIde, getWhereList } from '../../utils/platform';
+import { isInIde, getWhereList, alertErrorMessage } from '../../utils/platform';
 import classNames from '../../utils/classnames';
 import isequal from 'lodash.isequal';
 import './index.css';
 import { isNil } from '../../utils/lodash';
+import { getUuid } from '../../utils/tool';
+import EmptyContent from '../emptyContent';
 const ORDERTYPE = ['asc', 'desc'];
 const BLOCK_NAME = 'weda-list-view';
+const LISTVIEW_MESSAGE = {
+    methods_no_support: '当前组件绑定了APIs，暂不支持进行数据删除',
+    deleteOne_param_error: '传入的"数据标识"参数格式错误',
+    deleteOne_success: '删除数据成功',
+    deleteOne_fail: '删除数据失败',
+    refresh_success: '刷新数据成功',
+    refresh_fail: '刷新数据失败',
+};
 const getIdeMockData = (length = 3) => Array.from({ length }).map(() => Object.create(null));
+const getStringValue = (v) => (typeof v === 'string' ? v : '');
 /**
  * 数据容器-列表视图
  */
-export default function ListView(props) {
+export default React.forwardRef(function ListView(props, ref) {
     var _a, _b, _c;
-    const { dataSourceType, bindConnectMetadata, connectorMethod, connectorParams: rawConnectorParams, datasource, orderBy, orderType, where, template, pageSize = 5, pagination, events, className, children, isRecords = true, //是否展示回调recoreds字段
+    const { dataSourceType, bindConnectMetadata, connectorMethod, connectorParams: rawConnectorParams, datasource, orderBy, orderType, where: rawWhere, template, pageSize = 5, pagination, events, className, children, isRecords = true, //是否展示回调recoreds字段
     isSetStatus = false, //是否开启加载状态
+    emptyText, //空状态时的文案
+    loadCompletedText = '', // 加载到底提示
     appCloud = { callDataSource, isInIde }, beforeDataChange = (v) => v, ...rest } = props;
     const connectorParams = rawConnectorParams && JSON.parse(JSON.stringify(rawConnectorParams));
+    const where = rawWhere && JSON.parse(JSON.stringify(rawWhere));
     const isModel = dataSourceType !== 'custom-connector';
-    const methodName = isModel
+    const methodName = getStringValue(isModel
         ? ((_a = datasource === null || datasource === void 0 ? void 0 : datasource.extra) === null || _a === void 0 ? void 0 : _a.methodName) || 'wedaGetRecords'
-        : connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name; // 默认方法名
-    const dataSourceName = isModel
-        ? datasource === null || datasource === void 0 ? void 0 : datasource.name
-        : (_b = bindConnectMetadata === null || bindConnectMetadata === void 0 ? void 0 : bindConnectMetadata.datasource) === null || _b === void 0 ? void 0 : _b.name;
-    const [pageNo, setPageNo] = useState(1); // 分页状态
+        : connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name);
+    const dataSourceName = getStringValue(isModel ? datasource === null || datasource === void 0 ? void 0 : datasource.name : (_b = bindConnectMetadata === null || bindConnectMetadata === void 0 ? void 0 : bindConnectMetadata.datasource) === null || _b === void 0 ? void 0 : _b.name);
     const [entry, setEntry] = useState(null); // 触底的observer对象
     const [status, setStatus] = useState(''); // 查询状态
     const paramRef = useRef({
@@ -35,22 +46,33 @@ export default function ListView(props) {
     }); // 最新请求参数
     const dataRef = useRef({ total: 0, records: [] }); // 最新数据列表
     const observeRef = useRef(null); // 当前监听对象
+    const delayRef = useRef({
+        version: null,
+        initTimer: null,
+        statusTimer: null,
+        eventTimer: null,
+    }); // 请求防抖、异步时使用最后一次请求
     const isIdeMockData = !(dataSourceName && methodName) && ((_c = appCloud === null || appCloud === void 0 ? void 0 : appCloud.isInIde) === null || _c === void 0 ? void 0 : _c.call(appCloud)); // 在ide环境且未绑定数据源时，存在mock数据逻辑
     const shouldBottomLoad = pagination === 'bottomLoad' &&
         (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) &&
         ['', 'success'].includes(status); // 能否触底加载
     // 组件卸载时触发
     useEffect(() => {
+        clearContext();
         return () => {
-            var _a, _b;
+            var _a;
             (_a = observeRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
-            (_b = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _b === void 0 ? void 0 : _b.call(events, { data: beforeDataChange([]), state: {} });
+            clearContext();
         };
     }, []);
+    // 监听更改数据源时，清空当前列表
+    useEffect(() => {
+        clearContext();
+    }, [methodName, dataSourceName, isModel]);
     // props 基本类型监听，需重新分页；处于 ide 且未绑定数据源时返回mock数据
     useEffect(() => {
         var _a, _b;
-        dataRef.current = { total: 0, records: [] };
+        clearDelay();
         if (!isIdeMockData) {
             fetchData({
                 dataSourceName,
@@ -63,7 +85,7 @@ export default function ListView(props) {
                     pageSize,
                 },
                 pagination,
-            });
+            }, { isInitData: true });
         }
         else {
             (_b = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _b === void 0 ? void 0 : _b.call(events, {
@@ -71,32 +93,24 @@ export default function ListView(props) {
                 state: getContextState(),
             });
         }
-    }, [
-        methodName,
-        dataSourceName,
-        pageSize,
-        pagination,
-        orderBy,
-        orderType,
-        isModel,
-    ]);
+    }, [methodName, dataSourceName, pageSize, pagination, orderBy, orderType, isModel]);
     // props 对象类型监听，需重新分页
     useEffect(() => {
         var _a, _b, _c, _d;
         if (isModel) {
             if (!isequal((_b = (_a = paramRef.current) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.where, where)) {
-                dataRef.current = { total: 0, records: [] };
+                clearDelay();
                 fetchData({
                     params: { pageNo: 1, where },
-                });
+                }, { isInitData: true });
             }
         }
         else {
             if (!isequal((_d = (_c = paramRef.current) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.connectorParams, connectorParams)) {
-                dataRef.current = { total: 0, records: [] };
+                clearDelay();
                 fetchData({
                     params: { pageNo: 1, connectorParams },
-                });
+                }, { isInitData: true });
             }
         }
     });
@@ -109,6 +123,23 @@ export default function ListView(props) {
             });
         }
     }, [shouldBottomLoad]);
+    // 组件方法
+    useImperativeHandle(ref, () => ({
+        methods: {
+            deleteOne: methodDeleteOne,
+            refresh: methodRefresh,
+        },
+    }));
+    // 清除延迟状态
+    const clearDelay = () => {
+        clearTimeout(delayRef.current.statusTimer);
+        clearTimeout(delayRef.current.eventTimer);
+    };
+    // 清除上下文状态
+    const clearContext = () => {
+        var _a;
+        (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data: beforeDataChange([]), state: {} });
+    };
     // 触底监控对象
     const nodeRefCallback = useCallback((node) => {
         var _a;
@@ -130,18 +161,21 @@ export default function ListView(props) {
     /**
      * 列表视图拉取数据
      * 方法仅依赖入参和paramRef的参数
+     * isInitData: 是否初始化数据默认否, isFetchCurrent: 是否拉取当前所有数据默认否
      */
-    const fetchData = async (param) => {
+    const fetchData = async (param, options) => {
         var _a;
-        // 合并参数
-        const fetchParam = {
+        const fetchVersion = (delayRef.current.version = getUuid());
+        const { isInitData, isFetchCurrent } = options || {};
+        // 合并参数并保存，useEffect 中需要比对
+        paramRef.current = {
             ...paramRef.current,
             ...param,
             params: { ...paramRef.current.params, ...param === null || param === void 0 ? void 0 : param.params },
         };
-        const { dataSourceName, methodName, params } = fetchParam;
+        const { dataSourceName, methodName, params } = paramRef.current;
         const { orderBy, orderType, pageNo, pageSize, where, connectorParams } = params || {};
-        if (status === 'loading' || !(dataSourceName && methodName))
+        if (!(dataSourceName && methodName))
             return;
         setStatus('loading');
         let tcbParams = {};
@@ -161,35 +195,67 @@ export default function ListView(props) {
             whereEffected.length > 0 && (tcbParams['where'] = whereEffected);
         }
         else {
-            tcbParams = Object.assign({}, tcbParams, connectorParams);
+            // 内部分页参数覆盖查询入参
+            tcbParams = Object.assign({}, connectorParams, tcbParams);
         }
         // tcb结果和事件
-        let data = [];
+        let data = {};
         const eventDatasource = isModel
             ? datasource
             : { ...bindConnectMetadata, ...connectorMethod };
         try {
-            data = await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
-                dataSourceName,
-                methodName,
-                params: tcbParams,
-            }, true));
-            paramRef.current = fetchParam;
-            onEnvets(data, eventDatasource);
+            if (isFetchCurrent) {
+                data = await fetchDataLoop({ dataSourceName, methodName, params: tcbParams }, dataRef.current.records.length);
+            }
+            else {
+                data = await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
+                    dataSourceName,
+                    methodName,
+                    params: tcbParams,
+                }, true));
+            }
+            if (fetchVersion !== delayRef.current.version)
+                return;
+            isInitData && (dataRef.current = { total: 0, records: [] });
+            onEvents(data, eventDatasource);
         }
         catch (e) {
-            setStatus(isModel ? 'fail' : '');
+            setStatus('fail');
             (_a = events === null || events === void 0 ? void 0 : events.queryFail) === null || _a === void 0 ? void 0 : _a.call(events, { datasource: eventDatasource, data: null });
         }
     };
+    /**
+     * 循环调用接口获取当前已加载的数据
+     */
+    const fetchDataLoop = async (param = {}, count = 0) => {
+        let [records, total] = [[], 0];
+        try {
+            const { dataSourceName, methodName, params } = param || {};
+            const MAX_PAGESIZE = Math.min(1000, count);
+            const loopLength = Math.ceil(count / MAX_PAGESIZE);
+            for (let i = 1; i < loopLength + 1; i++) {
+                const tcbParams = { ...params, pageNo: i, pageSize: MAX_PAGESIZE };
+                const temp = await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
+                    dataSourceName,
+                    methodName,
+                    params: tcbParams,
+                }, true));
+                records = records.concat(temp.records || []);
+                total = temp.total || 0;
+            }
+        }
+        catch (e) {
+            console.error('fetchDataLoop: ', e);
+        }
+        return { records: records.slice(0, count), total };
+    };
     /**
      * 根据fetchData方法返回值，回调给外部事件
      */
-    const onEnvets = (data, datasource) => {
-        var _a, _b, _c, _d, _e;
-        const bottomLoadTimer = 150;
+    const onEvents = (data, datasource) => {
+        var _a, _b;
         const fetchRecords = [].concat(!isRecords && !isModel ? data : (data === null || data === void 0 ? void 0 : data.records) || []);
-        const total = (_a = data === null || data === void 0 ? void 0 : data.total) !== null && _a !== void 0 ? _a : fetchRecords.length;
+        const total = Number(data === null || data === void 0 ? void 0 : data.total) || 0;
         if (['loadMoreButton', 'bottomLoad'].includes(paramRef.current.pagination)) {
             dataRef.current = {
                 total,
@@ -199,22 +265,25 @@ export default function ListView(props) {
         else {
             dataRef.current = { total, records: fetchRecords };
         }
-        (_b = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _b === void 0 ? void 0 : _b.call(events, {
+        (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, {
             data: beforeDataChange(dataRef.current.records || []),
             state: getContextState(),
         });
         if (total === 0) {
-            setStatus(isModel ? 'empty' : '');
-            (_c = events === null || events === void 0 ? void 0 : events.queryEmpty) === null || _c === void 0 ? void 0 : _c.call(events, {
+            setStatus('empty');
+            (_b = events === null || events === void 0 ? void 0 : events.queryEmpty) === null || _b === void 0 ? void 0 : _b.call(events, {
                 datasource,
                 data: beforeDataChange([]),
             });
         }
         else {
             const statusCb = () => setStatus('success');
-            pagination === 'bottomLoad'
-                ? window.setTimeout(statusCb, bottomLoadTimer)
-                : statusCb();
+            if (pagination === 'bottomLoad') {
+                delayRef.current.statusTimer = window.setTimeout(statusCb, 150);
+            }
+            else {
+                statusCb();
+            }
         }
         const successCb = () => {
             var _a;
@@ -223,10 +292,12 @@ export default function ListView(props) {
                 data: beforeDataChange(dataRef.current.records),
             });
         };
-        pagination === 'bottomLoad'
-            ? window.setTimeout(successCb, bottomLoadTimer + 50)
-            : successCb();
-        setPageNo(((_e = (_d = paramRef.current) === null || _d === void 0 ? void 0 : _d.params) === null || _e === void 0 ? void 0 : _e.pageNo) || 1);
+        if (pagination === 'bottomLoad') {
+            delayRef.current.eventTimer = window.setTimeout(successCb, 200);
+        }
+        else {
+            successCb();
+        }
     };
     /**
      * 计算上下文对象数据
@@ -234,28 +305,107 @@ export default function ListView(props) {
     const getContextState = (state = {}) => {
         var _a, _b;
         const total = (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.total) !== null && _b !== void 0 ? _b : 0;
-        let { pageNo, pageSize, connectorParams } = paramRef.current.params;
-        if (!isModel) {
-            connectorParams =
-                Object.prototype.toString.call(connectorParams) === '[object Object]'
-                    ? connectorParams
-                    : {};
-            pageNo = connectorParams.pageNo;
-            pageSize = connectorParams.pageSize;
-        }
+        const { pageNo, pageSize } = paramRef.current.params;
         return { total, pageNo, pageSize, ...state };
     };
+    /**
+     * 组件刷新方法，重新初始化
+     */
+    const methodRefreshFromStart = async () => {
+        try {
+            clearDelay();
+            await fetchData({ params: { pageNo: 1 } }, { isInitData: true });
+            alertErrorMessage({
+                message: LISTVIEW_MESSAGE.refresh_success,
+                icon: 'success',
+            });
+        }
+        catch (e) {
+            alertErrorMessage({ message: LISTVIEW_MESSAGE.refresh_fail });
+        }
+    };
+    /**
+     * 组件刷新当前方法，保持当前已加载的数据列表状态
+     */
+    const methodRefreshKeepPage = async () => {
+        try {
+            clearDelay();
+            const { pageNo, pageSize } = paramRef.current.params;
+            const { total } = dataRef.current;
+            if (pagination === 'pagination') {
+                const pageNoRaw = (pageNo - 1) * pageSize + 1 === total ? pageNo - 1 : pageNo;
+                await fetchData({ params: { pageNo: pageNoRaw } }, { isInitData: true });
+            }
+            else if (['loadMoreButton', 'bottomLoad'].includes(pagination)) {
+                await fetchData({}, { isFetchCurrent: true, isInitData: true });
+            }
+            else {
+                await methodRefreshFromStart();
+            }
+            alertErrorMessage({
+                message: LISTVIEW_MESSAGE.refresh_success,
+                icon: 'success',
+            });
+        }
+        catch (e) {
+            alertErrorMessage({ message: LISTVIEW_MESSAGE.refresh_fail });
+        }
+    };
+    /**
+     * 组件刷新方法，通过类别区分
+     */
+    const methodRefresh = (params) => {
+        if (typeof params === 'object' && (params === null || params === void 0 ? void 0 : params.type) === 'refreshKeepPage') {
+            methodRefreshKeepPage();
+        }
+        else {
+            methodRefreshFromStart();
+        }
+    };
+    /**
+     * 组件删除单条方法
+     */
+    const methodDeleteOne = async (params) => {
+        try {
+            if (!isModel) {
+                return alertErrorMessage({
+                    message: LISTVIEW_MESSAGE.methods_no_support,
+                });
+            }
+            const _id = params === null || params === void 0 ? void 0 : params._id;
+            if (!_id || typeof _id !== 'string') {
+                return alertErrorMessage({
+                    message: LISTVIEW_MESSAGE.deleteOne_param_error,
+                });
+            }
+            clearDelay();
+            await (appCloud === null || appCloud === void 0 ? void 0 : appCloud.callDataSource({
+                dataSourceName: paramRef.current.dataSourceName,
+                methodName: 'wedaDelete',
+                params: { _id },
+            }));
+            await methodRefreshKeepPage();
+            alertErrorMessage({
+                message: LISTVIEW_MESSAGE.deleteOne_success,
+                icon: 'success',
+            });
+        }
+        catch (e) {
+            alertErrorMessage({ message: LISTVIEW_MESSAGE.deleteOne_fail });
+        }
+    };
     /**
      * 分页，加载更多
      */
     const renderLoadMore = () => {
-        let disabled = !hasNextPage();
-        if (isIdeMockData) {
-            disabled = false;
-        }
+        var _a, _b;
+        const pageNo = ((_b = (_a = paramRef.current) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.pageNo) || 1;
+        const MoreButton = (React.createElement("div", { className: `${BLOCK_NAME}__more-text`, onClick: () => fetchData({ params: { pageNo: pageNo + 1 } }) }, "\u52A0\u8F7D\u66F4\u591A"));
+        if (isIdeMockData)
+            return MoreButton;
         if (status === 'loading')
             return LoadingSymbol;
-        return (!disabled && (React.createElement("div", { className: `${BLOCK_NAME}__more-text`, onClick: () => fetchData({ params: { pageNo: pageNo + 1 } }) }, "\u52A0\u8F7D\u66F4\u591A")));
+        return !hasNextPage() ? LoadEnd : MoreButton;
     };
     /**
      * 分页，底部刷新
@@ -267,10 +417,11 @@ export default function ListView(props) {
      * 分页，分页器，含ideMockData的判断
      */
     const renderPagination = () => {
-        var _a, _b;
-        const preDisabeld = pageNo <= 1;
-        const nextDisabeld = !hasNextPage();
-        const total = (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.total) !== null && _b !== void 0 ? _b : 0;
+        var _a, _b, _c, _d;
+        const pageNo = ((_b = (_a = paramRef.current) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.pageNo) || 1;
+        const preDisabeld = pageNo <= 1 || status === 'loading';
+        const nextDisabeld = !hasNextPage() || status === 'loading';
+        const total = (_d = (_c = dataRef.current) === null || _c === void 0 ? void 0 : _c.total) !== null && _d !== void 0 ? _d : 0;
         return (React.createElement("div", { className: `${BLOCK_NAME}__more-pagination` },
             React.createElement("div", { className: classNames(`${BLOCK_NAME}__pagination-pre`, preDisabeld ? '' : 'active'), onClick: () => !preDisabeld && fetchData({ params: { pageNo: pageNo - 1 } }) }, "\u4E0A\u4E00\u9875"),
             React.createElement("div", { className: classNames(`${BLOCK_NAME}__pagination-text`) },
@@ -285,11 +436,12 @@ export default function ListView(props) {
     const renderStatus = () => {
         switch (status) {
             case 'empty':
-                return React.createElement("div", { className: `${BLOCK_NAME}__empty` }, "\u6682\u65E0\u6570\u636E");
+                return emptyText && React.createElement(EmptyContent, { emptyText: emptyText });
             case 'fail':
-                return React.createElement("div", { className: `${BLOCK_NAME}__fail` }, "\u52A0\u8F7D\u5931\u8D25");
+                return (isSetStatus && React.createElement("div", { className: `${BLOCK_NAME}__fail` }, "\u52A0\u8F7D\u5931\u8D25"));
             case 'loading':
-                return (pagination === 'pagination' && (React.createElement("div", { className: classNames(`${BLOCK_NAME}__more`, `${BLOCK_NAME}__content-loading`) }, LoadingSymbol)));
+                return (isSetStatus &&
+                    pagination === 'pagination' && (React.createElement("div", { className: classNames(`${BLOCK_NAME}__more`, `${BLOCK_NAME}__content-loading`) }, LoadingSymbol)));
         }
     };
     /**
@@ -302,15 +454,16 @@ export default function ListView(props) {
     /**
      * 加载到底状态组件
      */
-    const LoadEnd = React.createElement("div", null);
+    const LoadEnd = status === 'success' && loadCompletedText && (React.createElement("div", { className: `${BLOCK_NAME}__load-completed` }, String(loadCompletedText)));
     return (React.createElement("div", { ...rest, className: classNames('weda-ui', `${BLOCK_NAME}__containor`, className) },
-        children && (React.createElement("div", { className: classNames(template === 'cardList' ? `${BLOCK_NAME}-card` : '', `${BLOCK_NAME}__content`, ['empty', 'fail'].includes(status) && isSetStatus
+        children && (React.createElement("div", { className: classNames(template === 'cardList' ? `${BLOCK_NAME}-card` : '', `${BLOCK_NAME}__content`, (status === 'empty' && emptyText) ||
+                (status === 'fail' && isSetStatus)
                 ? `${BLOCK_NAME}__content-blank`
                 : '') },
             children,
-            isSetStatus && renderStatus())),
+            renderStatus())),
         React.createElement("div", { className: classNames(`${BLOCK_NAME}__more`, `${BLOCK_NAME}__more-${pagination}`) },
             pagination === 'bottomLoad' && renderBottomLoad(),
             pagination === 'loadMoreButton' && renderLoadMore(),
             pagination === 'pagination' && renderPagination())));
-}
+});