@teamix/pro 1.5.45 → 1.5.46

package/es/form/Filter/useBindUrl.d.ts

@@ -6,7 +6,7 @@ export interface BindUrlInitFunctions {
     onFilter?: (values: Record<string, any>) => void;
     onReset?: (values: Record<string, any>) => void;
 }
-export default function useBindUrl(bindUrl: boolean | UrlStateOptions | undefined, functions: BindUrlInitFunctions, formRef: React.MutableRefObject<Form<any> | undefined>): {
+export default function useBindUrl<S = unknown>(bindUrl: boolean | UrlStateOptions<S> | undefined, functions: BindUrlInitFunctions, formRef: React.MutableRefObject<Form<any> | undefined>): {
     onInit?: ((values: Record<string, any>) => void) | undefined;
     onFilter?: ((values: Record<string, any>) => void) | undefined;
     onReset?: ((values: Record<string, any>) => void) | undefined;

package/es/form/Filter/useBindUrl.js

@@ -7,9 +7,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-import { useUrlState } from '@teamix/hooks';
+import { useUpdate, useUrlState } from '@teamix/hooks';
 import { isUsable, isPlainObj } from '@teamix/utils';
 export default function useBindUrl(bindUrl, functions, formRef) {
+  var update = useUpdate();
   // 预处理 bindUrl 参数（主要兼容 SelectGroup 组件）
   var initializeBindUrl = function initializeBindUrl(options) {
     return options ? _objectSpread(_objectSpread({}, options), {}, {
@@ -39,10 +40,11 @@ export default function useBindUrl(bindUrl, functions, formRef) {
   };
   // 通过 useUrlState 获取 url 上的参数和 url 配置方法
   var _ref4 = bindUrl ? useUrlState(undefined, initializeBindUrl(isPlainObj(bindUrl) ? bindUrl : {})) : [],
-    _ref5 = _slicedToArray(_ref4, 3),
+    _ref5 = _slicedToArray(_ref4, 4),
     urlState = _ref5[0],
     setUrlState = _ref5[1],
-    queryFromUrl = _ref5[2];
+    queryFromUrl = _ref5[2],
+    stringify = _ref5[3];
   // 输出配置url参数的函数
   var initializedFunctions = Object.entries(functions).reduce(function (prev, _ref6) {
     var _ref7 = _slicedToArray(_ref6, 2),
@@ -52,31 +54,33 @@ export default function useBindUrl(bindUrl, functions, formRef) {
       originalFunction === null || originalFunction === void 0 ? void 0 : originalFunction(values);
       if (bindUrl) {
         // guard: onInit 会在 mount 时被自动调用，需要避免其在任何情况下都调用 setUrlState。故增加幂等判断
-        var hasDifference = false;
+        var hasStringifiedDiff = false;
+        var hasValuesDiff = false;
         for (var paramName in values) {
           if (Object.hasOwn(values, paramName)) {
-            var simpleTransform = function simpleTransform(value) {
-              if (value instanceof Array) {
-                return value.join(',');
-              }
-              if (value === undefined || value === null) {
-                return '';
-              }
-              if (value instanceof Object) {
-                console.warn('useBindUrl: 无法处理对象类型的 url 参数');
-              }
-              return value;
-            };
             var oldValue = queryFromUrl === null || queryFromUrl === void 0 ? void 0 : queryFromUrl[paramName];
             var newValue = values[paramName];
-            if (simpleTransform(newValue) !== simpleTransform(oldValue)) {
-              hasDifference = true;
+            // 这里我们必须使用 stringify 来判断是否有变化，因为 special case 太多。例如，默认配置下：
+            // { a: [undefined, undefined], b: undefined, c: [], d: null, e: ''} 会生成 'd=&e='
+            // 类似地，{ a: [''], b: [null], c: [undefined] } 会生成 'a=&b='。更不用说还有非默认配置的情况
+            // 想要避免这种 hazard，我们必须使用钩子内部导出的、经过柯里化的 stringify 来判断生成的字符串是否无变化。
+            if (stringify({
+              v: newValue
+            }) !== stringify({
+              v: oldValue
+            })) {
+              hasStringifiedDiff = true;
               break;
+            } else if (oldValue !== newValue) {
+              hasValuesDiff = true;
             }
           }
         }
-        if (hasDifference) {
+        if (hasStringifiedDiff) {
           setUrlState(values);
+        } else if (hasValuesDiff) {
+          // guard: 虽然 url 字符串没有变化，但是 values 变化了，还是需要触发组件的 update 以保证行为一致。
+          update();
         }
       }
     };

package/es/index.d.ts

@@ -30,5 +30,5 @@ export * from './sidebar';
 export * from './utils';
 export * from './timeline';
 export * from './image';
-declare const version = "1.5.45";
+declare const version = "1.5.46";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, ProImage, hooks, nocode, templates, utils, };

package/es/index.js

@@ -37,7 +37,7 @@ export * from './sidebar';
 export * from './utils';
 export * from './timeline';
 export * from './image';
-var version = '1.5.45';
+var version = '1.5.46';
 // By TeamixTest
 window.postMessage({
   source: 'teamix-test-devtools',

package/es/table/utils/genAutoWidthColumns.js

@@ -38,7 +38,10 @@ export function genAutoWidthColumns(columns, ref, data, size, useRowSelection, a
     return columns;
   }
   var finalColumns = [];
-  var filterdColumnsResult = _.cloneDeep(columns);
+  // @FIXME: lodash 的 cloneDeep 无法正确处理 columns 内部含有 ReactNode 的情况。我们也不该用 React 以外的工具来复制 ReactNode
+  // 因为它里面的 fiber node id 等等的在复制后并不会变，对于 React 来讲这就意味着两个 ReactNode 有相同的 fiber node id，不符合预期。
+  // 先注释掉，后续再想办法
+  var filterdColumnsResult = columns; // _.cloneDeep(columns);
   filterdColumnsResult.forEach(function (column, index) {
     var render = column.render,
       _column$valueType = column.valueType,

package/lib/form/Filter/useBindUrl.d.ts

@@ -6,7 +6,7 @@ export interface BindUrlInitFunctions {
     onFilter?: (values: Record<string, any>) => void;
     onReset?: (values: Record<string, any>) => void;
 }
-export default function useBindUrl(bindUrl: boolean | UrlStateOptions | undefined, functions: BindUrlInitFunctions, formRef: React.MutableRefObject<Form<any> | undefined>): {
+export default function useBindUrl<S = unknown>(bindUrl: boolean | UrlStateOptions<S> | undefined, functions: BindUrlInitFunctions, formRef: React.MutableRefObject<Form<any> | undefined>): {
     onInit?: ((values: Record<string, any>) => void) | undefined;
     onFilter?: ((values: Record<string, any>) => void) | undefined;
     onReset?: ((values: Record<string, any>) => void) | undefined;

package/lib/form/Filter/useBindUrl.js

@@ -16,6 +16,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function useBindUrl(bindUrl, functions, formRef) {
+  var update = (0, _hooks.useUpdate)();
   // 预处理 bindUrl 参数（主要兼容 SelectGroup 组件）
   var initializeBindUrl = function initializeBindUrl(options) {
     return options ? _objectSpread(_objectSpread({}, options), {}, {
@@ -45,10 +46,11 @@ function useBindUrl(bindUrl, functions, formRef) {
   };
   // 通过 useUrlState 获取 url 上的参数和 url 配置方法
   var _ref4 = bindUrl ? (0, _hooks.useUrlState)(undefined, initializeBindUrl((0, _utils.isPlainObj)(bindUrl) ? bindUrl : {})) : [],
-    _ref5 = _slicedToArray(_ref4, 3),
+    _ref5 = _slicedToArray(_ref4, 4),
     urlState = _ref5[0],
     setUrlState = _ref5[1],
-    queryFromUrl = _ref5[2];
+    queryFromUrl = _ref5[2],
+    stringify = _ref5[3];
   // 输出配置url参数的函数
   var initializedFunctions = Object.entries(functions).reduce(function (prev, _ref6) {
     var _ref7 = _slicedToArray(_ref6, 2),
@@ -58,31 +60,33 @@ function useBindUrl(bindUrl, functions, formRef) {
       originalFunction === null || originalFunction === void 0 ? void 0 : originalFunction(values);
       if (bindUrl) {
         // guard: onInit 会在 mount 时被自动调用，需要避免其在任何情况下都调用 setUrlState。故增加幂等判断
-        var hasDifference = false;
+        var hasStringifiedDiff = false;
+        var hasValuesDiff = false;
         for (var paramName in values) {
           if (Object.hasOwn(values, paramName)) {
-            var simpleTransform = function simpleTransform(value) {
-              if (value instanceof Array) {
-                return value.join(',');
-              }
-              if (value === undefined || value === null) {
-                return '';
-              }
-              if (value instanceof Object) {
-                console.warn('useBindUrl: 无法处理对象类型的 url 参数');
-              }
-              return value;
-            };
             var oldValue = queryFromUrl === null || queryFromUrl === void 0 ? void 0 : queryFromUrl[paramName];
             var newValue = values[paramName];
-            if (simpleTransform(newValue) !== simpleTransform(oldValue)) {
-              hasDifference = true;
+            // 这里我们必须使用 stringify 来判断是否有变化，因为 special case 太多。例如，默认配置下：
+            // { a: [undefined, undefined], b: undefined, c: [], d: null, e: ''} 会生成 'd=&e='
+            // 类似地，{ a: [''], b: [null], c: [undefined] } 会生成 'a=&b='。更不用说还有非默认配置的情况
+            // 想要避免这种 hazard，我们必须使用钩子内部导出的、经过柯里化的 stringify 来判断生成的字符串是否无变化。
+            if (stringify({
+              v: newValue
+            }) !== stringify({
+              v: oldValue
+            })) {
+              hasStringifiedDiff = true;
               break;
+            } else if (oldValue !== newValue) {
+              hasValuesDiff = true;
             }
           }
         }
-        if (hasDifference) {
+        if (hasStringifiedDiff) {
           setUrlState(values);
+        } else if (hasValuesDiff) {
+          // guard: 虽然 url 字符串没有变化，但是 values 变化了，还是需要触发组件的 update 以保证行为一致。
+          update();
         }
       }
     };

package/lib/index.d.ts

@@ -30,5 +30,5 @@ export * from './sidebar';
 export * from './utils';
 export * from './timeline';
 export * from './image';
-declare const version = "1.5.45";
+declare const version = "1.5.46";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, ProImage, hooks, nocode, templates, utils, };

package/lib/index.js

@@ -299,7 +299,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 if (!((_window = window) === null || _window === void 0 ? void 0 : _window.TEAMIXPRO_WITHOUT_ICON)) {
   _icon.default.setConfig(_utils.default.getTeamixIconConfig());
 }
-var version = '1.5.45';
+var version = '1.5.46';
 // By TeamixTest
 exports.version = version;
 window.postMessage({

package/lib/table/utils/genAutoWidthColumns.js

@@ -48,7 +48,10 @@ function genAutoWidthColumns(columns, ref, data, size, useRowSelection, actionCo
     return columns;
   }
   var finalColumns = [];
-  var filterdColumnsResult = _utils._.cloneDeep(columns);
+  // @FIXME: lodash 的 cloneDeep 无法正确处理 columns 内部含有 ReactNode 的情况。我们也不该用 React 以外的工具来复制 ReactNode
+  // 因为它里面的 fiber node id 等等的在复制后并不会变，对于 React 来讲这就意味着两个 ReactNode 有相同的 fiber node id，不符合预期。
+  // 先注释掉，后续再想办法
+  var filterdColumnsResult = columns; // _.cloneDeep(columns);
   filterdColumnsResult.forEach(function (column, index) {
     var render = column.render,
       _column$valueType = column.valueType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix/pro",
-  "version": "1.5.45",
+  "version": "1.5.46",
   "description": "TeamixPro大包",
   "keywords": [
     "aliyun",