@zat-design/sisyphus-react 4.5.8 → 4.5.9-beta.1

package/es/ProEditTable/components/RenderField/index.js

@@ -26,7 +26,7 @@ import { getDefaultProps } from "../../utils/getDefaultProps";
 import ListChangedWrapper from "./ListChangedWrapper";
 import useShouldUpdateForTable from "../../utils/useShouldUpdateForTable";
 import { OMIT_FORM_ITEM_AND_DOM_KEYS, arePropsEqual, hasRowFunctionDependency, mergeOnFieldChangeRow } from "./tools";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const RenderField = ({
   text: value,
   record,
@@ -90,6 +90,8 @@ const RenderField = ({
 
   // type类型 首字母转大写
   type = type?.replace?.(type[0], type[0].toUpperCase()) || 'Input';
+  const fallbackType = type;
+  const hasCustomComponent = 'component' in column || 'editRender' in column;
 
   // 自定义组件时 防止默认值影像后续判断
   if ('component' in column) {
@@ -176,7 +178,7 @@ const RenderField = ({
 
   // component 处理 - 优先使用 hook 返回的值
   if (_isFunction(lastComponent)) {
-    lastComponent = dynamicProps.component ?? lastComponent(rowData, reactiveParams);
+    lastComponent = dynamicProps.componentResolved ? dynamicProps.component : lastComponent(rowData, reactiveParams);
   }
 
   // 更新 lastEditRender 为处理后的 lastComponent
@@ -198,6 +200,23 @@ const RenderField = ({
 
   // 多态：可能是内置组件类型、自定义 component，或已渲染的 ReactElement（lastEditRender），保留显式 any
   let TargetComponent;
+  const fallbackTargetComponent = typeof fallbackType === 'string' ? componentMap[fallbackType] : undefined;
+  const invalidComponentWarnedRef = useRef(false);
+  const resolveEditTargetComponent = candidate => {
+    if ( /*#__PURE__*/React.isValidElement(candidate)) {
+      invalidComponentWarnedRef.current = false;
+      return candidate;
+    }
+    if (hasCustomComponent && !invalidComponentWarnedRef.current && process.env.NODE_ENV !== 'production') {
+      const columnName = dataIndex ?? column?.name ?? title ?? originTitle ?? 'unknown';
+      console.warn('[ProEditTable] component 必须返回合法的 ReactElement，已回退到内置组件。', {
+        column: Array.isArray(columnName) ? columnName.join('.') : String(columnName),
+        received: candidate
+      });
+      invalidComponentWarnedRef.current = true;
+    }
+    return fallbackTargetComponent;
+  };
 
   // 将Hooks调用移到组件顶层
   const proConfig = useProConfig();
@@ -320,20 +339,9 @@ const RenderField = ({
       ...valueTypeTransform()
     }, form, names, namesStr, type);
   }, [names, baseName, index, dataIndex, lastFormItemProps, type]);
-  if (!lastEditRender && typeof type === 'string') {
-    // componentMap 为内置组件命名空间，按字符串 type 动态取用，保留显式 any 索引
-    TargetComponent = componentMap[type] ?? /*#__PURE__*/_jsx(_Fragment, {});
-  }
-  if (isEditable && isEditing) {
-    // lastEditRender 已经是处理后的值（通过 dynamicProps.component 或直接计算）
-    // 如果原本是函数，此时 lastEditRender 已经是执行后的 ReactNode
-    // 如果原本是 ReactElement，lastEditRender 就是 ReactElement
-    if ( /*#__PURE__*/React.isValidElement(lastEditRender)) {
-      TargetComponent = lastEditRender;
-    } else if (lastEditRender) {
-      // 其他情况（可能是字符串或其他类型的 ReactNode）
-      TargetComponent = lastEditRender;
-    }
+  TargetComponent = fallbackTargetComponent;
+  if (isEditable && isEditing && hasCustomComponent) {
+    TargetComponent = resolveEditTargetComponent(lastEditRender);
   }
 
   // 查看模式
@@ -729,10 +737,7 @@ const RenderField = ({
       onChange: handleChange,
       onBlur: handleBlur
     };
-    let latestTargetComponent = TargetComponent;
-    if (!canReuseCurrentState && !latestComponent && typeof type === 'string') {
-      latestTargetComponent = componentMap[type] ?? /*#__PURE__*/_jsx(_Fragment, {});
-    }
+    let latestTargetComponent = canReuseCurrentState ? TargetComponent : fallbackTargetComponent;
 
     // 然后处理自定义 component
     const latestIsView = !latestIsEditable || record?.['is-view'] || config.isView || virtualKey && !isEditing || getDisabled({
@@ -744,12 +749,8 @@ const RenderField = ({
       params: latestRowParams,
       rowDisabled: rowDisabled || 'empty'
     });
-    if (!canReuseCurrentState && latestIsEditable && isEditing) {
-      if ( /*#__PURE__*/React.isValidElement(latestComponent)) {
-        latestTargetComponent = latestComponent;
-      } else if (latestComponent) {
-        latestTargetComponent = latestComponent;
-      }
+    if (!canReuseCurrentState && latestIsEditable && isEditing && hasCustomComponent) {
+      latestTargetComponent = resolveEditTargetComponent(latestComponent);
     }
 
     // 查看模式
@@ -936,7 +937,7 @@ const RenderField = ({
     }) : /*#__PURE__*/_jsx(Container, {
       viewEmpty: viewEmpty
     });
-    if (type === 'FormList') {
+    if (type === 'FormList' && !hasCustomComponent && TargetComponent) {
       FormItem = /*#__PURE__*/_jsx(Form.List, {
         name: formNamePath ? cellName.slice(formNamePath?.length - 1) : cellName,
         ..._omit(activeFinalFormItemProps, ['render', 'key', 'width', 'hiddenNames', 'name']),

package/es/ProEditTable/propsType.d.ts

@@ -1,5 +1,5 @@
 import { AffixProps, ModalFuncProps } from 'antd';
-import { Key, ReactNode } from 'react';
+import { Key, ReactElement, ReactNode } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
 import type { ButtonProps } from 'antd/es/button';
 import type { TooltipProps } from 'antd/es/tooltip';
@@ -134,7 +134,7 @@ export type viewRenderFn<T = any> = (text?: any, record?: T, options?: OptionsPr
  * 组件渲染函数类型（与 ReactiveFunction 保持一致）
  * @template T 记录类型
  */
-export type ComponentRenderFn<T = any> = ReactiveFunction<T, string | number | ReactNode | void>;
+export type ComponentRenderFn<T = any> = ReactiveFunction<T, ReactElement>;
 /**
  * 表格列属性接口
  * @template Values 值类型
@@ -157,8 +157,8 @@ export interface ProColumnsProps<Values = any, T = any> extends Omit<FormItemPro
     tooltip?: string | ({
         icon?: string | ReactNode;
     } & TooltipProps);
-    /** 组件 */
-    component?: string | number | ReactNode | ComponentRenderFn<T>;
+    /** 自定义组件，或返回合法 ReactElement 的响应式渲染函数 */
+    component?: ReactElement | ComponentRenderFn<T>;
     /** 视图渲染 */
     viewRender?: string | number | ReactNode | viewRenderFn<T>;
     /** 隐藏的字段名 */

package/es/ProEditTable/utils/useShouldUpdateForTable.d.ts

@@ -11,6 +11,8 @@ interface Result {
     desensitization: any;
     valueType: any;
     component: any;
+    /** 动态 component 是否已经执行过，用于区分“返回 undefined”和“尚未计算”。 */
+    componentResolved: boolean;
     /** 当前缓存结果对应的行浅快照，供 RenderField 判断是否可安全复用。 */
     rowSnapshot: Record<string, any> | undefined;
 }

package/es/ProEditTable/utils/useShouldUpdateForTable.js

@@ -19,6 +19,7 @@ const useShouldUpdateForTable = props => {
   const desensitizationRef = useRef(undefined);
   const valueTypeRef = useRef(undefined);
   const componentRef = useRef(undefined);
+  const componentResolvedRef = useRef(false);
   const resolvedRowSnapshotRef = useRef(undefined);
   const [, reRender] = useState({});
   const debouncedUpdateRef = useRef(null);
@@ -101,6 +102,7 @@ const useShouldUpdateForTable = props => {
     const componentOrEditRender = column.component || column.editRender;
     if (_isFunction(componentOrEditRender)) {
       const newComponent = componentOrEditRender(values, reactiveParams);
+      componentResolvedRef.current = true;
       // 对于 ReactNode 类型的返回值，使用深度比较
       if (!_isEqualWith(componentRef.current, newComponent, customEqualForFunction)) {
         componentRef.current = newComponent;
@@ -170,7 +172,8 @@ const useShouldUpdateForTable = props => {
     fieldProps: fieldPropsRef.current ?? column.fieldProps,
     desensitization: desensitizationRef.current ?? column.desensitization,
     valueType: valueTypeRef.current ?? column.valueType,
-    component: componentRef.current ?? (column.component || column.editRender),
+    component: componentResolvedRef.current ? componentRef.current : column.component || column.editRender,
+    componentResolved: componentResolvedRef.current,
     rowSnapshot: resolvedRowSnapshotRef.current
   };
 };

package/es/ProForm/components/combination/ProModalSelect/hooks/useRequestList.js

@@ -81,9 +81,11 @@ export function useRequestList(service, options, useRequestOptions) {
     });
   }, [onPageChange]);
   const onSearch = useCallback(values => {
+    if (page.pageNum !== 1) {
+      // 查询或重置都从第一页开始，保留当前每页条数
+      onChange(1, page.pageSize);
+    }
     if (!_isEqual(searchValues, values)) {
-      // 保留当前页码和每页条数
-      onChange(page.pageNum, page.pageSize);
       setSearchValues(values);
     }
   }, [onChange, searchValues, page]);

package/es/ProLayout/components/TabsManager/style/index.less

@@ -171,12 +171,11 @@
       padding: 4px 0 5px !important;
       margin-right: 8px !important;
       margin-left: 0;
-      background: #e7e8ee;
+      background: #F5F5F5;
       transition: none;
       border-color: #e7e8ee;
       &.@{ant-prefix}-tabs-tab-active {
         background: #ffffff;
-        border-top: 2px solid var(--zaui-brand, #006aff);
       }
     }
     .ant-tabs-nav {

package/es/ProTable/components/EditableCell/EditIcon.js

@@ -1,12 +1,13 @@
 import { EditOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
 import React from 'react';
-import styles from "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditIcon = ({
   onClick
 }) => {
+  const cls = classNames('pro-table-editable-cell-edit-icon');
   return /*#__PURE__*/_jsx("span", {
-    className: styles['editable-cell-edit-icon'],
+    className: cls,
     onClick: onClick,
     children: /*#__PURE__*/_jsx(EditOutlined, {})
   });

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

@@ -1,9 +1,9 @@
 import _isEqual from "lodash/isEqual";
 import React, { useState, useRef } from 'react';
 import { Form } from 'antd';
+import classNames from 'classnames';
 import * as componentMap from "../../../ProForm/components";
 import EditIcon from "./EditIcon";
-import styles from "./index.less";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InternalCell = ({
   value,
@@ -29,6 +29,7 @@ const InternalCell = ({
     ...restFieldProps
   } = fieldProps;
   const Component = componentMap[type] ?? componentMap.Input;
+  const wrapperClassName = classNames('pro-table-editable-cell-wrapper');
   const handleEditIconClick = () => {
     snapshotRef.current = value;
     form.setFieldValue(fieldName, value);
@@ -57,7 +58,7 @@ const InternalCell = ({
   };
   if (!editing) {
     return /*#__PURE__*/_jsxs("span", {
-      className: styles['editable-cell-wrapper'],
+      className: wrapperClassName,
       children: [/*#__PURE__*/_jsx("span", {
         children: displayContent ?? '-'
       }), /*#__PURE__*/_jsx(EditIcon, {

package/es/ProTable/style/index.less

@@ -624,6 +624,32 @@
       }
     }
   }
+
+  .pro-table-editable-cell-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    gap: 4px;
+    white-space: nowrap;
+  }
+
+  .pro-table-editable-cell-edit-icon {
+    display: inline-flex;
+    align-items: center;
+    color: #d8d8d8;
+    cursor: pointer;
+    visibility: hidden;
+    flex-shrink: 0;
+
+    &:hover {
+      color: var(--zaui-brand, #006aff);
+    }
+  }
+
+  td:hover .pro-table-editable-cell-edit-icon {
+    visibility: visible;
+  }
 }
 
 .@{ant-prefix}-dropdown-placement-bottomLeft {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.5.8",
+  "version": "4.5.9-beta.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public",

package/es/ProTable/components/EditableCell/index.less

@@ -1,24 +0,0 @@
-.editable-cell-wrapper {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-  gap: 4px;
-}
-
-.editable-cell-edit-icon {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  visibility: hidden;
-  color: rgba(0, 0, 0, 0.65);
-  flex-shrink: 0;
-
-  &:hover {
-    color: var(--zaui-brand, #006aff);
-  }
-}
-
-td:hover .editable-cell-edit-icon {
-  visibility: visible;
-}