From 0b11b9fe3053475012e7a37f8507187cdead6338 Mon Sep 17 00:00:00 2001
From: MrWindlike <MrWindlike@gmail.com>
Date: Fri, 29 Jul 2022 10:22:22 +0800
Subject: [PATCH 1/2] feat(RecordWidget): allow use the widget for object

---
 .../src/components/Form/ArrayTable.tsx        |  2 +-
 .../src/components/Form/RecordEditor.tsx      | 44 +++++++++++--------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/editor-sdk/src/components/Form/ArrayTable.tsx b/packages/editor-sdk/src/components/Form/ArrayTable.tsx
index bf1769b8..2e58e420 100644
--- a/packages/editor-sdk/src/components/Form/ArrayTable.tsx
+++ b/packages/editor-sdk/src/components/Form/ArrayTable.tsx
@@ -147,7 +147,7 @@ export const ArrayTable: React.FC<ArrayTableProps> = props => {
               />
             ))
           ) : (
-            <Tr span>
+            <Tr>
               <Td colSpan={(displayedKeys.length || 1) + 2} textAlign="center">
                 No Data
               </Td>
diff --git a/packages/editor-sdk/src/components/Form/RecordEditor.tsx b/packages/editor-sdk/src/components/Form/RecordEditor.tsx
index 6dde22ce..cb0fa793 100644
--- a/packages/editor-sdk/src/components/Form/RecordEditor.tsx
+++ b/packages/editor-sdk/src/components/Form/RecordEditor.tsx
@@ -10,6 +10,8 @@ import { ExpressionEditor } from '../Form/ExpressionEditor';
 import { WidgetProps } from '../../types/widget';
 import { mergeWidgetOptionsIntoSpec } from '../../utils/widget';
 import { ExpressionEditorProps } from './ExpressionEditor';
+import { generateDefaultValueFromSpec } from '@sunmao-ui/shared';
+import { JSONSchema7 } from 'json-schema';
 
 const IGNORE_SPEC_TYPES = ['array', 'object'];
 
@@ -60,16 +62,16 @@ const RowItem = (props: RowItemProps) => {
     }),
     []
   );
-  const valueSpec = useMemo(() => spec?.properties?.[rowKey], [spec, rowKey]);
+  const valueSpec = useMemo(
+    () => (onlySetValue ? spec?.properties?.[rowKey] : spec?.patternProperties?.['^.*$']),
+    [spec, rowKey, onlySetValue]
+  );
   const valueSpecWithExpressionOptions = useMemo(
     () =>
       valueSpec && typeof valueSpec !== 'boolean'
-        ? {
-            ...valueSpec,
-            widgetOptions: {
-              compactOptions: expressionOptions.compactOptions,
-            },
-          }
+        ? mergeWidgetOptionsIntoSpec<'core/v1/expression'>(valueSpec, {
+            compactOptions: expressionOptions.compactOptions,
+          })
         : Type.Any({
             widget: 'core/v1/expression',
             widgetOptions: {
@@ -131,15 +133,16 @@ const RowItem = (props: RowItemProps) => {
         <HStack minWidth={0} flex="2 2 66.66%" alignItems="center">
           {valueSpec === undefined ||
           typeof valueSpec === 'boolean' ||
-          IGNORE_SPEC_TYPES.includes(String(valueSpec.type)) ? (
-            <ExpressionWidget
-              component={component}
-              path={nextPath}
-              spec={valueSpecWithExpressionOptions}
-              services={services}
-              level={level + 1}
-              value={value}
-              onChange={onValueChange}
+          (IGNORE_SPEC_TYPES.includes(String(valueSpec.type)) &&
+            valueSpecWithExpressionOptions?.widget === undefined) ? (
+              <ExpressionWidget
+                component={component}
+                path={nextPath}
+                spec={valueSpecWithExpressionOptions}
+                services={services}
+                level={level + 1}
+                value={value}
+                onChange={onValueChange}
             />
           ) : (
             <SpecWidget
@@ -214,8 +217,13 @@ export const RecordEditor: React.FC<RecordEditorProps> = props => {
   );
 
   const onAddRow = useCallback(() => {
-    setRows(prev => [...prev, ['', '']]);
-  }, []);
+    const propSpec = spec?.patternProperties?.['^.*$'];
+
+    setRows(prev => [
+      ...prev,
+      ['', propSpec ? generateDefaultValueFromSpec(propSpec as JSONSchema7) : ''],
+    ]);
+  }, [spec]);
   const onRemoveRow = useCallback(
     (i: number) => {
       const newRows = produce(rows, draft => {

From 7b47bbe4755a04a2ebee7698d0a81671048b8f8e Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Thu, 4 Aug 2022 14:09:53 +0800
Subject: [PATCH 2/2] fix(mask): observe mask container resize Mask container
 size will change when left panel resizes. So when it happens, the
 maskContainerRect needs to update.

---
 .../EditorMaskWrapper/EditorMaskManager.ts         | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts b/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
index ec9675cb..9cfa497f 100644
--- a/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
+++ b/packages/editor/src/components/EditorMaskWrapper/EditorMaskManager.ts
@@ -20,6 +20,7 @@ export class EditorMaskManager {
   // rect of mask container
   private maskContainerRect: DOMRect | null = null;
   private resizeObserver: ResizeObserver;
+  private containerResizeObserver: ResizeObserver | null = null;
   private visibleMap = new Map<Element, boolean>();
   private intersectionObserver: IntersectionObserver;
   private MaskPadding = 4;
@@ -49,9 +50,7 @@ export class EditorMaskManager {
   }
 
   init() {
-    this.maskContainerRect =
-      this.maskContainerRef.current?.getBoundingClientRect() || null;
-
+    this.observeContainerResize();
     this.observeIntersection();
     this.observeResize();
     this.refreshElementIdMap();
@@ -83,6 +82,7 @@ export class EditorMaskManager {
   destroy() {
     this.intersectionObserver.disconnect();
     this.resizeObserver.disconnect();
+    this.containerResizeObserver?.disconnect();
     this.services.eventBus.off('HTMLElementsUpdated', this.onHTMLElementsUpdated);
 
     // listen scroll events
@@ -116,6 +116,14 @@ export class EditorMaskManager {
     });
   }
 
+  private observeContainerResize() {
+    this.containerResizeObserver = new ResizeObserver(e => {
+      this.maskContainerRect = e[0].contentRect;
+    });
+
+    this.containerResizeObserver.observe(this.maskContainerRef.current!);
+  }
+
   private observeIntersection() {
     this.intersectionObserver.disconnect();
     this.eleMap.forEach(ele => {