From badd7f9a7d885f51529b712aeabaadedeafefd1f Mon Sep 17 00:00:00 2001 From: janrywang Date: Wed, 4 Aug 2021 16:06:27 +0800 Subject: [PATCH] chore(designable): add save service to playground --- designable/antd/package.json | 8 +-- designable/antd/playground/main.tsx | 26 +++++-- designable/antd/playground/service/index.ts | 1 + designable/antd/playground/service/schema.ts | 27 +++++++ .../antd/playground/widgets/ActionsWidget.tsx | 70 ++++++++++++------- .../src/components/DesignableField/options.ts | 6 +- designable/setters/package.json | 8 +-- docs/guide/form-builder.md | 12 +++- docs/guide/form-builder.zh-CN.md | 12 +++- yarn.lock | 56 +++++++-------- 10 files changed, 152 insertions(+), 74 deletions(-) create mode 100644 designable/antd/playground/service/index.ts create mode 100644 designable/antd/playground/service/schema.ts diff --git a/designable/antd/package.json b/designable/antd/package.json index a2499558c8e..e617ad1096d 100644 --- a/designable/antd/package.json +++ b/designable/antd/package.json @@ -30,7 +30,7 @@ "start": "webpack-dev-server --config playground/webpack.dev.ts" }, "devDependencies": { - "@designable/react-settings-form": "^0.4.24", + "@designable/react-settings-form": "^0.4.25", "autoprefixer": "^9.0", "file-loader": "^5.0.2", "fs-extra": "^8.1.0", @@ -56,9 +56,9 @@ "react-is": ">=16.8.0 || >=17.0.0" }, "dependencies": { - "@designable/core": "^0.4.24", - "@designable/formily": "^0.4.24", - "@designable/react": "^0.4.24", + "@designable/core": "^0.4.25", + "@designable/formily": "^0.4.25", + "@designable/react": "^0.4.25", "@formily/antd": "2.0.0-beta.85", "@formily/core": "2.0.0-beta.85", "@formily/designable-setters": "2.0.0-beta.85", diff --git a/designable/antd/playground/main.tsx b/designable/antd/playground/main.tsx index 1289c73f615..71b4f7c5d69 100644 --- a/designable/antd/playground/main.tsx +++ b/designable/antd/playground/main.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react' +import React from 'react' import ReactDOM from 'react-dom' import { Designer, @@ -18,7 +18,12 @@ import { ComponentTreeWidget, } from '@designable/react' import { SettingsForm } from '@designable/react-settings-form' -import { createDesigner, GlobalRegistry } from '@designable/core' +import { + createDesigner, + GlobalRegistry, + Shortcut, + KeyCode, +} from '@designable/core' import { createDesignableField, createDesignableForm } from '../src' import { LogoWidget, @@ -27,6 +32,7 @@ import { SchemaEditorWidget, MarkupSchemaWidget, } from './widgets' +import { saveSchema } from './service' import 'antd/dist/antd.less' GlobalRegistry.registerDesignerLocales({ 'zh-CN': { @@ -53,9 +59,21 @@ const DesignableField = createDesignableField({ registryName: 'DesignableField', }) -const App = () => { - const engine = useMemo(() => createDesigner(), []) +const SaveShortCut = new Shortcut({ + codes: [ + [KeyCode.Meta, KeyCode.S], + [KeyCode.Control, KeyCode.S], + ], + handler(ctx) { + saveSchema(ctx.engine) + }, +}) +const engine = createDesigner({ + shortcuts: [SaveShortCut], +}) + +const App = () => { return ( } actions={}> diff --git a/designable/antd/playground/service/index.ts b/designable/antd/playground/service/index.ts new file mode 100644 index 00000000000..cb7cdd48bd0 --- /dev/null +++ b/designable/antd/playground/service/index.ts @@ -0,0 +1 @@ +export * from './schema' diff --git a/designable/antd/playground/service/schema.ts b/designable/antd/playground/service/schema.ts new file mode 100644 index 00000000000..1c7b2c63996 --- /dev/null +++ b/designable/antd/playground/service/schema.ts @@ -0,0 +1,27 @@ +import { Engine } from '@designable/core' +import { transformToSchema, transformToTreeNode } from '@designable/formily' +import { message } from 'antd' + +export const saveSchema = (designer: Engine) => { + localStorage.setItem( + 'formily-schema', + JSON.stringify( + transformToSchema(designer.getCurrentTree(), { + designableFieldName: 'DesignableField', + designableFormName: 'Root', + }) + ) + ) + message.success('Save Success') +} + +export const loadInitialSchema = (designer: Engine) => { + try { + designer.setCurrentTree( + transformToTreeNode(JSON.parse(localStorage.getItem('formily-schema')), { + designableFieldName: 'DesignableField', + designableFormName: 'Root', + }) + ) + } catch {} +} diff --git a/designable/antd/playground/widgets/ActionsWidget.tsx b/designable/antd/playground/widgets/ActionsWidget.tsx index 0f517088d30..504ad405f51 100644 --- a/designable/antd/playground/widgets/ActionsWidget.tsx +++ b/designable/antd/playground/widgets/ActionsWidget.tsx @@ -1,32 +1,48 @@ -import React from 'react' +import React, { useEffect } from 'react' import { Space, Button, Radio } from 'antd' import { GithubOutlined } from '@ant-design/icons' -import { TextWidget } from '@designable/react' +import { useDesigner, TextWidget } from '@designable/react' import { GlobalRegistry } from '@designable/core' import { observer } from '@formily/react' +import { loadInitialSchema, saveSchema } from '../service' -export const ActionsWidget = observer(() => ( - - { - GlobalRegistry.setDesignerLanguage(e.target.value) - }} - /> - - - - -)) +export const ActionsWidget = observer(() => { + const designer = useDesigner() + useEffect(() => { + loadInitialSchema(designer) + }, []) + return ( + + { + GlobalRegistry.setDesignerLanguage(e.target.value) + }} + /> + + + + + ) +}) diff --git a/designable/antd/src/components/DesignableField/options.ts b/designable/antd/src/components/DesignableField/options.ts index 6286b40780c..5684667b052 100644 --- a/designable/antd/src/components/DesignableField/options.ts +++ b/designable/antd/src/components/DesignableField/options.ts @@ -1,4 +1,4 @@ -import { IDesignableFieldProps } from './types' +import { IDesignableFieldFactoryProps } from './types' import { FormItem, DatePicker, @@ -71,8 +71,8 @@ const allowDropWithEmpty = (name: string, node: TreeNode, target: TreeNode) => { } export const createOptions = ( - options: IDesignableFieldProps -): IDesignableFieldProps => { + options: IDesignableFieldFactoryProps +): IDesignableFieldFactoryProps => { return { ...options, dropFormItemComponents: [ diff --git a/designable/setters/package.json b/designable/setters/package.json index ec752479eb1..e8a5cd65512 100644 --- a/designable/setters/package.json +++ b/designable/setters/package.json @@ -40,10 +40,10 @@ "react-is": ">=16.8.0 || >=17.0.0" }, "dependencies": { - "@designable/core": "^0.4.24", - "@designable/formily": "^0.4.24", - "@designable/react": "^0.4.24", - "@designable/react-settings-form": "^0.4.24", + "@designable/core": "^0.4.25", + "@designable/formily": "^0.4.25", + "@designable/react": "^0.4.25", + "@designable/react-settings-form": "^0.4.25", "@formily/antd": "2.0.0-beta.85", "@formily/core": "2.0.0-beta.85", "@formily/react": "2.0.0-beta.85", diff --git a/docs/guide/form-builder.md b/docs/guide/form-builder.md index c8faf6695f0..95587c106d0 100644 --- a/docs/guide/form-builder.md +++ b/docs/guide/form-builder.md @@ -102,7 +102,12 @@ const App = () => { useEffect(() => { //The business layer gets the schema to echo the data fetchSchema().then((schema) => { - engine.setCurrentTree(transformToTreeNode(schema)) + engine.setCurrentTree( + transformToTreeNode(schema, { + designableFieldName: 'DesignableField', + designableFormName: 'Root', + }) + ) }) }, []) @@ -114,7 +119,10 @@ const App = () => {