@cloudbase/weda-ui 0.2.14 → 0.2.17

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

@@ -0,0 +1,403 @@
+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({
+    poiname: '',
+    latlng: { lat: 39.98410411, lng: 116.307503 },
+  });
+  const currentLocations = useRef();
+
+  useEffect(() => {
+    if (value || !currentLocations.current) return;
+    // 重置表单时
+    const {
+      poiname,
+      latlng: { lat, lng },
+    } = currentLocations.current;
+    let location = {
+      poiname,
+      latlng: { lat, lng },
+    };
+    if (locationType === 1) {
+      location.locationType = 1;
+      events.change({ value: null });
+    } else if (locationType === 2) {
+      let res = {
+        value: {
+          address: poiname,
+          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: '',
+      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,
+    };
+    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,
+              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,
+                    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: '',
+          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 } = value;
+    let res = {
+      value: {
+        address: poiname,
+        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">
+            {requiredFlag && <span>*</span>}
+            {label}
+          </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

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Button } from 'tea-component';
+import * as PropTypes from 'prop-types';
+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>
+  );
+};
+
+Header.propTypes = {
+  onClick: PropTypes.func,
+  isEdit: PropTypes.bool,
+  info: PropTypes.object,
+  disabled: PropTypes.bool,
+  showLngLat: PropTypes.bool,
+  currentLocStatus: PropTypes.bool,
+  dataSourceStatus: PropTypes.bool,
+  locationType: PropTypes.number,
+  apiKeyStatus: PropTypes.object,
+};
+
+export default Header;

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

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