@lingxiteam/ebe-utils 0.5.1 → 0.5.2

package/lib/public/src/components/pcfactory/src/Table/hooks/useFilter.tsx

@@ -0,0 +1,274 @@
+/* eslint-disable react/no-danger-with-children */
+import { Button, Checkbox } from 'antd';
+import { FilterDropdownProps } from 'antd/lib/table/interface';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+const useFilter = (props: any) => {
+  const {
+    compId,
+    innerDataSource,
+    currentRowKey,
+    getLocale,
+    outerDataSourceRef,
+  } = props;
+
+  const [filters, setFilters] = useState<any>({}); // 筛选条件
+  // 筛选时不影响页码，不使用antd默认的确定方法，因为会导致触发onChange方法
+  const [filterDropdownOpen, setFilterDropdownOpen] = useState({}); // 筛选浮层的关闭与否
+  const [selectedFilterKeys, setSelectedFilterKeys] = useState<any>({}); // 记录临时筛选条件，关闭筛选浮层后需要应用到筛选条件上
+  const tempFilterDomList = useRef<any>({}); // 记录筛选列对应的元素
+
+  const rowFilterSetList = useMemo(() => {
+    const trRowFilterSetList: any[] = [];
+    const domList = tempFilterDomList?.current || {};
+    if (Object.keys(filters)?.length) {
+      Object.keys(filters).forEach((dataIndex: string) => {
+        const valList = filters[dataIndex];
+        if (!valList) return;
+        const { valMap = {} } = domList[dataIndex] || {};
+        let keysList: string[] = [];
+        valList?.forEach((val: string) => {
+          const { rowKeyList } = valMap[val];
+          keysList = keysList.concat(rowKeyList);
+        });
+        if (keysList?.length) {
+          trRowFilterSetList.push(new Set(keysList));
+        }
+      });
+    }
+    if (Object.keys(filters)?.length === 0) {
+      // 过滤条件全部重置时，清除筛选项缓存
+      tempFilterDomList.current = {};
+    }
+    return trRowFilterSetList;
+  }, [filters]);
+
+  // 判断行是否经过筛选后需要隐藏
+  const checkIfHiddenRow = useCallback(
+    (rowId: string) => {
+      let flag: boolean = false;
+      if (rowFilterSetList?.length) {
+        flag = !rowFilterSetList.every((rowSet: Set<string>) =>
+          rowSet.has(rowId),
+        );
+      }
+      return flag;
+    },
+    [rowFilterSetList],
+  );
+
+  // 筛选下拉列表显隐
+  const onFilterDropdownVisibleChange = (dataIndex: string, open: boolean) => {
+    setFilterDropdownOpen((pre) => ({
+      ...pre,
+      [dataIndex]: open,
+    }));
+    if (!open) {
+      setFilters(selectedFilterKeys);
+    } else {
+      setSelectedFilterKeys(filters);
+    }
+  };
+
+  // 筛选条件下拉列表
+  const collectFilterDropDownDom = (colParams: { dataIndex: string }) => {
+    const { dataIndex } = colParams;
+    const rowKey = currentRowKey;
+    const tableDom = document.querySelector(`[data-compid='${compId}']`);
+    const valMap: any = {};
+    const originDataMap: any = {};
+    let prevTdInfo: any = null;
+    innerDataSource.forEach((d: any) => {
+      originDataMap[d[rowKey]] = d[dataIndex];
+      // 由于表格存在单元格渲染和自定义渲染的情况，所以筛选列表从td元素获取innerText作为最终展示
+      let td: any = tableDom?.querySelector(
+        `tr[data-row-key='${d[rowKey]}'] > td[td-dataIndex='${dataIndex}']`,
+      );
+      if (!td && prevTdInfo?.rowSpan > 1) {
+        // td没有找到，但是存在tr元素，表明可能开启了行合并，采用前一个
+        prevTdInfo.rowSpan -= 1;
+        td = prevTdInfo?.td;
+      } else {
+        prevTdInfo = {
+          td,
+          rowSpan: td?.rowSpan,
+        };
+      }
+      if (td) {
+        const val = td.innerText;
+        const rowKeyList = valMap[val]?.rowKeyList || [];
+        // 记录筛选
+        rowKeyList.push(d[rowKey]);
+        originDataMap[d[rowKey]] = val;
+        valMap[val] = {
+          dom: td.innerHTML,
+          rowKeyList,
+        };
+      }
+    });
+    tempFilterDomList.current = {
+      ...(tempFilterDomList.current || {}),
+      [`${compId}Dom`]: tableDom,
+      [dataIndex]: {
+        valMap,
+        originDataMap,
+      },
+    };
+  };
+
+  useEffect(() => {
+    // 源数据变化时，重置筛选条件以及重新收集筛选条件
+    setFilters({});
+    tempFilterDomList.current = {};
+  }, [outerDataSourceRef, currentRowKey]);
+
+  // 收集所有筛选条件
+  const collectAllFilters = (columns: any[], dataIndex: any) => {
+    if (
+      !Object.keys(tempFilterDomList.current)?.length ||
+      !tempFilterDomList.current?.[dataIndex]
+    ) {
+      columns.forEach((col) => {
+        if (col.filter) {
+          collectFilterDropDownDom({
+            ...col,
+          });
+        }
+      });
+    }
+  };
+
+  // 获取当前展示的筛选列表
+  const getCurrentFilterList = (dataIndex: string) => {
+    // 当前选项所有筛选列表
+    const currentFilter = { ...tempFilterDomList.current[dataIndex]?.valMap };
+    const valKeys = Object.keys(currentFilter || {});
+    if (valKeys?.length) {
+      valKeys.forEach((k: string) => {
+        const rowKeys = currentFilter[k]?.rowKeyList.filter(
+          (rowKey: string) => {
+            return Object.keys(filters || {}).every((dataKey: string) => {
+              if (dataKey !== dataIndex) {
+                const v = filters[dataKey];
+                if (v?.length) {
+                  const rowVal =
+                    tempFilterDomList.current[dataKey]?.originDataMap?.[rowKey];
+                  return v.includes(rowVal);
+                }
+              }
+              return true;
+            });
+          },
+        );
+        // 在其他条件过滤后，当前筛选项没有数据列时，则不展示
+        if (rowKeys.length === 0) {
+          delete currentFilter[k];
+        }
+      });
+    }
+    return currentFilter;
+  };
+
+  // 筛选自定义下拉菜单
+  const renderFilterDropDown = (
+    filterParams: FilterDropdownProps,
+    dataIndex: string,
+    columns: any[],
+  ) => {
+    const { visible } = filterParams;
+    if (!visible) return false;
+    const selectedKeys = selectedFilterKeys[dataIndex] || [];
+    const setSelectedKeys = (keys: string[] | null) =>
+      setSelectedFilterKeys((pre: any) => ({ ...pre, [dataIndex]: keys }));
+    collectAllFilters(columns, dataIndex);
+    const valMap = getCurrentFilterList(dataIndex);
+    return (
+      visible && (
+        <div className="ued-table-filters">
+          <div className="ued-table-filters-content">
+            {Object.keys(valMap || {}).map((val: any) => {
+              const { dom } = valMap[val];
+              return (
+                <div className="ued-table-filters-item">
+                  <Checkbox
+                    checked={selectedKeys.includes(val)}
+                    onChange={(e) => {
+                      let newSelected: any[] = [];
+                      if (e.target.checked) {
+                        newSelected = [...selectedKeys, val];
+                      } else {
+                        newSelected = selectedKeys.filter(
+                          (k: string) => k !== val,
+                        );
+                      }
+                      setSelectedKeys(newSelected?.length ? newSelected : null);
+                    }}
+                  >
+                    <div
+                      className="ued-table-filters-dom"
+                      // eslint-disable-next-line react/no-danger
+                      dangerouslySetInnerHTML={
+                        dom && val ? { __html: dom } : undefined
+                      }
+                    >
+                      {val ? null : `(${getLocale('Table.filter.empty')})`}
+                    </div>
+                  </Checkbox>
+                </div>
+              );
+            })}
+          </div>
+          <div className="ued-table-filters-bottom">
+            <Button
+              type="link"
+              disabled={selectedKeys?.length === 0}
+              size="small"
+              onClick={() => {
+                setSelectedKeys(null);
+              }}
+            >
+              {getLocale('reset')}
+            </Button>
+            <Button
+              type="primary"
+              size="small"
+              onClick={() => {
+                setFilters((pre: any) => ({
+                  ...pre,
+                  [dataIndex]: selectedKeys?.length ? selectedKeys : null,
+                }));
+                setFilterDropdownOpen((pre) => ({
+                  ...pre,
+                  [dataIndex]: false,
+                }));
+              }}
+            >
+              {getLocale('confirm')}
+            </Button>
+          </div>
+        </div>
+      )
+    );
+  };
+
+  const filterDataSource = useMemo(() => {
+    if (Object.keys(filters)?.length) {
+      return innerDataSource.filter(
+        (record: any) => !checkIfHiddenRow(record[currentRowKey]),
+      );
+    }
+    return innerDataSource;
+  }, [filters, innerDataSource]);
+
+  return {
+    filters,
+    filterDropdownOpen,
+    setFilters,
+    checkIfHiddenRow,
+    onFilterDropdownVisibleChange,
+    renderFilterDropDown,
+    filterDataSource,
+  };
+};
+
+export default useFilter;

package/lib/public/src/components/pcfactory/src/Table/hooks/useFormatCell.ts

@@ -0,0 +1,309 @@
+import { message } from 'antd';
+import type { FuncExpExeCuteType } from '../../utils/hooks/useFuncExpExecute';
+import {
+  CUSTOM,
+  DOWNLOAD_FILE,
+  OPEN_MODAL,
+  PAGE_JUMP,
+  PREVIEW_FILE,
+  ROUTE_PUSH,
+  ROUTE_REPLACE,
+} from '../constant';
+import type { ContentClick, FuncCode } from '../types/contentStyle';
+
+interface useFormatCellProps extends ContentClick {
+  appId: string;
+  pageId: string;
+  modalHeight?: number;
+  modalWidth?: number;
+  funcExpExecute?: FuncExpExeCuteType;
+  engineApis: any;
+}
+
+const useFormatCell = (props: useFormatCellProps) => {
+  const {
+    funcExpExecute,
+    engineApis,
+    appId,
+    pageId,
+    content,
+    clickType,
+    page,
+    modal,
+    openType,
+    fileIds,
+    filename,
+    previewType,
+    downloadUrl,
+    modalHeight,
+    modalWidth,
+  } = props;
+
+  const realAppId = appId;
+  const realPageId = pageId;
+
+  const handleCellContent = (row: any, rowIndex: number) => {
+    if ((content as FuncCode)?.code && funcExpExecute) {
+      return funcExpExecute((content as FuncCode).code, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: rowIndex,
+        },
+      ]);
+    }
+
+    return content;
+  };
+
+  const handlePageJump = async (
+    row: any,
+    rowId: string | number,
+    rowIndex: number,
+  ) => {
+    if (page) {
+      const { pagePath, searchParams = {} } = page;
+      const newSearchParams: any = {};
+
+      Object.keys(searchParams).forEach((key) => {
+        if (typeof searchParams[key] === 'string') {
+          const exp = searchParams[key];
+          searchParams[key] = (
+            row: any,
+            rowId: string | number,
+            index: number,
+          ) =>
+            engineApis?.sandBoxSafeRun(exp, {
+              row,
+              rowId,
+              index,
+            });
+        }
+
+        if (typeof searchParams[key] === 'function') {
+          try {
+            newSearchParams[key] = searchParams[key](row, rowId, rowIndex);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      });
+
+      let newPath = pagePath || '';
+      Object.keys(newSearchParams).forEach((key) => {
+        if (!newPath.includes(`${key}=`)) {
+          newPath += `${newPath.includes('?') ? '&' : '?'}${key}=${
+            newSearchParams[key]
+          }`;
+        }
+      });
+
+      switch (openType) {
+        case ROUTE_PUSH:
+          if (typeof engineApis?.historyPush === 'function') {
+            engineApis.historyPush(newPath);
+          }
+          break;
+        case ROUTE_REPLACE:
+          if (typeof engineApis?.historyReplace === 'function') {
+            engineApis.historyReplace(newPath);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  const handleOpenModal = async (
+    row: any,
+    rowId: string | number,
+    rowIndex: number,
+  ) => {
+    if (modal) {
+      const { pageId, compStates = {} } = modal;
+
+      const newCompStates: any = {};
+      Object.keys(compStates).forEach((key) => {
+        if (typeof compStates[key] === 'string') {
+          const exp = compStates[key];
+          compStates[key] = (row: any, rowId: string | number, index: number) =>
+            engineApis?.sandBoxSafeRun(exp, {
+              row,
+              rowId,
+              index,
+            });
+        }
+
+        if (typeof compStates[key] === 'function') {
+          try {
+            newCompStates[key] = compStates[key](row, rowId, rowIndex);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      });
+
+      if (engineApis?.openModal) {
+        engineApis.openModal({
+          pageId,
+          params: newCompStates,
+        });
+      }
+    }
+  };
+
+  const handleDownloadFile = async (row: any, rowIndex: number) => {
+    if (typeof engineApis?.batchDownloadFileByIds === 'function') {
+      try {
+        let realFilename = filename;
+        let realFileIds = fileIds;
+
+        if ((filename as FuncCode)?.code && funcExpExecute) {
+          realFilename = funcExpExecute((filename as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        if ((fileIds as FuncCode)?.code && funcExpExecute) {
+          realFileIds = funcExpExecute((fileIds as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        realFileIds = Array.isArray(realFileIds) ? realFileIds[0] : realFileIds;
+
+        engineApis.batchDownloadFileByIds({
+          fileIds: realFileIds,
+          newFileName: realFilename,
+          onError: (errorMessage: string) => {
+            message.error(errorMessage);
+          },
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  const handlePreviewFile = async (row: any, rowIndex: number) => {
+    let realFileIds: any = fileIds;
+
+    if ((fileIds as FuncCode)?.code && funcExpExecute) {
+      realFileIds = funcExpExecute((fileIds as FuncCode).code, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: rowIndex,
+        },
+      ]);
+    }
+
+    if (typeof engineApis?.BannerModal?.open === 'function') {
+      // 弹窗预览
+      realFileIds =
+        typeof realFileIds === 'string' ? [realFileIds] : realFileIds;
+      const fileList = realFileIds.map((fileId: string | number) => {
+        return {
+          fileId,
+          file: {
+            fileId,
+          },
+        };
+      });
+      engineApis.BannerModal.open({
+        fileIndex: 0,
+        fileList,
+        viewMode: previewType,
+        modalHeight,
+        pageId: realPageId,
+        appId: realAppId,
+        modalWidth,
+      });
+    } else if (
+      previewType !== undefined &&
+      typeof engineApis?.previewFile === 'function'
+    ) {
+      // 新窗口预览
+      realFileIds = Array.isArray(realFileIds) ? realFileIds[0] : realFileIds;
+      try {
+        engineApis.previewFile({
+          fileId: realFileIds,
+          appId: realAppId,
+          pageId: realPageId,
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  const onCellClick = async (
+    row: any,
+    rowId: string | number,
+    rowIndex: number,
+  ) => {
+    switch (clickType) {
+      case PAGE_JUMP:
+        handlePageJump(row, rowId, rowIndex);
+        break;
+      case OPEN_MODAL:
+        handleOpenModal(row, rowId, rowIndex);
+        break;
+      case DOWNLOAD_FILE:
+        handleDownloadFile(row, rowIndex);
+        break;
+      case PREVIEW_FILE:
+        handlePreviewFile(row, rowIndex);
+        break;
+      case CUSTOM: {
+        let realDownloadUrl: any = downloadUrl;
+
+        if ((downloadUrl as FuncCode)?.code && funcExpExecute) {
+          realDownloadUrl = funcExpExecute((downloadUrl as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        window.open(realDownloadUrl, openType);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  return {
+    onCellClick,
+    handleCellContent,
+  };
+};
+
+export default useFormatCell;

package/lib/public/src/components/pcfactory/src/Table/hooks/usePagination.ts

@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { useListenProps } from '../../utils';
+import { useLocale } from '../../utils/hooks/useLocale';
+
+const usePagination = (props: any) => {
+  const {
+    size,
+    showQuickJumper,
+    showSizeChanger,
+    pageSizeOptions,
+    page,
+    current: originCurrent,
+    total: originTotal,
+    pageSize: originPageSize,
+    showTotal,
+    onPageChange,
+  } = props;
+
+  // TODO: 有咩有判断是否是前端分页更好的方式？
+  const hasPageChangeEvent = typeof onPageChange === 'function'; // 是否配置页码改变回调事件（是：后端分页，否：前端分页）
+
+  const { getLocale } = useLocale(props?.getEngineApis?.());
+
+  const [currentPage, setCurrentPage] = useState(originCurrent || 1);
+  const [currentPageSize, setCurrentPageSize] = useState(originPageSize || 10);
+  const [total, setTotal] = useListenProps(originTotal);
+  const [current, setCurrent] = useListenProps(originCurrent);
+  const [pageSize] = useListenProps(originPageSize);
+
+  // 解析分页选择器配置
+  const parsedPageSizeOptions = useMemo(() => {
+    if (pageSizeOptions) {
+      try {
+        const arr = JSON.parse(pageSizeOptions);
+        if (Array.isArray(arr)) {
+          return arr.map((s) => String(s));
+        }
+        return [];
+      } catch (e) {
+        console.error('条数可选值 pageSizeOptions 必须配置为数字数组字符串'); // eslint-disable-line no-console
+      }
+    }
+    return [];
+  }, [pageSizeOptions]);
+
+  // current为空时默认为1
+  const paginationCurrent = (current ? +current : current) || 1;
+  const paginationPageSize = (pageSize ? +pageSize : pageSize) || 10;
+  const pagination = {
+    showTotal: showTotal
+      ? (total: number) => getLocale('Pagination.showTotal', { tol: total })
+      : undefined,
+    // TODO: 这里目前存在一个问题，若配置了空的分页事件，自动认为是后端分页，实际上
+    current: hasPageChangeEvent ? paginationCurrent : currentPage,
+    pageSize: hasPageChangeEvent ? paginationPageSize : currentPageSize,
+    total: Number(total) || undefined,
+    showQuickJumper,
+    showSizeChanger,
+    pageSizeOptions: parsedPageSizeOptions,
+    size: 'default',
+    className: classNames('ued-table-page', `ued-table-page-${size}`),
+    // onChange: (newCurrent: React.SetStateAction<number>, newPageSize: number) => {
+    //   if (hasPageChangeEvent) {
+    //     onPageChange(newCurrent, newPageSize);
+    //     return;
+    //   }
+    //   setCurrentPage(newCurrent);
+    //   setCurrentPageSize(newPageSize);
+    // },
+  };
+
+  useEffect(() => {
+    // 前端分页时，若传入的分页信息有变更且有效，需要更新内部维护的分页数据
+    if (!hasPageChangeEvent) {
+      if (
+        typeof current === 'number' ||
+        (typeof current === 'string' && !isNaN(Number(current)))
+      ) {
+        setCurrentPage(Number(current));
+      }
+
+      if (
+        typeof pageSize === 'number' ||
+        (typeof pageSize === 'string' && !isNaN(Number(pageSize)))
+      ) {
+        setCurrentPageSize(Number(pageSize));
+      }
+    }
+  }, [current, pageSize]);
+
+  return {
+    pagination,
+    page,
+    hasPageChangeEvent,
+    setCurrent,
+    setCurrentPage,
+    setCurrentPageSize,
+    setTotal,
+    onPageChange,
+  };
+};
+
+export default usePagination;