@zat-design/sisyphus-react 4.4.1-beta.2 → 4.4.1-beta.4

package/es/ProTable/components/FormatColumn/index.d.ts

@@ -3,16 +3,18 @@
  * 重构优化：提取公共逻辑，修复 key prop 警告
  */
 import React from 'react';
+import type { FormInstance } from 'antd/es/form/Form';
 import type { ProTableColumnType } from '../../propsType';
-export declare const formatColumn: ({ column, originalObj, rowKey, wrapToolTipProps, scroll, onUpdateMinWidth, isInNewRow, diffConfig, }: {
+export declare const formatColumn: ({ column, originalObj, rowKey, wrapToolTipProps, scroll, isInNewRow, diffConfig, editMode, sharedForm, }: {
     column: ProTableColumnType;
     originalObj: any;
     rowKey: any;
     wrapToolTipProps?: any;
     scroll?: any;
-    onUpdateMinWidth?: any;
     isInNewRow?: any;
     diffConfig: any;
+    editMode?: 'per-cell-form' | 'shared-form';
+    sharedForm?: FormInstance;
 }) => void;
 /**
  * 查找最近的父级className

package/es/ProTable/components/FormatColumn/index.js

@@ -1,6 +1,5 @@
 import _omit from "lodash/omit";
 import _isBoolean from "lodash/isBoolean";
-import _isObject from "lodash/isObject";
 import _isString from "lodash/isString";
 import _isFunction from "lodash/isFunction";
 import _isEqual from "lodash/isEqual";
@@ -11,19 +10,16 @@ import _isEqual from "lodash/isEqual";
 import React, { isValidElement } from 'react';
 import dayjs from 'dayjs';
 import classnames from 'classnames';
-import { createRoot } from 'react-dom/client';
 import { Space } from 'antd';
 import { tools } from '@zat-design/utils';
 import TooltipTitle from "../TooltipTitle";
 import RenderColumn from "../RenderColumn";
 import EditableCell from "../EditableCell";
-import { getDecimalDigits, getOriginalValue } from "../../utils";
+import { getDecimalDigits, getOriginalValue, getRowKey as getRowKeyUtil } from "../../utils";
 import { isEmpty } from "../../../utils";
 import getEnumLabel from "../../../ProEnum/utils/getEnumLabel";
 import { ProCascader } from "../../../ProForm/components";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const isReactElement = element => /*#__PURE__*/isValidElement(element);
-
 // 需要从 otherProps 中排除的属性（不应传递给 RenderColumn）
 const EXCLUDED_PROPS = ['key', 'render', 'children', 'onCell', 'onHeaderCell', 'editConfig'];
 
@@ -72,45 +68,16 @@ const createRenderColumn = ({
     copyable: copyable
   });
 };
-const calcMinWidth = ({
-  minWidth,
-  width,
-  title,
-  isMaxContentOverFlow,
-  callback
-}) => {
-  if (!minWidth && !width && isMaxContentOverFlow) {
-    const tempEl = document.createElement('div');
-    tempEl.style.display = 'inline-block';
-    document.body.appendChild(tempEl);
-    let root = null;
-    if (_isFunction(title)) {
-      const component = title();
-      root = createRoot(tempEl);
-      root.render(component);
-    } else if (isReactElement(title)) {
-      root = createRoot(tempEl);
-      root.render(title);
-    } else {
-      tempEl.innerHTML = title;
-    }
-    requestAnimationFrame(() => {
-      const _width = tempEl.offsetWidth;
-      root?.unmount();
-      tempEl.remove();
-      callback(_width);
-    });
-  }
-};
 export const formatColumn = ({
   column,
   originalObj,
   rowKey,
   wrapToolTipProps,
   scroll,
-  onUpdateMinWidth,
   isInNewRow,
-  diffConfig
+  diffConfig,
+  editMode,
+  sharedForm
 }) => {
   const {
     title,
@@ -132,14 +99,6 @@ export const formatColumn = ({
     ...otherProps
   } = column;
   otherProps.scroll = scroll;
-  const isMaxContentOverFlow = _isObject(scroll) ? scroll?.x === 'max-content' && Reflect.ownKeys(scroll).includes('y') : false;
-  calcMinWidth({
-    minWidth,
-    width,
-    title,
-    isMaxContentOverFlow,
-    callback: onUpdateMinWidth
-  });
   const _toolTipProps = {
     ...toolTipProps,
     ...wrapToolTipProps
@@ -707,17 +666,25 @@ export const formatColumn = ({
       }
     };
     const prevRender = column.render;
+    const isSharedForm = editMode === 'shared-form';
     column.render = (value, record, index) => {
       const displayContent = prevRender ? prevRender(value, record, index) : value ?? '-';
+      const sharedFieldName = isSharedForm ? ['__editable__', String(getRowKeyUtil(rowKey, record) ?? ''), ...(Array.isArray(dataIndex) ? dataIndex : [dataIndex])] : undefined;
       return /*#__PURE__*/_jsx(EditableCell, {
         value: value,
         record: record,
         index: index,
         dataIndex: dataIndex,
         editConfig: mergedEditConfig,
-        displayContent: displayContent
+        displayContent: displayContent,
+        editMode: editMode,
+        sharedForm: isSharedForm ? sharedForm : undefined,
+        sharedFieldName: sharedFieldName
       });
     };
+    if (isSharedForm && !column.shouldCellUpdate) {
+      column.shouldCellUpdate = (record, prevRecord) => record !== prevRecord;
+    }
   }
 };
 

package/es/ProTable/components/RcTable/components/BaseTable/index.d.ts

@@ -1,10 +1,3 @@
 /// <reference types="react" />
-declare const _default: import("react").MemoExoticComponent<({ dataSource, tableProps, draggableProps, summaryProps, emptyTextProps, ...restProps }: {
-    [x: string]: any;
-    dataSource: any;
-    tableProps: any;
-    draggableProps: any;
-    summaryProps: any;
-    emptyTextProps: any;
-}) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").NamedExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

package/es/ProTable/components/RcTable/components/BaseTable/index.js

@@ -1,15 +1,15 @@
 import { Table } from 'antd';
-import { memo } from 'react';
+import { forwardRef, memo } from 'react';
 import { RenderEmptyText, RenderSummary, TableResizable } from "../../../index";
 import { jsx as _jsx } from "react/jsx-runtime";
-const BaseTable = ({
+const BaseTable = /*#__PURE__*/forwardRef(({
   dataSource,
   tableProps,
   draggableProps,
   summaryProps,
   emptyTextProps,
   ...restProps
-}) => {
+}, ref) => {
   const {
     columns,
     renderRowSelection,
@@ -23,6 +23,7 @@ const BaseTable = ({
     return null;
   };
   return /*#__PURE__*/_jsx(Table, {
+    ref: ref,
     components: renderComponents(),
     columns: columns,
     locale: {
@@ -35,5 +36,5 @@ const BaseTable = ({
     rowSelection: renderRowSelection(),
     ...restProps
   });
-};
+});
 export default /*#__PURE__*/memo(BaseTable);

package/es/ProTable/components/RcTable/components/DraggableTable/components/DndWrapper/index.d.ts

@@ -14,5 +14,5 @@ declare const DndWrapper: ({ draggable, value, onChange, disabled, children, row
     rowKey: any;
     onDragStartGuard: any;
     onDragEndGuard: any;
-}) => any;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DndWrapper;

package/es/ProTable/components/RcTable/components/DraggableTable/components/DndWrapper/index.js

@@ -1,11 +1,11 @@
 import _isFunction from "lodash/isFunction";
 import React from 'react';
-import { DndContext, closestCorners } from '@dnd-kit/core';
-import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+import { closestCorners } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
 import dragSvg from "../../../../../../../assets/drag.svg";
 import ProIcon from "../../../../../../../ProIcon";
 import { addLevelAndParentId, treeNodeFind, transformTreeToArray, createTreeFromArray } from "./utils/index";
+import { SortableTableContext, useDraggableRowState } from "../../../../../../../hooks/useDraggableRow";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const Row = props => {
   const {
@@ -13,34 +13,22 @@ export const Row = props => {
     children,
     ...restProps
   } = props;
-  const data = useSortable({
+  const {
+    setNodeRef,
+    style,
+    listeners,
+    attributes
+  } = useDraggableRowState({
     id: props['data-row-key'],
     disabled
   });
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = data;
-  const style = {
-    ...props.style,
-    transform: CSS.Transform.toString(transform && {
-      ...transform,
-      scaleY: 1
-    }),
-    transition,
-    ...(isDragging ? {
-      position: 'relative',
-      zIndex: 2
-    } : {})
-  };
   return /*#__PURE__*/_jsx("tr", {
     ...restProps,
     ref: setNodeRef,
-    style: style,
+    style: {
+      ...props.style,
+      ...style
+    },
     ...attributes,
     children: React.Children.map(children, (child, index) => {
       // 在第一列（通常是rowSelection列）显示拖拽图标
@@ -150,15 +138,14 @@ const DndWrapper = ({
     ...item,
     children: undefined
   }));
-  return draggable && !disabled ? /*#__PURE__*/_jsx(DndContext, {
+  return /*#__PURE__*/_jsx(SortableTableContext, {
+    draggable: draggable,
+    disabled: disabled,
+    items: flatTree?.[0]?.rowKey ? flatTree.map(i => i.rowKey) : [],
     onDragStart: onDragStart,
     onDragEnd: onDragEnd,
     collisionDetection: closestCorners,
-    children: /*#__PURE__*/_jsx(SortableContext, {
-      items: flatTree?.[0]?.rowKey ? flatTree.map(i => i.rowKey) : [],
-      strategy: verticalListSortingStrategy,
-      children: children
-    })
-  }) : children;
+    children: children
+  });
 };
 export default DndWrapper;

package/es/ProTable/components/RcTable/components/DraggableTable/index.d.ts

@@ -1,10 +1,3 @@
 /// <reference types="react" />
-declare const _default: import("react").MemoExoticComponent<({ dataSource, tableProps, draggableProps, summaryProps, emptyTextProps, ...restProps }: {
-    [x: string]: any;
-    dataSource: any;
-    tableProps: any;
-    draggableProps: any;
-    summaryProps: any;
-    emptyTextProps: any;
-}) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").NamedExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

package/es/ProTable/components/RcTable/components/DraggableTable/index.js

@@ -1,16 +1,16 @@
 import { Table } from 'antd';
-import { memo } from 'react';
+import { forwardRef, memo } from 'react';
 import DndWrapper, { Row } from "./components/DndWrapper";
 import { RenderEmptyText, RenderSummary } from "../../../index";
 import { jsx as _jsx } from "react/jsx-runtime";
-const DraggableTable = ({
+const DraggableTable = /*#__PURE__*/forwardRef(({
   dataSource,
   tableProps,
   draggableProps,
   summaryProps,
   emptyTextProps,
   ...restProps
-}) => {
+}, ref) => {
   const {
     columns,
     renderRowSelection,
@@ -33,6 +33,7 @@ const DraggableTable = ({
     onDragStartGuard: onDragStartGuard,
     onDragEndGuard: onDragEndGuard,
     children: /*#__PURE__*/_jsx(Table, {
+      ref: ref,
       className: "pro-edit-table-drag",
       components: {
         body: {
@@ -51,5 +52,5 @@ const DraggableTable = ({
       ...restProps
     })
   });
-};
+});
 export default /*#__PURE__*/memo(DraggableTable);

package/es/ProTable/components/RenderColumn/index.js

@@ -5,7 +5,6 @@ import { useSetState } from 'ahooks';
 import classNames from 'classnames';
 import { CheckOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
-import { parseWidth } from "../../utils";
 import { isEmpty, isEllipsisActive } from "../../../utils";
 import copySvg from "../../../assets/copy.svg";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -35,20 +34,6 @@ const RenderColumn = props => {
   }, setState] = useSetState({
     tooltip: false
   });
-
-  // 计算并更新宽度
-  const updateCalculatedWidth = element => {
-    if (!element) return null;
-    if (!textRef.current) return;
-    // 使用closest方法查找最近的tr
-    const tr = element.closest('tr');
-    if (!tr) return;
-    // 获取tr的宽度
-    const trWidth = tr.getBoundingClientRect().width;
-    // 计算实际宽度
-    const newWidth = parseWidth(width, trWidth);
-    return newWidth;
-  };
   const cellDiffCls = classNames({
     'varied-cell': props?.isChanged,
     'add-cell': props?.isAddCell
@@ -228,7 +213,6 @@ const RenderColumn = props => {
         children: "-"
       });
     }
-    const calculatedWidth = updateCalculatedWidth(textRef.current);
     return /*#__PURE__*/_jsx(Tooltip, {
       title: value,
       destroyOnHidden: true,
@@ -243,7 +227,7 @@ const RenderColumn = props => {
       children: /*#__PURE__*/_jsx(Text, {
         ref: textRef,
         style: {
-          width: calculatedWidth,
+          width,
           minWidth
         },
         ellipsis: true,

package/es/ProTable/index.d.ts

@@ -1,16 +1,17 @@
-/// <reference types="react" />
+import React from 'react';
 import type { ProTableType } from './propsType';
-import useAntdTable from './hooks/useAntdTable';
-export declare const TableContext: import("react").Context<{}>;
+import useAntdTable, { SELECTION_ALL, CURRENT_PAGE, UNCHECK_ALL } from './hooks/useAntdTable';
+export declare const TableContext: React.Context<{}>;
 export declare const defaultPage: {
     pageNum: number;
     pageSize: number;
 };
-declare const ProTable: {
-    (props: ProTableType): import("react/jsx-runtime").JSX.Element;
+declare const ProTable: React.ForwardRefExoticComponent<ProTableType<any> & React.RefAttributes<any>> & {
     useAntdTable: typeof useAntdTable;
-    SELECTION_ALL: string;
-    CURRENT_PAGE: string;
-    UNCHECK_ALL: string;
+    SELECTION_ALL: typeof SELECTION_ALL;
+    CURRENT_PAGE: typeof CURRENT_PAGE;
+    UNCHECK_ALL: typeof UNCHECK_ALL;
 };
+export { getColumnCache, setColumnCache, removeColumnCache } from './utils/columnStorage';
+export type { StorageType, ColumnCacheEntry } from './utils/columnStorage';
 export default ProTable;