@hsu-react/ui 0.0.1

package/lib/components/Search/SearchCard/_components/SearchBox/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SearchBoxProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSearch: () => void;
+    placeholder?: string;
+}
+export declare const SearchBox: React.FC<SearchBoxProps>;
+export {};

package/lib/components/Search/SearchCard/_components/SearchBox/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchBox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Input = _interopRequireDefault(require("../../../../Input"));
+var _indexModule = _interopRequireDefault(require("../../index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SearchBox = ({
+  value,
+  onChange,
+  onSearch,
+  placeholder
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _indexModule.default.searchBox,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.searchInputContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default.Search, {
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange,
+        onSearch: onSearch,
+        enterButton: "\u641C\u7D22",
+        size: "large",
+        className: _indexModule.default.searchInput
+      })
+    })
+  });
+};
+exports.SearchBox = SearchBox;

package/lib/components/Search/SearchCard/_hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useSearchCardMoreOptions } from "./useSearchCardMoreOptions";
+export { useSearchCardValue } from "./useSearchCardValue";
+export { useSearchCardCollapse } from "./useSearchCardCollapse";

package/lib/components/Search/SearchCard/_hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useSearchCardCollapse", {
+  enumerable: true,
+  get: function () {
+    return _useSearchCardCollapse.useSearchCardCollapse;
+  }
+});
+Object.defineProperty(exports, "useSearchCardMoreOptions", {
+  enumerable: true,
+  get: function () {
+    return _useSearchCardMoreOptions.useSearchCardMoreOptions;
+  }
+});
+Object.defineProperty(exports, "useSearchCardValue", {
+  enumerable: true,
+  get: function () {
+    return _useSearchCardValue.useSearchCardValue;
+  }
+});
+var _useSearchCardMoreOptions = require("./useSearchCardMoreOptions");
+var _useSearchCardValue = require("./useSearchCardValue");
+var _useSearchCardCollapse = require("./useSearchCardCollapse");

package/lib/components/Search/SearchCard/_hooks/useSearchCardCollapse.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface UseSearchCardCollapseProps {
+    defaultCollapse?: boolean;
+}
+/**
+ * 管理 SearchCard 的折叠状态
+ */
+export declare function useSearchCardCollapse({ defaultCollapse, }: UseSearchCardCollapseProps): {
+    collapse: boolean;
+    setCollapse: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    toggleCollapse: () => void;
+};
+export {};

package/lib/components/Search/SearchCard/_hooks/useSearchCardCollapse.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSearchCardCollapse = useSearchCardCollapse;
+var _react = require("react");
+/**
+ * 管理 SearchCard 的折叠状态
+ */
+function useSearchCardCollapse({
+  defaultCollapse = false
+}) {
+  const [collapse, setCollapse] = (0, _react.useState)(defaultCollapse);
+  const handleCollapseToggle = (0, _react.useCallback)(() => {
+    setCollapse(!collapse);
+  }, [collapse]);
+  return {
+    collapse,
+    setCollapse,
+    toggleCollapse: handleCollapseToggle
+  };
+}

package/lib/components/Search/SearchCard/_hooks/useSearchCardMoreOptions.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from "react";
+import { Font, SearchCardOption } from "../_components/OptionRow";
+/**
+ * 自定义Hook，用于计算需要显示"更多"按钮的选项
+ */
+export declare function useSearchCardMoreOptions(containerRef: RefObject<HTMLDivElement>, options: SearchCardOption[], font?: Font, padding?: number, gap?: number): {
+    showMore: Record<string, boolean>;
+    setShowMore: import("react").Dispatch<import("react").SetStateAction<Record<string, boolean>>>;
+};

package/lib/components/Search/SearchCard/_hooks/useSearchCardMoreOptions.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSearchCardMoreOptions = useSearchCardMoreOptions;
+var _hsuUtils = require("hsu-utils");
+var _react = require("react");
+var _client = require("react-dom/client");
+// 优化：缓存测量结果
+const measurementCache = new Map();
+function directMeasureWidth(element) {
+  // 尝试从缓存获取
+  const cacheKey = JSON.stringify(element.props);
+  if (measurementCache.has(cacheKey)) {
+    return Promise.resolve(measurementCache.get(cacheKey));
+  }
+  return new Promise(resolve => {
+    // 创建隐藏容器
+    const container = document.createElement("div");
+
+    // 设置样式使其不可见但能正确计算尺寸
+    Object.assign(container.style, {
+      position: "absolute",
+      visibility: "hidden",
+      display: "block",
+      height: "auto",
+      width: "auto",
+      top: "-9999px",
+      left: "-9999px"
+    });
+    document.body.appendChild(container);
+
+    // 创建根并渲染
+    const root = (0, _client.createRoot)(container);
+    try {
+      // 直接渲染元素
+      root.render(element);
+
+      // 等待渲染完成
+      setTimeout(() => {
+        try {
+          // 获取容器中第一个子元素的宽度
+          const width = container.clientWidth || 0;
+
+          // 缓存结果
+          measurementCache.set(cacheKey, width);
+          resolve(width);
+        } catch {
+          resolve(0);
+        }
+
+        // 清理
+        try {
+          root.unmount();
+          if (document.body.contains(container)) {
+            document.body.removeChild(container);
+          }
+        } catch {
+          void 0;
+        }
+      }, 10);
+    } catch {
+      resolve(0);
+
+      // 清理
+      try {
+        if (document.body.contains(container)) {
+          document.body.removeChild(container);
+        }
+      } catch {
+        void 0;
+      }
+    }
+  });
+}
+
+/**
+ * 自定义Hook，用于计算需要显示"更多"按钮的选项
+ */
+function useSearchCardMoreOptions(containerRef, options, font = {
+  family: "PingFangSC-Regular, PingFang SC",
+  size: 14,
+  weight: "400"
+}, padding = 8, gap = 8) {
+  const [showMore, setShowMore] = (0, _react.useState)({});
+
+  // 优化：缓存计算函数
+  const calculateMoreOptions = (0, _react.useCallback)(async () => {
+    if (containerRef.current) {
+      const div = containerRef.current;
+      const width = div.clientWidth;
+      const moreWidth = (0, _hsuUtils.get_string_size)("更多", font).width + 15;
+      const hasMore = {};
+      for (const option of options) {
+        const {
+          width: labelWidth
+        } = (0, _hsuUtils.get_string_size)(`${option.label}：`, font);
+        const _options = option.hideAll ? option.items : [{
+          label: "全部",
+          value: ""
+        }, ...option.items];
+        const optionsWidth = [];
+        for (const item of _options) {
+          if (item?.element) {
+            const elementWidth = await directMeasureWidth(item.element);
+            const labelWidth = (0, _hsuUtils.get_string_size)(item?.label ?? "", font).width;
+            optionsWidth.push(elementWidth + labelWidth);
+          } else {
+            const labelWidth = (0, _hsuUtils.get_string_size)(item?.label ?? "", font).width;
+            optionsWidth.push(+(labelWidth + padding * 2).toFixed(2));
+          }
+        }
+        const idx = optionsWidth.reduce((prevIdx, curr, currIdx) => {
+          const prev = optionsWidth.slice(0, currIdx).reduce((a, b) => a + b, 0);
+          if (Math.ceil(labelWidth + 4 + prev + curr + currIdx * gap + 4 + moreWidth) >= width) {
+            if (Math.round(labelWidth + 4 + prev + curr + currIdx * gap) <= width && currIdx === optionsWidth.length - 1) {
+              return currIdx;
+            }
+            return prevIdx;
+          }
+          return currIdx;
+        }, 0);
+        if (idx < optionsWidth.length - 1) {
+          hasMore[option.name] = false;
+        }
+      }
+      if (!_hsuUtils.Equal.ObjEqual(Object.keys(showMore), Object.keys(hasMore))) {
+        setShowMore(hasMore);
+      }
+    }
+  }, [containerRef, options, font, padding, gap, showMore]);
+  (0, _react.useEffect)(() => {
+    calculateMoreOptions();
+
+    // 添加窗口大小调整监听器
+    window.addEventListener("resize", calculateMoreOptions);
+    return () => {
+      window.removeEventListener("resize", calculateMoreOptions);
+    };
+  }, [calculateMoreOptions]);
+  return {
+    showMore,
+    setShowMore
+  };
+}

package/lib/components/Search/SearchCard/_hooks/useSearchCardValue.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { SearchCardOption } from "../_components/OptionRow";
+interface UseSearchCardValueProps {
+    defaultValue?: Record<string, unknown>;
+    searchField: string;
+    options: SearchCardOption[];
+    onChange?: (data: Record<string, unknown>) => void;
+}
+/**
+ * 管理 SearchCard 的值状态
+ */
+export declare function useSearchCardValue({ defaultValue, searchField, options, onChange, }: UseSearchCardValueProps): {
+    value: Record<string, unknown>;
+    setValue: (newValue: Record<string, unknown>) => void;
+    internalValue: string;
+    setInternalValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    getRealValues: () => Record<string, unknown>;
+};
+export {};

package/lib/components/Search/SearchCard/_hooks/useSearchCardValue.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSearchCardValue = useSearchCardValue;
+var _react = require("react");
+var _hsuUtils = require("hsu-utils");
+var _utils = require("../_utils");
+/**
+ * 管理 SearchCard 的值状态
+ */
+function useSearchCardValue({
+  defaultValue,
+  searchField,
+  options,
+  onChange
+}) {
+  const [value, setValue] = (0, _react.useState)({});
+  const [lastValue, setLastValue] = (0, _react.useState)({});
+  const [internalValue, setInternalValue] = (0, _react.useState)("");
+  (0, _react.useEffect)(() => {
+    if (defaultValue) {
+      setValue(defaultValue);
+      setLastValue(defaultValue);
+      setInternalValue(defaultValue[searchField] || "");
+    }
+  }, [defaultValue, searchField]);
+
+  // 处理内部值更新，将所有值保存在内部状态中
+  const handleValueChange = (0, _react.useCallback)(newValue => {
+    setValue({
+      ...newValue
+    });
+  }, []);
+
+  // 获取真实值
+  const getRealValuesData = (0, _react.useCallback)(() => {
+    return (0, _utils.getRealValues)(value, options, searchField);
+  }, [value, options, searchField]);
+
+  // 处理值变化
+  (0, _react.useMemo)(() => {
+    if (onChange && !_hsuUtils.Equal.ObjEqual(value, lastValue)) {
+      setLastValue(value);
+
+      // 提取所有Real值
+      const realValues = getRealValuesData();
+      onChange(realValues);
+    }
+  }, [getRealValuesData, lastValue, onChange, value]);
+  return {
+    value,
+    setValue: handleValueChange,
+    internalValue,
+    setInternalValue,
+    getRealValues: getRealValuesData
+  };
+}

package/lib/components/Search/SearchCard/_utils/getRealValues.d.ts

@@ -0,0 +1,5 @@
+import { SearchCardOption } from "../_components/OptionRow";
+/**
+ * 获取真实值（提取所有Real值）
+ */
+export declare function getRealValues(value: Record<string, unknown>, options: SearchCardOption[], searchField: string): Record<string, unknown>;

package/lib/components/Search/SearchCard/_utils/getRealValues.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRealValues = getRealValues;
+/**
+ * 获取真实值（提取所有Real值）
+ */
+function getRealValues(value, options, searchField) {
+  const realValues = {};
+
+  // 遍历所有选项，获取其Real值
+  options?.forEach(option => {
+    const realKey = `${option.name}Real`;
+    if (value[realKey] !== undefined) {
+      // 将带有"Real"后缀的值使用不带后缀的原始键名
+      realValues[option.name] = value[realKey];
+    } else {
+      // 如果没有Real值，使用原始值
+      realValues[option.name] = value[option.name];
+    }
+  });
+
+  // 保留搜索相关字段
+  if (value[searchField] !== undefined) {
+    realValues[searchField] = value[searchField];
+  }
+  return realValues;
+}

package/lib/components/Search/SearchCard/_utils/hasSelectedChildren.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 检查是否有任何子项被选中
+ */
+export declare function hasSelectedChildren(value: Record<string, unknown>, childrenName: string, isMultiple: boolean): boolean;

package/lib/components/Search/SearchCard/_utils/hasSelectedChildren.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasSelectedChildren = hasSelectedChildren;
+var _typeGuards = require("./typeGuards");
+/**
+ * 检查是否有任何子项被选中
+ */
+function hasSelectedChildren(value, childrenName, isMultiple) {
+  const childrenValue = value[childrenName];
+  if (isMultiple) {
+    // 多选模式：检查是否为数组且长度大于0
+    return (0, _typeGuards.isArrayValue)(childrenValue) && childrenValue.length > 0;
+  } else {
+    // 单选模式：检查值是否存在且不为空字符串
+    return (0, _typeGuards.isValidValue)(childrenValue) && childrenValue !== "";
+  }
+}

package/lib/components/Search/SearchCard/_utils/index.d.ts

@@ -0,0 +1,4 @@
+export { isValidValue, isArrayValue, isStringValue, } from "./typeGuards";
+export { hasSelectedChildren } from "./hasSelectedChildren";
+export { updateRealValue } from "./updateRealValue";
+export { getRealValues } from "./getRealValues";

package/lib/components/Search/SearchCard/_utils/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getRealValues", {
+  enumerable: true,
+  get: function () {
+    return _getRealValues.getRealValues;
+  }
+});
+Object.defineProperty(exports, "hasSelectedChildren", {
+  enumerable: true,
+  get: function () {
+    return _hasSelectedChildren.hasSelectedChildren;
+  }
+});
+Object.defineProperty(exports, "isArrayValue", {
+  enumerable: true,
+  get: function () {
+    return _typeGuards.isArrayValue;
+  }
+});
+Object.defineProperty(exports, "isStringValue", {
+  enumerable: true,
+  get: function () {
+    return _typeGuards.isStringValue;
+  }
+});
+Object.defineProperty(exports, "isValidValue", {
+  enumerable: true,
+  get: function () {
+    return _typeGuards.isValidValue;
+  }
+});
+Object.defineProperty(exports, "updateRealValue", {
+  enumerable: true,
+  get: function () {
+    return _updateRealValue.updateRealValue;
+  }
+});
+var _typeGuards = require("./typeGuards");
+var _hasSelectedChildren = require("./hasSelectedChildren");
+var _updateRealValue = require("./updateRealValue");
+var _getRealValues = require("./getRealValues");

package/lib/components/Search/SearchCard/_utils/typeGuards.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 类型守卫函数
+ */
+export declare const isValidValue: (value: unknown) => boolean;
+export declare const isArrayValue: (value: unknown) => value is unknown[];
+export declare const isStringValue: (value: unknown) => value is string;

package/lib/components/Search/SearchCard/_utils/typeGuards.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidValue = exports.isStringValue = exports.isArrayValue = void 0;
+/**
+ * 类型守卫函数
+ */
+const isValidValue = value => {
+  return value !== null && value !== undefined;
+};
+exports.isValidValue = isValidValue;
+const isArrayValue = value => {
+  return Array.isArray(value);
+};
+exports.isArrayValue = isArrayValue;
+const isStringValue = value => {
+  return typeof value === "string";
+};
+exports.isStringValue = isStringValue;

package/lib/components/Search/SearchCard/_utils/updateRealValue.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 更新真实返回值
+ */
+export declare function updateRealValue(value: Record<string, unknown>, optionName: string, newValues: Record<string, unknown>): void;

package/lib/components/Search/SearchCard/_utils/updateRealValue.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateRealValue = updateRealValue;
+var _typeGuards = require("./typeGuards");
+var _hasSelectedChildren = require("./hasSelectedChildren");
+/**
+ * 更新真实返回值
+ */
+function updateRealValue(value, optionName, newValues) {
+  // 参数验证
+  if (!value || !(0, _typeGuards.isStringValue)(optionName) || !newValues) {
+    return;
+  }
+
+  // 合并当前值和新值以获取最新状态
+  const mergedValues = {
+    ...value,
+    ...newValues
+  };
+
+  // 检查是否存在子项数据
+  let hasAnyChildrenSelected = false;
+  let childrenValue = null;
+
+  // 遍历所有可能的子项名称
+  Object.keys(mergedValues)?.forEach(key => {
+    if (key.endsWith("Children")) {
+      // 找到对应的父项名称
+      const parentName = key.replace("Children", "");
+
+      // 只处理当前选项的子项
+      if (parentName === optionName) {
+        try {
+          // 检查子项是否有选中值
+          const currentChildrenValue = mergedValues[key];
+          const hasSelected = (0, _hasSelectedChildren.hasSelectedChildren)(mergedValues, key, Array.isArray(currentChildrenValue));
+          if (hasSelected) {
+            hasAnyChildrenSelected = true;
+            childrenValue = currentChildrenValue;
+          }
+        } catch {
+          void 0;
+        }
+      }
+    }
+  });
+
+  // 设置真实返回值
+  const realValueKey = `${optionName}Real`;
+  if (hasAnyChildrenSelected) {
+    // 如果有子项被选中，使用子项值
+    newValues[realValueKey] = childrenValue;
+  } else {
+    // 如果没有子项被选中，使用父项值
+    const parentValue = newValues[optionName] ?? value[optionName];
+    newValues[realValueKey] = parentValue;
+  }
+}

package/lib/components/Search/SearchCard/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ElementItem, SearchCardOption, Font } from "./_components/OptionRow";
+export type { ElementItem, SearchCardOption, Font };
+export interface SearchCardProps {
+    options: SearchCardOption[];
+    defaultValue?: Record<string, unknown>;
+    onChange?: (data: Record<string, unknown>) => void;
+    padding?: number;
+    gap?: number;
+    font?: Font;
+    className?: string;
+    defaultCollapse?: boolean;
+    collapseExpand?: boolean;
+    showSearchBox?: boolean;
+    searchPlaceholder?: string;
+    searchField?: string;
+}
+declare const SearchCard: React.FC<SearchCardProps>;
+export default SearchCard;