From cd84d42eaea2ca0e64d57e61cf876ea048b124ae Mon Sep 17 00:00:00 2001 From: lhbxs <596850703@qq.com> Date: Mon, 13 Nov 2023 02:35:47 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20schema-builder?= =?UTF-8?q?=20getValue=E3=80=81setValue=E3=80=81=E7=AD=89=E6=96=B9?= =?UTF-8?q?=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/schema-builder/index.md | 11 +++++++++-- tools/schema-builder/src/createIframe.ts | 2 +- tools/schema-builder/src/main.tsx | 20 ++++++++++++++++---- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/docs/schema-builder/index.md b/docs/schema-builder/index.md index e3a2fdcc4..492f6b39e 100644 --- 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 (
- +
); }; diff --git a/tools/schema-builder/src/createIframe.ts b/tools/schema-builder/src/createIframe.ts index 8f4b7a37c..8bb6ab74d 100644 --- a/tools/schema-builder/src/createIframe.ts +++ b/tools/schema-builder/src/createIframe.ts @@ -30,7 +30,7 @@ const createIframeContent = () => {
- + `; diff --git a/tools/schema-builder/src/main.tsx b/tools/schema-builder/src/main.tsx index aeedc8f0d..784d462a5 100644 --- 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; \ No newline at end of file +export default forwardRef(Design); \ No newline at end of file From d31db5de8e939d8ee7007de98ce254c37edfaef9 Mon Sep 17 00:00:00 2001 From: lhbxs <596850703@qq.com> Date: Mon, 13 Nov 2023 11:10:23 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20schema-builder=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=20methods=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/schema-builder/api.md | 14 +++++++-- docs/schema-builder/index.md | 39 +++++++++++++++++++++--- tools/schema-builder/src/createIframe.ts | 2 +- tools/schema-builder/src/main.tsx | 8 ++--- 4 files changed, 49 insertions(+), 14 deletions(-) diff --git a/docs/schema-builder/api.md b/docs/schema-builder/api.md index f347789b5..cedbc6629 100644 --- 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 我们将搜索相关的能力放到 `` 上面配置，包括对应的搜索筛选表单的渲染 @@ -34,4 +34,12 @@ mobile: false | -------------------- | ------------------------------------------------------------------------ | ------------------- | --------- | | text | 按钮文案 | `string` | - | | order | 按钮顺序 | `number` | - | -| onClick | 按钮点击回调函数 | `(schema) => void` | - | \ No newline at end of file +| onClick | 按钮点击回调函数 | `(schema) => void` | - | + + +## Methods +通过配置 ref，获取组件实例访问，由于中间隔了一层 iframe，不要在 React useEffect 中调用方法，请使用 `onMount` +| 属性 | 描述 | 类型 | 默认值 | +| -------------------- | ------------------------------------------------------------------------ | ------------------- | --------- | +| getValue | 获取 schema | `schema` | - | +| setValue | 设置 schema | `schema` | - | \ No newline at end of file diff --git a/docs/schema-builder/index.md b/docs/schema-builder/index.md index 492f6b39e..6824c5625 100644 --- a/docs/schema-builder/index.md +++ b/docs/schema-builder/index.md @@ -59,17 +59,46 @@ externals: { import React, { useRef, useEffect } from 'react'; import SchemaBuilder from '@xrenders/schema-builder'; +const schema = { + "type": "object", + "properties": { + "fr-bfuw": { + "title": "单行文本", + "type": "string", + "widget": "input" + }, + "fr-5n84": { + "title": "单行文本", + "type": "string", + "widget": "input" + } + }, + "displayType": "row", + "maxWidth": "340px" +}; + + const Demo = () => { const domRef = useRef (); - useEffect(() => { - - }, []) - + + return (
- + { + const value = domRef.current.getValue(); + + domRef.current.setValue(schema); + + domRef.current.copyValue(schema); + }} + />
); }; diff --git a/tools/schema-builder/src/createIframe.ts b/tools/schema-builder/src/createIframe.ts index 8bb6ab74d..25b61f90d 100644 --- a/tools/schema-builder/src/createIframe.ts +++ b/tools/schema-builder/src/createIframe.ts @@ -30,7 +30,7 @@ const createIframeContent = () => {
- + `; diff --git a/tools/schema-builder/src/main.tsx b/tools/schema-builder/src/main.tsx index 784d462a5..7a755942d 100644 --- a/tools/schema-builder/src/main.tsx +++ b/tools/schema-builder/src/main.tsx @@ -14,13 +14,10 @@ const Design = (props: IProps, ref: any) => { useImperativeHandle(ref, () => ({ getValue: () => { - return iframe?.contentWindow?.__FR_ENGINE__?.expotSchema(); + return iframe?.contentWindow?.__FR_ENGINE__?.exportSchema?.(); }, setValue: (schema: any) => { - return iframe?.contentWindow?.__FR_ENGINE__?.impotSchema(schema); - }, - copyValue: () => { - return iframe?.contentWindow?.__FR_ENGINE__?.copySchema(); + return iframe?.contentWindow?.__FR_ENGINE__?.importSchema?.(schema); } })) @@ -42,6 +39,7 @@ const Design = (props: IProps, ref: any) => { return; } + debugger; iframe?.contentWindow?.__FR_ENGINE__?.init({ settings, widgets, From 671d780330c7b54993836ede136280ff5742ec9b Mon Sep 17 00:00:00 2001 From: lhbxs <596850703@qq.com> Date: Mon, 13 Nov 2023 11:12:33 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20schema-builder=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=20methods=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/schema-builder/index.md | 40 ++---------------------------------- 1 file changed, 2 insertions(+), 38 deletions(-) diff --git a/docs/schema-builder/index.md b/docs/schema-builder/index.md index 6824c5625..e3a2fdcc4 100644 --- a/docs/schema-builder/index.md +++ b/docs/schema-builder/index.md @@ -56,49 +56,13 @@ externals: { * background: 'rgb(204,204,204, .33)' * padding: 20px */ -import React, { useRef, useEffect } from 'react'; +import React from 'react'; import SchemaBuilder from '@xrenders/schema-builder'; -const schema = { - "type": "object", - "properties": { - "fr-bfuw": { - "title": "单行文本", - "type": "string", - "widget": "input" - }, - "fr-5n84": { - "title": "单行文本", - "type": "string", - "widget": "input" - } - }, - "displayType": "row", - "maxWidth": "340px" -}; - - const Demo = () => { - - const domRef = useRef (); - - - return (
- { - const value = domRef.current.getValue(); - - domRef.current.setValue(schema); - - domRef.current.copyValue(schema); - }} - /> +
); }; From f5530a6428617fccb761d13ba2c8b3785401ba7c Mon Sep 17 00:00:00 2001 From: lhbxs <596850703@qq.com> Date: Mon, 13 Nov 2023 11:28:52 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20schema-builder=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=20methods=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tools/schema-builder/src/main.tsx | 8 ++----- tools/schema-builder/src/type.ts | 35 +++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 tools/schema-builder/src/type.ts diff --git a/tools/schema-builder/src/main.tsx b/tools/schema-builder/src/main.tsx index 7a755942d..e80a778c2 100644 --- a/tools/schema-builder/src/main.tsx +++ b/tools/schema-builder/src/main.tsx @@ -1,14 +1,10 @@ import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react'; import createIframe from './createIframe'; -interface IProps { - widgets: any - settings: any - [key: string]: any -} +import { TSchemaBuilder } from './type'; let iframe: any; -const Design = (props: IProps, ref: any) => { +const Design = (props: TSchemaBuilder, ref: any) => { const { widgets, settings, ...restProps } = props; const containerRef: any = useRef(); diff --git a/tools/schema-builder/src/type.ts b/tools/schema-builder/src/type.ts new file mode 100644 index 000000000..6925c8bf9 --- /dev/null +++ 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 +} \ No newline at end of file From a9b641cf7154e62f5a6cfbf431975a9f3d3f6bfc Mon Sep 17 00:00:00 2001 From: lhbxs <596850703@qq.com> Date: Mon, 13 Nov 2023 11:29:55 +0800 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20schema-builder=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=20methods=20=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tools/schema-builder/src/main.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tools/schema-builder/src/main.tsx b/tools/schema-builder/src/main.tsx index e80a778c2..eb694b13d 100644 --- a/tools/schema-builder/src/main.tsx +++ b/tools/schema-builder/src/main.tsx @@ -34,8 +34,7 @@ const Design = (props: TSchemaBuilder, ref: any) => { if (event.data.type !== 'engine-load') { return; } - - debugger; + iframe?.contentWindow?.__FR_ENGINE__?.init({ settings, widgets, From f392dbb6a37c3926cb54600c25052419945ec5d7 Mon Sep 17 00:00:00 2001 From: lhbxs <596850703@qq.com> Date: Mon, 13 Nov 2023 11:37:43 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20schema-builder=20=E5=8F=91=E5=B8=83?= =?UTF-8?q?=E6=96=B0=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tools/schema-builder/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/schema-builder/package.json b/tools/schema-builder/package.json index c3f31fc11..4d85ba569 100644 --- 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",