@hzab/form-render 0.4.1 → 0.5.0

package/src/components/LocationPicker/index.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Modal } from "antd";
-import { useField, useFieldSchema } from "@formily/react";
+import { observer } from "@formily/react";
 
 import ResInfo from "./components/ResInfo";
 import ModalContent from "./components/ModalContent";
@@ -8,28 +8,11 @@ import ModalContent from "./components/ModalContent";
 import { MapUtils } from "./Map/AMap/common/utils";
 import { getCurrentPosition } from "../../common/location-utils";
 
-import { getParentValue } from "./common/utils";
+import { getPropsValue } from "./common/utils";
 
 import "./index.less";
 
-const defaultLocation = {
-  lon: 120.168893,
-  lat: 30.225404,
-  addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
-};
-
-// 获取当前经纬度
-getCurrentPosition()
-  .then((res) => {
-    const { coords = {} } = res;
-    defaultLocation.lon = coords.longitude;
-    defaultLocation.lat = coords.latitude;
-  })
-  .catch((e) => {
-    console.warn("Error getCurrentPosition e: ", e);
-  });
-
-export function LocationPicker(props) {
+export const LocationPicker = observer(function (props: any) {
   const {
     /**
      * 地图显示类型：
@@ -45,13 +28,6 @@ export function LocationPicker(props) {
     layout = "ver",
     // 是否允许搜索
     hasSearch = true,
-    /**
-     * 
-     isObjectRes 
-      true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
-      false: 所有数据打平放到当前的 data 中，和其他表单项平级
-     */
-    isObjectRes = true,
     /**
      * 打开地图时是否根据经纬度自动修正已填的地址
      */
@@ -69,23 +45,58 @@ export function LocationPicker(props) {
     // 搜索框是否自动搜索
     isAutoSearch = true,
     modalConf = {},
+    getCurPositionConf,
   } = props;
-  const field: any = useField() || {};
-  const fieldSchema: any = useFieldSchema() || {};
 
-  const mapUtilsRef = useRef<MapUtils>();
+  const [loading, setLoading] = useState(false);
+  const [defaultLocation, setDefaultLocation] = useState({
+    lon: 120.168893,
+    lat: 30.225404,
+    addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
+  });
+  const [visible, setVisible] = useState(mode === "show");
+  // 解决 弹窗关闭之后 visible 无法传入 ModalContent 的问题
+  const [visibleKey, setVisibleKey] = useState(0);
   const pickInfoRef = useRef(defaultLocation);
 
-  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const propsVal = getPropsValue(value, {
+      lonKey,
+      latKey,
+      addrKey,
+    });
+    if (!propsVal.lon || !propsVal.lat) {
+      setLoading(true);
+      // 如果没有传入的经纬度，获取当前实际的经纬度数据
+      // 获取当前经纬度
+      getCurrentPosition(getCurPositionConf)
+        .then((res) => {
+          const { coords = {} } = res;
+          pickInfoRef.current = {
+            lon: coords.longitude,
+            lat: coords.latitude,
+            addr: "",
+          };
+          setDefaultLocation(pickInfoRef.current);
+          setLoading(false);
+        })
+        .catch((e) => {
+          console.warn("Error LocationPicker getCurrentPosition e: ", e);
+          setLoading(false);
+        });
+    } else {
+      setLoading(false);
+    }
+  }, []);
 
   function onShow() {
-    // 等待地图加载完毕
-    !mapUtilsRef.current && setVisible(true);
     setVisible(true);
+    setVisibleKey(Date.now());
   }
 
   function onClose() {
     setVisible(false);
+    setVisibleKey(Date.now());
   }
 
   function onChange(res = pickInfoRef.current) {
@@ -96,18 +107,6 @@ export function LocationPicker(props) {
       [addrKey]: info.addr,
     };
     props.onChange && props.onChange(_res);
-    if (isObjectRes === false) {
-      // 只有一层的情况
-      if (!field.parent) {
-        field.form.setValues(_res);
-      } else if (field.parent && fieldSchema.parent) {
-        // 嵌套在 ArrayBase: ArrayTable ArrayCard 等 里面的情况
-        const parentVal = getParentValue(field);
-        Object.keys(_res).forEach((key) => {
-          parentVal[key] = _res[key];
-        });
-      }
-    }
   }
 
   function onOk() {
@@ -126,8 +125,7 @@ export function LocationPicker(props) {
 
   const isHor = layout === "hor" || layout === "hor-reverse";
   const _props = {
-    disabled: props.disabled,
-    readOnly: props.readOnly,
+    ...props,
     /**
      * 地图显示类型：
      * 弹窗 dialog
@@ -135,19 +133,8 @@ export function LocationPicker(props) {
      */
     mode: mode ?? "dialog",
     layout: layout ?? "ver",
-    /**
-     * 是否是水平布局
-     */
-    isHor,
     // 是否允许搜索
     hasSearch: hasSearch ?? true,
-    /**
-      * 
-      isObjectRes 
-       true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name
-       false: 所有数据打平放到当前的 data 中，和其他表单项平级
-      */
-    isObjectRes: isObjectRes ?? true,
     /**
      * 打开地图时是否根据经纬度自动修正已填的地址
      */
@@ -161,20 +148,19 @@ export function LocationPicker(props) {
     lonKey: lonKey ?? "longitude",
     latKey: latKey ?? "latitude",
     addrKey: addrKey ?? "address",
-    value,
     // 搜索框是否自动搜索
     isAutoSearch: isAutoSearch ?? true,
+    visible,
+    visibleKey,
     defaultLocation,
-    // 地图选点按钮的 icon 元素
-    pickerIcon: props.pickerIcon,
-    // 地图选点按钮的 icon img 的地址
-    pickerIconUrl: props.pickerIconUrl,
+    loading,
+    setLoading,
   };
 
   return (
     <div className="location-picker">
       {mode === "show" ? (
-        <ModalContent {..._props} visible={visible} setPickInfo={setResInfo} layout={layout} />
+        <ModalContent {..._props} setPickInfo={setResInfo} />
       ) : (
         <>
           {/* 弹窗 */}
@@ -186,14 +172,15 @@ export function LocationPicker(props) {
             onCancel={onClose}
             onOk={onOk}
             visible={visible}
+            confirmLoading={loading}
             width={modalConf?.width || isHor ? "1024px" : "720px"}
           >
-            <ModalContent {..._props} visible={visible} setPickInfo={setPickInfo} layout={layout} />
+            <ModalContent {..._props} setPickInfo={setPickInfo} />
           </Modal>
         </>
       )}
     </div>
   );
-}
+});
 
 export default LocationPicker;

package/src/components/Text/index.tsx

@@ -3,8 +3,6 @@ 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,
     {

package/lib/static/imgs/marker-icon_ab8bbcc8cb.svg

@@ -1,4 +0,0 @@
-<svg t="1708497164654" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="8489" width="200" height="200">
-  <path d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="#1677ff" p-id="8490"></path>
-</svg>

package/lib/static/imgs/picker-icon_24d725ef02.svg

@@ -1,5 +0,0 @@
-<svg t="1708305242338" class="icon" viewBox="0 0 1088 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="1494" width="200" height="200">
-  <path d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z" fill="#1677ff" p-id="1495"></path>
-  <path d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z" fill="#1677ff" p-id="1496"></path>
-</svg>

package/lib/static/imgs/position-icon_5bcb8a742e.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1708478996666" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="6897"
-  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-  <path d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z" fill="#000000" p-id="6898"></path>
-</svg>

package/lib/static/imgs/reset-icon_9edad62306.svg

@@ -1,5 +0,0 @@
-<svg t="1708485324277" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="7503" width="200" height="200">
-  <path d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z" p-id="7504"></path>
-  <path d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z" p-id="7505"></path>
-</svg>

package/src/components/LocationPicker/assets/marker-icon.svg

@@ -1,4 +0,0 @@
-<svg t="1708497164654" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="8489" width="200" height="200">
-  <path d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="#1677ff" p-id="8490"></path>
-</svg>

package/src/components/LocationPicker/assets/picker-icon.svg

@@ -1,5 +0,0 @@
-<svg t="1708305242338" class="icon" viewBox="0 0 1088 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="1494" width="200" height="200">
-  <path d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z" fill="#1677ff" p-id="1495"></path>
-  <path d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z" fill="#1677ff" p-id="1496"></path>
-</svg>

package/src/components/LocationPicker/assets/position-icon.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1708478996666" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="6897"
-  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-  <path d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z" fill="#000000" p-id="6898"></path>
-</svg>

package/src/components/LocationPicker/assets/reset-icon.svg

@@ -1,5 +0,0 @@
-<svg t="1708485324277" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="7503" width="200" height="200">
-  <path d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z" p-id="7504"></path>
-  <path d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z" p-id="7505"></path>
-</svg>