From ad38b001c5c852c0a691c3b434208b69d68d0f36 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Fri, 18 Feb 2022 20:31:05 +0800
Subject: [PATCH] feat(client): improve actionbar/form/markdown/space...

---
 .../antd/action/ActionBar.tsx                 | 17 +++++--
 .../src/schema-component/antd/form/Form.tsx   |  8 +--
 .../antd/markdown/Markdown.tsx                | 49 ++++++++++++++++---
 .../src/schema-component/antd/space/index.tsx |  2 +-
 4 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/schema-component/antd/action/ActionBar.tsx b/packages/client/src/schema-component/antd/action/ActionBar.tsx
index 22486da42..e78b966e5 100644
--- a/packages/client/src/schema-component/antd/action/ActionBar.tsx
+++ b/packages/client/src/schema-component/antd/action/ActionBar.tsx
@@ -1,13 +1,22 @@
-import { RecursionField, useFieldSchema } from '@formily/react';
+import { observer, RecursionField, useFieldSchema } from '@formily/react';
 import { Space } from 'antd';
 import React from 'react';
 import { useComponent } from '../../hooks';
 
-export const ActionBar = () => {
+export const ActionBar = observer((props: any) => {
+  const { layout = 'tow-columns', style, ...others } = props;
   const fieldSchema = useFieldSchema();
   const ActionInitializer = useComponent(fieldSchema['x-action-initializer']);
+  if (layout === 'one-column') {
+    return (
+      <div style={{ display: 'flex', ...style }} {...others}>
+        {props.children && <div style={{ marginRight: 8 }}>{props.children}</div>}
+        {ActionInitializer && <ActionInitializer />}
+      </div>
+    );
+  }
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
+    <div style={{ display: 'flex', justifyContent: 'space-between', ...style }} {...others}>
       <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
         <Space>
           {fieldSchema.mapProperties((schema, key) => {
@@ -29,4 +38,4 @@ export const ActionBar = () => {
       {ActionInitializer && <ActionInitializer />}
     </div>
   );
-};
+});
diff --git a/packages/client/src/schema-component/antd/form/Form.tsx b/packages/client/src/schema-component/antd/form/Form.tsx
index 49534d3c4..cd4fd2ca1 100644
--- a/packages/client/src/schema-component/antd/form/Form.tsx
+++ b/packages/client/src/schema-component/antd/form/Form.tsx
@@ -74,10 +74,10 @@ const useDef = (opts: any = {}, props: FormProps = {}) => {
 };
 
 export const Form: React.FC<FormProps> = observer((props) => {
-  const { request, initialValue, useValues = useDef, ...others } = props;
+  const { request, effects, initialValue, useValues = useDef, ...others } = props;
   const fieldSchema = useFieldSchema();
-  const form = useMemo(() => createForm(), []);
-  const { loading } = useValues(
+  const form = useMemo(() => createForm({ effects }), []);
+  const result = useValues(
     {
       uid: fieldSchema['x-uid'],
       async onSuccess(data) {
@@ -88,7 +88,7 @@ export const Form: React.FC<FormProps> = observer((props) => {
     props,
   );
   return (
-    <Spin spinning={loading}>
+    <Spin spinning={result?.loading || false}>
       {fieldSchema['x-decorator'] === 'Form' ? (
         <FormDecorator form={form} {...others} />
       ) : (
diff --git a/packages/client/src/schema-component/antd/markdown/Markdown.tsx b/packages/client/src/schema-component/antd/markdown/Markdown.tsx
index 4667397c8..b213f9551 100644
--- a/packages/client/src/schema-component/antd/markdown/Markdown.tsx
+++ b/packages/client/src/schema-component/antd/markdown/Markdown.tsx
@@ -4,6 +4,8 @@ import { Button, Input as AntdInput, Space } from 'antd';
 import { marked } from 'marked';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { DragHandler } from '../../common';
+import { useDesignable } from '../../hooks/useDesignable';
 import { ReadPretty as InputReadPretty } from '../input';
 
 export function markdown(text) {
@@ -28,7 +30,7 @@ export const Markdown: any = connect(
   }),
 );
 
-function MarkdownTextArea(props: any) {
+function MarkdownEditor(props: any) {
   const { t } = useTranslation();
   const [value, setValue] = useState(props.defaultValue);
   return (
@@ -63,15 +65,15 @@ function MarkdownTextArea(props: any) {
 }
 
 Markdown.Void = observer((props: any) => {
+  const { content } = props;
+  const field = useField();
   const schema = useFieldSchema();
-  const field = useField<any>();
-  const text = schema['x-component-props']?.['content'] ?? schema['default'];
-  let value = <div className={'nb-markdown'} dangerouslySetInnerHTML={{ __html: markdown(text) }} />;
+  const { dn } = useDesignable();
   const { onSave, onCancel } = props;
   return field.editable ? (
-    <MarkdownTextArea
+    <MarkdownEditor
       {...props}
-      defaultValue={text}
+      defaultValue={content}
       onCancel={() => {
         field.editable = false;
         onCancel?.();
@@ -80,12 +82,45 @@ Markdown.Void = observer((props: any) => {
         field.editable = false;
         schema['x-component-props'] ?? (schema['x-component-props'] = {});
         schema['x-component-props']['content'] = value;
+        field.componentProps.content = value;
         onSave?.(schema);
+        dn.emit('patch', {
+          schema: {
+            'x-uid': schema['x-uid'],
+            'x-component-props': {
+              content: value,
+            },
+          },
+        });
       }}
     />
   ) : (
-    <InputReadPretty.TextArea {...props} text={text} value={value} />
+    <div className={'nb-markdown'} dangerouslySetInnerHTML={{ __html: markdown(content) }} />
   );
 });
 
+Markdown.Void.Designer = () => {
+  const { remove } = useDesignable();
+  const field = useField();
+  return (
+    <div>
+      <a
+        onClick={() => {
+          remove();
+        }}
+      >
+        删除
+      </a>
+      <a
+        onClick={() => {
+          field.editable = true;
+        }}
+      >
+        Edit
+      </a>
+      <DragHandler />
+    </div>
+  );
+};
+
 export default Markdown;
diff --git a/packages/client/src/schema-component/antd/space/index.tsx b/packages/client/src/schema-component/antd/space/index.tsx
index 5ca1499bd..f8177ead3 100644
--- a/packages/client/src/schema-component/antd/space/index.tsx
+++ b/packages/client/src/schema-component/antd/space/index.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 export const Space: React.FC<SpaceProps> = (props) => {
   let { split } = props;
   if (split === '|') {
-    split = <Divider type="vertical" />;
+    split = <Divider type="vertical" style={{ margin: '0 2px' }}/>;
   }
   const layout = useFormLayout();
   return React.createElement(AntdSpace, {