@cloudbase/weda-ui 2.0.26 → 3.1.0

package/src/web/components/form/location/components/LocationH5/location.h5.jsx

@@ -1,413 +0,0 @@
-import * as React from 'react';
-import classNames from '../../../../../utils/classnames';
-import weui from '../../../../../utils/weui';
-import './index.css';
-import { renderDecorator } from '../../../renderDecorator';
-import MapView from '../../common/mapView';
-import SelectModal from '../../common/selectModal';
-import { propTypes, defaultProps } from '../../common/propsConfig';
-import { callDataSource } from '../../../../../utils/tcb';
-import { inH5IsMobile } from '../../../../../utils/platform';
-
-const { useEffect, useState, useRef } = React;
-
-export default function LocationH5(props) {
-  const {
-    // 系统属性
-    id,
-    className,
-    style,
-    events,
-    // 组件属性
-    value,
-    label,
-    labelVisible,
-    showLngLat,
-    showMap,
-    drag,
-    zoom,
-    disabled,
-    requiredFlag,
-    decorator,
-    customLocation,
-    locationType,
-    dataSource,
-  } = props;
-  const cls = classNames({
-    'weda-ui': true,
-    cloudbase_standard: true,
-    [className]: className,
-  });
-
-  const locationPlugRef = useRef();
-
-  const [isSelectMapVisible, setIsSelectMapVisible] = useState(false);
-  const [currentLocStatus, setCurrentLocStatus] = useState(false);
-  const [dataSourceStatus, setDataSourceStatus] = useState({
-    status: false,
-    message: '请检查连接器初始化中',
-  });
-  const [APIKEY, setAPIKEY] = useState('');
-  const [apiKeyStatus, setApiKeyStatus] = useState({
-    status: false,
-    message: '地图定位中',
-  });
-  const [location, setLocation] = useState({
-    detailedAddress: '',
-    poiname: '',
-    latlng: { lat: 39.98410411, lng: 116.307503 },
-  });
-  const currentLocations = useRef();
-
-  useEffect(() => {
-    if (value || !currentLocations.current) return;
-    // 重置表单时
-    const {
-      poiname,
-      detailedAddress,
-      latlng: { lat, lng },
-    } = currentLocations.current;
-    let location = {
-      poiname,
-      detailedAddress,
-      latlng: { lat, lng },
-    };
-    if (locationType === 1) {
-      location.locationType = 1;
-      events.change({ value: null });
-    } else if (locationType === 2) {
-      let res = {
-        value: {
-          address: poiname,
-          detailedAddress,
-          geopoint: {
-            coordinates: [lng, lat],
-            type: 'Point',
-          },
-        },
-      };
-      events.change && events.change(res);
-    }
-    setLocation(location);
-  }, [value, locationType]);
-
-  useEffect(() => {
-    let loc = {
-      latlng: {
-        lat: 39.98410411,
-        lng: 116.307503,
-      },
-      poiname: '',
-      detailedAddress: '',
-      locationType,
-    };
-    switch (locationType) {
-      case 3:
-        if (checkCustomLocation(customLocation)) {
-          weui.alert('位置输入格式错误 请检查');
-          return;
-        } else {
-          // @ts-ignore
-          loc = {
-            latlng: {
-              lat: customLocation.latitude,
-              lng: customLocation.longitude,
-            },
-            poiname: customLocation.poiname,
-          };
-        }
-        break;
-    }
-    setLocation(loc);
-    // 暂不支持自定位置，初始化表单值都是null
-    events.change({ value: null });
-  }, [locationType]);
-
-  useEffect(() => {
-    if (locationType != 3) {
-      return;
-    }
-    if (checkCustomLocation(customLocation)) {
-      weui.alert('位置输入格式错误 请检查');
-      return;
-    }
-    let { latitude, longitude, poiname } = customLocation;
-    let loc = {
-      latlng: {
-        lat: latitude,
-        lng: longitude,
-      },
-      poiname: poiname,
-      detailedAddress: '',
-    };
-    setLocation(loc);
-  }, [customLocation, locationType]);
-
-  // 获取定位信息
-  useEffect(() => {
-    if (!dataSourceStatus.status || !APIKEY || APIKEY == '这里是示例') return;
-    function loadScript() {
-      // 移除之前的
-      if (document.getElementById('form-location-plug')) {
-        document.body.removeChild(
-          document.getElementById('form-location-plug')
-        );
-      }
-      const script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.src = `https://apis.map.qq.com/tools/geolocation/min?key=${APIKEY}&referer=myapp`;
-      script.setAttribute('id', 'form-location-plug');
-      // @ts-ignore
-      locationPlugRef.current = 'form-location-plug';
-      script.onload = () => {
-        let geolocation = new window.qq.maps.Geolocation();
-        let getLocationType = inH5IsMobile() ? 'getLocation' : 'getIpLocation';
-        geolocation[getLocationType](
-          (ipLocation) => {
-            const { city, lat, lng, addr } = ipLocation;
-            let loc = {
-              poiname: city + addr,
-              detailedAddress: city + addr,
-              latlng: { lat, lng },
-            };
-            if (locationType === 1) {
-              loc.locationType = 1;
-            }
-            setLocation(loc);
-            // @ts-ignore
-            currentLocations.current = loc;
-            if (locationType === 2) {
-              loc.locationType = 1;
-              events.change &&
-                events.change({
-                  value: {
-                    address: city + addr,
-                    detailedAddress: city + addr,
-                    geopoint: {
-                      coordinates: [lng, lat],
-                      type: 'Point',
-                    },
-                  },
-                });
-            }
-            setApiKeyStatus({
-              status: true,
-              message: '',
-            });
-            setCurrentLocStatus(true);
-          },
-          (error) => {
-            console.log('error loc', error);
-            currentLocations.current = null;
-            setApiKeyStatus({
-              status: false,
-              message:
-                error.code === 1
-                  ? '请打开定位权限'
-                  : error.message || '定位失败',
-            });
-            setCurrentLocStatus(false);
-          }
-        );
-      };
-      script.onerror = (error) => {
-        console.log('Geolocation script onerror', error);
-        setApiKeyStatus({
-          status: false,
-          message: '定位失败',
-        });
-        setLocation({
-          poiname: '',
-          detailedAddress: '',
-          latlng: { lat: 39.98410411, lng: 116.307503 },
-        });
-        weui.alert('定位失败');
-      };
-      document.body.appendChild(script);
-    }
-    loadScript();
-  }, [APIKEY, locationType, dataSourceStatus]);
-
-  useEffect(() => {
-    // 调用连接器数据源方法
-    if (dataSource.name) {
-      callDataSource({
-        dataSourceName: dataSource.name,
-        methodName: 'getApiKey',
-      })
-        .then((res) => {
-          if (res.apiKey) {
-            setAPIKEY(res.apiKey);
-            setDataSourceStatus({
-              status: true,
-              message: '',
-            });
-            setApiKeyStatus({
-              status: true,
-              message: '',
-            });
-          }
-        })
-        .catch((error) => {
-          console.log('datasources error', error);
-          setDataSourceStatus({
-            status: false,
-            message: error,
-          });
-        });
-    } else {
-      setDataSourceStatus({
-        status: false,
-        message: '"地图定位组件"需进行地图配置，请检查',
-      });
-      weui.alert('"地图定位组件"需进行地图配置，请检查');
-    }
-  }, [dataSource]);
-
-  const checkCustomLocation = (params) => {
-    let { latitude, longitude } = params;
-    let message = '';
-    if (Object.prototype.toString.call(params) !== '[object Object]') {
-      return (message = '位置输入格式错误 请检查');
-    } else if (!latitude || !Number(latitude)) {
-      return (message = '位置输入格式错误 请检查');
-    } else if (!longitude || !Number(longitude)) {
-      return (message = '位置输入格式错误 请检查');
-    } else if (!params) {
-      return (message = '位置输入格式错误 请检查');
-    }
-  };
-
-  const handleChooseLocation = () => {
-    if (disabled) return;
-    if (!dataSourceStatus.status) return weui.alert(dataSourceStatus.message);
-    if (!apiKeyStatus.status) return weui.alert(apiKeyStatus.message);
-    if (!currentLocStatus) return weui.alert('获取当前位置信息中，请稍等');
-    setIsSelectMapVisible(true);
-  };
-
-  const onChangeLocation = (value) => {
-    const { poiname, latlng, detailedAddress } = value;
-    let res = {
-      value: {
-        address: poiname,
-        detailedAddress,
-        geopoint: {
-          coordinates: [latlng.lng, latlng.lat],
-          type: 'Point',
-        },
-      },
-    };
-    events.change && events.change(res);
-  };
-
-  const getIsShowMap = () => {
-    let status = showMap;
-    // @ts-ignore
-    if (locationType === 1 && location.locationType === 1) {
-      status = false;
-    } else if (locationType === 2 && !dataSourceStatus.status) {
-      status = false;
-    } else if (locationType === 2 && !apiKeyStatus.status) {
-      status = false;
-    } else if (!currentLocStatus) {
-      status = false;
-    }
-    return status;
-  };
-
-  const getIsShowAddr = () => {
-    let status = true;
-    // @ts-ignore
-    if (locationType === 1 && location.locationType === 1) {
-      status = false;
-    } else if (locationType === 2 && !dataSourceStatus.status) {
-      status = false;
-    } else if (locationType === 2 && !apiKeyStatus.status) {
-      status = false;
-    } else if (!currentLocStatus) {
-      status = false;
-    }
-    return status;
-  };
-
-  const LocationEl = (
-    <div
-      className="form-location weda-ui_form-location"
-      data-testid="form-location"
-    >
-      <div className="form-location-warp">
-        {labelVisible && (
-          <div className="form-location-label">
-            {label}
-            {requiredFlag && <span>*</span>}
-          </div>
-        )}
-        <div className="form-location-con">
-          <img
-            src="https://qcloudimg.tencent-cloud.cn/raw/6542e1ce1dd36a90085b2eb979801df9.png"
-            alt=""
-          />
-          <span
-            className={classNames({ 'form-location-con_disabled': disabled })}
-            onClick={handleChooseLocation}
-          >
-            选择地理位置
-          </span>
-        </div>
-      </div>
-      {getIsShowAddr() && (
-        <div className="form-location-addr">
-          <img
-            src="https://qcloudimg.tencent-cloud.cn/raw/f9729e0b091f394110a6e12d3f4e7290.png"
-            alt=""
-          />
-          <div>
-            {location.poiname && (
-              <div className="form-location-addr-title">{location.poiname}</div>
-            )}
-            {showLngLat && (
-              <div className="form-location-addr-lat">
-                {location.latlng
-                  ? `${location.latlng.lat}N,${location.latlng.lng}E`
-                  : ''}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-      {getIsShowMap() && (
-        <div className="form-map-container" style={{ height: '200px' }}>
-          <MapView
-            APIKEY={APIKEY}
-            drag={drag}
-            zoom={zoom}
-            latlng={location.latlng}
-          />
-        </div>
-      )}
-      <SelectModal
-        isSelectMapVisible={isSelectMapVisible}
-        setIsSelectMapVisible={setIsSelectMapVisible}
-        location={location}
-        setLocation={setLocation}
-        chooseLocation={onChangeLocation}
-        APIKEY={APIKEY}
-      />
-    </div>
-  );
-  return renderDecorator(
-    LocationEl,
-    decorator
-  )({
-    id,
-    className: cls,
-    style,
-    multiCell: false,
-    requiredFlag,
-  });
-}
-
-LocationH5.propTypes = propTypes;
-
-LocationH5.defaultProps = defaultProps;

package/src/web/components/form/location/components/LocationPC/Header.jsx

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import { Button } from 'tea-component';
-import classNames from '../../../../../utils/classnames';
-
-const Header = ({
-  onClick,
-  isEdit,
-  info,
-  disabled,
-  showLngLat,
-  locationType,
-  dataSourceStatus,
-  apiKeyStatus,
-  currentLocStatus,
-}) => {
-  const { poiname, latlng } = info || {};
-  const buttonType = isEdit ? 'weak' : 'primary';
-  const buttonText = isEdit ? '重新定位' : '选择地理位置';
-
-  const getIsShowAddr = () => {
-    let status = true;
-    // 默认显示位置 无
-    if (locationType === 1 && info.locationType === 1) {
-      status = false;
-    } else if (locationType === 2 && !dataSourceStatus) {
-      status = false;
-    } else if (locationType === 2 && !apiKeyStatus.status) {
-      status = false;
-    } else if (!currentLocStatus) {
-      status = false;
-    }
-    return status;
-  };
-
-  return (
-    <div
-      className={classNames({
-        'wedatea2td-justify-grid _weda-fn-map__local': true,
-        'weda-fn-map__local_loc': true,
-        'weda-fn-map__local_edit': isEdit,
-      })}
-    >
-      {isEdit ? (
-        <>
-          <div className="wedatea2td-justify-grid__col wedatea2td-justify-grid__col--right weda-fn-map__local_loc_btn">
-            <Button type={buttonType} onClick={onClick} disabled={disabled}>
-              {buttonText}
-            </Button>
-          </div>
-        </>
-      ) : (
-        <div className="wedatea2td-justify-grid__col wedatea2td-justify-grid__col--left weda-fn-map__local_loc_btn_left">
-          <Button type={buttonType} onClick={onClick} disabled={disabled}>
-            {buttonText}
-          </Button>
-        </div>
-      )}
-      {getIsShowAddr() && (
-        <div
-          className={classNames(
-            'wedatea2td-justify-grid__col',
-            'wedatea2td-justify-grid__col--left',
-            'weda-fn-map__local_wrap'
-          )}
-        >
-          <i className="wedatea2td-icon _weda-fn-icon-local weda-fn-map__local_wrap_icon"></i>
-          <div className="weda-fn-map__local_wrap_addr">
-            {poiname && (
-              <span
-                className={classNames(
-                  'wedatea2td-fz-reset',
-                  'form-location-map-pc-address'
-                )}
-              >
-                {poiname}
-              </span>
-            )}
-
-            {showLngLat ? (
-              <div
-                className={classNames({
-                  'form-location-addr-lat': true,
-                  'form-location-map-pc-latlng': true,
-                })}
-              >
-                {latlng.lat ? `${latlng.lat}N,${latlng.lng}E` : ''}
-              </div>
-            ) : null}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Header;

package/src/web/components/form/location/components/LocationPC/index.css

@@ -1,44 +0,0 @@
-.form-location-map-pc {
-  width: 490px;
-  height: 300px;
-  margin-top: 8px;
-}
-.form-location-map-pc-address {
-  vertical-align: middle;
-}
-
-.weda-fn-map__local_loc {
-  display: block !important;
-  position: relative;
-  min-height: 32px;
-  width: 490px !important;
-}
-.weda-fn-map__local_edit {
-  display: flex !important;
-}
-.weda-fn-map__local_loc_btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.weda-fn-map__local_loc_btn_left {
-  margin-bottom: 8px;
-}
-.weda-fn-map__local_wrap {
-  display: flex;
-  /* margin-top: 8px; */
-}
-.weda-fn-map__local_wrap_icon {
-  width: 24px;
-  height: 24px;
-}
-.form-location-map-pc-latlng,
-.form-location-map-pc-address {
-  display: block;
-  height: 24px;
-  line-height: 24px;
-}
-
-.wedatea2td-form > .wa-comp-weda_standard-FormLocation {
-  padding-left: 2.28571rem;
-}