@hzab/form-render-mobile 0.0.1

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@hzab/form-render-mobile",
+  "version": "0.0.1",
+  "description": "formily-form-render-mobile",
+  "main": "lib",
+  "scripts": {
+    "dev": "npm run prepare && webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-patch": "npm run build && git add . && git commit -m \"build: patch\" && npm version patch && npm publish --access public",
+    "publish-minor": "npm run build && git add . && git commit -m \"build: minor\" && npm version minor && npm publish --access public",
+    "publish-major": "npm run build && git add . && git commit -m \"build: major\" && npm version major && npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "0.0.4",
+    "@hzab/webpack-config": "0.0.12",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "axios": "^1.4.0",
+    "babel-plugin-import": "^1.13.8",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
+    "typedoc": "^0.24.8",
+    "typescript": "^4.9.4"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.8.1",
+    "@formily/antd-mobile": "^1.0.0-beta.3",
+    "@formily/core": "^2.2.29",
+    "@formily/react": "^2.2.29",
+    "antd": "^4.24.13",
+    "antd-mobile": "^5.32.0",
+    "antd-mobile-icons": "^0.2.2",
+    "leaflet": "^1.9.4",
+    "react-leaflet": "^2.8.0"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  }
+}

package/src/common/schemaHandler.js

@@ -0,0 +1,55 @@
+import _ from "lodash";
+
+export const formLayoutTPL = {
+  type: "object",
+  properties: {
+    formLayout_tfsvvph1s7i: {
+      type: "void",
+      "x-component": "FormLayout",
+      "x-component-props": {
+        layout: "vertical",
+      },
+      "x-designable-id": "formLayout_tfsvvph1s7i",
+      "x-index": 0,
+      properties: {},
+    },
+  },
+  "x-designable-id": "ndi5r4fw9jd",
+};
+
+export function schemaHandler(_schema) {
+  let formSchema = _.cloneDeep(_schema);
+  let schema = formSchema.schema || formSchema;
+  const formConf = formSchema.form || {};
+
+  if (!formConf.layout) {
+    formConf.layout = "horizontal";
+  }
+
+  if (schema.properties && Object.keys(schema.properties).length > 0) {
+    const key = Object.keys(schema.properties)[0];
+    // 手动添加 FormLayout
+    if (schema.properties[key]["x-component"] !== "FormLayout") {
+      const _s = _.cloneDeep(formLayoutTPL);
+      if (formConf) {
+        if (!_s.properties.formLayout_tfsvvph1s7i["x-component-props"]) {
+          _s.properties.formLayout_tfsvvph1s7i["x-component-props"] = _.cloneDeep(formConf);
+        } else {
+          _s.properties.formLayout_tfsvvph1s7i["x-component-props"] = {
+            ..._s.properties.formLayout_tfsvvph1s7i["x-component-props"],
+            ...formConf,
+          };
+        }
+      }
+      _s.properties.formLayout_tfsvvph1s7i.properties = schema.properties;
+      schema = _s;
+    }
+  }
+
+  formSchema = {
+    form: formConf,
+    schema: schema,
+  };
+
+  return formSchema;
+}

package/src/components/Cascader/index.jsx

@@ -0,0 +1,75 @@
+import { useState, useEffect } from "react";
+import { connect, mapProps } from "@formily/react";
+import { CascadePicker } from "antd-mobile";
+
+import "./index.less";
+
+function Select(props) {
+  const { disabled, readOnly, placeholder = "请选择", field = {}, onChange } = props;
+
+  const { dataSource } = field;
+
+  const [_options, setOptions] = useState(dataSource || []);
+
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (dataSource) {
+      setOptions(dataSource);
+    }
+  }, [dataSource]);
+
+  function onClose() {
+    setVisible(false);
+  }
+
+  function onClick() {
+    if (readOnly || disabled) {
+      return;
+    }
+    setVisible((val) => {
+      return !val;
+    });
+  }
+
+  function onConfirm(value) {
+    onChange && onChange(value);
+  }
+
+  return (
+    <div className="formily-cascader" onClick={onClick}>
+      <CascadePicker
+        {...props}
+        style={{ pointerEvents: readOnly || disabled ? "none" : undefined }}
+        options={_options}
+        visible={visible}
+        onClose={onClose}
+        onConfirm={onConfirm}
+      >
+        {(value) => {
+          if (!value || value.length <= 0) {
+            return placeholder;
+          }
+          return value?.reduce((pre, cur) => {
+            if (!cur) {
+              return pre;
+            }
+            if (pre) {
+              pre += " - ";
+            }
+            return (pre += cur?.label);
+          }, "");
+        }}
+      </CascadePicker>
+    </div>
+  );
+}
+
+export default connect(
+  Select,
+  mapProps((props, field) => {
+    console.log("props, field", props, field);
+
+    return { ...props, form: field.form, field };
+  }),
+);

package/src/components/Cascader/index.less

@@ -0,0 +1,3 @@
+.formily-cascader {
+  height: 100%;
+}

package/src/components/DatePicker/index.less

@@ -0,0 +1,3 @@
+.formily-date-picker {
+  height: 100%;
+}

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,98 @@
+import { useState, useEffect, useMemo } from "react";
+import { connect, mapProps } from "@formily/react";
+import { DatePicker as ADataPicker } from "antd-mobile";
+import dayjs from "dayjs";
+
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+
+dayjs.extend(advancedFormat);
+dayjs.extend(weekOfYear);
+
+import "./index.less";
+
+const formatEnum = {
+  // 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'week' | 'week-day'
+  year: "YYYY",
+  month: "YYYY-MM",
+  day: "YYYY-MM-DD",
+  hour: "YYYY-MM-DD HH",
+  minute: "YYYY-MM-DD HH:mm",
+  second: "YYYY-MM-DD HH:mm:ss",
+  week: "YYYY年 第ww周",
+  "week-day": "YYYY年 第ww周 ddd",
+};
+
+function DatePicker(props) {
+  const { disabled, readOnly, placeholder = "请选择", field = {}, onChange } = props;
+
+  const { dataSource } = field;
+
+  const [_options, setOptions] = useState(dataSource ? [dataSource] : []);
+
+  const [visible, setVisible] = useState(false);
+
+  console.log(props.showTime);
+
+  const precision = useMemo(() => {
+    if (props.precision) {
+      return props.precision;
+    }
+    const {
+      // time date month year
+      picker,
+      showTime,
+    } = props;
+    // 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'week' | 'week-day'
+    let _precision = "day";
+    if ((!picker || picker === "date") && showTime) {
+      _precision = "second";
+    }
+    return _precision;
+  }, [props.precision, props.mode, props.showTime]);
+
+  useEffect(() => {
+    if (dataSource) {
+      setOptions([dataSource]);
+    }
+  }, [dataSource]);
+
+  function onClose() {
+    setVisible(false);
+  }
+
+  function onClick() {
+    if (readOnly || disabled) {
+      return;
+    }
+    setVisible((val) => {
+      return !val;
+    });
+  }
+
+  function onConfirm(value) {
+    onChange && onChange(value);
+  }
+
+  return (
+    <div className="formily-date-picker" onClick={onClick}>
+      <ADataPicker
+        {...props}
+        style={{ pointerEvents: readOnly || disabled ? "none" : undefined }}
+        visible={visible}
+        onClose={onClose}
+        precision={precision}
+        onConfirm={onConfirm}
+      >
+        {(val) => (val ? dayjs(val).format(formatEnum[precision] || "YYYY-MM-DD") : placeholder)}
+      </ADataPicker>
+    </div>
+  );
+}
+
+export default connect(
+  DatePicker,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);

package/src/components/MapPicker/common/getCurrentPosition.js

@@ -0,0 +1,27 @@
+function getCurrentPosition(config) {
+  return new Promise((resolve, reject) => {
+    // if (window._isMock) {
+    //   // TODO: 去除 mock 数据
+    //   resolve({
+    //     coords: {
+    //       longitude: 120.19832490988816,
+    //       latitude: 30.229457352287543,
+    //     },
+    //   });
+    //   return;
+    // }
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        resolve(position);
+      },
+      reject,
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        ...config,
+      },
+    );
+  });
+}
+
+export default getCurrentPosition;

package/src/components/MapPicker/common/gpsConvert.js

@@ -0,0 +1,236 @@
+/* eslint-disable*/
+/*
+ * BD-09：百度坐标系(百度地图)
+ * GCJ-02：火星坐标系（谷歌中国地图、高德地图）
+ * WGS84：地球坐标系（国际通用坐标系，谷歌地图）
+ */
+
+const x_PI = (3.14159265358979324 * 3000.0) / 180.0;
+const PI = 3.1415926535897932384626;
+const a = 6378245.0;
+const ee = 0.00669342162296594323;
+
+// 百度坐标系转火星坐标系
+function bd09togcj02(bd_lon, bd_lat) {
+  const x = bd_lon - 0.0065;
+  const y = bd_lat - 0.006;
+  const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
+  const theta = Math.Atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
+
+  const gcj_lon = z * Math.cos(theta);
+  const gcj_lat = z * Math.sin(theta);
+  const gcj = [gcj_lon, gcj_lat]; // 火星坐标系值
+
+  // 火星坐标系转wgs84
+  const wgs = [gcj02towgs84(gcj[0], gcj[1])];
+  return wgs;
+}
+
+// 火星坐标系转wgs84
+export function gcj02towgs84(gcj_lon, gcj_lat) {
+  gcj_lon = Number(gcj_lon);
+  gcj_lat = Number(gcj_lat);
+  if (out_of_china(gcj_lon, gcj_lat)) {
+    // 不在国内，不进行纠偏
+    const back = [gcj_lat, gcj_lon];
+    return back;
+  } else {
+    let dlon = transformlon(gcj_lon - 105.0, gcj_lat - 35.0);
+    let dlat = transformlat(gcj_lon - 105.0, gcj_lat - 35.0);
+    const radlat = (gcj_lat / 180.0) * PI;
+    let magic = Math.sin(radlat);
+    magic = 1 - ee * magic * magic;
+    const sqrtmagic = Math.sqrt(magic);
+    dlon = (dlon * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
+    dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
+    const mglon = gcj_lon + dlon;
+    const mglat = gcj_lat + dlat;
+    const wgs_lon = gcj_lon * 2 - mglon;
+    const wgs_lat = gcj_lat * 2 - mglat;
+    const wgs = [wgs_lat, wgs_lon]; // wgs84坐标系值
+    return wgs;
+  }
+}
+
+// 火星坐标系转百度坐标系
+function gcj02tobd09(gcj_lon, gcj_lat) {
+  const z = Math.sqrt(gcj_lon * gcj_lon + gcj_lat * gcj_lat) + 0.00002 * Math.sin(gcj_lat * x_PI);
+  const theta = Math.atan2(gcj_lat, gcj_lon) + 0.000003 * Math.cos(gcj_lon * x_PI);
+  const bd_lon = z * Math.cos(theta) + 0.0065;
+  const bd_lat = z * Math.sin(theta) + 0.006;
+  const bd = [bd_lon, bd_lat];
+  return bd;
+}
+
+// wgs84转火星坐标系
+export function wgs84togcj02(wgs_lon, wgs_lat, isWgs84 = false) {
+  wgs_lon = Number(wgs_lon);
+  wgs_lat = Number(wgs_lat);
+  if (out_of_china(wgs_lon, wgs_lat)) {
+    // 不在国内
+    const back = [wgs_lon, wgs_lat];
+    return back;
+  } else {
+    if (isWgs84) {
+      return [wgs_lat, wgs_lon];
+    } else {
+      let dwgs_lon = transformlon(wgs_lon - 105.0, wgs_lat - 35.0);
+      let dwgs_lat = transformlat(wgs_lon - 105.0, wgs_lat - 35.0);
+      const radwgs_lat = (wgs_lat / 180.0) * PI;
+      let magic = Math.sin(radwgs_lat);
+      magic = 1 - ee * magic * magic;
+      const sqrtmagic = Math.sqrt(magic);
+      dwgs_lon = (dwgs_lon * 180.0) / ((a / sqrtmagic) * Math.cos(radwgs_lat) * PI);
+      dwgs_lat = (dwgs_lat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
+      const gcj_lon = wgs_lon + dwgs_lon;
+      const gcj_lat = wgs_lat + dwgs_lat;
+      const gcj = [gcj_lat, gcj_lon];
+      return gcj;
+    }
+  }
+}
+
+function transformlon(lon, lat) {
+  let ret = 300.0 + lon + 2.0 * lat + 0.1 * lon * lon + 0.1 * lon * lat + 0.1 * Math.sqrt(Math.abs(lon));
+  ret += ((20.0 * Math.sin(6.0 * lon * PI) + 20.0 * Math.sin(2.0 * lon * PI)) * 2.0) / 3.0;
+  ret += ((20.0 * Math.sin(lon * PI) + 40.0 * Math.sin((lon / 3.0) * PI)) * 2.0) / 3.0;
+  ret += ((150.0 * Math.sin((lon / 12.0) * PI) + 300.0 * Math.sin((lon / 30.0) * PI)) * 2.0) / 3.0;
+  return ret;
+}
+
+function transformlat(lon, lat) {
+  let ret = -100.0 + 2.0 * lon + 3.0 * lat + 0.2 * lat * lat + 0.1 * lon * lat + 0.2 * Math.sqrt(Math.abs(lon));
+  ret += ((20.0 * Math.sin(6.0 * lon * PI) + 20.0 * Math.sin(2.0 * lon * PI)) * 2.0) / 3.0;
+  ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0;
+  ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0;
+  return ret;
+}
+
+// 判断是否在国内，不在国内则不做偏移
+function out_of_china(lon, lat) {
+  return lon < 72.004 || lon > 137.8347 || lat < 0.8293 || lat > 55.8271 || false;
+}
+
+// 1.加密解密方法使用：
+
+// 1.加密
+// var str = '124中文内容';
+// var base = new Base64();
+// var result = base.encode(str);
+// document.write(result);
+
+// 2.解密
+// var result2 = base.decode(result);
+// document.write(result2);
+// 2.加密、解密算法封装：
+
+function Base64() {
+  // private property
+  _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+
+  // public method for encoding
+  this.encode = function (input) {
+    let output = "";
+    let chr1;
+    let chr2;
+    let chr3;
+    let enc1;
+    let enc2;
+    let enc3;
+    let enc4;
+    let i = 0;
+    input = _utf8_encode(input);
+    while (i < input.length) {
+      chr1 = input.charCodeAt(i++);
+      chr2 = input.charCodeAt(i++);
+      chr3 = input.charCodeAt(i++);
+      enc1 = chr1 >> 2;
+      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+      enc4 = chr3 & 63;
+      if (isNaN(chr2)) {
+        enc3 = enc4 = 64;
+      } else if (isNaN(chr3)) {
+        enc4 = 64;
+      }
+      output = output + _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
+    }
+    return output;
+  };
+
+  // public method for decoding
+  this.decode = function (input) {
+    let output = "";
+    let chr1;
+    let chr2;
+    let chr3;
+    let enc1;
+    let enc2;
+    let enc3;
+    let enc4;
+    let i = 0;
+    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+    while (i < input.length) {
+      enc1 = _keyStr.indexOf(input.charAt(i++));
+      enc2 = _keyStr.indexOf(input.charAt(i++));
+      enc3 = _keyStr.indexOf(input.charAt(i++));
+      enc4 = _keyStr.indexOf(input.charAt(i++));
+      chr1 = (enc1 << 2) | (enc2 >> 4);
+      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+      chr3 = ((enc3 & 3) << 6) | enc4;
+      output += String.fromCharCode(chr1);
+      if (enc3 != 64) {
+        output += String.fromCharCode(chr2);
+      }
+      if (enc4 != 64) {
+        output += String.fromCharCode(chr3);
+      }
+    }
+    output = _utf8_decode(output);
+    return output;
+  };
+
+  // private method for UTF-8 encoding
+  _utf8_encode = function (string) {
+    string = string.replace(/\r\n/g, "\n");
+    let utftext = "";
+    for (let n = 0; n < string.length; n++) {
+      const c = string.charCodeAt(n);
+      if (c < 128) {
+        utftext += String.fromCharCode(c);
+      } else if (c > 127 && c < 2048) {
+        utftext += String.fromCharCode((c >> 6) | 192);
+        utftext += String.fromCharCode((c & 63) | 128);
+      } else {
+        utftext += String.fromCharCode((c >> 12) | 224);
+        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+        utftext += String.fromCharCode((c & 63) | 128);
+      }
+    }
+    return utftext;
+  };
+
+  // private method for UTF-8 decoding
+  _utf8_decode = function (utftext) {
+    let string = "";
+    let i = 0;
+    let c = (c1 = c2 = 0);
+    while (i < utftext.length) {
+      c = utftext.charCodeAt(i);
+      if (c < 128) {
+        string += String.fromCharCode(c);
+        i++;
+      } else if (c > 191 && c < 224) {
+        c2 = utftext.charCodeAt(i + 1);
+        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+        i += 2;
+      } else {
+        c2 = utftext.charCodeAt(i + 1);
+        c3 = utftext.charCodeAt(i + 2);
+        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+        i += 3;
+      }
+    }
+    return string;
+  };
+}

package/src/components/MapPicker/common/map-config.js

@@ -0,0 +1,7 @@
+export const mapConfig = {
+  center: [30.25027961206251, 120.16514401757941], //  默认地图展示位置
+  minZoom: 3,
+  maxZoom: 16,
+  zoom: 14,
+  attributionControl: false,
+};

package/src/components/MapPicker/index.jsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { connect, mapProps } from "@formily/react";
+import { Form, Button, Popup } from "antd-mobile";
+
+import LocationPicker from "./location-picker";
+import LinePicker from "./line-picker";
+
+function LocationPickerCom(props) {
+  const { name, formInstance, onChange, data = {}, disabled, readOnly, fieldConf, mode } = props;
+
+  const [visible, setVisible] = useState(false);
+  const [_data, setData] = useState({});
+
+  function onLocationChange(res) {
+    formInstance?.setFieldValue(name, res);
+
+    setData(res);
+    onChange && onChange(res);
+    onCancel();
+  }
+
+  function onCancel() {
+    setVisible(false);
+  }
+
+  let _mode = mode;
+  if (fieldConf && fieldConf.mode && !_mode) {
+    _mode = fieldConf.mode;
+  }
+
+  return (
+    <>
+      {_mode === "line" ? (
+        // TODO: 展示逻辑优化
+        <div>
+          <div>
+            起点：{_data?.start?.lng || data?.start?.lng}, {_data?.start?.lat || data?.start?.lat}
+          </div>
+          <div>
+            终点：{_data?.end?.lng || data?.end?.lng}, {_data?.end?.lat || data?.end?.lat}
+          </div>
+          {/* <div>
+            起点：{_data.start && _data.start.lng},{" "}
+            {_data.start && _data.start.lat}
+          </div>
+          <div>
+            终点：{_data.end && _data.end.lng}, {_data.end && _data.end.lat}
+          </div> */}
+        </div>
+      ) : (
+        <span>
+          经度：{_data.lng || data.lng}
+          &nbsp; 纬度：{_data.lat || data.lat}
+          &nbsp;
+        </span>
+      )}
+      {disabled || readOnly ? null : (
+        <Button
+          onClick={() => {
+            setVisible(true);
+          }}
+        >
+          地图选点
+        </Button>
+      )}
+      <Popup visible={visible} onMaskClick={onCancel} bodyStyle={{ height: "80vh" }}>
+        {_mode === "line" ? (
+          <LinePicker data={props.data} onConfirm={onLocationChange} onCancel={onCancel} />
+        ) : (
+          <LocationPicker data={props.data} onConfirm={onLocationChange} onCancel={onCancel} />
+        )}
+      </Popup>
+    </>
+  );
+}
+
+export default connect(
+  LocationPickerCom,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);