@cloudbase/weda-ui 0.2.14 → 0.2.17

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

@@ -0,0 +1,139 @@
+.weda-list-view__containor {
+  overflow-y: auto;
+  max-height: 100%;
+  overflow-x: hidden;
+}
+
+.weda-list-view-card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: 3px;
+}
+
+/* 加载更多 */
+.weda-list-view__containor .weda-list-view__more {
+  width: 100%;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__bottom-load {
+  padding-top: 1px;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-text {
+  padding-top: 10px;
+  padding-bottom: 14px;
+  font-size: 12px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+/* 加载更多 ... */
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-symbol {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 20px;
+  padding-bottom: 18px;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__symbol-item {
+  width: 8px;
+  height: 8px;
+  background: #c4c4c4;
+  margin-left: 6px;
+  border-radius: 50%;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__symbol-item:first-child {
+  width: 6px;
+  height: 6px;
+  margin-left: 0;
+}
+
+/* 加载更多 分页 */
+.weda-list-view__containor .weda-list-view__more {
+  background-color: #fff;
+}
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__more-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 10px 18px 12px 16px;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next {
+  font-size: 12px;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.4);
+  padding: 0 24px;
+  cursor: pointer;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre.active,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre::before,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next::after {
+  position: absolute;
+  content: '';
+  width: 24px;
+  height: 24px;
+  top: 10px;
+  opacity: 0.2;
+  background-image: url(arrow-right-line.svg);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-pre::before,
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-next::after {
+  opacity: 1;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre::before {
+  left: 16px;
+  transform: rotate(180deg);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next::after {
+  right: 18px;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-text {
+  font-size: 12px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+}

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

@@ -0,0 +1,354 @@
+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';
+
+const REL_DICT = {
+  equal: 'eq', // 等于
+  unequal: 'neq', // 不等于
+  include: 'search', // 包含
+  exclude: '_exclude', // 不包含
+  begin_with: '_begin_with', // 开头是
+  greater: 'gt', // 大于
+  greater_or_equal: 'gte', // 大于等于
+  bigger_or_equal: 'gte', //大于等于
+  less: 'lt', // 小于
+  less_or_equal: 'lte', // 小于等于
+  in: 'in', // 多选值
+  not_in: 'nin', // 不在多选值
+};
+const ORDERTYPE = ['asc', 'desc'];
+const BLOCK_NAME = 'weda-list-view';
+const isNull = (val) => [undefined, null].includes(val);
+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 && !isNull(val)) {
+            result.push({ key: item2.key, rel, val });
+          }
+        });
+      }
+    });
+  return result;
+};
+
+/**
+ * 数据容器-列表视图
+ */
+export default function ListView(props: IListView) {
+  const {
+    datasource,
+    orderBy,
+    orderType,
+    where,
+    template = 'simpleList',
+    pageSize = 5,
+    pagination = 'loadMoreButton',
+    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 (!isNull(pageNo) && !isNull(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`)}>
+        {pagination === 'bottomLoad' && renderBottomLoad()}
+        {pagination === 'loadMoreButton' && renderLoadMore()}
+        {pagination === 'pagination' && renderPagination()}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+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;
+}