@hzab/form-render 0.4.2 → 0.5.1

package/src/components/DatePicker/index.tsx

@@ -1,59 +1,68 @@
-import { useField, useFieldSchema, observer } from "@formily/react";
-import { DatePicker as AntdDatePicker } from "antd";
-import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
-import { connect, mapProps } from "@formily/react";
+import { useField, useFieldSchema, connect, mapProps } from "@formily/react";
+import { DatePicker as AntdDatePicker } from "@formily/antd";
 
-const { RangePicker } = AntdDatePicker
+import { DatePickerProps, RangePickerProps } from "antd/lib/date-picker";
 
+import { getParentValue } from "../../common/formily-utils";
+import { dateable } from "../../common/date-utils";
 
-
-/**
- * 获取父级的数据对象（包括当前项的对象）
- * { 当详情: xxx, 其他项: lll }
- * @param field
- * @returns
- */
-export function getParentValue(field) {
-  let form = field?.parent?.value || field?.value;
-  if (Array.isArray(form)) {
-    form = form[field.index];
-  }
-  return form;
-}
+const { RangePicker } = AntdDatePicker;
 
 type DatePickerT = React.FC<any> & {
   RangePicker?: React.FC<any>;
 };
 
-export const  DatePicker: DatePickerT = observer((props: any) => {
-  return <AntdDatePicker
-    {...props}
-  />
-});
+const handleProps = (props: DatePickerProps) => {
+  const getDefaultFormat = (props: DatePickerProps) => {
+    if (props["picker"] === "month") {
+      return "YYYY-MM";
+    } else if (props["picker"] === "quarter") {
+      return "YYYY-\\QQ";
+    } else if (props["picker"] === "year") {
+      return "YYYY";
+    } else if (props["picker"] === "week") {
+      return "gggg-wo";
+    }
+    return props["showTime"] ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+  };
+  const format = props["format"] || (getDefaultFormat(props) as any);
 
+  return {
+    ...props,
+    format,
+    value: dateable(props.value, format === "gggg-wo" ? "gggg-ww" : format),
+  };
+};
 
-DatePicker.RangePicker = observer((props:any) => {
+export const DatePicker: DatePickerT = connect(
+  AntdDatePicker,
+  mapProps((props: any) => {
+    const datePickerProps = handleProps(props);
+    return datePickerProps;
+  }),
+);
 
-  const field: any = useField();
-  const fieldSchema = useFieldSchema();
-  const {
-    /**
+DatePicker.RangePicker = connect(
+  (props: any) => {
+    const field: any = useField();
+    const fieldSchema = useFieldSchema();
+    const {
+      /**
      *
     isSplitTimes
       true: 拆分为 startKey和 endKey 两个字段
       false: 不做拆分
      */
-    isSplitTimes = false,
-    startKey = "startTime",
-    endKey = "endTime",
-  } = props;
-
+      isSplitTimes = false,
+      startKey = "startTime",
+      endKey = "endTime",
+    } = props;
 
-  const handleOnConfirm = (startTime, endTime) => {
-    const res = {
-      [startKey]: startTime,
-      [endKey]: endTime,
-    };
+    const handleOnConfirm = (startTime, endTime) => {
+      const res = {
+        [startKey]: startTime,
+        [endKey]: endTime,
+      };
 
       if (!field.parent) {
         field.form.setValues(res);
@@ -64,26 +73,31 @@ DatePicker.RangePicker = observer((props:any) => {
           parentVal[key] = res[key];
         });
       }
-  }
-
-  const handleOnChange = (dates, dateStrings) => {
-    const startTime = dateStrings[0]
-    const endTime = dateStrings[1]
-    props.onChange && props.onChange(dates);
-    if(!isSplitTimes) return
-    if ((props.pick === 'date' || !props.pick) && !props.showTime) {
-      handleOnConfirm(startTime + " 00:00:00", endTime + " 23:59:59")
-      return
-    }
-    handleOnConfirm(startTime, endTime)
-  };
+    };
 
-  return <RangePicker
-    {...props}
-    onChange={(
-      value: DatePickerProps['value'] | RangePickerProps['value'],
-      dateString: [string, string] | string,
-    ) => handleOnChange(value, dateString)}
-  />
-});
+    const handleOnChange = (dates, dateStrings) => {
+      const startTime = dates[0];
+      const endTime = dates[1];
+      props.onChange && props.onChange(dates);
+      if (!isSplitTimes) return;
+      if ((props.pick === "date" || !props.pick) && !props.showTime) {
+        handleOnConfirm(startTime + " 00:00:00", endTime + " 23:59:59");
+        return;
+      }
+      handleOnConfirm(startTime, endTime);
+    };
 
+    return (
+      <RangePicker
+        {...props}
+        onChange={(
+          value: DatePickerProps["value"] | RangePickerProps["value"],
+          dateString: [string, string] | string,
+        ) => handleOnChange(value, dateString)}
+      />
+    );
+  },
+  mapProps((props: any) => {
+    return handleProps(props);
+  }),
+);

package/src/components/LocationPicker/Map/AMap/common/loader.ts

@@ -1,4 +1,4 @@
-const defaultVersion = "1.4.15";
+const defaultVersion = "2.0";
 const defaultPlugins = ["AMap.Geocoder", "AMap.Autocomplete"];
 
 if (!window._AMapLoaderTemp) {

package/src/components/LocationPicker/Map/AMap/common/utils.ts

@@ -1,5 +1,5 @@
 import AMapLoader from "./loader";
-import MarkerIcon from "../../../assets/marker-icon.svg";
+import { markerIconBase64 } from "../../../assets/svg-icon";
 
 if (!window._AMapLoaderTemp) {
   window._AMapLoaderTemp = {};
@@ -27,6 +27,7 @@ export type setMarkerOptT = {
   marker?: Object;
   map?: Object;
   AMap?: Object;
+  markerIconConf?: Object;
 };
 
 export type markersT = {
@@ -38,13 +39,15 @@ export class MapUtils {
   public AMap;
   public markers: markersT = {};
   public pickerMarker;
+  public markerIconConf;
 
-  constructor({ map, AMap }) {
+  constructor({ map, AMap, markerIconConf }) {
     if (!map) {
       throw new Error("请传入地图实例");
     }
     this.map = map;
     this.AMap = AMap;
+    this.markerIconConf = markerIconConf || {};
   }
 
   /**
@@ -83,10 +86,14 @@ export class MapUtils {
    * @returns
    */
   setMarker(lon, lat, opt?: setMarkerOptT) {
-    const { id = Date.now(), marker, map = this.map, AMap = this.AMap } = opt || {};
+    const { id = Date.now(), marker, map = this.map, AMap = this.AMap, markerIconConf = {} } = opt || {};
     if (!(AMap && map)) {
       throw new Error("请传入地图实例和 AMap");
     }
+    if (lon === null || lon === undefined || lat === null || lat === undefined) {
+      console.warn("setMarker 请传入正确的经纬度");
+      return;
+    }
     const position = new AMap.LngLat(lon, lat);
     let _marker = marker || this.markers[id];
     // 创建 Marker 或修改位置
@@ -95,10 +102,13 @@ export class MapUtils {
       _marker.setPosition(position);
       return _marker;
     }
+
     const icon = new AMap.Icon({
       size: new AMap.Size(34, 34), //图标尺寸
-      image: MarkerIcon, // Icon 的图像
+      image: markerIconBase64, // Icon 的图像
       imageSize: new AMap.Size(34, 34), // 根据所设置的大小拉伸或压缩图片
+      ...this.markerIconConf,
+      ...markerIconConf,
     });
     const _m = new AMap.Marker({
       offset: new AMap.Pixel(-17, -34),

package/src/components/LocationPicker/Map/AMap/index.jsx

@@ -17,7 +17,7 @@ function AMapCom(props) {
   const mapDomRef = useRef();
 
   useEffect(() => {
-    const { key, securityJsCode, plugins } = props;
+    const { key, securityJsCode, plugins, markerIconConf } = props;
     AMapLoader({
       key,
       securityJsCode,
@@ -28,7 +28,8 @@ function AMapCom(props) {
         zoom: zoom || 11,
         center: center || [120.160217, 30.243861],
       });
-      init && init({ map: mapRef.current, mapUtils: new MapUtils({ map: mapRef.current, AMap }), AMap });
+      init &&
+        init({ map: mapRef.current, mapUtils: new MapUtils({ map: mapRef.current, AMap, markerIconConf }), AMap });
     });
   }, []);
 

package/src/components/LocationPicker/README.md

@@ -1,8 +1,13 @@
-#### 使用前安装依赖
+## 使用前安装依赖
 
 npm install @amap/amap-jsapi-loader
 
-#### 引入
+## 注意事项
+
+- isObjectRes 在 @hzab/form-render0.5.0 版本中去除，结果全部存放在对象中
+- changeMode 在 @hzab/form-render0.5.1 版本中去除，仅允许点击地图选点
+
+## 引入
 
 ```jsx
 import MapLocationPoint from "./mapLocationPoint";
@@ -14,22 +19,25 @@ export default function AMap(props) {
 
 ### InfoPanel Attributes
 
-| 参数          | 类型      | 必填 | 默认值    | 说明                                                        |
-| ------------- | --------- | ---- | --------- | ----------------------------------------------------------- |
-| mode          | string    | 否   | dialog    | 地图显示的类型， dialog 弹窗显示、 show 直接显示            |
-| layout        | string    | 否   | ver       | 选择器和地图的布局 hor 水平、 ver 垂直                      |
-| hasSearch     | boolean   | 否   | true      | 是否允许搜索                                                |
-| isObjectRes   | boolean   | 否   | true      | 是否把数据存放在对象中                                      |
-| isAutoFixAddr | boolean   | 否   | false     | 打开地图时是否根据经纬度自动修正已填的地址                  |
-| changeMode    | string    | 否   | move      | 改变经纬度等数据的触发模式；移动地图：move，点击地图：click |
-| lonKey        | string    | 否   | longitude | 经度字段 key                                                |
-| latKey        | string    | 否   | latitude  | 维度字段 key                                                |
-| addrKey       | string    | 否   | address   | 地址字段 key                                                |
-| isAutoSearch  | boolean   | 否   | false     | 搜索框是否自动搜索                                          |
-| pickerIcon    | ReactNode | 否   | -         | 地图选点弹窗开启按钮的 icon 元素                            |
-| pickerIconUrl | string    | 否   | -         | 地图选点弹窗开启按钮的 icon img 的地址                      |
-
-- isObjectRes 是否把数据存放在对象中
-
-  - true: 把所有数据存放在一个对象中（该对象和其他表单项平级），对象 key 为当前项的 name；
-  - false: 所有数据打平放到当前的 data 中，和其他表单项平级
+| 参数               | 类型    | 必填 | 默认值    | 说明                                             |
+| ------------------ | ------- | ---- | --------- | ------------------------------------------------ |
+| mode               | string  | 否   | dialog    | 地图显示的类型， dialog 弹窗显示、 show 直接显示 |
+| layout             | string  | 否   | ver       | 选择器和地图的布局 hor 水平、 ver 垂直           |
+| hasSearch          | boolean | 否   | true      | 是否允许搜索                                     |
+| isAutoFixAddr      | boolean | 否   | false     | 打开地图时是否根据经纬度自动修正已填的地址       |
+| lonKey             | string  | 否   | longitude | 经度字段 key                                     |
+| latKey             | string  | 否   | latitude  | 维度字段 key                                     |
+| addrKey            | string  | 否   | address   | 地址字段 key                                     |
+| isAutoSearch       | boolean | 否   | false     | 搜索框是否自动搜索                               |
+| markerIconConf     | Object  | 否   | -         | markerIcon 配置对象                              |
+| icons              | Object  | 否   | -         | icon 图片配置                                    |
+| getCurPositionConf | Object  | 否   | -         | getCurrentPosition Config                        |
+
+#### icons
+
+| 参数         | 类型   | 必填 | 默认值 | 说明                     |
+| ------------ | ------ | ---- | ------ | ------------------------ |
+| markerIcon   | string | 否   | dialog | marker icon 图片地址     |
+| pickerIcon   | string | 否   | dialog | 选点 icon 图片地址或元素 |
+| positionIcon | string | 否   | dialog | 定位 icon 图片地址或元素 |
+| resetIcon    | string | 否   | dialog | 重置 icon 图片地址或元素 |

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

@@ -0,0 +1,86 @@
+export const markerIcon = (
+  <svg
+    t="1708497164654"
+    className="marker-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>
+);
+
+export const markerIconBase64 = `data:image/svg+xml;charset=utf-8;base64,ICA8c3ZnCiAgICB0PSIxNzA4NDk3MTY0NjU0IgogICAgY2xhc3M9Imljb24iCiAgICB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IgogICAgdmVyc2lvbj0iMS4xIgogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgcC1pZD0iODQ4OSIKICAgIHdpZHRoPSIyMDAiCiAgICBoZWlnaHQ9IjIwMCIKICA+CiAgICA8cGF0aAogICAgICBkPSJNNTEyIDEwMjRjLTIwNS43Ni0yNDEuNDcyLTMyNi4yNzItNDExLjcxMi0zNjEuNjY0LTUxMC43MmEzODQgMzg0IDAgMSAxIDcyMy4wNzIgMC44MzJDODM3Ljc2IDYxMi45MjggNzE3LjMxMiA3ODIuODQ4IDUxMiAxMDI0LjA2NHogbTAtNTEyYTEyOCAxMjggMCAxIDAgMC0yNTYgMTI4IDEyOCAwIDAgMCAwIDI1NnoiCiAgICAgIGZpbGw9IiMxNjc3ZmYiCiAgICAgIHAtaWQ9Ijg0OTAiCiAgICA+PC9wYXRoPgogIDwvc3ZnPg==`;
+
+export const pickerIcon = (
+  <svg
+    t="1708305242338"
+    className="picker-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>
+);
+
+export const positionIcon = (
+  <svg
+    t="1708478996666"
+    className="position-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>
+);
+
+export const resetIcon = (
+  <svg
+    t="1708485324277"
+    className="reset-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/common/utils.ts

@@ -10,18 +10,12 @@
       addr: value[addrKey],
     }
  */
-export function getPropsValue(value = {}, field: any, opt) {
-  const { isObjectRes = true, lonKey = "longitude", latKey = "latitude", addrKey = "address" } = opt || {};
+export function getPropsValue(value = {}, opt) {
+  const { lonKey = "longitude", latKey = "latitude", addrKey = "address" } = opt || {};
   let lon = value[lonKey];
   let lat = value[latKey];
   let addr = value[addrKey];
   // 数据和其他子项平级的情况
-  let form = getParentValue(field);
-  if (form && isObjectRes === false) {
-    lon = form[lonKey];
-    lat = form[latKey];
-    addr = form[addrKey];
-  }
   const res = {
     lon,
     lat,
@@ -29,17 +23,3 @@ export function getPropsValue(value = {}, field: any, opt) {
   };
   return res;
 }
-
-/**
- * 获取父级的数据对象（包括当前项的对象）
- * { 当详情: xxx, 其他项: lll }
- * @param field
- * @returns
- */
-export function getParentValue(field) {
-  let form = field?.parent?.value || field?.value;
-  if (Array.isArray(form)) {
-    form = form[field.index];
-  }
-  return form;
-}

package/src/components/LocationPicker/components/MapSearch/index.less

@@ -1,4 +1,4 @@
-.location-map-search {
+.ant-select-auto-complete.location-map-search {
   width: 300px;
   position: absolute;
   top: 0;

package/src/components/LocationPicker/components/ModalContent/index.less

@@ -9,6 +9,7 @@
     position: relative;
     width: 100%;
     flex: 1;
+    height: 500px;
     .a-map-container {
       height: inherit;
       .amap-logo,
@@ -17,23 +18,35 @@
       }
     }
 
-    .location-picker-center-icon {
+    .location-picker-center-icon-box {
       position: absolute;
       top: 50%;
       left: 50%;
-      transform: translate(-50%, -100%);
       width: 34px;
+      height: 34px;
+      transform: translate(-50%, -100%);
       color: #1677ff;
+      pointer-events: none;
+      img,
+      svg {
+        width: 34px;
+        height: 34px;
+        pointer-events: none;
+      }
     }
 
     .set-map-actions {
       position: absolute;
       right: 20px;
       bottom: 20px;
-      & > img {
+      .actions-icon-box {
+        margin-bottom: 8px;
+      }
+      img,
+      svg {
         display: block;
         width: 32px;
-        margin-bottom: 8px;
+        height: 32px;
         padding: 4px;
         background-color: #fff;
         border-radius: 8px;
@@ -70,7 +83,6 @@
     .location-picker-info {
       margin-right: 20px;
     }
-    .location-picker-info;
   }
   &.location-modal-content-layout-hor-reverse {
     flex-direction: row-reverse;