form-driver 0.3.13 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.3.13",
+  "version": "0.4.0",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [
@@ -55,19 +55,20 @@
   "displayName": "form-driver",
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@babel/runtime": "^7.9.2",
     "ali-oss": "^6.17.1",
-    "lodash": "^4.17.20",
     "antd": "4.18.7",
     "antd-mobile": "^2.3.4",
+    "clsx": "^2.1.1",
+    "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "@ant-design/tools": "^13.5.0-beta.1",
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
@@ -84,6 +85,9 @@
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-image": "^2.0.6",
     "@rollup/plugin-replace": "^2.3.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.10",
     "@types/react": "^17.0.0",
@@ -119,11 +123,11 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-typescript2": "^0.36.0",
     "style-loader": "^0.20.0",
-    "ts-loader": "^8.0.14",
+    "ts-loader": "^8.4.0",
     "ts-node-dev": "^1.0.0",
-    "typescript": "^3.8.3",
+    "typescript": "^4.9.0",
     "webpack": "^4.16.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.11"

package/src/framework/Init.tsx

@@ -1,19 +1,19 @@
-import { assembly } from './Assembly';
+import { assembly } from "./Assembly";
 import { MEnumType } from "../types/MEnumType";
 import { MGB2260Type } from "../types/MGB2260Type";
-import { MDateTimeType } from '../types/MDateTimeType';
-import { MSetType } from '../types/MSetType';
+import { MDateTimeType } from "../types/MDateTimeType";
+import { MSetType } from "../types/MSetType";
 import { MArrayType } from "../types/MArrayType";
-import { MStringType } from '../types/MStringType';
-import { MIntDiffType } from '../types/MIntDiffType';
-import { MIntType } from '../types/MIntType';
+import { MStringType } from "../types/MStringType";
+import { MIntDiffType } from "../types/MIntDiffType";
+import { MIntType } from "../types/MIntType";
 import { MMatrixType } from "../types/MMatrixType";
 import { MObjectType } from "../types/MObjectType";
 import { MExperienceType } from "../types/MExperienceType";
 import { MCnAddress } from "../types/MCnAddressType";
-import { MTelType, MCnPhoneType, MEmailType } from '../types/MTelType';
+import { MTelType, MCnPhoneType, MEmailType } from "../types/MTelType";
 import { MDateRangeType } from "../types/MDateRangeType";
-import { ArrayViewer } from '../ui/readable/ArrayViewer';
+import { ArrayViewer } from "../ui/readable/ArrayViewer";
 import { ADatetimePicker } from "../ui/editor/basic/ADatetimePicker";
 import { AGB2260 } from "../ui/editor/basic/AGB2260";
 import { ARadio } from "../ui/editor/basic/ARadio";
@@ -24,33 +24,34 @@ import { NPS } from "../ui/editor/basic/NPS";
 import { AIntBox } from "../ui/editor/basic/AIntBox";
 import { ACheckBox } from "../ui/editor/basic/ACheckBox";
 import { AInputBox } from "../ui/editor/basic/AInputBox";
-import { AMatrix } from '../ui/editor/complex/AMatrix';
-import { ASpecInputBox } from '../ui/editor/basic/ASpecInputBox';
-import { AForm } from '../ui/editor/complex/AForm';
-import { DivViewer } from '../ui/readable/DivViewer';
+import { AMatrix } from "../ui/editor/complex/AMatrix";
+import { ASpecInputBox } from "../ui/editor/basic/ASpecInputBox";
+import { AForm } from "../ui/editor/complex/AForm";
+import { DivViewer } from "../ui/readable/DivViewer";
 import { ASelector } from "../ui/editor/basic/ASelector";
-import { ASetSelector } from '../ui/editor/basic/ASetSelector';
-import { AExperience } from '../ui/editor/complex/AExperience';
-import { ACnAddress } from '../ui/editor/complex/ACnAddress';
-import { AArray } from '../ui/editor/complex/AArray';
-import { AArrayGrid } from '../ui/editor/complex/AArrayGrid';
-import { ARangePicker } from '../ui/editor/basic/ARangePicker';
-import { AIntDiff } from '../ui/editor/complex/AIntDiff';
-import { MFloatType } from '../types/MFloatType';
-import { MDecorationType } from '../types/MDecorationType';
-import { DecorationViewer } from '../ui/readable/DecorationViewer';
-import { ATable } from '../ui/editor/complex/ATable';
-import { ARemoteSelector } from '../ui/editor/basic/ARemoteSelector';
-import { JsonEditor } from '../ui/editor/complex/JsonEditor';
+import { ASetSelector } from "../ui/editor/basic/ASetSelector";
+import { AExperience } from "../ui/editor/complex/AExperience";
+import { ACnAddress } from "../ui/editor/complex/ACnAddress";
+import { AArray } from "../ui/editor/complex/AArray";
+import { ACheckDrag } from "../ui/editor/complex/ACheckDrag";
+import { AArrayGrid } from "../ui/editor/complex/AArrayGrid";
+import { ARangePicker } from "../ui/editor/basic/ARangePicker";
+import { AIntDiff } from "../ui/editor/complex/AIntDiff";
+import { MFloatType } from "../types/MFloatType";
+import { MDecorationType } from "../types/MDecorationType";
+import { DecorationViewer } from "../ui/readable/DecorationViewer";
+import { ATable } from "../ui/editor/complex/ATable";
+import { ARemoteSelector } from "../ui/editor/basic/ARemoteSelector";
+import { JsonEditor } from "../ui/editor/complex/JsonEditor";
 import _ from "lodash";
-import { A } from '../ui/readable/A';
-import { ADialogForm } from '../ui/editor/complex/ADialogForm';
-import { MVLPairType } from '../types/MVLPairType';
-import { MKvSetType } from '../types/MKvSetType';
-import { AKvSet } from '../ui/editor/basic/AKvSet';
-import { ACascadePicker } from '../ui/editor/basic/ACascadePicker';
-import { MCascadeType } from '../types/MCascadeType';
-import editorMap from './editorMap';
+import { A } from "../ui/readable/A";
+import { ADialogForm } from "../ui/editor/complex/ADialogForm";
+import { MVLPairType } from "../types/MVLPairType";
+import { MKvSetType } from "../types/MKvSetType";
+import { AKvSet } from "../ui/editor/basic/AKvSet";
+import { ACascadePicker } from "../ui/editor/basic/ACascadePicker";
+import { MCascadeType } from "../types/MCascadeType";
+import editorMap from "./editorMap";
 import OssUpload from "../plugins/ossUpload/index";
 
 // 在 m3 中注册oss上传插件
@@ -60,140 +61,141 @@ let init = false;
 /**
  * 确保m3已经初始化ensureM3
  */
-export function ensureM3(){
-  if(init){
+export function ensureM3() {
+  if (init) {
     return;
   }
   init = true;
   assembly.types = _.merge(assembly.types, {
-    "enum":             MEnumType,
-    "gb2260":           MGB2260Type,
-    "datetime":         MDateTimeType,
-    "year":             MDateTimeType,
-    "yearMonth":        MDateTimeType,
-    "yearMonthDay":     MDateTimeType,
-    "set":              MSetType,
-    "array":            MArrayType,
-    "string":           MStringType,
-    "intDiff":          MIntDiffType,
-    "int":              MIntType,
-    "float":            MFloatType,
-    "matrix":           MMatrixType,
-    "object":           MObjectType,
-    "experience":       MExperienceType,
-    "cnAddress":        MCnAddress,
-    "tel":              MTelType,
-    "email":            MEmailType,
-    "cnPhone":          MCnPhoneType,
-    "dateRange":        MDateRangeType,
-    "decoration":       MDecorationType,
-    "vl":               MVLPairType,
-    "kvSet":            MKvSetType,
-    "cascade":          MCascadeType,
+    enum: MEnumType,
+    gb2260: MGB2260Type,
+    datetime: MDateTimeType,
+    year: MDateTimeType,
+    yearMonth: MDateTimeType,
+    yearMonthDay: MDateTimeType,
+    set: MSetType,
+    array: MArrayType,
+    string: MStringType,
+    intDiff: MIntDiffType,
+    int: MIntType,
+    float: MFloatType,
+    matrix: MMatrixType,
+    object: MObjectType,
+    experience: MExperienceType,
+    cnAddress: MCnAddress,
+    tel: MTelType,
+    email: MEmailType,
+    cnPhone: MCnPhoneType,
+    dateRange: MDateRangeType,
+    decoration: MDecorationType,
+    vl: MVLPairType,
+    kvSet: MKvSetType,
+    cascade: MCascadeType,
   });
-  
+
   // 实验性组件 AArray、ATable、ADialogForm、AForm、ASetSelector、JsonEditor
   assembly.viewers = _.merge(assembly.viewers, {
-    "ADatetimePicker":  ADatetimePicker,
-    "AGB2260":          AGB2260,
-    "ARadio":           ARadio,
-    "ARate":            ARate,
-    "AUpload":          AUpload,
-    "ATreeSelect":      ATreeSelect,
-    "NPS":              NPS,
-    "ACheckBox":        ACheckBox,
-    "AIntBox":          AIntBox,
-    "AInputBox":        AInputBox,
-    "AMatrix":          AMatrix,
-    "ASpecInputBox":    ASpecInputBox,
-    "AForm":            AForm,
-    "AArray":           AArray,
-    "AArrayGrid":       AArrayGrid,
-    "ARangePicker":     ARangePicker,
-    "AIntDiff":         AIntDiff,
-    "ACnAddress":       ACnAddress,
-    "AExperience":      AExperience,
-    "ASetSelector":     ASetSelector,
-    "ASelector":        ASelector,
-    "DivViewer":        DivViewer,
-    "ArrayViewer":      ArrayViewer,
-    "DecorationViewer": DecorationViewer,
-    "ATable":           ATable,
-    "ARemoteSelector":  ARemoteSelector,
-    "JsonEditor":       JsonEditor,
-    "A":                A,
-    "ADialogForm":      ADialogForm,
-    "AKvSet":           AKvSet,
-    "ACascadePicker": ACascadePicker,
+    ADatetimePicker: ADatetimePicker,
+    AGB2260: AGB2260,
+    ARadio: ARadio,
+    ARate: ARate,
+    AUpload: AUpload,
+    ATreeSelect: ATreeSelect,
+    NPS: NPS,
+    ACheckBox: ACheckBox,
+    AIntBox: AIntBox,
+    AInputBox: AInputBox,
+    AMatrix: AMatrix,
+    ASpecInputBox: ASpecInputBox,
+    AForm: AForm,
+    AArray: AArray,
+    ACheckDrag: ACheckDrag,
+    AArrayGrid: AArrayGrid,
+    ARangePicker: ARangePicker,
+    AIntDiff: AIntDiff,
+    ACnAddress: ACnAddress,
+    AExperience: AExperience,
+    ASetSelector: ASetSelector,
+    ASelector: ASelector,
+    DivViewer: DivViewer,
+    ArrayViewer: ArrayViewer,
+    DecorationViewer: DecorationViewer,
+    ATable: ATable,
+    ARemoteSelector: ARemoteSelector,
+    JsonEditor: JsonEditor,
+    A: A,
+    ADialogForm: ADialogForm,
+    AKvSet: AKvSet,
+    ACascadePicker: ACascadePicker,
   });
 
   assembly.morph = _.merge(assembly.morph, {
     // 编辑
-    "editor": {
-      "enum": "ASelector",
-      "gb2260":"AGB2260",
-      "datetime": "ADatetimePicker",
-      "year": "ADatetimePicker",
-      "yearMonth": "ADatetimePicker",
-      "yearMonthDay": "ADatetimePicker",
-      "set": "ACheckBox",
-      "array": "AArray",
-      "string": "AInputBox",
-    
-      "intDiff": "AIntDiff",
-      "int": "AIntBox",
-      "float": "AIntBox",
-      
-      "matrix": "AMatrix",
-      "object": "AForm",
-      
-      "experience": "AExperience",
-      "kvSet": "AKvSet",
-      
+    editor: {
+      enum: "ASelector",
+      gb2260: "AGB2260",
+      datetime: "ADatetimePicker",
+      year: "ADatetimePicker",
+      yearMonth: "ADatetimePicker",
+      yearMonthDay: "ADatetimePicker",
+      set: "ACheckBox",
+      array: "AArray",
+      string: "AInputBox",
+
+      intDiff: "AIntDiff",
+      int: "AIntBox",
+      float: "AIntBox",
+
+      matrix: "AMatrix",
+      object: "AForm",
+
+      experience: "AExperience",
+      kvSet: "AKvSet",
+
       // TODO 这些类型还没有校验
-      "cnAddress": "ACnAddress",
-      "tel": "ASpecInputBox",
-      "email": "ASpecInputBox",
-      "cnPhone": "ASpecInputBox",
-      "dateRange": "ARangePicker",
-      "decoration": "DecorationViewer",
+      cnAddress: "ACnAddress",
+      tel: "ASpecInputBox",
+      email: "ASpecInputBox",
+      cnPhone: "ASpecInputBox",
+      dateRange: "ARangePicker",
+      decoration: "DecorationViewer",
 
-      "vl": "ARemoteSelector",
-      "cascade": "ACascadePicker"
+      vl: "ARemoteSelector",
+      cascade: "ACascadePicker",
     },
     // 详情
-    "readable": {
-      "enum": "DivViewer",
-      "gb2260": "DivViewer",
-      "datetime": "DivViewer",
-      "year": "DivViewer",
-      "yearMonth": "DivViewer",
-      "yearMonthDay": "DivViewer",
+    readable: {
+      enum: "DivViewer",
+      gb2260: "DivViewer",
+      datetime: "DivViewer",
+      year: "DivViewer",
+      yearMonth: "DivViewer",
+      yearMonthDay: "DivViewer",
+
+      set: "DivViewer",
+      array: "ArrayViewer",
+      string: "DivViewer",
 
-      "set": "DivViewer",
-      "array": "ArrayViewer",
-      "string": "DivViewer",
+      intDiff: "DivViewer",
+      int: "DivViewer",
+      float: "DivViewer",
 
-      "intDiff": "DivViewer",
-      "int": "DivViewer",
-      "float": "DivViewer",
+      matrix: "DivViewer",
+      object: "AForm",
+      experience: "DivViewer",
+      kvSet: "DivViewer",
 
-      "matrix": "DivViewer",
-      "object": "AForm",
-      "experience": "DivViewer",
-      "kvSet": "DivViewer",
+      cnAddress: "DivViewer",
+      tel: "DivViewer",
+      email: "DivViewer",
+      cnPhone: "DivViewer",
+      dateRange: "DivViewer",
+      decoration: "DecorationViewer",
+      vl: "DivViewer",
 
-      "cnAddress": "DivViewer",
-      "tel": "DivViewer",
-      "email": "DivViewer",
-      "cnPhone": "DivViewer",
-      "dateRange":"DivViewer",
-      "decoration": "DecorationViewer",
-      "vl": "DivViewer",
+      cascade: "DivViewer",
+    },
+  });
 
-      "cascade": "DivViewer"
-    }
-  })
-  
-  assembly.editors = _.merge(assembly.editors, editorMap)
-}
+  assembly.editors = _.merge(assembly.editors, editorMap);
+}

package/src/framework/M3.tsx

@@ -1,8 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import { M3Prop, MViewer } from './MViewer';
-import { MViewerDebug } from './MViewerDebug';
-import editorMap from './editorMap';
-import { MFieldSchema, M3UISpec, MFieldSchemaAnonymity } from "../../src/framework/Schema";
+import React, { useState, useEffect } from "react";
+import { M3Prop, MViewer } from "./MViewer";
+import { MViewerDebug } from "./MViewerDebug";
+import editorMap from "./editorMap";
+import {
+  MFieldSchema,
+  M3UISpec,
+  MFieldSchemaAnonymity,
+} from "../../src/framework/Schema";
 import _ from "lodash";
 
 // 外部 schema 转化为内部
@@ -14,96 +18,116 @@ function deal(fieldSchema: MFieldSchemaAnonymity | MFieldSchema) {
       deal(f);
     }
   } else {
-    let opt = fieldSchema.option ?? fieldSchema.setFields ?? fieldSchema.enumFields
+    let opt =
+      fieldSchema.option ?? fieldSchema.setFields ?? fieldSchema.enumFields;
     if (opt) {
-      if (typeof opt === 'string') {
-        fieldSchema.option = opt.split(" ").map(
-          aEnum => {
-            const kv = aEnum.split("=");
-            return { label: kv[0], value: kv[1] ?? kv[0] };
-          }
-        );
+      if (typeof opt === "string") {
+        fieldSchema.option = opt.split(" ").map((aEnum) => {
+          const kv = aEnum.split("=");
+          return { label: kv[0], value: kv[1] ?? kv[0] };
+        });
       } else {
-        fieldSchema.option = opt
+        fieldSchema.option = opt;
       }
     }
 
-    fieldSchema.openOption = fieldSchema.openOption ?? fieldSchema.setOpen ?? fieldSchema.enumOpen
+    fieldSchema.openOption =
+      fieldSchema.openOption ?? fieldSchema.setOpen ?? fieldSchema.enumOpen;
 
     if (!fieldSchema.type && fieldSchema.editor) {
-      Object.assign(fieldSchema, editorMap[fieldSchema.editor])
+      Object.assign(fieldSchema, editorMap[fieldSchema.editor]);
     }
   }
 }
 
 // 标准化 schema
-function standardSchema(schema: MFieldSchema | MFieldSchema[], layout?: M3UISpec) {
-  const _schema = _.cloneDeep(schema)
+function standardSchema(
+  schema: MFieldSchema | MFieldSchema[],
+  layout?: M3UISpec
+) {
+  const _schema = _.cloneDeep(schema);
   if (_.isArray(_schema)) {
-    _schema.forEach(item => {
-      deal(item)
-    })
+    _schema.forEach((item) => {
+      deal(item);
+    });
     const temp: MFieldSchema = {
-      name: '__root__',
-      type: 'object',
-      objectFields: _schema
-    }
+      name: "__root__",
+      type: "object",
+      objectFields: _schema,
+    };
     if (layout) {
-      temp.uispec = layout
+      temp.uispec = layout;
     }
-    return _.cloneDeep(temp)
+    return _.cloneDeep(temp);
   } else {
-    deal(_schema)
-    return _schema
+    deal(_schema);
+    return _schema;
   }
 }
 
 const M3 = (props: React.PropsWithChildren<M3Prop & { debug?: boolean }>) => {
-
-  let [database, setDatabase] = useState(_.cloneDeep(props.database))
-  let [schema, setSchema] = useState(standardSchema(props.schema))
-  let [k, setK] = useState(0)
+  let [database, setDatabase] = useState(_.cloneDeep(props.database));
+  let [schema, setSchema] = useState(standardSchema(props.schema));
+  let [k, setK] = useState(0);
 
   // debug 属性为真 且 页面地址携带 debug 参数，开启调试模式
-  let debug = props.debug || (window.location.search.indexOf("debug") >= 0 || window.location.hash.indexOf("debug") >= 0);
+  let debug =
+    props.debug ||
+    window.location.search.indexOf("debug") >= 0 ||
+    window.location.hash.indexOf("debug") >= 0;
 
-  const changeSchema = v => {
-    setSchema(standardSchema(v))
-    setK(++k)
-  }
-  const changeDatabase = v => {
-    setDatabase(_.cloneDeep(v))
-    setK(++k)
-  }
+  const changeSchema = (v) => {
+    setSchema(standardSchema(v));
+    setK(++k);
+  };
+  const changeDatabase = (v) => {
+    setDatabase(_.cloneDeep(v));
+    setK(++k);
+  };
 
   if (props.form) {
-    props.form.setSchema = changeSchema
-    props.form.setDatabase = changeDatabase
-    props.form.getSchema = () => schema
-    props.form.getDatabase = () => database
+    props.form.setSchema = changeSchema;
+    props.form.setDatabase = changeDatabase;
+    props.form.getSchema = () => schema;
+    props.form.getDatabase = () => database;
   }
 
   useEffect(() => {
-    changeDatabase(props.schema)
-  }, [props.schema])
+    changeDatabase(props.schema);
+  }, [props.schema]);
 
   useEffect(() => {
-    changeDatabase(props.database)
-  }, [props.database])
+    changeDatabase(props.database);
+  }, [props.database]);
 
-  return (
-    debug ? <MViewerDebug key={k} {...props} database={database} schema={schema} changeSchema={changeSchema} changeDatabase={changeDatabase} /> :
-      <MViewer key={k} {...props} database={database} schema={schema} changeSchema={changeSchema} changeDatabase={changeDatabase} />
+  return debug ? (
+    <MViewerDebug
+      key={k}
+      {...props}
+      database={database}
+      schema={schema}
+      changeSchema={changeSchema}
+      changeDatabase={changeDatabase}
+    />
+  ) : (
+    <MViewer
+      key={k}
+      {...props}
+      database={database}
+      schema={schema}
+      changeSchema={changeSchema}
+      changeDatabase={changeDatabase}
+    />
   );
-}
+};
 
 export default M3;
 
 export function useForm() {
   return {
-    setSchema: (v) => { },
-    setDatabase: (v) => { },
-    getSchema: () => { },
-    getDatabase: () => { },
-  }
+    setSchema: (v) => {},
+    setDatabase: (v) => {},
+    getSchema: () => {},
+    getDatabase: () => {},
+  };
 }