Passing form item props & Support search buttons text configuration (#38

)

* feat: wrap search buttons in a Form.Item

Closes #19

* feat: support form item props passed to the search form

Closes #10

* feat: support search buttons text config

Closes #10

* feat: remove `all` option

* docs: update readme

README.en_US.md

@@ -29,7 +29,7 @@ pro-table is encapsulated in an antd table, supports some presets, and encapsula
 | tableClassName | The className of the packaged table | string | - |
 | tableStyle | The style of the packaged table | CSSProperties | - |
 | options | table's default operation, set to false to close it | `{{ fullScreen: boolean \| function, reload: boolean \| function,setting: true }}` | `{{ fullScreen: true, reload:true,setting: true }}` |
-| search | whether to search the form | boolean | true |
+| search | Whether to search the form. It can also be a query form config when passing an object. | `boolean \| { searchText?: string, resetText?: string, collapseRender?: (collapsed: boolean) => React.ReactNode }` | true |
 | dateFormatter | formatting moment type | `"string" \| "number" \| false` | string |
 | beforeSearchSubmit | Make some changes before searching | `(params:T)=>T` | - |
 
@@ -46,6 +46,7 @@ pro-table is encapsulated in an antd table, supports some presets, and encapsula
 | valueType | Type of value | `'money' \| 'option' \| 'date' \| 'dateTime' \| 'time' \| 'text'\| 'index' \| 'indexBorder'` | 'text' |
 | hideInSearch | Do not show this in the query form | boolean | - |
 | hideInTable | Do not show this column in Table | boolean | - |
+| formItemProps | Props passed into query form item | `{ [prop: string]: any }` | - |
 
 ### valueType
 

README.md

@@ -29,7 +29,7 @@ pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，
 | tableClassName | 封装的 table 的 className | string | - |
 | tableStyle | 封装的 table 的 style | CSSProperties | - |
 | options | table 的默认操作，设置为 false 可以关闭它 | `{{ fullScreen: boolean \| function, reload: boolean \| function,setting: true }}` | `{ fullScreen: true, reload:true , setting: true }` |
-| search | 是否显示搜索表单 | boolean | true |
+| search | 是否显示搜索表单，传入对象时为搜索表单的配置 | `boolean \| { searchText?: string, resetText?: string, collapseRender?: (collapsed: boolean) => React.ReactNode }` | true |
 | dateFormatter | moment 的格式化方式 | `"string" \| "number" \| false` | string |
 | beforeSearchSubmit | 搜索之前进行一些修改 | `(params:T)=>T` | - |
 
@@ -46,6 +46,7 @@ pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，
 | valueType | 值的类型 | `'money' \| 'option' \| 'date' \| 'dateTime' \| 'time' \| 'text'\| 'index' \| 'indexBorder'` | 'text' |
 | hideInSearch | 在查询表单中不展示此项 | boolean | - |
 | hideInTable | 在 Table 中不展示此列 | boolean | - |
+| formItemProps | 查询表单的 props，会透传给表单项 | `{ [prop: string]: any }` | - |
 
 ### valueType
 

docs/api.md

@@ -19,7 +19,7 @@ pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，
 | tableClassName | 封装的 table 的 className | string | - |
 | tableStyle | 封装的 table 的 style | CSSProperties | - |
 | options | table 的默认操作，设置为 false 可以关闭它 | `{{ fullScreen: boolean \| function, reload: boolean \| function,setting: true }}` | `{ fullScreen: true, reload:true , setting: true }` |
-| search | 是否显示搜索表单 | boolean | true |
+| search | 是否显示搜索表单，传入对象时为搜索表单的配置 | `boolean \| { searchText?: string, resetText?: string, collapseRender?: (collapsed: boolean) => React.ReactNode }` | true |
 | dateFormatter | moment 的格式化方式 | `"string" \| "number" \| false` | string |
 | beforeSearchSubmit | 搜索之前进行一些修改 | `(params:T)=>T` | - |
 
@@ -36,6 +36,7 @@ pro-table 在 antd 的 table 上进行了一层封装，支持了一些预设，
 | valueType | 值的类型 | `'money' \| 'option' \| 'date' \| 'dateTime' \| 'time' \| 'text'\| 'index' \| 'indexBorder'` | 'text' |
 | hideInSearch | 在查询表单中不展示此项 | boolean | - |
 | hideInTable | 在 Table 中不展示此列 | boolean | - |
+| formItemProps | 查询表单的 props，会透传给表单项 | `{ [prop: string]: any }` | - |
 
 ## valueType
 

package.json

@@ -50,6 +50,7 @@
     "antd": "^3.25.1",
     "classnames": "^2.2.6",
     "dnd-core": "^10.0.2",
+    "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "rc-resize-observer": "^0.1.3",
     "react-dnd": "^10.0.2",

src/Form/index.tsx

@@ -5,15 +5,23 @@ import moment, { Moment } from 'moment';
 import RcResizeObserver from 'rc-resize-observer';
 import { FormComponentProps } from 'antd/lib/form';
 import { ConfigConsumer, ConfigConsumerProps } from 'antd/lib/config-provider';
+import get from 'lodash/get';
 import { parsingValueEnumToArray } from '../component/util';
 import Container from '../container';
 import { ProColumns } from '../index';
 import './index.less';
 
+export interface SearchConfig {
+  searchText?: string;
+  resetText?: string;
+  collapseRender?: (collapsed: boolean) => React.ReactNode;
+}
+
 interface FormItem<T> extends FormComponentProps {
   onSubmit?: (value: T) => void;
   onReset?: () => void;
   dateFormatter?: 'string' | 'number' | false;
+  search?: boolean | SearchConfig;
 }
 
 const FromInputRender: React.FC<{
@@ -31,10 +39,7 @@ const FromInputRender: React.FC<{
     const { valueEnum } = item;
     if (valueEnum) {
       return (
-        <Select placeholder="请选择" ref={ref} {...rest}>
-          <Select.Option key="all" value="all">
-            全部
-          </Select.Option>
+        <Select placeholder="请选择" ref={ref} {...rest} {...item.formItemProps}>
           {parsingValueEnumToArray(valueEnum).map(({ value, text }) => (
             <Select.Option key={value} value={value}>
               {text}
@@ -43,7 +48,7 @@ const FromInputRender: React.FC<{
         </Select>
       );
     }
-    return <Input placeholder="请输入" {...rest} />;
+    return <Input placeholder="请输入" {...rest} {...item.formItemProps} />;
   }
   if (item.valueType === 'date') {
     return (
@@ -54,6 +59,7 @@ const FromInputRender: React.FC<{
           width: '100%',
         }}
         {...rest}
+        {...item.formItemProps}
       />
     );
   }
@@ -67,6 +73,7 @@ const FromInputRender: React.FC<{
           width: '100%',
         }}
         {...rest}
+        {...item.formItemProps}
       />
     );
   }
@@ -79,6 +86,7 @@ const FromInputRender: React.FC<{
           width: '100%',
         }}
         {...rest}
+        {...item.formItemProps}
       />
     );
   }
@@ -100,6 +108,7 @@ const FromInputRender: React.FC<{
           width: '100%',
         }}
         {...rest}
+        {...item.formItemProps}
       />
     );
   }
@@ -136,7 +145,12 @@ const genValue = (value: any, dateFormatter?: string | boolean, proColumnsMap?:
   return tmpValue;
 };
 
-const FormSearch = <T, U = {}>({ form, onSubmit, dateFormatter = 'string' }: FormItem<T>) => {
+const FormSearch = <T, U = {}>({
+  form,
+  onSubmit,
+  dateFormatter = 'string',
+  search,
+}: FormItem<T>) => {
   const counter = Container.useContainer();
   const [collapse, setCollapse] = useState<boolean>(true);
   const [proColumnsMap, setProColumnsMap] = useState<{
@@ -180,6 +194,10 @@ const FormSearch = <T, U = {}>({ form, onSubmit, dateFormatter = 'string' }: For
         </Form.Item>
       </Col>
     ));
+
+  const defaultCollapseRender = (collapsed: boolean) => (collapsed ? '展开' : '收起');
+  const collapseRender = get(search, 'collapseRender', defaultCollapseRender);
+
   return (
     <ConfigConsumer>
       {({ getPrefixCls }: ConfigConsumerProps) => {
@@ -203,7 +221,7 @@ const FormSearch = <T, U = {}>({ form, onSubmit, dateFormatter = 'string' }: For
                   >
                     <Form.Item>
                       <Button type="primary" htmlType="submit" onClick={() => submit()}>
-                        搜索
+                        {get(search, 'searchText', '搜索')}
                       </Button>
                       <Button
                         style={{ marginLeft: 8 }}
@@ -212,7 +230,7 @@ const FormSearch = <T, U = {}>({ form, onSubmit, dateFormatter = 'string' }: For
                           submit();
                         }}
                       >
-                        重置
+                        {get(search, 'resetText', '重置')}
                       </Button>
                       {columnsList.length > 2 && (
                         <a
@@ -221,9 +239,10 @@ const FormSearch = <T, U = {}>({ form, onSubmit, dateFormatter = 'string' }: For
                             setCollapse(!collapse);
                           }}
                         >
-                          {collapse ? '展开' : '收起'}{' '}
+                          {collapseRender(collapse)}
                           <DownOutlined
                             style={{
+                              marginLeft: '0.5em',
                               transition: '0.3s all',
                               transform: `rotate(${collapse ? 0 : 0.5}turn)`,
                             }}

src/Table.tsx

@@ -11,7 +11,7 @@ import Container, { ColumnsMapItem } from './container';
 import IndexColumn from './component/indexColumn';
 import Toolbar, { OptionsType, ToolBarProps } from './component/toolBar';
 import Alert from './component/alert';
-import FormSearch from './Form';
+import FormSearch, { SearchConfig } from './Form';
 import { StatusType } from './component/status';
 import { parsingText, parsingValueEnumToArray, checkUndefinedOrNull } from './component/util';
 
@@ -61,6 +61,11 @@ export interface ProColumns<T = unknown> extends Omit<ColumnProps<T>, 'render' |
     config: { value?: any; onChange?: (value: any) => void },
   ) => React.ReactNode;
 
+  /**
+   * 搜索表单的 props
+   */
+  formItemProps?: { [prop: string]: any };
+
   /**
    * 搜索表单的默认值
    */
@@ -183,7 +188,7 @@ export interface ProTableProps<T> extends Omit<TableProps<T>, 'columns' | 'rowSe
   /**
    * 是否显示搜索表单
    */
-  search?: boolean;
+  search?: boolean | SearchConfig;
   /**
    * 如何格式化日期
    * 暂时只支持 moment
@@ -615,6 +620,7 @@ const ProTable = <T, U = {}>(props: ProTableProps<T>) => {
             action.resetPageIndex();
           }}
           dateFormatter={reset.dateFormatter}
+          search={search}
         />
       )}
       <Card