feat: form support variant

ant-design · Dec 21, 2023 · 2a316d8 · 2a316d8
1 parent bf70858
commit 2a316d8
Show file tree

Hide file tree

Showing 21 changed files with 3,486 additions and 96 deletions.
diff --git a/components/_util/hooks/useVariants.ts b/components/_util/hooks/useVariants.ts
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
@@ -5,8 +5,8 @@ import type {
   DefaultOptionType,
   FieldNames,
   MultipleCascaderProps as RcMultipleCascaderProps,
-  SingleCascaderProps as RcSingleCascaderProps,
   ShowSearchType,
+  SingleCascaderProps as RcSingleCascaderProps,
 } from 'rc-cascader';
 import RcCascader from 'rc-cascader';
 import type { Placement } from 'rc-select/lib/BaseSelect';
@@ -36,9 +36,8 @@ import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
 import CascaderPanel from './Panel';
 import useStyle from './style';
-import type { SelectVariant } from '../select';
-import useVariant from '../_util/hooks/useVariants';
-import { SelectVariants } from '../select';
+import type { Variant } from '../form/hooks/useVariants';
+import useVariant from '../form/hooks/useVariants';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -146,7 +145,7 @@ export type CascaderProps<DataNodeType extends BaseOptionType = any> =
      * @since 5.13.0
      * @default "outlined"
      */
-    variant?: SelectVariant;
+    variant?: Variant;
   };
 
 export interface CascaderRef {
@@ -231,7 +230,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
-  const [variant, enableVariantCls] = useVariant(customVariant, bordered, SelectVariants);
+  const [variant, enableVariantCls] = useVariant(customVariant, bordered);
 
   // =================== No Found ====================
   const mergedNotFoundContent = notFoundContent || renderEmpty?.('Cascader') || (

diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -29,8 +29,7 @@ import Components from './Components';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
 import { useZIndex } from '../../_util/hooks/useZIndex';
 import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
-import useVariant from '../../_util/hooks/useVariants';
-import { InputVariants } from '../../input/Input';
+import useVariant from '../../form/hooks/useVariants';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type InternalRangePickerProps = RangePickerProps<DateType> & {};
@@ -75,7 +74,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     const { format, showTime, picker } = props as any;
     const rootPrefixCls = getPrefixCls();
 
-    const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants);
+    const [variant, enableVariantCls] = useVariant(customVariant, bordered);
 
     const rootCls = useCSSVarCls(prefixCls);
     const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);

diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -30,8 +30,7 @@ import Components from './Components';
 import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface';
 import { useZIndex } from '../../_util/hooks/useZIndex';
 import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls';
-import useVariant from '../../_util/hooks/useVariants';
-import { InputVariants } from '../../input/Input';
+import useVariant from '../../form/hooks/useVariants';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type CustomPickerProps = {
@@ -83,7 +82,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const innerRef = React.useRef<RCPicker<DateType>>(null);
         const { format, showTime } = props as any;
 
-        const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants);
+        const [variant, enableVariantCls] = useVariant(customVariant, bordered);
 
         const rootCls = useCSSVarCls(prefixCls);
         const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);

diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
@@ -15,7 +15,7 @@ import type { SizeType } from '../../config-provider/SizeContext';
 import type { TimePickerLocale } from '../../time-picker';
 import generateRangePicker from './generateRangePicker';
 import generateSinglePicker from './generateSinglePicker';
-import type { InputVariant } from '../../input/Input';
+import type { Variant } from '../../form/hooks/useVariants';
 
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
 type DataPickerPlacement = (typeof DataPickerPlacements)[number];
@@ -34,7 +34,7 @@ type InjectDefaultProps<Props> = Omit<
    * @since 5.13.0
    * @default "outlined"
    */
-  variant?: InputVariant;
+  variant?: Variant;
 };
 
 export type PickerLocale = {

diff --git a/components/form/Form.tsx b/components/form/Form.tsx
@@ -12,14 +12,15 @@ import SizeContext from '../config-provider/SizeContext';
 import useSize from '../config-provider/hooks/useSize';
 import type { ColProps } from '../grid/col';
 import type { FormContextProps } from './context';
-import { FormContext, FormProvider } from './context';
+import { FormContext, FormProvider, VariantContext } from './context';
 import useForm, { type FormInstance } from './hooks/useForm';
 import useFormWarning from './hooks/useFormWarning';
 import type { FormLabelAlign } from './interface';
 import useStyle from './style';
 import ValidateMessagesContext from './validateMessagesContext';
 import type { FeedbackIcons } from './FormItem';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import type { Variant } from './hooks/useVariants';
 
 export type RequiredMark =
   | boolean
@@ -45,6 +46,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
   /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
   hideRequiredMark?: boolean;
   rootClassName?: string;
+  variant?: Variant;
 }
 
 const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (props, ref) => {
@@ -71,6 +73,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
     name,
     style,
     feedbackIcons,
+    variant,
     ...restFormProps
   } = props;
 
@@ -182,28 +185,30 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   };
 
   return wrapCSSVar(
-    <DisabledContextProvider disabled={disabled}>
-      <SizeContext.Provider value={mergedSize}>
-        <FormProvider
-          {...{
-            // This is not list in API, we pass with spread
-            validateMessages: contextValidateMessages,
-          }}
-        >
-          <FormContext.Provider value={formContextValue}>
-            <FieldForm
-              id={name}
-              {...restFormProps}
-              name={name}
-              onFinishFailed={onInternalFinishFailed}
-              form={wrapForm}
-              style={{ ...contextForm?.style, ...style }}
-              className={formClassName}
-            />
-          </FormContext.Provider>
-        </FormProvider>
-      </SizeContext.Provider>
-    </DisabledContextProvider>,
+    <VariantContext.Provider value={variant}>
+      <DisabledContextProvider disabled={disabled}>
+        <SizeContext.Provider value={mergedSize}>
+          <FormProvider
+            {...{
+              // This is not list in API, we pass with spread
+              validateMessages: contextValidateMessages,
+            }}
+          >
+            <FormContext.Provider value={formContextValue}>
+              <FieldForm
+                id={name}
+                {...restFormProps}
+                name={name}
+                onFinishFailed={onInternalFinishFailed}
+                form={wrapForm}
+                style={{ ...contextForm?.style, ...style }}
+                className={formClassName}
+              />
+            </FormContext.Provider>
+          </FormProvider>
+        </SizeContext.Provider>
+      </DisabledContextProvider>
+    </VariantContext.Provider>,
   );
 };