assui 3.2.105 → 3.3.1

package/es/complex-val-select/index.d.ts

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import type { DefaultOptionType, SelectProps } from 'antd/lib/select';
-declare const Option: import("rc-select/lib/Option").OptionFC;
-export { Option };
 export type ComplexValSelectValueType = string | number | any[] | Record<string, any> | null | undefined;
 export interface ComplexValSelectOptionType extends Omit<DefaultOptionType, 'value' | 'children' | 'options'> {
     value?: ComplexValSelectValueType;
     children?: ComplexValSelectOptionType[];
     options?: Omit<ComplexValSelectOptionType, 'children' | 'options'>[];
 }
-/** 判断optionsValue是否是引用类型 */
+/** 判断 options 的 value 中是否包含引用类型（对象或数组） */
 export declare const isReferenceTypeOption: (options?: ComplexValSelectOptionType[]) => boolean;
 export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
     value?: T;
-    onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
+    onChange?: (val: T, opt?: ComplexValSelectOptionType | ComplexValSelectOptionType[]) => void;
     options?: ComplexValSelectOptionType[];
 }
 declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
 export default ComplexValSelect;
+declare const Option: import("rc-select/lib/Option").OptionFC;
+export { Option };
+export { stableStringify } from 'aa-utils';

package/es/complex-val-select/index.js

@@ -32,35 +32,42 @@ var __read = this && this.__read || function (o, n) {
 };
 import * as React from 'react';
 import omit from 'lodash/omit';
-import find from 'lodash/find';
 import some from 'lodash/some';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
+import isUndefined from 'lodash/isUndefined';
 import Select from "antd/es/select";
 import classNames from 'classnames';
 import ArrowDownOutlined from "a-icons/es/ArrowDownOutlined";
 import useControllableValue from "ahooks/es/useControllableValue";
-var Option = Select.Option;
-export { Option };
-var _formatOptions = function formatOptions(dateSource) {
-  if (dateSource) {
-    var options = dateSource.map(function (item) {
-      var otherProps = item.options ? {
-        options: _formatOptions(item.options)
-      } : {};
-      return __assign(__assign(__assign({}, item), {
-        label: item.label,
-        value: item.value ? JSON.stringify(item.value) : undefined
-      }), otherProps);
-    });
-    return options;
+import { stableStringify } from 'aa-utils';
+import { isNil } from 'lodash';
+// 核心防御：防止非标准 JSON 字符串（如 tags 模式下手敲的纯文本或 undefined）导致页面崩溃
+var safeParse = function safeParse(str) {
+  if (typeof str !== 'string') return str;
+  try {
+    return JSON.parse(str);
+  } catch (_a) {
+    return str; // 解析失败直接返回原字符串
   }
-  return dateSource;
 };
-/** 判断optionsValue是否是引用类型 */
+/** 递归格式化 options，将复杂 value 序列化为字符串 */
+var _formatOptions = function formatOptions(dataSource) {
+  if (!dataSource) return dataSource;
+  return dataSource.map(function (item) {
+    var otherProps = item.options ? {
+      options: _formatOptions(item.options)
+    } : {};
+    return __assign(__assign(__assign({}, item), {
+      label: item.label,
+      value: isUndefined(item.value) ? undefined : stableStringify(item.value)
+    }), otherProps);
+  });
+};
+/** 判断 options 的 value 中是否包含引用类型（对象或数组） */
 export var isReferenceTypeOption = function isReferenceTypeOption(options) {
-  var resultBoolean = some(options, function (item) {
-    if (item.value) {
+  return some(options, function (item) {
+    if (!isUndefined(item.value)) {
       return isArray(item.value) || isObject(item.value);
     }
     if (item.options) {
@@ -70,40 +77,59 @@ export var isReferenceTypeOption = function isReferenceTypeOption(options) {
     }
     return false;
   });
-  return resultBoolean;
 };
 var ComplexValSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _a = __read(useControllableValue(props), 2),
     value = _a[0],
     setValue = _a[1];
   var options = props.options,
-    onSelect = props.onSelect;
+    onSelect = props.onSelect,
+    mode = props.mode;
   var selectRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
     return selectRef.current;
   });
-  // 判断是否需要将optionValue转为JSON字符串
+  // 判断是否为多选模式 (multiple 或 tags)
+  var isMultiple = mode === 'multiple' || mode === 'tags';
+  // 判断是否需要将 option 的 value 转为 JSON 字符串
   var isReferenceTypeVal = isReferenceTypeOption(options);
   var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
-  var handleChange = function handleChange(val) {
-    var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
-    setValue(nextVal, options);
+  // 处理选中值改变：将底层传出的字符串安全地 parse 回真实的数据结构
+  var handleChange = function handleChange(val, option) {
+    var nextVal = val;
+    if (!isNil(val) && isReferenceTypeVal) {
+      nextVal = isMultiple && isArray(val) ? val.map(function (item) {
+        return safeParse(item);
+      }) : safeParse(val);
+    }
+    setValue(nextVal, option);
   };
-  var handleSelect = function handleSelect(val) {
-    var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
-    var selectOption = find(finalOptions, {
-      value: val
-    });
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, selectOption);
+  var handleSelect = function handleSelect(val, option) {
+    var nextVal = !isNil(val) && isReferenceTypeVal ? safeParse(val) : val;
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, option);
   };
+  // 处理回显展示值：将传入的真实数据结构 stringify 成字符串去匹配底层 Option
+  var displayValue = React.useMemo(function () {
+    if (!isNil(value) && isReferenceTypeVal) {
+      return isMultiple && isArray(value) ? value.map(function (v) {
+        // 在 tags 模式下，如果 v 已经是手敲的基础字符串，直接放行，避免产生多余的双引号
+        if (mode === 'tags' && typeof v === 'string') return v;
+        return stableStringify(v);
+      }) : stableStringify(value);
+    }
+    return value;
+  }, [value, isReferenceTypeVal, isMultiple, mode]);
   return /*#__PURE__*/React.createElement(Select, __assign({
     ref: selectRef,
     className: classNames('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
     suffixIcon: /*#__PURE__*/React.createElement(ArrowDownOutlined, null),
-    value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
+    value: displayValue,
     options: finalOptions,
     onChange: handleChange,
     onSelect: handleSelect
-  }, omit(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
+  }, omit(props, ['value', 'defaultValue', 'onChange', 'options', 'onSelect', 'className'])));
 });
-export default ComplexValSelect;
+export default ComplexValSelect;
+var Option = Select.Option;
+export { Option };
+export { stableStringify } from 'aa-utils';

package/lib/complex-val-select/index.d.ts

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import type { DefaultOptionType, SelectProps } from 'antd/lib/select';
-declare const Option: import("rc-select/lib/Option").OptionFC;
-export { Option };
 export type ComplexValSelectValueType = string | number | any[] | Record<string, any> | null | undefined;
 export interface ComplexValSelectOptionType extends Omit<DefaultOptionType, 'value' | 'children' | 'options'> {
     value?: ComplexValSelectValueType;
     children?: ComplexValSelectOptionType[];
     options?: Omit<ComplexValSelectOptionType, 'children' | 'options'>[];
 }
-/** 判断optionsValue是否是引用类型 */
+/** 判断 options 的 value 中是否包含引用类型（对象或数组） */
 export declare const isReferenceTypeOption: (options?: ComplexValSelectOptionType[]) => boolean;
 export interface ComplexValSelectProps<T> extends Omit<SelectProps, 'value' | 'onChange' | 'options'> {
     value?: T;
-    onChange?: (val: T, opt?: ComplexValSelectOptionType[]) => void;
+    onChange?: (val: T, opt?: ComplexValSelectOptionType | ComplexValSelectOptionType[]) => void;
     options?: ComplexValSelectOptionType[];
 }
 declare const ComplexValSelect: React.ForwardRefExoticComponent<ComplexValSelectProps<ComplexValSelectValueType> & React.RefAttributes<unknown>>;
 export default ComplexValSelect;
+declare const Option: import("rc-select/lib/Option").OptionFC;
+export { Option };
+export { stableStringify } from 'aa-utils';

package/lib/complex-val-select/index.js

@@ -71,38 +71,45 @@ var __importDefault = this && this.__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isReferenceTypeOption = exports.Option = void 0;
+exports.stableStringify = exports.Option = exports.isReferenceTypeOption = void 0;
 var React = __importStar(require("react"));
 var omit_1 = __importDefault(require("lodash/omit"));
-var find_1 = __importDefault(require("lodash/find"));
 var some_1 = __importDefault(require("lodash/some"));
 var isArray_1 = __importDefault(require("lodash/isArray"));
 var isObject_1 = __importDefault(require("lodash/isObject"));
+var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
 var select_1 = __importDefault(require("antd/lib/select"));
 var classnames_1 = __importDefault(require("classnames"));
 var ArrowDownOutlined_1 = __importDefault(require("a-icons/lib/ArrowDownOutlined"));
 var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
-var Option = select_1["default"].Option;
-exports.Option = Option;
-var _formatOptions = function formatOptions(dateSource) {
-  if (dateSource) {
-    var options = dateSource.map(function (item) {
-      var otherProps = item.options ? {
-        options: _formatOptions(item.options)
-      } : {};
-      return __assign(__assign(__assign({}, item), {
-        label: item.label,
-        value: item.value ? JSON.stringify(item.value) : undefined
-      }), otherProps);
-    });
-    return options;
+var aa_utils_1 = require("aa-utils");
+var lodash_1 = require("lodash");
+// 核心防御：防止非标准 JSON 字符串（如 tags 模式下手敲的纯文本或 undefined）导致页面崩溃
+var safeParse = function safeParse(str) {
+  if (typeof str !== 'string') return str;
+  try {
+    return JSON.parse(str);
+  } catch (_a) {
+    return str; // 解析失败直接返回原字符串
   }
-  return dateSource;
 };
-/** 判断optionsValue是否是引用类型 */
+/** 递归格式化 options，将复杂 value 序列化为字符串 */
+var _formatOptions = function formatOptions(dataSource) {
+  if (!dataSource) return dataSource;
+  return dataSource.map(function (item) {
+    var otherProps = item.options ? {
+      options: _formatOptions(item.options)
+    } : {};
+    return __assign(__assign(__assign({}, item), {
+      label: item.label,
+      value: (0, isUndefined_1["default"])(item.value) ? undefined : (0, aa_utils_1.stableStringify)(item.value)
+    }), otherProps);
+  });
+};
+/** 判断 options 的 value 中是否包含引用类型（对象或数组） */
 var isReferenceTypeOption = function isReferenceTypeOption(options) {
-  var resultBoolean = (0, some_1["default"])(options, function (item) {
-    if (item.value) {
+  return (0, some_1["default"])(options, function (item) {
+    if (!(0, isUndefined_1["default"])(item.value)) {
       return (0, isArray_1["default"])(item.value) || (0, isObject_1["default"])(item.value);
     }
     if (item.options) {
@@ -112,7 +119,6 @@ var isReferenceTypeOption = function isReferenceTypeOption(options) {
     }
     return false;
   });
-  return resultBoolean;
 };
 exports.isReferenceTypeOption = isReferenceTypeOption;
 var ComplexValSelect = React.forwardRef(function (props, ref) {
@@ -120,33 +126,59 @@ var ComplexValSelect = React.forwardRef(function (props, ref) {
     value = _a[0],
     setValue = _a[1];
   var options = props.options,
-    onSelect = props.onSelect;
+    onSelect = props.onSelect,
+    mode = props.mode;
   var selectRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
     return selectRef.current;
   });
-  // 判断是否需要将optionValue转为JSON字符串
+  // 判断是否为多选模式 (multiple 或 tags)
+  var isMultiple = mode === 'multiple' || mode === 'tags';
+  // 判断是否需要将 option 的 value 转为 JSON 字符串
   var isReferenceTypeVal = (0, exports.isReferenceTypeOption)(options);
   var finalOptions = isReferenceTypeVal ? _formatOptions(options) : options;
-  var handleChange = function handleChange(val) {
-    var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
-    setValue(nextVal, options);
+  // 处理选中值改变：将底层传出的字符串安全地 parse 回真实的数据结构
+  var handleChange = function handleChange(val, option) {
+    var nextVal = val;
+    if (!(0, lodash_1.isNil)(val) && isReferenceTypeVal) {
+      nextVal = isMultiple && (0, isArray_1["default"])(val) ? val.map(function (item) {
+        return safeParse(item);
+      }) : safeParse(val);
+    }
+    setValue(nextVal, option);
   };
-  var handleSelect = function handleSelect(val) {
-    var nextVal = val && isReferenceTypeVal ? JSON.parse(val) : val;
-    var selectOption = (0, find_1["default"])(finalOptions, {
-      value: val
-    });
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, selectOption);
+  var handleSelect = function handleSelect(val, option) {
+    var nextVal = !(0, lodash_1.isNil)(val) && isReferenceTypeVal ? safeParse(val) : val;
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextVal, option);
   };
+  // 处理回显展示值：将传入的真实数据结构 stringify 成字符串去匹配底层 Option
+  var displayValue = React.useMemo(function () {
+    if (!(0, lodash_1.isNil)(value) && isReferenceTypeVal) {
+      return isMultiple && (0, isArray_1["default"])(value) ? value.map(function (v) {
+        // 在 tags 模式下，如果 v 已经是手敲的基础字符串，直接放行，避免产生多余的双引号
+        if (mode === 'tags' && typeof v === 'string') return v;
+        return (0, aa_utils_1.stableStringify)(v);
+      }) : (0, aa_utils_1.stableStringify)(value);
+    }
+    return value;
+  }, [value, isReferenceTypeVal, isMultiple, mode]);
   return React.createElement(select_1["default"], __assign({
     ref: selectRef,
     className: (0, classnames_1["default"])('complex-val-select', props === null || props === void 0 ? void 0 : props.className),
     suffixIcon: React.createElement(ArrowDownOutlined_1["default"], null),
-    value: value && isReferenceTypeVal ? JSON.stringify(value) : value,
+    value: displayValue,
     options: finalOptions,
     onChange: handleChange,
     onSelect: handleSelect
-  }, (0, omit_1["default"])(props, ['value', 'onChange', 'options', 'onSelect', 'className'])));
+  }, (0, omit_1["default"])(props, ['value', 'defaultValue', 'onChange', 'options', 'onSelect', 'className'])));
 });
-exports["default"] = ComplexValSelect;
+exports["default"] = ComplexValSelect;
+var Option = select_1["default"].Option;
+exports.Option = Option;
+var aa_utils_2 = require("aa-utils");
+Object.defineProperty(exports, "stableStringify", {
+  enumerable: true,
+  get: function get() {
+    return aa_utils_2.stableStringify;
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assui",
-  "version": "3.2.105",
+  "version": "3.3.1",
   "description": "react ui library",
   "author": "jason <usochen@gmail.com>",
   "main": "./lib/index.js",
@@ -36,7 +36,7 @@
     "@types/react-color": "^3.0.6",
     "@types/react-resizable": "^3.0.0",
     "a-icons": "^1.2.68",
-    "aa-utils": "^2.1.34",
+    "aa-utils": "^2.1.35",
     "ahooks": "^3.9.5",
     "bignumber.js": "^9.0.1",
     "copy-to-clipboard": "^3.3.1",
@@ -87,5 +87,5 @@
     "node": ">=10.0.0"
   },
   "license": "MIT",
-  "gitHead": "339f0ad113cd267b75bf7ae54131dd66e0034a28"
+  "gitHead": "43025f6771ae7e9d0b93a75891cfd5064555593c"
 }