form-driver 0.1.0

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

@@ -0,0 +1,33 @@
+
+import React from "react";
+import { BaseViewer } from '../../BaseViewer';
+import { MUtil } from "../../../framework/MUtil";
+import { Table } from 'antd';
+import { MFieldViewer } from "../../../framework/MFieldViewer";
+import "./ATable.less";
+
+/**
+ * antd的表格，用于展示对象数组
+ */
+export class ATable extends BaseViewer {
+  element() {
+    if(this.props.schema.type !== "array" || this.props.schema.arrayMember.type !== "object"){
+      return MUtil.error("ATable只适用于对象数组", this.props.schema);
+    }
+    
+    const columns = this.props.schema.arrayMember?.objectFields?.map(f=>{
+      return {
+        title: f.label,
+        dataIndex: f.name,
+        key: f.name,
+        render: (value, row, idx) => {
+          return <MFieldViewer schema={f} database={row} path={f.name} morph={this.props.morph}/>
+        }
+      }
+    });
+
+    let nextKey = 0;
+    return <Table rowKey={()=>nextKey++} key={this.props.path} className="ATable"
+      columns={columns} dataSource={super.getValue()} pagination={false} loading={!this.props.database}/>
+  }
+}

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

@@ -0,0 +1,37 @@
+import React, { CSSProperties } from "react";
+import _ from "lodash";
+import { BaseViewer } from '../../BaseViewer';
+import TextArea from 'antd/lib/input/TextArea';
+
+/**
+ * 用文本框编辑json object或者json array
+ */
+export class JsonEditor extends BaseViewer {
+  error:string;
+
+  element() {
+    const value = super.getValue();
+    let styles:CSSProperties = _.merge({minHeight:  "10em"}, this.props.style, this.props.schema.style);
+    if(this.props.hideBorder){
+      styles.border = "1px solid transparent";
+    }
+    if(this.error) {
+      styles.border = "1px solid red";
+    }
+
+    return <TextArea style={styles} key={this.props.path} defaultValue={JSON.stringify(value,null,2)} onBlur={(v)=>{
+      try{
+        this.changeValue(JSON.parse(v.target.value));
+      }catch(e){
+      }
+    }} onChange={(v)=>{
+      try{
+        JSON.parse(v.target.value);
+        this.error = undefined;
+      }catch(e){
+        this.error = e.message;
+      }
+      this.setState({});
+    }}/>
+  }
+}

package/src/ui/readable/A.tsx

@@ -0,0 +1,33 @@
+import _ from "lodash";
+import React from "react";
+import { MFieldSchema } from "../..";
+import { assembly } from "../../framework/Assembly";
+import { MUtil } from "../../framework/MUtil";
+import { BaseViewer } from '../BaseViewer';
+
+export class A extends BaseViewer {
+  element() {
+    const schema = this.props.schema as MFieldSchema;
+    const { urlExpr, labelExpr, onClick } = schema.a;
+    const value = super.getValue();
+    const parent = super.getParentValue();
+
+    let label;
+    let href;
+    if (_.isNil(value)) {
+      label = assembly.theme.READABLE_BLANK
+    } else {
+      label = labelExpr
+        ? MUtil.evalExprOrFunction(labelExpr, ["value", schema.name, "parent", "_"], [value, value, parent, _], value?.toString())
+        : assembly.toReadable(schema, value, parent);
+      href = MUtil.evalExprOrFunction(urlExpr, ["value", schema.name, "parent", "_"], [value, value, parent, _], undefined);
+    }
+    const target = schema.a.currentPage ? undefined : "_blank";
+    return <a
+      style={this.props.schema.style}
+      className="wrap"
+      onClick={() => onClick?.(value, parent)}
+      href={href}
+      target={target}>{label}</a>
+  }
+}

package/src/ui/readable/ArrayViewer.tsx

@@ -0,0 +1,46 @@
+
+
+import _ from "lodash";
+import React from "react";
+import { assembly } from '../../framework/Assembly';
+import { MFieldViewer } from "../../framework/MFieldViewer";
+import { BaseViewer } from "../BaseViewer";
+
+export class ArrayViewer extends BaseViewer {
+  element(ctx) {
+    const vs = this.getValue();
+    if (_.isNil(vs)) {
+      return <div>{assembly.theme.READABLE_BLANK}</div>
+    } else if (!_.isArray(vs)) {
+      return <div>{assembly.theme.READABLE_INVALID}</div>
+    } else if (vs.length === 0) {
+      return <div>{assembly.theme.READABLE_BLANK}</div>
+    }
+
+    if (this.props.schema.toReadable) {
+      return <div>{assembly.toReadable(this.props.schema, vs, super.getParentValue())}</div>
+    } else if (this.props.schema.remote) {
+      return <div> {vs.map(v => v.label).join(", ")} </div>
+    } else if (!this.props.schema.arrayMember) {
+      return <div>{vs.join(', ')}</div>
+    } else {
+      if (this.props.schema.layoutHint === "h") {
+        return <div style={{ display: 'flex' }}>
+          {
+            vs.map((v, index) => {
+              const itemPath = this.props.path + "[" + index + "]";
+              return <div style={{flex: 1}}>
+                <MFieldViewer style={this.props.schema.arrayMember.style} morph={this.props.morph} key={itemPath} schema={this.props.schema.arrayMember} database={this.props.database} path={itemPath} />
+              </div>
+            })
+          }
+        </div>
+      } else {
+        return vs.map((v, index) => {
+          const itemPath = this.props.path + "[" + index + "]";
+          return <MFieldViewer style={this.props.schema.arrayMember.style} morph={this.props.morph} key={itemPath} schema={this.props.schema.arrayMember} database={this.props.database} path={itemPath} />;
+        })
+      }
+    }
+  }
+}

package/src/ui/readable/DecorationViewer.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { useState } from 'react';
+import { MProp } from '../../framework/Schema';
+import { Button, Modal, message, Space} from 'antd';
+import { MUtil } from '../../framework/MUtil';
+import { assembly } from '../../framework/Assembly';
+import { MContext } from '../../framework/MContext';
+import _ from "lodash";
+
+export function DecorationViewer(props:MProp){
+  let subType = props.schema?.decoration?.subType;
+
+  if (!subType) {
+    if(_.isString(props.schema?.decoration?.HTML)) {
+      subType = "rich";
+    } else if ( _.isString(props.schema?.decoration?.segmentLabel)) {
+      subType = "segmentLabel";
+    } else if (_.isString(props.schema?.decoration?.submitLabel)) {
+      subType = "submitBar";
+    } else if (props.schema?.decoration?.operations) {
+      subType = "operations";
+    }
+  }
+
+  if(subType === 'rich') {
+    // HTML 片段
+    return <div dangerouslySetInnerHTML={{ __html: props.schema.decoration.HTML}}></div>
+  } else if(subType === 'submitBar') {
+    // 提交按钮
+    const [loading, setLoading] = useState(false);
+    return <MContext.Consumer>
+      {
+        ctx => <div style={{textAlign: "center"}}>
+          <Button type="primary" loading={loading} onClick={()=>{
+            const finalData = MUtil.filterHide(ctx.rootProps.schema, props.database)
+            const r = assembly.validate(ctx.rootProps.schema, finalData);
+            ctx.setForceValid(true);
+            if(r){ // 校验有问题
+              Modal.warning({
+                content: '还没填完呢',
+                onOk:()=> document.getElementById(r.path)?.scrollIntoView({behavior: 'smooth', block: 'start'})
+              });
+            } else {
+              if(ctx.rootProps.onSubmit){
+                setLoading(true);
+                ctx.rootProps.onSubmit(finalData).finally(() => {
+                  setLoading(false);
+                })
+              } else {
+                message.success("填完了，但提交功能还在开发中，请联系技术支持人员");
+              }
+            }
+          }}>{props.schema.decoration.submitLabel}</Button>
+        </div>
+      }
+    </MContext.Consumer>
+  } else if(subType === 'segmentLabel'){
+    // 分段标题
+    return <div style={{borderBottom: "1px solid #d9d9d9", padding: "0 0 10px",  margin: "20px 0 15px", fontSize: 19, fontWeight: "bold"}}>
+      {props.schema.decoration.segmentLabel}
+    </div>
+  } else if(subType === 'operations'){
+    return <Space size="middle">
+      {props.schema.decoration.operations.map((o,index)=>
+        <a key={index} onClick={()=>{
+          const ppath = MUtil.parentPath(props.path);
+          o.handler(ppath ? _.get(props.database, ppath): props.database)
+          }}>
+          {o.label}
+        </a>
+      )}
+    </Space>
+  } else {
+    return MUtil.error("无效的Decoration", props.schema);
+  }
+}

package/src/ui/readable/DivViewer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { BaseViewer } from '../BaseViewer';
+import { assembly } from '../../framework/Assembly';
+
+export class DivViewer extends BaseViewer {
+  element() {
+    return <pre style={{marginBottom:0, color: "rgba(0,0,0,0.6)", overflow: "initial", wordBreak: "break-all", whiteSpace: "pre-wrap", ...this.props.schema.style}}>
+      {assembly.toReadable(this.props.schema, super.getValue(), super.getParentValue())}
+    </pre>
+  }
+}

package/src/ui/widget/Collapsible.tsx

@@ -0,0 +1,156 @@
+import _ from "lodash";
+import React, { CSSProperties } from "react";
+interface Prop {
+	/** 单测需要用到的属性 */
+	name: string;
+	/** 是否展开状态 */
+	open: boolean;
+	/** 动画时长，默认0.5秒，nil表示无动画效果 */
+	ms?: number;
+	/** Collapsible也能定义样式 */
+	style?: CSSProperties;
+	/** html元素id */
+	id?:string;
+}
+
+interface State {
+	css: CSSProperties,
+	
+	// 为了让getDerivedStateFromProps能读到this，把this放在state里
+	self?: Collapsible
+}
+
+/**
+ * 可以折叠的元素，折叠时可带动画效果
+ * 
+ * 以下几点帮助理解这个组件：
+ * 1. 初始元素隐藏时，需要隐藏又不能占用空间，否则无法获取其高度，用position="absolute"让其脱离文档流来实现
+ * 2. 折叠效果通过max-height来实现
+ * 3. 用state来控制元素的css，state可能由props变化和定时器自己触发，所以要用getDerivedStateFromProps
+ */
+export class Collapsible extends React.Component<Prop, State> {
+	div:HTMLDivElement;
+	height: number;
+	action: any;
+	
+	/** props.style去掉margin。如果不去掉，隐藏后margin会占用空间出来 */ 
+	closeStyle: CSSProperties
+
+	constructor(p: Prop){
+		super(p);
+
+		// 这段根据props创造一个初始的state
+		let st = Collapsible.genNextState(this, this.props.open, false);
+		if(!this.props.open){ // 初始折叠的话，不能占用空间，又有实际大小供componentDidMount读取。
+			st.css.position = "absolute"
+			st.css.display = this.props.style.display;
+			delete st.css.maxHeight;
+		}
+		st.self = this;
+		this.state = st;
+
+		this.closeStyle = {};
+		for(let k of Object.keys(this.props.style)){
+			if(k.indexOf("margin") != 0){
+				this.closeStyle[k] = this.props.style[k];
+			}
+		}
+	}
+
+	componentDidMount(){ // dom初次加载时记录元素高度，假如起始状态是隐藏的，这个高度动画会用得上
+		if(!this.height) {
+			this.height = this.div.offsetHeight;
+		}
+	}
+
+	/**
+	 * 产生state对象
+	 * @param self 
+	 * @param open 是否展开
+	 * @param changing 是否是切换中
+	 * @returns 新的state对象
+	 */
+	static genNextState(self: Collapsible, open:boolean, changing:boolean): State {
+		const  transition = self.props.ms ? 'all ' + self.props.ms + 'ms' : undefined;
+
+		if(open) {
+			return { css: {
+				...self.props.style,
+				maxHeight: changing ? self.height + "px" :  undefined,
+				visibility: "visible",
+				opacity: "1",
+				transition
+			} }
+		} else {
+			const r: State = { css: {
+				... self.closeStyle,
+				maxHeight: "0px",
+				visibility: "hidden",
+				opacity: "0",
+				transition
+			} }
+
+			if(!changing) {
+				r.css.display = "none";
+			}
+			return r;
+		}
+	}
+
+	/** Collapsible的state既可以被props影响，也可能自发（延时）改变 */
+	static getDerivedStateFromProps(nextProps:Prop, prevState:State): State {
+		const self = prevState.self;
+
+		 // open状态不变，直接返回。这个判断是要的，否则初始隐藏的元素高度获得不了，因为下面的代码会把maxHeight设置为0
+		if(self.state.css.visibility == "hidden" && !nextProps.open || self.state.css.visibility == "visible" && nextProps.open){
+			return null;
+		}
+
+		if(_.isNil(nextProps.ms)) { // 没有动画
+			return Collapsible.genNextState(self, nextProps.open, false);
+		}
+
+		let nextState = null;
+
+		if(prevState.css.visibility === "visible" && !nextProps.open) { // 折叠
+			// 折叠前，重新获取元素高度，虽然componentDidMount里记录过，但渲染过以后，万一元素高度又变了呢？
+			const heightNow = prevState.self.div.offsetHeight;
+		
+			nextState = Collapsible.genNextState(self, true, true); // maxHeight设置为元素被折叠前的高度，以启动动画
+
+			clearTimeout(self.action)
+			self.action = setTimeout(()=>{
+				self.setState(Collapsible.genNextState(self, false, true)); // maxHeight设置为0，以完成动画
+
+				self.action =setTimeout(()=>{
+					self.setState(Collapsible.genNextState(self, false, false)); // 去掉maxHeight，这样元素高度仍然是可变的
+				}, self.props.ms)
+			})
+			
+			// 计入height，展开时用
+			self.height = _.max([heightNow, self.height]);
+		} else if(prevState.css.visibility === "hidden" && nextProps.open) { // 展开
+			// 原来没有maxHeight，需要给个初始的，等下再改掉。因为maxHeight必须有变化，才能触发动画
+			nextState = Collapsible.genNextState(self, false, true); // maxHeight设置为0，以启动动画
+
+			clearTimeout(self.action)
+			self.action = setTimeout(()=>{
+				self.setState(Collapsible.genNextState(self, true, true)); // maxHeight设置为折叠前的高度，以完成动画
+
+				self.action = setTimeout(()=>{
+					self.setState(Collapsible.genNextState(self, true, false)); // 去掉maxHeight/display，这样元素高度仍然是可变的
+				}, self.props.ms)
+			})
+		}
+		// else { // 状态不变，不用动
+		// }
+		return nextState;
+	}
+
+  render(){
+		// @ts-ignore
+		return <div id={this.props.id} name={this.props.name} ref={d => {this.div = d}} style={this.state.css}>
+			{this.props.children}
+		</div>
+  }
+}

package/src/ui/widget/Segment.less

@@ -0,0 +1,39 @@
+
+
+.AForm_segment {
+  background: white;
+  box-shadow: 0 0 10px #d0cfcf;
+  padding: 30px;
+}
+
+/* 只有第一个segment需要留上边距 */
+* .AForm_segment:not(:first-child){ margin: 25px 0 25px 0;}
+* .AForm_segment:first-child{ margin: 0px 0 25px 0;}
+
+.AForm_segmentTitleBar {
+  border-bottom: 1px solid #d9d9d9;
+  padding: 0 0 10px;
+  margin: 0 0 15px;
+}
+
+.AForm_segmentMainTitle {
+  font-size: 19px;
+  font-weight:bold;
+  margin-right: 15px;
+}
+
+.AForm_segmentSubTitle {
+  font-size: 10px;
+  display: block;
+}
+
+.AForm_segmentTopRight {
+  margin-left: 10px;
+  float: right;
+  display: inline;
+}
+
+
+.MEditor_p .AForm_segment{
+  padding: 20px;
+}

package/src/ui/widget/Segment.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import "./Segment.less";
+
+interface Prop {
+  style?: React.CSSProperties,
+  mainTitle?: React.ReactNode,
+  /** 副标题 */
+  subTitle?: React.ReactNode,
+  /** 右上角的按钮 */
+  topRight?: React.ReactNode,
+
+  /** label的name，可以用于query到dom定位 */
+  labelName?: string;
+
+  /** 分栏数 */
+  column?: number;
+}
+
+export class Segment extends React.Component<Prop, any> {
+  render() {
+    return <div style={this.props.style} className="AForm_segment">
+      <div className="AForm_segmentTitleBar" key="分段标题" {... { name: this.props.labelName }}>
+        {this.props.topRight ? <span className="AForm_segmentTopRight">{this.props.topRight}</span> : undefined}
+        {this.props.mainTitle ? <span className="AForm_segmentMainTitle">{this.props.mainTitle}</span> : undefined}
+        {this.props.subTitle ? <span className="AForm_segmentSubTitle">{this.props.subTitle}</span> : undefined}
+      </div>
+      {
+        this.props.column > 1 ?
+          <div className="AForm" style={{
+            display: 'flex',
+            flexFlow: 'row wrap',
+            alignContent: 'flex-start',
+          }}>
+            {this.props.children}
+          </div>
+          : this.props.children
+      }
+    </div>
+  }
+}

package/src/ui/widget/SegmentEditSwitch.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Button, Radio } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+
+export type SegmentEditSwitchState = 
+  /** 只有一个可以按的【编辑】按钮 */
+  "readable" |
+  /** 只有一个disable的编辑按钮 */
+  "disable" |
+
+  /** 有【取消】和【编辑】按钮，都能按 */
+  "editor" |
+  /** 有【取消】和【编辑】按钮，但编辑按钮展示为loading且disable */
+  "saving"
+
+export interface SegmentEditSwitchProps {
+  state: SegmentEditSwitchState
+  /** edit=true表示按【提交】或者【编辑】按钮 edit=false表示按了【取消】按钮*/
+  onClick: (edit:boolean)=>void
+}
+
+/**
+ * 展示一个【编辑】按钮，点下以后变成【提交】和【取消】两个按钮
+ * @param props 
+ */
+export function SegmentEditSwitch(props:SegmentEditSwitchProps): JSX.Element{
+  let disable = false, saving = false;
+  switch(props.state){
+    // @ts-ignore
+    case "disable":
+      disable = true;
+    // eslint-disable-next-line no-fallthrough
+    case "readable":
+      return <Button value="edit" disabled={disable} onClick={()=>props.onClick(true)}>编辑</Button>
+    // @ts-ignore
+    case "saving":
+      saving = true;
+    // eslint-disable-next-line no-fallthrough
+    case "editor":
+      // @ts-ignore
+      return <Radio.Group>
+        <Radio.Button disabled={saving} value="save" onClick={()=>props.onClick(true)}>{saving?<LoadingOutlined />:undefined} 提交</Radio.Button>
+        <Radio.Button key="c" value="cancel" onClick={()=>props.onClick(false)}>取消</Radio.Button>
+      </Radio.Group>
+  } 
+}

package/src/ui/widget/SelectBox.tsx

@@ -0,0 +1,43 @@
+// 统一移动端的Picker和PC的Selector
+
+import { Select } from "antd";
+import { Picker } from "antd-mobile";
+import { PickerData } from "antd-mobile/lib/picker/PropsType";
+import _ from "lodash";
+import React from "react";
+//import { InputHTMLAttributes } from "react";
+import { MUtil } from '../../framework/MUtil';
+
+interface Prop { // extends InputHTMLAttributes<HTMLInputElement> {
+  data: string;
+  options: PickerData[],
+  onChange: (newValue?:string)=>void;
+  onBlur?:()=>void;
+  
+  // 是否允许开放选项
+  openLabel?: string;
+}
+
+export class SelectBox extends React.Component<Prop, any> {
+  render(){
+    if(MUtil.phoneLike()) {
+      const looked = this.props.options.find(o=>o.value === this.props.data);
+      const backfillClass = looked ? "backfill" : "backfill_empty";
+
+      return <Picker extra="请选择(可选)"
+        cols={1}
+        data={this.props.options}
+        value={[this.props.data]}
+        onOk={e => this.props.onChange(_.last(e))}
+        onDismiss={() => {
+          if(this.props.onBlur) { this.props.onBlur() }
+        }}>
+        <div className={backfillClass}>{looked?.label ?? "点击选择"}</div>
+      </Picker>
+    } else {
+      return <Select defaultValue={this.props.data}> 
+        {this.props.options.map(o=><Select.Option value={o.value}>{o.label ?? o.value}</Select.Option>)} 
+      </Select>;
+    }
+  }
+}

package/src/ui/widget/UnderlineInputBox.less

@@ -0,0 +1,47 @@
+.paperInputBox {
+  border-style: none none solid none;
+  border-bottom: 1px solid #d9d9d9;
+  background: white;
+  border-radius: 0;
+  font-size: 16px;
+}
+
+.paperInputBox:disabled {
+  border-bottom: 1px dotted #f0f0f0;
+  color: #d9d9d9;
+  background: white;
+}
+
+.antMiddleInputBox {
+  font-size: 16px;
+
+  /** 以下都是ant的 */
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  background-color: #fff;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+  font-feature-settings: 'tnum', "tnum";
+  position: relative;
+  display: inline-block;
+  padding: 4px 11px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  line-height: 1.5715;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.antMiddleInputBox:disabled {
+  border: 1px dotted #f0f0f0;
+  color: #d9d9d9;
+  background: white;
+}
+
+.antMiddleInputBox::placeholder {
+  color: #d9d9d9;
+}

package/src/ui/widget/UnderlineInputBox.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { InputHTMLAttributes } from "react";
+import { assembly } from "../../framework/Assembly";
+import "./UnderlineInputBox.less";
+
+export class UnderlineInputBox extends React.Component<InputHTMLAttributes<HTMLInputElement>, any> {
+  render(){
+    return <input className={assembly.theme.themeName + "InputBox"} {...this.props}></input> 
+  }
+}

package/types/framework/Ajax.d.ts

@@ -0,0 +1,5 @@
+export declare const Ajax: {
+    req(method: 'GET' | 'POST' | 'PUT', apiPath: string, urlArgs: any, body: any, headers: any, prompt?: any): Promise<any>;
+    post(apiPath: string, data: any, succMsg?: string): Promise<any>;
+    get(apiPath: string, data?: object): Promise<any>;
+};