form-driver 0.1.21 → 0.2.0

package/es/m3.js

@@ -1213,6 +1213,7 @@ var MFieldViewer = /*#__PURE__*/function (_React$Component) {
     var props = _objectSpread$e({
       afterChange: function afterChange() {},
       changeSchema: function changeSchema() {},
+      changeDatabase: function changeDatabase() {},
       name: this.props.path
     }, this.props);
 
@@ -18109,6 +18110,7 @@ var AForm = /*#__PURE__*/function (_Viewer) {
       },
       parent: this.props.schema,
       changeSchema: this.props.changeSchema,
+      changeDatabase: this.props.changeDatabase,
       forceValid: this.props.forceValid,
       style: {
         width: "100%"
@@ -18806,7 +18808,11 @@ var AArrayGrid = /*#__PURE__*/function (_BaseViewer) {
 
       return /*#__PURE__*/React.createElement("th", {
         key: f.name + i + ":first"
-      }, (_f$label = f.label) != null ? _f$label : f.name);
+      }, f.required ? /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: "red"
+        }
+      }, "*") : null, (_f$label = f.label) != null ? _f$label : f.name);
     }), /*#__PURE__*/React.createElement("td", {
       key: ":\u64CD\u4F5C\u680F",
       width: "40px",
@@ -20754,7 +20760,8 @@ var MViewer = /*#__PURE__*/function (_React$Component) {
       path: "",
       morph: props.morph,
       afterChange: PersistantTool.patchAfterChange(props.afterChange, props.persistant),
-      changeSchema: props.changeSchema
+      changeSchema: props.changeSchema,
+      changeDatabase: props.changeDatabase
     }), props.children));
   };
 
@@ -21057,56 +21064,73 @@ function standardSchema(schema, layout) {
 }
 
 var M3 = function M3(props) {
-  var _useState = useState(props),
-      prevProp = _useState[0],
-      setPrevProp = _useState[1];
-
-  var _useState2 = useState(_.cloneDeep(props.database)),
-      database = _useState2[0],
-      setDatabase = _useState2[1];
+  var _useState = useState(_.cloneDeep(props.database)),
+      database = _useState[0],
+      setDatabase = _useState[1];
 
-  var _useState3 = useState(standardSchema(props.schema)),
-      schema = _useState3[0],
-      setSchema = _useState3[1];
+  var _useState2 = useState(standardSchema(props.schema)),
+      schema = _useState2[0],
+      setSchema = _useState2[1];
 
-  var _useState4 = useState(0),
-      k = _useState4[0],
-      setK = _useState4[1]; // debug 属性为真 且 页面地址携带 debug 参数，开启调试模式
+  var _useState3 = useState(0),
+      k = _useState3[0],
+      setK = _useState3[1]; // debug 属性为真 且 页面地址携带 debug 参数，开启调试模式
 
 
   var debug = props.debug || window.location.search.indexOf("debug") >= 0 || window.location.hash.indexOf("debug") >= 0;
-  useEffect(function () {
-    if (props.schema != prevProp.schema) {
-      setSchema(standardSchema(props.schema));
-      setPrevProp(props);
-      setK(++k);
-    }
-  }, [props.schema]);
-  useEffect(function () {
-    if (props.database != prevProp.database) {
-      setDatabase(_.cloneDeep(props.database));
-      setPrevProp(props);
-      setK(++k);
-    }
-  }, [props.database]);
 
   var changeSchema = function changeSchema(v) {
-    return setSchema(standardSchema(v));
+    setSchema(standardSchema(v));
+    setK(++k);
   };
 
+  var changeDatabase = function changeDatabase(v) {
+    setDatabase(_.cloneDeep(v));
+    setK(++k);
+  };
+
+  if (props.form) {
+    props.form.setSchema = changeSchema;
+    props.form.setDatabase = changeDatabase;
+
+    props.form.getSchema = function () {
+      return schema;
+    };
+
+    props.form.getDatabase = function () {
+      return database;
+    };
+  }
+
+  useEffect(function () {
+    changeDatabase(props.schema);
+  }, [props.schema]);
+  useEffect(function () {
+    changeDatabase(props.database);
+  }, [props.database]);
   return debug ? /*#__PURE__*/React.createElement(MViewerDebug, Object.assign({
     key: k
   }, props, {
     database: database,
     schema: schema,
-    changeSchema: changeSchema
+    changeSchema: changeSchema,
+    changeDatabase: changeDatabase
   })) : /*#__PURE__*/React.createElement(MViewer, Object.assign({
     key: k
   }, props, {
     database: database,
     schema: schema,
-    changeSchema: changeSchema
+    changeSchema: changeSchema,
+    changeDatabase: changeDatabase
   }));
 };
+function useForm() {
+  return {
+    setSchema: function setSchema(v) {},
+    setDatabase: function setDatabase(v) {},
+    getSchema: function getSchema() {},
+    getDatabase: function getDatabase() {}
+  };
+}
 
-export { Ajax, Assembly, BaseViewer, EmtpyType, M3, MContext, MFieldViewer, MUtil, MViewer, MViewerDebug, Segment, SegmentEditSwitch, SubmitBar, UnderlineInputBox, Validator, Viewer, assembly, createDefaultValue, M3 as default, ensureM3, useM3Database };
+export { Ajax, Assembly, BaseViewer, EmtpyType, M3, MContext, MFieldViewer, MUtil, MViewer, MViewerDebug, Segment, SegmentEditSwitch, SubmitBar, UnderlineInputBox, Validator, Viewer, assembly, createDefaultValue, M3 as default, ensureM3, useForm, useM3Database };

package/lib/m3.js

@@ -1233,6 +1233,7 @@ var MFieldViewer = /*#__PURE__*/function (_React$Component) {
     var props = _objectSpread$e({
       afterChange: function afterChange() {},
       changeSchema: function changeSchema() {},
+      changeDatabase: function changeDatabase() {},
       name: this.props.path
     }, this.props);
 
@@ -18129,6 +18130,7 @@ var AForm = /*#__PURE__*/function (_Viewer) {
       },
       parent: this.props.schema,
       changeSchema: this.props.changeSchema,
+      changeDatabase: this.props.changeDatabase,
       forceValid: this.props.forceValid,
       style: {
         width: "100%"
@@ -18826,7 +18828,11 @@ var AArrayGrid = /*#__PURE__*/function (_BaseViewer) {
 
       return /*#__PURE__*/React__default["default"].createElement("th", {
         key: f.name + i + ":first"
-      }, (_f$label = f.label) != null ? _f$label : f.name);
+      }, f.required ? /*#__PURE__*/React__default["default"].createElement("span", {
+        style: {
+          color: "red"
+        }
+      }, "*") : null, (_f$label = f.label) != null ? _f$label : f.name);
     }), /*#__PURE__*/React__default["default"].createElement("td", {
       key: ":\u64CD\u4F5C\u680F",
       width: "40px",
@@ -20774,7 +20780,8 @@ var MViewer = /*#__PURE__*/function (_React$Component) {
       path: "",
       morph: props.morph,
       afterChange: PersistantTool.patchAfterChange(props.afterChange, props.persistant),
-      changeSchema: props.changeSchema
+      changeSchema: props.changeSchema,
+      changeDatabase: props.changeDatabase
     }), props.children));
   };
 
@@ -21077,57 +21084,74 @@ function standardSchema(schema, layout) {
 }
 
 var M3 = function M3(props) {
-  var _useState = React.useState(props),
-      prevProp = _useState[0],
-      setPrevProp = _useState[1];
-
-  var _useState2 = React.useState(___default["default"].cloneDeep(props.database)),
-      database = _useState2[0],
-      setDatabase = _useState2[1];
+  var _useState = React.useState(___default["default"].cloneDeep(props.database)),
+      database = _useState[0],
+      setDatabase = _useState[1];
 
-  var _useState3 = React.useState(standardSchema(props.schema)),
-      schema = _useState3[0],
-      setSchema = _useState3[1];
+  var _useState2 = React.useState(standardSchema(props.schema)),
+      schema = _useState2[0],
+      setSchema = _useState2[1];
 
-  var _useState4 = React.useState(0),
-      k = _useState4[0],
-      setK = _useState4[1]; // debug 属性为真 且 页面地址携带 debug 参数，开启调试模式
+  var _useState3 = React.useState(0),
+      k = _useState3[0],
+      setK = _useState3[1]; // debug 属性为真 且 页面地址携带 debug 参数，开启调试模式
 
 
   var debug = props.debug || window.location.search.indexOf("debug") >= 0 || window.location.hash.indexOf("debug") >= 0;
-  React.useEffect(function () {
-    if (props.schema != prevProp.schema) {
-      setSchema(standardSchema(props.schema));
-      setPrevProp(props);
-      setK(++k);
-    }
-  }, [props.schema]);
-  React.useEffect(function () {
-    if (props.database != prevProp.database) {
-      setDatabase(___default["default"].cloneDeep(props.database));
-      setPrevProp(props);
-      setK(++k);
-    }
-  }, [props.database]);
 
   var changeSchema = function changeSchema(v) {
-    return setSchema(standardSchema(v));
+    setSchema(standardSchema(v));
+    setK(++k);
   };
 
+  var changeDatabase = function changeDatabase(v) {
+    setDatabase(___default["default"].cloneDeep(v));
+    setK(++k);
+  };
+
+  if (props.form) {
+    props.form.setSchema = changeSchema;
+    props.form.setDatabase = changeDatabase;
+
+    props.form.getSchema = function () {
+      return schema;
+    };
+
+    props.form.getDatabase = function () {
+      return database;
+    };
+  }
+
+  React.useEffect(function () {
+    changeDatabase(props.schema);
+  }, [props.schema]);
+  React.useEffect(function () {
+    changeDatabase(props.database);
+  }, [props.database]);
   return debug ? /*#__PURE__*/React__default["default"].createElement(MViewerDebug, Object.assign({
     key: k
   }, props, {
     database: database,
     schema: schema,
-    changeSchema: changeSchema
+    changeSchema: changeSchema,
+    changeDatabase: changeDatabase
   })) : /*#__PURE__*/React__default["default"].createElement(MViewer, Object.assign({
     key: k
   }, props, {
     database: database,
     schema: schema,
-    changeSchema: changeSchema
+    changeSchema: changeSchema,
+    changeDatabase: changeDatabase
   }));
 };
+function useForm() {
+  return {
+    setSchema: function setSchema(v) {},
+    setDatabase: function setDatabase(v) {},
+    getSchema: function getSchema() {},
+    getDatabase: function getDatabase() {}
+  };
+}
 
 exports.Ajax = Ajax;
 exports.Assembly = Assembly;
@@ -21149,4 +21173,5 @@ exports.assembly = assembly;
 exports.createDefaultValue = createDefaultValue;
 exports["default"] = M3;
 exports.ensureM3 = ensureM3;
+exports.useForm = useForm;
 exports.useM3Database = useM3Database;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.1.21",
+  "version": "0.2.0",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [

package/src/framework/M3.tsx

@@ -7,10 +7,10 @@ import _ from "lodash";
 
 // 外部 schema 转化为内部
 function deal(fieldSchema: MFieldSchemaAnonymity | MFieldSchema) {
-  if(fieldSchema.arrayMember){
-      deal(fieldSchema.arrayMember);
-  } else if(fieldSchema.objectFields){
-    for(let f of fieldSchema.objectFields){
+  if (fieldSchema.arrayMember) {
+    deal(fieldSchema.arrayMember);
+  } else if (fieldSchema.objectFields) {
+    for (let f of fieldSchema.objectFields) {
       deal(f);
     }
   } else {
@@ -38,7 +38,7 @@ function deal(fieldSchema: MFieldSchemaAnonymity | MFieldSchema) {
 
 // 标准化 schema
 function standardSchema(schema: MFieldSchema | MFieldSchema[], layout?: M3UISpec) {
-  const _schema =  _.cloneDeep(schema)
+  const _schema = _.cloneDeep(schema)
   if (_.isArray(_schema)) {
     _schema.forEach(item => {
       deal(item)
@@ -59,7 +59,6 @@ function standardSchema(schema: MFieldSchema | MFieldSchema[], layout?: M3UISpec
 }
 
 const M3 = (props: React.PropsWithChildren<M3Prop & { debug?: boolean }>) => {
-  const [prevProp, setPrevProp] = useState(props);
 
   let [database, setDatabase] = useState(_.cloneDeep(props.database))
   let [schema, setSchema] = useState(standardSchema(props.schema))
@@ -68,28 +67,43 @@ const M3 = (props: React.PropsWithChildren<M3Prop & { debug?: boolean }>) => {
   // debug 属性为真 且 页面地址携带 debug 参数，开启调试模式
   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)
+  }
+
+  if (props.form) {
+    props.form.setSchema = changeSchema
+    props.form.setDatabase = changeDatabase
+    props.form.getSchema = () => schema
+    props.form.getDatabase = () => database
+  }
+
   useEffect(() => {
-    if(props.schema != prevProp.schema) {
-      setSchema(standardSchema(props.schema))
-      setPrevProp(props);
-      setK(++k)
-    }
+    changeDatabase(props.schema)
   }, [props.schema])
 
   useEffect(() => {
-    if(props.database != prevProp.database) {
-      setDatabase(_.cloneDeep(props.database))
-      setPrevProp(props);
-      setK(++k)
-    }
+    changeDatabase(props.database)
   }, [props.database])
 
-  const changeSchema = v => setSchema(standardSchema(v))
-
   return (
-      debug ? <MViewerDebug key={k} {...props} database={database} schema={schema} changeSchema={changeSchema}/> :
-      <MViewer key={k} {...props} database={database} schema={schema} changeSchema={changeSchema}/>
+    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: () => { },
+  }
+}

package/src/framework/MFieldViewer.tsx

@@ -18,6 +18,7 @@ export class MFieldViewer extends React.Component<MProp, any> {
     const props = {
       afterChange: () => { }, // 给afterChange一个默认值
       changeSchema: () => { },  // 给changeSchema一个默认值
+      changeDatabase: () => { },  // 给changeDatabase一个默认值
       name: this.props.path,
       ...this.props
     };

package/src/framework/MViewer.tsx

@@ -19,6 +19,7 @@ export interface MViewerProp {
   onSubmit?: (finalData: any) => Promise<any>;
   afterChange?: AFTER_CHANGE_CALLBACK,
   changeSchema?: CHANGE_SCHEMA_CALLBACK,
+  changeDatabase?: CHANGE_SCHEMA_CALLBACK,
   wrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
   formItemWrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
   /** 持久存储选项，nil表示不持久存储 */
@@ -28,12 +29,14 @@ export interface MViewerProp {
 export interface M3Prop {
   schema: MFieldSchema | MFieldSchema[],
   database: any,
+  form?: any,
   layout?: M3UISpec,
   style?: React.CSSProperties,
   morph: MORPH,
   onSubmit?: (finalData: any) => Promise<any>;
   afterChange?: AFTER_CHANGE_CALLBACK,
   changeSchema?: CHANGE_SCHEMA_CALLBACK,
+  changeDatabase?: CHANGE_SCHEMA_CALLBACK,
   wrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
   formItemWrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
   /** 持久存储选项，nil表示不持久存储 */
@@ -84,13 +87,21 @@ export class MViewer extends React.Component<MViewerProp, State> {
     const props = this.props;
     const database = this.database;
     const { ctrlVersion, forceValid } = this.state
-    
+
     return <MContext.Provider value={{
       rootProps: props,
       forceValid, setForceValid: (b) => { this.setState({ forceValid: true }) }
     }}>
       <div key={ctrlVersion} className={MUtil.phoneLike() ? "MEditor_p" : "MEditor"} style={props.style}>
-        <MFieldViewer schema={props.schema} database={database} path="" morph={props.morph} afterChange={PersistantTool.patchAfterChange(props.afterChange, props.persistant)} changeSchema={props.changeSchema}/>
+        <MFieldViewer
+          schema={props.schema}
+          database={database}
+          path=""
+          morph={props.morph}
+          afterChange={PersistantTool.patchAfterChange(props.afterChange, props.persistant)}
+          changeSchema={props.changeSchema}
+          changeDatabase={props.changeDatabase}
+        />
         {props.children}
       </div>
     </MContext.Provider>

package/src/framework/Schema.ts

@@ -335,6 +335,9 @@ export interface MProp {
   /** 修改schema */
   changeSchema?: CHANGE_SCHEMA_CALLBACK,
 
+  /** 修改database */
+  changeDatabase?: CHANGE_SCHEMA_CALLBACK,
+
   /** @deprecated 直接上层。有时parent是谁，会影响渲染字段 */
   parent?: MFieldSchemaAnonymity,
 

package/src/index.ts

@@ -6,7 +6,7 @@ import { MViewerDebug } from './framework/MViewerDebug';
 import { MORPH, VIEWER, assembly, MTheme, Assembly } from './framework/Assembly';
 import { ViewerState, Viewer, BaseViewer } from './ui/BaseViewer';
 import { MViewer, SubmitBar, useM3Database } from './framework/MViewer';
-import M3 from './framework/M3';
+import M3 , {useForm} from './framework/M3';
 import { MFieldViewer } from './framework/MFieldViewer';
 import { MContext } from './framework/MContext';
 import { MUtil } from './framework/MUtil';
@@ -19,6 +19,7 @@ import { MType, EmtpyType, createDefaultValue } from './types/MType';
 
 export {
   M3,
+  useForm,
   MContext, MFieldViewer, BaseViewer, assembly, SegmentEditSwitch, Viewer, UnderlineInputBox, Segment, MUtil, Ajax,
   MViewer,
   MViewerDebug, SubmitBar,

package/src/ui/editor/complex/AArrayGrid.tsx

@@ -41,6 +41,7 @@ function uuid(len = 8, radix = 16) {
  *    {from:"1606997544611",to:"", tillNow:true, company:"阿里巴巴", position:"CEO"},
  *  ]
  */
+
 export class AArrayGrid extends BaseViewer {
   element() {
     const schema = this.props.schema;
@@ -118,7 +119,7 @@ export class AArrayGrid extends BaseViewer {
     return (
       <table key={this.props.path} className="AExperience M3_table" style={{ width: "100%" }}><tbody>
         <tr key=":header">
-          {members.map((f, i) => <th key={f.name + i + ":first"}>{f.label ?? f.name}</th>)}
+          {members.map((f, i) => <th key={f.name + i + ":first"}>{f.required ? <span style={{ color: "red" }}>*</span> : null}{f.label ?? f.name}</th>)}
           <td key=":操作栏" width="40px" align="center"></td>
         </tr>
         {rows}

package/src/ui/editor/complex/AForm.tsx

@@ -142,7 +142,7 @@ export class AForm extends Viewer<State> {
         //this.setState({shouldAnimation: shouldAnimation(hideMap, newHideMap, objectFields)});
         this.setState({});
       }
-    }} parent={this.props.schema} changeSchema={this.props.changeSchema} forceValid={this.props.forceValid} style={{ width: "100%" }} />
+    }} parent={this.props.schema} changeSchema={this.props.changeSchema} changeDatabase={this.props.changeDatabase} forceValid={this.props.forceValid} style={{ width: "100%" }} />
 
     let ele;
     if(uispec.layout === "vertical") { // label在字段上面的分段布局

package/types/framework/M3.d.ts

@@ -4,3 +4,9 @@ declare const M3: (props: React.PropsWithChildren<M3Prop & {
     debug?: boolean;
 }>) => JSX.Element;
 export default M3;
+export declare function useForm(): {
+    setSchema: (v: any) => void;
+    setDatabase: (v: any) => void;
+    getSchema: () => void;
+    getDatabase: () => void;
+};

package/types/framework/MViewer.d.ts

@@ -12,6 +12,7 @@ export interface MViewerProp {
     onSubmit?: (finalData: any) => Promise<any>;
     afterChange?: AFTER_CHANGE_CALLBACK;
     changeSchema?: CHANGE_SCHEMA_CALLBACK;
+    changeDatabase?: CHANGE_SCHEMA_CALLBACK;
     wrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement;
     formItemWrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement;
     /** 持久存储选项，nil表示不持久存储 */
@@ -20,12 +21,14 @@ export interface MViewerProp {
 export interface M3Prop {
     schema: MFieldSchema | MFieldSchema[];
     database: any;
+    form?: any;
     layout?: M3UISpec;
     style?: React.CSSProperties;
     morph: MORPH;
     onSubmit?: (finalData: any) => Promise<any>;
     afterChange?: AFTER_CHANGE_CALLBACK;
     changeSchema?: CHANGE_SCHEMA_CALLBACK;
+    changeDatabase?: CHANGE_SCHEMA_CALLBACK;
     wrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement;
     formItemWrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement;
     /** 持久存储选项，nil表示不持久存储 */

package/types/framework/Schema.d.ts

@@ -264,6 +264,8 @@ export interface MProp {
     afterChange?: AFTER_CHANGE_CALLBACK;
     /** 修改schema */
     changeSchema?: CHANGE_SCHEMA_CALLBACK;
+    /** 修改database */
+    changeDatabase?: CHANGE_SCHEMA_CALLBACK;
     /** @deprecated 直接上层。有时parent是谁，会影响渲染字段 */
     parent?: MFieldSchemaAnonymity;
     /** 强制展示校验信息 */

package/types/index.d.ts

@@ -6,7 +6,7 @@ import { MViewerDebug } from './framework/MViewerDebug';
 import { MORPH, VIEWER, assembly, MTheme, Assembly } from './framework/Assembly';
 import { ViewerState, Viewer, BaseViewer } from './ui/BaseViewer';
 import { MViewer, SubmitBar, useM3Database } from './framework/MViewer';
-import M3 from './framework/M3';
+import M3, { useForm } from './framework/M3';
 import { MFieldViewer } from './framework/MFieldViewer';
 import { MContext } from './framework/MContext';
 import { MUtil } from './framework/MUtil';
@@ -16,6 +16,6 @@ import { SegmentEditSwitch, SegmentEditSwitchState } from './ui/widget/SegmentEd
 import { ensureM3 } from './framework/Init';
 import Validator from './framework/Validator';
 import { MType, EmtpyType, createDefaultValue } from './types/MType';
-export { M3, MContext, MFieldViewer, BaseViewer, assembly, SegmentEditSwitch, Viewer, UnderlineInputBox, Segment, MUtil, Ajax, MViewer, MViewerDebug, SubmitBar, useM3Database, ensureM3, Validator, EmtpyType, createDefaultValue, Assembly };
+export { M3, useForm, MContext, MFieldViewer, BaseViewer, assembly, SegmentEditSwitch, Viewer, UnderlineInputBox, Segment, MUtil, Ajax, MViewer, MViewerDebug, SubmitBar, useM3Database, ensureM3, Validator, EmtpyType, createDefaultValue, Assembly };
 export type { M3UISpec, ViewerState, SegmentEditSwitchState, M3UISpecSegmentItem, MFieldSchema, MFieldSchemaAnonymity, MORPH, VIEWER, MType, MTheme };
 export default M3;