dtable-ui-component 6.0.29 → 6.0.31

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

@@ -0,0 +1,474 @@
+"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 _InputItem = _interopRequireDefault(require("../../../InputItem"));
+var _toaster = _interopRequireDefault(require("../../../toaster"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../../MobileFullScreenPage"));
+var _mapEditorUtils = require("../../map-editor-utils");
+var _cell = require("../../../utils/cell");
+var _lang = require("../../../lang");
+var _Loading = _interopRequireDefault(require("../../../Loading"));
+var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
+require("./index.css");
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
+class MapEditor 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;
+        setTimeout(() => {
+          this.map = new window.minemap.Map({
+            container: 'dtable-ui-mobile-geolocation-map-container',
+            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('mousedown', event => {
+            const point = event.lngLat;
+            this.setValue(point);
+            this.addMarkerByPosition(point.lng, point.lat);
+          });
+        }, 1);
+      });
+    };
+    this.renderBaiduMap = () => {
+      this.setState({
+        isLoading: false
+      }, () => {
+        if (!window.BMap.Map) return;
+        setTimeout(() => {
+          this.map = new window.BMap.Map('dtable-ui-mobile-geolocation-map-container');
+          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);
+          }
+          const point = new window.BMap.Point(lng, lat);
+          this.map.centerAndZoom(point, zoom);
+          this.map.enableScrollWheelZoom(true);
+          this.map.addEventListener('click', event => {
+            if (this.state.mode === 'preview') return;
+            const point = event.point;
+            this.setValue(point);
+            this.addMarkerByPosition(point.lng, point.lat);
+          });
+        }, 1);
+      });
+    };
+    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.renderGoogleMap = () => {
+      this.setState({
+        isLoading: false
+      }, () => {
+        setTimeout(() => {
+          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('mousedown', event => {
+            const lng = event.latLng.lng();
+            const lat = event.latLng.lat();
+            const point = {
+              lng,
+              lat
+            };
+            this.setValue(point);
+            this.addMarkerByPosition(lng, lat);
+          });
+        }, 1);
+      });
+    };
+    this.setValue = point => {
+      this.setState({
+        value: {
+          lng: point.lng,
+          lat: point.lat
+        },
+        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);
+        return;
+      }
+      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
+        });
+        this.googleMarker.setMap(this.map);
+        return;
+      }
+      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
+          });
+        }
+        return;
+      }
+    };
+    this.clearSearchNumerical = () => {
+      this.setState({
+        inputValue: '',
+        value: {}
+      });
+    };
+    this.onSubmit = () => {
+      const {
+        value
+      } = this.state;
+      if (!_objectUtils.default.isSameObject(value, this.props.value)) {
+        this.props.onCommit(value);
+      }
+      this.onClose();
+    };
+    this.onChange = inputValue => {
+      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
+            }
+          });
+          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.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.onLeftClick = () => {
+      if (this.state.mode === 'preview') {
+        this.onClose();
+        return;
+      }
+      this.setState({
+        mode: 'preview'
+      });
+    };
+    this.onRightClick = () => {
+      if (this.state.mode === 'preview') {
+        this.setState({
+          mode: 'edit'
+        });
+        return;
+      }
+      this.onSubmit();
+    };
+    this.onClose = () => {
+      this.props.onToggle();
+    };
+    this.renderMap = () => {
+      const {
+        isLoading,
+        inputValue,
+        mode
+      } = this.state;
+      if (isLoading) return /*#__PURE__*/_react.default.createElement("div", {
+        className: "w-100 h-100 d-flex align-items-center justify-content-center"
+      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
+      if (!this.mapType) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "dtable-ui-geolocation-map-editor-error-message d-flex justify-content-center  align-items-center w-100 h-100"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "alert-danger"
+        }, (0, _lang.getLocale)('The_map_plugin_is_not_properly_configured_contact_the_administrator')));
+      }
+      const isEdit = mode === 'edit';
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-mobile-geolocation-map-editor-input-container"
+      }, /*#__PURE__*/_react.default.createElement(_InputItem.default, {
+        type: "text",
+        className: "dtable-ui-mobile-geolocation-map-editor-input",
+        style: {
+          marginTop: 0
+        },
+        value: inputValue,
+        editable: isEdit,
+        onChange: this.onChange,
+        placeholder: _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? (0, _lang.getLocale)('Enter_longitude_and_latitude') : (0, _lang.getLocale)('Enter_latitude_and_longitude')
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-mobile-geolocation-map-editor-map"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "w-100 h-100",
+        ref: ref => this.ref = ref,
+        id: "dtable-ui-mobile-geolocation-map-container"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-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"
+      }))))));
+    };
+    const _value = props.value || {};
+    const {
+      mapType,
+      mapKey
+    } = (0, _mapEditorUtils.getMapInfo)(props.config);
+    this.mapType = mapType;
+    this.mapKey = mapKey;
+    const {
+      lng: _lng,
+      lat: _lat
+    } = _value;
+    this.map = null;
+    this.state = {
+      mode: 'preview',
+      isLoading: true,
+      value: _value,
+      inputValue: (0, _cell.isValidPosition)(_lng, _lat) ? _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? "".concat(_lng, ", ").concat(_lat) : "".concat(_lat, ", ").concat(_lng) : ''
+    };
+  }
+  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;
+    }
+    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;
+    }
+    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 {
+      column
+    } = this.props;
+    const {
+      mode
+    } = this.state;
+    const isEdit = mode === 'edit';
+    return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+      className: "dtable-ui-mobile-geolocation-map-editor",
+      onClose: this.onClose
+    }, /*#__PURE__*/_react.default.createElement(Header, {
+      onLeftClick: this.onLeftClick,
+      onRightClick: this.onRightClick
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isEdit ? (0, _lang.getLocale)('Cancel') : (0, _lang.getLocale)('Close')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: '#f09f3f'
+      }
+    }, isEdit ? (0, _lang.getLocale)('Submit') : (0, _lang.getLocale)('Edit'))), /*#__PURE__*/_react.default.createElement(Body, null, this.renderMap()));
+  }
+}
+var _default = exports.default = MapEditor;

package/lib/GeolocationEditor/mb-editor/map-selection-editor/index.css

@@ -0,0 +1,158 @@
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-input-container {
+  display: flex;
+  background: #fff;
+  align-items: center;
+  padding: 7px 20px;
+  height: 44px;
+  width: 100%;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-input {
+  height: 30px !important;
+  min-height: unset;
+  border: 1px solid #ddd;
+  width: 86%;
+  border-radius: 3px 0 0 3px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-input input {
+  font-size: 16px !important;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-search-btn {
+  height: 30px;
+  width: 14%;
+  border: 1px solid #ddd;
+  border-left: none;
+  border-radius: 0 3px 3px 0;
+  padding: unset;
+  box-shadow: unset;
+  color: #666;
+  background-color: #f5f5f5;
+  font-size: 0.875rem;
+  line-height: 1.8;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-map {
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+
+/* search results */
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-map-selection-editor-search-results {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #fff;
+  border-top: 1px solid #eee;
+  overflow-y: scroll;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-map-selection-editor-search-result {
+  height: 56px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-map-selection-editor-search-result {
+  height: 56px;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 8px 16px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-map-selection-editor-search-result-title {
+  font-size: 14px
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-map-selection-editor-search-result-address {
+  color: #666;
+  font-size: 12px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-map-selection-editor-search-result span {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-map-selection-editor-search-result:last-child {
+  border-bottom: none;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label {
+  width: 100%;
+  min-height: 120px;
+  height: fit-content;
+  background-color: #fff;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label.simple {
+  min-height: 95px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label-title {
+  display: block;
+  width: 85%;
+  margin-left: 15px;
+  margin-top: 10px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label .dtable-icon-x {
+  position: absolute;
+  right: 10px;
+  top: 5px;
+  font-size: 18px;
+  color: #666;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label-address-tip {
+  display: block;
+  margin-left: 15px;
+  margin-top: 0.25rem;
+  color: #666;
+  font-size: 12px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label-tag {
+  margin-left: 15px;
+  font-size: 12px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label-address {
+  width: 77%;
+  display: block;
+  margin-left: 15px;
+  margin-bottom: 1.5rem;
+  font-size: 14px;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label-address.simple {
+  margin-top: 2rem;
+}
+
+.dtable-ui-mobile-geolocation-map-selection-editor .dtable-ui-mobile-geolocation-map-editor-label-btn {
+  position: absolute;
+  right: 10px;
+  bottom: 1rem;
+  font-weight: normal;
+}