@lingxiteam/ebe-utils 0.2.22 → 0.2.23

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

@@ -0,0 +1,439 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable eqeqeq */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-underscore-dangle */
+import { Table, Form } from 'antd';
+import classnames from 'classnames';
+import React, { useRef, useMemo } from 'react';
+import BodyCell from './BodyCell';
+import HeaderCell from './HeaderCell';
+import TableHead from './TableHead';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import {
+  useColumns,
+  useRowMerge,
+  useScroll,
+} from './hooks';
+import type { MyTableProps, WrapperTablePropsTypes } from './types/prop';
+import EmptyComp from '../utils/Empty';
+import { usePrintMode, PrintContainer } from '../utils';
+import { useLocale } from '../utils/hooks/useLocale';
+import { useCreation } from '../utils/ahooks';
+import TableSummaryRow from './TableSummaryRow';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+
+const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTablePropsTypes> & WrapperTablePropsTypes>((props) => {
+  const {
+    dataSource: boundDataSource,
+    visible = true,
+    style: styles,
+    className,
+    onChange,
+    $$componentItem,
+    getEngineApis,
+    backgroundType,
+    isBordered,
+    innerClassName,
+    setCurrentPageSize,
+    onPageChange,
+    filters,
+    filterDropdownOpen,
+    renderFilterDropDown,
+    onFilterDropdownVisibleChange,
+    setSortOrder,
+    onSortChange,
+    hasSortEvent,
+    hasExpandContent,
+    rowSelection,
+    onRowSelectClick,
+    nowInlineEditKey,
+    nowEditingData,
+    onRowAttrValsChange,
+    onRowCancelClick,
+    onRowDeleteClick,
+    onRowEditClick,
+    onRowDetailClick,
+    onRowClick,
+    onRowDoubleClick,
+    handleIsRowEditableCanUse,
+    currentPageDataSource,
+    currentRowKey,
+    innerDataSource,
+    colServiceData,
+    colServiceDataForEdit,
+    loading,
+    page,
+    pagination,
+    onRowSaveClick,
+    expandable: realExpandable,
+    sortDataSource,
+    hasPageChangeEvent,
+    setCurrentPage,
+    form,
+    ...restProps
+  } = 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 engineApis = getEngineApis?.();
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis, appId: $$componentItem?.appId, mode: 'engine' });
+
+  const {
+    sandBoxSafeRun,
+    dataState,
+  } = engineApis || {};
+
+
+  const { getLocale } = useLocale(engineApis || {});
+
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun as any, getLocale);
+
+  const appId = props?.appId || $$componentItem?.appId;
+  const pageId = props?.pageId || $$componentItem?.pageId;
+
+  const {
+    rowSpanColMap,
+    rowSpanMap,
+    rowClassMap,
+  } = useRowMerge({
+    ...props,
+    currentPageDataSource,
+    nowInlineEditKey,
+    currentRowKey,
+  });
+
+  const { showPrintContainer, selectorKey, printData } = usePrintMode(props.$$componentItem.uid);
+
+  // 根据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,
+    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 InnerHeaderCell = useMemo(() => {
+    return (info: any) => <HeaderCell
+      {...info}
+      key={info.columnIndex}
+      tableData={sortDataSource}
+      hasExpandContent={hasExpandContent}
+      childrenColumnName={realExpandable.childrenColumnName}
+    />;
+  }, [sortDataSource, hasExpandContent, realExpandable.childrenColumnName]);
+  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={{ ...backgroundStyle, ...styles }}
+        className={classnames(
+          'ued-table-wrap',
+          className,
+        )}
+        ref={tableWrapRef}
+      >
+        <TableHead
+          {...restProps}
+          source="engine"
+          columns={customizableCols}
+          selectedCols={customSelectedCols}
+          setSelectedCols={setCustomSelectedCols}
+          setColOrder={setColCustomOrder}
+          sandBoxSafeRun={sandBoxSafeRun}
+          getEngineApis={getEngineApis}
+        />
+        <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: InnerHeaderCell,
+              },
+            }}
+            columns={finalcolumns.map((item, index) => {
+              // 固定列最后一项宽度根据本身计算返回
+              if (fixedAction && finalcolumns.length - 1 === index) {
+                return item;
+              }
+              item.width = columnWidth[item?.key] || 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: { ...backgroundStyle, ...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[item.key] || 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;
+});
+
+export default MyTable;