💄 style: Add FormModal Demo

lobehub · Dec 27, 2024 · fda8f94 · fda8f94
1 parent eaf1518
commit fda8f94
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 5 deletions.
diff --git a/src/FormModal/demos/Error.tsx b/src/FormModal/demos/Error.tsx
@@ -0,0 +1,125 @@
+import { FormModal, type FormProps } from '@lobehub/ui';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui/storybook';
+import { Button, InputNumber, Segmented, Select, Switch } from 'antd';
+import { useState } from 'react';
+
+const items: FormProps['items'] = [
+  {
+    children: (
+      <Select
+        options={[
+          {
+            label: 'English',
+            value: 'en',
+          },
+          {
+            label: '简体中文',
+            value: 'zh_CN',
+          },
+        ]}
+      />
+    ),
+    desc: 'Editor language',
+    label: 'Language',
+    name: 'i18n',
+    rules: [{ required: true }],
+  },
+  {
+    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',
+  },
+  {
+    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',
+    rules: [{ message: 'Please input your sidebar width!', required: true }],
+  },
+];
+
+export default () => {
+  const [loading, setLoading] = useState(false);
+  const store = useCreateStore();
+
+  const { variant }: any = useControls(
+    {
+      variant: {
+        options: ['default', 'block', 'ghost', 'pure'],
+        value: 'pure',
+      },
+    },
+    { store },
+  );
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleFinish: FormProps['onFinish'] = (v) => {
+    setLoading(true);
+    console.table(v);
+    setTimeout(() => {
+      setLoading(false);
+      setIsModalOpen(false);
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <StoryBook levaStore={store}>
+      <Button onClick={showModal} type="primary">
+        Open Modal
+      </Button>
+      <FormModal
+        itemMinWidth={'max(30%,240px)'}
+        items={items}
+        itemsType={'flat'}
+        onCancel={handleCancel}
+        onFinish={handleFinish}
+        open={isModalOpen}
+        scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
+        submitLoading={loading}
+        title="Form Modal"
+        variant={variant}
+      />
+    </StoryBook>
+  );
+};
diff --git a/src/FormModal/index.md b/src/FormModal/index.md
@@ -16,6 +16,10 @@ title: FormModal
 
 <code src="./demos/MultiForm.tsx" nopadding></code>
 
+## Scroll To Error
+
+<code src="./demos/Error.tsx" nopadding></code>
+
 ## APIs
 
 | Name              | Description                             | Type        | Default  |

diff --git a/src/FormModal/index.tsx b/src/FormModal/index.tsx
@@ -125,7 +125,6 @@ const FormModal = forwardRef<FormInstance, FormModalProps>(
         styles={{
           ...modalStyles,
           body: {
-            paddingBottom: mobile ? 68 : undefined,
             paddingTop: mobile ? 0 : undefined,
             ...modalStyles?.body,
           },
@@ -162,7 +161,10 @@ const FormModal = forwardRef<FormInstance, FormModalProps>(
           gap={gap || (variant === 'pure' ? 24 : gap)}
           onFinish={onFinish}
           ref={ref}
-          style={formStyle}
+          style={{
+            paddingBottom: 68,
+            ...formStyle,
+          }}
           styles={{
             footer: footerStyle,
           }}

diff --git a/src/FormModal/style.ts b/src/FormModal/style.ts
@@ -2,15 +2,17 @@ import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token, prefixCls, responsive }) => ({
   footer: css`
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline: 0;
+
     width: calc(100% + 32px);
     margin: -16px;
     padding: 16px;
+
     background: ${token.colorBgContainer};
     ${responsive.mobile} {
       position: fixed;
-      inset-block-end: 0;
-      inset-inline: 0;
-
       width: 100%;
       margin: 0;
     }
@@ -24,6 +26,7 @@ export const useStyles = createStyles(({ css, token, prefixCls, responsive }) =>
     ${responsive.mobile} {
       .${prefixCls}-form-group-title {
         font-size: 14px;
+        font-weight: normal;
       }
 
       .${prefixCls}-form-group {