@lingxiteam/ebe-utils 0.2.22 → 0.2.24

package/lib/pcpublic/src/components/pcfactory/src/Table/index.tsx

@@ -1,82 +1,57 @@
-/* eslint-disable no-nested-ternary */
-/* eslint-disable eqeqeq */
-/* eslint-disable array-callback-return */
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-underscore-dangle */
-import { Form, Table } from 'antd';
-import classnames from 'classnames';
-import React, { useMemo, useRef } from 'react';
-import { PrintContainer, usePrintMode } from '../utils';
-import { useCreation } from '../utils/ahooks';
-import EmptyComp from '../utils/Empty';
+import React from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import { Form } from 'antd';
+import { usePrintMode } from '../utils';
 import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
 import { useLocale } from '../utils/hooks/useLocale';
-import BodyCell from './BodyCell';
-import HeaderCell from './HeaderCell';
 import {
   useCMDAction,
-  useColumns,
   useCommon,
   useDataSource,
   useExpandable,
   useFilter,
   usePagination,
   useRowEdit,
-  useRowMerge,
-  useScroll,
   useSelection,
   useSort,
 } from './hooks';
-import TableHead from './TableHead';
-import TableSummaryRow from './TableSummaryRow';
-import type { MyTableProps } from './types/prop';
-
-// const prefixCls = 'table';
-
-const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
-  const { dataSource: boundDataSource, visible = true, style: styles, className, onChange, $$componentItem, getEngineApis, ...restProps } = props;
+import TableLoader from './loader';
+import IdleContainer from '../utils/IdleContainer';
 
+const Table = LingxiForwardRef<unknown, any>((props, ref) => {
+  const { dataSource: boundDataSource, $$componentItem, getEngineApis } = props;
   const { uid: compId } = $$componentItem;
-  const { size, sortDirections, sticky, summary, tableLayout, title, rowClassName, showHeader = true } = restProps || {};
-  const tableProps = {
-    size,
-    sortDirections,
-    sticky,
-    summary,
-    tableLayout,
-    title,
-    rowClassName,
-  } as any;
-  const [form] = Form.useForm();
 
+  const [form] = Form.useForm();
   const engineApis = getEngineApis?.();
-  const { sandBoxSafeRun, renderBusiComponent, dataState } = engineApis || {};
-
   const { getLocale } = useLocale(engineApis || {});
+  const { sandBoxSafeRun, renderBusiComponent } = engineApis || {};
 
   const funcExpExecute = useFuncExpExecute(sandBoxSafeRun as any, getLocale);
-
-  const appId = props?.appId || $$componentItem?.appId;
-  const pageId = props?.pageId || $$componentItem?.pageId;
-
+  const commonProps = useCommon({ ...props, boundDataSource });
   const {
-    // state, // TODO: 不知道啥时候用的，eval？
     currentRowKey,
-    isBordered,
-    innerClassName,
     setReplaceBoundDataSource,
     outerDataSource,
     outerDataSourceRef,
-  } = useCommon({ ...props, boundDataSource });
+  } = commonProps;
 
-  const { page, pagination, hasPageChangeEvent, setCurrent, setTotal, setCurrentPage, setCurrentPageSize, onPageChange } = usePagination({
+  const pageProps = usePagination({
     ...props,
     outerDataSourceRef,
     boundDataSource,
     engineApis,
   });
+  const {
+    page,
+    pagination,
+    hasPageChangeEvent,
+    setCurrent,
+    setTotal,
+    setCurrentPage,
+  } = pageProps;
 
-  const { innerDataSource, setInnerDataSource, setOuterDataSource, currentPageDataSource, setTableRowKey } = useDataSource({
+  const dataSourceProps = useDataSource({
     ...props,
     compId,
     currentRowKey,
@@ -90,25 +65,31 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     outerDataSourceRef,
     setCurrentPage,
   });
+  const {
+    innerDataSource,
+    setInnerDataSource,
+    setOuterDataSource,
+    currentPageDataSource,
+    setTableRowKey,
+  } = dataSourceProps;
 
-  const { filters, filterDropdownOpen, checkIfHiddenRow, renderFilterDropDown, onFilterDropdownVisibleChange, filterDataSource } = useFilter({
+  const filterProps = useFilter({
     compId,
     innerDataSource,
     currentRowKey,
     getLocale,
     outerDataSourceRef,
+    pagination,
   });
+  const { checkIfHiddenRow, filterDataSource } = filterProps;
 
-  const { sortDataSource, setSortOrder, onSortChange, hasSortEvent } = useSort({
+  const sortProps = useSort({
     ...props,
     innerDataSource: filterDataSource,
   });
+  const { sortDataSource } = sortProps;
 
-  const {
-    expandable: realExpandable,
-    expandTableData,
-    hasExpandContent,
-  } = useExpandable({
+  const expandProps = useExpandable({
     ...props,
     dataSource: sortDataSource,
     currentRowKey,
@@ -117,9 +98,20 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     funcExpExecute,
     engineApis,
   });
+  const { expandable: realExpandable, expandTableData } = expandProps;
 
+  const selectionProps = useSelection({
+    ...props,
+    innerDataSource,
+    currentRowKey,
+    currentPageDataSource,
+    checkIfHiddenRow,
+    page,
+    hasPageChangeEvent,
+    funcExpExecute,
+    expandable: realExpandable,
+  });
   const {
-    rowSelection,
     selectedRows,
     selectedRowKeys,
     currentPageSelectedRows,
@@ -130,35 +122,9 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     setCurrentPageSelectedRowKeys,
     setSelectedRowsRule,
     onRowSelected,
-    onRowSelectClick,
-  } = useSelection({
-    ...props,
-    innerDataSource,
-    currentRowKey,
-    currentPageDataSource,
-    checkIfHiddenRow,
-    page,
-    hasPageChangeEvent,
-    funcExpExecute,
-    expandable: realExpandable,
-  });
+  } = selectionProps;
 
-  const {
-    nowInlineEditKey,
-    nowEditingData,
-    editInlineRow,
-    setNowEditingData,
-    setNowInlineEditKey,
-    onRowAttrValsChange,
-    onRowSaveClick,
-    onRowCancelClick,
-    onRowDeleteClick,
-    onRowEditClick,
-    onRowDetailClick,
-    onRowClick,
-    onRowDoubleClick,
-    handleIsRowEditableCanUse,
-  } = useRowEdit({
+  const editProps = useRowEdit({
     ...props,
     funcExpExecute,
     innerDataSource,
@@ -171,17 +137,16 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     compId,
     form,
   });
+  const {
+    editInlineRow,
+    setNowEditingData,
+    setNowInlineEditKey,
+    onRowSaveClick,
+  } = editProps;
 
-  const { rowSpanColMap, rowSpanMap, rowClassMap } = useRowMerge({
-    ...props,
-    currentPageDataSource,
-    nowInlineEditKey,
-    currentRowKey,
-  });
-
-  const { showPrintContainer, loadPrint, selectorKey, printData } = usePrintMode(props.$$componentItem.uid);
+  const { loadPrint } = usePrintMode(props.$$componentItem.uid);
 
-  const { loading, colServiceData, colServiceDataForEdit } = useCMDAction({
+  const cmdProps = useCMDAction({
     ...props,
     ref,
     form,
@@ -215,309 +180,23 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     setTableRowKey,
   });
 
-  // 根据id获取真实的下标，避免过滤和排序后影响下标
-  const { getRealIndexById } = useCreation(() => {
-    const indexMap = new Map<string | number, number>();
-    return {
-      getRealIndexById: (id: string | number) => {
-        if (indexMap.has(id)) {
-          return indexMap.get(id);
-        }
-        const index = (innerDataSource || []).findIndex((c: any) => c[currentRowKey] === id);
-        if (index !== -1) {
-          indexMap.set(id, index);
-        }
-        return index;
-      },
-    };
-  }, [innerDataSource, currentRowKey]);
-
-  const {
-    tableRef,
-    finalcolumns,
-    customizableCols,
-    customSelectedCols,
-    setCustomSelectedCols,
-    setColCustomOrder,
-    columnWidth,
-    setColumnWidth,
-    initLoadColWidth,
-    printColumns,
-    fixedAction,
-  } = useColumns({
-    ...props,
-    sandBoxSafeRun,
-    funcExpExecute,
-    engineApis,
+  const innerProps = {
+    ...commonProps,
+    ...pageProps,
+    ...dataSourceProps,
+    ...filterProps,
+    ...sortProps,
+    ...expandProps,
+    ...selectionProps,
+    ...editProps,
+    ...cmdProps,
     form,
-    appId,
-    pageId,
-    compId,
-    innerDataSource,
-    currentRowKey,
-    nowInlineEditKey,
-    nowEditingData,
-    colServiceData,
-    colServiceDataForEdit,
-    hasSortEvent,
-    page,
-    pagination,
-    rowSpanMap,
-    rowClassMap,
-    rowSpanColMap,
-    onRowDetailClick,
-    onRowDeleteClick,
-    onRowEditClick,
-    onRowSaveClick,
-    onRowCancelClick,
-    onRowAttrValsChange,
-    loading,
-    handleIsRowEditableCanUse,
-    filters,
-    filterDropdownOpen,
-    onFilterDropdownVisibleChange,
-    renderFilterDropDown,
-    rowSelection,
-    getLocale,
-    getRealIndexById,
-    childrenColumnName: realExpandable.childrenColumnName,
-  });
-
-  const {
-    scroll,
-    tableWrapRef,
-    // initTableWrapWidthRef,
-    // getTableWrapWidth,
-  } = useScroll({
-    ...props,
-    initLoadColWidth,
-    finalcolumns,
-    columnWidth,
-    setColumnWidth,
-    sortDataSource,
-    pageId,
-  });
-
-  const superSelectTranslationMapRef: any = useRef(); // 防止state更新不及时，导致翻译无法获取翻译数据
-  if (!superSelectTranslationMapRef.current) {
-    superSelectTranslationMapRef.current = {};
-  }
-
-  const innerTableStyle: any = {};
-  if (styles?.overflowY) {
-    // 通过自定义样式给表格设置y轴滚动时， 认为希望只有表格滚动，但分页栏固定在底部
-    innerTableStyle.overflowY = styles.overflowY;
-  }
-
-  const handleTableChange = (newPagination: any, newFilters: any, newSorter: any, newExtra: any) => {
-    if (typeof onChange === 'function') {
-      onChange(newPagination, newFilters, newSorter, newExtra);
-    }
-
-    if (newExtra.action === 'paginate') {
-      if (hasPageChangeEvent) {
-        onPageChange(
-          newPagination?.current,
-          newPagination?.pageSize,
-          newSorter?.order === 'ascend' ? newSorter?.field : undefined,
-          newSorter?.order === 'descend' ? newSorter?.field : undefined
-        );
-        return;
-      }
-
-      setCurrentPage(newPagination?.current);
-      setCurrentPageSize(newPagination?.pageSize);
-    }
-
-    if (newExtra.action === 'sort' && hasSortEvent) {
-      // order 取值 ['ascend', 'descend']
-      const { field: colName, order } = newSorter;
-      if (order === 'ascend') {
-        onSortChange(colName, undefined, newPagination?.pageSize);
-      } else if (order === 'descend') {
-        onSortChange(undefined, colName, newPagination?.pageSize);
-      } else {
-        onSortChange(undefined, undefined, newPagination?.pageSize);
-      }
-    } else if (Object.keys(rowSpanColMap).length > 0) {
-      if (newSorter?.field) {
-        setSortOrder(newSorter);
-      }
-    }
   };
-
-  // 表格宽度需要根据列宽度赋值
-  // 2024.04.09, 表格开启拖拽后宽度不能伸缩，屏蔽表格宽度计算
-  // const finalStyles = useMemo(() => {
-  //   const tmpStyle = { ...styles };
-  //   const tableWidth = getTableWrapWidth();
-  //   if (tableWrapRef.current && tableWidth) {
-  //     const realTableWidth = tableWidth >= initTableWrapWidthRef.current - 10 ? initTableWrapWidthRef.current - 9 : tableWidth;
-  //     tmpStyle.width = `${realTableWidth}px`;
-  //   }
-  //   return tmpStyle;
-  // }, [columnWidth]);
-
-  const eleProps = {
-    appId,
-    pageId,
-    'data-compid': (props as any)?.['data-compid'],
-  };
-
-  const isEmptyLoading = useMemo(() => loading && sortDataSource?.length === 0, [loading, sortDataSource]);
-
-  return visible ? (
-    <>
-      <div {...eleProps} style={styles} className={classnames('ued-table-wrap', className)} ref={tableWrapRef}>
-        <TableHead
-          {...restProps}
-          source="engine"
-          columns={customizableCols}
-          selectedCols={customSelectedCols}
-          setSelectedCols={setCustomSelectedCols}
-          setColOrder={setColCustomOrder}
-          sandBoxSafeRun={sandBoxSafeRun}
-        />
-        <Form form={form}>
-          <Table
-            // {...restProps} // TODO: 不要这么透传，需要什么传什么，先注释，之后缺什么再补
-            {...tableProps}
-            showHeader={showHeader}
-            locale={{
-              emptyText: <EmptyComp dataState={dataState} getLocale={getLocale} />,
-            }}
-            ref={tableRef}
-            // loading={loading}
-            bordered={isBordered}
-            className={innerClassName}
-            style={innerTableStyle}
-            components={{
-              body: {
-                cell: BodyCell,
-              },
-              header: {
-                cell: (info: any) => (
-                  <HeaderCell
-                    {...info}
-                    tableData={sortDataSource}
-                    hasExpandContent={hasExpandContent}
-                    childrenColumnName={realExpandable.childrenColumnName}
-                  />
-                ),
-              },
-            }}
-            columns={finalcolumns.map((item, index) => {
-              // 固定列最后一项宽度根据本身计算返回
-              if (fixedAction && finalcolumns.length - 1 === index) {
-                return item;
-              }
-              item.width = columnWidth[index] || item.width;
-              return item;
-            })}
-            rowKey={currentRowKey}
-            scroll={scroll}
-            onChange={handleTableChange}
-            onRow={record => {
-              return {
-                onClick: event => {
-                  const hasOnRowClick = onRowClick(event, record, getRealIndexById(record[currentRowKey]));
-                  !hasOnRowClick && onRowSelectClick(record, getRealIndexById(record[currentRowKey]));
-                }, // 点击行
-                onDoubleClick: event => {
-                  onRowDoubleClick(event, record, getRealIndexById(record[currentRowKey]));
-                },
-                onContextMenu: event => {},
-                onMouseEnter: event => {}, // 鼠标移入行
-                onMouseLeave: event => {},
-              };
-            }}
-            rowSelection={rowSelection}
-            // loading没有数据的时候模拟3个数据,当数据为空时依然展示骨架屏
-            dataSource={isEmptyLoading ? [{}, {}, {}] : sortDataSource}
-            expandable={realExpandable}
-            pagination={isEmptyLoading ? false : page && pagination}
-            summary={(pageData: any[]) => (
-              <Table.Summary fixed={!!props?.scroll}>
-                <TableSummaryRow
-                  columns={finalcolumns}
-                  dataSource={pageData as any[]}
-                  summary={props.summary}
-                  summaryConfig={props?.summaryTotal}
-                  selectionType={rowSelection?.type}
-                />
-              </Table.Summary>
-            )}
-          />
-        </Form>
-      </div>
-      {showPrintContainer && (
-        <PrintContainer
-          containerProps={{
-            style: styles,
-            className: classnames('ued-table-wrap', className),
-            ...selectorKey,
-          }}
-        >
-          <TableHead
-            source="engine"
-            // @ts-ignore
-            columns={customizableCols}
-            selectedCols={customSelectedCols}
-            setSelectedCols={setCustomSelectedCols}
-            setColOrder={setColCustomOrder}
-            sandBoxSafeRun={sandBoxSafeRun}
-            {...restProps}
-            headExtends={[]}
-            engineApis={engineApis}
-          />
-          <Form form={form}>
-            {/** @ts-ignore */}
-            <Table
-              {...restProps}
-              showHeader={showHeader}
-              bordered={isBordered}
-              className={innerClassName}
-              style={innerTableStyle}
-              components={{
-                body: {
-                  cell: BodyCell,
-                },
-                header: {
-                  cell: (info: any) => (
-                    <HeaderCell
-                      {...info}
-                      tableData={printData?.dataSource?.length > 0 ? printData.dataSource : sortDataSource}
-                      childrenColumnName={realExpandable.childrenColumnName}
-                      hasExpandContent={hasExpandContent}
-                    />
-                  ),
-                },
-              }}
-              columns={printColumns.map((item, index) => {
-                item.width = columnWidth[index] || item.width;
-                return item;
-              })}
-              rowKey={currentRowKey}
-              dataSource={printData?.dataSource?.length > 0 ? printData.dataSource : sortDataSource}
-              expandable={realExpandable}
-              pagination={false}
-              summary={(pageData: readonly any[]) => (
-                <Table.Summary fixed={!!props?.scroll}>
-                  <TableSummaryRow
-                    columns={finalcolumns}
-                    dataSource={pageData as any[]}
-                    summary={props.summary}
-                    summaryConfig={props?.summaryTotal}
-                    selectionType={rowSelection?.type}
-                  />
-                </Table.Summary>
-              )}
-            />
-          </Form>
-        </PrintContainer>
-      )}
-    </>
-  ) : null;
+  return (
+    <IdleContainer>
+      <TableLoader {...props} {...innerProps} />
+    </IdleContainer>
+  );
 });
 
-export default MyTable;
+export default Table;

package/lib/pcpublic/src/components/pcfactory/src/Table/loader.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const TableLoader = Loadable<any, React.ComponentType<any>>({
+  loader: () => import(/* webpackChunkName: "pcfactory-Table" */ './Table'),
+  loading: LoadingComponennt,
+});
+
+export default TableLoader;
+
+
+// import Table from './Table';
+
+// export default Table;

package/lib/pcpublic/src/components/pcfactory/src/Table/types/OperationCell.d.ts

@@ -1,4 +1,4 @@
-import { LocaleFunction } from '@lingxiteam/types';
+import { LocaleFunction, EngineBaseProps } from '@lingxiteam/types';
 import React from 'react';
 
 export interface OperationCellProps {
@@ -20,7 +20,7 @@ export interface OperationCellProps {
   fixedAction?: boolean;
   isSmallPopover: boolean;
   tableRef: any;
-  $$componentItem: any;
+  $$componentItem: EngineBaseProps['$$componentItem'];
 }
 
 export interface SingleBtnProps {

package/lib/pcpublic/src/components/pcfactory/src/Table/types/event.d.ts

@@ -49,7 +49,7 @@ export interface TableRowExpandEventTypes {
    * @param expandedRowKeys
    * @returns
    */
-  onExpandedRowsChange?: (expandedRowKeys: any[]) => void;
+  onExpandedRowsChange?:(expandedRowKeys: any[]) => void;
 }
 
 export interface TableEditEventTypes {
@@ -107,12 +107,12 @@ export interface TableEditEventTypes {
   onBeforeInlineEdit?: (e: any) => void;
 
   /**
-   * 保存行内编辑时触发
-   * @param data
-   * @param id
-   * @param index
-   * @returns
-   */
+  * 保存行内编辑时触发
+  * @param data
+  * @param id
+  * @param index
+  * @returns
+  */
   onBeforeInlineSave?: (data: any, id: any, index: number | null) => void;
 }
 
@@ -127,4 +127,8 @@ export interface TablePaginationEventTypes {
   onPageChange?: (page: React.SetStateAction<number>, size: number) => void;
 }
 
-export type MyTableEventTypes = TableBaseEventTypes & TableRowExpandEventTypes & TableEditEventTypes & TablePaginationEventTypes;
+export type MyTableEventTypes =
+  TableBaseEventTypes &
+  TableRowExpandEventTypes &
+  TableEditEventTypes &
+  TablePaginationEventTypes

package/lib/pcpublic/src/components/pcfactory/src/Table/types/headerCell.d.ts

@@ -10,11 +10,12 @@ export type HeaderCellProps = React.HTMLAttributes<any> & {
   tableData?: any[];
   hasExpandContent?: boolean;
   childrenColumnName: string;
+  cellKey?: string;
 };
 
 export interface Code {
   code: any;
-  originCode: string;
+  originCode: string
 }
 
 export interface Tip {