mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-14 21:12:53 +00:00
chore: 🤖 update demo
This commit is contained in:
parent
cd7c7257d7
commit
2f21a0d4d5
@ -1,12 +0,0 @@
|
|||||||
# http://editorconfig.org
|
|
||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
charset = utf-8
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
insert_final_newline = true
|
|
||||||
|
|
||||||
[*.md]
|
|
||||||
trim_trailing_whitespace = false
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
# 忽略目录
|
|
||||||
build/
|
|
||||||
tests/
|
|
||||||
demo/
|
|
||||||
|
|
||||||
# node 覆盖率文件
|
|
||||||
coverage/
|
|
||||||
|
|
||||||
# 忽略文件
|
|
||||||
**/*-min.js
|
|
||||||
**/*.min.js
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
const { tslint, deepmerge } = require('@ice/spec');
|
|
||||||
|
|
||||||
module.exports = deepmerge(tslint, {
|
|
||||||
rules: {
|
|
||||||
"global-require": 0,
|
|
||||||
"comma-dangle": 0,
|
|
||||||
"no-unused-expressions": 0,
|
|
||||||
"object-shorthand": 0,
|
|
||||||
"jsx-a11y/anchor-has-content": 0,
|
|
||||||
"react/sort-comp": 0,
|
|
||||||
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", "ts"] }],
|
|
||||||
"@typescript-eslint/interface-name-prefix": 0,
|
|
||||||
"@typescript-eslint/no-explicit-any": 0,
|
|
||||||
"@typescript-eslint/explicit-member-accessibility": 0
|
|
||||||
},
|
|
||||||
});
|
|
||||||
20
packages/demo/.gitignore
vendored
20
packages/demo/.gitignore
vendored
@ -1,20 +0,0 @@
|
|||||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
/dist
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.idea/
|
|
||||||
.happypack
|
|
||||||
.DS_Store
|
|
||||||
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# ignore d.ts auto generated by css-modules-typescript-loader
|
|
||||||
*.module.scss.d.ts
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"printWidth": 120,
|
|
||||||
"singleQuote": true
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
# 忽略目录
|
|
||||||
build/
|
|
||||||
tests/
|
|
||||||
demo/
|
|
||||||
|
|
||||||
# node 覆盖率文件
|
|
||||||
coverage/
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
const { stylelint } = require('@ice/spec');
|
|
||||||
|
|
||||||
module.exports = stylelint;
|
|
||||||
@ -3,13 +3,10 @@ const path = require('path');
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
'index': 'src/index.tsx',
|
'index': 'src/index.tsx',
|
||||||
'simulator-renderer': '../designer/src/builtins/simulator/renderer/index.ts'
|
'simulator-renderer': '../react-simulator-renderer/src/index.ts'
|
||||||
},
|
},
|
||||||
"vendor": false,
|
"vendor": false,
|
||||||
publicPath: './',
|
publicPath: './',
|
||||||
alias: {
|
|
||||||
'@': path.resolve(__dirname, './src'),
|
|
||||||
},
|
|
||||||
plugins: [
|
plugins: [
|
||||||
['ice-plugin-fusion', {
|
['ice-plugin-fusion', {
|
||||||
themePackage: '@alife/theme-lowcode-light',
|
themePackage: '@alife/theme-lowcode-light',
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"baseUrl": ".",
|
|
||||||
"jsx": "react",
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./src/*"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -27,31 +27,19 @@
|
|||||||
"store": "^2.0.12"
|
"store": "^2.0.12"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@ice/spec": "^1.0.1",
|
|
||||||
"@types/debug": "^4.1.5",
|
"@types/debug": "^4.1.5",
|
||||||
"@types/events": "^3.0.0",
|
"@types/events": "^3.0.0",
|
||||||
"@types/react": "^16.8.3",
|
"@types/react": "^16.8.3",
|
||||||
"@types/react-dom": "^16.8.2",
|
"@types/react-dom": "^16.8.2",
|
||||||
"@types/store": "^2.0.2",
|
"@types/store": "^2.0.2",
|
||||||
"css-modules-typescript-loader": "^2.0.4",
|
"css-modules-typescript-loader": "^2.0.4",
|
||||||
"eslint": "^6.0.1",
|
|
||||||
"husky": "^4.2.3",
|
|
||||||
"ice-plugin-fusion": "^0.1.4",
|
"ice-plugin-fusion": "^0.1.4",
|
||||||
"ice-plugin-moment-locales": "^0.1.0",
|
"ice-plugin-moment-locales": "^0.1.0",
|
||||||
"ice-scripts": "^2.0.0",
|
"ice-scripts": "^2.0.0"
|
||||||
"prettier": "^1.19.1",
|
|
||||||
"stylelint": "^10.1.0"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "ice-scripts dev",
|
"start": "ice-scripts dev",
|
||||||
"build": "ice-scripts build",
|
"build": "ice-scripts build"
|
||||||
"lint": "npm run eslint && npm run stylelint",
|
|
||||||
"eslint": "eslint --cache --ext .js,.jsx ./",
|
|
||||||
"stylelint": "stylelint ./**/*.scss",
|
|
||||||
"prettier": "prettier --write \"./src/**/*.{ts,tsx,js,jsx,ejs,less,css,scss,json}\" "
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=8.0.0"
|
|
||||||
},
|
},
|
||||||
"iceworks": {
|
"iceworks": {
|
||||||
"type": "react",
|
"type": "react",
|
||||||
@ -59,9 +47,5 @@
|
|||||||
},
|
},
|
||||||
"ideMode": {
|
"ideMode": {
|
||||||
"name": "ice-react"
|
"name": "ice-react"
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/ice-lab/react-materials/tree/master/scaffolds/ice-ts"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,6 +16,6 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="dark">
|
<body class="dark">
|
||||||
<div id="ice-container"></div>
|
<div id="lce-container"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,19 +1,18 @@
|
|||||||
import componentsPane from '@ali/lowcode-plugin-components-pane';
|
|
||||||
import Settings from '../../../plugin-settings';
|
|
||||||
import undoRedo from '@ali/lowcode-plugin-undo-redo';
|
import undoRedo from '@ali/lowcode-plugin-undo-redo';
|
||||||
import Designer from '../plugins/designer';
|
|
||||||
import logo from '@ali/lowcode-plugin-logo';
|
import logo from '@ali/lowcode-plugin-logo';
|
||||||
import save from '@ali/lowcode-plugin-save';
|
import save from '@ali/lowcode-plugin-save';
|
||||||
import OutlineTree from '../../../plugin-outline-tree';
|
import Designer from '@ali/lowcode-plugin-designer';
|
||||||
|
import SettingsPane from '@ali/lowcode-plugin-settings-pane';
|
||||||
|
import componentsPane from '@ali/lowcode-plugin-components-pane';
|
||||||
|
import OutlinePane from '@ali/lowcode-plugin-outline-pane';
|
||||||
import { PluginFactory } from '@ali/lowcode-editor-core';
|
import { PluginFactory } from '@ali/lowcode-editor-core';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
logo: PluginFactory(logo),
|
logo: PluginFactory(logo),
|
||||||
save: PluginFactory(save),
|
save: PluginFactory(save),
|
||||||
designer: PluginFactory(Designer),
|
|
||||||
settings: PluginFactory(Settings),
|
|
||||||
outlineTree: PluginFactory(OutlineTree),
|
|
||||||
undoRedo: PluginFactory(undoRedo),
|
undoRedo: PluginFactory(undoRedo),
|
||||||
componentsPane: PluginFactory(componentsPane)
|
designer: PluginFactory(Designer),
|
||||||
|
componentsPane: PluginFactory(componentsPane),
|
||||||
|
settingsPane: PluginFactory(SettingsPane),
|
||||||
|
OutlinePane: PluginFactory(OutlinePane),
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
export default {};
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import en_us from './en-US';
|
|
||||||
import zh_cn from './zh-CN';
|
|
||||||
import zh_tw from './zh-TW';
|
|
||||||
import ja_jp from './ja-JP';
|
|
||||||
export default {
|
|
||||||
'en-US': en_us,
|
|
||||||
'zh-CN': zh_cn,
|
|
||||||
'zh-TW': zh_tw,
|
|
||||||
'ja-JP': ja_jp
|
|
||||||
};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export default {};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export default {};
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export default {};
|
|
||||||
@ -79,7 +79,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
pluginKey: 'outlineTree',
|
pluginKey: 'outlinePane',
|
||||||
type: 'PanelIcon',
|
type: 'PanelIcon',
|
||||||
props: {
|
props: {
|
||||||
align: 'top',
|
align: 'top',
|
||||||
@ -87,6 +87,7 @@ export default {
|
|||||||
title: '大纲树'
|
title: '大纲树'
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
|
package: '@ali/lowcode-plugin-outline-pane',
|
||||||
version: '^1.0.0'
|
version: '^1.0.0'
|
||||||
},
|
},
|
||||||
pluginProps: {}
|
pluginProps: {}
|
||||||
@ -94,7 +95,7 @@ export default {
|
|||||||
],
|
],
|
||||||
rightArea: [
|
rightArea: [
|
||||||
{
|
{
|
||||||
pluginKey: 'settings',
|
pluginKey: 'settingsPane',
|
||||||
type: 'Panel',
|
type: 'Panel',
|
||||||
props: {},
|
props: {},
|
||||||
config: {
|
config: {
|
||||||
|
|||||||
@ -4,16 +4,16 @@ import Skeleton from '@ali/lowcode-editor-skeleton';
|
|||||||
import config from './config/skeleton';
|
import config from './config/skeleton';
|
||||||
import components from './config/components';
|
import components from './config/components';
|
||||||
import utils from './config/utils';
|
import utils from './config/utils';
|
||||||
|
import '@ali/lowcode-setters';
|
||||||
import './config/locale';
|
import './config/locale';
|
||||||
import '../../plugin-setters';
|
|
||||||
|
|
||||||
import './global.scss';
|
import './global.scss';
|
||||||
import './config/theme.scss';
|
import './config/theme.scss';
|
||||||
|
|
||||||
const ICE_CONTAINER = document.getElementById('ice-container');
|
const LCE_CONTAINER = document.getElementById('lce-container');
|
||||||
|
|
||||||
if (!ICE_CONTAINER) {
|
if (!LCE_CONTAINER) {
|
||||||
throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
|
throw new Error('当前页面不存在 <div id="lce-container"></div> 节点.');
|
||||||
}
|
}
|
||||||
|
|
||||||
ReactDOM.render(<Skeleton config={config} utils={utils} components={components} />, ICE_CONTAINER);
|
ReactDOM.render(<Skeleton config={config} utils={utils} components={components} />, LCE_CONTAINER);
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
.lowcode-plugin-designer {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
@ -1,213 +0,0 @@
|
|||||||
import React, { PureComponent } from 'react';
|
|
||||||
|
|
||||||
import Editor from '@ali/lowcode-editor-core';
|
|
||||||
import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
|
|
||||||
import assets from '../../config/assets';
|
|
||||||
// @ts-ignore
|
|
||||||
import Designer from '../../../../designer';
|
|
||||||
|
|
||||||
import './index.scss';
|
|
||||||
|
|
||||||
export interface PluginProps {
|
|
||||||
editor: Editor;
|
|
||||||
config: PluginConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SCHEMA = {
|
|
||||||
version: '1.0',
|
|
||||||
componentsMap: [],
|
|
||||||
componentsTree: [
|
|
||||||
{
|
|
||||||
componentName: 'Page',
|
|
||||||
fileName: 'test',
|
|
||||||
dataSource: {
|
|
||||||
list: []
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
text: 'outter'
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
ref: 'outterView',
|
|
||||||
autoLoading: true,
|
|
||||||
style: {
|
|
||||||
padding: 20
|
|
||||||
}
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
componentName: 'Form',
|
|
||||||
props: {
|
|
||||||
labelCol: 3,
|
|
||||||
style: {},
|
|
||||||
ref: 'testForm'
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
componentName: 'Form.Item',
|
|
||||||
props: {
|
|
||||||
label: '姓名:',
|
|
||||||
name: 'name',
|
|
||||||
initValue: '李雷'
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
componentName: 'Input',
|
|
||||||
props: {
|
|
||||||
placeholder: '请输入',
|
|
||||||
size: 'medium',
|
|
||||||
style: {
|
|
||||||
width: 320
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
componentName: 'Form.Item',
|
|
||||||
props: {
|
|
||||||
label: '年龄:',
|
|
||||||
name: 'age',
|
|
||||||
initValue: '22'
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
componentName: 'NumberPicker',
|
|
||||||
props: {
|
|
||||||
size: 'medium',
|
|
||||||
type: 'normal'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
componentName: 'Form.Item',
|
|
||||||
props: {
|
|
||||||
label: {
|
|
||||||
type: 'JSSlot',
|
|
||||||
value: {
|
|
||||||
componentName: 'Div',
|
|
||||||
children: '职业:',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: 'profession'
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
componentName: 'Select',
|
|
||||||
props: {
|
|
||||||
dataSource: [
|
|
||||||
{
|
|
||||||
label: '教师',
|
|
||||||
value: 't'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '医生',
|
|
||||||
value: 'd'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '歌手',
|
|
||||||
value: 's'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
componentName: 'Div',
|
|
||||||
props: {
|
|
||||||
style: {
|
|
||||||
textAlign: 'center'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
componentName: 'Button.Group',
|
|
||||||
props: {},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
componentName: 'Button',
|
|
||||||
props: {
|
|
||||||
type: 'primary',
|
|
||||||
style: {
|
|
||||||
margin: '0 5px 0 5px'
|
|
||||||
},
|
|
||||||
htmlType: 'submit'
|
|
||||||
},
|
|
||||||
children: '提交',
|
|
||||||
condition: true,
|
|
||||||
loop: [1,2,3],
|
|
||||||
conditionGroup: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
componentName: 'Button',
|
|
||||||
props: {
|
|
||||||
type: 'normal',
|
|
||||||
style: {
|
|
||||||
margin: '0 5px 0 5px'
|
|
||||||
},
|
|
||||||
htmlType: 'reset'
|
|
||||||
},
|
|
||||||
children: '重置',
|
|
||||||
condition: false,
|
|
||||||
conditionGroup: '1'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class DesignerPlugin extends PureComponent<PluginProps> {
|
|
||||||
displayName: 'LowcodePluginDesigner';
|
|
||||||
|
|
||||||
componentDidMount(): void {
|
|
||||||
const { editor } = this.props;
|
|
||||||
editor.on('schema.reset', this.handleSchemaReset);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUmount(): void {
|
|
||||||
const { editor } = this.props;
|
|
||||||
editor.off('schema.reset', this.handleSchemaReset);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSchemaReset = (schema: object): void => {
|
|
||||||
// const {editor} = this.props;
|
|
||||||
// if (this.designer) {
|
|
||||||
// this.designer.setSchema(schema);
|
|
||||||
// } else {
|
|
||||||
// editor.once('designer.ready', (designer): void => {
|
|
||||||
// designer.setSchema(schema);
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
};
|
|
||||||
|
|
||||||
handleDesignerMount = (designer): void => {
|
|
||||||
const { editor } = this.props;
|
|
||||||
this.designer = designer;
|
|
||||||
editor.set('designer', designer);
|
|
||||||
editor.emit('designer.ready', designer);
|
|
||||||
};
|
|
||||||
|
|
||||||
render(): React.ReactNode {
|
|
||||||
const { editor } = this.props;
|
|
||||||
// const assets = editor.get('assets') || {};
|
|
||||||
return (
|
|
||||||
<Designer
|
|
||||||
onMount={this.handleDesignerMount}
|
|
||||||
className="lowcode-plugin-designer"
|
|
||||||
defaultSchema={SCHEMA as any}
|
|
||||||
eventPipe={editor as any}
|
|
||||||
componentMetadatas={Object.values(assets.components) as any}
|
|
||||||
simulatorProps={{
|
|
||||||
library: Object.values(assets.packages || {})
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1 +0,0 @@
|
|||||||
// test file
|
|
||||||
@ -1,30 +1,9 @@
|
|||||||
{
|
{
|
||||||
"compileOnSave": false,
|
"extends": "../../tsconfig.json",
|
||||||
"buildOnSave": false,
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
|
||||||
"outDir": "build",
|
"outDir": "build",
|
||||||
"module": "esnext",
|
|
||||||
"target": "es6",
|
"target": "es6",
|
||||||
"jsx": "react",
|
"jsx": "react"
|
||||||
"moduleResolution": "node",
|
|
||||||
"allowSyntheticDefaultImports": true,
|
|
||||||
"lib": ["es6", "dom"],
|
|
||||||
"sourceMap": true,
|
|
||||||
"allowJs": true,
|
|
||||||
"rootDir": "src",
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"noImplicitReturns": true,
|
|
||||||
"noImplicitThis": true,
|
|
||||||
"noImplicitAny": false,
|
|
||||||
"importHelpers": true,
|
|
||||||
"strictNullChecks": true,
|
|
||||||
"suppressImplicitAnyIndexErrors": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./src/*"]
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"include": ["src/*"],
|
"include": ["src/*"],
|
||||||
"exclude": ["node_modules", "build", "public"]
|
"exclude": ["node_modules", "build", "public"]
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import Editor from './editor';
|
import Editor from './editor';
|
||||||
|
|
||||||
import * as utils from './utils';
|
import * as utils from './utils';
|
||||||
import * as definitions from './definitions';
|
export * from './definitions';
|
||||||
|
|
||||||
export { default as PluginFactory } from './pluginFactory';
|
export { default as PluginFactory } from './pluginFactory';
|
||||||
export { default as EditorContext } from './context';
|
export { default as EditorContext } from './context';
|
||||||
@ -9,4 +9,4 @@ export { default as AreaManager } from './areaManager';
|
|||||||
|
|
||||||
export default Editor;
|
export default Editor;
|
||||||
|
|
||||||
export { utils, definitions };
|
export { Editor, utils };
|
||||||
|
|||||||
@ -1,11 +1,6 @@
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
|
import { Editor, PluginConfig } from '@ali/lowcode-editor-core';
|
||||||
import Editor from '@ali/lowcode-editor-core';
|
import { DesignerView, Designer } from '@ali/lowcode-designer';
|
||||||
import { PluginConfig } from '@ali/lowcode-editor-core/lib/definitions';
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
import Designer from '../../designer';
|
|
||||||
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
export interface PluginProps {
|
export interface PluginProps {
|
||||||
@ -21,17 +16,17 @@ const SCHEMA = {
|
|||||||
componentName: 'Page',
|
componentName: 'Page',
|
||||||
fileName: 'test',
|
fileName: 'test',
|
||||||
dataSource: {
|
dataSource: {
|
||||||
list: []
|
list: [],
|
||||||
},
|
},
|
||||||
state: {
|
state: {
|
||||||
text: 'outter'
|
text: 'outter',
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
ref: 'outterView',
|
ref: 'outterView',
|
||||||
autoLoading: true,
|
autoLoading: true,
|
||||||
style: {
|
style: {
|
||||||
padding: 20
|
padding: 20,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -39,7 +34,7 @@ const SCHEMA = {
|
|||||||
props: {
|
props: {
|
||||||
labelCol: 3,
|
labelCol: 3,
|
||||||
style: {},
|
style: {},
|
||||||
ref: 'testForm'
|
ref: 'testForm',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -47,7 +42,7 @@ const SCHEMA = {
|
|||||||
props: {
|
props: {
|
||||||
label: '姓名:',
|
label: '姓名:',
|
||||||
name: 'name',
|
name: 'name',
|
||||||
initValue: '李雷'
|
initValue: '李雷',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -56,34 +51,34 @@ const SCHEMA = {
|
|||||||
placeholder: '请输入',
|
placeholder: '请输入',
|
||||||
size: 'medium',
|
size: 'medium',
|
||||||
style: {
|
style: {
|
||||||
width: 320
|
width: 320,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
componentName: 'Form.Item',
|
componentName: 'Form.Item',
|
||||||
props: {
|
props: {
|
||||||
label: '年龄:',
|
label: '年龄:',
|
||||||
name: 'age',
|
name: 'age',
|
||||||
initValue: '22'
|
initValue: '22',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
componentName: 'NumberPicker',
|
componentName: 'NumberPicker',
|
||||||
props: {
|
props: {
|
||||||
size: 'medium',
|
size: 'medium',
|
||||||
type: 'normal'
|
type: 'normal',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
componentName: 'Form.Item',
|
componentName: 'Form.Item',
|
||||||
props: {
|
props: {
|
||||||
label: '职业:',
|
label: '职业:',
|
||||||
name: 'profession'
|
name: 'profession',
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -92,27 +87,27 @@ const SCHEMA = {
|
|||||||
dataSource: [
|
dataSource: [
|
||||||
{
|
{
|
||||||
label: '教师',
|
label: '教师',
|
||||||
value: 't'
|
value: 't',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '医生',
|
label: '医生',
|
||||||
value: 'd'
|
value: 'd',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '歌手',
|
label: '歌手',
|
||||||
value: 's'
|
value: 's',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
componentName: 'Div',
|
componentName: 'Div',
|
||||||
props: {
|
props: {
|
||||||
style: {
|
style: {
|
||||||
textAlign: 'center'
|
textAlign: 'center',
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -124,59 +119,60 @@ const SCHEMA = {
|
|||||||
props: {
|
props: {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
style: {
|
style: {
|
||||||
margin: '0 5px 0 5px'
|
margin: '0 5px 0 5px',
|
||||||
},
|
},
|
||||||
htmlType: 'submit'
|
htmlType: 'submit',
|
||||||
},
|
},
|
||||||
children: '提交'
|
children: '提交',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
componentName: 'Button',
|
componentName: 'Button',
|
||||||
props: {
|
props: {
|
||||||
type: 'normal',
|
type: 'normal',
|
||||||
style: {
|
style: {
|
||||||
margin: '0 5px 0 5px'
|
margin: '0 5px 0 5px',
|
||||||
},
|
},
|
||||||
htmlType: 'reset'
|
htmlType: 'reset',
|
||||||
},
|
},
|
||||||
children: '重置'
|
children: '重置',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class DesignerPlugin extends PureComponent<PluginProps> {
|
export default class DesignerPlugin extends PureComponent<PluginProps> {
|
||||||
displayName: 'LowcodePluginDesigner';
|
static displayName: 'LowcodePluginDesigner';
|
||||||
|
|
||||||
componentDidMount(): void {
|
componentDidMount(): void {
|
||||||
const {editor} = this.props;
|
const { editor } = this.props;
|
||||||
editor.on('schema.reset', this.handleSchemaReset);
|
editor.on('schema.reset', this.handleSchemaReset);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUmount(): void {
|
componentWillUmount(): void {
|
||||||
const {editor} = this.props;
|
const { editor } = this.props;
|
||||||
editor.off('schema.reset', this.handleSchemaReset);
|
editor.off('schema.reset', this.handleSchemaReset);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSchemaReset = (schema: object): void => {
|
private designer?: Designer;
|
||||||
const {editor} = this.props;
|
handleSchemaReset = (schema: any): void => {
|
||||||
|
const { editor } = this.props;
|
||||||
if (this.designer) {
|
if (this.designer) {
|
||||||
this.designer.setSchema(schema);
|
this.designer.setSchema(schema);
|
||||||
} else {
|
} else {
|
||||||
editor.once('designer.ready', (designer): void => {
|
editor.once('designer.ready', (designer: Designer): void => {
|
||||||
designer.setSchema(schema);
|
designer.setSchema(schema);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleDesignerMount = (designer): void => {
|
handleDesignerMount = (designer: Designer): void => {
|
||||||
const { editor } = this.props;
|
const { editor } = this.props;
|
||||||
this.designer = designer;
|
this.designer = designer;
|
||||||
editor.set('designer', designer);
|
editor.set('designer', designer);
|
||||||
@ -187,7 +183,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps> {
|
|||||||
const { editor } = this.props;
|
const { editor } = this.props;
|
||||||
const assets = editor.get('assets') || {};
|
const assets = editor.get('assets') || {};
|
||||||
return (
|
return (
|
||||||
<Designer
|
<DesignerView
|
||||||
onMount={this.handleDesignerMount}
|
onMount={this.handleDesignerMount}
|
||||||
className="lowcode-plugin-designer"
|
className="lowcode-plugin-designer"
|
||||||
defaultSchema={SCHEMA as any}
|
defaultSchema={SCHEMA as any}
|
||||||
|
|||||||
@ -1,20 +1,9 @@
|
|||||||
{
|
{
|
||||||
"compileOnSave": false,
|
"extends": "../../tsconfig.json",
|
||||||
"buildOnSave": false,
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "build",
|
"outDir": "lib",
|
||||||
"module": "esnext",
|
|
||||||
"target": "es6",
|
"target": "es6",
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"moduleResolution": "node",
|
|
||||||
"lib": ["es6", "dom"],
|
|
||||||
"sourceMap": true,
|
|
||||||
"allowJs": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noImplicitReturns": true,
|
|
||||||
"noImplicitThis": true,
|
|
||||||
"noImplicitAny": true,
|
|
||||||
"skipLibCheck": true
|
|
||||||
},
|
},
|
||||||
"include": ["src/*.ts", "src/*.tsx"],
|
"include": ["src/*.ts", "src/*.tsx"],
|
||||||
"exclude": ["node_modules", "build", "public"]
|
"exclude": ["node_modules", "build", "public"]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user