dtable-ui-component 5.3.6 → 5.3.7

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

@@ -0,0 +1,447 @@
+"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 _dtableUtils = require("dtable-utils");
+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 LargeMapSelectionEditorDialog extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.renderBaiduMap = () => {
+      this.setState({
+        isLoading: false
+      }, () => {
+        if (!window.BMap.Map) return;
+        this.map = new window.BMap.Map('geolocation-map-selection-container-large', {
+          enableMapClick: false
+        });
+        let {
+          lng,
+          lat,
+          zoom
+        } = (0, _mapEditorUtils.getInitCenter)(true);
+        const {
+          value
+        } = this.state;
+        const {
+          lngLat
+        } = value;
+        if ((0, _cell.isValidPosition)(lngLat === null || lngLat === void 0 ? void 0 : lngLat.lng, lngLat === null || lngLat === void 0 ? void 0 : lngLat.lat)) {
+          lng = lngLat.lng;
+          lat = lngLat.lat;
+          this.addMarkerByPosition(value);
+        }
+        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 => {
+          if (this.state.searchResults.length > 0) {
+            this.setState({
+              searchResults: []
+            });
+            return;
+          }
+          let value = {};
+          const point = event.point;
+          const geoCoder = new window.BMap.Geocoder();
+          geoCoder.getLocation(point, result => {
+            const {
+              surroundingPois,
+              address,
+              point
+            } = result;
+            if (surroundingPois.length === 0) {
+              value.address = address;
+              value.lngLat = {
+                lng: point.lng,
+                lat: point.lat
+              };
+              value.tag = [];
+              value.title = '';
+            } else {
+              const position = surroundingPois[0];
+              const {
+                address,
+                title,
+                tags,
+                point
+              } = position;
+              value.address = address || '';
+              value.title = title || '';
+              value.tag = tags || [];
+              value.lngLat = {
+                lng: point.lng,
+                lat: point.lat
+              };
+            }
+            this.addMarkerByPosition(value);
+          });
+        });
+      });
+    };
+    this.addMarkerByPosition = value => {
+      const {
+        lngLat
+      } = value;
+      let point = new window.BMap.Point(lngLat.lng, lngLat.lat);
+      const marker = new window.BMap.Marker(point, {
+        offset: new window.BMap.Size(-2, -5)
+      });
+      if (this.map) {
+        this.map.clearOverlays();
+        const content = this.getLabelContent(value);
+        const translateY = value.title ? '30%' : '45%';
+        const label = new window.BMap.Label(content, {
+          offset: new window.BMap.Size(9, -5)
+        });
+        label.setStyle({
+          display: 'block',
+          border: 'none',
+          backgroundColor: '#ffffff',
+          boxShadow: '1px 2px 1px rgba(0,0,0,.15)',
+          padding: '3px 10px',
+          transform: "translate(-50%, ".concat(translateY, ")"),
+          borderRadius: '3px',
+          fontWeight: '500',
+          left: '7px'
+        });
+        marker.setLabel(label);
+        this.map.addOverlay(marker);
+        this.map.centerAndZoom(point, 10);
+        this.addLabelEventListener(marker, value);
+      }
+    };
+    this.addLabelEventListener = (marker, value) => {
+      if (this.map) {
+        setTimeout(() => {
+          const label = document.getElementById('dtable-ui-selection-label-content');
+          label.addEventListener('click', e => {
+            e.stopPropagation();
+          });
+          const closeElement = document.getElementById('selection-label-close');
+          closeElement.addEventListener('click', e => {
+            e.stopPropagation();
+            marker.getLabel().remove();
+            this.map.clearOverlays();
+          });
+          const submitElement = document.getElementById('selection-label-submit');
+          submitElement.addEventListener('click', e => {
+            e.stopPropagation();
+            // submit value
+            this.props.setValue(value);
+            this.props.onSubmit();
+          });
+        }, 10);
+      }
+    };
+    this.getLabelContent = value => {
+      const {
+        address,
+        title,
+        tag
+      } = value;
+      const tagContent = Array.isArray(tag) && tag.length > 0 ? tag[0] : '';
+      if (title) {
+        return "\n          <div class='dtable-ui-selection-label-content' id='dtable-ui-selection-label-content'>\n            <i class='dtable-font dtable-icon-down3'></i>\n            <span class='label-title text-truncate' title=".concat(title, ">").concat(title, "</span>\n            ").concat(tagContent && "<span class='label-tag'>".concat(tagContent, "</span>"), "\n            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>\n            <span class='label-address-tip'>").concat((0, _lang.getLocale)('Address'), "</span>\n            <span class='label-address text-truncate' title=").concat(address, ">").concat(address, "</span>\n            <div class='label-submit btn btn-primary' id='selection-label-submit'>").concat((0, _lang.getLocale)('Fill_in'), "</div>\n          </div>\n        ");
+      } else {
+        return "\n          <div class='dtable-ui-selection-label-content simple' id='dtable-ui-selection-label-content'>\n            <i class='dtable-font dtable-icon-down3'></i>\n            <span class='dtable-font dtable-icon-x' id='selection-label-close'></span>\n            <span class='label-address text-truncate simple' title=".concat(address, ">").concat(address, "</span>\n            <div class='label-submit btn btn-primary' id='selection-label-submit'>").concat((0, _lang.getLocale)('Fill_in'), "</div>\n          </div>\n        ");
+      }
+    };
+    this.getInitValue = () => {
+      const {
+        value
+      } = this.props;
+      if (!value || (0, _dtableUtils.isEmptyObject)(value)) {
+        return {
+          address: '',
+          title: '',
+          tag: '',
+          point: {}
+        };
+      }
+      return value;
+    };
+    this.onSearch = () => {
+      const {
+        inputValue
+      } = this.state;
+      let options = {
+        onSearchComplete: results => {
+          const status = local.getStatus();
+          if (status !== window.BMAP_STATUS_SUCCESS) {
+            _toaster.default.danger((0, _lang.getLocale)('Search_failed_please_enter_detailed_address'));
+            return;
+          }
+          let searchResults = [];
+          for (let i = 0; i < results.getCurrentNumPois(); i++) {
+            const value = results.getPoi(i);
+            let position = {};
+            position.address = value.address || '';
+            position.title = value.title || '';
+            position.tag = value.tags || [];
+            position.lngLat = {
+              lng: value.point.lng,
+              lat: value.point.lat
+            };
+            searchResults.push(position);
+          }
+          this.setState({
+            searchResults
+          });
+        }
+      };
+      let local = new window.BMap.LocalSearch(this.map, options);
+      local.search(inputValue);
+    };
+    this.onChange = e => {
+      const inputValue = e.target.value;
+      this.setState({
+        inputValue
+      });
+    };
+    this.onKeyDown = event => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      if (event.keyCode === _constants.KeyCodes.Enter) {
+        this.onSearch();
+      } else if (event.keyCode === _constants.KeyCodes.Backspace) {
+        this.setState({
+          searchResults: []
+        });
+      }
+    };
+    this.onClickSelection = result => {
+      this.setState({
+        searchResults: []
+      }, () => {
+        this.addMarkerByPosition(result);
+      });
+    };
+    this.clearSearchNumerical = () => {
+      this.setState({
+        inputValue: '',
+        searchResults: []
+      });
+    };
+    this.toggle = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      const {
+        value
+      } = this.state;
+      this.props.setValue(value);
+      this.props.toggleFullScreen();
+    };
+    this.renderSearchResults = () => {
+      const {
+        searchResults
+      } = this.state;
+      if (searchResults.length === 0) return null;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "search-results-container"
+      }, searchResults.map((result, index) => {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "search-result-item",
+          key: index,
+          onClick: this.onClickSelection.bind(this, result)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "search-result-item-title"
+        }, result.title || ''), /*#__PURE__*/_react.default.createElement("span", {
+          className: "search-result-item-address"
+        }, result.address || ''));
+      }));
+    };
+    this.handlerClick = e => {
+      e.nativeEvent.stopImmediatePropagation();
+      e.stopPropagation();
+    };
+    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.geolocationCallback = (error, point) => {
+      if (!error) {
+        const geoCoder = new window.BMap.Geocoder();
+        geoCoder.getLocation(point, result => {
+          let value = {};
+          const {
+            surroundingPois,
+            address,
+            point
+          } = result;
+          if (surroundingPois.length === 0) {
+            value.address = address;
+            value.lngLat = {
+              lng: point.lng,
+              lat: point.lat
+            };
+            value.tag = [];
+            value.title = '';
+          } else {
+            const position = surroundingPois[0];
+            const {
+              address,
+              title,
+              tags,
+              point
+            } = position;
+            value.address = address || '';
+            value.title = title || '';
+            value.tag = tags || [];
+            value.lngLat = {
+              lng: point.lng,
+              lat: point.lat
+            };
+          }
+          this.addMarkerByPosition(value);
+        });
+      } else {
+        _toaster.default.danger((0, _lang.getLocale)('Positioning_failed'));
+      }
+    };
+    const {
+      readOnly,
+      config
+    } = props;
+    const _value = this.getInitValue();
+    const _inputValue = _value.title || _value.address || '';
+    const {
+      mapType,
+      mapKey
+    } = (0, _mapEditorUtils.getMapInfo)(config);
+    this.readOnly = readOnly;
+    this.state = {
+      isLoading: true,
+      value: _value,
+      inputValue: _inputValue,
+      searchResults: []
+    };
+    this.mapType = mapType;
+    this.mapKey = mapKey;
+    this.map = null;
+  }
+  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();
+      }
+      window.onSubmitSelection = this.onSubmitSelection;
+      return;
+    }
+  }
+  componentWillUnmount() {
+    if (this.mapType === _mapEditorUtils.MAP_TYPES.B_MAP) {
+      let center = {};
+      center.zoom = this.map.getZoom();
+      let coordinate = this.map.getCenter();
+      center.lng = coordinate.lng;
+      center.lat = coordinate.lat;
+      localStorage.setItem('geolocation-map-selection-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 selection-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 d-flex"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      value: inputValue,
+      onChange: this.onChange,
+      onKeyDown: this.onKeyDown,
+      className: "form-control search-tables-input selection-input-large",
+      placeholder: (0, _lang.getLocale)('Please_enter_the_address'),
+      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-search-selection-editor",
+      onClick: this.onSearch
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-search"
+    })))), /*#__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-selection-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"
+    })))), this.renderSearchResults()));
+  }
+}
+var _default = exports.default = LargeMapSelectionEditorDialog;