diff --git a/package.json b/package.json index d6d7337a5..4438c88ad 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ }, "husky": { "hooks": { - "pre-commit": "xima exec lint-staged", "commit-msg": "xima exec commitlint -E HUSKY_GIT_PARAMS" } }, diff --git a/packages/code-generator/demo/demo.js b/packages/code-generator/demo/demo.js index a3ca9ca46..1c760446d 100644 --- a/packages/code-generator/demo/demo.js +++ b/packages/code-generator/demo/demo.js @@ -59,7 +59,7 @@ function main() { builder.generateProject(schemaJson).then((result) => { displayResultInConsole(result); - writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response)),); + writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response))); return result; }); } @@ -160,7 +160,7 @@ function exportProject() { builder.generateProject(schemaJson).then((result) => { displayResultInConsole(result); - writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response)),); + writeResultToDisk(result, 'output/lowcodeDemo').then((response) => console.log('Write to disk: ', JSON.stringify(response))); return result; }); } diff --git a/packages/code-generator/src/@types/ali__my-prettier/index.d.ts b/packages/code-generator/src/@types/ali__my-prettier/index.d.ts index d21a2b18a..1751a79ff 100644 --- a/packages/code-generator/src/@types/ali__my-prettier/index.d.ts +++ b/packages/code-generator/src/@types/ali__my-prettier/index.d.ts @@ -1,4 +1,4 @@ -/// +// / declare module '@ali/my-prettier' { function format(text: string, type: string): string; diff --git a/packages/code-generator/src/const/generator.ts b/packages/code-generator/src/const/generator.ts index 9028b9226..3d3950420 100644 --- a/packages/code-generator/src/const/generator.ts +++ b/packages/code-generator/src/const/generator.ts @@ -109,6 +109,6 @@ export const DEFAULT_LINK_AFTER = { [COMMON_CHUNK_NAME.StyleDepsImport]: [], [COMMON_CHUNK_NAME.StyleCssContent]: [COMMON_CHUNK_NAME.StyleDepsImport], [COMMON_CHUNK_NAME.HtmlContent]: [], -} +}; export const COMMON_SUB_MODULE_NAME = 'index'; diff --git a/packages/code-generator/src/const/index.ts b/packages/code-generator/src/const/index.ts index d637ad03c..790fa23e0 100644 --- a/packages/code-generator/src/const/index.ts +++ b/packages/code-generator/src/const/index.ts @@ -1,4 +1,4 @@ -export const NATIVE_ELE_PKG: string = 'native'; +export const NATIVE_ELE_PKG = 'native'; export const CONTAINER_TYPE = { COMPONENT: 'Component', diff --git a/packages/code-generator/src/generator/CodeBuilder.ts b/packages/code-generator/src/generator/CodeBuilder.ts index ad7f33622..21b471f50 100644 --- a/packages/code-generator/src/generator/CodeBuilder.ts +++ b/packages/code-generator/src/generator/CodeBuilder.ts @@ -58,7 +58,7 @@ export default class Builder implements ICodeBuilder { const { type, content, name } = unprocessedChunks[indexToRemove]; const compiledContent = this.generateByType(type, content); if (compiledContent) { - resultingString.push(compiledContent + '\n'); + resultingString.push(`${compiledContent }\n`); } unprocessedChunks.splice(indexToRemove, 1); @@ -95,8 +95,6 @@ export default class Builder implements ICodeBuilder { // remove invalid chunks (which did not end up being created) from the linkAfter fields // one use-case is when you want to remove the import plugin private cleanupInvalidChunks(linkAfter: string[], chunks: ICodeChunk[]) { - return linkAfter.filter(chunkName => - chunks.some(chunk => chunk.name === chunkName), - ); + return linkAfter.filter(chunkName => chunks.some(chunk => chunk.name === chunkName)); } } diff --git a/packages/code-generator/src/generator/ModuleBuilder.ts b/packages/code-generator/src/generator/ModuleBuilder.ts index 063434cb4..f70abc669 100644 --- a/packages/code-generator/src/generator/ModuleBuilder.ts +++ b/packages/code-generator/src/generator/ModuleBuilder.ts @@ -51,7 +51,7 @@ export function createModuleBuilder( if (options.postProcessors.length > 0) { files = files.map((file) => { - let content = file.content; + let { content } = file; const type = file.ext; options.postProcessors.forEach((processer) => { content = processer(content, type); diff --git a/packages/code-generator/src/generator/ProjectBuilder.ts b/packages/code-generator/src/generator/ProjectBuilder.ts index 34211d0e5..a10ad67e8 100644 --- a/packages/code-generator/src/generator/ProjectBuilder.ts +++ b/packages/code-generator/src/generator/ProjectBuilder.ts @@ -40,7 +40,9 @@ function getDirFromRoot(root: IResultDir, path: string[]): IResultDir { export class ProjectBuilder implements IProjectBuilder { private template: IProjectTemplate; + private plugins: IProjectPlugins; + private postProcessors: PostProcessor[]; constructor({ diff --git a/packages/code-generator/src/model/ResultDir.ts b/packages/code-generator/src/model/ResultDir.ts index 3888859c1..c456a9459 100644 --- a/packages/code-generator/src/model/ResultDir.ts +++ b/packages/code-generator/src/model/ResultDir.ts @@ -2,7 +2,9 @@ import { CodeGeneratorError, IResultDir, IResultFile } from '../types'; export default class ResultDir implements IResultDir { public name: string; + public dirs: IResultDir[]; + public files: IResultFile[]; constructor(name: string) { diff --git a/packages/code-generator/src/model/ResultFile.ts b/packages/code-generator/src/model/ResultFile.ts index 08b3032b8..b8064bfab 100644 --- a/packages/code-generator/src/model/ResultFile.ts +++ b/packages/code-generator/src/model/ResultFile.ts @@ -2,10 +2,12 @@ import { IResultFile } from '../types'; export default class ResultFile implements IResultFile { public name: string; + public ext: string; + public content: string; - constructor(name: string, ext: string = 'jsx', content: string = '') { + constructor(name: string, ext = 'jsx', content = '') { this.name = name; this.ext = ext; this.content = content; diff --git a/packages/code-generator/src/parser/SchemaParser.ts b/packages/code-generator/src/parser/SchemaParser.ts index ddb9e4c1c..61ca7c806 100644 --- a/packages/code-generator/src/parser/SchemaParser.ts +++ b/packages/code-generator/src/parser/SchemaParser.ts @@ -95,7 +95,7 @@ class SchemaParser implements ISchemaParser { }); } } else { - throw new CodeGeneratorError(`Can't find anything to generate.`); + throw new CodeGeneratorError('Can\'t find anything to generate.'); } // 建立所有容器的内部依赖索引 diff --git a/packages/code-generator/src/plugins/common/requireUtils.ts b/packages/code-generator/src/plugins/common/requireUtils.ts index 9da850a4c..6d2fcfe92 100644 --- a/packages/code-generator/src/plugins/common/requireUtils.ts +++ b/packages/code-generator/src/plugins/common/requireUtils.ts @@ -19,7 +19,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { type: ChunkType.STRING, fileType: FileType.JSX, name: COMMON_CHUNK_NAME.InternalDepsImport, - content: `import * from 'react';`, + content: 'import * from \'react\';', linkAfter: [], }); diff --git a/packages/code-generator/src/plugins/component/react/containerClass.ts b/packages/code-generator/src/plugins/component/react/containerClass.ts index 7ca5e685f..b84e7aa6e 100644 --- a/packages/code-generator/src/plugins/component/react/containerClass.ts +++ b/packages/code-generator/src/plugins/component/react/containerClass.ts @@ -35,7 +35,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { type: ChunkType.STRING, fileType: FileType.JSX, name: CLASS_DEFINE_CHUNK_NAME.End, - content: `}`, + content: '}', linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start, REACT_CHUNK_NAME.ClassRenderEnd], }); diff --git a/packages/code-generator/src/plugins/component/react/containerDataSource.ts b/packages/code-generator/src/plugins/component/react/containerDataSource.ts index b60cb9539..8907dea36 100644 --- a/packages/code-generator/src/plugins/component/react/containerDataSource.ts +++ b/packages/code-generator/src/plugins/component/react/containerDataSource.ts @@ -29,7 +29,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) => const ir = next.ir as IContainerInfo; if (ir.state) { - const state = ir.state; + const { state } = ir; const fields = Object.keys(state).map((stateName) => { const value = generateCompositeType(state[stateName]); return `${stateName}: ${value},`; diff --git a/packages/code-generator/src/plugins/component/react/containerInitState.ts b/packages/code-generator/src/plugins/component/react/containerInitState.ts index 9550244f1..3ab10463c 100644 --- a/packages/code-generator/src/plugins/component/react/containerInitState.ts +++ b/packages/code-generator/src/plugins/component/react/containerInitState.ts @@ -31,7 +31,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) => const ir = next.ir as IContainerInfo; if (ir.state) { - const state = ir.state; + const { state } = ir; const fields = Object.keys(state).map((stateName) => { const value = generateCompositeType(state[stateName]); return `${stateName}: ${value},`; diff --git a/packages/code-generator/src/plugins/component/react/containerInjectUtils.ts b/packages/code-generator/src/plugins/component/react/containerInjectUtils.ts index 8cded167b..bf065b77d 100644 --- a/packages/code-generator/src/plugins/component/react/containerInjectUtils.ts +++ b/packages/code-generator/src/plugins/component/react/containerInjectUtils.ts @@ -10,7 +10,7 @@ import { type PluginConfig = { fileType: string; -} +}; const pluginFactory: BuilderComponentPluginFactory = (config?) => { const cfg: PluginConfig = { @@ -27,7 +27,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) => type: ChunkType.STRING, fileType: cfg.fileType, name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent, - content: `this.utils = utils;`, + content: 'this.utils = utils;', linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart], }); diff --git a/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts b/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts index 000355b7d..585cd6d7e 100644 --- a/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts +++ b/packages/code-generator/src/plugins/component/react/containerLifeCycle.ts @@ -35,7 +35,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) => const ir = next.ir as IContainerInfo; if (ir.lifeCycles) { - const lifeCycles = ir.lifeCycles; + const { lifeCycles } = ir; const chunks = Object.keys(lifeCycles).map((lifeCycleName) => { const normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName; const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName; diff --git a/packages/code-generator/src/plugins/component/react/containerMethod.ts b/packages/code-generator/src/plugins/component/react/containerMethod.ts index 148f2cffd..ecc89d828 100644 --- a/packages/code-generator/src/plugins/component/react/containerMethod.ts +++ b/packages/code-generator/src/plugins/component/react/containerMethod.ts @@ -30,7 +30,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) => const ir = next.ir as IContainerInfo; if (ir.methods) { - const methods = ir.methods; + const { methods } = ir; const chunks = Object.keys(methods).map((methodName) => ({ type: ChunkType.STRING, fileType: cfg.fileType, diff --git a/packages/code-generator/src/plugins/component/react/jsx.ts b/packages/code-generator/src/plugins/component/react/jsx.ts index 3f2c7b0e2..78ee3f790 100644 --- a/packages/code-generator/src/plugins/component/react/jsx.ts +++ b/packages/code-generator/src/plugins/component/react/jsx.ts @@ -14,7 +14,7 @@ import { createReactNodeGenerator } from '../../../utils/nodeToJSX'; type PluginConfig = { fileType?: string; nodeTypeMapping?: Record; -} +}; const pluginFactory: BuilderComponentPluginFactory = (config?) => { const cfg = { diff --git a/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts b/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts index 2e75a5b7e..51af22e4f 100644 --- a/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts +++ b/packages/code-generator/src/plugins/component/react/reactCommonDeps.ts @@ -19,7 +19,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { type: ChunkType.STRING, fileType: FileType.JSX, name: COMMON_CHUNK_NAME.ExternalDepsImport, - content: `import React from 'react';`, + content: 'import React from \'react\';', linkAfter: [], }); diff --git a/packages/code-generator/src/plugins/component/recore/pageFrame.ts b/packages/code-generator/src/plugins/component/recore/pageFrame.ts index e302a64bc..80aa08287 100644 --- a/packages/code-generator/src/plugins/component/recore/pageFrame.ts +++ b/packages/code-generator/src/plugins/component/recore/pageFrame.ts @@ -21,7 +21,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { type: ChunkType.STRING, fileType: FileType.TS, name: COMMON_CHUNK_NAME.ExternalDepsImport, - content: `import { BaseController } from '@ali/recore-renderer';`, + content: 'import { BaseController } from \'@ali/recore-renderer\';', linkAfter: [], }); @@ -37,7 +37,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { type: ChunkType.STRING, fileType: FileType.TS, name: CLASS_DEFINE_CHUNK_NAME.End, - content: `}`, + content: '}', linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.End]], }); diff --git a/packages/code-generator/src/plugins/component/recore/pageVmHeader.ts b/packages/code-generator/src/plugins/component/recore/pageVmHeader.ts index 6ef8ac44f..71ee2335c 100644 --- a/packages/code-generator/src/plugins/component/recore/pageVmHeader.ts +++ b/packages/code-generator/src/plugins/component/recore/pageVmHeader.ts @@ -17,7 +17,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => { type: ChunkType.STRING, fileType: 'vx', name: COMMON_CHUNK_NAME.CustomContent, - content: `
`, + content: '
', linkAfter: [], }); diff --git a/packages/code-generator/src/plugins/component/style/css.ts b/packages/code-generator/src/plugins/component/style/css.ts index a2e8b46f0..167d9be41 100644 --- a/packages/code-generator/src/plugins/component/style/css.ts +++ b/packages/code-generator/src/plugins/component/style/css.ts @@ -12,7 +12,7 @@ import { type PluginConfig = { fileType: string; moduleFileType: string; -} +}; const pluginFactory: BuilderComponentPluginFactory = (config?) => { const cfg: PluginConfig = { diff --git a/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts b/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts index b4f2d718f..bb2d7c47f 100644 --- a/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts +++ b/packages/code-generator/src/plugins/project/framework/icejs/plugins/router.ts @@ -38,15 +38,15 @@ const pluginFactory: BuilderComponentPluginFactory = () => { component: BasicLayout, children: [ ${ir.routes - .map( - route => ` + .map( + route => ` { path: '${route.path}', component: ${route.componentName}, } `, - ) - .join(',')} + ) + .join(',')} ], }, ]; diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts index b7523b5f9..d83eeccfb 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/abc.json.ts @@ -25,4 +25,3 @@ export default function getFile(): [string[], IResultFile] { return [[], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts index 08c1ab78a..16590134d 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/build.json.ts @@ -29,4 +29,3 @@ export default function getFile(): [string[], IResultFile] { return [[], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts index d8da2daaa..2e82c8266 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/package.json.ts @@ -63,4 +63,3 @@ export default function getFile(): [string[], IResultFile] { return [[], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts index af229a7e0..c0d09de31 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/public/index.html.ts @@ -48,4 +48,3 @@ export default function getFile(): [string[], IResultFile] { return [['public'], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts index 784662e28..b4d86e5e6 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/app.ts.ts @@ -72,6 +72,5 @@ export default { `, ); - return [['src','config'], file]; + return [['src', 'config'], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts index c894e92aa..b08b4593b 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/components.ts.ts @@ -38,6 +38,5 @@ export default componentsMap; `, ); - return [['src','config'], file]; + return [['src', 'config'], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts index 84237ae1d..241186e48 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/config/utils.ts.ts @@ -24,6 +24,5 @@ export default { `, ); - return [['src','config'], file]; + return [['src', 'config'], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts index 979b85a20..8c12c90bf 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/src/index.ts.ts @@ -98,4 +98,3 @@ app.run(); return [['src'], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts b/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts index c30c3e46b..cb75cf556 100644 --- a/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts +++ b/packages/code-generator/src/plugins/project/framework/recore/template/files/tsconfig.json.ts @@ -50,4 +50,3 @@ export default function getFile(): [string[], IResultFile] { return [[], file]; } - \ No newline at end of file diff --git a/packages/code-generator/src/postprocessor/prettier/index.ts b/packages/code-generator/src/postprocessor/prettier/index.ts index 85c2f9741..082a3d022 100644 --- a/packages/code-generator/src/postprocessor/prettier/index.ts +++ b/packages/code-generator/src/postprocessor/prettier/index.ts @@ -7,7 +7,7 @@ const PARSERS = ['css', 'scss', 'less', 'json', 'html', 'vue']; type ProcessorConfig = { customFileTypeParser: Record; -} +}; const factory: PostProcessorFactory = (config?: ProcessorConfig) => { const cfg: ProcessorConfig = { @@ -23,7 +23,7 @@ const factory: PostProcessorFactory = (config?: ProcessorConfig parser = 'typescript'; } else if (PARSERS.indexOf(fileType) >= 0) { parser = fileType as prettier.BuiltInParserName; - } else if (cfg.customFileTypeParser[fileType]){ + } else if (cfg.customFileTypeParser[fileType]) { parser = cfg.customFileTypeParser[fileType] as prettier.BuiltInParserName; } else if (fileType === 'vx') { return mypretter(content, fileType); diff --git a/packages/code-generator/src/publisher/disk/index.ts b/packages/code-generator/src/publisher/disk/index.ts index b63649ab9..bc12ed96f 100644 --- a/packages/code-generator/src/publisher/disk/index.ts +++ b/packages/code-generator/src/publisher/disk/index.ts @@ -19,8 +19,8 @@ export interface IDiskPublisher extends IPublisher { } export const createDiskPublisher: PublisherFactory< - IDiskFactoryParams, - IDiskPublisher +IDiskFactoryParams, +IDiskPublisher > = (params: IDiskFactoryParams = {}): IDiskPublisher => { let { project, outputPath = './' } = params; diff --git a/packages/code-generator/src/publisher/disk/utils.ts b/packages/code-generator/src/publisher/disk/utils.ts index 35fbbc2ad..b07cb83c9 100644 --- a/packages/code-generator/src/publisher/disk/utils.ts +++ b/packages/code-generator/src/publisher/disk/utils.ts @@ -61,7 +61,7 @@ const createDirectory = (pathToDir: string): Promise => { const writeContentToFile = ( filePath: string, fileContent: string, - encoding: string = 'utf8', + encoding = 'utf8', ): Promise => { return new Promise((resolve, reject) => { writeFile(filePath, fileContent, encoding, err => { diff --git a/packages/code-generator/src/publisher/zip/index.ts b/packages/code-generator/src/publisher/zip/index.ts index c400c6849..9e2cbe36f 100644 --- a/packages/code-generator/src/publisher/zip/index.ts +++ b/packages/code-generator/src/publisher/zip/index.ts @@ -5,7 +5,7 @@ import { IPublisherFactoryParams, PublisherError, } from '../../types'; -import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils' +import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils'; // export type ZipBuffer = Buffer | Blob; export type ZipBuffer = Buffer; @@ -30,12 +30,12 @@ export const createZipPublisher: PublisherFactory project; const setProject = (projectToSet: IResultDir) => { project = projectToSet; - } + }; const getOutputPath = () => outputPath; const setOutputPath = (path: string) => { outputPath = path; - } + }; const publish = async (options: ZipFactoryParams = {}) => { const projectToPublish = options.project || project; @@ -57,7 +57,7 @@ export const createZipPublisher: PublisherFactory { typeof process.versions === 'object' && typeof process.versions.node !== 'undefined' ); -} +}; export const writeZipToDisk = ( zipFolderPath: string, @@ -27,7 +27,7 @@ export const writeZipToDisk = ( const writeStream = fs.createWriteStream(zipPath); writeStream.write(content); writeStream.end(); -} +}; export const generateProjectZip = async (project: IResultDir): Promise => { let zip = new JSZip(); @@ -35,12 +35,12 @@ export const generateProjectZip = async (project: IResultDir): Promise { const zipFolder = ignoreFolder ? parentFolder : parentFolder.folder(folder.name); if (zipFolder !== null) { @@ -57,4 +57,4 @@ const writeFolderToZip = ( } return parentFolder; -} +}; diff --git a/packages/code-generator/src/utils/nodeToJSX.ts b/packages/code-generator/src/utils/nodeToJSX.ts index 39791d7cd..237221346 100644 --- a/packages/code-generator/src/utils/nodeToJSX.ts +++ b/packages/code-generator/src/utils/nodeToJSX.ts @@ -236,7 +236,7 @@ export function linkPieces(pieces: CodePiece[]): string { .map((p) => p.value) .join(' '); - attrsParts = !!attrsParts ? ` ${attrsParts}` : ''; + attrsParts = attrsParts ? ` ${attrsParts}` : ''; if (childrenParts) { return `${beforeParts}<${tagName}${attrsParts}>${childrenParts}${afterParts}`; diff --git a/packages/code-generator/tools/createTemplate.js b/packages/code-generator/tools/createTemplate.js index b7568f7a9..8b4a47215 100644 --- a/packages/code-generator/tools/createTemplate.js +++ b/packages/code-generator/tools/createTemplate.js @@ -1,4 +1,4 @@ -const fs = require("fs"); +const fs = require('fs'); const path = require('path'); console.log(process.argv); @@ -15,7 +15,7 @@ if (!root) { function cloneStr(str, times) { let count = times; const arr = []; - while(count > 0) { + while (count > 0) { arr.push(str); count -= 1; } @@ -23,7 +23,7 @@ function cloneStr(str, times) { } function createTemplateFile(root, internalPath, fileName) { - //不是文件夹,则添加type属性为文件后缀名 + // 不是文件夹,则添加type属性为文件后缀名 const fileTypeSrc = path.extname(fileName); const fileType = fileTypeSrc.substring(1); const baseName = path.basename(fileName, fileTypeSrc); @@ -62,24 +62,24 @@ ${content} function fileDisplay(root, internalPath) { const dirPath = path.join(root, internalPath); const filesList = fs.readdirSync(dirPath); - for(let i = 0; i < filesList.length; i++){ - //描述此文件/文件夹的对象 + for (let i = 0; i < filesList.length; i++) { + // 描述此文件/文件夹的对象 const fileName = filesList[i]; - //拼接当前文件的路径(上一层路径+当前file的名字) + // 拼接当前文件的路径(上一层路径+当前file的名字) const filePath = path.join(dirPath, fileName); - //根据文件路径获取文件信息，返回一个fs.Stats对象 + // 根据文件路径获取文件信息，返回一个fs.Stats对象 const stats = fs.statSync(filePath); - if(stats.isDirectory()){ - //递归调用 + if (stats.isDirectory()) { + // 递归调用 fileDisplay(root, path.join(internalPath, fileName)); - }else{ + } else { createTemplateFile(root, internalPath, fileName); } } } -//调用函数遍历根目录，同时传递 文件夹路径和对应的数组 -//请使用同步读取 +// 调用函数遍历根目录，同时传递 文件夹路径和对应的数组 +// 请使用同步读取 fileDisplay(root, ''); -//读取完毕则写入到txt文件中 +// 读取完毕则写入到txt文件中 // fs.writeFileSync('./data.txt', JSON.stringify(arr)); diff --git a/packages/demo-server/src/publisher/utils.ts b/packages/demo-server/src/publisher/utils.ts index 0b7b205ff..67b99cff5 100644 --- a/packages/demo-server/src/publisher/utils.ts +++ b/packages/demo-server/src/publisher/utils.ts @@ -38,7 +38,7 @@ export const generateProjectZip = async (project: IResultDir): Promise { const zipFolder = ignoreFolder ? parentFolder : parentFolder.folder(folder.name) diff --git a/packages/demo/src/app/plugins/provider.ts b/packages/demo/src/app/plugins/provider.ts index 54bc61d23..9edbde3f0 100644 --- a/packages/demo/src/app/plugins/provider.ts +++ b/packages/demo/src/app/plugins/provider.ts @@ -34,7 +34,7 @@ export default class Preview extends ReactProvider { containerId, components: { ...builtInComps, ...buildComponents({ '@alifd/next': 'Next' }, componentsMap) }, componentsMap, - utils: utils, + utils, constants, }; } diff --git a/packages/demo/src/editor/plugins/codeout.tsx b/packages/demo/src/editor/plugins/codeout.tsx index c2046bd39..0a6777cc8 100644 --- a/packages/demo/src/editor/plugins/codeout.tsx +++ b/packages/demo/src/editor/plugins/codeout.tsx @@ -28,7 +28,7 @@ const Codeout = ({ editor }: PluginProps) => { const designer = editor.get(Designer); if (designer) { const assets = editor.get('assets') as { components: BasicSection[] }; - const components = assets.components; + const { components } = assets; const componentsMap = components .filter((c) => !!c.npm) diff --git a/packages/demo/src/editor/plugins/saveload.tsx b/packages/demo/src/editor/plugins/saveload.tsx index 75532802f..c811f7237 100644 --- a/packages/demo/src/editor/plugins/saveload.tsx +++ b/packages/demo/src/editor/plugins/saveload.tsx @@ -22,10 +22,9 @@ interface BasicSection { const Codeout = ({ editor }: PluginProps) => { const handleSaveClick = () => { - debugger; - let schema = editor.get('designer').project.getSchema(); + const schema = editor.get('designer').project.getSchema(); console.log(schema); diff --git a/packages/demo/src/vision/module.d.ts b/packages/demo/src/vision/module.d.ts index be53328de..7c7645ba6 100644 --- a/packages/demo/src/vision/module.d.ts +++ b/packages/demo/src/vision/module.d.ts @@ -9,5 +9,5 @@ declare module '@ali/ve-page-history'; declare module '@ali/ve-i18n-manage-pane'; declare module '@ali/ve-action-pane'; declare module '@ali/vu-legao-design-fetch-context'; -declare module "@ali/vu-function-parser"; -declare module "compare-versions"; +declare module '@ali/vu-function-parser'; +declare module 'compare-versions'; diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx index f6bd20460..d757e7eb8 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx @@ -56,10 +56,10 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> { } @computed get current() { - const host = this.props.host; + const { host } = this.props; const doc = host.document; - const selection = doc.selection; - const current = host.designer.detecting.current; + const { selection } = doc; + const { current } = host.designer.detecting; if (!current || current.document !== doc || selection.has(current.id)) { return null; } @@ -67,8 +67,8 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> { } render() { - const host = this.props.host; - const current = this.current; + const { host } = this.props; + const { current } = this; if (!current || host.viewport.scrolling || host.liveEditing.editing) { return null; } diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx index a4947ad7d..118f0de63 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -23,7 +23,7 @@ export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost if (doc.suspensed) { return null; } - const selection = doc.selection; + const { selection } = doc; return this.dragging ? selection.getTopNodes() : selection.getNodes(); } @@ -37,7 +37,7 @@ export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost } render() { - const selecting = this.selecting; + const { selecting } = this; if (!selecting || selecting.length < 1) { // DIRTY FIX, recore has a bug! return ; @@ -79,7 +79,7 @@ export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost; render() { const { instances } = this; const { node } = this.props; - const designer = this.host.designer; + const { designer } = this.host; if (!instances || instances.length < 1) { return null; @@ -112,8 +112,11 @@ export class BoxResizingInstance extends Component<{ }> { // private outline: any; private willUnbind: () => any; + private outlineRight: any; + private outlineLeft: any; + private dragEngine: DragResizeEngine; constructor(props: any) { diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx index 7341fc056..ae82e67b1 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx @@ -59,6 +59,7 @@ class Toolbar extends Component<{ observed: OffsetObserver }> { shouldComponentUpdate() { return false; } + render() { const { observed } = this.props; const { height, width } = observed.viewport; @@ -169,7 +170,7 @@ export class BorderSelectingForNode extends Component<{ host: BuiltinSimulatorHo render() { const { instances } = this; const { node } = this.props; - const designer = this.host.designer; + const { designer } = this.host; if (!instances || instances.length < 1) { return null; @@ -206,7 +207,7 @@ export class BorderSelecting extends Component<{ host: BuiltinSimulatorHost }> { if (doc.suspensed || this.host.liveEditing.editing) { return null; } - const selection = doc.selection; + const { selection } = doc; return this.dragging ? selection.getTopNodes() : selection.getNodes(); } @@ -215,7 +216,7 @@ export class BorderSelecting extends Component<{ host: BuiltinSimulatorHost }> { } render() { - const selecting = this.selecting; + const { selecting } = this; if (!selecting || selecting.length < 1) { return null; } diff --git a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts index 895084878..8b4a3bfd3 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts +++ b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts @@ -35,6 +35,7 @@ function makeEventsHandler( // 拖动缩放 export default class DragResizeEngine { private emitter: EventEmitter; + private dragResizing = false; constructor(readonly designer: Designer) { diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx index c22951c2f..c8c3ff909 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/index.tsx @@ -15,7 +15,7 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> { } render() { - const host = this.props.host; + const { host } = this.props; const { scrollX, scrollY, scale } = host.viewport; return (
diff --git a/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx b/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx index 90b65ecc8..ee1a4c007 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx @@ -7,9 +7,9 @@ import { Rect, isLocationChildrenDetail, LocationChildrenDetail, - isVertical + isVertical, } from '../../designer'; -import { ISimulatorHost, } from '../../simulator'; +import { ISimulatorHost } from '../../simulator'; import { ParentalNode } from '../../document'; import './insertion.less'; diff --git a/packages/designer/src/builtin-simulator/create-simulator.ts b/packages/designer/src/builtin-simulator/create-simulator.ts index ab20d4fa1..d517879b6 100644 --- a/packages/designer/src/builtin-simulator/create-simulator.ts +++ b/packages/designer/src/builtin-simulator/create-simulator.ts @@ -8,8 +8,8 @@ import { isAssetItem, AssetType, assetItem, -} from '@ali/lowcode-utils'; -import { isCSSUrl } from '@ali/lowcode-utils'; + isCSSUrl } from '@ali/lowcode-utils'; + import { BuiltinSimulatorRenderer } from './renderer'; export function createSimulator( @@ -65,7 +65,7 @@ export function createSimulator( const styleFrags = Object.keys(styles) .map((key) => { - return styles[key].join('\n') + ``; + return `${styles[key].join('\n') }`; }) .join(''); const scriptFrags = Object.keys(scripts) diff --git a/packages/designer/src/builtin-simulator/host-view.tsx b/packages/designer/src/builtin-simulator/host-view.tsx index 4b418ead0..9024f8d60 100644 --- a/packages/designer/src/builtin-simulator/host-view.tsx +++ b/packages/designer/src/builtin-simulator/host-view.tsx @@ -22,25 +22,29 @@ type SimulatorHostProps = BuiltinSimulatorProps & { export class BuiltinSimulatorHostView extends Component { readonly host: BuiltinSimulatorHost; + constructor(props: any) { super(props); const { documentContext } = this.props; this.host = (documentContext.simulator as BuiltinSimulatorHost) || new BuiltinSimulatorHost(documentContext); this.host.setProps(this.props); } + shouldComponentUpdate(nextProps: BuiltinSimulatorProps) { this.host.setProps(nextProps); return false; } + componentDidMount() { if (this.props.onMount) { this.props.onMount(this.host); } } + render() { return (
- {/*progressing.visible ? : null*/} + {/* progressing.visible ? : null */}
); @@ -73,7 +77,7 @@ class Canvas extends Component<{ host: BuiltinSimulatorHost }> { class Content extends Component<{ host: BuiltinSimulatorHost }> { render() { const sim = this.props.host; - const viewport = sim.viewport; + const { viewport } = sim; const frameStyle = { transform: `scale(${viewport.scale})`, height: viewport.contentHeight, diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 20e417675..cb5d82395 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -144,18 +144,21 @@ export class BuiltinSimulatorHost implements ISimulatorHost { doc.removeEventListener('mouseup', checkSelect, true); if (!isShaken(downEvent, e)) { - const id = node.id; + const { id } = node; designer.activeTracker.track({ node, instance: nodeInst?.instance }); if (isMulti && !isRootNode(node) && selection.has(id)) { selection.remove(id); @@ -411,12 +419,13 @@ export class BuiltinSimulatorHost implements ISimulatorHost void; + /** * 设置悬停处理 */ setupDetecting() { const doc = this.contentDocument!; - const detecting = this.document.designer.detecting; + const { detecting } = this.document.designer; const hover = (e: MouseEvent) => { if (!detecting.enable) { return; @@ -448,6 +457,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost(); + setInstance(id: string, instances: ComponentInstance[] | null) { if (instances == null) { this.instancesMap.delete(id); @@ -719,6 +730,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost bounds.bottom) { scroll = true; } - }*/ + } */ } else { /* const rect = this.document.computeRect(node); @@ -768,7 +780,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost width ? rect.left > right || rect.right < left : rect.left < left || rect.right > right) { opt.left = Math.min(rect.left + rect.width / 2 + sl - left - width / 2, scrollWidth - width); scroll = true; - }*/ + } */ } if (scroll && this.scroller) { @@ -783,18 +795,21 @@ export class BuiltinSimulatorHost implements ISimulatorHost(); if (isDragNodeObject(dragObject)) { - const nodes = dragObject.nodes; + const { nodes } = dragObject; let i = nodes.length; let p: any = container; while (i-- > 0) { @@ -1139,7 +1156,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost { matched = rule(target); - return matched ? true : false; + return !!matched; }); if (matched) { propTarget = matched.propTarget; @@ -147,8 +149,6 @@ export class LiveEditing { // TODO: process enter | esc events & joint the FocusTracker // TODO: upward testing for b/i/a html elements - - } get editing() { @@ -156,7 +156,9 @@ export class LiveEditing { } private _dispose?: () => void; + private _save?: () => void; + saveAndDispose() { if (this._save) { this._save(); diff --git a/packages/designer/src/builtin-simulator/node-selector/index.tsx b/packages/designer/src/builtin-simulator/node-selector/index.tsx index 554ef78e7..3062e8b5e 100644 --- a/packages/designer/src/builtin-simulator/node-selector/index.tsx +++ b/packages/designer/src/builtin-simulator/node-selector/index.tsx @@ -58,16 +58,19 @@ export default class InstanceNodeSelector extends React.Component (_: any, flag = true) => { if (node && typeof node.hover === 'function') { node.hover(flag); } }; + onMouseOut = (node: Node) => (_: any, flag = false) => { if (node && typeof node.hover === 'function') { node.hover(flag); } }; + renderNodes = (node: Node) => { const nodes = this.state.parentNodes || []; const children = nodes.map((node, key) => { diff --git a/packages/designer/src/builtin-simulator/resource-consumer.ts b/packages/designer/src/builtin-simulator/resource-consumer.ts index bf25d9068..9e5ad25bd 100644 --- a/packages/designer/src/builtin-simulator/resource-consumer.ts +++ b/packages/designer/src/builtin-simulator/resource-consumer.ts @@ -21,9 +21,11 @@ export type RendererConsumer = (renderer: BuiltinSimulatorRenderer, data: T) export default class ResourceConsumer { private emitter = new EventEmitter(); + @obx.ref private _data: T | typeof UNSET = UNSET; private _providing?: () => void; + constructor(provider: () => T, private consumer?: RendererConsumer) { this._providing = autorun(() => { this._data = provider(); @@ -31,6 +33,7 @@ export default class ResourceConsumer { } private _consuming?: () => void; + consume(consumerOrRenderer: BuiltinSimulatorRenderer | ((data: T) => any)) { if (this._consuming) { return; @@ -72,6 +75,7 @@ export default class ResourceConsumer { } private _firstConsumed = false; + private resovleFirst?: () => void; waitFirstConsume(): Promise { diff --git a/packages/designer/src/builtin-simulator/utils/parse-metadata.ts b/packages/designer/src/builtin-simulator/utils/parse-metadata.ts index 0e0078be6..d90b249d2 100644 --- a/packages/designer/src/builtin-simulator/utils/parse-metadata.ts +++ b/packages/designer/src/builtin-simulator/utils/parse-metadata.ts @@ -136,7 +136,7 @@ export function parseProps(component: any): PropConfig[] { Object.keys(propTypes).forEach(key => { const propTypeItem = propTypes[key]; const defaultValue = defaultProps[key]; - const lowcodeType = propTypeItem.lowcodeType; + const { lowcodeType } = propTypeItem; if (lowcodeType) { result[key] = { name: key, diff --git a/packages/designer/src/builtin-simulator/utils/path.ts b/packages/designer/src/builtin-simulator/utils/path.ts index c9a32e353..49f0c71af 100644 --- a/packages/designer/src/builtin-simulator/utils/path.ts +++ b/packages/designer/src/builtin-simulator/utils/path.ts @@ -158,7 +158,7 @@ export function joinPath(...segments: string[]) { if (path === '') { path += seg; } else { - path += '/' + seg; + path += `/${ seg}`; } } } diff --git a/packages/designer/src/builtin-simulator/viewport.ts b/packages/designer/src/builtin-simulator/viewport.ts index 900620377..523933cc4 100644 --- a/packages/designer/src/builtin-simulator/viewport.ts +++ b/packages/designer/src/builtin-simulator/viewport.ts @@ -4,7 +4,9 @@ import { AutoFit, IViewport } from '../simulator'; export default class Viewport implements IViewport { @obx.ref private rect?: DOMRect; + private _bounds?: DOMRect; + get bounds(): DOMRect { if (this._bounds) { return this._bounds; @@ -17,12 +19,13 @@ export default class Viewport implements IViewport { } get contentBounds(): DOMRect { - const bounds = this.bounds; - const scale = this.scale; + const { bounds } = this; + const { scale } = this; return new DOMRect(0, 0, bounds.width / scale, bounds.height / scale); } private viewportElement?: HTMLElement; + mount(viewportElement: HTMLElement | null) { if (!viewportElement || this.viewportElement === viewportElement) { return; @@ -67,7 +70,7 @@ export default class Viewport implements IViewport { } } - @obx.ref private _scale: number = 1; + @obx.ref private _scale = 1; /** * 缩放比例 @@ -87,6 +90,7 @@ export default class Viewport implements IViewport { } @obx.ref private _contentWidth: number | AutoFit = AutoFit; + @obx.ref private _contentHeight: number | AutoFit = AutoFit; @computed get contentHeight(): number | AutoFit { @@ -106,15 +110,19 @@ export default class Viewport implements IViewport { } @obx.ref private _scrollX = 0; + @obx.ref private _scrollY = 0; + get scrollX() { return this._scrollX; } + get scrollY() { return this._scrollY; } private _scrollTarget?: ScrollTarget; + /** * 滚动对象 */ @@ -123,6 +131,7 @@ export default class Viewport implements IViewport { } @obx private _scrolling = false; + get scrolling(): boolean { return this._scrolling; } diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index f871ba5de..d57f12d27 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -63,45 +63,62 @@ function buildFilter(rule?: string | string[] | RegExp | NestingFilter) { export class ComponentMeta { readonly isComponentMeta = true; + private _npm?: NpmInfo; + get npm() { return this._npm; } + private _componentName?: string; + get componentName(): string { return this._componentName!; } + private _isContainer?: boolean; + get isContainer(): boolean { return this._isContainer! || this.isRootComponent(); } + private _isModal?: boolean; + get isModal(): boolean { return this._isModal!; } + private _descriptor?: string; + get descriptor(): string | undefined { return this._descriptor; } + private _rootSelector?: string; + get rootSelector(): string | undefined { return this._rootSelector; } + private _transformedMetadata?: TransformedComponentMetadata; + get configure() { const config = this._transformedMetadata?.configure; return config?.combined || config?.props || []; } private _liveTextEditing?: LiveTextEditingConfig[]; + get liveTextEditing() { return this._liveTextEditing; } private parentWhitelist?: NestingFilter | null; + private childWhitelist?: NestingFilter | null; private _title?: TitleContent; + get title(): string | I18nData | ReactElement { // TODO: 标记下。这块需要康师傅加一下API，页面正常渲染。 // string | i18nData | ReactElement @@ -123,6 +140,7 @@ export class ComponentMeta { } private _acceptable?: boolean; + get acceptable(): boolean { return this._acceptable!; } @@ -145,7 +163,7 @@ export class ComponentMeta { // 额外转换逻辑 this._transformedMetadata = this.transformMetadata(metadata); - const title = this._transformedMetadata.title; + const { title } = this._transformedMetadata; if (title) { this._title = typeof title === 'string' @@ -182,8 +200,8 @@ export class ComponentMeta { const { component } = configure; if (component) { - this._isContainer = component.isContainer ? true : false; - this._isModal = component.isModal ? true : false; + this._isContainer = !!component.isContainer; + this._isModal = !!component.isModal; this._descriptor = component.descriptor; this._rootSelector = component.rootSelector; if (component.nestingRule) { @@ -208,7 +226,7 @@ export class ComponentMeta { return result as any; } - isRootComponent(includeBlock: boolean = true) { + isRootComponent(includeBlock = true) { return this.componentName === 'Page' || this.componentName === 'Component' || (includeBlock && this.componentName === 'Block'); } diff --git a/packages/designer/src/designer/active-tracker.ts b/packages/designer/src/designer/active-tracker.ts index 078969b65..7b9509251 100644 --- a/packages/designer/src/designer/active-tracker.ts +++ b/packages/designer/src/designer/active-tracker.ts @@ -1,6 +1,6 @@ import { EventEmitter } from 'events'; import { LocationDetail } from './location'; -import { Node, isNode } from '../document/node/node'; +import { Node, isNode } from '../document/node/node'; import { ComponentInstance } from '../simulator'; import { obx } from '@ali/lowcode-editor-core'; diff --git a/packages/designer/src/designer/builtin-hotkey.ts b/packages/designer/src/designer/builtin-hotkey.ts index 13bea87f4..451b6b308 100644 --- a/packages/designer/src/designer/builtin-hotkey.ts +++ b/packages/designer/src/designer/builtin-hotkey.ts @@ -107,7 +107,7 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => { let selected = doc.selection.getTopNodes(true); selected = selected.filter((node) => { return node.canPerformAction('copy'); - }) + }); if (!selected || selected.length < 1) { return; } @@ -242,7 +242,6 @@ hotkey.bind(['option+left', 'option+right'], (e, action) => { parent.insertAfter(firstNode, silbing); } firstNode?.select(); - return; } }); @@ -275,7 +274,6 @@ hotkey.bind(['option+up'], (e, action) => { parent.insertBefore(firstNode, silbing); } firstNode?.select(); - return; } else { const place = parent.getSuitablePlace(firstNode, null); // upwards if (place) { @@ -315,7 +313,6 @@ hotkey.bind(['option+down'], (e, action) => { parent.insertAfter(firstNode, silbing); } firstNode?.select(); - return; } else { const place = parent.getSuitablePlace(firstNode, null); // upwards if (place) { diff --git a/packages/designer/src/designer/clipboard.ts b/packages/designer/src/designer/clipboard.ts index 921117f09..dcaa21c0f 100644 --- a/packages/designer/src/designer/clipboard.ts +++ b/packages/designer/src/designer/clipboard.ts @@ -1,5 +1,5 @@ function getDataFromPasteEvent(event: ClipboardEvent) { - const clipboardData = event.clipboardData; + const { clipboardData } = event; if (!clipboardData) { return null; } @@ -14,7 +14,7 @@ function getDataFromPasteEvent(event: ClipboardEvent) { return data; } else if (data.componentName) { return { - componentsTree: [ data ] + componentsTree: [data], }; } } catch (error) { @@ -34,12 +34,13 @@ function getDataFromPasteEvent(event: ClipboardEvent) { return { code: clipboardData.getData('text/plain'), maps: {}, - };*/ + }; */ } } class Clipboard { private copyPasters: HTMLTextAreaElement[] = []; + private waitFn?: (data: any, e: ClipboardEvent) => void; isCopyPasteEvent(e: Event) { diff --git a/packages/designer/src/designer/designer-view.tsx b/packages/designer/src/designer/designer-view.tsx index fa601a994..43fb3e3a6 100644 --- a/packages/designer/src/designer/designer-view.tsx +++ b/packages/designer/src/designer/designer-view.tsx @@ -24,7 +24,7 @@ export class DesignerView extends Component { this.postEvent('selection.change', currentSelection); }); @@ -187,7 +191,7 @@ export class Designer { } this.postEvent('history.change', this.currentHistory); if (this.currentHistory) { - const currentHistory = this.currentHistory; + const { currentHistory } = this; historyDispose = currentHistory.onStateChange(() => { this.postEvent('history.change', currentHistory); }); @@ -217,6 +221,7 @@ export class Designer { get dropLocation() { return this._dropLocation; } + /** * 创建插入位置，考虑放到 dragon 中 */ @@ -246,6 +251,7 @@ export class Designer { } private oobxList: OffsetObserver[] = []; + createOffsetObserver(nodeInstance: INodeSelector): OffsetObserver | null { const oobx = createOffsetObserver(nodeInstance); this.clearOobxList(); @@ -302,6 +308,7 @@ export class Designer { } private props?: DesignerProps; + setProps(nextProps: DesignerProps) { const props = this.props ? { ...this.props, ...nextProps } : nextProps; if (this.props) { @@ -380,6 +387,7 @@ export class Designer { } @obx.val private _componentMetasMap = new Map(); + private _lostComponentMetasMap = new Map(); private buildComponentMetasMap(metas: ComponentMetadata[]) { @@ -451,6 +459,7 @@ export class Designer { } private propsReducers = new Map(); + transformProps(props: CompositeObject | PropsList, node: Node, stage: TransformStage) { if (Array.isArray(props)) { // current not support, make this future @@ -464,7 +473,7 @@ export class Designer { return reducers.reduce((xprops, reducer) => { try { - return reducer(xprops, node) + return reducer(xprops, node); } catch (e) { // todo: add log console.warn(e); diff --git a/packages/designer/src/designer/detecting.ts b/packages/designer/src/designer/detecting.ts index 11492f937..273bad503 100644 --- a/packages/designer/src/designer/detecting.ts +++ b/packages/designer/src/designer/detecting.ts @@ -3,18 +3,22 @@ import { Node, DocumentModel } from '../document'; export class Detecting { @obx.ref private _enable = true; + get enable() { return this._enable; } + set enable(flag: boolean) { this._enable = flag; if (!flag) { this._current = null; } } + @obx.ref xRayMode = false; @obx.ref private _current: Node | null = null; + get current() { return this._current; } diff --git a/packages/designer/src/designer/drag-ghost/index.tsx b/packages/designer/src/designer/drag-ghost/index.tsx index d32ee526e..d54dd9bb0 100644 --- a/packages/designer/src/designer/drag-ghost/index.tsx +++ b/packages/designer/src/designer/drag-ghost/index.tsx @@ -9,9 +9,13 @@ type offBinding = () => any; @observer export default class DragGhost extends Component<{ designer: Designer }> { private dispose: offBinding[] = []; + @obx.ref private dragObject: DragObject | null = null; + @obx.ref private x = 0; + @obx.ref private y = 0; + private dragon = this.props.designer.dragon; constructor(props: any) { @@ -48,7 +52,7 @@ export default class DragGhost extends Component<{ designer: Designer }> { } renderGhostGroup() { - const dragObject = this.dragObject; + const { dragObject } = this; if (isDragNodeObject(dragObject)) { return dragObject.nodes.map(node => { const ghost = ( diff --git a/packages/designer/src/designer/dragon.ts b/packages/designer/src/designer/dragon.ts index 60ecef509..9f40d50e0 100644 --- a/packages/designer/src/designer/dragon.ts +++ b/packages/designer/src/designer/dragon.ts @@ -191,11 +191,13 @@ export class Dragon { * current actived sensor, 可用于感应区高亮 */ @obx.ref private _activeSensor: ISensor | undefined; + get activeSensor(): ISensor | undefined { return this._activeSensor; } @obx.ref private _dragging = false; + get dragging(): boolean { return this._dragging; } @@ -238,7 +240,7 @@ export class Dragon { * @param boostEvent 拖拽初始时事件 */ boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent) { - const designer = this.designer; + const { designer } = this; const masterSensors = this.getMasterSensors(); const handleEvents = makeEventsHandler(boostEvent, masterSensors); const newBie = !isDragNodeObject(dragObject); diff --git a/packages/designer/src/designer/index.ts b/packages/designer/src/designer/index.ts index 8bcf028c9..79982c45b 100644 --- a/packages/designer/src/designer/index.ts +++ b/packages/designer/src/designer/index.ts @@ -1,4 +1,5 @@ import './builtin-hotkey'; + export * from './designer'; export * from './designer-view'; export * from './dragon'; diff --git a/packages/designer/src/designer/location.ts b/packages/designer/src/designer/location.ts index f26890357..eec210b35 100644 --- a/packages/designer/src/designer/location.ts +++ b/packages/designer/src/designer/location.ts @@ -127,9 +127,13 @@ export function getWindow(elem: Element | Document): Window { export class DropLocation { readonly target: ParentalNode; + readonly detail: LocationDetail; + readonly event: LocateEvent; + readonly source: string; + get document(): DocumentModel { return this.target.document; } diff --git a/packages/designer/src/designer/offset-observer.ts b/packages/designer/src/designer/offset-observer.ts index 4f72691af..23012c283 100644 --- a/packages/designer/src/designer/offset-observer.ts +++ b/packages/designer/src/designer/offset-observer.ts @@ -7,14 +7,23 @@ export class OffsetObserver { readonly id = uniqueId('oobx'); private lastOffsetLeft?: number; + private lastOffsetTop?: number; + private lastOffsetHeight?: number; + private lastOffsetWidth?: number; + @obx private _height = 0; + @obx private _width = 0; + @obx private _left = 0; + @obx private _top = 0; + @obx private _right = 0; + @obx private _bottom = 0; @computed get height() { @@ -42,6 +51,7 @@ export class OffsetObserver { } @obx hasOffset = false; + @computed get offsetLeft() { if (this.isRoot) { return this.viewport.scrollX * this.scale; @@ -51,6 +61,7 @@ export class OffsetObserver { } return this.lastOffsetLeft; } + @computed get offsetTop() { if (this.isRoot) { return this.viewport.scrollY * this.scale; @@ -60,12 +71,14 @@ export class OffsetObserver { } return this.lastOffsetTop; } + @computed get offsetHeight() { if (!this.viewport.scrolling || this.lastOffsetHeight == null) { this.lastOffsetHeight = this.isRoot ? this.viewport.height : this.height; } return this.lastOffsetHeight; } + @computed get offsetWidth() { if (!this.viewport.scrolling || this.lastOffsetWidth == null) { this.lastOffsetWidth = this.isRoot ? this.viewport.width : this.width; @@ -78,8 +91,11 @@ export class OffsetObserver { } private pid: number | undefined; + readonly viewport: IViewport; + private isRoot: boolean; + readonly node: Node; readonly compute: () => void; @@ -109,16 +125,14 @@ export class OffsetObserver { if (!rect) { this.hasOffset = false; - } else { - if (!this.viewport.scrolling || !this.hasOffset) { - this._height = rect.height; - this._width = rect.width; - this._left = rect.left; - this._top = rect.top; - this._right = rect.right; - this._bottom = rect.bottom; - this.hasOffset = true; - } + } else if (!this.viewport.scrolling || !this.hasOffset) { + this._height = rect.height; + this._width = rect.width; + this._left = rect.left; + this._top = rect.top; + this._right = rect.right; + this._bottom = rect.bottom; + this.hasOffset = true; } this.pid = pid = (window as any).requestIdleCallback(compute); }; diff --git a/packages/designer/src/designer/scroller.ts b/packages/designer/src/designer/scroller.ts index a7c93b91f..761db0f1d 100644 --- a/packages/designer/src/designer/scroller.ts +++ b/packages/designer/src/designer/scroller.ts @@ -4,9 +4,11 @@ export class ScrollTarget { get left() { return 'scrollX' in this.target ? this.target.scrollX : this.target.scrollLeft; } + get top() { return 'scrollY' in this.target ? this.target.scrollY : this.target.scrollTop; } + scrollTo(options: { left?: number; top?: number }) { this.target.scrollTo(options); } @@ -24,6 +26,7 @@ export class ScrollTarget { } private doe?: HTMLElement; + constructor(private target: Window | Element) { if (isWindow(target)) { this.doe = target.document.documentElement; @@ -67,14 +70,14 @@ export class Scroller { scrollTo(options: { left?: number; top?: number }) { this.cancel(); - const scrollTarget = this.scrollTarget; + const { scrollTarget } = this; if (!scrollTarget) { return; } let pid: number; - const left = scrollTarget.left; - const top = scrollTarget.top; + const { left } = scrollTarget; + const { top } = scrollTarget; const end = () => { this.cancel(); }; @@ -119,7 +122,7 @@ export class Scroller { this.cancel(); const { bounds, scale = 1 } = this.scrollable; - const scrollTarget = this.scrollTarget; + const { scrollTarget } = this; if (!scrollTarget || !bounds) { return; } diff --git a/packages/designer/src/designer/setting/setting-field.ts b/packages/designer/src/designer/setting/setting-field.ts index a70e83bb6..9ed826c06 100644 --- a/packages/designer/src/designer/setting/setting-field.ts +++ b/packages/designer/src/designer/setting/setting-field.ts @@ -19,29 +19,37 @@ function getSettingFieldCollectorKey(parent: SettingEntry, config: FieldConfig) export class SettingField extends SettingPropEntry implements SettingEntry { readonly isSettingField = true; + readonly isRequired: boolean; + readonly transducer: Transducer; + private _config: FieldConfig; + extraProps: FieldExtraProps; // ==== dynamic properties ==== private _title?: TitleContent; + get title() { // FIXME! intl return this._title || (typeof this.name === 'number' ? `项目 ${this.name}` : this.name); } + private _setter?: SetterType | DynamicSetter; + @computed get setter(): SetterType | null { if (!this._setter) { return null; } if (isDynamicSetter(this._setter)) { - return this._setter.call(this,this); + return this._setter.call(this, this); } return this._setter; } @obx.ref private _expanded = true; + get expanded(): boolean { return this._expanded; } @@ -62,7 +70,7 @@ export class SettingField extends SettingPropEntry implements SettingEntry { ...extraProps, }; this.isRequired = config.isRequired || (setter as any)?.isRequired; - this._expanded = extraProps?.defaultCollapsed ? false : true; + this._expanded = !extraProps?.defaultCollapsed; // initial items if (items && items.length > 0) { diff --git a/packages/designer/src/designer/setting/setting-prop-entry.ts b/packages/designer/src/designer/setting/setting-prop-entry.ts index 9c989411d..577997a68 100644 --- a/packages/designer/src/designer/setting/setting-prop-entry.ts +++ b/packages/designer/src/designer/setting/setting-prop-entry.ts @@ -10,24 +10,36 @@ import { EventEmitter } from 'events'; export class SettingPropEntry implements SettingEntry { // === static properties === readonly editor: IEditor; + readonly isSameComponent: boolean; + readonly isMultiple: boolean; + readonly isSingle: boolean; + readonly nodes: Node[]; + readonly componentMeta: ComponentMeta | null; + readonly designer: Designer; + readonly top: SettingEntry; + readonly isGroup: boolean; + readonly type: 'field' | 'group'; + readonly id = uniqueId('entry'); readonly emitter = new EventEmitter(); // ==== dynamic properties ==== @obx.ref private _name: string | number; + get name() { return this._name; } + @computed get path() { const path = this.parent.path.slice(); if (this.type === 'field') { @@ -133,7 +145,7 @@ export class SettingPropEntry implements SettingEntry { * 获取当前属性值 */ @computed getValue(): any { - let val: any = undefined; + let val: any; if (this.type === 'field') { val = this.parent.getPropValue(this.name); } @@ -271,6 +283,7 @@ export class SettingPropEntry implements SettingEntry { isIgnore() { return false; } + /* getConfig(configName?: K): IPropConfig[K] | IPropConfig { if (configName) { @@ -287,6 +300,7 @@ export class SettingPropEntry implements SettingEntry { } return ''; } + setVariableValue(value: string) { const v = this.getValue(); this.setValue({ @@ -295,6 +309,7 @@ export class SettingPropEntry implements SettingEntry { mock: isJSExpression(v) ? v.mock : v, }); } + setUseVariable(flag: boolean) { if (this.isUseVariable() === flag) { return; @@ -310,12 +325,15 @@ export class SettingPropEntry implements SettingEntry { }); } } + isUseVariable() { return isJSExpression(this.getValue()); } + get useVariable() { return this.isUseVariable(); } + getMockOrValue() { const v = this.getValue(); if (isJSExpression(v)) { diff --git a/packages/designer/src/designer/setting/setting-top-entry.ts b/packages/designer/src/designer/setting/setting-top-entry.ts index 19c4c0fc9..6434938ab 100644 --- a/packages/designer/src/designer/setting/setting-top-entry.ts +++ b/packages/designer/src/designer/setting/setting-top-entry.ts @@ -17,12 +17,19 @@ function generateSessionId(nodes: Node[]) { export class SettingTopEntry implements SettingEntry { private emitter = new EventEmitter(); + private _items: Array = []; + private _componentMeta: ComponentMeta | null = null; - private _isSame: boolean = true; + + private _isSame = true; + private _settingFieldMap: { [prop: string]: SettingField } = {}; + readonly path = []; + readonly top = this; + readonly parent = this; get componentMeta() { @@ -55,7 +62,9 @@ export class SettingTopEntry implements SettingEntry { } readonly id: string; + readonly first: Node; + readonly designer: Designer; constructor(readonly editor: IEditor, readonly nodes: Node[]) { @@ -75,7 +84,7 @@ export class SettingTopEntry implements SettingEntry { private setupComponentMeta() { // todo: enhance compile a temp configure.compiled - const first = this.first; + const { first } = this; const meta = first.componentMeta; const l = this.nodes.length; let theSame = true; @@ -100,7 +109,7 @@ export class SettingTopEntry implements SettingEntry { const settingFieldMap: { [prop: string]: SettingField } = {}; const settingFieldCollector = (name: string | number, field: SettingField) => { settingFieldMap[name] = field; - } + }; this._items = this.componentMeta.configure.map((item) => { if (isCustomView(item)) { return item; @@ -209,18 +218,23 @@ export class SettingTopEntry implements SettingEntry { getStatus() { } + setStatus() { } + getChildren() { // this.nodes.map() } + getDOMNode() { } + getId() { return this.id; } + getPage() { return this.first.document; } @@ -231,6 +245,7 @@ export class SettingTopEntry implements SettingEntry { get node() { return this.getNode(); } + getNode() { return this.nodes[0]; } diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index 6cb074f11..7d8c3978b 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -8,9 +8,9 @@ import { isDragNodeDataObject, DragNodeObject, DragNodeDataObject, DropLocation import { Node, insertChildren, insertChild, isNode, RootNode, ParentalNode } from './node/node'; import { Selection } from './selection'; import { History } from './history'; -import { TransformStage } from './node'; +import { TransformStage, ModalNodesManager } from './node'; import { uniqueId } from '@ali/lowcode-utils'; -import { ModalNodesManager } from './node'; + export type GetDataType = T extends undefined ? NodeType extends { @@ -34,28 +34,37 @@ export class DocumentModel { * 根节点 类型有：Page/Component/Block */ rootNode: RootNode | null; + /** * 文档编号 */ id: string = uniqueId('doc'); + /** * 选区控制 */ readonly selection: Selection = new Selection(this); + /** * 操作记录控制 */ readonly history: History; + /** * 模态节点管理 */ readonly modalNodesManager: ModalNodesManager; private _nodesMap = new Map(); + @obx.val private nodes = new Set(); + private seqId = 0; + private _simulator?: ISimulatorHost; + private emitter: EventEmitter; + private rootNodeVisitorMap: { [visitorName: string]: any } = {}; /** @@ -83,7 +92,9 @@ export class DocumentModel { } private _modalNode?: ParentalNode; + private _blank?: boolean; + get modalNode() { return this._modalNode; } @@ -93,6 +104,7 @@ export class DocumentModel { } private inited = false; + constructor(readonly project: Project, schema?: RootSchema) { /* // TODO @@ -128,9 +140,11 @@ export class DocumentModel { } @obx.val private willPurgeSpace: Node[] = []; + addWillPurge(node: Node) { this.willPurgeSpace.push(node); } + removeWillPurge(node: Node) { const i = this.willPurgeSpace.indexOf(node); if (i > -1) { @@ -150,8 +164,8 @@ export class DocumentModel { nextId() { let id; do { - id = 'node_' + (this.id.slice(-10) + (++this.seqId).toString(36)).toLocaleLowerCase(); - } while (this.nodesMap.get(id)) + id = `node_${ (this.id.slice(-10) + (++this.seqId).toString(36)).toLocaleLowerCase()}`; + } while (this.nodesMap.get(id)); return id; } @@ -278,6 +292,7 @@ export class DocumentModel { } @obx.ref private _dropLocation: DropLocation | null = null; + /** * 内部方法，请勿调用 */ @@ -356,7 +371,7 @@ export class DocumentModel { * 提供给模拟器的参数 */ @computed get simulatorProps(): object { - let simulatorProps = this.designer.simulatorProps; + let { simulatorProps } = this.designer; if (typeof simulatorProps === 'function') { simulatorProps = simulatorProps(this); } @@ -386,6 +401,7 @@ export class DocumentModel { } @obx.ref private _opened = false; + @obx.ref private _suspensed = false; /** @@ -526,8 +542,8 @@ export class DocumentModel { const data = { componentsMap: this.getComponentsMap(extraComps), componentsTree: [node], - }; - return data; + }; + return data; } getHistory(): History { @@ -576,20 +592,21 @@ export class DocumentModel { acceptRootNodeVisitor( - visitorName: string = 'default', - visitorFn: (node: RootNode) => any ) { - let visitorResult = {}; - if (!visitorName) { - /* tslint:disable no-console */ - console.warn('Invalid or empty RootNodeVisitor name.'); - } - try { - visitorResult = visitorFn.call(this, this.rootNode); - this.rootNodeVisitorMap[visitorName] = visitorResult; - } catch (e) { - console.error('RootNodeVisitor is not valid.'); - } - return visitorResult; + visitorName = 'default', + visitorFn: (node: RootNode) => any, + ) { + let visitorResult = {}; + if (!visitorName) { + /* tslint:disable no-console */ + console.warn('Invalid or empty RootNodeVisitor name.'); + } + try { + visitorResult = visitorFn.call(this, this.rootNode); + this.rootNodeVisitorMap[visitorName] = visitorResult; + } catch (e) { + console.error('RootNodeVisitor is not valid.'); + } + return visitorResult; } getRootNodeVisitor(name: string) { @@ -600,7 +617,7 @@ export class DocumentModel { const componentsMap: ComponentMap[] = []; // 组件去重 const map: any = {}; - for (let node of this._nodesMap.values()) { + for (const node of this._nodesMap.values()) { const { componentName } = node || {}; if (!map[componentName] && node?.componentMeta?.npm?.package) { map[componentName] = true; diff --git a/packages/designer/src/document/document-view.tsx b/packages/designer/src/document/document-view.tsx index 2565f34fc..e5018f486 100644 --- a/packages/designer/src/document/document-view.tsx +++ b/packages/designer/src/document/document-view.tsx @@ -9,9 +9,10 @@ export class DocumentView extends Component<{ document: DocumentModel }> { shouldComponentUpdate() { return false; } + render() { const { document } = this.props; - const simulatorProps = document.simulatorProps; + const { simulatorProps } = document; const Simulator = document.designer.simulatorComponent || BuiltinSimulatorHostView; return (
any, private redoer: (data: NodeSchema) => void, private timeGap: number = 1000) { @@ -147,7 +152,7 @@ export class History { * | modified | redoable | undoable | */ getState(): number { - const cursor = this.session.cursor; + const { cursor } = this.session; let state = 7; // undoable ? if (cursor <= 0) { @@ -190,6 +195,7 @@ export class History { class Session { private _data: any; + private activedTimer: any; get data() { diff --git a/packages/designer/src/document/node/exclusive-group.ts b/packages/designer/src/document/node/exclusive-group.ts index cd4b46030..2f5a98cb2 100644 --- a/packages/designer/src/document/node/exclusive-group.ts +++ b/packages/designer/src/document/node/exclusive-group.ts @@ -8,22 +8,29 @@ import { intl } from '../../locale'; // if-else-if assoc conditionGroup value, should be the same level, and siblings, need renderEngine support export class ExclusiveGroup { readonly isExclusiveGroup = true; + readonly id = uniqueId('exclusive'); + @obx.val readonly children: Node[] = []; @obx private visibleIndex = 0; + @computed get document() { return this.visibleNode.document; } + @computed get zLevel() { return this.visibleNode.zLevel; } + @computed get length() { return this.children.length; } + @computed get visibleNode(): Node { return this.children[this.visibleIndex]; } + @computed get firstNode(): Node { return this.children[0]!; } diff --git a/packages/designer/src/document/node/modal-nodes-manager.ts b/packages/designer/src/document/node/modal-nodes-manager.ts index 563637101..8a33e47ee 100644 --- a/packages/designer/src/document/node/modal-nodes-manager.ts +++ b/packages/designer/src/document/node/modal-nodes-manager.ts @@ -21,8 +21,11 @@ export class ModalNodesManager { public willDestroy: any; private page: DocumentModel; + private modalNodes: Node[]; + private nodeRemoveEvents: any; + private emitter: EventEmitter; constructor(page: DocumentModel) { @@ -44,8 +47,8 @@ export class ModalNodesManager { public getVisibleModalNode() { const visibleNode = this.modalNodes ? this.modalNodes.find((node: Node) => { - return node.getVisible(); - }) + return node.getVisible(); + }) : null; return visibleNode; } diff --git a/packages/designer/src/document/node/node-children.ts b/packages/designer/src/document/node/node-children.ts index f89e55008..6d28fbfb0 100644 --- a/packages/designer/src/document/node/node-children.ts +++ b/packages/designer/src/document/node/node-children.ts @@ -7,6 +7,7 @@ import { EventEmitter } from 'events'; export class NodeChildren { @obx.val private children: Node[]; + private emitter = new EventEmitter(); constructor(readonly owner: ParentalNode, data: NodeData | NodeData[]) { @@ -63,7 +64,7 @@ export class NodeChildren { /** * @deprecated - * @param nodes + * @param nodes */ concat(nodes: Node[]) { return this.children.concat(nodes); @@ -107,7 +108,7 @@ export class NodeChildren { } this.emitter.emit('change'); if (useMutator) { - this.reportModified(node, this.owner, {type: 'remove', removeIndex: i, removeNode: node}); + this.reportModified(node, this.owner, { type: 'remove', removeIndex: i, removeNode: node }); } return false; } @@ -116,7 +117,7 @@ export class NodeChildren { * 插入一个节点，返回新长度 */ insert(node: Node, at?: number | null, useMutator = true): void { - const children = this.children; + const { children } = this; let index = at == null || at === -1 ? children.length : at; const i = children.indexOf(node); @@ -159,7 +160,7 @@ export class NodeChildren { } } if (node.prevSibling && node.nextSibling) { - const conditionGroup = node.prevSibling.conditionGroup; + const { conditionGroup } = node.prevSibling; // insert at condition group if (conditionGroup && conditionGroup === node.nextSibling.conditionGroup) { node.setConditionGroup(conditionGroup); @@ -200,7 +201,7 @@ export class NodeChildren { */ [Symbol.iterator](): { next(): { value: Node } } { let index = 0; - const children = this.children; + const { children } = this; const length = children.length || 0; return { next() { @@ -291,6 +292,7 @@ export class NodeChildren { } private purged = false; + /** * 回收销毁 */ diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index c69f780d5..dbc4c9308 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -73,6 +73,7 @@ import { EventEmitter } from 'events'; */ export class Node { private emitter: EventEmitter; + /** * 是节点实例 */ @@ -94,28 +95,35 @@ export class Node { * * Slot 插槽节点，无 props，正常 children，有 slotArgs，有指令 */ readonly componentName: string; + /** * 属性抽象 */ props: Props; + protected _children?: NodeChildren; + /** * @deprecated */ private _addons: { [key: string]: { exportData: () => any; isProp: boolean; } } = {}; + @obx.ref private _parent: ParentalNode | null = null; + /** * 父级节点 */ get parent(): ParentalNode | null { return this._parent; } + /** * 当前节点子集 */ get children(): NodeChildren | null { return this._children || null; } + /** * 当前节点深度 */ @@ -162,18 +170,20 @@ export class Node { this.setupAutoruns(); } - this.settingEntry = this.document.designer.createSettingEntry([ this ]); + this.settingEntry = this.document.designer.createSettingEntry([this]); this.emitter = new EventEmitter(); } private initProps(props: any): any { return this.document.designer.transformProps(props, this, TransformStage.Init); } + private upgradeProps(props: any): any { return this.document.designer.transformProps(props, this, TransformStage.Upgrade); } private autoruns?: Array<() => void>; + private setupAutoruns() { const autoruns = this.componentMeta.getMetadata().experimental?.autoruns; if (!autoruns || autoruns.length < 1) { @@ -284,6 +294,7 @@ export class Node { } private _slotFor?: Prop | null = null; + internalSetSlotFor(slotFor: Prop | null | undefined) { this._slotFor = slotFor; } @@ -341,6 +352,7 @@ export class Node { } @obx.val _slots: Node[] = []; + @computed hasSlots() { return this._slots.length > 0; } @@ -350,6 +362,7 @@ export class Node { } @obx.ref private _conditionGroup: ExclusiveGroup | null = null; + get conditionGroup(): ExclusiveGroup | null { return this._conditionGroup; } @@ -503,7 +516,7 @@ export class Node { * 设置多个属性值，替换原有值 */ setProps(props?: PropsMap | PropsList | Props | null) { - if(props instanceof Props) { + if (props instanceof Props) { this.props = props; return; } @@ -527,7 +540,7 @@ export class Node { if (!this.parent) { return null; } - const index = this.index; + const { index } = this; if (index < 0) { return null; } @@ -541,7 +554,7 @@ export class Node { if (!this.parent) { return null; } - const index = this.index; + const { index } = this; if (index < 1) { return null; } @@ -666,6 +679,7 @@ export class Node { slotNode.internalSetParent(this as ParentalNode, true); this._slots.push(slotNode); } + /** * 当前node对应组件是否已注册可用 */ @@ -686,12 +700,14 @@ export class Node { } private purged = false; + /** * 是否已销毁 */ get isPurged() { return this.purged; } + /** * 销毁 */ @@ -727,9 +743,11 @@ export class Node { isEmpty(): boolean { return this.children ? this.children.isEmpty() : true; } + getChildren() { return this.children; } + getComponentName() { return this.componentName; } @@ -740,9 +758,11 @@ export class Node { insert(node: Node, ref?: Node, useMutator = true) { this.insertAfter(node, ref, useMutator); } + insertBefore(node: Node, ref?: Node, useMutator = true) { this.children?.insert(node, ref ? ref.index : null, useMutator); } + insertAfter(node: any, ref?: Node, useMutator = true) { if (!isNode(node)) { if (node.getComponentName) { @@ -755,21 +775,27 @@ export class Node { } this.children?.insert(node, ref ? ref.index + 1 : null, useMutator); } + getParent() { return this.parent; } + getId() { return this.id; } + getIndex() { return this.index; } + getNode() { return this; } + getRoot() { return this.document.rootNode; } + getProps() { return this.props; } @@ -798,6 +824,7 @@ export class Node { return this.status; } + /** * @deprecated */ @@ -810,6 +837,7 @@ export class Node { this.status[field] = flag; } } + /** * @deprecated */ @@ -820,6 +848,7 @@ export class Node { } return this.document.simulator?.findDOMNodes(instance)?.[0]; } + /** * @deprecated */ @@ -827,6 +856,7 @@ export class Node { console.warn('getPage is deprecated, use document instead'); return this.document; } + /** * @deprecated */ @@ -839,7 +869,7 @@ export class Node { const canDropIn = c.componentMeta?.prototype?.options?.canDropIn; if (typeof canDropIn === 'function') { return canDropIn(node); - } else if (typeof canDropIn === 'boolean'){ + } else if (typeof canDropIn === 'boolean') { return canDropIn; } return true; @@ -854,7 +884,7 @@ export class Node { if (this.isContainer()) { if (canDropIn === undefined || (typeof canDropIn === 'boolean' && canDropIn) || - (typeof canDropIn === 'function' && canDropIn(node))){ + (typeof canDropIn === 'function' && canDropIn(node))) { return { container: this, ref }; } } @@ -865,6 +895,7 @@ export class Node { return null; } + /** * @deprecated */ @@ -875,10 +906,11 @@ export class Node { } return this.getExtraProp(key)?.getValue(); } + /** * @deprecated */ - registerAddon(key: string, exportData: () => any, isProp: boolean = false) { + registerAddon(key: string, exportData: () => any, isProp = false) { // if (this._addons[key]) { // throw new Error(`node addon ${key} exist`); // } diff --git a/packages/designer/src/document/node/props/prop-stash.ts b/packages/designer/src/document/node/props/prop-stash.ts index 1c62617ef..8e92956c7 100644 --- a/packages/designer/src/document/node/props/prop-stash.ts +++ b/packages/designer/src/document/node/props/prop-stash.ts @@ -6,6 +6,7 @@ import { Node } from '../node'; export type PendingItem = Prop[]; export class PropStash implements IPropParent { @obx.val private space: Set = new Set(); + @computed private get maps(): Map { const maps = new Map(); if (this.space.size > 0) { @@ -15,7 +16,9 @@ export class PropStash implements IPropParent { } return maps; } + private willPurge: () => void; + readonly owner: Node; constructor(readonly props: Props, write: (item: Prop) => void) { diff --git a/packages/designer/src/document/node/props/prop.ts b/packages/designer/src/document/node/props/prop.ts index b27b6e60b..e21f30f9d 100644 --- a/packages/designer/src/document/node/props/prop.ts +++ b/packages/designer/src/document/node/props/prop.ts @@ -20,6 +20,7 @@ export type ValueTypes = 'unset' | 'literal' | 'map' | 'list' | 'expression' | ' export class Prop implements IPropParent { readonly isProp = true; + readonly owner: Node; /** @@ -46,6 +47,7 @@ export class Prop implements IPropParent { readonly id = uniqueId('prop$'); @obx.ref private _type: ValueTypes = 'unset'; + /** * 属性类型 */ @@ -131,6 +133,7 @@ export class Prop implements IPropParent { } private _code: string | null = null; + /** * 获得表达式值 */ @@ -241,9 +244,11 @@ export class Prop implements IPropParent { } private _slotNode?: SlotNode; + get slotNode() { return this._slotNode; } + setAsSlot(data: JSSlot) { this._type = 'slot'; const slotSchema: SlotSchema = { @@ -256,7 +261,7 @@ export class Prop implements IPropParent { if (this._slotNode) { this._slotNode.import(slotSchema); } else { - const owner = this.props.owner; + const { owner } = this.props; this._slotNode = owner.document.createNode(slotSchema); owner.addSlot(this._slotNode); this._slotNode.internalSetSlotFor(this); @@ -305,7 +310,9 @@ export class Prop implements IPropParent { } @obx.val private _items: Prop[] | null = null; + @obx.val private _maps: Map | null = null; + @computed private get items(): Prop[] | null { let _items: any; untracked(() => { @@ -340,6 +347,7 @@ export class Prop implements IPropParent { } return _items; } + @computed private get maps(): Map | null { if (!this.items) { return null; @@ -353,6 +361,7 @@ export class Prop implements IPropParent { * 键值 */ @obx key: string | number | undefined; + /** * 扩展值 */ @@ -379,7 +388,7 @@ export class Prop implements IPropParent { * 获取某个属性 * @param stash 如果不存在，临时获取一个待写入 */ - get(path: string | number, stash: boolean = true): Prop | null { + get(path: string | number, stash = true): Prop | null { const type = this._type; if (type !== 'map' && type !== 'list' && type !== 'unset' && !stash) { return null; @@ -521,7 +530,7 @@ export class Prop implements IPropParent { } items[key] = prop; } else if (this.maps) { - const maps = this.maps; + const { maps } = this; const orig = maps.get(key); if (orig) { // replace @@ -556,6 +565,7 @@ export class Prop implements IPropParent { } private purged = false; + /** * 回收销毁 */ @@ -581,7 +591,7 @@ export class Prop implements IPropParent { */ [Symbol.iterator](): { next(): { value: Prop } } { let index = 0; - const items = this.items; + const { items } = this; const length = items?.length || 0; return { next() { @@ -603,7 +613,7 @@ export class Prop implements IPropParent { * 遍历 */ forEach(fn: (item: Prop, key: number | string | undefined) => void): void { - const items = this.items; + const { items } = this; if (!items) { return; } @@ -617,7 +627,7 @@ export class Prop implements IPropParent { * 遍历 */ map(fn: (item: Prop, key: number | string | undefined) => T): T[] | null { - const items = this.items; + const { items } = this; if (!items) { return null; } diff --git a/packages/designer/src/document/node/props/props.ts b/packages/designer/src/document/node/props/props.ts index 02852816f..0e652ca4e 100644 --- a/packages/designer/src/document/node/props/props.ts +++ b/packages/designer/src/document/node/props/props.ts @@ -23,7 +23,9 @@ export function getOriginalExtraKey(key: string): string { export class Props implements IPropParent { readonly id = uniqueId('props'); + @obx.val private items: Prop[] = []; + @computed private get maps(): Map { const maps = new Map(); if (this.items.length > 0) { @@ -257,7 +259,7 @@ export class Props implements IPropParent { */ [Symbol.iterator](): { next(): { value: Prop } } { let index = 0; - const items = this.items; + const { items } = this; const length = items.length || 0; return { next() { @@ -300,6 +302,7 @@ export class Props implements IPropParent { } private purged = false; + /** * 回收销毁 */ diff --git a/packages/designer/src/document/node/props/value-to-source.ts b/packages/designer/src/document/node/props/value-to-source.ts index 40cbecd61..7cf33da2a 100644 --- a/packages/designer/src/document/node/props/value-to-source.ts +++ b/packages/designer/src/document/node/props/value-to-source.ts @@ -57,15 +57,15 @@ export function valueToSource( if (value instanceof Map) { return value.size ? `${indentString.repeat(indentLevel)}new Map(${valueToSource([...value], { - circularReferenceToken, - doubleQuote, - includeFunctions, - includeUndefinedProperties, - indentLevel, - indentString, - lineEnding, - visitedObjects: new Set([value, ...visitedObjects]), - }).substr(indentLevel * indentString.length)})` + circularReferenceToken, + doubleQuote, + includeFunctions, + includeUndefinedProperties, + indentLevel, + indentString, + lineEnding, + visitedObjects: new Set([value, ...visitedObjects]), + }).substr(indentLevel * indentString.length)})` : `${indentString.repeat(indentLevel)}new Map()`; } @@ -76,15 +76,15 @@ export function valueToSource( if (value instanceof Set) { return value.size ? `${indentString.repeat(indentLevel)}new Set(${valueToSource([...value], { - circularReferenceToken, - doubleQuote, - includeFunctions, - includeUndefinedProperties, - indentLevel, - indentString, - lineEnding, - visitedObjects: new Set([value, ...visitedObjects]), - }).substr(indentLevel * indentString.length)})` + circularReferenceToken, + doubleQuote, + includeFunctions, + includeUndefinedProperties, + indentLevel, + indentString, + lineEnding, + visitedObjects: new Set([value, ...visitedObjects]), + }).substr(indentLevel * indentString.length)})` : `${indentString.repeat(indentLevel)}new Set()`; } @@ -94,8 +94,7 @@ export function valueToSource( } const itemsStayOnTheSameLine = value.every( - item => - typeof item === 'object' && + item => typeof item === 'object' && item && !(item instanceof Date) && !(item instanceof Map) && @@ -140,33 +139,33 @@ export function valueToSource( return itemsStayOnTheSameLine ? `${indentString.repeat(indentLevel)}[${value.join(', ')}]` : `${indentString.repeat(indentLevel)}[${lineEnding}${value.join( - `,${lineEnding}`, - )}${lineEnding}${indentString.repeat(indentLevel)}]`; + `,${lineEnding}`, + )}${lineEnding}${indentString.repeat(indentLevel)}]`; } value = Object.keys(value).reduce((entries, propertyName) => { - const propertyValue = value[propertyName], - propertyValueString = + const propertyValue = value[propertyName]; + const propertyValueString = typeof propertyValue !== 'undefined' || includeUndefinedProperties ? valueToSource(value[propertyName], { - circularReferenceToken, - doubleQuote, - includeFunctions, - includeUndefinedProperties, - indentLevel: indentLevel + 1, - indentString, - lineEnding, - visitedObjects: new Set([value, ...visitedObjects]), - }) + circularReferenceToken, + doubleQuote, + includeFunctions, + includeUndefinedProperties, + indentLevel: indentLevel + 1, + indentString, + lineEnding, + visitedObjects: new Set([value, ...visitedObjects]), + }) : null; if (propertyValueString) { const quotedPropertyName = propertyNameRequiresQuotes(propertyName) - ? quoteString(propertyName, { - doubleQuote, - }) - : propertyName, - trimmedPropertyValueString = propertyValueString.substr((indentLevel + 1) * indentString.length); + ? quoteString(propertyName, { + doubleQuote, + }) + : propertyName; + const trimmedPropertyValueString = propertyValueString.substr((indentLevel + 1) * indentString.length); if (typeof propertyValue === 'function' && trimmedPropertyValueString.startsWith(`${propertyName}()`)) { entries.push( @@ -184,8 +183,8 @@ export function valueToSource( return value.length ? `${indentString.repeat(indentLevel)}{${lineEnding}${value.join( - `,${lineEnding}`, - )}${lineEnding}${indentString.repeat(indentLevel)}}` + `,${lineEnding}`, + )}${lineEnding}${indentString.repeat(indentLevel)}}` : `${indentString.repeat(indentLevel)}{}`; case 'string': return `${indentString.repeat(indentLevel)}${quoteString(value, { diff --git a/packages/designer/src/document/selection.ts b/packages/designer/src/document/selection.ts index f1741b48b..705a4b95c 100644 --- a/packages/designer/src/document/selection.ts +++ b/packages/designer/src/document/selection.ts @@ -5,7 +5,9 @@ import { DocumentModel } from './document-model'; export class Selection { private emitter = new EventEmitter(); + @obx.val private _selected: string[] = []; + /** * 选中的节点 id */ diff --git a/packages/designer/src/icons/clone.tsx b/packages/designer/src/icons/clone.tsx index 844b3f5b0..baf6342cc 100644 --- a/packages/designer/src/icons/clone.tsx +++ b/packages/designer/src/icons/clone.tsx @@ -1,9 +1,9 @@ -import { SVGIcon, IconProps } from "@ali/lowcode-utils"; +import { SVGIcon, IconProps } from '@ali/lowcode-utils'; export function IconClone(props: IconProps) { return ( - + ); } diff --git a/packages/designer/src/icons/component.tsx b/packages/designer/src/icons/component.tsx index 78a3ba1f0..6804ca16b 100644 --- a/packages/designer/src/icons/component.tsx +++ b/packages/designer/src/icons/component.tsx @@ -1,4 +1,4 @@ -import { SVGIcon, IconProps } from "@ali/lowcode-utils"; +import { SVGIcon, IconProps } from '@ali/lowcode-utils'; export function IconComponent(props: IconProps) { return ( diff --git a/packages/designer/src/icons/container.tsx b/packages/designer/src/icons/container.tsx index 5c46b3f18..b4ccfcd73 100644 --- a/packages/designer/src/icons/container.tsx +++ b/packages/designer/src/icons/container.tsx @@ -1,4 +1,4 @@ -import { SVGIcon, IconProps } from "@ali/lowcode-utils"; +import { SVGIcon, IconProps } from '@ali/lowcode-utils'; export function IconContainer(props: IconProps) { return ( diff --git a/packages/designer/src/icons/hidden.tsx b/packages/designer/src/icons/hidden.tsx index 0f944cadf..081d64e08 100644 --- a/packages/designer/src/icons/hidden.tsx +++ b/packages/designer/src/icons/hidden.tsx @@ -1,4 +1,4 @@ -import { SVGIcon, IconProps } from "@ali/lowcode-utils"; +import { SVGIcon, IconProps } from '@ali/lowcode-utils'; export function IconHidden(props: IconProps) { return ( diff --git a/packages/designer/src/icons/page.tsx b/packages/designer/src/icons/page.tsx index a957239fe..6a8780099 100644 --- a/packages/designer/src/icons/page.tsx +++ b/packages/designer/src/icons/page.tsx @@ -1,4 +1,4 @@ -import { SVGIcon, IconProps } from "@ali/lowcode-utils"; +import { SVGIcon, IconProps } from '@ali/lowcode-utils'; export function IconPage(props: IconProps) { return ( diff --git a/packages/designer/src/project/project.ts b/packages/designer/src/project/project.ts index 13cb65be0..60ea6d7ec 100644 --- a/packages/designer/src/project/project.ts +++ b/packages/designer/src/project/project.ts @@ -6,6 +6,7 @@ import { ProjectSchema, RootSchema } from '@ali/lowcode-types'; export class Project { private emitter = new EventEmitter(); + @obx.val readonly documents: DocumentModel[] = []; private data: ProjectSchema = { version: '1.0.0', componentsMap: [], componentsTree: [] }; @@ -82,15 +83,15 @@ export class Project { */ set( key: - | 'version' - | 'componentsTree' - | 'componentsMap' - | 'utils' - | 'constants' - | 'i18n' - | 'css' - | 'dataSource' - | string, + | 'version' + | 'componentsTree' + | 'componentsMap' + | 'utils' + | 'constants' + | 'i18n' + | 'css' + | 'dataSource' + | string, value: any, ): void {} @@ -99,15 +100,15 @@ export class Project { */ get( key: - | 'version' - | 'componentsTree' - | 'componentsMap' - | 'utils' - | 'constants' - | 'i18n' - | 'css' - | 'dataSource' - | string, + | 'version' + | 'componentsTree' + | 'componentsMap' + | 'utils' + | 'constants' + | 'i18n' + | 'css' + | 'dataSource' + | string, ): any {} open(doc?: string | DocumentModel | RootSchema): DocumentModel { diff --git a/packages/editor-core/build.plugin.js b/packages/editor-core/build.plugin.js index 980daf4f1..4a772200b 100644 --- a/packages/editor-core/build.plugin.js +++ b/packages/editor-core/build.plugin.js @@ -6,7 +6,7 @@ module.exports = ({ onGetWebpackConfig }) => { config.resolve .plugin('tsconfigpaths') .use(TsconfigPathsPlugin, [{ - configFile: "./tsconfig.json" + configFile: './tsconfig.json', }]); }); }; diff --git a/packages/editor-core/src/di/ioc-context.ts b/packages/editor-core/src/di/ioc-context.ts index 9be8707e6..27b854cab 100644 --- a/packages/editor-core/src/di/ioc-context.ts +++ b/packages/editor-core/src/di/ioc-context.ts @@ -1,4 +1,5 @@ import { IocContext } from 'power-di'; + export * from 'power-di'; export const globalContext = IocContext.DefaultInstance; diff --git a/packages/editor-core/src/di/setter.ts b/packages/editor-core/src/di/setter.ts index 428b0a7ea..b4d771f01 100644 --- a/packages/editor-core/src/di/setter.ts +++ b/packages/editor-core/src/di/setter.ts @@ -52,7 +52,7 @@ export function registerSetter( function getInitialFromSetter(setter: any) { return setter && ( - setter.initial || setter.Initial + setter.initial || setter.Initial || (setter.type && (setter.type.initial || setter.type.Initial)) ) || null; // eslint-disable-line } diff --git a/packages/editor-core/src/editor.ts b/packages/editor-core/src/editor.ts index 6f8c22dc0..d616712d4 100644 --- a/packages/editor-core/src/editor.ts +++ b/packages/editor-core/src/editor.ts @@ -86,7 +86,9 @@ export class Editor extends EventEmitter implements IEditor { } config?: EditorConfig; + components?: PluginClassSet; + async init(config?: EditorConfig, components?: PluginClassSet): Promise { this.config = config || {}; this.components = components || {}; @@ -152,12 +154,13 @@ export class Editor extends EventEmitter implements IEditor { }; private waits = new Map< - KeyType, - Array<{ - once?: boolean; - resolve: (data: any) => void; - }> + KeyType, + Array<{ + once?: boolean; + resolve:(data: any) => void; + }> >(); + private notifyGot(key: KeyType) { let waits = this.waits.get(key); if (!waits) { diff --git a/packages/editor-core/src/hotkey.ts b/packages/editor-core/src/hotkey.ts index f991aaeab..dd2ff308c 100644 --- a/packages/editor-core/src/hotkey.ts +++ b/packages/editor-core/src/hotkey.ts @@ -124,7 +124,7 @@ let REVERSE_MAP: CtrlKeyMap; * programatically */ for (let i = 1; i < 20; ++i) { - MAP[111 + i] = 'f' + i; + MAP[111 + i] = `f${ i}`; } /** @@ -346,22 +346,28 @@ function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string sequence, selected, }); - } catch(err) { + } catch (err) { console.error(err.message); } } export class Hotkey { private callBacks: HotkeyCallbacks = {}; + private directMap: HotkeyDirectMap = {}; + private sequenceLevels: SequenceLevels = {}; + private resetTimer = 0; + private ignoreNextKeyup: boolean | string = false; + private ignoreNextKeypress = false; + private nextExpectedAction: boolean | string = false; mount(window: Window) { - const document = window.document; + const { document } = window; const handleKeyEvent = this.handleKeyEvent.bind(this); document.addEventListener('keypress', handleKeyEvent, false); document.addEventListener('keydown', handleKeyEvent, false); diff --git a/packages/editor-core/src/intl/ali-global-locale.ts b/packages/editor-core/src/intl/ali-global-locale.ts index 1f74d719b..a8ec7911a 100644 --- a/packages/editor-core/src/intl/ali-global-locale.ts +++ b/packages/editor-core/src/intl/ali-global-locale.ts @@ -1,5 +1,6 @@ import { EventEmitter } from 'events'; import { obx, computed } from '../utils/obx'; + const languageMap: { [key: string]: string } = { en: 'en-US', zh: 'zh-CN', @@ -30,7 +31,9 @@ const LowcodeConfigKey = 'ali-lowcode-config'; class AliGlobalLocale { private emitter = new EventEmitter(); + @obx.ref private _locale?: string; + @computed get locale() { if (this._locale != null) { return this._locale; @@ -67,7 +70,7 @@ class AliGlobalLocale { const it = navigator.browserLanguage.split('-'); locale = it[0]; if (it[1]) { - locale += '-' + it[1].toUpperCase(); + locale += `-${ it[1].toUpperCase()}`; } } diff --git a/packages/editor-core/src/intl/index.ts b/packages/editor-core/src/intl/index.ts index 88974b764..e4d6b4e37 100644 --- a/packages/editor-core/src/intl/index.ts +++ b/packages/editor-core/src/intl/index.ts @@ -34,7 +34,7 @@ function injectVars(msg: string, params: any, locale: string): string { return params[key]; } return $1; - });*/ + }); */ } export function intl(data: any, params?: object): ReactNode { @@ -92,11 +92,11 @@ class IntlElement extends Component<{ data: any; params?: object }> { export function createIntl( instance: string | object, ): { - intlNode(id: string, params?: object): ReactNode; - intl(id: string, params?: object): string; - getLocale(): string; - setLocale(locale: string): void; -} { + intlNode(id: string, params?: object): ReactNode; + intl(id: string, params?: object): string; + getLocale(): string; + setLocale(locale: string): void; + } { const data = computed(() => { const locale = globalLocale.getLocale(); if (typeof instance === 'string') { diff --git a/packages/editor-core/src/utils/app-preset.ts b/packages/editor-core/src/utils/app-preset.ts index f17a81458..72ae9321a 100644 --- a/packages/editor-core/src/utils/app-preset.ts +++ b/packages/editor-core/src/utils/app-preset.ts @@ -28,7 +28,7 @@ window.__newFunc = (funContext: string): ((...args: any[]) => any) => { }; // 关闭浏览器前提醒,只有产生过交互才会生效 -window.onbeforeunload = function(e: Event): string | void { +window.onbeforeunload = function (e: Event): string | void { const ev = e || window.event; // 本地调试不生效 if (location.href.indexOf('localhost') > 0) { diff --git a/packages/editor-core/src/utils/focus-tracker.ts b/packages/editor-core/src/utils/focus-tracker.ts index 6bfaa8581..61ecb3042 100644 --- a/packages/editor-core/src/utils/focus-tracker.ts +++ b/packages/editor-core/src/utils/focus-tracker.ts @@ -4,7 +4,7 @@ export class FocusTracker { if (this.checkModalDown(e)) { return; } - const first = this.first; + const { first } = this; if (first && !first.internalCheckInRange(e)) { this.internalSuspenseItem(first); first.internalTriggerBlur(); @@ -15,23 +15,30 @@ export class FocusTracker { win.document.removeEventListener('click', checkDown, true); }; } + private actives: Focusable[] = []; + get first() { return this.actives[0]; } + private modals: Array<{ checkDown: (e: MouseEvent) => boolean; checkOpen: () => boolean }> = []; + addModal(checkDown: (e: MouseEvent) => boolean, checkOpen: () => boolean) { this.modals.push({ checkDown, checkOpen, }); } + private checkModalOpen(): boolean { return this.modals.some(item => item.checkOpen()); } + private checkModalDown(e: MouseEvent): boolean { return this.modals.some(item => item.checkDown(e)); } + execSave() { // has Modal return; if (this.checkModalOpen()) { @@ -42,16 +49,19 @@ export class FocusTracker { this.first.internalTriggerSave(); } } + execEsc() { - const first = this.first; + const { first } = this; if (first) { this.internalSuspenseItem(first); first.internalTriggerEsc(); } } + create(config: FocusableConfig) { return new Focusable(this, config); } + internalActiveItem(item: Focusable) { const first = this.actives[0]; if (first === item) { @@ -69,6 +79,7 @@ export class FocusTracker { // trigger onActive item.internalTriggerActive(); } + internalSuspenseItem(item: Focusable) { const i = this.actives.indexOf(item); if (i > -1) { @@ -89,18 +100,23 @@ export interface FocusableConfig { export class Focusable { readonly isModal: boolean; + constructor(private tracker: FocusTracker, private config: FocusableConfig) { this.isModal = config.modal == null ? false : config.modal; } + active() { this.tracker.internalActiveItem(this); } + suspense() { this.tracker.internalSuspenseItem(this); } + purge() { this.tracker.internalSuspenseItem(this); } + internalCheckInRange(e: MouseEvent) { const { range } = this.config; if (!range) { @@ -111,11 +127,13 @@ export class Focusable { } return range.contains(e.target as HTMLElement); } + internalTriggerBlur() { if (this.config.onBlur) { this.config.onBlur(); } } + internalTriggerSave() { if (this.config.onSave) { this.config.onSave(); @@ -123,11 +141,13 @@ export class Focusable { } return false; } + internalTriggerEsc() { if (this.config.onEsc) { this.config.onEsc(); } } + internalTriggerActive() { if (this.config.onActive) { this.config.onActive(); diff --git a/packages/editor-core/src/utils/obx.ts b/packages/editor-core/src/utils/obx.ts index 3ab051f08..627a7e273 100644 --- a/packages/editor-core/src/utils/obx.ts +++ b/packages/editor-core/src/utils/obx.ts @@ -1,4 +1,5 @@ -export * from '@recore/obx'; import { observer } from '@recore/obx-react'; +export * from '@recore/obx'; + export { observer }; diff --git a/packages/editor-core/src/utils/request.ts b/packages/editor-core/src/utils/request.ts index 24cde7293..e7f4c41cf 100644 --- a/packages/editor-core/src/utils/request.ts +++ b/packages/editor-core/src/utils/request.ts @@ -1,4 +1,5 @@ import Debug from 'debug'; + const debug = Debug('request'); export function serialize(obj?: object): string { @@ -49,7 +50,7 @@ export function post(dataAPI: string, params?: object, headers?: object, otherPr export function request( dataAPI: string, - method: string = 'GET', + method = 'GET', data?: object | string, headers?: object, otherProps?: any, diff --git a/packages/editor-core/src/widgets/tip/tip-handler.ts b/packages/editor-core/src/widgets/tip/tip-handler.ts index d528a52af..c0a806888 100644 --- a/packages/editor-core/src/widgets/tip/tip-handler.ts +++ b/packages/editor-core/src/widgets/tip/tip-handler.ts @@ -7,8 +7,11 @@ export interface TipOptions extends TipConfig { class TipHandler { tip: TipOptions | null = null; + private showDelay: number | null = null; + private hideDelay: number | null = null; + private emitter = new EventEmitter(); setTarget(target: HTMLElement) { @@ -107,7 +110,7 @@ function findTip(target: HTMLElement | null): TipOptions | null { while (child) { if (child.dataset && child.dataset.role === 'tip') { - const tipId = child.dataset.tipId; + const { tipId } = child.dataset; if (!tipId) { return null; } diff --git a/packages/editor-core/src/widgets/tip/tip-item.tsx b/packages/editor-core/src/widgets/tip/tip-item.tsx index 20ec87bea..58aed12b4 100644 --- a/packages/editor-core/src/widgets/tip/tip-item.tsx +++ b/packages/editor-core/src/widgets/tip/tip-item.tsx @@ -7,6 +7,7 @@ import { tipHandler } from './tip-handler'; export class TipItem extends Component { private dispose?: () => void; + constructor(props: any) { super(props); this.dispose = tipHandler.onChange(() => this.forceUpdate()); @@ -32,6 +33,7 @@ export class TipItem extends Component { } private timer: number | null = null; + clearTimer() { if (this.timer) { clearTimeout(this.timer); @@ -40,13 +42,14 @@ export class TipItem extends Component { } private shell: HTMLDivElement | null = null; - private originClassName: string = ''; + + private originClassName = ''; updateTip() { if (!this.shell) { return; } - const shell = this.shell; + const { shell } = this; const arrow = shell.querySelector('.lc-arrow') as HTMLElement; // reset @@ -55,7 +58,7 @@ export class TipItem extends Component { arrow.style.cssText = ''; this.clearTimer(); - const tip = tipHandler.tip; + const { tip } = tipHandler; if (!tip) { return; } diff --git a/packages/editor-core/src/widgets/title/index.tsx b/packages/editor-core/src/widgets/title/index.tsx index 1006935ed..05bf10773 100644 --- a/packages/editor-core/src/widgets/title/index.tsx +++ b/packages/editor-core/src/widgets/title/index.tsx @@ -11,6 +11,7 @@ export class Title extends Component<{ title: TitleContent; className?: string; super(props); this.handleClick = this.handleClick.bind(this); } + handleClick(e: React.MouseEvent) { const { title, onClick } = this.props as any; const url = title && (title.docUrl || title.url); @@ -22,6 +23,7 @@ export class Title extends Component<{ title: TitleContent; className?: string; // TODO: 操作交互冲突，目前 mixedSetter 仅有 2 个 setter 注册时用到了 onClick onClick && onClick(e); } + render() { let { title, className } = this.props; if (title == null) { @@ -53,7 +55,7 @@ export class Title extends Component<{ title: TitleContent; className?: string; diff --git a/packages/editor-preset-general/build.plugin.js b/packages/editor-preset-general/build.plugin.js index 1e9165eaf..ba3096f14 100644 --- a/packages/editor-preset-general/build.plugin.js +++ b/packages/editor-preset-general/build.plugin.js @@ -5,7 +5,7 @@ module.exports = ({ onGetWebpackConfig }) => { config.resolve .plugin('tsconfigpaths') .use(TsconfigPathsPlugin, [{ - configFile: "./tsconfig.json" + configFile: './tsconfig.json', }]); /* diff --git a/packages/editor-preset-general/src/index.ts b/packages/editor-preset-general/src/index.ts index 25de7f209..2606eb6a6 100644 --- a/packages/editor-preset-general/src/index.ts +++ b/packages/editor-preset-general/src/index.ts @@ -22,7 +22,7 @@ editor.set(Skeleton, skeleton); editor.set('skeleton', skeleton); registerDefaults(); -export const designer = new Designer({ editor: editor }); +export const designer = new Designer({ editor }); editor.set(Designer, designer); editor.set('designer', designer); diff --git a/packages/editor-preset-general/src/live-editing.ts b/packages/editor-preset-general/src/live-editing.ts index de812d71e..4f428c707 100644 --- a/packages/editor-preset-general/src/live-editing.ts +++ b/packages/editor-preset-general/src/live-editing.ts @@ -29,7 +29,7 @@ export function liveEditingRule(target: EditingTarget) { return null; } - const innerText = targetElement.innerText; + const { innerText } = targetElement; const propTarget = ['title', 'label', 'text', 'content', 'children'].find(prop => { return equalText(getText(node, prop), innerText); }); @@ -48,7 +48,7 @@ function equalText(v: any, innerText: string) { if (typeof v !== 'string') { return false; } - return v.trim() === innerText + return v.trim() === innerText; } export const liveEditingSaveHander: SaveHandler = { @@ -72,8 +72,8 @@ export const liveEditingSaveHander: SaveHandler = { } else { prop.setValue(data); } - } -} + }, +}; // TODO: // 非文本编辑 // 国际化数据，改变当前 diff --git a/packages/editor-preset-vision/build.plugin.js b/packages/editor-preset-vision/build.plugin.js index 1e9165eaf..ba3096f14 100644 --- a/packages/editor-preset-vision/build.plugin.js +++ b/packages/editor-preset-vision/build.plugin.js @@ -5,7 +5,7 @@ module.exports = ({ onGetWebpackConfig }) => { config.resolve .plugin('tsconfigpaths') .use(TsconfigPathsPlugin, [{ - configFile: "./tsconfig.json" + configFile: './tsconfig.json', }]); /* diff --git a/packages/editor-preset-vision/src/base/base.ts b/packages/editor-preset-vision/src/base/base.ts index a19c1252a..3c3616a91 100644 --- a/packages/editor-preset-vision/src/base/base.ts +++ b/packages/editor-preset-vision/src/base/base.ts @@ -81,10 +81,13 @@ export function connectGeneralManagerList(managerList: any[], sourceManagerList: export class BaseManager implements INameable, IObservable { static EVENTS: IEventNameMap = {}; + static NAME = 'BaseManager'; private name: string; + private id: string; + private emitter: any; constructor(managerConfigs: IManagerConfigs = {}) { diff --git a/packages/editor-preset-vision/src/base/schemaManager.ts b/packages/editor-preset-vision/src/base/schemaManager.ts index 00ef16561..7a0a90867 100644 --- a/packages/editor-preset-vision/src/base/schemaManager.ts +++ b/packages/editor-preset-vision/src/base/schemaManager.ts @@ -11,7 +11,9 @@ import VisualManager from './visualManager'; export default class SchemaManager extends BaseManager implements IManagerController, ISchemaController { private schemaData: object = {}; + private visualManagerList: VisualManager[] = []; + private schemaManagerList: SchemaManager[] = []; getManager(): VisualManager { diff --git a/packages/editor-preset-vision/src/base/visualDesigner.ts b/packages/editor-preset-vision/src/base/visualDesigner.ts index a69018aba..a210b6737 100644 --- a/packages/editor-preset-vision/src/base/visualDesigner.ts +++ b/packages/editor-preset-vision/src/base/visualDesigner.ts @@ -22,16 +22,22 @@ interface IDesignerProps { export default class VisualDesigner extends Component implements IManagerController, IObservable, INameable { static NAME = 'VisualDesigner'; + static EVENTS: IEventNameMap = {}; + props: IDesignerProps = {}; + defaultProps: IDesignerProps = { name: 'defaultDesigner', visualManagers: [], }; private visualManagerList: VisualManager[] = []; + private name = ''; + private id = ''; + private emitter: IEmitter; constructor(props: IDesignerProps) { diff --git a/packages/editor-preset-vision/src/base/visualManager.ts b/packages/editor-preset-vision/src/base/visualManager.ts index e28b6b519..737120f20 100644 --- a/packages/editor-preset-vision/src/base/visualManager.ts +++ b/packages/editor-preset-vision/src/base/visualManager.ts @@ -11,6 +11,7 @@ import VisualDesigner from './visualDesigner'; export default class VisualManager extends BaseManager implements IManagerController, IDesignerController { private visualManagerList: VisualManager[] = []; + private visualDesignerList: VisualDesigner[] = []; getManager(): VisualManager { diff --git a/packages/editor-preset-vision/src/bundle/bundle.ts b/packages/editor-preset-vision/src/bundle/bundle.ts index 0c49bc098..841300df0 100644 --- a/packages/editor-preset-vision/src/bundle/bundle.ts +++ b/packages/editor-preset-vision/src/bundle/bundle.ts @@ -35,17 +35,25 @@ export interface ComponentViewBundle { export default class Bundle { static createPrototype = Prototype.create; + static addGlobalPropsReducer = Prototype.addGlobalPropsReducer; + static addGlobalPropsConfigure = Prototype.addGlobalPropsConfigure; + static addGlobalExtraActions = Prototype.addGlobalExtraActions; + static removeGlobalPropsConfigure = Prototype.removeGlobalPropsConfigure; + static overridePropsConfigure = Prototype.overridePropsConfigure; + static create(protos: ComponentProtoBundle[], views?: ComponentViewBundle[]) { return new Bundle(protos, views); } private viewsMap: { [componentName: string]: ComponentType } = {}; + private registry: { [componentName: string]: Prototype } = {}; + private prototypeList: Prototype[] = []; constructor(protos?: ComponentProtoBundle[], views?: ComponentViewBundle[]) { diff --git a/packages/editor-preset-vision/src/bundle/prototype.ts b/packages/editor-preset-vision/src/bundle/prototype.ts index a031cb9db..8b318fc2f 100644 --- a/packages/editor-preset-vision/src/bundle/prototype.ts +++ b/packages/editor-preset-vision/src/bundle/prototype.ts @@ -208,27 +208,37 @@ function isNewSpec(options: any): options is ComponentMetadata { class Prototype { static addGlobalPropsReducer = addGlobalPropsReducer; + static addGlobalPropsConfigure = addGlobalPropsConfigure; + static addGlobalExtraActions = addGlobalExtraActions; + static removeGlobalPropsConfigure = removeGlobalPropsConfigure; + static overridePropsConfigure = overridePropsConfigure; - static create(config: OldPrototypeConfig | ComponentMetadata | ComponentMeta, extraConfigs: any = null, lookup: boolean = false) { + + static create(config: OldPrototypeConfig | ComponentMetadata | ComponentMeta, extraConfigs: any = null, lookup = false) { return new Prototype(config, extraConfigs, lookup); } readonly isPrototype = true; + readonly meta: ComponentMeta; + readonly options: OldPrototypeConfig | ComponentMetadata; + get componentName() { return this.getId(); } + get packageName() { return this.meta.npm?.package; } + // 兼容原 vision 用法 view: ComponentType | undefined; - constructor(input: OldPrototypeConfig | ComponentMetadata | ComponentMeta, extraConfigs: any = null, lookup: boolean = false) { + constructor(input: OldPrototypeConfig | ComponentMetadata | ComponentMeta, extraConfigs: any = null, lookup = false) { if (lookup) { this.meta = designer.getComponentMeta(input.componentName); this.options = this.meta.getMetadata(); @@ -282,6 +292,7 @@ class Prototype { } private category?: string; + getCategory() { if (this.options.category != null) { return this.options.category; diff --git a/packages/editor-preset-vision/src/bundle/trunk.ts b/packages/editor-preset-vision/src/bundle/trunk.ts index e452a8b6e..5144275ad 100644 --- a/packages/editor-preset-vision/src/bundle/trunk.ts +++ b/packages/editor-preset-vision/src/bundle/trunk.ts @@ -8,8 +8,11 @@ import Prototype from './prototype'; export class Trunk { private trunk: any[] = []; + private emitter: EventEmitter = new EventEmitter(); + private metaBundle = new Bundle(); + private componentPrototypeMocker: any; isReady() { @@ -123,7 +126,7 @@ export class Trunk { console.warn('Trunk.setPackages is deprecated'); } - getSetter(type: string): any{ + getSetter(type: string): any { const setter = getSetter(type); if (setter?.component) { return setter.component; diff --git a/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts b/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts index c03b7f82e..b0931d6ca 100644 --- a/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts +++ b/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts @@ -308,7 +308,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec autorun: (field: Field) => { let fieldValue = untracked(() => field.getValue()); if (accessor) { - fieldValue = accessor.call(field, fieldValue) + fieldValue = accessor.call(field, fieldValue); } if (sync) { fieldValue = sync.call(field, fieldValue); @@ -318,7 +318,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec } else { field.setValue(fieldValue); } - } + }, }); } @@ -366,8 +366,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec let disabledValue: boolean; if (typeof disabled === 'function') { disabledValue = disabled.call(field, currentValue) === true; - } - else { + } else { disabledValue = disabled === true; } if (disabledValue) { @@ -377,7 +376,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec return ignore.call(field, currentValue) !== true; } return ignore !== true; - } + }, }); } @@ -437,8 +436,7 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec autorun: item.autorun, }); }, - }, - ) + }) : []; newConfig.items = objItems; @@ -475,8 +473,8 @@ export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollec componentName: setter, condition: condition ? (field: Field) => { - return condition.call(field, field.getValue()); - } + return condition.call(field, field.getValue()); + } : null, }; }); @@ -520,11 +518,11 @@ type ConfigCollector = { addInitial: AddInitial; addFilter: AddFilter; addAutorun: AddAutorun; -} +}; function getInitialFromSetter(setter: any) { return setter && ( - setter.initial || setter.Initial + setter.initial || setter.Initial || (setter.type && (setter.type.initial || setter.type.Initial)) ) || null; // eslint-disable-line } @@ -719,8 +717,8 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) { experimental.initialChildren = typeof initialChildren === 'function' ? (node: any) => { - return initialChildren.call(node, node.settingEntry); - } + return initialChildren.call(node, node.settingEntry); + } : initialChildren; } if (view) { @@ -796,9 +794,8 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) { }, addAutorun: (item) => { autoruns.push(item); - } - } - ); + }, + }); experimental.initials = initials; experimental.filters = filters; experimental.autoruns = autoruns; diff --git a/packages/editor-preset-vision/src/components/index.tsx b/packages/editor-preset-vision/src/components/index.tsx index f32681dd0..77e24d70b 100644 --- a/packages/editor-preset-vision/src/components/index.tsx +++ b/packages/editor-preset-vision/src/components/index.tsx @@ -48,16 +48,19 @@ export class InstanceNodeSelector extends React.Component { node.select(); } }; + onMouseOver = (node: Node) => (_: any, flag = true) => { if (node && typeof node.hover === 'function') { node.hover(flag); } }; + onMouseOut = (node: Node) => (_: any, flag = false) => { if (node && typeof node.hover === 'function') { node.hover(flag); } }; + renderNodes = (node: Node) => { const nodes = this.state.parentNodes || []; const children = nodes.map((node, key) => { diff --git a/packages/editor-preset-vision/src/context.ts b/packages/editor-preset-vision/src/context.ts index 47a6917a4..d9171c07b 100644 --- a/packages/editor-preset-vision/src/context.ts +++ b/packages/editor-preset-vision/src/context.ts @@ -15,7 +15,9 @@ export type SetterProvider = (prop: any, componentPrototype: Prototype) => Compo export class VisualEngineContext { private managerMap: { [name: string]: VisualManager } = {}; + private moduleMap: { [name: string]: any } = {}; + private pluginsMap: { [name: string]: any } = {}; use(pluginName: string, plugin: any) { @@ -43,7 +45,9 @@ export class VisualEngineContext { } registerManager(managerMap?: { [name: string]: VisualManager }): this; + registerManager(name: string, manager: VisualManager): this; + registerManager(name?: any, manager?: VisualManager): this { if (name && typeof name === 'object') { this.managerMap = assign(this.managerMap, name); @@ -54,7 +58,9 @@ export class VisualEngineContext { } registerModule(moduleMap: { [name: string]: any }): this; + registerModule(name: string, module: any): this; + registerModule(name?: any, module?: any): this { if (typeof name === 'object') { this.moduleMap = Object.assign({}, this.moduleMap, name); diff --git a/packages/editor-preset-vision/src/drag-engine.ts b/packages/editor-preset-vision/src/drag-engine.ts index c1844c38a..303e56434 100644 --- a/packages/editor-preset-vision/src/drag-engine.ts +++ b/packages/editor-preset-vision/src/drag-engine.ts @@ -2,7 +2,7 @@ import { designer } from './editor'; import { DragObjectType, isNode, isDragNodeDataObject } from '@ali/lowcode-designer'; import { isPrototype } from './bundle/prototype'; -const dragon = designer.dragon; +const { dragon } = designer; const DragEngine = { from(shell: Element, boost: (e: MouseEvent) => any): any { return dragon.from(shell, (e) => { diff --git a/packages/editor-preset-vision/src/editor.ts b/packages/editor-preset-vision/src/editor.ts index a2da42e50..a255ded50 100644 --- a/packages/editor-preset-vision/src/editor.ts +++ b/packages/editor-preset-vision/src/editor.ts @@ -22,7 +22,7 @@ editor.set(Skeleton, skeleton); editor.set('skeleton', skeleton); registerDefaults(); -export const designer = new Designer({ editor: editor }); +export const designer = new Designer({ editor }); editor.set(Designer, designer); editor.set('designer', designer); @@ -149,7 +149,7 @@ designer.addPropsReducer((props: any, node: Node) => { return { ...props, lifeCycles: {}, - } + }; } return props; }, TransformStage.Render); @@ -230,8 +230,8 @@ designer.addPropsReducer((props: any, node: Node) => { // 设计器组件样式处理 function stylePropsReducer(props: any, node: any) { if (props && typeof props === 'object' && props.__style__) { - const cssId = '_style_pesudo_' + node.id.replace(/\$/g, '_'); - const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_'); + const cssId = `_style_pesudo_${ node.id.replace(/\$/g, '_')}`; + const cssClass = `_css_pesudo_${ node.id.replace(/\$/g, '_')}`; const styleProp = props.__style__; appendStyleNode(props, styleProp, cssClass, cssId); } @@ -242,8 +242,8 @@ function stylePropsReducer(props: any, node: any) { appendStyleNode(props, styleProp, cssClass, cssId); } if (props && typeof props === 'object' && props.containerStyle) { - const cssId = '_style_pesudo_' + node.id; - const cssClass = '_css_pesudo_' + node.id.replace(/\$/g, '_'); + const cssId = `_style_pesudo_${ node.id}`; + const cssClass = `_css_pesudo_${ node.id.replace(/\$/g, '_')}`; const styleProp = props.containerStyle; appendStyleNode(props, styleProp, cssClass, cssId); } @@ -271,7 +271,7 @@ function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: st s.appendChild(doc.createTextNode(styleProp.replace(/(\d+)rpx/g, (a, b) => { return `${b / 2}px`; - }).replace(/:root/g, '.' + cssClass))); + }).replace(/:root/g, `.${ cssClass}`))); } } designer.addPropsReducer(stylePropsReducer, TransformStage.Render); diff --git a/packages/editor-preset-vision/src/env.ts b/packages/editor-preset-vision/src/env.ts index 8c7eae39b..4e267ee24 100644 --- a/packages/editor-preset-vision/src/env.ts +++ b/packages/editor-preset-vision/src/env.ts @@ -10,6 +10,7 @@ export class Env { @obx.val envs: ILiteralObject = {}; private emitter: EventEmitter; + private featureMap: ILiteralObject; constructor() { diff --git a/packages/editor-preset-vision/src/exchange.ts b/packages/editor-preset-vision/src/exchange.ts index 6e1f8c13e..350ccb5fe 100644 --- a/packages/editor-preset-vision/src/exchange.ts +++ b/packages/editor-preset-vision/src/exchange.ts @@ -20,5 +20,5 @@ export default { return () => { // this.emitter.removeListener('intoview', func); }; - } -} + }, +}; diff --git a/packages/editor-preset-vision/src/fields/field.tsx b/packages/editor-preset-vision/src/fields/field.tsx index 3fc13ea7e..ede347595 100644 --- a/packages/editor-preset-vision/src/fields/field.tsx +++ b/packages/editor-preset-vision/src/fields/field.tsx @@ -10,7 +10,7 @@ interface IHelpTip { } function splitWord(title: string): JSX.Element[] { - return (title || '').split('').map((w, i) => {w}); + return (title || '').split('').map((w, i) => {w}); } function getFieldTitle(title: string, tip: IHelpTip, compact?: boolean, propName?: string): JSX.Element { @@ -49,12 +49,12 @@ function getFieldTitle(title: string, tip: IHelpTip, compact?: boolean, propName return ( {titleContent || (typeof title === 'object' ? '' : title)} - {tipContent} + {tipContent} ); } @@ -92,6 +92,7 @@ export default class VEField extends Component { public static displayName = 'VEField'; public readonly props: IVEFieldProps; + public classNames: string[] = []; public state: IVEFieldState = { @@ -133,15 +134,15 @@ export default class VEField extends Component { } const headContent = headDIY ? this.renderHead() - :
{this.renderHead()}
; + :
{this.renderHead()}
; return ( -
+
{headContent} -
+
{this.renderBody()}
-
+
{this.renderFoot()}
diff --git a/packages/editor-preset-vision/src/fields/fields.tsx b/packages/editor-preset-vision/src/fields/fields.tsx index e106fe7f7..8f9d645c9 100644 --- a/packages/editor-preset-vision/src/fields/fields.tsx +++ b/packages/editor-preset-vision/src/fields/fields.tsx @@ -50,7 +50,7 @@ export class PlainField extends VEField { headDIY: true, }; - public static displayName: string = 'PlainField'; + public static displayName = 'PlainField'; public renderHead(): null { return null; @@ -59,6 +59,7 @@ export class PlainField extends VEField { export class InlineField extends VEField { public static displayName = 'InlineField'; + constructor(props: any) { super(props); this.classNames = ['engine-setting-field', 'engine-inline-field']; @@ -194,15 +195,14 @@ export class PopupField extends VEField { return (
- popups.popup({ - cancelOnBlur: true, - content: this.props.children, - position: 'left bottom', - showClose: true, - sizeFixed: true, - target: e.currentTarget, - }) + onClick={(e) => popups.popup({ + cancelOnBlur: true, + content: this.props.children, + position: 'left bottom', + showClose: true, + sizeFixed: true, + target: e.currentTarget, + }) } > {title} @@ -240,8 +240,11 @@ export class Stage extends Component { }; public stage: any; + public additionClassName: string; + public shell: Element | null = null; + private willDetach: () => any; public componentWillMount() { @@ -294,7 +297,7 @@ export class Stage extends Component { } public render() { - const stage = this.stage; + const { stage } = this; let content = null; let tabs = null; diff --git a/packages/editor-preset-vision/src/fields/inlinetip.tsx b/packages/editor-preset-vision/src/fields/inlinetip.tsx index f3344b1c3..6ba0ec658 100644 --- a/packages/editor-preset-vision/src/fields/inlinetip.tsx +++ b/packages/editor-preset-vision/src/fields/inlinetip.tsx @@ -19,7 +19,7 @@ export default class InlineTip extends Component { return (
diff --git a/packages/editor-preset-vision/src/fields/settingField.tsx b/packages/editor-preset-vision/src/fields/settingField.tsx index 4edd0c52d..3da6b8cff 100644 --- a/packages/editor-preset-vision/src/fields/settingField.tsx +++ b/packages/editor-preset-vision/src/fields/settingField.tsx @@ -7,8 +7,8 @@ import { EntryField, InlineField, PlainField, - PopupField -} from "./fields"; + PopupField, +} from './fields'; import { ComponentClass, Component, isValidElement, createElement } from 'react'; import { createSetterContent, getSetter } from '@ali/lowcode-editor-core'; @@ -37,7 +37,7 @@ const FIELD_TYPE_MAP: any = { inline: InlineField, plain: PlainField, popup: PopupField, - tab: AccordionField + tab: AccordionField, }; export class SettingField extends Component { @@ -67,7 +67,7 @@ export class SettingField extends Component { const { prop, selected, addonProps } = this.props; const display = this.props.forceDisplay || prop.getDisplay(); - if (display === "none") { + if (display === 'none') { return null; } @@ -82,7 +82,7 @@ export class SettingField extends Component { prop, setUseVariable: () => prop.setUseVariable(!prop.isUseVariable()), tip: prop.getTip(), - title: prop.getTitle() + title: prop.getTitle(), }; // 部分 Field 所需要的额外 fieldProps @@ -90,7 +90,7 @@ export class SettingField extends Component { const ctx = context; const plugin = ctx.getPlugin(VE_HOOKS.VE_SETTING_FIELD_PROVIDER); let Field; - if (typeof plugin === "function") { + if (typeof plugin === 'function') { Field = plugin(display, FIELD_TYPE_MAP, prop); } if (!Field) { @@ -98,7 +98,7 @@ export class SettingField extends Component { } this._prepareProps(display, extraProps); - if (display === "entry") { + if (display === 'entry') { return ; } @@ -110,7 +110,7 @@ export class SettingField extends Component { const fieldProps = { ...standardProps, ...extraProps }; if (prop.isUseVariable() && !this.variableSetter.isPopup) { - props.placeholder = "请输入表达式: ${var}"; + props.placeholder = '请输入表达式: ${var}'; props.key = `${prop.getId()}-variable`; setter = createElement(this.variableSetter, props); return {setter}; @@ -128,20 +128,20 @@ export class SettingField extends Component { setter = prop.getSetter(); if ( - typeof setter === "object" && - "componentName" in setter && + typeof setter === 'object' && + 'componentName' in setter && !(isValidElement(setter) || isReactClass(setter)) ) { const { componentName: setterType, props: setterProps } = setter as any; setter = createSetterContent(setterType, { ...addonProps, ...setterProps, - ...props + ...props, }); } else { setter = createSetterContent(setter, { ...addonProps, - ...props + ...props, }); } @@ -150,22 +150,22 @@ export class SettingField extends Component { private supportMultiSetter() { const { prop } = this.props; - const setter = prop && prop.getConfig && prop.getConfig("setter"); + const setter = prop && prop.getConfig && prop.getConfig('setter'); return prop.isSupportVariable() || Array.isArray(setter); } private _prepareProps(displayType: string, extraProps: IExtraProps): void { const { prop } = this.props; extraProps.propName = prop.isGroup() - ? "组合属性，无属性名称" + ? '组合属性，无属性名称' : prop.getName(); switch (displayType) { - case "title": + case 'title': break; - case "block": + case 'block': Object.assign(extraProps, { isGroup: prop.isGroup() }); break; - case "accordion": + case 'accordion': Object.assign(extraProps, { headDIY: true, isExpand: prop.isExpand(), @@ -173,10 +173,10 @@ export class SettingField extends Component { onExpandChange: () => prop.onExpandChange(() => this.forceUpdate()), toggleExpand: () => { prop.toggleExpand(); - } + }, }); break; - case "entry": + case 'entry': Object.assign(extraProps, { stageName: prop.getName() }); break; default: diff --git a/packages/editor-preset-vision/src/fields/variableSetter.tsx b/packages/editor-preset-vision/src/fields/variableSetter.tsx index 51643bd16..87842967e 100644 --- a/packages/editor-preset-vision/src/fields/variableSetter.tsx +++ b/packages/editor-preset-vision/src/fields/variableSetter.tsx @@ -22,13 +22,14 @@ class Input extends Component { } private domRef: HTMLTextAreaElement | null = null; + public adjustTextAreaHeight() { if (!this.domRef) { return; } this.domRef.style.height = '1px'; const calculatedHeight = this.domRef.scrollHeight; - this.domRef.style.height = calculatedHeight >= 200 ? '200px' : calculatedHeight + 'px'; + this.domRef.style.height = calculatedHeight >= 200 ? '200px' : `${calculatedHeight }px`; } public render() { @@ -50,7 +51,7 @@ class Input extends Component { onBlur={() => this.setState({ focused: false })} onFocus={() => this.setState({ focused: true })} onKeyUp={this.adjustTextAreaHeight.bind(this)} - > + />
); } @@ -73,7 +74,7 @@ export default class VariableSetter extends Component<{ } public render() { - const prop = this.props.prop; + const { prop } = this.props; return ( { private ref: HTMLElement | null = null; + private VariableSetter: any; constructor(props: IVEFieldProps) { @@ -34,9 +35,9 @@ export default class VariableSwitcher extends Component { return (
{ @@ -48,7 +49,8 @@ export default class VariableSwitcher extends Component { } else { prop.setUseVariable(!isUseVariable); } - }}> + }} + > 绑定变量
diff --git a/packages/editor-preset-vision/src/flags.ts b/packages/editor-preset-vision/src/flags.ts index 5e6174ff0..5c5aefec3 100644 --- a/packages/editor-preset-vision/src/flags.ts +++ b/packages/editor-preset-vision/src/flags.ts @@ -5,11 +5,14 @@ import { EventEmitter } from 'events'; const Shells = ['iphone6']; export class Flags { - public emitter: EventEmitter; + public flags: string[]; + public ready: boolean; + public lastFlags: string[]; + public lastShell: string; private lastSimulatorDevice: string; diff --git a/packages/editor-preset-vision/src/i18n-util/index.js b/packages/editor-preset-vision/src/i18n-util/index.js index 06bd973ac..f5d6d2cba 100644 --- a/packages/editor-preset-vision/src/i18n-util/index.js +++ b/packages/editor-preset-vision/src/i18n-util/index.js @@ -20,7 +20,7 @@ class DocItem { type: 'i18n', ...strings, }); - this.emitter = new EventEmitter; + this.emitter = new EventEmitter(); this.inited = unInitial !== true; } @@ -69,7 +69,7 @@ class DocItem { class I18nUtil { constructor() { - this.emitter = new EventEmitter; + this.emitter = new EventEmitter(); // original data source from remote this.i18nData = {}; // current i18n records on the left pane diff --git a/packages/editor-preset-vision/src/index.ts b/packages/editor-preset-vision/src/index.ts index 358ced1fe..30a3ddef1 100644 --- a/packages/editor-preset-vision/src/index.ts +++ b/packages/editor-preset-vision/src/index.ts @@ -8,7 +8,7 @@ import { hotkey as Hotkey, monitor } from '@ali/lowcode-editor-core'; import { createElement } from 'react'; import { VE_EVENTS as EVENTS, VE_HOOKS as HOOKS, VERSION as Version } from './base/const'; import Bus from './bus'; -import { skeleton } from './editor'; +import { skeleton, designer, editor } from './editor'; import { Workbench } from '@ali/lowcode-editor-skeleton'; import Panes from './panes'; import Exchange from './exchange'; @@ -24,7 +24,7 @@ import Env from './env'; import DragEngine from './drag-engine'; import Viewport from './viewport'; import Project from './project'; -import { designer, editor } from './editor'; + import Symbols from './symbols'; import './vision.less'; @@ -162,6 +162,6 @@ const version = '6.0.0(LowcodeEngine 0.9.3)'; console.log( `%c VisionEngine %c v${version} `, - "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060;font-weight:bold;", - "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e;font-weight:bold;" + 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060;font-weight:bold;', + 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e;font-weight:bold;', ); diff --git a/packages/editor-preset-vision/src/panes.ts b/packages/editor-preset-vision/src/panes.ts index 592e1f7c2..8c0776cab 100644 --- a/packages/editor-preset-vision/src/panes.ts +++ b/packages/editor-preset-vision/src/panes.ts @@ -25,12 +25,12 @@ export interface OldPaneConfig { place?: string; // align: left|right|top|center|bottom description?: string; // tip? tip?: - | string - | { - // as help tip - url?: string; - content?: string | JSX.Element; - }; // help + | string + | { + // as help tip + url?: string; + content?: string | JSX.Element; + }; // help init?: () => any; destroy?: () => any; diff --git a/packages/editor-preset-vision/src/prop.ts b/packages/editor-preset-vision/src/prop.ts index 8d9abdfbf..5ead648cf 100644 --- a/packages/editor-preset-vision/src/prop.ts +++ b/packages/editor-preset-vision/src/prop.ts @@ -54,7 +54,6 @@ export interface IVariableSettable { } export default class Prop implements IVariableSettable { - /** * Setters predefined as default options * can by selected by user for every prop @@ -65,20 +64,27 @@ export default class Prop implements IVariableSettable { public static INSET_SETTER = {}; public id: string; + public emitter: EventEmitter; public inited: boolean; + public i18nLink: any; + public loopLock: boolean; public props: any; + public parent: any; public config: IPropConfig; + public initial: any; + public initialData: any; public expanded: boolean; + public useVariable?: boolean; /** @@ -86,18 +92,24 @@ export default class Prop implements IVariableSettable { * prototype.js can config Transducer.toNative to generate value */ public value: any; + /** * value to be used in VisualDesigner more flexible * prototype.js can config Transducer.toHot to generate hotValue */ public hotValue: any; + /** * 启用变量之后，变量表达式字符串值 */ public variableValue: string; + public hotData: IMMap; + public defaultValue: any; + public transducer: any; + public inGroup: boolean; constructor(parent: any, config: IPropConfig, data?: any) { @@ -263,7 +275,7 @@ export default class Prop implements IVariableSettable { public getValue(disableCache?: boolean, options?: { disableAccessor?: boolean; }) { - const accessor = this.config.accessor; + const { accessor } = this.config; if (accessor && (!options || !options.disableAccessor)) { const value = accessor.call(this as any, this.value); if (!disableCache) { @@ -313,7 +325,7 @@ export default class Prop implements IVariableSettable { return; } - const sync = this.config.sync; + const { sync } = this.config; if (sync) { const value = sync.call(this as any, this.getValue(true)); if (value !== undefined) { @@ -356,7 +368,7 @@ export default class Prop implements IVariableSettable { } } - public setUseVariable(flag: boolean = false) { + public setUseVariable(flag = false) { if (this.useVariable === flag) { return; } const state = this.props.chainReach(this); @@ -412,7 +424,7 @@ export default class Prop implements IVariableSettable { this.i18nLink = I18nUtil.attach(this, this.value, ((val: any) => this.setValue(val, false, true)) as any); - const mutator = this.config.mutator; + const { mutator } = this.config; if (!extraOptions) { extraOptions = {}; @@ -484,7 +496,7 @@ export default class Prop implements IVariableSettable { this.resolveValue(); if (!options || !options.disableMutator) { - const mutator = this.config.mutator; + const { mutator } = this.config; if (mutator) { mutator.call(this as any, value); } @@ -511,7 +523,7 @@ export default class Prop implements IVariableSettable { return true; } - let hidden = this.config.hidden; + let { hidden } = this.config; if (typeof hidden === 'function') { hidden = hidden.call(this as any, this.getValue()); } @@ -519,7 +531,7 @@ export default class Prop implements IVariableSettable { } public isDisabled() { - let disabled = this.config.disabled; + let { disabled } = this.config; if (typeof disabled === 'function') { disabled = disabled.call(this as any, this.getValue()); } @@ -529,7 +541,7 @@ export default class Prop implements IVariableSettable { public isIgnore() { if (this.isDisabled()) { return true; } - let ignore = this.config.ignore; + let { ignore } = this.config; if (typeof ignore === 'function') { ignore = ignore.call(this as any, this.getValue()); } diff --git a/packages/editor-preset-vision/src/rootNodeVisitor.ts b/packages/editor-preset-vision/src/rootNodeVisitor.ts index 811aa5fd7..266ff7930 100644 --- a/packages/editor-preset-vision/src/rootNodeVisitor.ts +++ b/packages/editor-preset-vision/src/rootNodeVisitor.ts @@ -9,11 +9,15 @@ import { DocumentModel, Node, Root } from '@ali/lowcode-designer'; */ export default class RootNodeVisitor { public nodeIdMap: {[id: string]: Node} = {}; + public nodeFieldIdMap: {[fieldId: string]: Node} = {}; + public nodeList: Node[] = []; private page: DocumentModel; + private root: RootNode; + private cancelers: Function[] = []; constructor(page: DocumentModel, rootNode: RootNode) { diff --git a/packages/editor-preset-vision/src/vc-live-editing.ts b/packages/editor-preset-vision/src/vc-live-editing.ts index 3a03161a6..59cceb655 100644 --- a/packages/editor-preset-vision/src/vc-live-editing.ts +++ b/packages/editor-preset-vision/src/vc-live-editing.ts @@ -52,7 +52,7 @@ export function liveEditingRule(target: EditingTarget) { return null; } - const innerText = targetElement.innerText; + const { innerText } = targetElement; const propTarget = ['title', 'label', 'text', 'content'].find(prop => { return equalText(getText(node, prop), innerText); }); @@ -71,7 +71,7 @@ function equalText(v: any, innerText: string) { if (typeof v !== 'string') { return false; } - return v.trim() === innerText + return v.trim() === innerText; } export const liveEditingSaveHander: SaveHandler = { @@ -108,8 +108,8 @@ export const liveEditingSaveHander: SaveHandler = { } else { prop.setValue(data); } - } -} + }, +}; // TODO: // 非文本编辑 // 国际化数据，改变当前 diff --git a/packages/editor-preset-vision/src/viewport.ts b/packages/editor-preset-vision/src/viewport.ts index 9745e9ee9..da943bed1 100644 --- a/packages/editor-preset-vision/src/viewport.ts +++ b/packages/editor-preset-vision/src/viewport.ts @@ -1,9 +1,9 @@ import { EventEmitter } from 'events'; - -const domReady = require('domready'); import Flags from './flags'; import { designer } from './editor'; +const domReady = require('domready'); + function enterFullscreen() { const elem = document.documentElement; if (elem.requestFullscreen) { @@ -29,8 +29,11 @@ interface IStyleResourceConfig { class StyleResource { config: IStyleResourceConfig; + styleElement: HTMLStyleElement; + mounted: boolean; + inited: boolean; constructor(config: IStyleResourceConfig) { @@ -38,7 +41,7 @@ class StyleResource { } matchDevice(device: string) { - const media = this.config.media; + const { media } = this.config; if (!media || media === 'ALL' || media === '*') { return true; @@ -94,11 +97,17 @@ class StyleResource { export class Viewport { preview: boolean; + focused: boolean; + slateFixed: boolean; + emitter: EventEmitter; + device: string; + focusTarget: any; + cssResourceSet: StyleResource[]; constructor() { diff --git a/packages/editor-setters/src/color-setter/index.tsx b/packages/editor-setters/src/color-setter/index.tsx index 1ae6ada64..2415e8935 100644 --- a/packages/editor-setters/src/color-setter/index.tsx +++ b/packages/editor-setters/src/color-setter/index.tsx @@ -16,20 +16,24 @@ export interface PluginProps { export default class ColorPickerView extends PureComponent { static display = 'ColorPicker'; + static propTypes = { onChange: PropTypes.func, value: PropTypes.string, }; + static defaultProps = { onChange: () => {}, value: '', }; + constructor(props: Readonly<{ value: string; defaultValue: string }>) { super(props); this.state = { value: props.value || props.defaultValue, }; } + static getDerivedStateFromProps(props: { value: string }, state: { preValue: string }) { if (props.value != state.preValue) { return { @@ -39,10 +43,11 @@ export default class ColorPickerView extends PureComponent { } return null; } + onChangeComplete = (color: Color): void => { let value; if (color.rgb.a < 1) { - const rgb = color.rgb; + const { rgb } = color; const rgba = [rgb.r, rgb.g, rgb.b, rgb.a]; value = `rgba(${rgba.join(',')})`; } else { @@ -53,13 +58,15 @@ export default class ColorPickerView extends PureComponent { }); this.props.onChange && this.props.onChange(value); }; + onInputChange = (value: string): void => { - if (/^[0-9a-zA-Z]{6}$/.test(value)) value = '#' + value; + if (/^[0-9a-zA-Z]{6}$/.test(value)) value = `#${ value}`; this.setState({ value, }); this.props.onChange && this.props.onChange(value); }; + render(): React.ReactNode { const { value, onChange, ...restProps } = this.props; const boxStyle = { @@ -74,13 +81,13 @@ export default class ColorPickerView extends PureComponent { - + ); return ( diff --git a/packages/editor-setters/src/events-setter/index.tsx b/packages/editor-setters/src/events-setter/index.tsx index cf6b78a9f..49966dcfd 100644 --- a/packages/editor-setters/src/events-setter/index.tsx +++ b/packages/editor-setters/src/events-setter/index.tsx @@ -3,6 +3,7 @@ import { Radio, Menu, Table, Icon, Dialog } from '@alifd/next'; import nativeEvents from './native-events'; import './index.scss'; + const { SubMenu, Item, Group, Divider } = Menu; const RadioGroup = Radio.Group; @@ -18,7 +19,7 @@ const DEFINITION_EVENT_TYPE = { LIFE_CYCLE_EVENT: 'lifeCycleEvent', }; -const SETTER_NAME = 'event-setter' +const SETTER_NAME = 'event-setter'; export default class EventsSetter extends Component<{ value: any[]; @@ -57,19 +58,17 @@ export default class EventsSetter extends Component<{ // return null; // } - private bindEventName:String; + private bindEventName:string; componentDidMount() { - console.log(this.state.eventDataList); - const {editor} = this.props.field; + const { editor } = this.props.field; this.initEventBtns(); this.initEventList(); - editor.on(`${SETTER_NAME}.bindEvent`,(relatedEventName,paramStr)=>{ - this.bindEvent(relatedEventName,paramStr); - }) - + editor.on(`${SETTER_NAME}.bindEvent`, (relatedEventName, paramStr) => { + this.bindEvent(relatedEventName, paramStr); + }); } /** @@ -156,7 +155,7 @@ export default class EventsSetter extends Component<{ } } - checkEventListStatus = (eventList: Array, eventType: String) => { + checkEventListStatus = (eventList: any[], eventType: string) => { const { eventDataList } = this.state; if ( eventType === DEFINITION_EVENT_TYPE.EVENTS || @@ -205,7 +204,7 @@ export default class EventsSetter extends Component<{
- this.onRelatedEventNameClick(record.relatedEventName)}> + this.onRelatedEventNameClick(record.relatedEventName)}> {record.relatedEventName || ''}
@@ -216,7 +215,7 @@ export default class EventsSetter extends Component<{ /** * 渲染事件操作项 */ - renderEventOperateCell = (eventName: String) => { + renderEventOperateCell = (eventName: string) => { return (
{ + updateEventListStatus = (eventName: string, unDisabled: boolean) => { const { eventList, nativeEventList, lifeCycleEventList } = this.state; eventList.map(item => { if (item.name === eventName) { @@ -264,8 +263,7 @@ export default class EventsSetter extends Component<{ }; - - onEventMenuClick = (eventName: String) => { + onEventMenuClick = (eventName: string) => { const { selectType, eventDataList } = this.state; eventDataList.push({ type: selectType, @@ -281,22 +279,22 @@ export default class EventsSetter extends Component<{ this.openDialog(eventName); }; - onRelatedEventNameClick = (eventName:String) => { - const {editor} = this.props.field; + onRelatedEventNameClick = (eventName:string) => { + const { editor } = this.props.field; editor.get('skeleton').getPanel('sourceEditor').show(); - setTimeout(()=>{ - editor.emit('sourceEditor.focusByFunction',{ - functionName:eventName - }) - },300) + setTimeout(() => { + editor.emit('sourceEditor.focusByFunction', { + functionName: eventName, + }); + }, 300); // editor.emit('sourceEditor.focusByFunction',{ // functionName:eventName // }) - } + }; closeEventMenu = () => { if (this.state.selectType !== null) { @@ -306,7 +304,7 @@ export default class EventsSetter extends Component<{ } }; - openDeleteEventDialog = (eventName: String) => { + openDeleteEventDialog = (eventName: string) => { this.deleteEvent(eventName); // Dialog.confirm({ // title: '删除事件', @@ -315,8 +313,8 @@ export default class EventsSetter extends Component<{ // }); }; - deleteEvent = (eventName: String) => { - const { eventDataList,eventList} = this.state; + deleteEvent = (eventName: string) => { + const { eventDataList, eventList } = this.state; eventDataList.map((item, index) => { if (item.name === eventName) { eventDataList.splice(index, 1); @@ -326,43 +324,43 @@ export default class EventsSetter extends Component<{ this.setState({ eventDataList, }); - this.props.onChange({eventDataList,eventList}); + this.props.onChange({ eventDataList, eventList }); this.updateEventListStatus(eventName, true); }; - openDialog = (bindEventName: String) => { - const {editor} = this.props.field; - const {eventDataList} = this.state; + openDialog = (bindEventName: string) => { + const { editor } = this.props.field; + const { eventDataList } = this.state; let paramStr; - eventDataList.map((item)=>{ - if (item.name == bindEventName){ + eventDataList.map((item) => { + if (item.name == bindEventName) { paramStr = item.paramStr; } - }) + }); this.bindEventName = bindEventName; - editor.emit('eventBindDialog.openDialog',bindEventName,SETTER_NAME,paramStr); + editor.emit('eventBindDialog.openDialog', bindEventName, SETTER_NAME, paramStr); }; - bindEvent = (relatedEventName: String,paramStr:String) => { - const {eventDataList,eventList} = this.state; + bindEvent = (relatedEventName: string, paramStr:string) => { + const { eventDataList, eventList } = this.state; eventDataList.map(item => { if (item.name === this.bindEventName) { item.relatedEventName = relatedEventName; - if (paramStr){ - item.paramStr = paramStr + if (paramStr) { + item.paramStr = paramStr; } } }); this.setState({ - eventDataList - }) + eventDataList, + }); - this.props.onChange({eventDataList,eventList}); + this.props.onChange({ eventDataList, eventList }); - //this.closeDialog(); + // this.closeDialog(); }; render() { @@ -374,15 +372,15 @@ export default class EventsSetter extends Component<{ selectType, eventDataList, } = this.state; - const {editor} = this.props.field; - let showEventList = + const { editor } = this.props.field; + const showEventList = lifeCycleEventList.length > 0 ? lifeCycleEventList : eventList; return (
{ - eventBtns.length>1 ?点击选择事件类型:点击绑定事件 + eventBtns.length > 1 ? 点击选择事件类型 : 点击绑定事件 }
diff --git a/packages/editor-setters/src/expression-setter/index.tsx b/packages/editor-setters/src/expression-setter/index.tsx index 2ab0e7a3c..dafca9ddc 100644 --- a/packages/editor-setters/src/expression-setter/index.tsx +++ b/packages/editor-setters/src/expression-setter/index.tsx @@ -12,19 +12,20 @@ const { Option, AutoComplete } = Select; const { Tooltip } = Balloon; const helpMap = { this: '容器上下文对象', - 'state': '容器的state', - 'props': '容器的props', - 'context': '容器的context', - 'schema': '页面上下文对象', - 'component': '组件上下文对象', - 'constants': '应用常量对象', - 'utils': '应用工具对象', - 'dataSourceMap': '容器数据源Map', - 'field': '表单Field对象' -} + state: '容器的state', + props: '容器的props', + context: '容器的context', + schema: '页面上下文对象', + component: '组件上下文对象', + constants: '应用常量对象', + utils: '应用工具对象', + dataSourceMap: '容器数据源Map', + field: '表单Field对象', +}; export default class ExpressionView extends PureComponent { static displayName = 'Expression'; + static propTypes = { context: PropTypes.object, dataSource: PropTypes.array, @@ -32,8 +33,9 @@ export default class ExpressionView extends PureComponent { messages: PropTypes.object, onChange: PropTypes.func, placeholder: PropTypes.string, - value: PropTypes.string + value: PropTypes.string, }; + static defaultProps = { context: {}, dataSource: [], @@ -41,12 +43,17 @@ export default class ExpressionView extends PureComponent { messages: zhCN, onChange: () => {}, placeholder: '', - value: '' + value: '', }; + expression: React.RefObject; + i18n: any; + t: void; + $input: any; + listenerFun: ((event: any) => void) | undefined; static getInitValue(val: { value: any; match: (arg0: RegExp) => any; }) { @@ -54,12 +61,13 @@ export default class ExpressionView extends PureComponent { if (typeof val === 'object') { return val.value; } else if (typeof val === 'string') { - let arr = val.match(/^\{\{(.*?)\}\}$/); + const arr = val.match(/^\{\{(.*?)\}\}$/); if (arr) return arr[1]; } } return val; } + constructor(props: Readonly<{}>) { super(props); this.expression = React.createRef(); @@ -67,46 +75,48 @@ export default class ExpressionView extends PureComponent { this.state = { value: ExpressionView.getInitValue(props.value), context: props.context || {}, - dataSource: props.dataSource || [] + dataSource: props.dataSource || [], }; } + static getDerivedStateFromProps(props: { value: any; }, state: { preValue: any; }) { - let curValue = ExpressionView.getInitValue(props.value); + const curValue = ExpressionView.getInitValue(props.value); if (curValue !== state.preValue) { return { preValue: curValue, - value: curValue + value: curValue, }; } return null; } + onChange(value: string, actionType: string) { let realInputValue = value; - let realDataSource = null; + const realDataSource = null; let nextCursorIndex: number; - //更新值 + // 更新值 if (actionType === 'itemClick' || actionType === 'enter') { - let curValue = this.state.value; + const curValue = this.state.value; if (curValue) { realInputValue = curValue + realInputValue; } } - //更新数据源 - let newState = { - value: realInputValue + // 更新数据源 + const newState = { + value: realInputValue, }; if (realDataSource !== null) newState.dataSource = realDataSource; this.setState(newState, () => { nextCursorIndex && this.setInputCursorPosition(nextCursorIndex); }); - //默认加上变量表达式 + // 默认加上变量表达式 this.t && clearTimeout(this.t); this.t = setTimeout(() => { const { onChange } = this.props; // realInputValue = realInputValue ? `{{${realInputValue}}}` : undefined; onChange && onChange({ type: 'JSExpression', - value: realInputValue + value: realInputValue, }); }, 300); } @@ -116,13 +126,13 @@ export default class ExpressionView extends PureComponent { * @param {String} * @return {Array} */ - getDataSource(tempStr: string): Array { + getDataSource(tempStr: string): any[] { if (/[^\w\.]$/.test(tempStr)) { return []; } else if (tempStr === null || tempStr === '') { return this.getContextKeys([]); } else if (/\w\.$/.test(tempStr)) { - let currentField = this.getCurrentFiled(tempStr); + const currentField = this.getCurrentFiled(tempStr); if (!currentField) return null; let tempKeys = this.getObjectKeys(currentField.str); tempKeys = this.getContextKeys(tempKeys); @@ -141,12 +151,12 @@ export default class ExpressionView extends PureComponent { * @return {String} 光标前的对象字符串 */ getCurrentFiled(str: string | any[]) { - str += 'x'; //.后面加一个x字符，便于acorn解析 + str += 'x'; // .后面加一个x字符，便于acorn解析 try { - let astTree = acorn.parse(str); - let right = astTree.body[0].expression.right || astTree.body[0].expression; + const astTree = acorn.parse(str); + const right = astTree.body[0].expression.right || astTree.body[0].expression; if (right.type === 'MemberExpression') { - let { start, end } = right; + const { start, end } = right; str = str.slice(start, end); return { str, start, end }; } @@ -161,7 +171,7 @@ export default class ExpressionView extends PureComponent { * @return {Array} */ getContextKeys(keys: []) { - const editor = this.props.field.editor; + const { editor } = this.props.field; console.log(editor); const limitKeys = ['schema', 'utils', 'constants']; if (keys.length === 0) return limitKeys; @@ -176,16 +186,16 @@ export default class ExpressionView extends PureComponent { if (keyValue[item]) { keyValue = keyValue[item]; } - }) + }); if (assert) return []; result = Object.keys(keyValue); return result; // return utilsKeys.concat(constantsKeys).concat(schemaKeys); } - /*过滤key */ + /* 过滤key */ filterKey(obj: any, name: string) { - let filterKeys = [ + const filterKeys = [ 'reloadDataSource', 'REACT_HOT_LOADER_RENDERED_GENERATION', 'refs', @@ -194,10 +204,10 @@ export default class ExpressionView extends PureComponent { 'isReactComponent', 'forceUpdate', 'setState', - 'isPureReactComponent' + 'isPureReactComponent', ]; - let result = []; - for (let key in obj) { + const result = []; + for (const key in obj) { if (key.indexOf('_') !== 0 && filterKeys.indexOf(key) === -1) { result.push(`${name}.${key}`); } @@ -213,8 +223,8 @@ export default class ExpressionView extends PureComponent { */ filterOption(inputValue: string, item: { value: string | any[]; }) { const cursorIndex = this.getInputCursorPosition(); - let preStr = inputValue.substr(0, cursorIndex); - let lastKey: string[] = preStr.split('.').slice(-1); + const preStr = inputValue.substr(0, cursorIndex); + const lastKey: string[] = preStr.split('.').slice(-1); if (!lastKey) return true; if (item.value.indexOf(lastKey) > -1) return true; return false; @@ -228,11 +238,11 @@ export default class ExpressionView extends PureComponent { const { value, dataSource } = this.state; const { placeholder } = this.props; const isValObject = !!(value == '[object Object]'); - let title = isValObject + const title = isValObject ? this.i18n('valueIllegal') : (value || placeholder || this.i18n('jsExpression')).toString(); const cursorIndex = this.getInputCursorPosition(); - let childNode = cursorIndex ? ( + const childNode = cursorIndex ? (
{title.substr(0, cursorIndex)} | @@ -289,12 +299,12 @@ export default class ExpressionView extends PureComponent { this.$input = this.findInputElement(); if (this.$input) { this.listenerFun = event => { - let isMoveKey = !!(event.type == 'keyup' && ~[37, 38, 39, 91].indexOf(event.keyCode)); - let isMouseup = event.type == 'mouseup'; + const isMoveKey = !!(event.type == 'keyup' && ~[37, 38, 39, 91].indexOf(event.keyCode)); + const isMouseup = event.type == 'mouseup'; if (isMoveKey || isMouseup) { - let dataSource = this.getDataSource(this.state.value) || []; + const dataSource = this.getDataSource(this.state.value) || []; this.setState({ - dataSource + dataSource, }); } }; @@ -302,18 +312,21 @@ export default class ExpressionView extends PureComponent { this.$input.addEventListener('mouseup', this.listenerFun, false); } } + componentWillUnmount() { if (this.listenerFun && this.$input) { this.$input.removeEventListener('keyup', this.listenerFun, false); this.$input.removeEventListener('mouseup', this.listenerFun, false); } } + /** * 获取Input输入框DOM节点 */ findInputElement() { return this.expression.current.children[0].getElementsByTagName('input')[0]; } + /** * 获取光标位置 * @@ -322,6 +335,7 @@ export default class ExpressionView extends PureComponent { if (!this.$input) return; return this.$input.selectionStart; } + /* * 字符串取得对象keys */ @@ -330,6 +344,7 @@ export default class ExpressionView extends PureComponent { if (str) keys = str.split('.'); return keys.slice(0, keys.length - 1); } + /* * 设置input组件光标位置在闭合}前 */ diff --git a/packages/editor-setters/src/expression-setter/locale/snippets.ts b/packages/editor-setters/src/expression-setter/locale/snippets.ts index 7c8484c4f..2bcb0dd00 100644 --- a/packages/editor-setters/src/expression-setter/locale/snippets.ts +++ b/packages/editor-setters/src/expression-setter/locale/snippets.ts @@ -4,21 +4,21 @@ export default [ kind: 'Class', insertText: 'constants', detail: '应用全局常量', - documentation: '应用范围定义的通用常量' + documentation: '应用范围定义的通用常量', }, { label: 'utils', kind: 'Class', insertText: 'utils', detail: '应用全局公共函数', - documentation: '应用范围扩展的公共函数' + documentation: '应用范围扩展的公共函数', }, { label: 'state', kind: 'Enum', insertText: 'state', detail: '当前所在容器组件内部状态', - documentation: 'React Class内部状态state' + documentation: 'React Class内部状态state', }, { label: 'setState', @@ -26,7 +26,7 @@ export default [ insertText: 'setState({\n\t$0\n})', insertTextRules: 'InsertAsSnippet', detail: '设置当前所在容器组件的state数据', - documentation: '原生React方法，会自动更新组件视图' + documentation: '原生React方法，会自动更新组件视图', }, { label: 'reloadDataSource', @@ -34,45 +34,45 @@ export default [ insertText: 'reloadDataSource(${1:${2:namespace}, ${3:false}, ${4:callback}})', insertTextRules: 'InsertAsSnippet', detail: '刷新当前所在的容器组件', - documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图' + documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图', }, { label: 'location', kind: 'Class', insertText: 'location', - detail: '路由解析对象' + detail: '路由解析对象', }, { label: 'location.query', kind: 'Value', insertText: 'location.query.${1:xxxx}', insertTextRules: 'InsertAsSnippet', - detail: '从路由解析对象中获取参数信息' + detail: '从路由解析对象中获取参数信息', }, { label: 'history', kind: 'Class', insertText: 'history', - detail: '路由历史对象' + detail: '路由历史对象', }, { label: 'React', kind: 'Keyword', insertText: 'React', - detail: 'React对象' + detail: 'React对象', }, { label: 'ReactDOM', kind: 'Keyword', insertText: 'ReactDOM', - detail: 'ReactDom对象' + detail: 'ReactDom对象', }, { label: 'ReactDOM.findDOMNode', kind: 'Function', insertText: 'ReactDOM.findDOMNode(${1:this.refs.xxxx})', insertTextRules: 'InsertAsSnippet', - detail: 'ReactDom查找真实dom node' + detail: 'ReactDom查找真实dom node', }, { label: 'Dialog.alert', @@ -84,10 +84,10 @@ export default [ '\tonOk: () => {', '\t\t$3', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: 'alert弹框 By Fusion' + detail: 'alert弹框 By Fusion', }, { label: 'Dialog.confirm', @@ -102,52 +102,52 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '确认弹出框 By Fusion' + detail: '确认弹出框 By Fusion', }, { label: 'Message.success', kind: 'Method', insertText: 'Message.success(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '成功反馈提示 By Fusion' + detail: '成功反馈提示 By Fusion', }, { label: 'Message.error', kind: 'Method', insertText: 'Message.error(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '错误反馈提示 By Fusion' + detail: '错误反馈提示 By Fusion', }, { label: 'Message.help', kind: 'Method', insertText: 'Message.help(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '帮助反馈提示 By Fusion' + detail: '帮助反馈提示 By Fusion', }, { label: 'Message.loading', kind: 'Method', insertText: 'Message.loading(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: 'loading反馈提示 By Fusion' + detail: 'loading反馈提示 By Fusion', }, { label: 'Message.notice', kind: 'Method', insertText: 'Message.notice(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '注意反馈提示 By Fusion' + detail: '注意反馈提示 By Fusion', }, { label: 'Message.waining', kind: 'Method', insertText: 'Message.waining(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '警告反馈提示 By Fusion' + detail: '警告反馈提示 By Fusion', }, { label: 'Modal.confirm', @@ -162,10 +162,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '确认弹出框 By Antd' + detail: '确认弹出框 By Antd', }, { label: 'Modal.info', @@ -180,10 +180,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '信息弹出框 By Antd' + detail: '信息弹出框 By Antd', }, { label: 'Modal.success', @@ -198,10 +198,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '成功弹出框 By Antd' + detail: '成功弹出框 By Antd', }, { label: 'Modal.error', @@ -216,10 +216,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '错误弹出框 By Antd' + detail: '错误弹出框 By Antd', }, { label: 'Modal.warning', @@ -234,9 +234,9 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '警告弹出框 By Antd' - } -]; \ No newline at end of file + detail: '警告弹出框 By Antd', + }, +]; diff --git a/packages/editor-setters/src/expression-setter/locale/utils.ts b/packages/editor-setters/src/expression-setter/locale/utils.ts index a02a8dd06..d401ad511 100644 --- a/packages/editor-setters/src/expression-setter/locale/utils.ts +++ b/packages/editor-setters/src/expression-setter/locale/utils.ts @@ -1,11 +1,11 @@ import IntlMessageFormat from 'intl-messageformat'; export const isJSExpression = (obj = '') => { - if(obj && typeof obj === 'object' && obj.type === 'JSExpression') { + if (obj && typeof obj === 'object' && obj.type === 'JSExpression') { return true; } return false; -} +}; /** * 用于构造国际化字符串处理函数 @@ -18,4 +18,4 @@ export const generateI18n = (locale = 'zh-CN', messages = {}) => { const formater = new IntlMessageFormat(messages[key], locale); return formater.format(values); }; -} +}; diff --git a/packages/editor-setters/src/expression-setter/locale/zh-CN.ts b/packages/editor-setters/src/expression-setter/locale/zh-CN.ts index 951596009..f4f2e0630 100644 --- a/packages/editor-setters/src/expression-setter/locale/zh-CN.ts +++ b/packages/editor-setters/src/expression-setter/locale/zh-CN.ts @@ -33,4 +33,4 @@ export default { object: '对象ObjectButton', reactNode: '节点类型ReactNode', typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置', -}; \ No newline at end of file +}; diff --git a/packages/editor-setters/src/function-setter/index.tsx b/packages/editor-setters/src/function-setter/index.tsx index 397e131c5..a31e96136 100644 --- a/packages/editor-setters/src/function-setter/index.tsx +++ b/packages/editor-setters/src/function-setter/index.tsx @@ -1,12 +1,12 @@ import React, { PureComponent } from 'react'; // import PropTypes from 'prop-types'; -import { Button, Icon,Dialog } from '@alifd/next'; +import { Button, Icon, Dialog } from '@alifd/next'; import MonacoEditor from 'react-monaco-editor'; import { js_beautify, css_beautify } from 'js-beautify'; import './index.scss'; import { timingSafeEqual } from 'crypto'; -const SETTER_NAME = 'function-setter' +const SETTER_NAME = 'function-setter'; const defaultEditorOption = { width: '100%', @@ -14,7 +14,7 @@ const defaultEditorOption = { options: { readOnly: false, automaticLayout: true, - folding: true, //默认开启折叠代码功能 + folding: true, // 默认开启折叠代码功能 lineNumbers: 'on', wordWrap: 'off', formatOnPaste: true, @@ -57,86 +57,85 @@ export default class FunctionSetter extends PureComponent { this.bindEventCallback(eventName); - } + }; componentWillUnmount() { const { editor } = this.props.field; - editor.off(`${this.emitEventName}.bindEvent`, this.bindEvent) + editor.off(`${this.emitEventName}.bindEvent`, this.bindEvent); } bindFunction = () => { const { field, value } = this.props; field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName); - } + }; openDialog = () => { - const {value={}} = this.props; + const { value = {} } = this.props; this.setState({ - isShowDialog:true - }) + isShowDialog: true, + }); this.functionCode = value.value; - - } + }; closeDialog = () => { this.setState({ - isShowDialog:false - }) - } + isShowDialog: false, + }); + }; removeFunctionBind = () => { - const { field ,removeProp} = this.props; + const { field, removeProp } = this.props; removeProp(); - } + }; - parseFunctionName = (functionString: String) => { + parseFunctionName = (functionString: string) => { // 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名 - let funNameStr = functionString.split('this.')[1]; + const funNameStr = functionString.split('this.')[1]; - if (funNameStr){ - let endIndex = funNameStr.indexOf('('); + if (funNameStr) { + const endIndex = funNameStr.indexOf('('); return funNameStr.substr(0, endIndex); - }else{ - return '' + } else { + return ''; } - } + }; /** * 渲染按钮(初始状态) */ renderButton = () => { - return - } + return ; + }; updateCode = (newCode) => { this.functionCode = newCode; - } + }; onDialogOk = () => { - const {onChange} = this.props; + const { onChange } = this.props; onChange({ type: 'JSFunction', - value: this.functionCode + value: this.functionCode, }); this.closeDialog(); - } + }; focusFunctionName = (functionName) => { const { editor } = this.props.field; @@ -145,73 +144,73 @@ export default class FunctionSetter extends PureComponent { editor.emit('sourceEditor.focusByFunction', { - functionName - }) - }, 300) - } + functionName, + }); + }, 300); + }; /** * 渲染绑定函数 */ renderBindFunction = () => { const { value } = this.props; - + // 解析函数名 - let functionName = this.parseFunctionName(value.value); - return
- + const functionName = this.parseFunctionName(value.value); + return (
+ this.focusFunctionName(functionName)}>{functionName} -
- } +
); + }; /** * 渲染编辑函数按钮(可直接编辑函数内容) */ renderEditFunctionButton = () => { - return
- -
- } + return (
+ +
); + }; - bindEventCallback = (eventName: String) => { + bindEventCallback = (eventName: string) => { const { onChange } = this.props; onChange({ type: 'JSFunction', value: `function(){ this.${eventName}() }`, }); - } + }; render() { const { value } = this.props; - const {isShowDialog} = this.state; + const { isShowDialog } = this.state; let functionName = ''; - if (value && value.value){ + if (value && value.value) { functionName = this.parseFunctionName(value.value); } - return
+ return (
{ - value ? (functionName?this.renderBindFunction():this.renderEditFunctionButton()) : this.renderButton() + value ? (functionName ? this.renderBindFunction() : this.renderEditFunctionButton()) : this.renderButton() } { - value && value.value && {this.closeDialog()}}> -
- { this.closeDialog(); }}> +
+ this.updateCode(newCode)} /> -
-
+
+ } - -
; + +
); } } diff --git a/packages/editor-setters/src/icon-setter/index.tsx b/packages/editor-setters/src/icon-setter/index.tsx index 0762b9ff3..e68908e95 100644 --- a/packages/editor-setters/src/icon-setter/index.tsx +++ b/packages/editor-setters/src/icon-setter/index.tsx @@ -77,7 +77,7 @@ export default class IconSetter extends PureComponent { type: 'string', defaultValue: '', hasClear: true, - icons: icons, + icons, placeholder: '请点击选择 Icon', onChange: (icon: string | object) => undefined, }; @@ -149,7 +149,7 @@ export default class IconSetter extends PureComponent { { const v = field.getValue(); @@ -99,7 +99,7 @@ const FunctionBindSetter = { const v = field.getValue(); return v == isJSFunction(v); }, -} +}; const builtinSetters: any = { StringSetter, @@ -120,7 +120,7 @@ const builtinSetters: any = { JsonSetter, StyleSetter, IconSetter, - FunctionSetter:FunctionBindSetter + FunctionSetter: FunctionBindSetter, }; registerSetter(builtinSetters); diff --git a/packages/editor-setters/src/json-setter/index.tsx b/packages/editor-setters/src/json-setter/index.tsx index 7ae9b80d0..48b263037 100644 --- a/packages/editor-setters/src/json-setter/index.tsx +++ b/packages/editor-setters/src/json-setter/index.tsx @@ -14,11 +14,12 @@ import Snippets from './locale/snippets'; import zhCN from './locale/zh-CN'; import './index.scss'; -let registerApiAndSnippetStatus = false; //判断注册api机制 +let registerApiAndSnippetStatus = false; // 判断注册api机制 window.bt = js_beautify; class MonacoEditorView extends PureComponent { static displayName = 'MonacoEditor'; + render() { const { type, ...restProps } = this.props; const Node = type == 'button' ? MonacoEditorButtonView : MonacoEditorDefaultView; @@ -28,30 +29,32 @@ class MonacoEditorView extends PureComponent { localeConfig('MonacoEditor', MonacoEditorView); -//monaco编辑器存在3种主题：vs、vs-dark、hc-black +// monaco编辑器存在3种主题：vs、vs-dark、hc-black class MonacoEditorDefaultView extends PureComponent { static displayName = 'MonacoEditorDefault'; + static propTypes = { locale: PropTypes.string, messages: PropTypes.object, language: PropTypes.string, }; + static defaultProps = { locale: 'zh-CN', messages: zhCN, width: '100%', height: '300px', language: 'json', - autoFocus: false, //自动获得焦点 - autoSubmit: true, //自动提交 - placeholder: '', //默认占位内容 + autoFocus: false, // 自动获得焦点 + autoSubmit: true, // 自动提交 + placeholder: '', // 默认占位内容 btnText: '提交', btnSize: 'small', - rules: [], //校验规则 + rules: [], // 校验规则 options: { readOnly: false, automaticLayout: true, - folding: true, //默认开启折叠代码功能 + folding: true, // 默认开启折叠代码功能 lineNumbers: 'on', wordWrap: 'off', formatOnPaste: true, @@ -70,15 +73,25 @@ class MonacoEditorDefaultView extends PureComponent { }, }, }; + strValue: string; + i18n: any; + editorRef: React.RefObject; + options: any; + fullScreenOptions: any; + position: any; + editor: any; + editorNode: unknown; + editorParentNode: any; + constructor(props: Readonly<{}>) { super(props); this.strValue = ''; @@ -104,17 +117,18 @@ class MonacoEditorDefaultView extends PureComponent { } componentDidUpdate() { - //如果是全屏操作，获得焦点，光标保留在原来位置; + // 如果是全屏操作，获得焦点，光标保留在原来位置; if (this.position) { this.editor.focus(); this.editor.setPosition(this.position); delete this.position; } } + componentDidMount() { - this.editorNode = this.editorRef.current; //记录当前dom节点； - this.editorParentNode = this.editorNode.parentNode; //记录父节点; - //自动获得焦点, 格式化需要时间 + this.editorNode = this.editorRef.current; // 记录当前dom节点； + this.editorParentNode = this.editorNode.parentNode; // 记录父节点; + // 自动获得焦点, 格式化需要时间 if (this.props.autoFocus) { setTimeout(() => { this.editor.setPosition({ @@ -124,7 +138,7 @@ class MonacoEditorDefaultView extends PureComponent { this.editor.focus(); }, 100); } - //快捷键编码 + // 快捷键编码 const CtrlCmd = 2048; const KEY_S = 49; const Shift = 1024; @@ -133,28 +147,28 @@ class MonacoEditorDefaultView extends PureComponent { const Escape = 9; this.editor.addCommand(CtrlCmd | KEY_S, () => { - this.onSubmit(); //保存快捷键 + this.onSubmit(); // 保存快捷键 }); this.editor.addCommand(CtrlCmd | Shift | KEY_F, () => { - this.fullScreen(); //全屏快捷键 + this.fullScreen(); // 全屏快捷键 }); this.editor.addCommand(CtrlCmd | KEY_B, () => { - this.format(); //美化快捷键 + this.format(); // 美化快捷键 }); this.editor.addCommand(Escape, () => { this.props.onEscape && this.props.onEscape(); }); - //注册api + // 注册api this.editor.submit = this.onSubmit; this.editor.format = this.format; this.editor.fullScreen = this.fullScreen; this.editor.toJson = this.toJson; this.editor.toObject = this.toObject; this.editor.toFunction = this.toFunction; - //针对object情况，改写setValue和getValue api + // 针对object情况，改写setValue和getValue api if (this.props.language === 'object') { - const getValue = this.editor.getValue; - const setValue = this.editor.setValue; + const { getValue } = this.editor; + const { setValue } = this.editor; this.editor.getValue = () => { return getValue.call(this.editor).substring(this.valuePrefix.length); }; @@ -180,18 +194,18 @@ class MonacoEditorDefaultView extends PureComponent { } = this.props; const { isFullScreen } = this.state; - this.valuePrefix = ''; //值前缀 + this.valuePrefix = ''; // 值前缀 if (language === 'object') this.valuePrefix = 'export default '; if (!this.isFullScreenAction) { - //将值转换成目标值 + // 将值转换成目标值 const nowValue = this.valueHandler(value || placeholder, language); const curValue = this.valueHandler(this.strValue, language); if (nowValue !== curValue) this.strValue = nowValue; - if (language === 'object') this.strValue = this.strValue || placeholder || '{\n\t\n}'; //设置初始化值 + if (language === 'object') this.strValue = this.strValue || placeholder || '{\n\t\n}'; // 设置初始化值 if (language === 'json' && this.strValue === '{}') this.strValue = '{\n\t\n}'; } this.isFullScreenAction = false; - //真实高亮语言 + // 真实高亮语言 let tarLanguage = language; if (language === 'object' || language === 'function') { tarLanguage = 'javascript'; @@ -242,11 +256,11 @@ class MonacoEditorDefaultView extends PureComponent { ); } - //值变化 + // 值变化 onChange(curValue) { if (curValue === this.valuePrefix + this.strValue) return; const { onAfterChange, language, autoSubmit, onChange } = this.props; - this.strValue = curValue; //记录当前格式 + this.strValue = curValue; // 记录当前格式 if (this.ct) clearTimeout(this.ct); this.ct = setTimeout(() => { this.position = this.editor.getPosition(); @@ -256,7 +270,7 @@ class MonacoEditorDefaultView extends PureComponent { }, 300); } - //提交动作 + // 提交动作 onSubmit() { const { onSubmit, onChange, language } = this.props; const curValue = this.editor.getValue(); @@ -265,7 +279,7 @@ class MonacoEditorDefaultView extends PureComponent { onSubmit && onSubmit(ret.value, ret.error, this.editor); } - //值类型转换处理 + // 值类型转换处理 valueHandler(value, language) { let tarValue = value || ''; if (language === 'json') { @@ -285,7 +299,7 @@ class MonacoEditorDefaultView extends PureComponent { tarValue = js_beautify(tarValue, { indent_size: 2, indent_empty_lines: true }); } } else if (language === 'object') { - //先转成对象，在进行序列化和格式化； + // 先转成对象，在进行序列化和格式化； value = value || {}; if (value && typeof value === 'object') { try { @@ -303,7 +317,7 @@ class MonacoEditorDefaultView extends PureComponent { return tarValue; } - //结果处理 + // 结果处理 resultHandler(value, language) { let ret = { value }; if (language === 'json') { @@ -316,10 +330,10 @@ class MonacoEditorDefaultView extends PureComponent { return ret; } - //设置全屏时的动作 + // 设置全屏时的动作 fullScreen() { if (!this.editorRef) return; - //还原到原来位置； + // 还原到原来位置； this.position = this.editor.getPosition(); if (this.state.isFullScreen) { if (this.editorParentNode) { @@ -333,7 +347,7 @@ class MonacoEditorDefaultView extends PureComponent { document.body.appendChild(this.editorNode); } const nextFs = !this.state.isFullScreen; - this.isFullScreenAction = true; //记录是全屏幕操作 + this.isFullScreenAction = true; // 记录是全屏幕操作 this.setState( { isFullScreen: nextFs, @@ -344,7 +358,7 @@ class MonacoEditorDefaultView extends PureComponent { ); } - //美化代码 + // 美化代码 format() { const { language } = this.props; if (!this.editor) return; @@ -360,7 +374,7 @@ class MonacoEditorDefaultView extends PureComponent { } } - //校验是否是json + // 校验是否是json toJson(value) { try { const obj = new Function(`'use strict'; return ${value.replace(/[\r\n\t]/g, '')}`)(); @@ -374,7 +388,7 @@ class MonacoEditorDefaultView extends PureComponent { } } - //校验是否为object对象 + // 校验是否为object对象 toObject(value) { try { const obj = new Function(`'use strict';return ${value}`)(); @@ -389,7 +403,7 @@ class MonacoEditorDefaultView extends PureComponent { } } - //校验是否为function + // 校验是否为function toFunction(value) { try { const fun = new Function(`'use strict';return ${value}`)(); @@ -403,11 +417,11 @@ class MonacoEditorDefaultView extends PureComponent { } } - //注册api和代码片段 + // 注册api和代码片段 registerApiAndSnippet(monaco) { if (registerApiAndSnippetStatus) return; registerApiAndSnippetStatus = true; - //注册this.提示的方法; + // 注册this.提示的方法; const thisSuggestions = []; Snippets.map((item) => { if (!item.label || !item.kind || !item.insertText) return; @@ -416,8 +430,7 @@ class MonacoEditorDefaultView extends PureComponent { kind: monaco.languages.CompletionItemKind[item.kind], insertText: item.insertText, }); - if (item.insertTextRules) - tarItem.insertTextRules = monaco.languages.CompletionItemInsertTextRule[item.insertTextRules]; + if (item.insertTextRules) tarItem.insertTextRules = monaco.languages.CompletionItemInsertTextRule[item.insertTextRules]; thisSuggestions.push(tarItem); }); monaco.languages.registerCompletionItemProvider('javascript', { @@ -430,7 +443,7 @@ class MonacoEditorDefaultView extends PureComponent { }); const match = textUntilPosition.match(/(^this\.)|(\sthis\.)/); const suggestions = match ? thisSuggestions : []; - return { suggestions: suggestions }; + return { suggestions }; }, triggerCharacters: ['.'], }); @@ -439,7 +452,7 @@ class MonacoEditorDefaultView extends PureComponent { const prefix = 'data:text/javascript;charset=utf-8,'; const baseUrl = 'https://g.alicdn.com/iceluna/iceluna-vendor/0.0.1/'; window.MonacoEnvironment = { - getWorkerUrl: function(label: string) { + getWorkerUrl(label: string) { if (label === 'json') { return `${prefix}${encodeURIComponent(` importScripts('${baseUrl}json.worker.js');`)}`; @@ -463,16 +476,21 @@ window.MonacoEnvironment = { export default class MonacoEditorButtonView extends PureComponent { static displayName = 'JsonSetter'; + static propTypes = { locale: PropTypes.string, messages: PropTypes.object, }; + static defaultProps = { locale: 'zh-CN', messages: zhCN, }; + i18n: any; + objectButtonRef: React.RefObject; + constructor(props: Readonly<{}>) { super(props); this.i18n = generateI18n(props.locale, props.messages); @@ -480,14 +498,17 @@ export default class MonacoEditorButtonView extends PureComponent { // 兼容代码，待去除 window.__ctx.appHelper.constants = window.__ctx.appHelper.constants || {}; } + afterHandler(value: { nrs_temp_field: any }) { if (!value) return; return value.nrs_temp_field; } + beforeHandler(value: any) { if (!value) return; return { nrs_temp_field: value }; } + message(type: string, title: any, dom: Element | null) { Message.show({ type, @@ -499,6 +520,7 @@ export default class MonacoEditorButtonView extends PureComponent { }, }); } + componentDidMount() { const { registerApi } = this.props; const objectButtonThis = this.objectButtonRef; @@ -510,6 +532,7 @@ export default class MonacoEditorButtonView extends PureComponent { setValues: objectButtonThis.setValues, }); } + render() { const self = this; const { locale, messages, value, onChange, field, languages, ...restProps } = this.props; @@ -518,7 +541,7 @@ export default class MonacoEditorButtonView extends PureComponent { tarRestProps.autoSubmit = true; tarRestProps.autoFocus = true; const tarOnSubmit = tarRestProps.onSubmit; - //确保monaco快捷键保存，能出发最外层的保存 + // 确保monaco快捷键保存，能出发最外层的保存 tarRestProps.onSubmit = (value, error) => { const msgDom = document.querySelector('.object-button-overlay .next-dialog-body'); if (error) return this.message('error', this.i18n('formatError'), msgDom); @@ -539,11 +562,11 @@ export default class MonacoEditorButtonView extends PureComponent { tarObjProps.value = value || ''; tarObjProps.onChange = onChange; const tarRule = []; - //判断，如果是json，function, object等类型，自动追加校验规则； + // 判断，如果是json，function, object等类型，自动追加校验规则； if (tarRestProps.language && ['json', 'function', 'object'].includes(tarRestProps.language)) { if (['json', 'object'].includes(tarRestProps.language)) { tarRule.push({ - validator: function(value: any, callback: (arg0: undefined) => void) { + validator(value: any, callback: (arg0: undefined) => void) { if (typeof value !== 'object') { callback(self.i18n('formatError')); } else { @@ -553,7 +576,7 @@ export default class MonacoEditorButtonView extends PureComponent { }); } else { tarRule.push({ - validator: function(value: any, callback: (arg0: undefined) => void) { + validator(value: any, callback: (arg0: undefined) => void) { if (typeof value !== 'function') { callback(self.i18n('formatError')); } else { diff --git a/packages/editor-setters/src/json-setter/locale/snippets.ts b/packages/editor-setters/src/json-setter/locale/snippets.ts index 7c8484c4f..2bcb0dd00 100644 --- a/packages/editor-setters/src/json-setter/locale/snippets.ts +++ b/packages/editor-setters/src/json-setter/locale/snippets.ts @@ -4,21 +4,21 @@ export default [ kind: 'Class', insertText: 'constants', detail: '应用全局常量', - documentation: '应用范围定义的通用常量' + documentation: '应用范围定义的通用常量', }, { label: 'utils', kind: 'Class', insertText: 'utils', detail: '应用全局公共函数', - documentation: '应用范围扩展的公共函数' + documentation: '应用范围扩展的公共函数', }, { label: 'state', kind: 'Enum', insertText: 'state', detail: '当前所在容器组件内部状态', - documentation: 'React Class内部状态state' + documentation: 'React Class内部状态state', }, { label: 'setState', @@ -26,7 +26,7 @@ export default [ insertText: 'setState({\n\t$0\n})', insertTextRules: 'InsertAsSnippet', detail: '设置当前所在容器组件的state数据', - documentation: '原生React方法，会自动更新组件视图' + documentation: '原生React方法，会自动更新组件视图', }, { label: 'reloadDataSource', @@ -34,45 +34,45 @@ export default [ insertText: 'reloadDataSource(${1:${2:namespace}, ${3:false}, ${4:callback}})', insertTextRules: 'InsertAsSnippet', detail: '刷新当前所在的容器组件', - documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图' + documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图', }, { label: 'location', kind: 'Class', insertText: 'location', - detail: '路由解析对象' + detail: '路由解析对象', }, { label: 'location.query', kind: 'Value', insertText: 'location.query.${1:xxxx}', insertTextRules: 'InsertAsSnippet', - detail: '从路由解析对象中获取参数信息' + detail: '从路由解析对象中获取参数信息', }, { label: 'history', kind: 'Class', insertText: 'history', - detail: '路由历史对象' + detail: '路由历史对象', }, { label: 'React', kind: 'Keyword', insertText: 'React', - detail: 'React对象' + detail: 'React对象', }, { label: 'ReactDOM', kind: 'Keyword', insertText: 'ReactDOM', - detail: 'ReactDom对象' + detail: 'ReactDom对象', }, { label: 'ReactDOM.findDOMNode', kind: 'Function', insertText: 'ReactDOM.findDOMNode(${1:this.refs.xxxx})', insertTextRules: 'InsertAsSnippet', - detail: 'ReactDom查找真实dom node' + detail: 'ReactDom查找真实dom node', }, { label: 'Dialog.alert', @@ -84,10 +84,10 @@ export default [ '\tonOk: () => {', '\t\t$3', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: 'alert弹框 By Fusion' + detail: 'alert弹框 By Fusion', }, { label: 'Dialog.confirm', @@ -102,52 +102,52 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '确认弹出框 By Fusion' + detail: '确认弹出框 By Fusion', }, { label: 'Message.success', kind: 'Method', insertText: 'Message.success(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '成功反馈提示 By Fusion' + detail: '成功反馈提示 By Fusion', }, { label: 'Message.error', kind: 'Method', insertText: 'Message.error(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '错误反馈提示 By Fusion' + detail: '错误反馈提示 By Fusion', }, { label: 'Message.help', kind: 'Method', insertText: 'Message.help(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '帮助反馈提示 By Fusion' + detail: '帮助反馈提示 By Fusion', }, { label: 'Message.loading', kind: 'Method', insertText: 'Message.loading(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: 'loading反馈提示 By Fusion' + detail: 'loading反馈提示 By Fusion', }, { label: 'Message.notice', kind: 'Method', insertText: 'Message.notice(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '注意反馈提示 By Fusion' + detail: '注意反馈提示 By Fusion', }, { label: 'Message.waining', kind: 'Method', insertText: 'Message.waining(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '警告反馈提示 By Fusion' + detail: '警告反馈提示 By Fusion', }, { label: 'Modal.confirm', @@ -162,10 +162,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '确认弹出框 By Antd' + detail: '确认弹出框 By Antd', }, { label: 'Modal.info', @@ -180,10 +180,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '信息弹出框 By Antd' + detail: '信息弹出框 By Antd', }, { label: 'Modal.success', @@ -198,10 +198,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '成功弹出框 By Antd' + detail: '成功弹出框 By Antd', }, { label: 'Modal.error', @@ -216,10 +216,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '错误弹出框 By Antd' + detail: '错误弹出框 By Antd', }, { label: 'Modal.warning', @@ -234,9 +234,9 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '警告弹出框 By Antd' - } -]; \ No newline at end of file + detail: '警告弹出框 By Antd', + }, +]; diff --git a/packages/editor-setters/src/json-setter/locale/utils.ts b/packages/editor-setters/src/json-setter/locale/utils.ts index a02a8dd06..d401ad511 100644 --- a/packages/editor-setters/src/json-setter/locale/utils.ts +++ b/packages/editor-setters/src/json-setter/locale/utils.ts @@ -1,11 +1,11 @@ import IntlMessageFormat from 'intl-messageformat'; export const isJSExpression = (obj = '') => { - if(obj && typeof obj === 'object' && obj.type === 'JSExpression') { + if (obj && typeof obj === 'object' && obj.type === 'JSExpression') { return true; } return false; -} +}; /** * 用于构造国际化字符串处理函数 @@ -18,4 +18,4 @@ export const generateI18n = (locale = 'zh-CN', messages = {}) => { const formater = new IntlMessageFormat(messages[key], locale); return formater.format(values); }; -} +}; diff --git a/packages/editor-setters/src/json-setter/locale/zh-CN.ts b/packages/editor-setters/src/json-setter/locale/zh-CN.ts index 951596009..f4f2e0630 100644 --- a/packages/editor-setters/src/json-setter/locale/zh-CN.ts +++ b/packages/editor-setters/src/json-setter/locale/zh-CN.ts @@ -33,4 +33,4 @@ export default { object: '对象ObjectButton', reactNode: '节点类型ReactNode', typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置', -}; \ No newline at end of file +}; diff --git a/packages/editor-setters/src/locale/snippets.ts b/packages/editor-setters/src/locale/snippets.ts index 7c8484c4f..2bcb0dd00 100644 --- a/packages/editor-setters/src/locale/snippets.ts +++ b/packages/editor-setters/src/locale/snippets.ts @@ -4,21 +4,21 @@ export default [ kind: 'Class', insertText: 'constants', detail: '应用全局常量', - documentation: '应用范围定义的通用常量' + documentation: '应用范围定义的通用常量', }, { label: 'utils', kind: 'Class', insertText: 'utils', detail: '应用全局公共函数', - documentation: '应用范围扩展的公共函数' + documentation: '应用范围扩展的公共函数', }, { label: 'state', kind: 'Enum', insertText: 'state', detail: '当前所在容器组件内部状态', - documentation: 'React Class内部状态state' + documentation: 'React Class内部状态state', }, { label: 'setState', @@ -26,7 +26,7 @@ export default [ insertText: 'setState({\n\t$0\n})', insertTextRules: 'InsertAsSnippet', detail: '设置当前所在容器组件的state数据', - documentation: '原生React方法，会自动更新组件视图' + documentation: '原生React方法，会自动更新组件视图', }, { label: 'reloadDataSource', @@ -34,45 +34,45 @@ export default [ insertText: 'reloadDataSource(${1:${2:namespace}, ${3:false}, ${4:callback}})', insertTextRules: 'InsertAsSnippet', detail: '刷新当前所在的容器组件', - documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图' + documentation: '触发当前所在的容器组件，重新发送异步请求，并用最新数据更新视图', }, { label: 'location', kind: 'Class', insertText: 'location', - detail: '路由解析对象' + detail: '路由解析对象', }, { label: 'location.query', kind: 'Value', insertText: 'location.query.${1:xxxx}', insertTextRules: 'InsertAsSnippet', - detail: '从路由解析对象中获取参数信息' + detail: '从路由解析对象中获取参数信息', }, { label: 'history', kind: 'Class', insertText: 'history', - detail: '路由历史对象' + detail: '路由历史对象', }, { label: 'React', kind: 'Keyword', insertText: 'React', - detail: 'React对象' + detail: 'React对象', }, { label: 'ReactDOM', kind: 'Keyword', insertText: 'ReactDOM', - detail: 'ReactDom对象' + detail: 'ReactDom对象', }, { label: 'ReactDOM.findDOMNode', kind: 'Function', insertText: 'ReactDOM.findDOMNode(${1:this.refs.xxxx})', insertTextRules: 'InsertAsSnippet', - detail: 'ReactDom查找真实dom node' + detail: 'ReactDom查找真实dom node', }, { label: 'Dialog.alert', @@ -84,10 +84,10 @@ export default [ '\tonOk: () => {', '\t\t$3', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: 'alert弹框 By Fusion' + detail: 'alert弹框 By Fusion', }, { label: 'Dialog.confirm', @@ -102,52 +102,52 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '确认弹出框 By Fusion' + detail: '确认弹出框 By Fusion', }, { label: 'Message.success', kind: 'Method', insertText: 'Message.success(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '成功反馈提示 By Fusion' + detail: '成功反馈提示 By Fusion', }, { label: 'Message.error', kind: 'Method', insertText: 'Message.error(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '错误反馈提示 By Fusion' + detail: '错误反馈提示 By Fusion', }, { label: 'Message.help', kind: 'Method', insertText: 'Message.help(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '帮助反馈提示 By Fusion' + detail: '帮助反馈提示 By Fusion', }, { label: 'Message.loading', kind: 'Method', insertText: 'Message.loading(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: 'loading反馈提示 By Fusion' + detail: 'loading反馈提示 By Fusion', }, { label: 'Message.notice', kind: 'Method', insertText: 'Message.notice(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '注意反馈提示 By Fusion' + detail: '注意反馈提示 By Fusion', }, { label: 'Message.waining', kind: 'Method', insertText: 'Message.waining(${1:content})', insertTextRules: 'InsertAsSnippet', - detail: '警告反馈提示 By Fusion' + detail: '警告反馈提示 By Fusion', }, { label: 'Modal.confirm', @@ -162,10 +162,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '确认弹出框 By Antd' + detail: '确认弹出框 By Antd', }, { label: 'Modal.info', @@ -180,10 +180,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '信息弹出框 By Antd' + detail: '信息弹出框 By Antd', }, { label: 'Modal.success', @@ -198,10 +198,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '成功弹出框 By Antd' + detail: '成功弹出框 By Antd', }, { label: 'Modal.error', @@ -216,10 +216,10 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '错误弹出框 By Antd' + detail: '错误弹出框 By Antd', }, { label: 'Modal.warning', @@ -234,9 +234,9 @@ export default [ '\tonCancel: () => {', '\t\t$4', '\t}', - '})' + '})', ].join('\n'), insertTextRules: 'InsertAsSnippet', - detail: '警告弹出框 By Antd' - } -]; \ No newline at end of file + detail: '警告弹出框 By Antd', + }, +]; diff --git a/packages/editor-setters/src/locale/utils.ts b/packages/editor-setters/src/locale/utils.ts index a02a8dd06..d401ad511 100644 --- a/packages/editor-setters/src/locale/utils.ts +++ b/packages/editor-setters/src/locale/utils.ts @@ -1,11 +1,11 @@ import IntlMessageFormat from 'intl-messageformat'; export const isJSExpression = (obj = '') => { - if(obj && typeof obj === 'object' && obj.type === 'JSExpression') { + if (obj && typeof obj === 'object' && obj.type === 'JSExpression') { return true; } return false; -} +}; /** * 用于构造国际化字符串处理函数 @@ -18,4 +18,4 @@ export const generateI18n = (locale = 'zh-CN', messages = {}) => { const formater = new IntlMessageFormat(messages[key], locale); return formater.format(values); }; -} +}; diff --git a/packages/editor-setters/src/locale/zh-CN.ts b/packages/editor-setters/src/locale/zh-CN.ts index 951596009..f4f2e0630 100644 --- a/packages/editor-setters/src/locale/zh-CN.ts +++ b/packages/editor-setters/src/locale/zh-CN.ts @@ -33,4 +33,4 @@ export default { object: '对象ObjectButton', reactNode: '节点类型ReactNode', typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置', -}; \ No newline at end of file +}; diff --git a/packages/editor-setters/src/mixed-setter/index.tsx b/packages/editor-setters/src/mixed-setter/index.tsx index 7d288cc93..37ae54d57 100644 --- a/packages/editor-setters/src/mixed-setter/index.tsx +++ b/packages/editor-setters/src/mixed-setter/index.tsx @@ -10,6 +10,7 @@ import './index.scss'; export default class Mixed extends PureComponent { static displayName = 'Mixed'; + static propTypes = { locale: PropTypes.string, messages: PropTypes.object, @@ -22,6 +23,7 @@ export default class Mixed extends PureComponent { selectProps: PropTypes.object, radioGroupProps: PropTypes.object, }; + static defaultProps = { locale: 'zh-CN', messages: zhCN, @@ -32,8 +34,11 @@ export default class Mixed extends PureComponent { }, ], }; + typeMap: any; + i18n: (key: any, values?: {}) => string | void | Array; + constructor(props: Readonly<{}>) { super(props); const type = props.defaultType; // judgeTypeHandler(props, {}); @@ -43,11 +48,12 @@ export default class Mixed extends PureComponent { type, }; } + changeType(type: string) { if (typeof type === 'object' || type === this.state.type) return; const { onChange } = this.props; - let newValue = undefined; - const setterProps = this.typeMap[type]['props']; + let newValue; + const setterProps = this.typeMap[type].props; if (setterProps) { if (setterProps.value !== undefined) { newValue = setterProps.value; @@ -56,11 +62,12 @@ export default class Mixed extends PureComponent { } } if (type === 'BoolSetter' && newValue === undefined) { - newValue = false; //给切换到switch默认值为false + newValue = false; // 给切换到switch默认值为false } this.setState({ type }); onChange && onChange(newValue); } + render() { const { style = {}, className, locale, messages, types = [], defaultType, ...restProps } = this.props; this.typeMap = {}; @@ -78,7 +85,7 @@ export default class Mixed extends PureComponent { realTypes.push(name); }); let moreBtnNode = null; - //如果只有2种，且有变量表达式，则直接展示变量按钮 + // 如果只有2种，且有变量表达式，则直接展示变量按钮 if (realTypes.length > 1) { const isTwoType = !!(realTypes.length === 2 && ~realTypes.indexOf('ExpressionSetter')); const btnProps = { @@ -111,7 +118,7 @@ export default class Mixed extends PureComponent { const MenuItems: {} | null | undefined = []; realTypes.map((type) => { if (this.typeMap[type]) { - MenuItems.push({this.typeMap[type]['label']}); + MenuItems.push({this.typeMap[type].label}); } else { console.error( this.i18n('typeError', { diff --git a/packages/editor-setters/src/mixed-setter/locale/utils.ts b/packages/editor-setters/src/mixed-setter/locale/utils.ts index a02a8dd06..d401ad511 100644 --- a/packages/editor-setters/src/mixed-setter/locale/utils.ts +++ b/packages/editor-setters/src/mixed-setter/locale/utils.ts @@ -1,11 +1,11 @@ import IntlMessageFormat from 'intl-messageformat'; export const isJSExpression = (obj = '') => { - if(obj && typeof obj === 'object' && obj.type === 'JSExpression') { + if (obj && typeof obj === 'object' && obj.type === 'JSExpression') { return true; } return false; -} +}; /** * 用于构造国际化字符串处理函数 @@ -18,4 +18,4 @@ export const generateI18n = (locale = 'zh-CN', messages = {}) => { const formater = new IntlMessageFormat(messages[key], locale); return formater.format(values); }; -} +}; diff --git a/packages/editor-setters/src/mixed-setter/locale/zh-CN.ts b/packages/editor-setters/src/mixed-setter/locale/zh-CN.ts index 951596009..f4f2e0630 100644 --- a/packages/editor-setters/src/mixed-setter/locale/zh-CN.ts +++ b/packages/editor-setters/src/mixed-setter/locale/zh-CN.ts @@ -33,4 +33,4 @@ export default { object: '对象ObjectButton', reactNode: '节点类型ReactNode', typeError: 'Minix组件属性Types配置错误，存在不支持类型[{type}]，请检查组件属性配置', -}; \ No newline at end of file +}; diff --git a/packages/editor-setters/src/style-setter/index.tsx b/packages/editor-setters/src/style-setter/index.tsx index b6a75679c..004fe2bf1 100644 --- a/packages/editor-setters/src/style-setter/index.tsx +++ b/packages/editor-setters/src/style-setter/index.tsx @@ -5,25 +5,26 @@ import LowStyleSetter from '@ali/lc-style-setter'; import { globalLocale } from '@ali/lowcode-editor-core'; export default class StyleSetter extends Component { - static displayName = 'StyleSetter'; + static propTypes = { value: PropTypes.object, onChange: PropTypes.func, placeholder: PropTypes.string, - locale: PropTypes.string + locale: PropTypes.string, }; + static defaultProps = { value: {}, onChange: () => { }, placeholder: '', - locale: globalLocale.getLocale() || 'en-US' + locale: globalLocale.getLocale() || 'en-US', }; onChange = (val: any) => { const { onChange } = this.props; onChange(val.native); - } + }; render() { const { value } = this.props; @@ -33,5 +34,4 @@ export default class StyleSetter extends Component {
); } - } diff --git a/packages/editor-skeleton/src/area.ts b/packages/editor-skeleton/src/area.ts index d0f4b0f4f..6ff3b6e07 100644 --- a/packages/editor-skeleton/src/area.ts +++ b/packages/editor-skeleton/src/area.ts @@ -5,7 +5,7 @@ import { IWidget } from './widget/widget'; import { IWidgetBaseConfig } from './types'; export default class Area { - @obx private _visible: boolean = true; + @obx private _visible = true; @computed get visible() { if (this.exclusive) { @@ -22,7 +22,8 @@ export default class Area; - constructor(readonly skeleton: Skeleton, readonly name: string, handle: (item: T | C) => T, private exclusive?: boolean, defaultSetCurrent: boolean = false) { + + constructor(readonly skeleton: Skeleton, readonly name: string, handle: (item: T | C) => T, private exclusive?: boolean, defaultSetCurrent = false) { this.container = skeleton.createContainer(name, handle, exclusive, () => this.visible, defaultSetCurrent); } @@ -43,11 +44,12 @@ export default class Area { onSort(sortedIds: Array) { const { itemsMap } = this.state; - const { onChange ,itemSetter,field} = this.props; + const { onChange, itemSetter, field } = this.props; const items = sortedIds.map((id, index) => { const item = itemsMap.get(id)!; // item.setKey(index); @@ -85,7 +85,7 @@ export class ListSetter extends Component { }); // 对itemsMap重新生成并刷新当前setter数据 - let newItems = [],newItemsMap = {} + const newItems = []; const newItemsMap = {}; itemsMap.clear(); for (let i = 0; i < items.length; i++) { const newItem = field.createField({ @@ -101,12 +101,13 @@ export class ListSetter extends Component { onChange(values); this.setState({ - items:newItems, - itemsMap + items: newItems, + itemsMap, }); } private scrollToLast = false; + onAdd() { const { items, itemsMap } = this.state; const { itemSetter } = this.props; @@ -127,7 +128,7 @@ export class ListSetter extends Component { } onRemove(field: SettingField) { - const {onChange, itemSetter} = this.props; + const { onChange, itemSetter } = this.props; const { items, itemsMap } = this.state; let i = items.indexOf(field); const values = items.map((item) => { @@ -145,7 +146,7 @@ export class ListSetter extends Component { } itemsMap.delete(field.id); field.remove(); - onChange(values) + onChange(values); this.setState({ items: items.slice() }); } @@ -171,7 +172,7 @@ export class ListSetter extends Component { } const { items } = this.state; - const scrollToLast = this.scrollToLast; + const { scrollToLast } = this; this.scrollToLast = false; const lastIndex = items.length - 1; @@ -197,12 +198,12 @@ export class ListSetter extends Component { return (
- {/*
+ {/*
-
*/} +
*/} {columns &&
{columns}
} {content}