feat(table): ProTable support optionsRender

close #7297
ant-design · Jul 18, 2023 · 8b56b6a · 8b56b6a
1 parent c3b8ffd
commit 8b56b6a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 20 deletions.
diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx
@@ -424,6 +424,7 @@ const ProTable = <
     actionRef: propsActionRef,
     columns: propsColumns = [],
     toolBarRender,
+    optionsRender,
     onLoad,
     onRequestError,
     style,
@@ -818,28 +819,31 @@ const ProTable = <
   const isLightFilter: boolean =
     search !== false && search?.filterType === 'light';
 
-  const onFormSearchSubmit = <Y extends ParamsType>(values: Y): any => {
-    // 判断search.onSearch返回值决定是否更新formSearch
-    if (options && options.search) {
-      const { name = 'keyword' } =
-        options.search === true ? {} : options.search;
+  const onFormSearchSubmit = useCallback(
+    <Y extends ParamsType>(values: Y): any => {
+      // 判断search.onSearch返回值决定是否更新formSearch
+      if (options && options.search) {
+        const { name = 'keyword' } =
+          options.search === true ? {} : options.search;
 
-      /** 如果传入的 onSearch 返回值为 false，则不要把options.search.name对应的值set到formSearch */
-      const success = (options.search as OptionSearchProps)?.onSearch?.(
-        counter.keyWords!,
-      );
+        /** 如果传入的 onSearch 返回值为 false，则不要把options.search.name对应的值set到formSearch */
+        const success = (options.search as OptionSearchProps)?.onSearch?.(
+          counter.keyWords!,
+        );
 
-      if (success !== false) {
-        setFormSearch({
-          ...values,
-          [name]: counter.keyWords,
-        });
-        return;
+        if (success !== false) {
+          setFormSearch({
+            ...values,
+            [name]: counter.keyWords,
+          });
+          return;
+        }
       }
-    }
 
-    setFormSearch(values);
-  };
+      setFormSearch(values);
+    },
+    [counter.keyWords, options, setFormSearch],
+  );
 
   const loading = useMemo(() => {
     if (typeof action.loading === 'object') {
@@ -923,6 +927,7 @@ const ProTable = <
         }}
         searchNode={isLightFilter ? searchNode : null}
         options={options}
+        optionsRender={optionsRender}
         actionRef={actionRef}
         toolBarRender={toolBarRender}
       />

diff --git a/packages/table/src/components/ToolBar/index.tsx b/packages/table/src/components/ToolBar/index.tsx
@@ -56,6 +56,7 @@ export type ToolBarProps<T = unknown> = {
   ) => React.ReactNode[];
   action: React.MutableRefObject<ActionType | undefined>;
   options?: OptionConfig | false;
+  optionsRender?: ToolbarRenderProps<T>['optionsRender'];
   selectedRowKeys?: (string | number)[];
   selectedRows?: T[];
   className?: string;
@@ -159,6 +160,7 @@ function ToolBar<T>({
   toolbar,
   onSearch,
   columns,
+  optionsRender,
   ...rest
 }: ToolBarProps<T>) {
   const counter = useContext(TableContext);
@@ -182,7 +184,7 @@ function ToolBar<T>({
       ...propsOptions,
     };
 
-    return renderDefaultOption<T>(
+    const settings = renderDefaultOption<T>(
       options,
       {
         ...defaultOptions,
@@ -191,7 +193,41 @@ function ToolBar<T>({
       action,
       columns,
     );
-  }, [action, columns, intl, propsOptions]);
+    if (optionsRender) {
+      return optionsRender(
+        {
+          headerTitle,
+          tooltip,
+          toolBarRender,
+          action,
+          options: propsOptions,
+          selectedRowKeys,
+          selectedRows,
+          toolbar,
+          onSearch,
+          columns,
+          optionsRender,
+          ...rest,
+        },
+        settings,
+      );
+    }
+    return settings;
+  }, [
+    action,
+    columns,
+    headerTitle,
+    intl,
+    onSearch,
+    optionsRender,
+    propsOptions,
+    rest,
+    selectedRowKeys,
+    selectedRows,
+    toolBarRender,
+    toolbar,
+    tooltip,
+  ]);
   // 操作列表
   const actions = toolBarRender
     ? toolBarRender(action?.current, { selectedRowKeys, selectedRows })
@@ -248,6 +284,10 @@ export type ToolbarRenderProps<T> = {
   headerTitle: React.ReactNode;
   toolbar: ProTableProps<T, any, any>['toolbar'];
   options: ProTableProps<T, any, any>['options'];
+  optionsRender?: (
+    props: ToolBarProps<T>,
+    defaultDom: React.ReactNode[],
+  ) => React.ReactNode[];
   toolBarRender?: ToolBarProps<T>['toolBarRender'];
   actionRef: React.MutableRefObject<ActionType | undefined>;
 };
@@ -341,6 +381,7 @@ class ToolbarRender<T> extends React.Component<ToolbarRenderProps<T>> {
       headerTitle,
       actionRef,
       toolBarRender,
+      optionsRender,
     } = this.props;
 
     // 不展示 toolbar
@@ -362,6 +403,7 @@ class ToolbarRender<T> extends React.Component<ToolbarRenderProps<T>> {
           filter: searchNode,
           ...toolbar,
         }}
+        optionsRender={optionsRender}
       />
     );
   };

diff --git a/packages/table/src/typing.ts b/packages/table/src/typing.ts
@@ -320,6 +320,8 @@ export type ProTableProps<DataSource, U, ValueType = 'text'> = {
    */
   toolBarRender?: ToolBarProps<DataSource>['toolBarRender'] | false;
 
+  optionsRender?: ToolBarProps<DataSource>['optionsRender'];
+
   /**
    * @name 数据加载完成后触发
    */