@zat-design/sisyphus-react 4.4.3-beta.2 → 4.5.0-beta.1

package/README.md

@@ -48,7 +48,7 @@ $ yarn add @zat-design/sisyphus-react
 
 ### 按需加载
 
-#### 方式一：自动 Tree-Shaking（推荐）
+#### 自动 Tree-Shaking
 
 本组件库已配置 `sideEffects`，**现代打包器（Webpack 5+、Vite、Rollup）会自动进行 tree-shaking**，无需额外配置：
 
@@ -57,47 +57,6 @@ $ yarn add @zat-design/sisyphus-react
 import { ProForm } from '@zat-design/sisyphus-react';
 ```
 
-#### 方式二：babel-plugin-import（兼容老项目）
-
-如果使用 Webpack 4 或需要更精确的控制，可使用 babel-plugin-import：
-
-```js
-[
-  'babel-plugin-import',
-  {
-    libraryName: '@zat-design/sisyphus-react',
-    camel2DashComponentName: false,
-    libraryDirectory: 'es',
-    style: false,
-  },
-];
-```
-
-在 umi 框架下同时配置 antd 按需加载时，需要配置别名：
-
-```js
-extraBabelPlugins: [
-  [
-    'babel-plugin-import',
-    {
-      libraryName: 'antd',
-      libraryDirectory: 'es',
-      style: true,
-    },
-  ],
-  [
-    'babel-plugin-import',
-    {
-      libraryName: '@zat-design/sisyphus-react',
-      camel2DashComponentName: false,
-      libraryDirectory: 'es',
-      style: false,
-    },
-    '@zat-design/sisyphus-react',
-  ],
-];
-```
-
 ### 使用示例
 
 ```tsx

package/es/ProEditTable/components/RenderField/ListChangedWrapper.d.ts

@@ -1,17 +1,4 @@
 import React from 'react';
-import { FormInstance } from 'antd';
-import { NamePath } from 'antd/lib/form/interface';
-import { DiffOriginalParams } from '../../utils/diffOriginal';
-interface Props {
-    name?: NamePath;
-    names?: NamePath[];
-    originalName?: NamePath;
-    originalNames?: NamePath[];
-    namesStr?: NamePath;
-    originalValues?: any;
-    form: FormInstance;
-    onDiff?: DiffOriginalParams['onDiff'];
-    [name: string]: any;
-}
+import { Props } from './propsType';
 declare const ListChangedWrapper: React.FC<Props>;
 export default ListChangedWrapper;

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

@@ -1,80 +1,12 @@
 import _omit from "lodash/omit";
-import _get from "lodash/get";
 import React, { useMemo } from 'react';
 import { Space, Tooltip } from 'antd';
 import classnames from 'classnames';
 import { diffOriginal } from "../../utils/diffOriginal";
 import { useProConfig } from "../../../ProConfigProvider";
 import { isEmpty } from "../../../utils";
-
-/** 克隆子元素时需从 props 中剔除，避免透传到 div 等 DOM 导致 React 警告 */
+import { OMIT_FROM_DOM_KEYS, toNamePath, toNamePaths, getOriginalValue } from "./tools";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const OMIT_FROM_DOM_KEYS = ['disabled',
-// div 不支持 disabled，且值可能非 string/number
-'toCSTString', 'toISOString', 'format', 'switchValue', 'precision', 'clearNotShow', 'dependNames'];
-const toNamePath = name => {
-  if (Array.isArray(name)) {
-    return name;
-  }
-  return [name];
-};
-const toNamePaths = names => {
-  return names.map(name => toNamePath(name));
-};
-const getOriginalValue = ({
-  namePath,
-  // 表格内变动字段的name
-  originalName,
-  // 原始值中对应值的name
-  originalNames,
-  // names时 原始值中对应值的name
-  originalValues,
-  // 原始值
-  rowKeyPath,
-  // 可编辑表格场景下需要根据rowKey对比行数据
-  form
-}) => {
-  if (!originalValues) {
-    return undefined;
-  }
-  let originRecord;
-  if (rowKeyPath) {
-    const rowValueNamePath = namePath.slice(0, rowKeyPath.length - 1); // 表单中变动值所在行
-    const rowKeyName = rowKeyPath[rowKeyPath.length - 1]; // rowKey在行内的name
-
-    const rowValue = form.getFieldValue(rowValueNamePath);
-    if (!rowValue) return undefined;
-    const keyValue = rowValue[rowKeyName]; // 获取表单中rowKey值
-    if (!keyValue) return undefined;
-    const originalValueList = _get(originalValues, originalName.slice(0, rowKeyPath.length - 2));
-    originRecord = originalValueList?.find(item => {
-      return item[rowKeyPath[rowKeyPath.length - 1]] === keyValue;
-    });
-    let originalValue;
-    if (originalNames?.length) {
-      const originalNamesValue = originalNames.map(originalName => {
-        return _get(originRecord, originalName.slice(rowKeyPath.length - 1));
-      });
-
-      // 有可能出现数组中全是undefined的情况  视为没有值
-      const fillUndefined = originalNamesValue.every(valItem => valItem === undefined);
-      originalValue = fillUndefined ? undefined : originalNamesValue;
-    } else {
-      originalValue = _get(originRecord, originalName.slice(rowKeyPath.length - 1));
-    }
-    return {
-      originalValue,
-      originRecord,
-      record: rowValue
-    };
-  }
-
-  // 这个方法是给editTable专用的  暂时不存在不传rowKey的情况
-  return {
-    originalValue: originalNames?.length ? originalNames.map(originalName => _get(originalValues, originalName)) : _get(originalValues, originalName),
-    originRecord
-  };
-};
 const ListChangedWrapper = props => {
   const {
     name,
@@ -102,6 +34,9 @@ const ListChangedWrapper = props => {
   const {
     scrollFollowParent = true
   } = diffConfig || {};
+
+  // children 在各使用点均经 React.isValidElement 守卫，统一以带 props 的元素类型访问，避免 @ts-ignore
+  const childEl = children;
   const namePath = toNamePath(namesStr || name);
   const originalNamePath = toNamePath(originalName);
   const originalNamePaths = originalNames && toNamePaths(originalNames);
@@ -119,19 +54,19 @@ const ListChangedWrapper = props => {
   const noChange = !onDiff && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
   const diffType = useMemo(() => {
     if (!isWatch || noChange) return 'same';
-    const _value = normalize ? normalize(props[valuePropName], undefined, undefined, true) // true 代表是值比对时的调用
+    const normalizedValue = normalize ? normalize(props[valuePropName], undefined, undefined, true) // true 代表是值比对时的调用
     : props[valuePropName];
 
     // fix:修复 DatePicker时，originalValue与最新值一致时，显示为 changed的问题
-    const _originalValue = normalize && ['DatePicker'].includes(props.type) ? normalize(originalValue, undefined, undefined, true) : originalValue;
+    const normalizedOriginalValue = normalize && ['DatePicker'].includes(props.type) ? normalize(originalValue, undefined, undefined, true) : originalValue;
 
     // fix:修复 InputNumber 时，originalValue与最新值一致都为'0'时，显示为 changed的问题
-    if (['InputNumber'].includes(props.type) && normalize && _value === Number(originalValue)) {
+    if (['InputNumber'].includes(props.type) && normalize && normalizedValue === Number(originalValue)) {
       return 'same';
     }
     return diffOriginal({
-      value: _value,
-      originalValue: _originalValue,
+      value: normalizedValue,
+      originalValue: normalizedOriginalValue,
       form,
       onDiff,
       originRecord: originalDTO?.originRecord,
@@ -146,17 +81,13 @@ const ListChangedWrapper = props => {
     if (!isWatch || noChange) return undefined;
     const orgValue = getValueProps ? getValueProps(originalValue, true)?.[valuePropName] : originalValue;
 
-    // 兼容viewRender函数和Element场景
-    let _children = children;
-    if (viewRender) {
-      if (! /*#__PURE__*/React.isValidElement(viewRender)) {
-        return viewRender(orgValue, originalDTO?.originRecord || {}, {
-          form,
-          name,
-          index
-        });
-      }
-      _children = viewRender;
+    // viewRender 为函数时直接返回其结果；为 Element 时落到下方 children 克隆逻辑
+    if (viewRender && ! /*#__PURE__*/React.isValidElement(viewRender)) {
+      return viewRender(orgValue, originalDTO?.originRecord || {}, {
+        form,
+        name,
+        index
+      });
     }
 
     // 对于ProNumberRange类型，需要将字符串数组转换为数字数组
@@ -167,9 +98,8 @@ const ListChangedWrapper = props => {
         return Number.isNaN(num) ? item : num;
       });
     }
-    return /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
-      ...children,
-      // @ts-ignore
+    return /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(childEl, {
+      ...childEl,
       isView: true,
       [valuePropName]: processedValue,
       checked: type === 'Switch' ? originalValue : undefined
@@ -177,8 +107,8 @@ const ListChangedWrapper = props => {
   }, [originalValue, children]);
   if (!isWatch || noChange) {
     const filteredRest = _omit(rest, OMIT_FROM_DOM_KEYS);
-    return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, {
-      ...children.props,
+    return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(childEl, {
+      ...childEl.props,
       ...filteredRest
     });
   }
@@ -188,9 +118,7 @@ const ListChangedWrapper = props => {
     // 传入undefined 鼠标移入显示移出隐藏
     return isChanged ? undefined : false;
   };
-
-  // @ts-ignore
-  const _showEllipse = children.props?.showEllipse || children.props?.tooltip;
+  const showEllipse = childEl.props?.showEllipse || childEl.props?.tooltip;
   const classNames = classnames({
     'original-value-tooltip': true,
     'original-value-tooltip-fixed': true
@@ -215,11 +143,10 @@ const ListChangedWrapper = props => {
         align: "start",
         className: "original-value-container",
         children: ["\u521D\u59CB\u503C\uFF1A", tipContent]
-      }), _showEllipse && /*#__PURE__*/_jsxs(Space, {
+      }), showEllipse && /*#__PURE__*/_jsxs(Space, {
         className: "current-value-container",
-        children: ["\u5F53\u524D\u503C\uFF1A", /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
-          // @ts-ignore
-          ...children.props,
+        children: ["\u5F53\u524D\u503C\uFF1A", /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(childEl, {
+          ...childEl.props,
           ..._omit(rest, OMIT_FROM_DOM_KEYS),
           isView: true
         }) : undefined]
@@ -227,13 +154,11 @@ const ListChangedWrapper = props => {
     }),
     children: /*#__PURE__*/_jsx("div", {
       className: diffClassName,
-      children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
-        // @ts-ignore
-        ...children.props,
+      children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(childEl, {
+        ...childEl.props,
         ..._omit(rest, OMIT_FROM_DOM_KEYS),
         otherProps: {
-          // @ts-ignore
-          ...children.props?.otherProps,
+          ...childEl.props?.otherProps,
           isDiffChange: isChanged
         }
       }) : undefined