feat: 增加 schema-builder getValue、setValue、等方法

alibaba · Nov 12, 2023 · cd84d42 · cd84d42
1 parent 1220905
commit cd84d42
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/docs/schema-builder/index.md b/docs/schema-builder/index.md
@@ -56,13 +56,20 @@ externals: {
 * background: 'rgb(204,204,204, .33)'
 * padding: 20px
 */
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import SchemaBuilder from '@xrenders/schema-builder';
 
 const Demo = () => {
+
+  const domRef = useRef ();
+
+  useEffect(() => {
+
+  }, [])
+
   return (
     <div style={{ height: '80vh' }}>
-      <SchemaBuilder importBtn={true} exportBtn={true} pubBtn={false} />
+      <SchemaBuilder importBtn={true} exportBtn={true} pubBtn={false} ref = {domRef}/>
     </div>
   );
 };

diff --git a/tools/schema-builder/src/createIframe.ts b/tools/schema-builder/src/createIframe.ts
@@ -30,7 +30,7 @@ const createIframeContent = () => {
 
       <body>
         <div id="lce-container"></div>
-        <script type="text/javascript" src="https://g.alicdn.com/fone-lowcode/fr-generator/1.0.10/js/index.js"></script>
+        <script type="text/javascript" src="https://dev.g.alicdn.com/fone-lowcode/fr-generator/1.0.11/js/index.js"></script>
       </body>
     </html>
   `;

diff --git a/tools/schema-builder/src/main.tsx b/tools/schema-builder/src/main.tsx
@@ -1,19 +1,31 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import createIframe from './createIframe';
 interface IProps {
   widgets: any
   settings: any
+  [key: string]: any
 }
 
 let iframe: any;
 
-const Design = (props: IProps) => {
+const Design = (props: IProps, ref: any) => {
   const { widgets, settings, ...restProps } = props;
   const containerRef: any = useRef();
 
+  useImperativeHandle(ref, () => ({
+    getValue: () => {
+      return iframe?.contentWindow?.__FR_ENGINE__?.expotSchema();
+    },
+    setValue: (schema: any) => {
+      return iframe?.contentWindow?.__FR_ENGINE__?.impotSchema(schema);
+    },
+    copyValue: () => {
+      return iframe?.contentWindow?.__FR_ENGINE__?.copySchema();
+    }
+  }))
+
   useEffect(() => {
     initIframe();
-
     window.addEventListener('message', engineOnLoad);
     return () => {
       window.removeEventListener('message', engineOnLoad);
@@ -46,4 +58,4 @@ const Design = (props: IProps) => {
   );
 }
 
-export default Design;
+export default forwardRef(Design);
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,7 +30,7 @@ const createIframeContent = () => { @@
           <body>
             <div id="lce-container"></div>
-            <script type="text/javascript" src="https://g.alicdn.com/fone-lowcode/fr-generator/1.0.10/js/index.js"></script>
+            <script type="text/javascript" src="https://dev.g.alicdn.com/fone-lowcode/fr-generator/1.0.11/js/index.js"></script>
           </body>
         </html>
       `;
@@ Expand Down @@