dtable-ui-component 5.3.1-beta → 5.3.1

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

@@ -1,447 +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 _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;