feat: 编辑器剥离UI组件库

Author: mezhanglei

package-lock.json

@@ -2,14 +2,17 @@
 
 English | [中文说明](./README_CN.md)
 
-[![](https://img.shields.io/badge/version-4.1.13-green)](https://www.npmjs.com/package/@simpleform/editor)
+[![](https://img.shields.io/badge/version-4.1.14-green)](https://www.npmjs.com/package/@simpleform/editor)
 
 > Based on `react` implementation of the form designer , support for custom components , template import and export , visual design and other form design features , the secondary development is very simple .
 
 * [Preview](https://mezhanglei.github.io/simpleform/demo/#/)
 * [Guide](https://mezhanglei.github.io/simpleform/docs/#/)
 * [UI widgets](https://ant.design/index-cn/) `antd@5.x`, the designer registers the base form control by default.
 
+# Matters
+ - It is recommended to use version `>=4.2`;
+
 ## Introduction
 - Designer Composition: The designer consists of six modules
   * Configuration context `EditorProvider`: provides the context for the editor

packages/editor/README.md

@@ -2,14 +2,17 @@
 
 [English](./README.md) | 中文说明
 
-[![](https://img.shields.io/badge/version-4.1.13-green)](https://www.npmjs.com/package/@simpleform/editor)
+[![](https://img.shields.io/badge/version-4.1.14-green)](https://www.npmjs.com/package/@simpleform/editor)
 
 > 基于`react`实现的表单设计器，支持自定义组件，模板导入导出，可视化设计等表单设计功能，二次开发非常简单。
 
 * [在线预览](https://mezhanglei.github.io/simpleform/demo/#/)
 * [开发指南](https://mezhanglei.github.io/simpleform/docs/#/)
 * [默认组件库](https://ant.design/index-cn/) `antd@5.x`，设计器默认注册了基础的表单控件.
 
+# 注意
+ - 建议使用稳定版本`>=4.2`;
+
 ## 简介
 - 设计器组成：设计器包含六大模块
   * 配置上下文`EditorProvider`：提供编辑器的上下文环境

packages/editor/README_CN.md

@@ -1,11 +1,18 @@
-import widgets from './components';
+import widgets from '../components';
 import dayjs from 'dayjs';
+import { createRequest } from '@simpleform/editor';
+
+// TODO axios请求配置
+const axiosConfig = {
+
+};
 
 // 渲染引擎配置项
 export default {
   // 组件内的变量
   variables: {
-    dayjs
+    dayjs,
+    request: createRequest(axiosConfig)
   },
   // 注册组件
   components: widgets,

packages/editor/src/defineConfig.ts renamed to packages/editor/example/demo/FormEditor/FormRender/defineConfig.ts

@@ -1,21 +1,18 @@
 import React from 'react';
-import { FormRender as DefaultFormRender, FormChildren as DefaultFormChildren, createRequest, CustomFormChildrenProps, CustomFormRenderProps } from '../../../src';
+import DefaultFormRender, { FormChildren as DefaultFormChildren } from '@simpleform/render';
+import { CustomFormChildrenProps, CustomFormRenderProps } from '@simpleform/editor';
+import '@simpleform/editor/lib/css/main.css';
 import defineConfig from './defineConfig';
 
-export * from '../../../src';
-
-// TODO axios请求配置
-const axiosConfig = {
-
-};
+export * from '@simpleform/render';
 
 export function FormChildren(props: CustomFormChildrenProps) {
   const { components, variables, ...rest } = props;
   return (
     <DefaultFormChildren
-      options={{ props: { autoComplete: 'off' } }}
+      options={defineConfig.options}
       components={{ ...defineConfig.components, ...components }}
-      variables={{ ...variables, request: createRequest(axiosConfig) }}
+      variables={{ ...defineConfig.variables, ...variables }}
       {...rest}
     />
   );
@@ -25,9 +22,9 @@ export default function FormRender(props: CustomFormRenderProps) {
   const { components, variables, ...rest } = props;
   return (
     <DefaultFormRender
-      options={{ props: { autoComplete: 'off' } }}
+      options={defineConfig.options}
       components={{ ...defineConfig.components, ...components }}
-      variables={{ ...variables, request: createRequest(axiosConfig) }}
+      variables={{ ...defineConfig.variables, ...variables }}
       {...rest}
     />
   );

packages/editor/example/demo/FormRender/index.tsx renamed to packages/editor/example/demo/FormEditor/FormRender/index.tsx

@@ -2,8 +2,7 @@ import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { Button, Flex, Tag } from 'antd';
 import './index.less';
-import { CustomOptions, FormDesignData } from '../../FormRender';
-import ModalWrapper, { ModalWrapperProps } from '../../../../src/components/common/GlobalModal/modalWrapper';
+import { ModalWrapper, ModalWrapperProps, CustomOptions, FormDesignData } from '../';
 import demo from './demo';
 
 export interface TemplateItem {

packages/editor/example/demo/FormEditor/ImportTemplate/index.tsx

@@ -1,6 +1,6 @@
 import { Divider, DividerProps } from 'antd';
 import React from 'react';
-import { CommonFormProps } from '../../../formrender';
+import { CommonFormProps } from '@simpleform/editor';
 
 // 分割线(在拖拽过程中会出现渲染报错，所以需要移除children属性)
 export const CustomDivider: React.FC<CommonFormProps<unknown> & DividerProps & { label?: string }> = (props) => {

packages/editor/src/config/pc/divider/index.ts renamed to packages/editor/example/demo/FormEditor/components/Divider/config.ts

@@ -34,7 +34,7 @@ const baseSetting = [
 const operationSetting = [
   {
     name: 'hidden',
-    type: 'OperateCheckbox',
+    type: 'CheckboxWithRules',
     inline: true,
     compact: true,
     children: '隐藏'

packages/editor/src/components/common/Divider/index.tsx renamed to packages/editor/example/demo/FormEditor/components/Divider/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import FormRender, { useSimpleForm, FormRenderProps, CommonFormProps } from '..';
+import FormRender, { useSimpleForm, FormRenderProps } from '../../FormRender';
+import { CommonFormProps } from '@simpleform/editor';
 import data from './data';
 
 const ExampleGroup = (props: CommonFormProps) => {

packages/editor/src/config/pc/divider/setting.ts renamed to packages/editor/example/demo/FormEditor/components/Divider/setting.ts

@@ -1,5 +1,5 @@
+import FieldSetting from '../../editorConfig/fieldSetting';
 import Setting from './setting';
-import FieldSetting from '../../fieldSetting';
 
 export default {
   panel: {

packages/editor/example/demo/FormEditor/config/example/index.ts renamed to packages/editor/example/demo/FormEditor/components/Example/config.ts

@@ -3,9 +3,7 @@ import { RcFile } from 'antd/lib/upload';
 import React, { useEffect, useState } from 'react';
 import { UploadFile } from 'antd/lib/upload/interface';
 import './index.less';
-import { objectToFormData } from '../../../utils/object';
-import { DOC_MIME_KEYS, DOC_MIME_VALUES, isDocFile } from '../../../utils/mime';
-import { CommonFormProps } from '../../../formrender';
+import { objectToFormData, DOC_MIME_KEYS, DOC_MIME_VALUES, isDocFile, CommonFormProps } from '@simpleform/editor';
 import { AxiosInstance } from 'axios';
 
 // 扩展后的文件类型

packages/editor/example/demo/FormRender/example/data.ts renamed to packages/editor/example/demo/FormEditor/components/Example/data.ts

@@ -37,14 +37,14 @@ const baseSetting = [
 const operationSetting = [
   {
     name: 'hidden',
-    type: 'OperateCheckbox',
+    type: 'CheckboxWithRules',
     inline: true,
     compact: true,
     children: '隐藏'
   },
   {
     name: 'props.disabled',
-    type: 'OperateCheckbox',
+    type: 'CheckboxWithRules',
     inline: true,
     compact: true,
     children: '禁用'
@@ -54,7 +54,7 @@ const operationSetting = [
 const rulesSetting = [
   {
     name: 'rules',
-    type: 'RulesGroup',
+    type: 'ValidatorSetting',
     compact: true,
     props: {
       includes: ['required']

packages/editor/example/demo/FormRender/example/index.tsx renamed to packages/editor/example/demo/FormEditor/components/Example/index.tsx

@@ -2,13 +2,20 @@ import React from "react";
 import classnames from "classnames";
 import './index.less';
 import { FormTableProps } from "..";
-import pickAttrs from '../../../../utils/pickAttrs';
-import { CustomFormRenderProps, joinFormPath, renderWidgetItem } from "../../../../formrender";
-import BaseDnd from "../../../../view/BaseDnd";
-import Icon from '../../SvgIcon';
-import { getCommonOptions, getWidgetItem, setWidgetItem } from '../../../../utils/utils';
+import {
+  BaseSelection,
+  BaseSelectionProps,
+  SvgIcon,
+  BaseDnd,
+  pickAttrs,
+  CustomFormRenderProps,
+  joinFormPath,
+  renderWidgetItem,
+  getCommonOptions,
+  getWidgetItem,
+  setWidgetItem
+} from "@simpleform/editor";
 import FormTableColSetting from './column-setting';
-import BaseSelection, { BaseSelectionProps } from '../../../../view/BaseSelection';
 
 const EditorTable = React.forwardRef<HTMLDivElement, FormTableProps<unknown>>(({
   columns = [],
@@ -32,10 +39,10 @@ const EditorTable = React.forwardRef<HTMLDivElement, FormTableProps<unknown>>(({
     placeholder: `${prefix}-placeholder`,
   };
 
-  const { path, formrender, context } = _options || {};
+  const { path, formrender, editorContext } = _options || {};
   const commonOptions = getCommonOptions(_options);
   const columnsPath = joinFormPath(path, 'props.columns');
-  const { settingForm, editorConfig } = context?.state || {};
+  const { settingForm, editorConfig } = editorContext?.state || {};
 
   // 监听列控件设置值
   const columnInputChange: CustomFormRenderProps['onValuesChange'] = ({ value }) => {
@@ -51,7 +58,7 @@ const EditorTable = React.forwardRef<HTMLDivElement, FormTableProps<unknown>>(({
       '操作属性': configSetting?.['操作属性'],
       '校验规则': configSetting?.['校验规则']
     });
-    context?.dispatch && context?.dispatch((old) => ({
+    editorContext?.dispatch && editorContext?.dispatch((old) => ({
       ...old,
       selected: Object.assign({ setting: mergeSetting }, nextSelected)
     }));
@@ -102,7 +109,7 @@ const EditorTable = React.forwardRef<HTMLDivElement, FormTableProps<unknown>>(({
                 _options={_childOptions}
                 configLabel="表格列"
                 onSelectHandler={onSelectHandler}
-                tools={[<Icon key="fuzhi" name="fuzhi" onClick={() => copyItem(col, colIndex)} />]}
+                tools={[<SvgIcon key="fuzhi" name="fuzhi" onClick={() => copyItem(col, colIndex)} />]}
               >
                 <div className={Classes.TableCol}>
                   <div className={Classes.TableColHead}>

packages/editor/example/demo/FormEditor/config/example/setting.ts renamed to packages/editor/example/demo/FormEditor/components/Example/setting.ts

@@ -1,6 +1,6 @@
 import { ColumnType, TableProps } from 'antd/lib/table';
 import React, { CSSProperties } from 'react';
-import { CommonFormProps, CustomGenerateWidgetItem } from '../../../formrender';
+import { CommonFormProps, CustomGenerateWidgetItem } from '@simpleform/editor';
 import EditorTable from './editor';
 import FormTable from './render';
 

packages/editor/src/config/pc/fileUpload/index.ts renamed to packages/editor/example/demo/FormEditor/components/FileUpload/config.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import "./components.less";
-import pickAttrs from '../../../../utils/pickAttrs';
+import { pickAttrs } from '@simpleform/editor';
 
 const prefix = "form-table";
 export const Classes = {

packages/editor/src/components/pc/FileUpload/index.less renamed to packages/editor/example/demo/FormEditor/components/FileUpload/index.less

@@ -1,11 +1,14 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Button, message, Table, TableProps } from "antd";
-import { renderWidgetItem, joinFormPath } from "../../../../formrender";
+import {
+  renderWidgetItem,
+  joinFormPath,
+  defaultGetId,
+  SvgIcon,
+  pickAttrs
+} from "@simpleform/editor";
 import './index.less';
-import { defaultGetId } from "../../../../utils/utils";
-import SvgIcon from '../../SvgIcon';
 import { FormTableProps } from "..";
-import pickAttrs from '../../../../utils/pickAttrs';
 
 const FormTable = React.forwardRef<any, FormTableProps>((props, ref) => {
   const {

packages/editor/src/components/pc/FileUpload/index.tsx renamed to packages/editor/example/demo/FormEditor/components/FileUpload/index.tsx

@@ -21,14 +21,14 @@ const baseSetting = [
 const operationSetting = [
   {
     name: 'hidden',
-    type: 'OperateCheckbox',
+    type: 'CheckboxWithRules',
     inline: true,
     compact: true,
     children: '隐藏'
   },
   {
     name: 'props.disabled',
-    type: 'OperateCheckbox',
+    type: 'CheckboxWithRules',
     inline: true,
     compact: true,
     children: '禁用'
@@ -38,7 +38,7 @@ const operationSetting = [
 const rulesSetting = [
   {
     name: 'rules',
-    type: 'RulesGroup',
+    type: 'ValidatorSetting',
     compact: true,
     props: {
       includes: ['required']

packages/editor/src/config/pc/fileUpload/setting.ts renamed to packages/editor/example/demo/FormEditor/components/FileUpload/setting.ts

@@ -1,9 +1,5 @@
 @form-primary-color: #FF4040; // 全局主色
 
-.edit-col {
-  padding: 1px;
-}
-
 .col-selection {
   min-height: 40px;
   height: 100%;
@@ -14,4 +10,12 @@
   word-break: break-all;
   box-sizing: border-box;
   outline: 1px dashed #b8b8b8;
+}
+
+.custom-col {
+  padding: 10px;
+}
+
+.custom-col.edit-col {
+  padding: 1px;
 }