From 29ad679e87fcfc1aa7c4a1248eb3e20df6024d01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=89=A7=E6=AF=85?= Date: Thu, 24 Sep 2020 01:04:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20utils=20=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/src/editor/components.ts | 4 +- packages/demo/src/editor/config.ts | 10 + packages/plugin-utils-pane/CHANGELOG.md | 1 + packages/plugin-utils-pane/README.md | 3 + packages/plugin-utils-pane/build.json | 9 + packages/plugin-utils-pane/package.json | 43 +++++ packages/plugin-utils-pane/src/index.scss | 12 ++ packages/plugin-utils-pane/src/index.tsx | 213 ++++++++++++++++++++++ packages/plugin-utils-pane/src/utils.ts | 0 packages/plugin-utils-pane/tsconfig.json | 10 + 10 files changed, 304 insertions(+), 1 deletion(-) create mode 100644 packages/plugin-utils-pane/CHANGELOG.md create mode 100644 packages/plugin-utils-pane/README.md create mode 100644 packages/plugin-utils-pane/build.json create mode 100644 packages/plugin-utils-pane/package.json create mode 100644 packages/plugin-utils-pane/src/index.scss create mode 100644 packages/plugin-utils-pane/src/index.tsx create mode 100644 packages/plugin-utils-pane/src/utils.ts create mode 100644 packages/plugin-utils-pane/tsconfig.json diff --git a/packages/demo/src/editor/components.ts b/packages/demo/src/editor/components.ts index caa52a36f..9ef78211d 100644 --- a/packages/demo/src/editor/components.ts +++ b/packages/demo/src/editor/components.ts @@ -2,8 +2,9 @@ import logo from '@ali/lowcode-plugin-sample-logo'; import samplePreview from '@ali/lowcode-plugin-sample-preview'; import undoRedo from '@ali/lowcode-plugin-undo-redo'; import componentsPane from '@ali/lowcode-plugin-components-pane'; -import outline, { OutlinePane } from '@ali/lowcode-plugin-outline-pane'; +import outline from '@ali/lowcode-plugin-outline-pane'; import dataSourcePane from '@ali/lowcode-plugin-datasource-pane'; +import utilsPane from '@ali/lowcode-plugin-utils-pane'; import zhEn from '@ali/lowcode-plugin-zh-en'; import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog'; @@ -18,6 +19,7 @@ export default { undoRedo, componentsPane, outline, + utilsPane, zhEn, eventBindDialog, variableBindDialog, diff --git a/packages/demo/src/editor/config.ts b/packages/demo/src/editor/config.ts index bda055b0b..288472b21 100644 --- a/packages/demo/src/editor/config.ts +++ b/packages/demo/src/editor/config.ts @@ -83,6 +83,16 @@ export default { }, pluginProps: {}, }, + { + pluginKey: 'utilsPane', + type: 'PanelIcon', + props: { + align: 'top', + icon: 'util', + description: '工具类', + }, + pluginProps: {}, + }, { pluginKey: 'sourceEditor', type: 'PanelIcon', diff --git a/packages/plugin-utils-pane/CHANGELOG.md b/packages/plugin-utils-pane/CHANGELOG.md new file mode 100644 index 000000000..420e6f23d --- /dev/null +++ b/packages/plugin-utils-pane/CHANGELOG.md @@ -0,0 +1 @@ +# Change Log diff --git a/packages/plugin-utils-pane/README.md b/packages/plugin-utils-pane/README.md new file mode 100644 index 000000000..fcb19d90f --- /dev/null +++ b/packages/plugin-utils-pane/README.md @@ -0,0 +1,3 @@ +## 关于 @ali/lowcode-plugin-utils-pane + +这是低代码引擎的 utils 面板。 diff --git a/packages/plugin-utils-pane/build.json b/packages/plugin-utils-pane/build.json new file mode 100644 index 000000000..77627cdf9 --- /dev/null +++ b/packages/plugin-utils-pane/build.json @@ -0,0 +1,9 @@ +{ + "plugins": [ + "build-plugin-component", + "build-plugin-fusion", + ["build-plugin-moment-locales", { + "locales": ["zh-cn"] + }] + ] +} \ No newline at end of file diff --git a/packages/plugin-utils-pane/package.json b/packages/plugin-utils-pane/package.json new file mode 100644 index 000000000..d5b55841e --- /dev/null +++ b/packages/plugin-utils-pane/package.json @@ -0,0 +1,43 @@ +{ + "name": "@ali/lowcode-plugin-utils-pane", + "version": "1.0.8-0", + "description": "alibaba lowcode editor utils pane plugin", + "files": [ + "es/", + "lib/" + ], + "main": "lib/index.js", + "module": "es/index.js", + "stylePath": "style.js", + "scripts": { + "build": "build-scripts build --skip-demo", + "test": "ava", + "test:snapshot": "ava --update-snapshots" + }, + "keywords": [ + "lowcode", + "editor" + ], + "author": "changyun.pcy", + "dependencies": { + "@alifd/next": "1.x" + }, + "peerDependencies": { + "@ali/lowcode-editor-core": "^1.0.8-0", + "prop-types": "^15.5.8", + "react": "^16.8.1", + "react-dom": "^16.8.1", + "react-router-dom": "^5.1.2" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-component": "^0.2.7-1", + "build-plugin-fusion": "^0.1.0", + "build-plugin-moment-locales": "^0.1.0" + }, + "publishConfig": { + "registry": "https://registry.npm.alibaba-inc.com" + } +} diff --git a/packages/plugin-utils-pane/src/index.scss b/packages/plugin-utils-pane/src/index.scss new file mode 100644 index 000000000..7b433fcea --- /dev/null +++ b/packages/plugin-utils-pane/src/index.scss @@ -0,0 +1,12 @@ +.lowcode-plugin-utils-pane { + position: relative; + font-size: 100%; + width: 100%; + transform: scale(1); // 这是为了让下面的弹层能正确地计算宽度 + + .lc-popup-placeholder { + position: fixed; + width: 100%; + transform: translateY(-100px); + } +} diff --git a/packages/plugin-utils-pane/src/index.tsx b/packages/plugin-utils-pane/src/index.tsx new file mode 100644 index 000000000..a04bc6401 --- /dev/null +++ b/packages/plugin-utils-pane/src/index.tsx @@ -0,0 +1,213 @@ +import './index.scss'; + +import React, { isValidElement, PureComponent } from 'react'; + +import { Designer, SettingEntry, SettingField, SettingPropEntry } from '@ali/lowcode-designer'; +import { Editor, getSetter } from '@ali/lowcode-editor-core'; +import { PopupService } from '@ali/lowcode-editor-skeleton'; + +import type { PluginProps, SetterType, FieldConfig, UtilsMap } from '@ali/lowcode-types'; + +// 插件自定义props +export interface UtilsPaneProps {} + +// 插件自定义state +interface State { + utils: UtilsMap; +} + +export class UtilsPane extends PureComponent { + static displayName = 'UtilsPane'; + + // 插件初始化处理函数 + static init = function (editor: Editor): void {}; + + state: State = { + utils: this.props.editor.get('designer')?.project?.get('utils') || [], + }; + + private _itemSetter: SetterType = { + componentName: 'ObjectSetter', + props: { + config: { + items: [ + { + name: 'name', + title: '名称', + setter: { + componentName: 'StringSetter', + }, + }, + { + name: 'type', + title: '类型', + initialValue: 'npm', + setter: { + componentName: 'RadioGroupSetter', + props: { + dataSource: [ + { label: 'NPM 包', value: 'npm' }, + // { label: '自定义函数', value: 'function' }, + ], + }, + }, + }, + { + name: 'content', + title: '内容', + setter: { + componentName: 'ObjectSetter', + props: { + config: { + items: [ + { + name: 'componentName', + title: '组件名称', + setter: { + componentName: 'StringSetter', + }, + }, + { + name: 'package', + title: '包名', + setter: { + componentName: 'StringSetter', + }, + }, + { + name: 'version', + title: '版本号', + setter: { + componentName: 'StringSetter', + }, + }, + { + name: 'destructuring', + title: '解构', + setter: { + componentName: 'BoolSetter', + }, + }, + { + name: 'exportName', + title: '导出名', + setter: { + componentName: 'StringSetter', + }, + }, + { + name: 'subName', + title: '子导出名', + setter: { + componentName: 'StringSetter', + }, + }, + { + name: 'main', + title: '主入口', + setter: { + componentName: 'StringSetter', + }, + }, + ], + }, + }, + }, + }, + ], + }, + }, + }; + + private _field = new SettingField(this._getSettingEntry(), this._getFieldConfig()); + private _cleanups: Array<() => void> = []; + + // 打开或激活插件前的切片处理函数 + open(): void | boolean | Promise {} + + // 关闭或挂起插件前的切片处理函数 + close(): void | boolean | Promise {} + + componentDidMount() { + this._cleanups.push( + this._field.onValueChange(() => { + this.setState({ + utils: this._field.getHotValue(), + }); + }), + ); + } + + componentWillUnmount() { + this._cleanups.forEach((clean) => { + clean(); + }); + } + + render(): React.ReactNode { + const ArraySetter = this._getArraySetter(); + + return ( +
+

I am a lowcode engine demo

+ + + +
+ ); + } + + private _handleValueChange = (value: UtilsMap) => { + this.setState({ utils: value }); + this._updateProjectUtils(value); + }; + + private _getSettingEntry(): SettingEntry { + const editor = this.props.editor; + const designer = editor.get('designer') as Designer; + const document = designer.currentDocument!; + const rootNode = document.rootNode!; + + // TODO: remove debug code : + Object.assign(window, { editor, designer, utilsPane: this }); + + return new SettingPropEntry(rootNode.settingEntry, '__internal', 'field'); + } + + private _getFieldConfig(): FieldConfig { + return { + name: '__utils', + setter: this._itemSetter, + }; + } + + private _getArraySetter(): React.ComponentType { + const arraySetter = getSetter('ArraySetter'); + if (!arraySetter) { + return () => Error: ArraySetter is missing!; + } + + const { component: ArraySetter } = arraySetter; + if (isValidElement(ArraySetter)) { + return (props: unknown) => React.cloneElement(ArraySetter); + } + + return ArraySetter; + } + + private get _designer(): Designer { + return this.props.editor.get('designer')!; + } + + private _updateProjectUtils(utils: UtilsMap) { + this._designer.project.set('utils', utils); + } +} + +export default UtilsPane; diff --git a/packages/plugin-utils-pane/src/utils.ts b/packages/plugin-utils-pane/src/utils.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/plugin-utils-pane/tsconfig.json b/packages/plugin-utils-pane/tsconfig.json new file mode 100644 index 000000000..4a965ec62 --- /dev/null +++ b/packages/plugin-utils-pane/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": [ + "./src/" + ] +} +