From 0c83c16391397f9b578b0b79723594f29e139029 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 9 Feb 2022 23:37:12 +0800
Subject: [PATCH] feat(client): add settings form

---
 packages/client/src/index.tsx                 |   1 +
 .../client/src/settings-form/SettingsForm.tsx | 269 ++++++++++++++++++
 .../client/src/settings-form/demos/demo1.tsx  | 133 +++++++++
 packages/client/src/settings-form/index.md    |   4 +-
 packages/client/src/settings-form/index.ts    |   1 +
 5 files changed, 407 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/settings-form/SettingsForm.tsx
 create mode 100644 packages/client/src/settings-form/demos/demo1.tsx
 create mode 100644 packages/client/src/settings-form/index.ts

diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 8a9fa425ab..15d18496c9 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -16,6 +16,7 @@ export * from './record-provider';
 export * from './route-switch';
 export * from './schema-component';
 export * from './schema-initializer';
+export * from './settings-form';
 export * from './system-settings';
 export * from './user';
 
diff --git a/packages/client/src/settings-form/SettingsForm.tsx b/packages/client/src/settings-form/SettingsForm.tsx
new file mode 100644
index 0000000000..65bc3bf4c0
--- /dev/null
+++ b/packages/client/src/settings-form/SettingsForm.tsx
@@ -0,0 +1,269 @@
+import { FormButtonGroup, FormDialog, FormDrawer, FormItem, FormLayout, Reset, Submit } from '@formily/antd';
+import { createForm, Field, ObjectField, onFormValuesChange } from '@formily/core';
+import {
+  FieldContext,
+  FormContext,
+  observer,
+  RecursionField,
+  Schema,
+  SchemaOptionsContext,
+  useField,
+  useFieldSchema,
+  useForm
+} from '@formily/react';
+import { Dropdown, Menu, Modal, Select, Switch } from 'antd';
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { SchemaComponentOptions, useAttach, useDesignable } from '..';
+
+export interface SettingsFormContextProps {
+  field?: Field;
+  fieldSchema?: Schema;
+  dropdownVisible?: boolean;
+  setDropdownVisible?: (v: boolean) => void;
+  dn?: any;
+}
+
+export const SettingsFormContext = createContext<SettingsFormContextProps>(null);
+
+export const useSettingsFormContext = () => {
+  return useContext(SettingsFormContext);
+};
+
+export const SettingsForm: any = observer((props: any) => {
+  const dn = useDesignable();
+  const field = useField<Field>();
+  const fieldSchema = useFieldSchema();
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const settingsFormSchema = useMemo(() => new Schema(props.schema), []);
+  const form = useMemo(
+    () =>
+      createForm({
+        initialValues: fieldSchema.toJSON(),
+        effects(form) {
+          onFormValuesChange((form) => {
+            dn.patch(form.values);
+            console.log('form.values', form.values);
+          });
+        },
+      }),
+    [],
+  );
+  const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
+  return (
+    <SettingsFormContext.Provider value={{ dn, field, fieldSchema, dropdownVisible, setDropdownVisible }}>
+      <SchemaComponentOptions components={{ SettingsForm }}>
+        <FieldContext.Provider value={null}>
+          <FormContext.Provider value={form}>
+            <FieldContext.Provider value={f}>
+              <Dropdown
+                visible={dropdownVisible}
+                onVisibleChange={(visible) => setDropdownVisible(visible)}
+                overlayStyle={{ width: 200 }}
+                overlay={
+                  <Menu>
+                    {settingsFormSchema.mapProperties((s, key) => {
+                      return <RecursionField name={key} schema={s} />;
+                    })}
+                  </Menu>
+                }
+              >
+                <a>配置</a>
+              </Dropdown>
+            </FieldContext.Provider>
+          </FormContext.Provider>
+        </FieldContext.Provider>
+      </SchemaComponentOptions>
+    </SettingsFormContext.Provider>
+  );
+});
+
+SettingsForm.Divider = () => {
+  return <Menu.Divider />;
+};
+
+SettingsForm.Remove = (props) => {
+  const field = useField();
+  const { dn, setDropdownVisible } = useSettingsFormContext();
+  return (
+    <Menu.Item
+      onClick={() => {
+        setDropdownVisible(false);
+        Modal.confirm({
+          title: 'Are you sure delete this task?',
+          content: 'Some descriptions',
+          okText: 'Yes',
+          okType: 'danger',
+          cancelText: 'No',
+          ...props.confirm,
+          onOk() {
+            dn.remove();
+            console.log('OK');
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
+      }}
+    >
+      {field.title}
+    </Menu.Item>
+  );
+};
+
+SettingsForm.Switch = observer(() => {
+  const field = useField<Field>();
+  return (
+    <Menu.Item
+      onClick={() => {
+        field.value = !field.value;
+      }}
+    >
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        {field.title} <Switch checked={!!field.value} />
+      </div>
+    </Menu.Item>
+  );
+});
+
+SettingsForm.Select = observer((props) => {
+  const field = useField<Field>();
+  const [open, setOpen] = useState(false);
+  return (
+    <Menu.Item onClick={() => !open && setOpen(true)}>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        {field.title}
+        <Select
+          open={open}
+          onDropdownVisibleChange={(open) => setOpen(open)}
+          onSelect={() => {
+            setOpen(false);
+          }}
+          onChange={(value) => {
+            field.value = value;
+          }}
+          value={field.value}
+          options={field.dataSource}
+          style={{ width: '60%' }}
+          size={'small'}
+          bordered={false}
+        />
+      </div>
+    </Menu.Item>
+  );
+});
+
+SettingsForm.Modal = () => {
+  const form = useForm();
+  const field = useField<Field>();
+  const fieldSchema = useFieldSchema();
+  const options = useContext(SchemaOptionsContext);
+  const { setDropdownVisible } = useSettingsFormContext();
+  return (
+    <Menu.Item
+      style={{ width: 200 }}
+      onClick={async () => {
+        setDropdownVisible(false);
+        const values = await FormDialog('Title', () => {
+          return (
+            <SchemaComponentOptions scope={options.scope} components={{ ...options.components, FormItem }}>
+              <FormLayout layout={'vertical'}>
+                <RecursionField schema={fieldSchema} onlyRenderProperties />
+              </FormLayout>
+            </SchemaComponentOptions>
+          );
+        }).open({
+          initialValues: fieldSchema.type !== 'void' ? field.value : form.values,
+        });
+        if (fieldSchema.type !== 'void') {
+          form.setValues(
+            {
+              [fieldSchema.name]: values,
+            },
+            'deepMerge',
+          );
+        } else {
+          form.setValues(values);
+        }
+      }}
+    >
+      {field.title}
+    </Menu.Item>
+  );
+};
+
+SettingsForm.Drawer = () => {
+  const form = useForm();
+  const field = useField<ObjectField>();
+  const fieldSchema = useFieldSchema();
+  const options = useContext(SchemaOptionsContext);
+  const { setDropdownVisible } = useSettingsFormContext();
+  return (
+    <Menu.Item
+      style={{ width: 200 }}
+      onClick={async () => {
+        setDropdownVisible(false);
+        const values = await FormDrawer('Pop-up form', () => {
+          return (
+            <SchemaComponentOptions scope={options.scope} components={{ ...options.components, FormItem }}>
+              <FormLayout layout={'vertical'}>
+                <RecursionField schema={fieldSchema} onlyRenderProperties />
+                <FormDrawer.Footer>
+                  <FormButtonGroup align="right">
+                    <Reset>Reset</Reset>
+                    <Submit
+                      onSubmit={() => {
+                        return new Promise((resolve) => {
+                          setTimeout(resolve, 1000);
+                        });
+                      }}
+                    >
+                      Submit
+                    </Submit>
+                  </FormButtonGroup>
+                </FormDrawer.Footer>
+              </FormLayout>
+            </SchemaComponentOptions>
+          );
+        }).open({
+          initialValues: fieldSchema.type !== 'void' ? field.value : form.values,
+        });
+        if (fieldSchema.type !== 'void') {
+          form.setValues(
+            {
+              [fieldSchema.name]: values,
+            },
+            'deepMerge',
+          );
+        } else {
+          form.setValues(values);
+        }
+      }}
+    >
+      {field.title}
+    </Menu.Item>
+  );
+};
+
+SettingsForm.SubMenu = () => {
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  return (
+    <Menu.SubMenu title={field.title}>
+      {fieldSchema.mapProperties((schema, key) => {
+        return <RecursionField name={key} schema={schema} />;
+      })}
+    </Menu.SubMenu>
+  );
+};
+
+SettingsForm.ItemGroup = () => {
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  return (
+    <Menu.ItemGroup title={field.title}>
+      {fieldSchema.mapProperties((schema, key) => {
+        return <RecursionField name={key} schema={schema} />;
+      })}
+    </Menu.ItemGroup>
+  );
+};
diff --git a/packages/client/src/settings-form/demos/demo1.tsx b/packages/client/src/settings-form/demos/demo1.tsx
new file mode 100644
index 0000000000..63c74224ce
--- /dev/null
+++ b/packages/client/src/settings-form/demos/demo1.tsx
@@ -0,0 +1,133 @@
+import { ISchema, observer, useFieldSchema } from '@formily/react';
+import { AntdSchemaComponentProvider, SchemaComponent, SchemaComponentProvider, SettingsForm } from '@nocobase/client';
+import React from 'react';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    'x-component-props.switch': {
+      title: 'Switch',
+      'x-component': 'SettingsForm.Switch',
+    },
+    'x-component-props.select': {
+      title: 'Select',
+      'x-component': 'SettingsForm.Select',
+      enum: [
+        { label: 'Option1', value: 'option1' },
+        { label: 'Option2', value: 'option2' },
+        { label: 'Option3', value: 'option3' },
+      ],
+    },
+    modal: {
+      type: 'void',
+      title: 'Open Modal',
+      'x-component': 'SettingsForm.Modal',
+      'x-component-props': {},
+      properties: {
+        'x-component-props.title': {
+          title: '标题',
+          'x-component': 'Input',
+          'x-decorator': 'FormItem',
+        },
+      },
+    },
+    drawer: {
+      type: 'void',
+      title: 'Open Drawer',
+      'x-component': 'SettingsForm.Drawer',
+      properties: {
+        'x-component-props.title': {
+          title: '标题',
+          'x-component': 'Input',
+          'x-decorator': 'FormItem',
+        },
+      },
+    },
+    group: {
+      type: 'void',
+      title: 'ItemGroup',
+      'x-component': 'SettingsForm.ItemGroup',
+      properties: {
+        'x-component-props': {
+          type: 'object',
+          title: 'Open Modal',
+          'x-component': 'SettingsForm.Modal',
+          properties: {
+            title: {
+              title: '标题',
+              'x-component': 'Input',
+              'x-decorator': 'FormItem',
+            },
+          },
+        },
+      },
+    },
+    submenu: {
+      type: 'void',
+      title: 'SubMenu',
+      'x-component': 'SettingsForm.SubMenu',
+      properties: {
+        'x-component-props': {
+          type: 'object',
+          title: 'Open Modal',
+          'x-component': 'SettingsForm.Modal',
+          properties: {
+            title: {
+              title: '标题',
+              'x-component': 'Input',
+              'x-decorator': 'FormItem',
+            },
+          },
+        },
+      },
+    },
+    divider: {
+      'x-component': 'SettingsForm.Divider',
+    },
+    remove: {
+      title: 'Delete',
+      'x-component': 'SettingsForm.Remove',
+      'x-component-props': {
+        confirm: {
+          title: 'Are you sure delete this task?',
+          content: 'Some descriptions',
+        },
+      },
+    },
+  },
+};
+
+const Hello = observer((props: any) => {
+  const fieldSchema = useFieldSchema();
+  return (
+    <div>
+      <pre>{JSON.stringify(props, null, 2)}</pre>
+      <pre>{JSON.stringify(fieldSchema.toJSON(), null, 2)}</pre>
+      <SettingsForm schema={schema} />
+    </div>
+  );
+});
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Hello }}>
+      <AntdSchemaComponentProvider>
+        <SchemaComponent
+          schema={{
+            type: 'object',
+            properties: {
+              hello: {
+                'x-component': 'Hello',
+                'x-component-props': {
+                  title: 'abc',
+                  switch: true,
+                  select: 'option1',
+                },
+              },
+            },
+          }}
+        />
+      </AntdSchemaComponentProvider>
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/settings-form/index.md b/packages/client/src/settings-form/index.md
index 0ce034ec94..7238f7aa3c 100644
--- a/packages/client/src/settings-form/index.md
+++ b/packages/client/src/settings-form/index.md
@@ -5,4 +5,6 @@ group:
   path: /client
 ---
 
-# SettingsForm <Badge>待定</Badge>
+# SettingsForm
+
+<code src="./demos/demo1.tsx" />
diff --git a/packages/client/src/settings-form/index.ts b/packages/client/src/settings-form/index.ts
new file mode 100644
index 0000000000..da40957caa
--- /dev/null
+++ b/packages/client/src/settings-form/index.ts
@@ -0,0 +1 @@
+export * from './SettingsForm';