@hzab/form-render-mobile 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render-mobile",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "formily-form-render-mobile",
   "main": "lib",
   "scripts": {
@@ -44,9 +44,7 @@
     "@formily/core": "^2.2.29",
     "@formily/react": "^2.2.29",
     "antd-mobile": "^5.32.0",
-    "antd-mobile-icons": "^0.2.2",
-    "leaflet": "^1.9.4",
-    "react-leaflet": "^2.8.0"
+    "antd-mobile-icons": "^0.2.2"
   },
   "directories": {
     "lib": "lib"

package/src/components/Select/index.tsx

@@ -5,7 +5,7 @@ import { Picker } from "antd-mobile";
 import "./index.less";
 
 function Select(props) {
-  const { disabled, readOnly, placeholder = "请选择", field = {}, onChange } = props;
+  const { value, disabled, readOnly, placeholder = "请选择", field = {}, onChange } = props;
 
   const { dataSource } = field;
 
@@ -33,13 +33,15 @@ function Select(props) {
   }
 
   function onConfirm(value) {
-    onChange && onChange(value);
+    // 去除数组？
+    onChange && onChange(value.length === 1 ? value[0] : value);
   }
 
   return (
     <div className="formily-select" onClick={onClick}>
       <Picker
         {...props}
+        value={Array.isArray(value) ? value : [value]}
         style={{ pointerEvents: readOnly || disabled ? "none" : undefined }}
         columns={_options}
         visible={visible}

package/src/components/Uploader/Image/index.less

@@ -0,0 +1,43 @@
+.uploader-image-previewer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #eee;
+  color: #fff;
+  background-color: #000;
+  border-radius: 4px;
+
+  .uploader-image-previewer-img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.uploader-image-previewer-mask {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100vw;
+  max-height: 100vh;
+  background-color: #000 !important;
+  .image-previewer-mask-img {
+    max-width: 100vw;
+    max-height: 100vh;
+    width: 100vw;
+  }
+  .image-previewer-mask-close-btn {
+    position: absolute;
+    right: 2vw;
+    top: 1vh;
+    width: 5vw;
+    height: 5vw;
+    line-height: 5vw;
+    font-size: 3vw;
+    text-align: center;
+    color: #fff;
+    border-radius: 50%;
+    background-color: #333;
+  }
+}

package/src/components/Uploader/Image/index.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { Mask } from "antd-mobile";
+
+import "./index.less";
+
+function ImagePreviewer(props) {
+  const [maskVisible, setMaskVisible] = useState(false);
+
+  function onPreview() {
+    setMaskVisible(true);
+  }
+
+  return (
+    <div className={`uploader-image-previewer ${props.className || ""}`}>
+      <img className="uploader-image-previewer-img" src={props.src} alt={props.alt} onClick={onPreview} />
+      <Mask
+        className="uploader-image-previewer-mask"
+        visible={maskVisible}
+        getContainer={document.body}
+        destroyOnClose
+        onMaskClick={() => setMaskVisible(false)}
+      >
+        <img className="image-previewer-mask-img" src={props.src} alt={props.alt} />
+        <div className="image-previewer-mask-close-btn" onClick={() => setMaskVisible(false)}>
+          X
+        </div>
+      </Mask>
+    </div>
+  );
+}
+
+export default ImagePreviewer;

package/src/components/Uploader/common/cordova-camera.js

@@ -23,6 +23,9 @@ export function getImage(_options = {}) {
                 reader.onloadend = function (e) {
                   imgBlob = new Blob([this.result], { type: "image/jpeg" });
                   console.log("imgBlob", imgBlob);
+                  if (!imgBlob?.uid) {
+                    imgBlob.uid = Date.now();
+                  }
                   if (!imgBlob?.name) {
                     imgBlob.name = `${Date.now()}.${imgBlob.type?.replace("image/", "")}`;
                   }
@@ -86,6 +89,9 @@ export function getVideo(_options = {}) {
                 reader.onloadend = function (e) {
                   imgBlob = new Blob([this.result], { type: "video/mp4" });
                   console.log("imgBlob", imgBlob);
+                  if (!imgBlob?.uid) {
+                    imgBlob.uid = Date.now();
+                  }
                   if (!imgBlob?.name) {
                     imgBlob.name = `${Date.now()}.${imgBlob.type?.replace("video/", "")}`;
                   }
@@ -146,6 +152,9 @@ export function getAudio(_options = {}) {
                 reader.onloadend = function (e) {
                   audioBlob = new Blob([this.result], { type: "audio/mp3" });
                   console.log("audioBlob", audioBlob);
+                  if (!audioBlob?.uid) {
+                    audioBlob.uid = Date.now();
+                  }
                   if (!audioBlob?.name) {
                     audioBlob.name = `${Date.now()}.${audioBlob.type?.replace("audio/", "")}`;
                   }

package/src/components/Uploader/common/utils.js

@@ -5,18 +5,22 @@
  * blob:http://localhost:8000/c9950644-5118-4231-9be7-8183bde1fdc7
  */
 export function getFileURL(file) {
-  let url = null;
+  let url = file.url || null;
 
-  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
-  if (window.createObjectURL != undefined) {
-    // basic
-    url = window.createObjectURL(file);
-  } else if (window.URL != undefined) {
-    // mozilla(firefox)
-    url = window.URL.createObjectURL(file);
-  } else if (window.webkitURL != undefined) {
-    // webkit or chrome
-    url = window.webkitURL.createObjectURL(file);
+  try {
+    // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
+    if (window.createObjectURL != undefined) {
+      // basic
+      url = window.createObjectURL(file);
+    } else if (window.URL != undefined) {
+      // mozilla(firefox)
+      url = window.URL.createObjectURL(file);
+    } else if (window.webkitURL != undefined) {
+      // webkit or chrome
+      url = window.webkitURL.createObjectURL(file);
+    }
+  } catch (error) {
+    console.warn("getFileURL Error: ", error);
   }
 
   return url;

package/src/components/Uploader/index.jsx

@@ -1,11 +1,10 @@
-import { Form } from "antd-mobile";
 import { connect, mapProps } from "@formily/react";
 
 import Uploader from "./uploader";
 
 function UploaderCom(props) {
-  const { field = {}, form, onChange } = props;
-  const { name, mode } = field;
+  const { field = {}, onChange } = props;
+  const { name, mode, componentProps = {} } = field;
 
   function onUploadChange(files) {
     if (field?.autoUpload && props.fieldsConf[name]?.onUpload) {
@@ -18,6 +17,7 @@ function UploaderCom(props) {
   const _props = {
     mode: mode,
     ...props,
+    ...componentProps,
   };
 
   return <Uploader {..._props} onChange={onUploadChange} />;

package/src/components/Uploader/uploader.jsx

@@ -1,8 +1,9 @@
 import { useState, useRef, useEffect, useMemo } from "react";
-import { Image, Button, Dialog, ActionSheet } from "antd-mobile";
+import { Button, Dialog, ActionSheet } from "antd-mobile";
 import { CloseCircleFill } from "antd-mobile-icons";
 
 import Video from "./video";
+import Image from "./Image";
 
 import { getImage, getVideo, getAudio } from "./common/cordova-camera";
 import { getFileURL, checkImageUrl, checkVideoUrl, checkAudioUrl } from "./common/utils";
@@ -25,20 +26,26 @@ function Uploader(props) {
     accept,
     disabled,
     readOnly,
-    data,
+    value,
+    baseUrl = "",
   } = props;
   const [curAccept, setCurAccept] = useState(accept);
-  const [fileList, setFileList] = useState(data || []);
+  const [fileList, setFileList] = useState(value || []);
   const [actionSheetVisible, setActionSheetVisible] = useState(false);
 
   useEffect(() => {
-    setFileList(data || []);
-  }, [data]);
+    setFileList(value || []);
+  }, [value]);
 
   function onFileChange(e) {
     e.persist();
     const { files: rawFiles } = e.target;
-    let files = [].slice.call(rawFiles);
+    let files = [].slice.call(rawFiles)?.map((it) => {
+      if (!it.uid) {
+        it.uid = Date.now();
+      }
+      return it;
+    });
     e.target.value = ""; // HACK: fix the same file doesn't trigger onChange
     handleChange(files);
   }
@@ -167,7 +174,8 @@ function Uploader(props) {
           src = url ? url : it;
           it = url ? url : it;
           // 图片
-          if (it.startsWith("data:image/") || (/[ ,]?image\//.test(accept) && checkImageUrl(it))) {
+          const isImg = checkImageUrl(it);
+          if (it.startsWith("data:image/") || (/[ ,]?image\//.test(accept) && isImg) || isImg) {
             fileType = TYPE_IMG;
           }
           // 视频
@@ -200,6 +208,10 @@ function Uploader(props) {
           }
         }
 
+        if (baseUrl) {
+          src = baseUrl + src;
+        }
+
         if (fileType === TYPE_IMG) {
           return (
             <ItemRender index={idx} key={name + "_" + idx}>

package/src/components/index.ts

@@ -4,7 +4,6 @@ import Cascader from "./Cascader";
 import NumberPicker from "./NumberPicker";
 import DatePicker from "./DatePicker";
 import Password from "./Password";
-import MapPicker from "./MapPicker";
 import Uploader from "./Uploader";
 
-export { NumberPicker, Password, Select, Cascader, DatePicker, Text, MapPicker, Uploader };
+export { NumberPicker, Password, Select, Cascader, DatePicker, Text, Uploader };

package/src/index.tsx

@@ -90,7 +90,7 @@ const FormRender = forwardRef((props: formPropsI, parentRef) => {
                 props.onSubmit && props.onSubmit(values);
               }}
             >
-              提交
+              {props.submitText || "提交"}
             </Submit>
           </FormButtonGroup>
         ) : null}

package/src/type.d.ts

@@ -21,6 +21,8 @@ export interface formPropsI {
   formOptions?: Object;
   /** 是否有提交按钮 */
   hasSubmit?: boolean;
+  /** 提交按钮文案 */
+  submitText?: string;
   /** 提交事件 */
   onSubmit?(values): void;
   /** 组件初始化 */

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

@@ -1,27 +0,0 @@
-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

@@ -1,236 +0,0 @@
-/* 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

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

package/src/components/MapPicker/index.jsx

@@ -1,82 +0,0 @@
-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 };
-  }),
-);