@cloudbase/weda-ui 0.2.15 → 0.2.16

package/src/web/components/form/location/common/mapChoose.jsx

@@ -0,0 +1,343 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import classNames from '../../../../utils/classnames';
+import debounce from '../../../../utils/debounce';
+import { tmapApiUrl } from '../constants';
+import { getTMap } from '../../../../utils/tmap';
+import './mapChoose.css';
+
+const { useEffect, useState, useRef } = React;
+
+export default function MapChoose({
+  changeLocation,
+  latlng = {
+    lat: null,
+    lng: null,
+  },
+  isPC,
+  APIKEY = '',
+}) {
+  const { lat, lng } = latlng;
+
+  const mapRef = useRef();
+  const markerRef = useRef();
+  const centerRef = useRef();
+
+  const [isSearch, setIsSearch] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [chooseLoc, setChooseLoc] = useState({
+    location: {
+      lat: null,
+      lng: null,
+    },
+    title: '',
+    address: '',
+    id: '',
+  });
+  const [exploreList, setExploreList] = useState([]);
+  const [searchList, setSearchList] = useState([]);
+  const [mapDomName, setMapDomName] = useState(new Date().getTime());
+
+  useEffect(() => {
+    if (!APIKEY || APIKEY == '这里是示例') return;
+    function loadScript() {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = `${tmapApiUrl}?v=2.exp&key=${APIKEY}&callback=init&libraries=service`;
+      script.onload = () => {
+        initMap();
+      };
+      script.onerror = (error) => {
+        console.log(' load mapchoose error success', APIKEY);
+      };
+      document.body.appendChild(script);
+    }
+    if (getTMap()) {
+      initMap();
+    } else {
+      loadScript();
+    }
+    exploreNear();
+    return () => {
+      // @ts-ignore
+      mapRef.current && mapRef.current.destroy();
+    };
+  }, [APIKEY]);
+
+  const initMap = () => {
+    if (!getTMap()) return;
+    const TMap = getTMap();
+    //定义地图中心点坐标
+    const center = new TMap.LatLng(lat, lng);
+    //定义map变量，调用 TMap.Map() 构造函数创建地图
+    mapRef.current = new TMap.Map(
+      document.getElementById(`form-map-choose-${mapDomName}`),
+      {
+        center, //设置地图中心点坐标
+        zoom: 16, //设置地图缩放级别
+      }
+    );
+    initMarker(getTMap(), mapRef.current);
+  };
+
+  const initMarker = (TMap, map) => {
+    const canLoad = lat && lng && TMap && map;
+    if (canLoad) {
+      const position = new TMap.LatLng(lat, lng);
+      markerRef.current = new TMap.MultiMarker({
+        map: mapRef.current,
+        styles: {
+          pointer: new TMap.MarkerStyle({
+            width: 26,
+            height: 35,
+          }),
+        },
+        geometries: [
+          {
+            id: `pointer-origin-${mapDomName}`,
+            styleId: 'pointer',
+            position,
+          },
+          {
+            id: `pointer-${mapDomName}`,
+            styleId: 'pointer',
+            position,
+          },
+        ],
+      });
+      // 监听中心点变化事件，更新marker的位置
+      map.on('center_changed', updateCenter);
+    }
+  };
+
+  const updateCenter = () => {
+    const TMap = getTMap();
+    const canLoad = TMap && lat && lng && mapRef.current;
+    if (canLoad) {
+      const nowPosition = new TMap.LatLng(lat, lng);
+      // @ts-ignore
+      let centerPosition = mapRef.current.getCenter();
+      centerRef.current = centerPosition;
+      // @ts-ignore
+      markerRef.current.updateGeometries([
+        {
+          id: `pointer-origin-${mapDomName}`,
+          styleId: 'pointer',
+          position: nowPosition,
+        },
+        {
+          id: `pointer-${mapDomName}`,
+          styleId: 'pointer',
+          // @ts-ignore
+          position: mapRef.current.getCenter(),
+        },
+      ]);
+      exploreNear();
+    }
+  };
+
+  const handleFocus = (value) => {
+    setIsSearch(value);
+  };
+
+  const exploreNear = debounce(() => {
+    const { lat, lng } = centerRef.current || latlng;
+    let TMap = getTMap();
+    let search = new TMap.service.Search({ pageSize: 20 }); // 新建一个地点搜索类
+    search
+      .explore({
+        center: new TMap.LatLng(lat, lng),
+        policy: 1,
+        radius: 2000,
+        pageIndex: 1,
+      })
+      .then((res) => {
+        res.data && setExploreList(res.data);
+      });
+  }, 500);
+
+  const chooseLoction = (value, type) => {
+    const TMap = getTMap();
+    //定义地图中心点坐标
+    const center = new TMap.LatLng(value.location.lat, value.location.lng);
+    // @ts-ignore
+    mapRef.current.setCenter(center);
+    setChooseLoc(value);
+    changeLocation(value);
+    type && cancleSearch();
+  };
+
+  const changeSearchValue = (event) => {
+    if (event.target.value) {
+      setSearchValue(event.target.value);
+      let TMap = getTMap();
+      let search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
+      search
+        .searchNearby({
+          keyword: event.target.value,
+          center: new TMap.LatLng(lat, lng),
+          radius: 2000,
+          pageIndex: 1,
+        })
+        .then((res) => {
+          setSearchList(res.data);
+        })
+        .catch((error) => {
+          console.log('error', error);
+        });
+    } else {
+      setSearchValue('');
+      setTimeout(() => {
+        setSearchList([]);
+      }, 300);
+    }
+  };
+
+  const cancleSearch = () => {
+    handleFocus(false);
+    setSearchValue('');
+    setSearchList([]);
+  };
+
+  const renderHeader = () => {
+    return (
+      <div
+        className={classNames({
+          'map-choose-header': true,
+          'map-choose-header_focus': isSearch,
+        })}
+      >
+        <div className="map-choose-header_search">
+          <input
+            type="text"
+            onFocus={() => {
+              handleFocus(true);
+            }}
+            onChange={changeSearchValue}
+            value={searchValue}
+          />
+          {!searchValue && (
+            <div className="map-choose-header_search_place">
+              <img
+                src="https://qcloudimg.tencent-cloud.cn/raw/388c48cdcbe9ca07f5682fb10d05ebdd.png"
+                alt=""
+              />
+              <span>搜索地点</span>
+            </div>
+          )}
+        </div>
+        <span
+          className="map-choose-header_search_cancel"
+          onClick={cancleSearch}
+        >
+          取消
+        </span>
+      </div>
+    );
+  };
+  const renderMapView = () => {
+    return (
+      <div
+        id={`form-map-choose-${mapDomName}`}
+        style={{ height: isPC ? '100%' : '45%', width: '100%' }}
+      ></div>
+    );
+  };
+  const renderSuggestList = () => {
+    return (
+      <div
+        className={classNames({
+          'map-choose-warp_sugges': true,
+          'map-choose-explore_show_inSearch': isSearch,
+          'map-choose-warp_sugges-pc': isPC,
+        })}
+      >
+        <ul>
+          {exploreList.map((item, index) => (
+            <li
+              key={index}
+              onClick={() => {
+                chooseLoction(item);
+              }}
+              className={classNames({
+                'map-choose-warp_sugges_choosed': chooseLoc.id == item.id,
+              })}
+            >
+              <div className="map-choose-warp_sugges_title">{item.title}</div>
+              <div>{item.address}</div>
+              <span />
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+  const renderExplore = () => {
+    return (
+      <div
+        className={classNames({
+          'map-choose-explore': true,
+          'map-choose-explore_show': isSearch,
+          'map-choose-explore_show-h5': isSearch && !isPC,
+          'map-choose-explore-pc': isPC,
+          'map-choose-explore_show-pc': isPC,
+        })}
+      >
+        <ul>
+          {searchList.map((item, index) => (
+            <li
+              key={index}
+              onClick={() => {
+                chooseLoction(item, true);
+              }}
+              className={classNames({
+                'map-choose-explore_choosed': chooseLoc.id == item.id,
+              })}
+            >
+              <div className="map-choose-explore_title">{item.title}</div>
+              <div>{item.address}</div>
+              <span />
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+  if (isPC) {
+    return (
+      <div
+        className={classNames(
+          'map-choose',
+          'map-choose-pc',
+          'weda-ui_map-choose'
+        )}
+      >
+        <div className="map-choose-pc-left">
+          {renderHeader()}
+          {renderSuggestList()}
+          {renderExplore()}
+        </div>
+        <div className="map-choose-pc-right">{renderMapView()}</div>
+      </div>
+    );
+  }
+  return (
+    <div className="map-choose weda-ui_map-choose">
+      {renderHeader()}
+      <div className="map-choose-con">
+        <div className="map-choose-warp">
+          {renderMapView()}
+          {renderSuggestList()}
+        </div>
+        {renderExplore()}
+      </div>
+    </div>
+  );
+}
+
+MapChoose.propTypes = {
+  APIKEY: PropTypes.string,
+  latlng: PropTypes.object,
+  changeLocation: PropTypes.func,
+  isPC: PropTypes.bool,
+};

package/src/web/components/form/location/common/mapView.jsx

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { tmapApiUrl } from '../constants';
+import { getTMap } from '../../../../utils/tmap';
+
+const { useEffect, useRef, useState } = React;
+
+export default function MapView({
+  APIKEY = '',
+  drag = true,
+  zoom = true,
+  latlng = {
+    lat: null,
+    lng: null,
+  },
+}) {
+  const mapRef = useRef();
+  const markerRef = useRef();
+  const mapDom = useRef();
+  const mapDomName = useRef(new Date().getTime());
+  const [mapStatus, setMapStatus] = useState(false);
+  const { lat, lng } = latlng;
+
+  const initMap = () => {
+    if (mapRef.current || !mapDom.current) return;
+    try {
+      const TMap = getTMap();
+      //定义地图中心点坐标
+      const center = new TMap.LatLng(lat, lng);
+      //定义map变量，调用 TMap.Map() 构造函数创建地图
+      mapRef.current = new TMap.Map(mapDom.current, {
+        center, //设置地图中心点坐标
+        zoom: 16, //设置地图缩放级别
+        minZoom: 3,
+        maxZoom: 20,
+      });
+      // @ts-ignore
+      mapRef.current.setDraggable(drag);
+      removeOrAddZoom(mapRef.current, TMap);
+      initMarker();
+      setMapStatus(true);
+    } catch (error) {
+      console.log('initMap error', error);
+    }
+  };
+
+  const initMarker = () => {
+    try {
+      const TMap = getTMap();
+      const canLoad = TMap && lat && lng && mapRef.current;
+      if (canLoad) {
+        const position = new TMap.LatLng(lat, lng);
+        markerRef.current = new TMap.MultiMarker({
+          map: mapRef.current,
+          styles: {
+            pointer: new TMap.MarkerStyle({
+              width: 26,
+              height: 35,
+            }),
+          },
+          geometries: [
+            {
+              id: `pointer-${mapDomName.current}`,
+              styleId: 'pointer',
+              position,
+            },
+          ],
+        });
+      }
+    } catch (err) {
+      console.log('initMarker err', err);
+    }
+  };
+
+  useEffect(() => {
+    if (!APIKEY || APIKEY == '这里是示例') return;
+    function loadScript() {
+      // 移除之前的
+      if (document.getElementById('tmap-script')) {
+        document.body.removeChild(document.getElementById('tmap-script'));
+      }
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = `${tmapApiUrl}?v=2.exp&key=${APIKEY}&callback=init&libraries=service`;
+      script.setAttribute('id', 'tmap-script');
+      script.onload = () => {
+        initMap();
+      };
+      script.onerror = (err) => {
+        console.log('loadScript err', err);
+      };
+      document.body.appendChild(script);
+    }
+    setTimeout(() => {
+      loadScript();
+    }, 1000);
+    return () => {
+      // @ts-ignore
+      mapRef.current && mapRef.current.destroy();
+      mapRef.current = null;
+      setMapStatus(false);
+    };
+  }, [APIKEY]);
+
+  useEffect(() => {
+    // @ts-ignore
+    mapRef.current && mapRef.current.setDraggable(drag);
+  }, [drag, mapRef.current]);
+
+  useEffect(() => {
+    mapRef.current && getTMap() && removeOrAddZoom(mapRef.current, getTMap());
+  }, [zoom, mapRef.current]);
+
+  useEffect(() => {
+    const TMap = getTMap();
+    const canLoad = TMap && lat && lng && mapRef.current && mapStatus;
+    if (canLoad) {
+      try {
+        const newLatLng = new TMap.LatLng(lat, lng);
+        // @ts-ignore
+        mapRef.current.setCenter(newLatLng);
+        // @ts-ignore
+        mapRef.current.panTo(newLatLng);
+        // @ts-ignore
+        markerRef.current.updateGeometries([
+          {
+            styleId: 'pointer',
+            id: `pointer-${mapDomName.current}`,
+            position: newLatLng,
+          },
+        ]);
+      } catch (error) {
+        console.log('updateGeometries error view', error);
+      }
+    }
+  }, [lat, lng, mapStatus]);
+
+  // 缩放事件
+  const removeOrAddZoom = (map, TMap) => {
+    try {
+      let level = map.getZoom();
+      map.setScrollable(zoom);
+      map.setDoubleClickZoom(zoom);
+      // 缩放控件
+      if (zoom) {
+        addControl(map, TMap);
+        map.setMaxZoom(20);
+        map.setMinZoom(3);
+      } else {
+        removeControl(map, TMap);
+        map.setMaxZoom(level);
+        map.setMinZoom(level);
+      }
+    } catch (error) {
+      console.log('removeOrAddZoom error', error);
+    }
+  };
+
+  // 移除缩放控件
+  const removeControl = (map, TMap) => {
+    if (!map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)) {
+      return;
+    }
+    map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
+  };
+
+  // 缩放控件添加到地图上
+  const addControl = (map, TMap) => {
+    let control = map.getControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
+    if (!control) {
+      map.addControl(control);
+      control.setPosition(TMap.constants.CONTROL_POSITION.BOTTOM_RIGHT);
+    }
+  };
+
+  return (
+    <div
+      ref={mapDom}
+      id={`form-location-map-${mapDomName.current}`}
+      style={{ height: '100%', width: '100%' }}
+    ></div>
+  );
+}
+
+MapView.propTypes = {
+  APIKEY: PropTypes.string,
+  drag: PropTypes.bool,
+  zoom: PropTypes.bool,
+  latlng: PropTypes.object,
+};

package/src/web/components/form/location/common/propsConfig.js

@@ -0,0 +1,54 @@
+import * as PropTypes from 'prop-types';
+
+export const propTypes = {
+  // 系统属性
+  id: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.string,
+  events: PropTypes.object,
+  // 组件属性
+  label: PropTypes.string,
+  labelVisible: PropTypes.bool,
+  APIKEY: PropTypes.string,
+  showLngLat: PropTypes.bool,
+  showMap: PropTypes.bool,
+  defauleShowLocation: PropTypes.bool,
+  drag: PropTypes.bool,
+  zoom: PropTypes.bool,
+  disabled: PropTypes.bool,
+  requiredFlag: PropTypes.bool,
+  decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
+  value: PropTypes.object,
+  locationType: PropTypes.number,
+  customLocation: PropTypes.object,
+  dataSource: PropTypes.object,
+};
+
+export const defaultProps = {
+  // 系统属性
+  events: {},
+  // 组件属性
+  label: '地图定位',
+  labelVisible: true,
+  APIKEY: '',
+  showLngLat: false,
+  showMap: false,
+  defauleShowLocation: false,
+  drag: true,
+  zoom: true,
+  disabled: false,
+  requiredFlag: false,
+  locationType: 1,
+  customLocation: {},
+  // 模型应用属性
+  value: {
+    address: '',
+    geopoint: {
+      coordinates: [39.984104, 116.307503],
+      type: 'Point',
+    },
+  },
+  readOnly: false,
+  isModalApp: false,
+  dataSource: {},
+};

package/src/web/components/form/location/common/selectModal.css

@@ -0,0 +1,44 @@
+.form-select-map .tea-dialog__inner {
+  width: 100vw !important;
+  height: 100vh !important;
+  min-width: auto !important;
+  padding: 0;
+}
+.form-select-map .wedatea2td-dialog__inner {
+  box-shadow: none;
+  border: 0;
+  min-width: 100vw !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  overflow-x: scroll;
+}
+.form-select-map .wedatea2td-dialog__inner .wedatea2td-dialog__header {
+  margin-bottom: 0;
+}
+.form-select-map .tea-dialog__header {
+  height: 30px;
+  margin-bottom: 0;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+.form-select-map .tea-dialog__header .tea-dialog__headertitle {
+  line-height: 30px;
+  margin-bottom: 0;
+}
+.form-select-map .tea-dialog__body {
+  height: calc(100vh - 90px);
+}
+.form-select-map .tea-dialog__footer {
+  height: 30px;
+  margin-top: 10px;
+}
+.weda-ui_form-select {
+  background-color: #fff;
+}
+/* 大屏版样式 */
+.form-select-map-pc .wedatea2td-dialog__inner {
+  height: 800px !important;
+}
+.form-select-map-pc .wedatea2td-dialog__body {
+  height: calc(100% - 100px);
+}

package/src/web/components/form/location/common/selectModal.jsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Modal, Button } from 'tea-component';
+import * as PropTypes from 'prop-types';
+import { usePlatform } from '../../../../utils/platform';
+import classNames from '../../../../utils/classnames';
+import MapChoose from './mapChoose';
+import './selectModal.css';
+
+const { useRef } = React;
+
+export default function SelectModal({
+  location = { latlng: { lat: null, lng: null } },
+  setLocation,
+  isSelectMapVisible = false,
+  setIsSelectMapVisible,
+  chooseLocation,
+  APIKEY = '',
+}) {
+  const latlng = location.latlng || { lat: null, lng: null };
+  const positionRef = useRef({});
+  const platform = usePlatform();
+  const isPC = platform === 'pc';
+
+  const close = () => setIsSelectMapVisible(false);
+  const confirm = () => {
+    // @ts-ignore
+    if (positionRef.current.latlng) {
+      setLocation(positionRef.current);
+      chooseLocation(positionRef.current);
+    }
+    close();
+  };
+
+  const getPosition = (value) => {
+    const { title, location } = value;
+    let loc = {
+      poiname: title,
+      latlng: { lat: location.lat, lng: location.lng },
+    };
+    positionRef.current = loc;
+  };
+
+  return (
+    <Modal
+      visible={isSelectMapVisible}
+      caption="选择地理位置"
+      onClose={close}
+      className={classNames({
+        'weda-ui_form-select': true,
+        'form-select-map': !isPC,
+        'form-select-map-pc': isPC,
+      })}
+      {...(isPC ? { size: 1200 } : {})}
+    >
+      <Modal.Body>
+        <MapChoose
+          latlng={latlng}
+          changeLocation={getPosition}
+          isPC={isPC}
+          APIKEY={APIKEY}
+        />
+      </Modal.Body>
+      <Modal.Footer>
+        <Button type="primary" onClick={confirm}>
+          确定
+        </Button>
+        <Button type="weak" onClick={close}>
+          取消
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+SelectModal.propTypes = {
+  location: PropTypes.object,
+  isSelectMapVisible: PropTypes.bool,
+  APIKEY: PropTypes.string,
+  setLocation: PropTypes.func,
+  setIsSelectMapVisible: PropTypes.func,
+  chooseLocation: PropTypes.func,
+};