Merge pull request #561 from smartxworks/develop

develop -> publish

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 => {

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 => {