@cloudbase/weda-ui 2.0.28 → 3.1.0

package/src/web/components/listView/index.tsx

@@ -1,346 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useMemo,
-  useCallback,
-} from 'react';
-import { IListView } from './interface';
-import { callDataSource } from '../../utils/tcb';
-import { isInIde } from '../../utils/platform';
-import classNames from '../../utils/classnames';
-import isequal from 'lodash.isequal';
-import './index.css';
-import { REL_DICT } from '../../utils/constant';
-import { isNil } from '../../utils/lodash';
-
-const ORDERTYPE = ['asc', 'desc'];
-const BLOCK_NAME = 'weda-list-view';
-const getIdeMockData = (length = 3) => Array.from({ length }).map((d) => ({}));
-const getWhereList = (where) => {
-  let result = [];
-  Array.isArray(where) &&
-    where.forEach((item1) => {
-      if (item1?.groupLogic !== 'or' && Array.isArray(item1?.logicData)) {
-        item1?.logicData.forEach((item2) => {
-          let [rel, val] = [REL_DICT[item2?.rel], item2?.value];
-          if ('_begin_with' === rel) {
-            rel = 'regex';
-            val = `^${val}`;
-          }
-          if ('_exclude' === rel) {
-            rel = 'regex';
-            val = `^((?!${val}).)*$`;
-          }
-          if (item2?.logic !== 'or' && item2?.key && rel && !isNil(val)) {
-            result.push({ key: item2.key, rel, val });
-          }
-        });
-      }
-    });
-  return result;
-};
-
-/**
- * 数据容器-列表视图
- */
-export default function ListView(props: IListView) {
-  const {
-    datasource,
-    orderBy,
-    orderType,
-    where,
-    template,
-    pageSize = 5,
-    pagination,
-    events,
-    className,
-    children,
-    appCloud = { callDataSource, isInIde },
-    beforeDataChange = (v) => v,
-    ...rest
-  } = props;
-
-  const methodName = useMemo(
-    () => datasource?.extra?.methodName || 'wedaGetRecords',
-    [datasource?.extra?.methodName]
-  ); // 默认方法名
-  const [pageNo, setPageNo] = useState(1); // 分页状态
-  const [loading, setLoading] = useState(false); // 触底刷新加载状态
-  const [entry, setEntry] = useState(null); // 触底的observer对象
-  const paramRef = useRef({
-    dataSourceName: datasource.name,
-    methodName,
-    params: { orderBy, orderType, where, pageNo: 1, pageSize },
-    pagination,
-  }); // 最新请求参数
-  const dataRef = useRef({ total: 0, records: [] }); // 最新数据列表
-  const observeRef = useRef(null); // 当前监听对象
-  const isIdeMockData = !datasource?.name && appCloud?.isInIde?.(); // 在ide环境且未绑定数据源时，存在mock数据逻辑
-  const shouldBottomLoad =
-    pagination === 'bottomLoad' && entry?.isIntersecting && !loading; // 能否触底加载
-
-  // 组件卸载时触发
-  useEffect(() => {
-    return () => {
-      observeRef.current?.disconnect();
-      events?.onDataChange?.({ data: beforeDataChange([]) });
-    };
-  }, []);
-
-  // props 基本类型监听，需重新分页；处于 ide 且未绑定数据源时返回mock数据
-  useEffect(() => {
-    dataRef.current = { total: 0, records: [] };
-    if (datasource?.name) {
-      fetchData({
-        dataSourceName: datasource.name,
-        methodName,
-        params: {
-          ...paramRef.current?.params,
-          orderBy,
-          orderType,
-          pageNo: 1,
-          pageSize,
-        },
-        pagination,
-      });
-    } else {
-      if (isIdeMockData) {
-        events?.onDataChange?.({
-          data: beforeDataChange(getIdeMockData(pageSize)),
-        });
-      }
-    }
-  }, [datasource?.name, methodName, pageSize, pagination, orderBy, orderType]);
-
-  // props 对象类型监听，需重新分页
-  useEffect(() => {
-    if (!isequal(paramRef.current?.params?.where, where)) {
-      dataRef.current = { total: 0, records: [] };
-      fetchData({
-        params: { pageNo: 1, where },
-      });
-    }
-  });
-
-  // 监听触底加载事件，这里面的 setLoading 用 setTimeout包裹起来，所以会先执行新的children渲染，再执行 loading
-  useEffect(() => {
-    if (shouldBottomLoad && hasNextPage()) {
-      fetchData({
-        params: { pageNo: (paramRef.current?.params?.pageNo || 1) + 1 },
-      });
-    }
-  }, [shouldBottomLoad]);
-
-  // 触底监控对象
-  const nodeRefCallback = useCallback((node) => {
-    if (node) {
-      observeRef.current?.disconnect();
-      observeRef.current = new IntersectionObserver((entries) => {
-        setEntry(entries?.[0]);
-      });
-      observeRef.current.observe(node);
-    }
-  }, []);
-
-  // 能否点击下一页
-  const hasNextPage = () => {
-    const { pageNo = 1, pageSize = 5 } = paramRef.current?.params || {};
-    const { total = 0 } = dataRef.current || {};
-    return pageNo * pageSize < total;
-  };
-
-  /**
-   * 列表视图拉取数据
-   * 方法仅依赖入参和paramRef的参数
-   */
-  const fetchData = async (param: {
-    dataSourceName?: string;
-    methodName?: string;
-    params?: any;
-    pagination?: any;
-  }) => {
-    if (loading) return;
-    setLoading(true);
-    // 合并参数
-    const fetchParam = {
-      ...paramRef.current,
-      ...param,
-      params: { ...paramRef.current.params, ...param?.params },
-    };
-    const { dataSourceName, methodName, params } = fetchParam;
-    const { orderBy, orderType, pageNo, pageSize, where } = params || {};
-    const tcbParams = {};
-    // tcb分页参数
-    if (!isNil(pageNo) && !isNil(pageSize)) {
-      tcbParams['pageNo'] = pageNo;
-      tcbParams['pageSize'] = pageSize;
-    }
-    // tcb排序参数
-    if (orderBy && ORDERTYPE.includes(orderType)) {
-      tcbParams['orderBy'] = orderBy;
-      tcbParams['orderType'] = orderType;
-    }
-    // tcb过滤参数
-    const whereEffected = [].concat(getWhereList(where));
-    whereEffected.length > 0 && (tcbParams['where'] = whereEffected);
-    // tcb结果和事件
-    const data = await appCloud?.callDataSource({
-      dataSourceName,
-      methodName,
-      params: tcbParams,
-    });
-    paramRef.current = fetchParam;
-    onEnvets(data);
-  };
-
-  /**
-   * 根据fetchData方法返回值，回调给外部事件
-   * datasource 是对象类型，所以总能拿到最新的值
-   */
-  const onEnvets = (data) => {
-    const fetchRecords = [].concat(data?.records || []);
-    const total = data?.total || fetchRecords.length;
-    if (
-      ['loadMoreButton', 'bottomLoad'].includes(paramRef.current.pagination)
-    ) {
-      dataRef.current = {
-        total,
-        records: [...dataRef.current.records, ...fetchRecords],
-      };
-    } else {
-      dataRef.current = { total, records: fetchRecords };
-    }
-    events?.onDataChange?.({
-      data: beforeDataChange(dataRef.current.records || []),
-    });
-    if (JSON.stringify(data) === '{}') {
-      events?.queryFail?.({ datasource });
-    } else {
-      if (total === 0) {
-        events?.queryEmpty?.({ datasource, data: beforeDataChange([]) });
-      }
-      events?.querySuccess?.({
-        datasource,
-        data: beforeDataChange(dataRef.current.records),
-      });
-    }
-    setPageNo(paramRef.current?.params?.pageNo || 1);
-    window.setTimeout(() => setLoading(false));
-  };
-
-  /**
-   * 分页，加载更多
-   */
-  const renderLoadMore = () => {
-    let disabled = !hasNextPage();
-    if (isIdeMockData) {
-      disabled = false;
-    }
-    return (
-      !disabled &&
-      (loading ? (
-        LoadingSymbol
-      ) : (
-        <div
-          className={`${BLOCK_NAME}__more-text`}
-          onClick={() => fetchData({ params: { pageNo: pageNo + 1 } })}
-        >
-          加载更多
-        </div>
-      ))
-    );
-  };
-
-  /**
-   * 分页，底部刷新
-   */
-  const renderBottomLoad = () => {
-    return (
-      <div ref={nodeRefCallback} className={`${BLOCK_NAME}__bottom-load`}>
-        {loading ? LoadingSymbol : !hasNextPage() && LoadEnd}
-      </div>
-    );
-  };
-
-  /**
-   * 分页，分页器，含ideMockData的判断
-   */
-  const renderPagination = () => {
-    const preDisabeld = pageNo <= 1;
-    const nextDisabeld = !hasNextPage();
-    const total = dataRef.current?.total || 0;
-    return (
-      <div className={`${BLOCK_NAME}__more-pagination`}>
-        <div
-          className={classNames(
-            `${BLOCK_NAME}__pagination-pre`,
-            preDisabeld ? '' : 'active'
-          )}
-          onClick={() =>
-            !preDisabeld && fetchData({ params: { pageNo: pageNo - 1 } })
-          }
-        >
-          上一页
-        </div>
-        <div className={classNames(`${BLOCK_NAME}__pagination-text`)}>
-          <span className="active">
-            {isIdeMockData ? 1 : total ? pageNo : 0}
-          </span>
-          /{isIdeMockData ? 1 : Math.ceil(total / pageSize)}
-        </div>
-        <div
-          className={classNames(
-            `${BLOCK_NAME}__pagination-next`,
-            nextDisabeld ? '' : 'active'
-          )}
-          onClick={() =>
-            !nextDisabeld && fetchData({ params: { pageNo: pageNo + 1 } })
-          }
-        >
-          下一页
-        </div>
-      </div>
-    );
-  };
-
-  /**
-   * 加载中状态组件
-   */
-  const LoadingSymbol = (
-    <div className={`${BLOCK_NAME}__more-symbol`}>
-      <div className={`${BLOCK_NAME}__symbol-item`}></div>
-      <div className={`${BLOCK_NAME}__symbol-item`}></div>
-      <div className={`${BLOCK_NAME}__symbol-item`}></div>
-    </div>
-  );
-
-  /**
-   * 加载到底状态组件
-   */
-  const LoadEnd = <div></div>;
-
-  return (
-    <div
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-      className={classNames('weda-ui', `${BLOCK_NAME}__containor`, className)}
-    >
-      {children && (
-        <div className={template === 'cardList' ? `${BLOCK_NAME}-card` : ''}>
-          {children}
-        </div>
-      )}
-      <div
-        className={classNames(
-          `${BLOCK_NAME}__more`,
-          `${BLOCK_NAME}__more-${pagination}`
-        )}
-      >
-        {pagination === 'bottomLoad' && renderBottomLoad()}
-        {pagination === 'loadMoreButton' && renderLoadMore()}
-        {pagination === 'pagination' && renderPagination()}
-      </div>
-    </div>
-  );
-}

package/src/web/components/listView/interface.ts

@@ -1,98 +0,0 @@
-import React from 'react';
-
-/**
- * 数据容器公共属性
- */
-export interface IDataContainer {
-  /**
-   * 数据模型
-   */
-  datasource?: {
-    name?: string;
-    extra?: {
-      viewId?: string;
-      methodName?: string;
-    };
-  };
-  /**
-   * 数据筛选
-   */
-  where?: {
-    groupLogic?: null | 'or' | 'and';
-    logicData?: {
-      keyType?: 'field' | 'var-font';
-      key: string;
-      rel: 'eq' | 'neq' | 'lt' | 'gt' | 'gte' | 'lte' | 'in' | 'nin' | 'search';
-      value: any;
-      valueType?: 'const' | 'var-font' | 'relative-amount' | 'field';
-      expression?: string | boolean;
-      logic?: null | 'or' | 'and' | string;
-      extra?: {
-        type?: 'string' | 'number' | 'boolean' | 'object' | 'array' | string;
-        format?: string | null;
-        isExpression?: boolean;
-      };
-    }[];
-  }[];
-  /**
-   * 容器事件
-   */
-  events?: {
-    queryEmpty?: any;
-    querySuccess?: any;
-    queryFail?: any;
-    onDataChange?: (param: any) => any;
-  };
-  /**
-   * 类
-   */
-  className?: string;
-  /**
-   * app.cloud 对象依赖，默认会从 window.app 取值
-   */
-  appCloud?: { callDataSource?: any; isInIde?: any };
-  /**
-   * 子元素
-   */
-  children?: React.ReactNode | undefined;
-  /**
-   * 其他属性
-   */
-  [key: string]: any;
-}
-
-/**
- * 数据容器-列表视图
- */
-export interface IListView extends IDataContainer {
-  /**
-   * 数据字段
-   */
-  orderBy?: string;
-  /**
-   * 数据类型
-   */
-  orderType?: 'desc' | 'asc';
-  /**
-   * 模板
-   */
-  template?:
-    | 'simpleList'
-    | 'detailList'
-    | 'imageTextList'
-    | 'cardList'
-    | 'none';
-  /**
-   * 显示行数
-   */
-  pageSize?: number;
-  /**
-   * 分页类型，加载更多|底部刷新｜分页器
-   */
-  pagination?: 'loadMoreButton' | 'bottomLoad' | 'pagination' | 'none';
-
-  /**
-   * 调用 onDataChange 之前的数据转换，如列表视图需要接受 array，而数据视图需要接受 object
-   */
-  beforeDataChange?: (param: any) => any;
-}