form-driver 0.1.0

package/src/framework/MViewer.less

@@ -0,0 +1,128 @@
+
+.MEditor {
+  /* max-width:900px; */
+  /* margin:auto; */
+  --MViewerBorder: 1px solid #d9d9d9; /** TODO 在这里扩展吧 */
+}
+
+.MEditor .submitBar {
+  background: white;
+  box-shadow: 0 0 10px #d0cfcf;
+  padding: 25px;
+  margin: 25px 0 25px 0;
+
+  text-align: center;
+}
+
+.MEditor .AForm_removeBtn:focus, .MEditor .AForm_removeBtn:hover {
+  color: #40a9ff;
+}
+
+.MEditor .AForm_removeBtn_disabled {
+  color: lightgray;
+}
+
+
+
+.MEditor_p {
+  max-width:900px;
+  margin:auto;
+  --MViewerBorder: 1px solid #d9d9d9; /** TODO 在这里扩展吧 */
+}
+
+.MEditor_p .submitBar {
+  background: white;
+  box-shadow: 0 0 10px #d0cfcf;
+  padding: 15px;
+  margin: 25px 0 25px 0;
+
+  text-align: center;
+}
+
+.MEditor_p .AForm_removeBtn:focus, .MEditor .AForm_removeBtn:hover {
+  color: #40a9ff;
+}
+
+.MEditor_p .AForm_removeBtn_disabled {
+  color: lightgray;
+}
+
+/** 回填字段的样式，例如日期选择/gb2260选项下，带下划线的，显示被选中值的一行字 */
+.MEditor_p .backfill {
+  border-bottom: 1px solid #d9d9d9;
+}
+
+.MEditor_p .backfill_empty {
+  border-bottom: 1px solid #d9d9d9;
+  color: gray;
+}
+
+.MEditor_p input, .MEditor_p textarea {
+  font-size: 16px; /** ios上，字小于16px的输入框，输入时页面会放大，这个体验及其糟糕，只能通过改大字体解决 */
+}
+
+table.M3_table {
+  border: var(--MViewerBorder);
+  border-spacing: 0;
+}
+table.M3_table tr,table.M3_table th {border-bottom: var(--MViewerBorder);}
+table.M3_table td,table.M3_table th{
+  border-right: var(--MViewerBorder);
+  border-bottom: var(--MViewerBorder);
+  padding: 5px 0 5px 0;
+  .ant-select-selector {
+    border: none !important;
+  }
+}
+table.M3_table th {
+  font-weight: normal;
+  text-align: center;
+}
+table.M3_table tr td:last-child{ border-right: 0 }
+table.M3_table tr:last-child td{ border-bottom: 0 }
+
+  /** antd 样式调整 */
+.MEditor {
+  /** 减少字段之间的垂直距离，表单紧凑些 */
+  .ant-row {
+    margin-bottom: 10px;
+  }
+
+  /** ant表单项的间距太大了，浪费空间 */
+  .ant-form-item, .ant-form-item- {
+    margin-bottom: 0px !important;
+  }
+
+}
+
+.MEditor_p, .MEditor {
+  .wrap {
+    word-break: break-all;
+    white-space: pre-line;
+  }
+
+  /** 选项文字折行展示 */
+  .ant-radio-wrapper, .ant-checkbox-wrapper{
+    white-space: normal; 
+
+    span {
+      word-break: break-all;
+      white-space: pre-line;
+    }
+  }
+
+  .am-calendar {
+    .content {  /** TODO：antd mobile的日历缩回去的时候有bug，动画不正常，这里把动画禁掉，以后如果升级antd mobile了可以试试去掉 */
+      animation-duration: 0s;
+      -webkit-animation-duration: 0s;
+    }
+  }
+}
+
+/** antd的Tabs不能100%高，加上FullHeightTab这个class就可以了 */
+.FullHeightTab .ant-tabs-content{
+  height: 100%
+}
+.FullHeightTab .ant-tabs {
+  height: 100%
+}

package/src/framework/MViewer.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import { AFTER_CHANGE_CALLBACK, MFieldSchema, M3UISpec } from "../framework/Schema";
+import { Button, message, Modal } from "antd";
+import "./MViewer.less";
+import { MFieldViewer } from "./MFieldViewer";
+import { MUtil } from './MUtil';
+import { assembly, MORPH } from './Assembly';
+import _ from "lodash";
+import { ensureM3 } from './Init';
+import { MContext } from './MContext';
+import { PersistantTool, PersistantConf } from "./Persistant";
+
+export interface MViewerProp {
+  schema: MFieldSchema,
+  database: any,
+  layout?: M3UISpec,
+  style?: React.CSSProperties,
+  morph: MORPH,
+  onSubmit?: (finalData: any) => Promise<any>;
+  afterChange?: AFTER_CHANGE_CALLBACK,
+  wrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
+  formItemWrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
+  /** 持久存储选项，nil表示不持久存储 */
+  persistant?: PersistantConf
+}
+
+export interface M3Prop {
+  schema: MFieldSchema | MFieldSchema[],
+  database: any,
+  layout?: M3UISpec,
+  style?: React.CSSProperties,
+  morph: MORPH,
+  onSubmit?: (finalData: any) => Promise<any>;
+  afterChange?: AFTER_CHANGE_CALLBACK,
+  wrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
+  formItemWrapper?: (elem: React.ReactElement, schema: Partial<MFieldSchema>) => React.ReactElement,
+  /** 持久存储选项，nil表示不持久存储 */
+  persistant?: PersistantConf
+}
+
+interface State {
+  forceValid: boolean;
+  ctrlVersion: number;
+}
+/**
+ * 一个完整的表单
+ */
+export class MViewer extends React.Component<MViewerProp, State> {
+  database: any;
+
+  constructor(p: MViewerProp) {
+    super(p);
+    this.state = {
+      forceValid: false,
+      ctrlVersion: 1,
+    }
+
+    ensureM3();
+
+    const props = this.props;
+
+    // 值类型兼容预处理
+    this.database = assembly.types[props.schema.type]?.standardValue(assembly, props.schema, props.database, false);
+
+    // 填入默认值
+    MUtil.applyDefaultValue(props.schema, props.database, "");
+    // 填入本地缓存值
+    this.recover()
+  }
+
+  recover() {
+    const { ctrlVersion } = this.state
+    const { persistant } = this.props
+    PersistantTool.load(this.database, persistant, () => {
+      this.setState({
+        ctrlVersion: ctrlVersion + 1
+      })
+    });
+  }
+
+  render() {
+    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)} />
+        {props.children}
+      </div>
+    </MContext.Provider>
+  }
+}
+
+/**
+ * 提交按钮
+  示例1，使用默认的提交样式：
+  <MViewer schema={schema} database={database} morph="editor">
+    <SubmitBar onSubmit={(d:any) => ...返回一个Promise} />
+  </MViewer>
+
+  示例2，自定义样式：
+  <MViewer schema={schema} database={database} morph="editor">
+    <SubmitBar onSubmit={(d:any) => ...返回一个Promise} >
+      <Button>提交</Button>
+    </SubmitBar>
+  </MViewer>
+
+  示例3，提交完成前，禁用提交按钮：
+  <MViewer schema={schema} database={database} morph="editor">
+    <SubmitBar onSubmit={(d:any) => ...返回一个Promise} >
+      {
+        loading => <Button loading={loading}>提交</Button>
+      }
+    </SubmitBar>
+  </MViewer>
+ * @param props 
+ */
+export function SubmitBar(props: {
+  style?: React.CSSProperties,
+  onSubmit?: (finalData: any) => Promise<any>,
+  children?: React.ReactNode | ((loading: boolean) => React.ReactNode)
+}): JSX.Element {
+
+  const [loading, setLoading] = useState(false);
+  let style: React.CSSProperties = props.children ? undefined : { textAlign: "center", ...props.style }
+
+  return <MContext.Consumer>{
+    ctx => {
+      const onClick = () => {
+        if (loading) {
+          message.warn("正在提交，请稍候");
+          return;
+        }
+        const r = assembly.validate(ctx.rootProps.schema, ctx.rootProps.database);
+        const submit = props.onSubmit ?? ctx.rootProps.onSubmit;
+        ctx.setForceValid(true);
+        if (r) {
+          Modal.warning({
+            content: '还没填完呢',
+            onOk: () => {
+              const viewer = document.getElementById(r.path);
+              if (viewer) {
+                viewer.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              } else {
+                console.error("viewer not found", r);
+              }
+            }
+          });
+        } else {
+          if (submit) {
+            setLoading(true);
+            const finalData = MUtil.filterHide(ctx.rootProps.schema, ctx.rootProps.database)
+            submit(finalData).then(() => {
+              PersistantTool.clear(ctx.rootProps.persistant)
+            }).finally(() => {
+              setLoading(false);
+            });
+          } else {
+            message.success("填是填完了，但提交功能还在开发中，请联系程序员解决");
+          }
+        }
+      };
+      return <div style={style} onClick={props.children ? onClick : undefined}>
+        {
+          props.children
+            ? (_.isFunction(props.children) ? props.children(loading) : props.children)
+            : <Button style={{ width: "40%" }} type="primary" loading={loading} onClick={props.children ? undefined : onClick}>提交</Button>
+        }
+      </div>
+    }
+  }</MContext.Consumer>
+}
+
+export function useM3Database(initValue) {
+  return useState(initValue);
+}

package/src/framework/MViewerDebug.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Tabs, Button, message } from 'antd';
+import _ from 'lodash';
+import { useState } from "react";
+import { MViewerProp, MViewer } from './MViewer';
+import { MUtil } from './MUtil';
+
+const TEXTAREAKEY = "tk";
+const FINALDATAKEY = "fd";
+const OTHERMORPH = "om";
+
+/**
+ * 调试和理解MViewer，使用时除了多一个debug props，完全和MViewer一样
+ * debug=true时，通过tab同时展示viewer及其database和schema
+ * debug=false时，仅展示viewer
+ * @param props 用来调试viewer
+ */
+export function MViewerDebug(props: React.PropsWithChildren<MViewerProp & {debug?: boolean}>):JSX.Element {
+  const [dataVersion, setDataVersion] = useState(0);
+  const debug = props.debug ?? (window.location.search.indexOf("debug")>=0 || window.location.hash.indexOf("debug")>=0);
+  if(!debug){
+    return <MViewer {...props}/>;
+  }
+
+  function finalData(){
+    return MUtil.filterHide(props.schema, props.database);
+  }
+
+  return <Tabs style={props.style} onTabClick={(key:string)=>{
+    if(key === TEXTAREAKEY){
+      setTimeout(() => { // 让编辑器满屏
+        const textarea = document.querySelector("#_data");
+        // @ts-ignore
+        const h = document.body.clientHeight - textarea.offsetTop;
+        // @ts-ignore
+        textarea.style.height=(h - 10) + "px";
+        // @ts-ignore
+        textarea.value =  JSON.stringify(props.database, null, 2);
+      })
+    } else if(key === FINALDATAKEY) {
+      setTimeout(() => {
+        let myContainer = document.getElementById('finalData') as HTMLInputElement;
+        myContainer.innerHTML = JSON.stringify(finalData() , null, 2);
+      });
+    } else if(key == OTHERMORPH) {
+      setDataVersion(dataVersion + 1);
+    }
+  }}>
+  <Tabs.TabPane tab="页面" key="fk">
+    <MViewer {..._.omit(props,"style")} key={dataVersion} />
+  </Tabs.TabPane>
+
+  {
+    props.morph === "readable"
+    ? <Tabs.TabPane tab="编辑模式" key={OTHERMORPH}>
+        <MViewer {..._.omit(props,"style")} morph="editor" key={dataVersion} />
+      </Tabs.TabPane>
+    :  <Tabs.TabPane tab="阅读模式" key={OTHERMORPH}>
+        <MViewer {..._.omit(props,"style")} morph="readable" key={dataVersion} />
+      </Tabs.TabPane>
+  }
+
+  <Tabs.TabPane tab="数据" key={TEXTAREAKEY}>
+    <Button onClick={()=>{    // 刷新数据到表单
+      try{
+        // @ts-ignore
+        const json = JSON.parse(document.querySelector("#_data").value);
+        for(let k in props.database){
+          delete props.database[k];
+        }
+        _.assign(props.database, json);
+        message.success('成了');
+        setDataVersion(dataVersion+1);
+      } catch(e){
+        message.error(<pre>{'json解析失败了\n' + e}</pre>);
+      }
+    }}>修改</Button>
+    <textarea id="_data" style={{width:"100%", padding:"0"}}/>
+  </Tabs.TabPane>
+  <Tabs.TabPane tab="最终数据" key={FINALDATAKEY}>
+    <pre id="finalData" className="ant-input" style={{"width": "100%"}}/>
+  </Tabs.TabPane>
+  <Tabs.TabPane tab="Schema" key="schema">
+    <pre className="ant-input" style={{"width": "100%"}}>
+      {MUtil.validateSchema(props.schema).map(r=><div key="warn" style={{color: "red"}}>{r.message}</div>)}
+      {JSON.stringify(props.schema, null, 2)}
+    </pre>
+  </Tabs.TabPane>
+  <Tabs.TabPane tab="UT" key="ut">
+    <div key="ut" className="ant-input" style={{"width": "100%"}}>
+      {JSON.stringify({name:`debug-${Date.now()}`, schema: props.schema, database: props.database})},
+    </div>
+  </Tabs.TabPane>
+  </Tabs>
+}

package/src/framework/Persistant.ts

@@ -0,0 +1,90 @@
+// 在本地持久保存表单，防止丢失
+import _ from "lodash";
+import { AFTER_CHANGE_CALLBACK } from "./Schema";
+import { Modal } from "antd"
+/**
+ * MViewer的配置
+ */
+export interface PersistantConf {
+  /** 持久存储的localStorageKey前缀 */
+  localStorageKeyPrefix: string;
+  /** 是否询问恢复至缓存 */
+  useConfirm?: Boolean;
+  /** 如何合并database和persistant数据，默认是local覆盖database */
+  override?: (database:any, local:any) => void;
+}
+
+let confirming = false
+
+export const PersistantTool = {
+  load: function initPersistant(database:any, persistant?: PersistantConf, updateViewer?: any){
+    // 填入本地缓存值
+    const prefix = persistant?.localStorageKeyPrefix;
+    const useConfirm = persistant?.useConfirm;
+    if(prefix) {
+      const successCb = () => {
+        let localDb = {};
+        for(let key in localStorage) {
+          try {
+            if(_.startsWith(key, prefix)) {
+              _.set(localDb, key.substr(prefix.length), JSON.parse(localStorage[key]))
+            }
+          } catch(e){ // 加载值错了不能影响表单填写
+            console.log(e);
+          }
+        }
+        (persistant.override ?? _.assign)(database, localDb);
+      }
+      if(useConfirm && Object.keys(localStorage).find(f=> f.indexOf(prefix) === 0) && !confirming) {
+        // 防止同时多次弹框
+        confirming = true
+        Modal.confirm({
+          content: '是否恢复您上次填写过但未提交的内容？',
+          okText: '恢复',
+          cancelText: '取消',
+          onOk: () => {
+            confirming = false
+            successCb()
+            updateViewer()
+          },
+          onCancel: () => {
+            confirming = false
+            this.clear(persistant)
+          }
+        });
+      } else {
+        successCb()
+      }
+    }
+  },
+
+  patchAfterChange: function(afterChange: AFTER_CHANGE_CALLBACK, persistant?: PersistantConf){
+    const prefix = persistant?.localStorageKeyPrefix;
+    return prefix ? (path, v, final) => {
+        if(final){
+          if(_.isNil(v)){
+            localStorage.removeItem(prefix + path)
+          } else {
+            localStorage.setItem(prefix + path, JSON.stringify(v))
+          }
+        }
+        afterChange?.(path, v, final);
+      }
+      :  afterChange;
+  },
+
+  clear: function(persistant?: PersistantConf){
+    const pprefix = persistant?.localStorageKeyPrefix;
+    if(pprefix) { // 提交成功，删掉所有的本地存储
+      for(let key of Object.keys(localStorage)){
+        try {
+          if(_.startsWith(key, pprefix)) {
+            localStorage.removeItem(key);
+          }
+        } catch(e) { // 出错不能影响主流程
+          console.log(e);
+        }
+      }
+    }
+  }
+}