Merge pull request #1441 from alibaba/feat-schema-builder-methods

Feat schema builder methods
alibaba · Nov 13, 2023 · 96bd324 · 96bd324 · vercel · Nov 13, 2023
2 parents 0598fe4 + f392dbb
commit 96bd324
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 14 deletions.
diff --git a/docs/schema-builder/api.md b/docs/schema-builder/api.md
@@ -8,6 +8,8 @@ mobile: false
 
 | 属性                  | 描述                                                  | 类型                      | 默认值     |
 | ---------------------| ----------------------------------------------------- | -------------------      | --------- |
+| defaultValue         | 默认 schema                                            |    `schema`              |     -     |
+| onMount              | 首次加载完成                                            |    `Function`            |     -     |
 | logo                 | logo 模块设置                                          | [Logo](#Logo)| -         | -         |
 | importBtn            | 导入按钮，用于 schema 导入                               | `boolean`                |   false   |
 | exportBtn            | 导出按钮，用于 schema 导出                               | `boolean`                |   false   |
@@ -16,8 +18,6 @@ mobile: false
 | pubBtn               | 发布按钮，用于发布 schema                                | `false` ｜ [Btn](#Btn)   |     -     |
 | extraBtns            | 自定义更多按钮                                          | [Btn](#Btn) []           |     -     |
 
-
-
 ## Logo
 
 我们将搜索相关的能力放到 `<Search />` 上面配置，包括对应的搜索筛选表单的渲染
@@ -34,4 +34,12 @@ mobile: false
 | -------------------- | ------------------------------------------------------------------------  | ------------------- | --------- |
 | text                 |   按钮文案                                                                  | `string`           |   -       |
 | order                |   按钮顺序                                                                  | `number`           |   -       |
-| onClick              |   按钮点击回调函数                                                           | `(schema) => void`  |   -       |
+| onClick              |   按钮点击回调函数                                                           | `(schema) => void`  |   -       |
+
+
+## Methods
+通过配置 ref，获取组件实例访问，由于中间隔了一层 iframe，不要在 React useEffect 中调用方法，请使用 `onMount`
+| 属性                  | 描述                                                                      | 类型                 | 默认值     |
+| -------------------- | ------------------------------------------------------------------------  | ------------------- | --------- |
+| getValue                 |   获取 schema                                                               | `schema`           |   -       |
+| setValue                |    设置 schema                                                                  | `schema`           |   -       |
diff --git a/tools/schema-builder/package.json b/tools/schema-builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xrenders/schema-builder",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "keywords": [
     "Form",

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://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,24 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import createIframe from './createIframe';
-interface IProps {
-  widgets: any
-  settings: any
-}
+import { TSchemaBuilder } from './type';
 
 let iframe: any;
 
-const Design = (props: IProps) => {
+const Design = (props: TSchemaBuilder, ref: any) => {
   const { widgets, settings, ...restProps } = props;
   const containerRef: any = useRef();
 
+  useImperativeHandle(ref, () => ({
+    getValue: () => {
+      return iframe?.contentWindow?.__FR_ENGINE__?.exportSchema?.();
+    },
+    setValue: (schema: any) => {
+      return iframe?.contentWindow?.__FR_ENGINE__?.importSchema?.(schema);
+    }
+  }))
+
   useEffect(() => {
     initIframe();
-
     window.addEventListener('message', engineOnLoad);
     return () => {
       window.removeEventListener('message', engineOnLoad);
@@ -29,7 +34,7 @@ const Design = (props: IProps) => {
     if (event.data.type !== 'engine-load') {
       return;
     }
-
+    
     iframe?.contentWindow?.__FR_ENGINE__?.init({
       settings,
       widgets,
@@ -46,4 +51,4 @@ const Design = (props: IProps) => {
   );
 }
 
-export default Design;
+export default forwardRef(Design);
diff --git a/tools/schema-builder/src/type.ts b/tools/schema-builder/src/type.ts
@@ -0,0 +1,35 @@
+interface TProperties {
+  [key: string]: any;
+}
+
+interface TLogo {
+  title?: string;
+  image?: string;
+  href?: string;
+}
+
+interface TSchema {
+  "type": "object",
+  "properties": TProperties
+}
+
+interface TToolBtn {
+  text: string;
+  order: number;
+  onClick: (schema: TSchema) => void;
+}
+
+export interface TSchemaBuilder {
+  logo?: TLogo;
+  importBtn?: boolean;
+  exportBtn?: boolean;
+  clearBtn?: boolean | TToolBtn;
+  saveBtn?: boolean | TToolBtn;
+  pubBtn?: boolean | TToolBtn;
+  extraBtns?: TToolBtn[];
+  defaultValue?: TSchema;
+  widgets?: any;
+  settings?: any;
+  onMount?: () => void;
+  [key: string]: any
+}
-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://g.alicdn.com/fone-lowcode/fr-generator/1.0.11/js/index.js"></script>
           </body>
         </html>
       `;
@@ Expand Down @@