@hzab/form-render-mobile 0.0.1

package/src/components/MapPicker/location-picker/index.jsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from "react";
+import { Marker, TileLayer, Map } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import { Button, SpinLoading } from "antd-mobile";
+
+import { wgs84togcj02 } from "../common/gpsConvert";
+
+import getCurrentPosition from "../common/getCurrentPosition";
+import { mapConfig } from "../common/map-config";
+import pointIconUrl from "../common/approachPointIcon.png";
+
+import "./index.less";
+
+// 地图选中点图标
+const LeafIcon = new L.Icon({
+  iconUrl: pointIconUrl,
+  iconSize: [30, 40],
+});
+
+let map = null;
+
+function ReactLeafletMap(props) {
+  const {
+    onConfirm,
+    onCancel,
+    data,
+    // TODO: 切换成正确的地址（通过 props | config 传递？）
+    mapUrl = "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+    // mapUrl = "http://20.0.6.168:8083/api/map/org/{z}/{y}/{x}",
+  } = props;
+  const [point, setPoint] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const mapRef = useRef();
+
+  function onClickMap(e) {
+    setPoint(e?.latlng);
+  }
+
+  function getPosition() {
+    setLoading(true);
+    getCurrentPosition()
+      .then((position) => {
+        const { coords } = position;
+        const [lat, lng] = wgs84togcj02(coords.longitude, coords.latitude, true);
+        setPoint({ lat, lng });
+        map.setView(L.latLng(lat, lng), mapConfig.zoom);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("getPosition", err);
+        setLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    map = mapRef?.current?.contextValue?.map;
+
+    // 数据回填
+    if (data && data.lng && data.lat) {
+      const { lat, lng } = data;
+      map.setView(L.latLng(lat, lng), mapConfig.zoom);
+      setPoint({ lat, lng });
+    } else {
+      // 获取初始位置（当前位置）
+      getPosition();
+    }
+  }, []);
+
+  function onSave() {
+    onConfirm && onConfirm(point);
+  }
+
+  return (
+    <div className="location-picker">
+      <div className="location-picker-header">
+        <span>经度：{point?.lng}</span>
+        &nbsp;
+        <span>纬度：{point?.lat}</span>
+        <span className="get-current-location-btn" onClick={getPosition}>
+          获取当前坐标
+        </span>
+      </div>
+      <Map className="location-picker-map" {...mapConfig} ref={mapRef} onclick={onClickMap}>
+        <TileLayer url={mapUrl} />
+        {point && <Marker key={`marker`} position={point} icon={LeafIcon} />}
+      </Map>
+      <div className="location-picker-footer">
+        <Button className="footer-btn" onClick={onCancel}>
+          取消
+        </Button>
+        <Button className="footer-btn" color="primary" fill="solid" onClick={onSave}>
+          确定
+        </Button>
+      </div>
+      {loading ? (
+        <div className="loading-wrap">
+          <SpinLoading />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default ReactLeafletMap;

package/src/components/MapPicker/location-picker/index.less

@@ -0,0 +1,36 @@
+.location-picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .location-picker-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    .get-current-location-btn {
+      padding: 0 8px;
+      cursor: pointer;
+    }
+  }
+  .location-picker-map {
+    flex: 1;
+  }
+  .location-picker-footer {
+    display: flex;
+    .footer-btn {
+      flex: 1;
+    }
+  }
+  .loading-wrap {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.55);
+    z-index: 1000;
+  }
+}

package/src/components/NumberPicker/index.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { connect, mapProps } from "@formily/react";
+import { Stepper } from "antd-mobile";
+
+import "./index.less";
+
+function NumberPicker({ precision, className, ...props }) {
+  return <Stepper className={`number-picker ${className}`} {...props} digits={precision} />;
+}
+
+export default connect(
+  NumberPicker,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);

package/src/components/NumberPicker/index.less

@@ -0,0 +1,3 @@
+.number-picker {
+  width: 100%;
+}

package/src/components/Password/index.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { connect, mapProps } from "@formily/react";
+import { Input } from "antd-mobile";
+
+function Password(props) {
+  return <Input {...props} type="password" />;
+}
+
+export default connect(
+  Password,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);

package/src/components/Select/index.less

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

package/src/components/Select/index.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react";
+import { connect, mapProps } from "@formily/react";
+import { Picker } from "antd-mobile";
+
+import "./index.less";
+
+function Select(props) {
+  const { disabled, readOnly, placeholder = "请选择", field = {}, onChange } = props;
+
+  const { dataSource } = field;
+
+  const [_options, setOptions] = useState(dataSource ? [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-select" onClick={onClick}>
+      <Picker
+        {...props}
+        style={{ pointerEvents: readOnly || disabled ? "none" : undefined }}
+        columns={_options}
+        visible={visible}
+        onClose={onClose}
+        onConfirm={onConfirm}
+      >
+        {(value) => (value && value.length > 0 ? value[0]?.label : placeholder)}
+      </Picker>
+    </div>
+  );
+}
+
+export default connect(
+  Select,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);

package/src/components/Text/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { connect, mapProps } from "@formily/react";
+
+function Text({ value, mode, content, className, ...props }) {
+  const tagName = mode === "normal" || !mode ? "div" : mode;
+  console.log("props", props.readOnly);
+
+  return React.createElement(
+    tagName,
+    {
+      className: `formily-text ${className}`,
+      ...props,
+    },
+    value || content,
+  );
+}
+
+export default connect(
+  Text,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);

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

@@ -0,0 +1,188 @@
+export function getImage(_options = {}) {
+  return new Promise((resolve, reject) => {
+    // TODO: 调整 options 参数
+    const options = {
+      quality: 0,
+      destinationType: 1, // 0-Return base64 encoded string. 1-Return file uri (content://media/external/images/media/2 for Android)
+      sourceType: 1, // 0-Photo Library, 1-Camera, 2-Saved Album Choose image only from the device's Camera Roll album
+      encodingType: 0, // 0=JPG 1=PNG
+      ..._options,
+    };
+
+    navigator.device.capture.captureImage(
+      function (mediaFiles) {
+        const imgData = mediaFiles[0].localURL;
+        let reader;
+        let imgBlob;
+        window.resolveLocalFileSystemURL(
+          imgData,
+          function (fileEntry) {
+            fileEntry.file(
+              function (file) {
+                reader = new FileReader();
+                reader.onloadend = function (e) {
+                  imgBlob = new Blob([this.result], { type: "image/jpeg" });
+                  console.log("imgBlob", imgBlob);
+                  if (!imgBlob?.name) {
+                    imgBlob.name = `${Date.now()}.${imgBlob.type?.replace("image/", "")}`;
+                  }
+                  if (!imgBlob?.lastModifiedDate) {
+                    imgBlob.lastModifiedDate = new Date();
+                  }
+                  if (!imgBlob?.lastModified) {
+                    imgBlob.lastModified = imgBlob.lastModifiedDate.getTime();
+                  }
+                  if (!imgBlob?.localURL) {
+                    imgBlob.localURL = mediaFiles[0].localURL;
+                  }
+                  resolve(imgBlob);
+                  // window.__file = imgBlob; // PLACE THE FILE ASSIGNMENT HERE AFTER THE READER HAS INGESTED THE FILE BYTES
+                };
+                reader.readAsArrayBuffer(file);
+              },
+              function (err) {
+                reject(err);
+                console.log("error with photo file");
+              },
+            );
+          },
+          function (err) {
+            reject(err);
+            console.log("error with photo file");
+          },
+        );
+      },
+      function (err) {
+        reject(err);
+        alert("Error taking picture", "Error");
+      },
+      options,
+    );
+  });
+}
+
+export function getVideo(_options = {}) {
+  return new Promise((resolve, reject) => {
+    // TODO: 调整 options 参数
+    const options = {
+      quality: 0,
+      destinationType: 1,
+      sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Album
+      encodingType: 0, // 0=JPG 1=PNG
+      ..._options,
+    };
+
+    navigator.device.capture.captureVideo(
+      function (mediaFiles) {
+        const imgData = mediaFiles[0].localURL;
+        let reader;
+        let imgBlob;
+        window.resolveLocalFileSystemURL(
+          imgData,
+          function (fileEntry) {
+            fileEntry.file(
+              function (file) {
+                reader = new FileReader();
+                reader.onloadend = function (e) {
+                  imgBlob = new Blob([this.result], { type: "video/mp4" });
+                  console.log("imgBlob", imgBlob);
+                  if (!imgBlob?.name) {
+                    imgBlob.name = `${Date.now()}.${imgBlob.type?.replace("video/", "")}`;
+                  }
+                  if (!imgBlob?.lastModifiedDate) {
+                    imgBlob.lastModifiedDate = new Date();
+                  }
+                  if (!imgBlob?.lastModified) {
+                    imgBlob.lastModified = imgBlob.lastModifiedDate.getTime();
+                  }
+                  if (!imgBlob?.localURL) {
+                    imgBlob.localURL = mediaFiles[0].localURL;
+                  }
+                  resolve(imgBlob);
+                  // window.__file = imgBlob; // PLACE THE FILE ASSIGNMENT HERE AFTER THE READER HAS INGESTED THE FILE BYTES
+                };
+                reader.readAsArrayBuffer(file);
+              },
+              function (err) {
+                reject(err);
+                console.log("error with photo file");
+              },
+            );
+          },
+          function (err) {
+            reject(err);
+            console.log("error with photo file");
+          },
+        );
+      },
+      function (err) {
+        reject(err);
+        alert("Error taking picture", "Error");
+      },
+      options,
+    );
+  });
+}
+
+export function getAudio(_options = {}) {
+  return new Promise((resolve, reject) => {
+    // TODO: 调整 options 参数
+    const options = {
+      ..._options,
+    };
+
+    navigator.device.capture.captureAudio(
+      function (mediaFiles) {
+        const imgData = mediaFiles[0].localURL;
+        let reader;
+        let audioBlob;
+        window.resolveLocalFileSystemURL(
+          imgData,
+          function (fileEntry) {
+            fileEntry.file(
+              function (file) {
+                // TODO: 文件无法正常读取
+                reader = new FileReader();
+                reader.onloadend = function (e) {
+                  audioBlob = new Blob([this.result], { type: "audio/mp3" });
+                  console.log("audioBlob", audioBlob);
+                  if (!audioBlob?.name) {
+                    audioBlob.name = `${Date.now()}.${audioBlob.type?.replace("audio/", "")}`;
+                  }
+                  if (!audioBlob?.lastModifiedDate) {
+                    audioBlob.lastModifiedDate = new Date();
+                  }
+                  if (!audioBlob?.lastModified) {
+                    audioBlob.lastModified = audioBlob.lastModifiedDate.getTime();
+                  }
+                  if (!audioBlob?.localURL) {
+                    audioBlob.localURL = mediaFiles[0].localURL;
+                  }
+                  resolve(audioBlob);
+                  // window.__file = audioBlob; // PLACE THE FILE ASSIGNMENT HERE AFTER THE READER HAS INGESTED THE FILE BYTES
+                };
+                reader.onerror = function (e) {
+                  console.log("reader.onerror: ", e);
+                };
+                reader.readAsArrayBuffer(file);
+              },
+              function (err) {
+                reject(err);
+                console.log("error with audio file");
+              },
+            );
+          },
+          function (err) {
+            reject(err);
+            console.log("error with audio file");
+          },
+        );
+      },
+      function (err) {
+        reject(err);
+        alert("Error taking audio", "Error");
+      },
+      options,
+    );
+  });
+}

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

@@ -0,0 +1,87 @@
+/**
+ *  建立一个可以存取该 file 的 url
+ * @param {Object} file 文件
+ * @returns {string} url
+ * blob:http://localhost:8000/c9950644-5118-4231-9be7-8183bde1fdc7
+ */
+export function getFileURL(file) {
+  let 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);
+  }
+
+  return url;
+}
+
+/**
+ * 判断 url 是否带有指定图片后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkImageUrl(url) {
+  const imgTypes = [
+    "apng",
+    "avif",
+    "bmp",
+    "gif",
+    "ico",
+    "cur",
+    "jpg",
+    "jpeg",
+    "jfif",
+    "pjpeg",
+    "pjp",
+    "png",
+    "svg",
+    "tif",
+    "tiff",
+    "webp",
+  ];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断 url 是否带有指定视频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkVideoUrl(url) {
+  const imgTypes = ["3gp", "mpg", "mpeg", "mp4", "m4v", "m4p", "ogv", "ogg", "mov", "webm"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 判断 url 是否带有指定音频后缀
+ * @param {string} url
+ * @returns
+ */
+export function checkAudioUrl(url) {
+  const imgTypes = ["3gp", "adts", "mpeg", "mp3", "mp4", "ogg", "mov", "webm", "rtp", "amr", "wav"];
+  return checkUrlSuffix(url, imgTypes);
+}
+
+/**
+ * 检查 url 是否带有指定后缀
+ * @param {string} url url 地址
+ * @param {Array} types 后缀数组
+ * @returns
+ */
+export function checkUrlSuffix(url, types = [], caseSensitive) {
+  if (!url) {
+    return false;
+  }
+  let _url = url?.replace(/\?.+/, "");
+  const reg = new RegExp(`\.(${types.join("|")})$`, caseSensitive ? undefined : "i");
+  if (reg.test(_url)) {
+    return true;
+  }
+}

package/src/components/Uploader/index.jsx

@@ -0,0 +1,31 @@
+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;
+
+  function onUploadChange(files) {
+    if (field?.autoUpload && props.fieldsConf[name]?.onUpload) {
+      props.fieldsConf[name]?.onUpload(files);
+      return;
+    }
+    onChange && onChange(files);
+  }
+
+  const _props = {
+    mode: mode,
+    ...props,
+  };
+
+  return <Uploader {..._props} onChange={onUploadChange} />;
+}
+
+export default connect(
+  UploaderCom,
+  mapProps((props, field) => {
+    return { ...props, form: field.form, field };
+  }),
+);