dtable-ui-component 5.3.1-beta6 → 5.3.2-alpha1

package/lib/GeolocationEditor/map-editor/large-editor/index.js

@@ -1,461 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactstrap = require("reactstrap");
-var _toaster = _interopRequireDefault(require("../../../toaster"));
-var _Loading = _interopRequireDefault(require("../../../Loading"));
-var _constants = require("../../../constants");
-var _cell = require("../../../utils/cell");
-var _mapEditorUtils = require("../../map-editor-utils");
-var _lang = require("../../../lang");
-require("./index.css");
-class LargeMapEditorDialog extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.loadMineMapCallBack = () => {
-      if (!this.timer) {
-        this.timer = setTimeout(() => {
-          const {
-            domainUrl,
-            dataDomainUrl,
-            serverDomainUrl,
-            spriteUrl,
-            serviceUrl
-          } = (0, _mapEditorUtils.getMineMapUrl)();
-          window.minemap.domainUrl = domainUrl;
-          window.minemap.dataDomainUrl = dataDomainUrl;
-          window.minemap.serverDomainUrl = serverDomainUrl;
-          window.minemap.spriteUrl = spriteUrl;
-          window.minemap.serviceUrl = serviceUrl;
-          window.minemap.key = this.mapKey;
-          window.minemap.solution = 11001;
-          this.renderMineMap();
-          clearTimeout(this.timer);
-          this.timer = null;
-        }, 1000);
-      }
-    };
-    this.renderMineMap = () => {
-      this.setState({
-        isLoading: false
-      }, () => {
-        if (!window.minemap.key) return;
-        this.map = new window.minemap.Map({
-          container: 'geolocation-map-container-large',
-          style: 'https://service.minedata.cn/map/solu/style/11001',
-          pitch: 0,
-          maxZoom: 17,
-          minZoom: 3,
-          projection: 'MERCATOR'
-        });
-        let {
-          lng,
-          lat,
-          zoom
-        } = (0, _mapEditorUtils.getInitCenter)();
-        const {
-          value
-        } = this.state;
-        if ((0, _cell.isValidPosition)(value.lng, value.lat)) {
-          lng = value.lng;
-          lat = value.lat;
-          this.addMarkerByPosition(lng, lat);
-        }
-        this.map.setCenter([lng, lat]);
-        this.map.setZoom(zoom);
-        if (this.readOnly) return;
-        this.map.on('click', event => {
-          const point = event.lngLat;
-          this.setValue(point);
-          this.addMarkerByPosition(point.lng, point.lat);
-        });
-      });
-    };
-    this.renderBaiduMap = () => {
-      this.setState({
-        isLoading: false
-      }, () => {
-        if (!window.BMap.Map) return;
-        this.map = new window.BMap.Map('geolocation-map-container-large');
-        let {
-          lng,
-          lat,
-          zoom
-        } = (0, _mapEditorUtils.getInitCenter)();
-        const {
-          value
-        } = this.state;
-        if ((0, _cell.isValidPosition)(value.lng, value.lat)) {
-          lng = value.lng;
-          lat = value.lat;
-          this.addMarkerByPosition(lng, lat);
-        }
-        let point = new window.BMap.Point(lng, lat);
-        this.map.centerAndZoom(point, zoom);
-        this.map.enableScrollWheelZoom(true);
-        if (this.readOnly) return;
-        this.map.addEventListener('click', event => {
-          const point = event.point;
-          this.setValue(point);
-          this.addMarkerByPosition(point.lng, point.lat);
-        });
-      });
-    };
-    this.renderGoogleMap = () => {
-      this.setState({
-        isLoading: false
-      }, () => {
-        let {
-          lng,
-          lat,
-          zoom
-        } = (0, _mapEditorUtils.getInitCenter)();
-        this.map = new window.google.maps.Map(this.ref, {
-          zoom,
-          center: {
-            lng,
-            lat
-          },
-          zoomControl: false,
-          mapTypeControl: false,
-          scaleControl: false,
-          streetViewControl: false,
-          rotateControl: false,
-          fullscreenControl: false
-        });
-        const {
-          value
-        } = this.state;
-        if (value.lng && value.lat) {
-          lng = value.lng;
-          lat = value.lat;
-          this.addMarkerByPosition(lng, lat);
-        }
-        this.map.setCenter({
-          lng,
-          lat
-        });
-        this.map.addListener('click', event => {
-          const lng = event.latLng.lng();
-          const lat = event.latLng.lat();
-          const point = {
-            lng,
-            lat
-          };
-          this.setValue(point);
-          this.addMarkerByPosition(lng, lat);
-        });
-      });
-    };
-    this.geolocationCallback = (error, point) => {
-      if (!error) {
-        this.setValue({
-          ...point
-        });
-        this.addMarkerByPosition(point.lng, point.lat);
-        if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
-          this.map.setCenter({
-            lng: point.lng,
-            lat: point.lat
-          });
-        }
-      } else {
-        _toaster.default.danger((0, _lang.getLocale)('Positioning_failed'));
-      }
-    };
-    this.setValue = point => {
-      const value = {
-        lng: point.lng,
-        lat: point.lat
-      };
-      this.setState({
-        value,
-        inputValue: _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? "".concat(point.lng, ", ").concat(point.lat) : "".concat(point.lat, ", ").concat(point.lng)
-      });
-    };
-    this.addMarkerByPosition = (lng, lat) => {
-      if (this.mapType === _mapEditorUtils.MAP_TYPES.B_MAP) {
-        let point = new window.BMap.Point(lng, lat);
-        const marker = new window.BMap.Marker(point, {
-          offset: new window.BMap.Size(-2, -5)
-        });
-        this.map && this.map.clearOverlays();
-        this.map && this.map.addOverlay(marker);
-      } else if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
-        if (!this.googleMarker) {
-          this.googleMarker = new window.google.maps.Marker({
-            position: {
-              lng,
-              lat
-            },
-            map: this.map
-          });
-          return;
-        }
-        this.googleMarker.setPosition({
-          lng,
-          lat
-        });
-      } else if (this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
-        if (!this.mineMapMarker) {
-          this.mineMapMarker = new window.minemap.Marker({
-            draggable: false,
-            anchor: 'top-left',
-            color: 'red',
-            rotation: 0,
-            pitchAlignment: 'map',
-            rotationAlignment: 'map',
-            scale: 0.8
-          }).setLngLat({
-            lng,
-            lat
-          }).addTo(this.map);
-        } else {
-          this.mineMapMarker.setLngLat({
-            lng,
-            lat
-          });
-        }
-      }
-    };
-    this.onChange = e => {
-      const inputValue = e.target.value;
-      this.setState({
-        inputValue
-      });
-      const enSplitCodeIndex = inputValue.indexOf(',');
-      const cnSplitCodeIndex = inputValue.indexOf('，');
-      if (enSplitCodeIndex > 0 || cnSplitCodeIndex > 0) {
-        let lng;
-        let lat;
-        const splitCodeIndex = enSplitCodeIndex > 0 ? enSplitCodeIndex : cnSplitCodeIndex;
-        if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
-          lat = parseFloat(inputValue.slice(0, splitCodeIndex).trim());
-          lng = parseFloat(inputValue.slice(splitCodeIndex + 1).trim());
-        } else {
-          lng = parseFloat(inputValue.slice(0, splitCodeIndex).trim());
-          lat = parseFloat(inputValue.slice(splitCodeIndex + 1).trim());
-        }
-        if (!Number.isNaN(lng) && !Number.isNaN(lat)) {
-          this.setState({
-            value: {
-              lng,
-              lat
-            }
-          }, () => {
-            this.props.setValue(this.state.value);
-          });
-          if (this.map) {
-            if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP || this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
-              this.map.setCenter({
-                lng,
-                lat
-              });
-            } else {
-              this.map.setCenter(new window.BMap.Point(lng, lat));
-            }
-          }
-          this.addMarkerByPosition(lng, lat);
-        }
-      }
-    };
-    this.onKeyDown = event => {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      if (event.keyCode === _constants.KeyCodes.Enter) {
-        this.onSubmit();
-      }
-    };
-    this.clearSearchNumerical = () => {
-      this.setState({
-        inputValue: '',
-        value: {}
-      });
-    };
-    this.onSubmit = () => {
-      const {
-        value
-      } = this.state;
-      this.props.setValue(value);
-      this.props.onSubmit();
-    };
-    this.onZoomIn = () => {
-      if (!this.map) return;
-      const currentZoom = this.map.getZoom();
-      this.map.setZoom(currentZoom + 1);
-    };
-    this.onZoomOut = () => {
-      if (!this.map) return;
-      const currentZoom = this.map.getZoom();
-      this.map.setZoom(currentZoom - 1);
-    };
-    this.onLocateCurrentPosition = () => {
-      (0, _mapEditorUtils.locateCurrentPosition)(this.map, this.mapType, this.geolocationCallback);
-    };
-    this.toggle = event => {
-      event.preventDefault();
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      const {
-        value
-      } = this.state;
-      this.props.setValue(value);
-      this.props.toggleFullScreen(event);
-    };
-    // Because GeolocationItem component add a click event to document, so we need to stop propagation
-    this.handlerClick = e => {
-      e.nativeEvent.stopImmediatePropagation();
-      e.stopPropagation();
-    };
-    const {
-      readOnly,
-      config
-    } = props;
-    const _value = props.value || {};
-    this.readOnly = readOnly;
-    const {
-      mapType,
-      mapKey
-    } = (0, _mapEditorUtils.getMapInfo)(config);
-    this.mapType = mapType;
-    this.mapKey = mapKey;
-    const {
-      lng: _lng,
-      lat: _lat
-    } = _value;
-    const _inputValue = (0, _cell.isValidPosition)(_lng, _lat) ? _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? "".concat(_lng, ", ").concat(_lat) : "".concat(_lat, ", ").concat(_lng) : '';
-    this.map = null;
-    this.state = {
-      isLoading: true,
-      value: props.value,
-      inputValue: _inputValue
-    };
-  }
-  componentDidMount() {
-    if (this.mapType === _mapEditorUtils.MAP_TYPES.B_MAP) {
-      if (!window.BMap) {
-        window.renderBaiduMap = () => this.renderBaiduMap();
-        (0, _mapEditorUtils.loadMapSource)(this.mapType, this.mapKey);
-      } else {
-        this.renderBaiduMap();
-      }
-      return;
-    } else if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
-      if (!window.google) {
-        window.renderGoogleMap = () => this.renderGoogleMap();
-        (0, _mapEditorUtils.loadMapSource)(this.mapType, this.mapKey);
-      } else {
-        this.renderGoogleMap();
-      }
-      return;
-    } else if (this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
-      if (!window.minemap) {
-        (0, _mapEditorUtils.loadMapSource)(this.mapType, this.mapKey, this.loadMineMapCallBack);
-      } else {
-        this.renderMineMap();
-      }
-      return;
-    }
-  }
-  componentWillUnmount() {
-    let center = {};
-    if (this.map && _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType)) {
-      center.zoom = this.map.getZoom();
-      let coordinate = this.map.getCenter();
-      center.lng = coordinate.lng;
-      center.lat = coordinate.lat;
-      this.mineMapMarker = null;
-    } else if (this.map && this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
-      let zoom = this.map.getZoom();
-      let coordinate = this.map.getCenter();
-      center.zoom = zoom;
-      center.lat = coordinate.lat();
-      center.lng = coordinate.lng();
-      this.googleMarker = null;
-    }
-    localStorage.setItem('geolocation-map-center', JSON.stringify(center));
-    this.map = null;
-  }
-  render() {
-    const {
-      isLoading,
-      inputValue
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
-      size: "lg",
-      isOpen: true,
-      toggle: this.toggle,
-      className: "dtable-ui-large-map-editor-dialog"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-map-editor-header",
-      onClick: this.handlerClick
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-map-editor-logo"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-font dtable-icon-location"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "ml-2 dtable-ui-geolocation-map-editor-title"
-    }, (0, _lang.getLocale)('Address'))), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-geolocation-map-editor-screen dtable-font dtable-icon-full-screen",
-      onClick: this.toggle
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-map-editor-large",
-      onClick: this.handlerClick
-    }, !this.readOnly && /*#__PURE__*/_react.default.createElement("div", {
-      className: "map-editor-header"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "search-tables-container"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      value: inputValue,
-      onKeyDown: this.onKeyDown,
-      onChange: this.onChange,
-      className: "form-control search-tables-input",
-      placeholder: _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? (0, _lang.getLocale)('Enter_longitude_and_latitude') : (0, _lang.getLocale)('Enter_latitude_and_longitude'),
-      autoFocus: true
-    }), inputValue && /*#__PURE__*/_react.default.createElement("span", {
-      className: "clear-search-numerical dtable-font dtable-icon-x-",
-      onClick: this.clearSearchNumerical
-    })), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-geolocation-submit-map-editor",
-      onClick: this.onSubmit
-    }, (0, _lang.getLocale)('Submit'))), /*#__PURE__*/_react.default.createElement("div", {
-      className: this.readOnly ? 'geolocation-map-read-only-container' : 'geolocation-map-container-large'
-    }, this.mapType && isLoading && /*#__PURE__*/_react.default.createElement(_Loading.default, null), !this.mapType && /*#__PURE__*/_react.default.createElement("div", {
-      className: "error-message d-flex justify-content-center mt-9"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "alert-danger"
-    }, (0, _lang.getLocale)('The_map_plugin_is_not_properly_configured_contact_the_administrator'))), !isLoading && this.mapType && /*#__PURE__*/_react.default.createElement("div", {
-      className: "w-100 h-100",
-      ref: ref => this.ref = ref,
-      id: "geolocation-map-container-large"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-map-controller"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-locate-control",
-      onClick: this.onLocateCurrentPosition
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-current-location"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-zoom-control"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-zoom-control-btn",
-      onClick: this.onZoomIn
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-enlarge"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-geolocation-zoom-control-btn",
-      onClick: this.onZoomOut
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      "aria-hidden": "true",
-      className: "dtable-font dtable-icon-narrow"
-    }))))));
-  }
-}
-var _default = exports.default = LargeMapEditorDialog;

package/lib/GeolocationEditor/map-editor-utils.js

@@ -1,153 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.locateCurrentPosition = exports.loadMapSource = exports.getMineMapUrl = exports.getMapInfo = exports.getInitCenter = exports.MAP_TYPES = exports.DOMESTIC_MAP_TYPE = void 0;
-const MAP_TYPES = exports.MAP_TYPES = {
-  B_MAP: 'b_map',
-  // baidu
-  G_MAP: 'g_map',
-  // google
-  M_MAP: 'm_map' // mineMap
-};
-
-// domestic map's format: [lng, lat], foreign map's format: [lat, lng]
-const DOMESTIC_MAP_TYPE = exports.DOMESTIC_MAP_TYPE = [MAP_TYPES.B_MAP, MAP_TYPES.M_MAP];
-const MINE_MAP_ONLINE_SERVICE = {
-  DOMAIN_URL: 'https://minemap.minedata.cn',
-  DATA_DOMAIN_URL: 'https://minemap.minedata.cn',
-  SERVER_DOMAIN_URL: 'https://sd-data.minedata.cn',
-  SPRITE_URL: 'https://minemap.minedata.cn/minemapapi/v2.1.1/sprite/sprite',
-  SERVICE_URL: 'https://service.minedata.cn/service'
-};
-const getMineMapUrl = function () {
-  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    dtableMineMapCustomConfig = {}
-  } = {
-    ...window.dtable,
-    ...config
-  };
-  const {
-    domain_url = '',
-    data_domain_url = '',
-    server_domain_url = '',
-    sprite_url = '',
-    service_url = ''
-  } = dtableMineMapCustomConfig;
-  return {
-    domainUrl: domain_url || MINE_MAP_ONLINE_SERVICE.DOMAIN_URL,
-    dataDomainUrl: data_domain_url || MINE_MAP_ONLINE_SERVICE.DATA_DOMAIN_URL,
-    serverDomainUrl: server_domain_url || MINE_MAP_ONLINE_SERVICE.SERVER_DOMAIN_URL,
-    spriteUrl: sprite_url || MINE_MAP_ONLINE_SERVICE.SPRITE_URL,
-    serviceUrl: service_url || MINE_MAP_ONLINE_SERVICE.SERVICE_URL
-  };
-};
-exports.getMineMapUrl = getMineMapUrl;
-const getInitCenter = function () {
-  let isSelectionEditor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  // set beijing as default map center
-  let lng = 116.404;
-  let lat = 39.915;
-  let zoom = 5;
-  let center = isSelectionEditor ? localStorage.getItem('geolocation-map-selection-center') : localStorage.getItem('geolocation-map-center');
-  if (center) {
-    center = JSON.parse(center);
-    lng = center.lng || lng;
-    lat = center.lat || lat;
-    zoom = center.zoom || zoom;
-  }
-  return {
-    lng,
-    lat,
-    zoom
-  };
-};
-exports.getInitCenter = getInitCenter;
-const getMapInfo = function () {
-  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    dtableBaiduMapKey: baiduMapKey,
-    dtableGoogleMapKey: googleMapKey,
-    dtableMineMapKey: mineMapKey
-  } = {
-    ...window.dtable,
-    ...config
-  };
-  let mapType;
-  let mapKey;
-  if (baiduMapKey) {
-    mapType = MAP_TYPES.B_MAP;
-    mapKey = baiduMapKey;
-  } else if (googleMapKey) {
-    mapType = MAP_TYPES.G_MAP;
-    mapKey = googleMapKey;
-  } else if (mineMapKey) {
-    mapType = MAP_TYPES.M_MAP;
-    mapKey = mineMapKey;
-  }
-  return {
-    mapType,
-    mapKey
-  };
-};
-exports.getMapInfo = getMapInfo;
-const loadMapSource = (mapType, mapKey, callback) => {
-  if (!mapType || !mapKey) return;
-  let scriptUrl = '';
-  let script = document.createElement('script');
-  script.type = 'text/javascript';
-  if (mapType === MAP_TYPES.B_MAP) {
-    scriptUrl = "https://api.map.baidu.com/api?v=3.0&ak=".concat(mapKey, "}&callback=renderBaiduMap");
-  } else if (mapType === MAP_TYPES.G_MAP) {
-    scriptUrl = "https://maps.googleapis.com/maps/api/js?key=".concat(mapKey, "&callback=renderGoogleMap&libraries=&v=weekly");
-  } else {
-    scriptUrl = 'https://minemap.minedata.cn/minemapapi/v2.1.1/minemap.js';
-    let link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.type = 'text/css';
-    link.href = 'https://minemap.minedata.cn/minemapapi/v2.1.1/minemap.css';
-    document.head.appendChild(link);
-  }
-  script.src = scriptUrl;
-  document.body.appendChild(script);
-  if (callback) callback();
-};
-exports.loadMapSource = loadMapSource;
-const locateCurrentPosition = (map, mapType, callback) => {
-  if (mapType === MAP_TYPES.B_MAP) {
-    const geolocation = new window.BMap.Geolocation();
-    geolocation.getCurrentPosition(result => {
-      if (result) {
-        const point = result.point;
-        map.setCenter(point);
-        callback(null, point);
-      } else {
-        // Positioning failed
-        callback(true);
-      }
-    });
-  } else {
-    if (window.navigator.geolocation) {
-      window.navigator.geolocation.getCurrentPosition(position => {
-        const lng = position.coords.longitude;
-        const lat = position.coords.latitude;
-        map.setCenter({
-          lng,
-          lat
-        });
-        callback(null, {
-          lng,
-          lat
-        });
-      }, e => {
-        // Positioning failed
-        callback(true);
-      }, {
-        timeout: 5000
-      });
-    }
-  }
-};
-exports.locateCurrentPosition = locateCurrentPosition;