Skip to content

Commit

Permalink
chore(designable): add save service to playground
Browse files Browse the repository at this point in the history
  • Loading branch information
janryWang committed Aug 4, 2021
1 parent fef3600 commit badd7f9
Show file tree
Hide file tree
Showing 10 changed files with 152 additions and 74 deletions.
8 changes: 4 additions & 4 deletions designable/antd/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
26 changes: 22 additions & 4 deletions designable/antd/playground/main.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useMemo } from 'react'
import React from 'react'
import ReactDOM from 'react-dom'
import {
Designer,
Expand All @@ -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,
Expand All @@ -27,6 +32,7 @@ import {
SchemaEditorWidget,
MarkupSchemaWidget,
} from './widgets'
import { saveSchema } from './service'
import 'antd/dist/antd.less'
GlobalRegistry.registerDesignerLocales({
'zh-CN': {
Expand All @@ -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 (
<Designer engine={engine} theme="dark">
<MainPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
Expand Down
1 change: 1 addition & 0 deletions designable/antd/playground/service/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './schema'
27 changes: 27 additions & 0 deletions designable/antd/playground/service/schema.ts
Original file line number Diff line number Diff line change
@@ -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 {}
}
70 changes: 43 additions & 27 deletions designable/antd/playground/widgets/ActionsWidget.tsx
Original file line number Diff line number Diff line change
@@ -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(() => (
<Space style={{ marginRight: 10 }}>
<Radio.Group
value={GlobalRegistry.getDesignerLanguage()}
optionType="button"
options={[
{ label: 'English', value: 'en-us' },
{ label: '简体中文', value: 'zh-cn' },
]}
onChange={(e) => {
GlobalRegistry.setDesignerLanguage(e.target.value)
}}
/>
<Button href="https://github.com/alibaba/formily" target="_blank">
<GithubOutlined />
Github
</Button>
<Button>
<TextWidget>Save</TextWidget>
</Button>
<Button type="primary">
<TextWidget>Publish</TextWidget>
</Button>
</Space>
))
export const ActionsWidget = observer(() => {
const designer = useDesigner()
useEffect(() => {
loadInitialSchema(designer)
}, [])
return (
<Space style={{ marginRight: 10 }}>
<Radio.Group
value={GlobalRegistry.getDesignerLanguage()}
optionType="button"
options={[
{ label: 'English', value: 'en-us' },
{ label: '简体中文', value: 'zh-cn' },
]}
onChange={(e) => {
GlobalRegistry.setDesignerLanguage(e.target.value)
}}
/>
<Button href="https://github.com/alibaba/formily" target="_blank">
<GithubOutlined />
Github
</Button>
<Button
onClick={() => {
saveSchema(designer)
}}
>
<TextWidget>Save</TextWidget>
</Button>
<Button
type="primary"
onClick={() => {
saveSchema(designer)
}}
>
<TextWidget>Publish</TextWidget>
</Button>
</Space>
)
})
6 changes: 3 additions & 3 deletions designable/antd/src/components/DesignableField/options.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { IDesignableFieldProps } from './types'
import { IDesignableFieldFactoryProps } from './types'
import {
FormItem,
DatePicker,
Expand Down Expand Up @@ -71,8 +71,8 @@ const allowDropWithEmpty = (name: string, node: TreeNode, target: TreeNode) => {
}

export const createOptions = (
options: IDesignableFieldProps
): IDesignableFieldProps => {
options: IDesignableFieldFactoryProps
): IDesignableFieldFactoryProps => {
return {
...options,
dropFormItemComponents: [
Expand Down
8 changes: 4 additions & 4 deletions designable/setters/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 10 additions & 2 deletions docs/guide/form-builder.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
})
)
})
}, [])

Expand All @@ -114,7 +119,10 @@ const App = () => {
<Button
onClick={() => {
submitSchema({
schema: transformToSchema(engine.getCurrentTree()),
schema: transformToSchema(engine.getCurrentTree(), {
designableFieldName: 'DesignableField',
designableFormName: 'Root',
}),
})
}}
>
Expand Down
12 changes: 10 additions & 2 deletions docs/guide/form-builder.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,12 @@ const App = () => {
useEffect(() => {
//业务层拿到schema用于回显数据
fetchSchema().then((schema) => {
engine.setCurrentTree(transformToTreeNode(schema))
engine.setCurrentTree(
transformToTreeNode(schema, {
designableFieldName: 'DesignableField',
designableFormName: 'Root',
})
)
})
}, [])

Expand All @@ -114,7 +119,10 @@ const App = () => {
<Button
onClick={() => {
submitSchema({
schema: transformToSchema(engine.getCurrentTree()),
schema: transformToSchema(engine.getCurrentTree(), {
designableFieldName: 'DesignableField',
designableFormName: 'Root',
}),
})
}}
>
Expand Down
56 changes: 28 additions & 28 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1156,12 +1156,12 @@
resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz#c3c5ae543c897caa9c2a68630bed355be5f9990f"
integrity sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==

"@designable/core@0.4.24", "@designable/core@^0.4.24":
version "0.4.24"
resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.24.tgz#46d77f20ecd594d2cd0967adecbd57906999398e"
integrity sha512-LNwJGkzUBTdDgvOiU5ygVmTiqAasHpPi5R7QCjtimSY3TI+5RhMDp8F/Hp76CzpdeYi164cpD+85q3gyakmk0A==
"@designable/core@0.4.25", "@designable/core@^0.4.25":
version "0.4.25"
resolved "https://registry.yarnpkg.com/@designable/core/-/core-0.4.25.tgz#7e42a61141e8c91ac23bdb59440a1bac143c504c"
integrity sha512-rg473ezSsXxrsQGfEyhjcx8UO6flriJSb9Vguv6qM6dMbYEjru3PkMD5IDzfqbRfDn5YBcK/3EinB7z+zRkIEg==
dependencies:
"@designable/shared" "0.4.24"
"@designable/shared" "0.4.25"
"@formily/json-schema" "^2.0.0-beta.76"
"@formily/path" "^2.0.0-beta.76"
"@formily/reactive" "^2.0.0-beta.76"
Expand All @@ -1178,25 +1178,25 @@
"@formily/reactive" "^2.0.0-beta.50"
"@juggle/resize-observer" "^3.3.1"

"@designable/formily@^0.4.24":
version "0.4.24"
resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.24.tgz#cd3454fa6ff35145f556ac8b186f79db925c0ce4"
integrity sha512-GFOmH3yd6FOxSqbYnVyVdpShKeS4ntadfiiogNdF5izgH0FdS0oqn6Sy0d5W8/PRePep7C3lEbwhZ+Jf+djtog==
"@designable/formily@^0.4.25":
version "0.4.25"
resolved "https://registry.yarnpkg.com/@designable/formily/-/formily-0.4.25.tgz#f10b7fcec6a453e43e97c9a5db7254418895c669"
integrity sha512-JSfxHYCAbXy0koC++/f5L64z3F5bwaq4gf7f3OC1mE22/p88Z0jJrDMg85/4QkYjm6nHGUexHL/2UnUyAXbrpA==
dependencies:
"@designable/core" "0.4.24"
"@designable/shared" "0.4.24"
"@designable/core" "0.4.25"
"@designable/shared" "0.4.25"
"@formily/core" "^2.0.0-beta.76"
"@formily/json-schema" "^2.0.0-beta.76"

"@designable/react-settings-form@^0.4.24":
version "0.4.24"
resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.24.tgz#b8b26f5012ccdb434dd1d028e49df554713d961e"
integrity sha512-gOqhuJa4BAAW1LrKduuySQoFSPu8yqFhZVEPkgWO7+So2uG+jXI2YK+JRdh+PiayIyxuCDArrFr0IrLxnt49Sg==
"@designable/react-settings-form@^0.4.25":
version "0.4.25"
resolved "https://registry.yarnpkg.com/@designable/react-settings-form/-/react-settings-form-0.4.25.tgz#dcdff3f4df0e9cdc3f44a0993f6af97434ad6975"
integrity sha512-ecTO0e1D/T1oz6+nSSZkV0FF4AyPktJake/Nhuff9xuCFS6F/ZScSspECpns4trpRjkrBI9l3rjiCpyG8CTgKQ==
dependencies:
"@babel/parser" "^7.14.7"
"@designable/core" "0.4.24"
"@designable/react" "0.4.24"
"@designable/shared" "0.4.24"
"@designable/core" "0.4.25"
"@designable/react" "0.4.25"
"@designable/shared" "0.4.25"
"@formily/antd" "^2.0.0-beta.76"
"@formily/core" "^2.0.0-beta.76"
"@formily/react" "^2.0.0-beta.76"
Expand All @@ -1209,13 +1209,13 @@
react-color "^2.19.3"
react-tiny-popover "^6.0.5"

"@designable/react@0.4.24", "@designable/react@^0.4.24":
version "0.4.24"
resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.24.tgz#c247def613a2afc04b5d1848c05f235fe32ec076"
integrity sha512-OAa75803wt3FEDZaCxIbXrlzE2I/iaf5OHbHeEX2e3at/RCPdMFOr2NcovPYHKSv0g2/mqEWxF7pOobsaOOuJA==
"@designable/react@0.4.25", "@designable/react@^0.4.25":
version "0.4.25"
resolved "https://registry.yarnpkg.com/@designable/react/-/react-0.4.25.tgz#1c0ab95f9fa839743bf03a4f31227d81f9d902da"
integrity sha512-GNEh/jlgoftvhiS2RJGAlhV4+rCuXNiH0jHgapj8a8EPqGV0+ydb+FVVsEUiE7b4l6JSo8TkTrz9zIieZi7LFw==
dependencies:
"@designable/core" "0.4.24"
"@designable/shared" "0.4.24"
"@designable/core" "0.4.25"
"@designable/shared" "0.4.25"
"@formily/reactive" "^2.0.0-beta.76"
"@formily/reactive-react" "^2.0.0-beta.76"
"@juggle/resize-observer" "^3.3.1"
Expand All @@ -1227,10 +1227,10 @@
dependencies:
requestidlecallback "^0.3.0"

"@designable/shared@0.4.24":
version "0.4.24"
resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.24.tgz#4a2323b854143fb2122f0547bf818e945f073968"
integrity sha512-CJ684gqz8OeSpLjqgmbeutdGmdE4r3sD7dRKxV5AHbSj6ZQqYO277DPe9HvGKomSaT/Nt7pPCns9FVwIKClYnw==
"@designable/shared@0.4.25":
version "0.4.25"
resolved "https://registry.yarnpkg.com/@designable/shared/-/shared-0.4.25.tgz#95b0198b3f4881558c7423e759de556e074c79d5"
integrity sha512-sgjc9H0Uv/I/z7rVYRu7R1XYGSRkzWJBLwrBxPfuc+Kq82ej5nXeQsIEvmDMo52SBcvuSYSjHktuLoCSquA+ZA==
dependencies:
requestidlecallback "^0.3.0"

Expand Down

0 comments on commit badd7f9

Please sign in to comment.