💄 style: Update Form footer style

src/Form/components/FormFooter.tsx

@@ -7,9 +7,9 @@ import { type DivProps } from '@/types';
 
 export type FormFooterProps = DivProps;
 
-const FormFooter = memo<FormFooterProps>(({ className, children, ...rest }) => {
+const FormFooter = memo<FormFooterProps>(({ children, ...rest }) => {
   return (
-    <Flexbox className={className} gap={8} justify={'flex-end'} {...rest} horizontal>
+    <Flexbox gap={8} horizontal justify={'flex-end'} {...rest}>
       {children}
     </Flexbox>
   );

src/Form/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Form as AntForm, FormProps as AntFormProps, type FormInstance } from 'antd';
-import { type ReactNode, RefAttributes, forwardRef } from 'react';
+import { CSSProperties, type ReactNode, RefAttributes, forwardRef } from 'react';
 
 import FormFooter from './components/FormFooter';
 import FormGroup, { type FormGroupProps, FormVariant, ItemsType } from './components/FormGroup';
@@ -18,12 +18,18 @@ export interface ItemGroup {
 
 export interface FormProps extends Omit<AntFormProps, 'variant'> {
   children?: ReactNode;
+  classNames?: {
+    footer?: string;
+  };
   collapsible?: boolean;
   footer?: ReactNode;
   gap?: number | string;
   itemMinWidth?: FormItemProps['minWidth'];
   items?: ItemGroup[] | FormItemProps[];
   itemsType?: ItemsType;
+  styles?: {
+    footer?: CSSProperties;
+  };
   variant?: FormVariant;
 }
 
@@ -41,11 +47,13 @@ const FormParent = forwardRef<FormInstance, FormProps>(
       gap,
       style,
       collapsible,
+      classNames = {},
+      styles = {},
       ...rest
     },
     ref,
   ) => {
-    const { cx, styles } = useStyles();
+    const { cx, styles: s } = useStyles();
 
     const mapFlat = (item: FormItemProps, itemIndex: number) => (
       <FormItem divider={itemIndex !== 0} key={itemIndex} minWidth={itemMinWidth} {...item} />
@@ -68,7 +76,7 @@ const FormParent = forwardRef<FormInstance, FormProps>(
 
     return (
       <AntForm
-        className={cx(styles.form, variant === 'pure' && styles.pure, styles.mobile, className)}
+        className={cx(s.form, variant === 'pure' && s.pure, s.mobile, className)}
         colon={false}
         form={form}
         layout={'horizontal'}
@@ -91,7 +99,11 @@ const FormParent = forwardRef<FormInstance, FormProps>(
           )
         ) : undefined}
         {children}
-        {footer && <FormFooter>{footer}</FormFooter>}
+        {footer && (
+          <FormFooter className={classNames?.footer} style={styles?.footer}>
+            {footer}
+          </FormFooter>
+        )}
       </AntForm>
     );
   },

src/FormModal/demos/MultiForm.tsx

@@ -1,9 +1,15 @@
 import { Form, FormModal } from '@lobehub/ui';
 import { StoryBook, useControls, useCreateStore } from '@lobehub/ui/storybook';
-import { Button, InputNumber, Segmented, Select, Switch } from 'antd';
+import { Button } from 'antd';
 import { useState } from 'react';
 
+import { items } from './data';
+
 const { useForm } = Form;
+
+// @ts-ignore
+const [formItem1, formItem2] = items;
+
 const setting = {
   i18n: 'en',
   liteAnimation: false,
@@ -33,14 +39,6 @@ export default () => {
     setIsModalOpen(true);
   };
 
-  const handleSubmit = () => {
-    setLoading(true);
-    setTimeout(() => {
-      form.submit();
-      setLoading(false);
-    }, 2000);
-  };
-
   const handleCancel = () => {
     setIsModalOpen(false);
   };
@@ -52,103 +50,33 @@ export default () => {
       </Button>
       <Form.Provider
         onFormFinish={(_, { values }) => {
+          setLoading(true);
           console.table(values);
+          setTimeout(() => {
+            setLoading(false);
+            setIsModalOpen(false);
+          }, 2000);
         }}
       >
         <FormModal
           form={form}
           initialValues={setting}
           onCancel={handleCancel}
-          onSubmit={handleSubmit}
           open={isModalOpen}
           submitLoading={loading}
           title="Form Modal"
         >
           <Form
             form={form}
             itemMinWidth={'max(30%,240px)'}
-            items={[
-              {
-                children: [
-                  {
-                    children: (
-                      <Select
-                        options={[
-                          {
-                            label: 'English',
-                            value: 'en',
-                          },
-                          {
-                            label: '简体中文',
-                            value: 'zh_CN',
-                          },
-                        ]}
-                      />
-                    ),
-                    desc: 'Editor language',
-                    label: 'Language',
-                    name: 'i18n',
-                  },
-                  {
-                    children: <Switch />,
-                    desc: 'Reduce the blur effect and background flow color, which can improve smoothness and save CPU usage',
-                    label: 'Reduce Animation',
-                    minWidth: undefined,
-                    name: 'liteAnimation',
-                    valuePropName: 'checked',
-                  },
-                ],
-                title: 'Theme Settings',
-              },
-            ]}
+            items={[formItem1]}
             itemsType={'group'}
             variant={variant}
           />
           <Form
             form={form}
             itemMinWidth={'max(30%,240px)'}
-            items={[
-              {
-                children: [
-                  {
-                    children: <Switch />,
-                    desc: 'Whether to expand the sidebar by default when starting',
-                    label: 'Default Expand',
-                    minWidth: undefined,
-                    name: 'sidebarExpand',
-                    valuePropName: 'checked',
-                  },
-                  {
-                    children: (
-                      <Segmented
-                        options={[
-                          {
-                            label: 'Fixed',
-                            value: 'fixed',
-                          },
-                          {
-                            label: 'Float',
-                            value: 'float',
-                          },
-                        ]}
-                      />
-                    ),
-                    desc: 'Fixed as grid mode for constant display, auto-expand when the mouse moves to the side in floating mode',
-                    label: 'Display Mode',
-                    minWidth: undefined,
-                    name: 'sidebarFixedMode',
-                  },
-                  {
-                    children: <InputNumber />,
-                    desc: 'Default width of the sidebar when starting',
-                    label: 'Default Width',
-                    minWidth: undefined,
-                    name: 'sidebarWidth',
-                  },
-                ],
-                title: 'Quick Setting Sidebar',
-              },
-            ]}
+            items={[formItem2]}
             itemsType={'group'}
             variant={variant}
           />

src/FormModal/index.md

@@ -18,4 +18,4 @@ title: FormModal
 
 ## APIs
 
-<API id="FormModal"></API>
+<API></API>

src/FormModal/index.tsx

@@ -1,7 +1,6 @@
 import { Button } from 'antd';
 import { useResponsive } from 'antd-style';
 import { forwardRef } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import Form, { type FormInstance, type FormProps } from '@/Form';
 import Modal, { type ModalProps } from '@/Modal';
@@ -59,7 +58,6 @@ const FormModal = forwardRef<FormInstance, FormModalProps>(
       style,
       closable,
       styles = {},
-      children,
       allowFullscreen,
       title,
       wrapClassName,
@@ -137,23 +135,12 @@ const FormModal = forwardRef<FormInstance, FormModalProps>(
       >
         <Form
           className={cx(s.form, formClassName)}
+          classNames={{
+            footer: cx(s.footer, footerClassName),
+          }}
           clearOnDestroy={destroyOnClose}
-          gap={gap || (variant === 'pure' ? 24 : gap)}
-          onFinish={onFinish}
-          ref={ref}
-          style={formStyle}
-          variant={variant}
-          {...rest}
-        >
-          {children}
-          <Flexbox
-            className={cx(s.footer, footerClassName)}
-            gap={8}
-            horizontal
-            style={footerStyle}
-            width={'100%'}
-          >
-            {footer || (
+          footer={
+            footer || (
               <Button
                 block
                 htmlType="submit"
@@ -168,9 +155,18 @@ const FormModal = forwardRef<FormInstance, FormModalProps>(
               >
                 {submitText || 'Submit'}
               </Button>
-            )}
-          </Flexbox>
-        </Form>
+            )
+          }
+          gap={gap || (variant === 'pure' ? 24 : gap)}
+          onFinish={onFinish}
+          ref={ref}
+          style={formStyle}
+          styles={{
+            footer: footerStyle,
+          }}
+          variant={variant}
+          {...rest}
+        />
       </Modal>
     );
   },