form-driver 0.1.0

package/src/ui/editor/basic/ARadio.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { Radio } from "antd";
+import _ from "lodash";
+import { MFieldViewer } from "../../../framework/MFieldViewer";
+import { MUtil } from "../../../framework/MUtil";
+import { BaseViewer } from '../../BaseViewer';
+import { MEnumType } from "../../../types/MEnumType";
+import { assembly } from "../../../framework/Assembly";
+
+// "其他(请填写)"这样的开放选项Radio的value
+const OPEN_ENUM_RADIO_VALUE = -1;
+
+/**
+ * 单选框，用于enum
+ * 支持开放选项。
+ * 定义示例：
+ * {label:"1.1 您的性别是", name:"gendar", type:"enum", option: [{label:"男", value:"M"},{label:"女", value:"F"}] },
+ * {label:"1.1 您的性别是", name:"gendar", type:"enum", option:"男 女"},
+ */
+export class ARadio extends BaseViewer {
+  /** 开放输入框的值 */
+  _inputBoxValue: string = "";
+
+  element(ctx) {
+    const value = super.getValue();
+    const option = MUtil.option(this.props.schema);
+    const style = (this.props.schema.layoutHint ?? "v") === "v" ? { display: "block" } : undefined;
+
+    let initIndex = undefined;
+    const options = option.map((m: any, index) => {
+      const isShow = MUtil.isShow(this.props.database, ctx.rootProps.schema?.objectFields, m.showIf)
+      if (!isShow) return null;
+      if (value === m.value) {
+        initIndex = index;
+      }
+      return <Radio disabled={this.props.disable} key={index} value={index} style={style}>{m.label ?? m.value}</Radio>;
+    });
+    if (initIndex === undefined) {
+      this._inputBoxValue = value;
+      if (!_.isNil(value)) {
+        initIndex = OPEN_ENUM_RADIO_VALUE;
+      }
+    }
+
+    if (this.props.schema.openOption) {
+      const editor = <MFieldViewer morph={this.props.morph} schema={this.props.schema.openOption} database={this} path="_inputBoxValue"
+        afterChange={(path: string, str: any, final: boolean) => {
+          const matchEnum = option.find(e => e.value === str);
+          if (matchEnum) { // 不能让用户输入了某个候选值
+            this._inputBoxValue = "";
+            super.changeValueEx(str, true, final);
+          } else {
+            this._inputBoxValue = str;
+            super.changeValueEx(this._inputBoxValue, false, final);
+          }
+        }}
+        parent={this.props.schema} forceValid={false} disable={initIndex !== OPEN_ENUM_RADIO_VALUE}
+        style={{ width: "inherit" }} />;
+
+      options.push(<Radio disabled={this.props.disable} key={"_open_"} value={OPEN_ENUM_RADIO_VALUE}>
+        <span style={{ marginRight: "10px" }}>{this.props.schema.openOption.label ?? "其他"}</span>
+        {editor}
+      </Radio>);
+    }
+
+    const p = this.props.schema.props ?? {};
+    return <Radio.Group
+      key={this.state.ctrlVersion}
+      defaultValue={initIndex}
+      onChange={(vv) => {
+        let v = vv.target.value;
+        if (v !== OPEN_ENUM_RADIO_VALUE) {
+          super.changeValue(option[v].value);
+        } else {
+          if (!this._inputBoxValue) {
+            this._inputBoxValue = "";
+          }
+          super.changeValue(this._inputBoxValue);
+        }
+      }}
+      {...p}
+      >
+      {options}
+    </Radio.Group>
+  }
+}

package/src/ui/editor/basic/ARangePicker.tsx

@@ -0,0 +1,129 @@
+import React, { Component, RefObject } from "react";
+import { DatePicker } from "antd";
+import zhCN from 'antd/lib/date-picker/locale/zh_CN';
+import moment from "moment";
+import { Button, Calendar } from "antd-mobile";
+import ReactDOM from "react-dom";
+import { RangePickerProps } from "antd/lib/date-picker";
+import _ from "lodash";
+import { Viewer, ViewerState } from '../../BaseViewer';
+import { MUtil } from '../../../framework/MUtil';
+import { MProp } from "../../../framework/Schema";
+import { MDateRangeType } from '../../../types/MDateRangeType';
+import { assembly } from '../../../framework/Assembly';
+
+export type ARangePickerData = [
+  // 开始时间
+  string | null | undefined,
+  // 结束时间
+  string | null | undefined,
+  // 是否至今，如果true，结束时间是无效的
+  boolean | null | undefined
+];
+
+type AntData = [moment.Moment | null, moment.Moment | null];
+
+interface State extends ViewerState {
+  mobileDlg: boolean;
+}
+
+export class ARangePicker extends Viewer<State> {
+  _pickerRef: RefObject<Component<RangePickerProps, any, any>> = React.createRef();
+  _onCalendarChangeValue?: AntData | null;
+
+  constructor(p: MProp) {
+    super(p);
+    this.state = { ctrlVersion: 1, noValidate: false, mobileDlg: false };
+  }
+
+  componentDidUpdate() {
+    this._patchTillnow();
+  }
+
+  componentDidMount() {
+    this._patchTillnow();
+  }
+
+  _patchTillnow() {
+    const v = super.getValue();
+    if (_.get(v, "[2]")) { // tillnow
+      const dom = ReactDOM.findDOMNode(this._pickerRef.current);
+      if (dom) {
+        // @ts-ignore
+        let r = dom.querySelector(":nth-child(3)");
+        r.innerHTML = "<input readonly disabled size='12' autocomplete='off' value='至今' style='color: black'>";
+      }
+    }
+  }
+
+  /**
+   * RangePicker的数据转换成json上的数据类型
+   * @param r 
+   */
+  _rangePicker2Data(v: AntData | null | undefined, tillNow: boolean): ARangePickerData | undefined {
+    if (!v) {
+      return undefined;
+    }
+    const dataFormat = this.props.schema.dataFormat ?? "x";
+    return [v[0]?.format(dataFormat), v[1]?.format(dataFormat), tillNow];
+  }
+
+  /**
+   * json上的数据转换成RangePicker的数据
+   * @param d 
+   */
+  _data2rangePicker(d: ARangePickerData): AntData {
+    const dataFormat = this.props.schema.dataFormat ?? "x";
+    return [d[0] ? moment(d[0], dataFormat) : null, d[1] ? moment(d[1], dataFormat) : null];
+  }
+
+  element() {
+    const p = this.props.schema.props ?? {};
+    let rangePickerData = this._data2rangePicker(this.getValue() ?? []);
+    if (MUtil.phoneLike()) {
+      let show = MDateRangeType.toReadableN(assembly, this.props.schema, super.getValue());
+
+      return <>
+        <div className="backfill" onClick={() => this.setState({ mobileDlg: true })}> {show ?? '请点击选择'} </div>
+        <Calendar
+          visible={this.state.mobileDlg}
+          pickTime={this.props.schema.dateRange?.showTime}
+          minDate={this.props.schema.min ? new Date(this.props.schema.min) : undefined}
+          maxDate={this.props.schema.min ? new Date(this.props.schema.max) : undefined}
+          onCancel={() => this.setState({ mobileDlg: false })}
+          onConfirm={(start, end) => {
+            super.changeValueEx(this._rangePicker2Data([moment(start), moment(end)], false), true, true)
+            this.setState({ mobileDlg: false })
+          }}
+          {...p}
+        />
+      </>
+    } else {
+      // 构造元素
+      return <DatePicker.RangePicker
+        ref={this._pickerRef}
+        showTime={this.props.schema.dateRange?.showTime}
+        key={this.state.ctrlVersion}
+        renderExtraFooter={this.props.schema.dateRange?.hideTillNow || this.props.schema.dateRange?.showTime // TODO 显示时间时，“至今”无法支持
+          ? undefined
+          : (mode) => <div style={{ textAlign: "right" }} {...p}>
+            <Button
+              size="small" style={{ width: "100px", display: "inline-block", marginTop: "5px" }}
+              onClick={() => {
+                super.changeValueEx(this._rangePicker2Data(this._onCalendarChangeValue, true), true, true);
+              }}>至今</Button>
+          </div>
+        }
+        bordered={this.props.hideBorder ? false : true}
+        style={{ minWidth: "240px" }}
+        locale={zhCN}
+        defaultValue={rangePickerData}
+        onCalendarChange={(d) => {
+          this._onCalendarChangeValue = d;
+        }}
+        onChange={(vv) => {
+          super.changeValueEx(this._rangePicker2Data(vv, false), true, true)
+        }} />;
+    }
+  }
+}

package/src/ui/editor/basic/ARate.less

@@ -0,0 +1,8 @@
+.ant-rate {
+    display: flex !important;
+    width  : 100%;
+
+    .ant-rate-star {
+        flex: 1
+    }
+}

package/src/ui/editor/basic/ARate.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import _ from "lodash";
+import { BaseViewer } from "../../BaseViewer";
+import { Rate } from 'antd';
+import './ARate.less';
+import { MProp } from "../../../framework/Schema";
+
+/**
+ * antd 的评分组件 https://ant.design/components/rate-cn/
+ * { editor: 'ARate', name: 'score', label: "评分", required: true, props: {count: 8} }
+ */
+export class ARate extends BaseViewer {
+  value: string;
+
+  constructor(p:MProp){
+    super(p);
+    this.value = super.getValue() == 0 ? null : super.getValue();
+  }
+  element() {
+    const p = this.props.schema.props ?? {};
+    const props = {
+      count: this.props.schema.max,
+      defaultValue: this.value,
+      onChange: (value, label, extra)=>{
+        if (value == 0) value = null
+        if (p.onChange) p.onChange(value, label, extra)
+        super.changeValue(value);
+      },
+      onBlur: () =>{
+        if (p.onBlur) p.onBlur()
+        super.changeValue(super.getValue())
+      },
+      ...p,
+    }
+    return <Rate {...props} />
+  }
+}

package/src/ui/editor/basic/ARemoteSelector.tsx

@@ -0,0 +1,116 @@
+
+import React from "react";
+import { Select, Spin } from 'antd';
+import debounce from 'lodash/debounce';
+import { Viewer, ViewerState } from '../../BaseViewer';
+import { Ajax } from '../../../framework/Ajax';
+import _ from "lodash";
+import { MUtil } from '../../../framework/MUtil';
+import { MFieldSchema } from '../../../framework/Schema';
+
+interface State extends ViewerState {
+  candidate: any[],
+  fetching: boolean,
+  q: string;
+}
+
+// 这个Viewer可用的数据类型
+const VALID_TYPES = {
+  "vl":true,
+  "array":true,
+  "string":true // 仅保存value
+};
+
+export function labelExpr(d: any, remote: MFieldSchema["remote"]){
+  let script = "const {" + _.keys(d).join(',') + "} = d; return " + remote.labelExpr;
+  return new Function("d", "_", script)(d, _);
+}
+
+export class ARemoteSelector extends Viewer<State> {
+  fetchCandidate: (key:string)=>void;
+
+  constructor(props) {
+    super(props);
+    this.state = {candidate: undefined, fetching: false, q:""};
+    this.fetchCandidate = debounce(q => {
+      this.setState({ fetching: true });
+      Ajax.get(this.props.schema.remote.url.replace("${q}", q))
+        .then(
+          d => {
+            _.assign(this.props.schema, {
+              _options: d
+            })
+            this.setState({ candidate: MUtil.get(d, this.props.schema.remote.dataPath), fetching: false })
+          }
+        );
+    }, 500);
+  }
+
+  element() {
+    const type = this.props.schema.type;
+    if(!VALID_TYPES[type]){
+      return MUtil.error("只适用类型" + Object.keys(VALID_TYPES).join(","), this.props.schema);
+    }
+
+    let defaultValue = super.getValue();
+    if(type === "string"){
+      defaultValue = {value: defaultValue, label: defaultValue};
+    }
+
+    let mode = undefined;
+    if(type === "array") {
+      if(!_.isArray(defaultValue)){ // 数据不对
+        defaultValue = []; // 干掉
+      }
+      mode = "multiple"
+    } else {
+      if(_.isNil(defaultValue?.value)){
+        defaultValue = undefined;
+      }
+    }
+    
+    const p = this.props.schema.props ?? {};
+    return <Select
+      key={this.props.path}
+      showSearch
+      mode={mode}
+      // mode={"multiple"}
+      labelInValue
+      defaultValue={defaultValue}
+      placeholder={this.props.schema.placeholder}
+      notFoundContent={this.state.fetching ? <Spin size="small" /> : null}
+      filterOption={false}
+      onSearch={this.fetchCandidate}
+      style={{ width: '100%' }}
+      onFocus={()=>{
+        if(!this.state.candidate) {
+          this.fetchCandidate("");
+        }
+      }}
+      onChange={(v: any) => {
+        switch(type){
+          case "vl":
+            if (v) super.changeValue({value:v.value, label:v.label});
+            else super.changeValue(null);
+            break;
+          case "array":
+            if (v) super.changeValue(v.map(i=>({value:i.value, label:i.label })));
+            else super.changeValue(null);
+            break;
+          case "string":
+            if (v) super.changeValue(v.value);
+            else super.changeValue(null);
+            break;
+        }
+      }}
+      {...p}
+      >
+      {
+        this.state.candidate?.map(d => {
+          const v = MUtil.get(d, this.props.schema.remote.valuePath);
+          return <Select.Option key={v} value={v}>{labelExpr(d, this.props.schema.remote)}</Select.Option>
+        })
+      }
+    </Select>
+  }
+}

package/src/ui/editor/basic/ASelector.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Divider } from "antd";
+import Select from "antd/lib/select";
+import { MUtil } from "../../../framework/MUtil";
+import { MEnumField, MProp } from '../../../framework/Schema';
+import { BaseViewer } from '../../BaseViewer';
+import { SelectBox } from "../../widget/SelectBox";
+import _ from "lodash";
+import { MFieldViewer } from '../../../framework/MFieldViewer';
+import { MEnumType } from "../../../types/MEnumType";
+import { assembly } from "../../../framework/Assembly";
+
+/**
+ * 下拉选择框
+ * 定义示例： {label:"1.1 您的性别是",   name:"gendar",          type:"enum",    typeArg: [{label:"男", value:"M"},{label:"女", value:"F"}] },
+ */
+export class ASelector extends BaseViewer {
+  /** 开放输入框的值 */
+  _inputBoxValue: string = "";
+  _enums: MEnumField[];
+
+  constructor(p: MProp) {
+    super(p);
+    this._enums = _.cloneDeep(MUtil.option(this.props.schema));
+  }
+
+  element() {
+    const value =super.getValue();
+
+    const p = this.props.schema.props ?? {};
+    if (MUtil.phoneLike()) {
+      if (this.props.schema.openOption) {
+        return MUtil.error("手机上的ASelector还不支持openOption");
+      }
+      return <SelectBox
+        key={this.props.path}
+        data={value}
+        // @ts-ignore
+        options={this._enums.map(e => { return { label: e.label ?? e.value?.toString(), value: e.value } })}
+        {...p}
+        onChange={(newValue?: string) => { super.changeValue(newValue) }} />
+    } else {
+      let initIndex = undefined;
+      const options = this._enums.map((m, index) => {
+        if (value === m.value) {
+          initIndex = index;
+        }
+        return <Select.Option key={index} value={index}>{m.label ?? m.value}</Select.Option>
+      });
+      return <Select
+        key={this.props.path}
+        defaultValue={initIndex}
+        placeholder={super.getPlaceholder()}
+        bordered={this.props.hideBorder ? false : true}
+        //style={{minWidth: width + 20}}
+        dropdownRender={menu => {
+          return this.props.schema.openOption
+            ? <>
+              {menu}
+              <Divider key="分割线" style={{ margin: '4px 0' }} />
+              <div key="开放选择" style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
+                <MFieldViewer morph={this.props.morph} schema={this.props.schema.openOption} database={this} path="_inputBoxValue" parent={this.props.schema} forceValid={false} style={{ width: "inherit" }} />
+                <Button shape="circle" icon={<PlusOutlined />} onClick={() => {
+                  let matchEnum = this._enums.findIndex(e => e.value === this._inputBoxValue);
+                  if (matchEnum < 0) {
+                    matchEnum = this._enums.findIndex(e => e.label === this._inputBoxValue);
+                  }
+                  if (matchEnum >= 0) { // 不能让用户输入了某个候选值
+                    super.changeValue(this._enums[matchEnum].value);
+                  } else {
+                    this._enums.unshift({ value: this._inputBoxValue, label: this._inputBoxValue });
+                    this.setState({});
+                  }
+                }} />
+              </div>
+            </>
+            : menu
+        }}
+        style={{ width: "100%" }}
+        onChange={(vv: any) => super.changeValue(this._enums[vv].value)}
+        {...p}
+      >
+        {options}
+      </Select>;
+    }
+  }
+}

package/src/ui/editor/basic/ASetSelector.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Select } from "antd";
+import { MUtil } from "../../../framework/MUtil";
+import { BaseViewer } from "../../BaseViewer";
+import _ from "lodash";
+import { MSetType } from '../../../types/MSetType';
+import { assembly } from '../../../framework/Assembly';
+
+/**
+ * 下拉框多选
+ * 示例：{label:"1.13 除爱人/对象之外，目前和您一起生活的家庭成员包括(多选):",name:"familyAccompany",type:"set", editor:"ASetSelector", option: "父亲 母亲 孩子 爱人/对象的父亲 爱人/对象的母亲 兄弟姐妹"},
+ * 值：["孩子", "父亲"]
+ */
+export class ASetSelector extends BaseViewer {
+  element() {
+    if(this.props.schema.openOption){
+      return MUtil.error("尚不支持openOption", this.props.schema);
+    }
+    let initValues = super.getValue();
+    
+    // 给字段定义加上序号
+    const option:any[] = MUtil.option(this.props.schema);
+    option.forEach((e,index)=> e.index =index)
+
+    // 把value数组转换成序号数组
+    const value2Fields = _.keyBy(option, "value");
+    const initIndexes = initValues?.map(v => value2Fields[v].index);
+
+    const p = this.props.schema.props ?? {};
+    return <Select
+      key={this.props.path + "/" + this.state.ctrlVersion}
+      mode="multiple"
+      placeholder={this.props.schema.placeholder}
+      optionFilterProp="children"
+      style={this.props.style}
+      defaultValue={initIndexes}
+      onChange={(newIndexes: any)=>{
+        let add = []; // 新加进去的
+        let baseValues = [] // 原来就有的
+        newIndexes.forEach(idx => {
+          const v = option[idx].value;
+          if(initValues?.indexOf(v) >= 0){
+            baseValues.push(v);
+          } else {
+            add.push(v);
+          }
+        });
+
+        if(add.length > 0){
+          add.forEach(newOne => {
+            baseValues = MSetType.change(true, newOne, baseValues, this.props.schema);
+          });
+        }
+        super.changeValueEx(baseValues, newIndexes?.length != baseValues.length, true);
+      }}
+      {...p}
+      >
+      {option.map((item,index) => (
+        <Select.Option key={index} value={index}>
+          {item.label ?? item.value}
+        </Select.Option>
+      ))}
+    </Select>;
+  }
+}

package/src/ui/editor/basic/ASpecInputBox.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Input } from "antd";
+import { BaseViewer } from '../../BaseViewer';
+
+/**
+ * 手机号/邮箱等输入框
+ * cnPhone/tel/email
+ */
+export class ASpecInputBox extends BaseViewer {
+  element() {
+    const p = this.props.schema.props ?? {};
+    return <Input
+      {...super.antProp()}
+      defaultValue={super.getValue()}
+      onBlur={() => this.changeValueEx(super.getValue(), false, true)}
+      onChange={(v) => this.changeValueEx(v.target.value, false, false)} 
+      {...p}
+    />;
+  }
+}

package/src/ui/editor/basic/ATreeSelect.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import _ from "lodash";
+import { BaseViewer } from "../../BaseViewer";
+import { TreeSelect } from 'antd';
+
+/**
+ * antd 的树型选择控件 https://ant.design/components/tree-select-cn/
+ *   {
+ *      "type": "array", arrayMember: {type: 'vl'}, toReadable: 'value.map(i=>i.label).join(",")', 
+ *       "editor": "ATreeSelect", "name": "tree1", "label": "多选树选择", props: {
+ *        treeData: treeData,
+ *         labelInValue: true,
+ *        multiple: true
+ *       }
+ *    }
+ */
+export class ATreeSelect extends BaseViewer {
+  value: string;
+
+  constructor(p){
+    super(p);
+    this.value = super.getValue();
+  }
+
+  element() {
+    const p = this.props.schema.props ?? {};
+    const props = {
+      defaultValue: this.value,
+      onChange: (value, label, extra) => {
+        if (p.onChange) p.onChange(value, label, extra)
+        super.changeValue(value);
+      },
+      onBlur: () => {
+        if (p.onBlur) p.onBlur()
+        super.changeValue(super.getValue())
+      },
+      ...p,
+    }
+    return <TreeSelect style={{ width: "100%" }} {...props} />
+  }
+}