fix(form): support OptionType types

close #6227
ant-design · Jul 15, 2023 · 189f933 · 189f933
1 parent 36eaae1
commit 189f933
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 80 deletions.
diff --git a/packages/form/src/components/QueryFilter/demos/query-filter.tsx b/packages/form/src/components/QueryFilter/demos/query-filter.tsx
@@ -1,34 +1,31 @@
 import {
-  ProFormDatePicker,
-  ProFormDateRangePicker,
-  ProFormSelect,
+  ProForm,
+  ProFormDateTimePicker,
   ProFormText,
-  QueryFilter,
 } from '@ant-design/pro-components';
 
 export default () => {
   return (
-    <QueryFilter<{
-      name: string;
-    }>
-      onFinish={async (values) => {
-        console.log(values.name);
-      }}
-    >
-      <ProFormText name="name" label="应用名称" rules={[{ required: true }]} />
-      <ProFormText name="creater" label="创建人" />
-      <ProFormSelect
-        name="sex"
-        label="性别"
-        showSearch
-        valueEnum={{
-          man: '男',
-          woman: '女',
-        }}
-      />
-      <ProFormText name="status" label="应用状态" />
-      <ProFormDatePicker name="startdate" label="响应日期" />
-      <ProFormDateRangePicker name="create" label="创建时间" colSize={3} />
-    </QueryFilter>
+    <ProForm grid={true}>
+      <ProForm.Group>
+        <ProFormDateTimePicker
+          label="下单时间"
+          colProps={{ xl: 12 }}
+          name="orderTime"
+          required
+          fieldProps={{
+            style: {
+              width: '100%',
+            },
+          }}
+        />
+        <ProFormText
+          disabled
+          colProps={{ xl: 12 }}
+          name="pay"
+          label="支付方式"
+        />
+      </ProForm.Group>
+    </ProForm>
   );
 };
diff --git a/packages/form/src/components/Select/index.tsx b/packages/form/src/components/Select/index.tsx
@@ -1,5 +1,6 @@
 import { runFunction } from '@ant-design/pro-utils';
 import type { SelectProps } from 'antd';
+import type { BaseOptionType } from 'antd/lib/cascader';
 import type { RefSelectProps } from 'antd/lib/select';
 import React, { useContext } from 'react';
 import FieldContext from '../../FieldContext';
@@ -9,8 +10,11 @@ import type {
 } from '../../typing';
 import ProFormField from '../Field';
 
-export type ProFormSelectProps<T = any> = ProFormFieldItemProps<
-  SelectProps<T> & {
+export type ProFormSelectProps<
+  ValueType = any,
+  OptionType extends BaseOptionType = any,
+> = ProFormFieldItemProps<
+  SelectProps<ValueType> & {
     /**
      * 是否在输入框聚焦时触发搜索
      *
@@ -30,64 +34,63 @@ export type ProFormSelectProps<T = any> = ProFormFieldItemProps<
      */
     fetchDataOnSearch?: boolean;
     /** 自定义选项渲染 */
-    optionItemRender?: (item: T) => React.ReactNode;
+    optionItemRender?: (item: ValueType) => React.ReactNode;
   },
   RefSelectProps
 > & {
-  options?: SelectProps<any>['options'] | string[];
-  mode?: SelectProps<any>['mode'] | 'single';
-  showSearch?: SelectProps<any>['showSearch'];
+  options?: SelectProps<ValueType, OptionType>['options'] | string[];
+  mode?: SelectProps<ValueType, OptionType>['mode'] | 'single';
+  showSearch?: SelectProps<ValueType, OptionType>['showSearch'];
   readonly?: boolean;
+  onChange?: SelectProps<ValueType, OptionType>['onChange'];
 } & ProFormFieldRemoteProps;
 
 /**
  * 选择框
  *
  * @param
  */
-const ProFormSelectComponents = React.forwardRef<any, ProFormSelectProps<any>>(
-  (
-    {
-      fieldProps,
-      children,
-      params,
-      proFieldProps,
-      mode,
-      valueEnum,
-      request,
-      showSearch,
-      options,
-      ...rest
-    },
-    ref,
-  ) => {
-    const context = useContext(FieldContext);
+const ProFormSelectComponents = <T, OptionType extends BaseOptionType = any>(
+  {
+    fieldProps,
+    children,
+    params,
+    proFieldProps,
+    mode,
+    valueEnum,
+    request,
+    showSearch,
+    options,
+    ...rest
+  }: ProFormSelectProps<T, OptionType>,
+  ref: any,
+) => {
+  const context = useContext(FieldContext);
 
-    return (
-      <ProFormField<any>
-        valueEnum={runFunction(valueEnum)}
-        request={request}
-        params={params}
-        valueType="select"
-        filedConfig={{ customLightMode: true }}
-        fieldProps={
-          {
-            options,
-            mode,
-            showSearch,
-            getPopupContainer: context.getPopupContainer,
-            ...fieldProps,
-          } as SelectProps<any>
-        }
-        ref={ref}
-        proFieldProps={proFieldProps}
-        {...rest}
-      >
-        {children}
-      </ProFormField>
-    );
-  },
-);
+  return (
+    <ProFormField<any>
+      valueEnum={runFunction(valueEnum)}
+      request={request}
+      params={params}
+      valueType="select"
+      filedConfig={{ customLightMode: true }}
+      fieldProps={
+        {
+          options,
+          mode,
+          showSearch,
+          getPopupContainer: context.getPopupContainer,
+          ...fieldProps,
+        } as SelectProps<any>
+      }
+      ref={ref}
+      proFieldProps={proFieldProps}
+      {...rest}
+    >
+      {children}
+    </ProFormField>
+  );
+};
 
 const SearchSelect = React.forwardRef<any, ProFormSelectProps<any>>(
   (
@@ -135,16 +138,25 @@ const SearchSelect = React.forwardRef<any, ProFormSelectProps<any>>(
   },
 );
 
-const ProFormSelect = ProFormSelectComponents as <T>(
-  props: ProFormSelectProps<T>,
+const ProFormSelect = React.forwardRef(ProFormSelectComponents) as <
+  T,
+  OptionType extends BaseOptionType = any,
+>(
+  props: ProFormSelectProps<T, OptionType>,
 ) => React.ReactElement;
 
-const ProFormSearchSelect = SearchSelect as <T>(
-  props: ProFormSelectProps<T>,
+const ProFormSearchSelect = SearchSelect as <
+  T,
+  OptionType extends BaseOptionType = any,
+>(
+  props: ProFormSelectProps<T, OptionType>,
 ) => React.ReactElement;
 
-const WrappedProFormSelect = ProFormSelect as (<T = any>(
-  props: ProFormSelectProps<T>,
+const WrappedProFormSelect = ProFormSelect as (<
+  T,
+  OptionType extends BaseOptionType = any,
+>(
+  props: ProFormSelectProps<T, OptionType>,
 ) => React.ReactElement) & {
   SearchSelect: typeof ProFormSearchSelect;
 };