@hsu-react/ui 0.0.9 → 0.0.10

package/src/components/Search/SearchAdvanced/index.tsx

@@ -1,17 +1,10 @@
 import React from "react";
-import { Form as AntdForm } from "antd";
-import FormItem from "../../FormItem";
-import { CSSProperties } from "react";
 import classNames from "classnames";
 import styles from "../index.module.scss";
-import { useSearchCommon } from "../_hooks";
+import SearchBase from "../_components/SearchBase";
+import { AdvancedFiltersDrawer } from "./_components/AdvancedFiltersDrawer";
 import { ChakraButtonProps } from "../../Button";
 import { DrawerFormProps } from "../../Form/DrawerForm";
-import { ButtonGroup } from "../_components/ButtonGroup";
-import { SearchButtons } from "../_components/SearchButtons";
-import { FilterDropdown } from "../_components/FilterDropdown";
-import { ExpandButton } from "../_components/ExpandButton";
-import { AdvancedFiltersDrawer } from "../_components/AdvancedFiltersDrawer";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchAdvancedProps extends SearchPropsWithFilter {
@@ -28,168 +21,36 @@ export interface SearchAdvancedProps extends SearchPropsWithFilter {
  */
 const SearchAdvanced: React.FC<SearchAdvancedProps> = (props) => {
   const {
-    searchItems = [],
-    moreSearchItems = [],
     className,
-    onSearch,
-    onReset,
-    externalForm,
-    hasPermi,
-    columnNum = 4,
-    beforeButtonGroup,
-    affterButtonGroup,
-    searchData,
     advancedFiltersProps,
     setFilter,
     minLabelWidth,
-    defaultExpanded = false,
-    onExpandChange,
-    autoAdaptWidth = true,
-    baseWidth,
-    onValuesChange,
-    searchDisabled = false,
-    showAllSearchItems = false,
-    searchText,
-    resetText,
-    onFilterChange,
-    columnOffsetWidth = 0,
+    ...rest
   } = props;
 
-  const [form] = AntdForm.useForm(externalForm);
-
-  const {
-    containerRef,
-    buttonGroupRef,
-    cls,
-    getLabelWidth,
-    processedSearchItems,
-    setSearchItems,
-    currentSearchItems,
-    totalColumnNum,
-    expand,
-    setExpand,
-    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, {
-          [styles.advancedFilters]: true,
-        })}
-        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) => {
-                return (
-                  <FormItem
-                    {...item}
-                    key={item.name}
-                    className={classNames(styles.item, item.className, {
-                      [styles.unFill]: item.width !== undefined,
-                    })}
-                    label={undefined}
-                    labelWidth={undefined}
-                  />
-                );
-              })}
-            {(beforeButtonGroup?.length ||
-              affterButtonGroup?.length ||
-              permitted) && (
-              <ButtonGroup
-                beforeButtonGroup={beforeButtonGroup}
-                affterButtonGroup={affterButtonGroup}
-                expandButton={
-                  <ExpandButton
-                    expand={expand}
-                    toggleExpand={toggleExpand}
-                    advancedFilters={true}
-                    showExpandButton={showExpandButton}
-                    showAllSearchItems={
-                      showAllSearchItems || !!moreSearchItems?.length
-                    }
-                  />
-                }
-                permitted={permitted}
-                ref={buttonGroupRef}
-              >
-                {currentSearchItems.length > 0 && (
-                  <SearchButtons
-                    onSearch={onSearchClick}
-                    onReset={onResetClick}
-                    searchDisabled={searchDisabled}
-                    searchText={searchText}
-                    resetText={resetText}
-                  />
-                )}
-                {setFilter && (
-                  <FilterDropdown
-                    searchItems={processedSearchItems}
-                    originalSearchItems={searchItems}
-                    setSearchItems={setSearchItems}
-                    onFilterChange={onFilterChange}
-                  />
-                )}
-              </ButtonGroup>
-            )}
-          </AntdForm>
-        </div>
-      </div>
-      {permitted && setExpand && (
-        <AdvancedFiltersDrawer
-          expand={expand}
-          setExpand={setExpand}
-          searchItems={processedSearchItems}
-          form={form}
-          getLabelWidth={getLabelWidth}
-          minLabelWidth={minLabelWidth}
-          onSearchClick={onSearchClick}
-          onResetClick={onResetClick}
-          advancedFiltersProps={advancedFiltersProps}
-        />
-      )}
-    </>
+    <SearchBase
+      {...rest}
+      minLabelWidth={minLabelWidth}
+      advancedFilters
+      showFilter={!!setFilter}
+      className={classNames(className, styles.advancedFilters)}
+      renderOutside={(ctx) =>
+        ctx.setExpand && (
+          <AdvancedFiltersDrawer
+            expand={ctx.expand}
+            setExpand={ctx.setExpand}
+            searchItems={ctx.processedSearchItems}
+            form={ctx.form}
+            getLabelWidth={ctx.getLabelWidth}
+            minLabelWidth={minLabelWidth}
+            onSearchClick={ctx.onSearchClick}
+            onResetClick={ctx.onResetClick}
+            advancedFiltersProps={advancedFiltersProps}
+          />
+        )
+      }
+    />
   );
 };
 

package/src/components/Search/SearchCard/index.tsx

@@ -77,7 +77,7 @@ const SearchCard: React.FC<SearchCardProps> = memo((props) => {
       style={
         {
           "--searchCard-column-gap": `${gap}px`,
-          " --searchCard-padding-left-right": `${padding}px`,
+          "--searchCard-padding-left-right": `${padding}px`,
         } as CSSProperties
       }
     >

package/src/components/Search/{_components → SearchCollapsible/_components}/CollapseToggle/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import Icon from "../../../Icon";
+import Icon from "../../../../Icon";
 import classNames from "classnames";
-import styles from "../../index.module.scss";
+import styles from "../../../index.module.scss";
 
 interface CollapseToggleProps {
   collapse: boolean;

package/src/components/Search/SearchCollapsible/index.tsx

@@ -1,16 +1,9 @@
-import React from "react";
-import { Form as AntdForm } from "antd";
-import FormItem from "../../FormItem";
-import { CSSProperties, useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import classNames from "classnames";
 import styles from "../index.module.scss";
-import { useSearchCommon } from "../_hooks";
+import SearchBase from "../_components/SearchBase";
+import { CollapseToggle } from "./_components/CollapseToggle";
 import { ChakraButtonProps } from "../../Button";
-import { ButtonGroup } from "../_components/ButtonGroup";
-import { SearchButtons } from "../_components/SearchButtons";
-import { FilterDropdown } from "../_components/FilterDropdown";
-import { ExpandButton } from "../_components/ExpandButton";
-import { CollapseToggle } from "../_components/CollapseToggle";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchCollapsibleProps extends SearchPropsWithFilter {
@@ -27,73 +20,16 @@ export interface SearchCollapsibleProps extends SearchPropsWithFilter {
  */
 const SearchCollapsible: React.FC<SearchCollapsibleProps> = (props) => {
   const {
-    searchItems = [],
-    moreSearchItems = [],
     className,
-    onSearch,
-    onReset,
-    externalForm,
-    hasPermi,
-    columnNum = 4,
-    beforeButtonGroup,
-    affterButtonGroup,
-    searchData,
-    setFilter,
-    minLabelWidth,
     defaultExpanded = false,
     onCollapseToggle,
-    onExpandChange,
-    autoAdaptWidth = true,
-    baseWidth,
-    onValuesChange,
-    searchDisabled = false,
-    showAllSearchItems = false,
-    searchText,
-    resetText,
-    onFilterChange,
-    columnOffsetWidth = 0,
+    setFilter,
+    ...rest
   } = props;
 
-  const [form] = AntdForm.useForm(externalForm);
   // collapse 的语义是反的，所以需要取反 defaultExpanded
   const [collapse, setCollapse] = useState(!defaultExpanded);
 
-  const {
-    containerRef,
-    buttonGroupRef,
-    cls,
-    getLabelWidth,
-    processedSearchItems,
-    setSearchItems,
-    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,
-  });
-
   // 处理折叠切换
   const handleCollapseToggle = useCallback(() => {
     setCollapse((prev) => {
@@ -103,103 +39,18 @@ const SearchCollapsible: React.FC<SearchCollapsibleProps> = (props) => {
     });
   }, [onCollapseToggle]);
 
-  if (!shouldRender) {
-    return null;
-  }
-
   return (
-    <div
-      ref={containerRef}
-      className={classNames(styles.Search, className, {
-        [styles.collapseExpand]: true,
+    <SearchBase
+      {...rest}
+      defaultExpanded={defaultExpanded}
+      showFilter={!!setFilter}
+      className={classNames(className, styles.collapseExpand, {
         [styles.collapse]: collapse,
       })}
-      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}
-                />
-              )}
-              {setFilter && (
-                <FilterDropdown
-                  searchItems={processedSearchItems}
-                  originalSearchItems={searchItems}
-                  setSearchItems={setSearchItems}
-                  onFilterChange={onFilterChange}
-                />
-              )}
-            </ButtonGroup>
-          )}
-        </AntdForm>
-      </div>
-      {permitted && (
+      afterForm={
         <CollapseToggle collapse={collapse} onToggle={handleCollapseToggle} />
-      )}
-    </div>
+      }
+    />
   );
 };
 

package/src/components/Search/SearchWithFilter/index.tsx

@@ -1,15 +1,6 @@
 import React from "react";
-import { Form as AntdForm } from "antd";
-import FormItem from "../../FormItem";
-import { CSSProperties } from "react";
-import classNames from "classnames";
-import styles from "../index.module.scss";
-import { useSearchCommon } from "../_hooks";
+import SearchBase from "../_components/SearchBase";
 import { ChakraButtonProps } from "../../Button";
-import { ButtonGroup } from "../_components/ButtonGroup";
-import { SearchButtons } from "../_components/SearchButtons";
-import { FilterDropdown } from "../_components/FilterDropdown";
-import { ExpandButton } from "../_components/ExpandButton";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchWithFilterProps extends SearchPropsWithFilter {
@@ -24,160 +15,7 @@ export interface SearchWithFilterProps extends SearchPropsWithFilter {
  * - 提供更灵活的搜索体验
  */
 const SearchWithFilter: React.FC<SearchWithFilterProps> = (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,
-    onFilterChange,
-    columnOffsetWidth = 0,
-  } = props;
-
-  const [form] = AntdForm.useForm(externalForm);
-
-  const {
-    containerRef,
-    buttonGroupRef,
-    cls,
-    getLabelWidth,
-    processedSearchItems,
-    setSearchItems,
-    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}
-                />
-              )}
-              <FilterDropdown
-                searchItems={processedSearchItems}
-                originalSearchItems={searchItems}
-                setSearchItems={setSearchItems}
-                onFilterChange={onFilterChange}
-              />
-            </ButtonGroup>
-          )}
-        </AntdForm>
-      </div>
-    </div>
-  );
+  return <SearchBase {...props} showFilter />;
 };
 
 export default SearchWithFilter;