@cloudbase/weda-ui 2.0.26 → 3.1.0

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

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

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

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

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

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { Modal, Button } from 'tea-component';
-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, address } = value;
-    let loc = {
-      poiname: title,
-      detailedAddress: address,
-      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>
-  );
-}