@hsu-react/ui 0.0.9 → 0.0.10

package/src/components/Search/index.tsx

@@ -1,17 +1,10 @@
-import { Form as AntdForm } from "antd";
-import FormItem from "../FormItem";
-import React, { CSSProperties } from "react";
-import classNames from "classnames";
-import styles from "./index.module.scss";
-import { useSearchCommon } from "./_hooks";
+import React from "react";
 import SearchCard, { SearchCardProps } from "./SearchCard";
 import SearchAdvanced from "./SearchAdvanced";
 import SearchCollapsible from "./SearchCollapsible";
 import SearchWithFilter from "./SearchWithFilter";
 import SearchWithMore from "./SearchWithMore";
-import { ButtonGroup } from "./_components/ButtonGroup";
-import { SearchButtons } from "./_components/SearchButtons";
-import { ExpandButton } from "./_components/ExpandButton";
+import SearchBase from "./_components/SearchBase";
 import { BaseSearchProps } from "./_types";
 import { ChakraButtonProps } from "../Button";
 
@@ -43,151 +36,12 @@ export type SearchModePropsMap = {
   WithMore: React.ComponentProps<SearchFC["WithMore"]>;
 };
 
+/**
+ * 基础 Search 组件
+ * - 标准的搜索表单布局，自适应列数与展开/收起
+ */
 const Search: SearchFC = (props) => {
-  const {
-    searchItems = [],
-    moreSearchItems = [],
-    className,
-    onSearch,
-    onReset,
-    externalForm,
-    hasPermi,
-    columnNum = 4,
-    beforeButtonGroup,
-    affterButtonGroup,
-    searchData,
-    minLabelWidth,
-    defaultExpanded = false,
-    onExpandChange,
-    autoAdaptWidth = true,
-    baseWidth,
-    onValuesChange,
-    searchDisabled = false,
-    showAllSearchItems = false,
-    searchText,
-    resetText,
-    columnOffsetWidth = 0,
-  } = props;
-
-  const [form] = AntdForm.useForm(externalForm);
-
-  const {
-    containerRef,
-    buttonGroupRef,
-    cls,
-    getLabelWidth,
-    currentSearchItems,
-    totalColumnNum,
-    expand,
-    toggleExpand,
-    showExpandButton,
-    onSearchClick,
-    onResetClick,
-    shouldRender,
-    permitted,
-  } = useSearchCommon({
-    form,
-    searchItems,
-    moreSearchItems,
-    searchData,
-    hasPermi,
-    beforeButtonGroup,
-    affterButtonGroup,
-    columnNum,
-    autoAdaptWidth,
-    defaultExpanded,
-    onExpandChange,
-    showAllSearchItems,
-    minLabelWidth,
-    baseWidth,
-    onSearch,
-    onReset,
-    columnOffsetWidth,
-  });
-
-  if (!shouldRender) {
-    return null;
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      className={classNames(styles.Search, className)}
-      style={
-        {
-          "--column-number": totalColumnNum,
-          "--column-offset-width": `${columnOffsetWidth}px`,
-        } as CSSProperties
-      }
-    >
-      <div
-        className={classNames(styles.searchOption, styles[expand.toString()])}
-      >
-        <AntdForm
-          form={form}
-          className={classNames(styles.option, cls)}
-          onValuesChange={onValuesChange}
-        >
-          {permitted &&
-            currentSearchItems?.map((item, idx) => {
-              const visibleCurrentItems = currentSearchItems.filter(
-                (i) => i.visible !== false
-              );
-              const columnIndex = idx % totalColumnNum;
-              const sameColumnItems = visibleCurrentItems.filter(
-                (_, _idx) => _idx % totalColumnNum === columnIndex
-              );
-
-              return (
-                <FormItem
-                  {...item}
-                  key={item.name}
-                  className={classNames(styles.item, item.className, {
-                    [styles.unFill]: item.width !== undefined,
-                  })}
-                  labelWidth={
-                    item.width !== undefined
-                      ? undefined
-                      : getLabelWidth(sameColumnItems, undefined, minLabelWidth)
-                  }
-                />
-              );
-            })}
-          {(beforeButtonGroup?.length ||
-            affterButtonGroup?.length ||
-            permitted) && (
-            <ButtonGroup
-              beforeButtonGroup={beforeButtonGroup}
-              affterButtonGroup={affterButtonGroup}
-              expandButton={
-                <ExpandButton
-                  expand={expand}
-                  toggleExpand={toggleExpand}
-                  advancedFilters={false}
-                  showExpandButton={showExpandButton}
-                  showAllSearchItems={
-                    showAllSearchItems || !!moreSearchItems?.length
-                  }
-                />
-              }
-              permitted={permitted}
-              ref={buttonGroupRef}
-            >
-              {currentSearchItems.length > 0 && (
-                <SearchButtons
-                  onSearch={onSearchClick}
-                  onReset={onResetClick}
-                  searchDisabled={searchDisabled}
-                  searchText={searchText}
-                  resetText={resetText}
-                />
-              )}
-            </ButtonGroup>
-          )}
-        </AntdForm>
-      </div>
-    </div>
-  );
+  return <SearchBase {...props} />;
 };
 
 Search.Card = SearchCard;

package/src/components/Table/_hooks/useTableColumns.tsx

@@ -23,6 +23,8 @@ import { PaginationProps } from "../_components/Pagination";
 const MEASURE_ALIGN_FONT_SIZE = 14;
 // Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
 const MEASURE_ALIGN_BUFFER_PX = 2;
+// 单元格左右内边距合计（--td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
+const MEASURE_ALIGN_CELL_PADDING_PX = 16;
 
 // 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
 const getMeasureAlignWidth = <T extends AnyObject>(
@@ -159,6 +161,21 @@ const useTableColumns = <T extends AnyObject>(
           item.width = Math.max(titleWidth, dataIndexWidth) + 32;
         }
 
+        // measureAlign 列：列宽须容得下最宽行的定宽内容块 + 单元格左右内边距，
+        // 否则出现超长值（如 +3357.52%）时内容会被列宽截断；声明的 width 只作下限。
+        if (item.measureAlign && typeof item.width === "number") {
+          const measured = getMeasureAlignWidth(
+            item as ColumnType<T>,
+            dataSource
+          );
+          if (measured > 0) {
+            item.width = Math.max(
+              item.width,
+              measured + MEASURE_ALIGN_CELL_PADDING_PX
+            );
+          }
+        }
+
         return item;
       })
       ?.map((item) => {