@cloudbase/weda-ui 0.2.14 → 0.2.17

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,
+};

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

@@ -0,0 +1,100 @@
+import * as React from 'react';
+const { useEffect, useState, useRef } = React;
+
+export default function useLocationInfo({
+  apiKey: APIKEY,
+  locationType,
+  eventsChange,
+  dataSourceStatus,
+}) {
+  const [location, setLocation] = useState({
+    poiname: '',
+    latlng: { lat: 39.98410411, lng: 116.307503 },
+  });
+  const [apiKeyStatus, setApiKeyStatus] = useState({
+    status: false,
+    message: '"地图定位组件"需进行地图配置，请检查',
+  });
+  const [currentLocStatus, setCurrentLocStatus] = useState(false);
+  const locationPlugRef = useRef();
+  const currentLocations = useRef();
+  useEffect(() => {
+    if (!dataSourceStatus || !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 = () => {
+        // @ts-ignore
+        let geolocation = new window.qq.maps.Geolocation();
+        geolocation.getIpLocation(
+          ({ city, lat, lng, addr }) => {
+            let locations = {
+              poiname: city + addr,
+              latlng: { lat, lng },
+              locationType,
+            };
+            setLocation(locations);
+            eventsChange &&
+              eventsChange(
+                {
+                  poiname: city + addr,
+                  latitude: lat,
+                  longitude: lng,
+                },
+                locationType === 1
+              );
+            // @ts-ignore
+            currentLocations.current = locations;
+            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 },
+          // @ts-ignore
+          locationType,
+        });
+      };
+      document.body.appendChild(script);
+    }
+    loadScript();
+  }, [APIKEY, locationType]);
+  return {
+    location,
+    setLocation,
+    apiKeyStatus,
+    setApiKeyStatus,
+    currentLocStatus,
+    currentLocations,
+  };
+}

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

@@ -0,0 +1,243 @@
+.weda-ui_form-location {
+  padding: 1.14286rem 0;
+}
+
+.form-location-warp {
+  display: flex;
+  white-space: nowrap;
+}
+
+.form-location-label {
+  display: flex;
+  align-items: center;
+  padding: 0 1.14286rem;
+}
+.form-location-label > span {
+  margin-right: 0.28571rem;
+  font-family: SimSun;
+  font-size: 0.85714rem;
+  color: #f60;
+}
+
+.form-location-con {
+  padding-left: 1.14286rem;
+  display: flex;
+  align-items: center;
+}
+.form-location-con > img {
+  width: 18px;
+  height: 18px;
+}
+.form-location-con > span {
+  color: #006eff;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.form-location-con_disabled {
+  cursor: not-allowed !important;
+}
+
+.form-location-addr {
+  display: flex;
+  align-items: flex-start;
+  margin-top: 12px;
+  padding-left: 1.14286rem;
+  padding-right: 1.14286rem;
+}
+
+.form-location-addr-title {
+  font-size: 16px;
+}
+.form-location-addr-lat {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+  line-height: 20px;
+}
+
+.form-location-addr > img {
+  width: 19px;
+  height: 19px;
+}
+.form-location-addr > div {
+  margin-left: 12px;
+}
+.form-map-container {
+  margin-top: 12px;
+  padding-left: 1.14286rem;
+  padding-right: 1.14286rem;
+}
+
+.form-select-map .tea-dialog__inner {
+  width: 100vw !important;
+  height: 100vh !important;
+  min-width: auto !important;
+  padding: 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;
+}
+
+/* mapChoose组件 */
+.weda-ui_map-choose {
+  width: 100%;
+  height: 100%;
+}
+.map-choose-header {
+  width: 100%;
+  padding: 8px 15px;
+  position: relative;
+  border-bottom: 1px solid #d3d3d3;
+}
+.map-choose-header_focus {
+  padding-right: 60px;
+}
+.map-choose-header_focus .map-choose-header_search_cancel {
+  display: block;
+}
+.map-choose-header_focus .map-choose-header_search_place {
+  left: 10px;
+  transform: translate(0, 0);
+}
+.map-choose-header_search {
+  height: 30px;
+  background-color: #ebebeb;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: #b4b4b4;
+  font-size: 15px;
+  line-height: 31px;
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: relative;
+}
+.map-choose-header_search_place {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  transform: translate(-50%, 0);
+}
+.map-choose-header_search_cancel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 55px;
+  height: 46px;
+  line-height: 46px;
+  text-align: center;
+  font-size: 16px;
+  color: #0079ff;
+  background-color: #fff;
+  cursor: pointer;
+  display: none;
+}
+.map-choose-header_search img {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+}
+.map-choose-header_search input {
+  display: block;
+  width: 100%;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border: 0;
+  font-size: 14px;
+  line-height: 18px;
+  background: 0 0;
+  position: relative;
+  z-index: 1;
+}
+
+.map-choose-con {
+  width: 100%;
+  height: calc(100% - 50px);
+  position: relative;
+}
+.map-choose-warp,
+.map-choose-explore {
+  width: 100%;
+  height: 100%;
+}
+.map-choose-explore {
+  display: none;
+}
+.map-choose-explore_show {
+  display: block;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.map-choose-warp_sugges {
+  height: 55%;
+  width: 100%;
+}
+.map-choose-warp_sugges ul,
+.map-choose-explore_show ul {
+  width: 100%;
+  height: 100%;
+  padding: 0 15px;
+  overflow: scroll;
+}
+.map-choose-warp_sugges li,
+.map-choose-explore_show li {
+  width: 100%;
+  height: 59px;
+  padding-top: 6px;
+  position: relative;
+  border-bottom: 1px solid #d3d3d3;
+  cursor: pointer;
+  position: relative;
+}
+.map-choose-warp_sugges li span {
+  display: none;
+}
+.map-choose-warp_sugges_choosed span {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translate(0, -50%);
+  width: 16px;
+  height: 16px;
+  display: block !important;
+  background-image: url('https://qcloudimg.tencent-cloud.cn/raw/354c15c0cb845120ac3e9c474e6737b3.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.map-choose-warp_sugges li div,
+.map-choose-explore_show li div {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 98%;
+}
+.map-choose-warp_sugges_title,
+.map-choose-explore_title {
+  font-size: 14px;
+  line-height: 27px;
+  color: #333;
+  font-weight: 400;
+  display: block;
+}