dtable-ui-component 6.0.38-alpha.1 → 6.0.38

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _dtableUtils = require("dtable-utils");
 var _InputItem = _interopRequireDefault(require("../../../InputItem"));
 var _toaster = _interopRequireDefault(require("../../../toaster"));
 var _MobileFullScreenPage = _interopRequireDefault(require("../../../MobileFullScreenPage"));
@@ -184,8 +185,7 @@ class MapEditor extends _react.default.Component {
         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) => {
@@ -252,46 +252,14 @@ class MapEditor extends _react.default.Component {
       if (!_objectUtils.default.isSameObject(value, this.props.value)) {
         this.props.onCommit(value);
       }
+      const {
+        lng,
+        lat
+      } = this.getNumericValue(value);
+      const newValue = !(0, _dtableUtils.isNumber)(lng) || !(0, _dtableUtils.isNumber)(lat) ? null : value;
+      this.props.onCommit(newValue);
       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();
@@ -326,11 +294,65 @@ class MapEditor extends _react.default.Component {
     this.onClose = () => {
       this.props.onToggle();
     };
+    this.getNumericValue = value => {
+      const {
+        lng,
+        lat
+      } = value || {};
+      const numLng = typeof lng === 'string' ? parseFloat(lng.trim()) : lng;
+      const numLat = typeof lat === 'string' ? parseFloat(lat.trim()) : lat;
+      return {
+        lng: numLng,
+        lat: numLat
+      };
+    };
+    this.handleLatitudeChange = value => {
+      this.setState({
+        value: {
+          ...this.state.value,
+          lat: value
+        }
+      }, () => {
+        const numericValue = this.getNumericValue(this.state.value);
+        this.rerenderMapMarker(numericValue);
+      });
+    };
+    this.handleLongitudeChange = value => {
+      this.setState({
+        value: {
+          ...this.state.value,
+          lng: value
+        }
+      }, () => {
+        const numericValue = this.getNumericValue(this.state.value);
+        this.rerenderMapMarker(numericValue);
+      });
+    };
+    this.rerenderMapMarker = _ref => {
+      let {
+        lng,
+        lat
+      } = _ref;
+      if (!(0, _dtableUtils.isNumber)(lng) || !(0, _dtableUtils.isNumber)(lat)) {
+        return;
+      }
+      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.renderMap = () => {
       const {
         isLoading,
-        inputValue,
-        mode
+        mode,
+        value
       } = this.state;
       if (isLoading) return /*#__PURE__*/_react.default.createElement("div", {
         className: "w-100 h-100 d-flex align-items-center justify-content-center"
@@ -343,18 +365,36 @@ class MapEditor extends _react.default.Component {
         }, (0, _lang.getLocale)('The_map_plugin_is_not_properly_configured_contact_the_administrator')));
       }
       const isEdit = mode === 'edit';
+      const {
+        lat,
+        lng
+      } = value;
       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, {
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "view-subtitle"
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Latitude_abbr'))), /*#__PURE__*/_react.default.createElement(_InputItem.default, {
         type: "text",
         className: "dtable-ui-mobile-geolocation-map-editor-input",
         style: {
           marginTop: 0
         },
-        value: inputValue,
+        value: lat,
         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')
+        onChange: this.handleLatitudeChange,
+        placeholder: (0, _lang.getLocale)('Enter_latitude')
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: "view-subtitle"
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Longitude_abbr'))), /*#__PURE__*/_react.default.createElement(_InputItem.default, {
+        type: "text",
+        className: "dtable-ui-mobile-geolocation-map-editor-input",
+        style: {
+          marginTop: 0
+        },
+        value: lng,
+        editable: isEdit,
+        onChange: this.handleLongitudeChange,
+        placeholder: (0, _lang.getLocale)('Enter_longitude')
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: "dtable-ui-mobile-geolocation-map-editor-map"
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -384,23 +424,25 @@ class MapEditor extends _react.default.Component {
         className: "dtable-font dtable-icon-narrow"
       }))))));
     };
-    const _value = props.value || {};
+    const _value = props.value || {
+      lng: '',
+      lat: ''
+    };
     const {
       mapType,
       mapKey
     } = (0, _mapEditorUtils.getMapInfo)(props.config);
     this.mapType = mapType;
     this.mapKey = mapKey;
+    this.map = null;
     const {
       lng: _lng,
       lat: _lat
     } = _value;
-    this.map = null;
     this.state = {
-      mode: 'preview',
+      mode: (0, _cell.isValidPosition)(_lng, _lat) ? 'preview' : 'edit',
       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) : ''
+      value: _value
     };
   }
   componentDidMount() {

package/lib/GeolocationEditor/pc-editor/index.css

@@ -204,22 +204,22 @@
   width: 92%;
 }
 
-.dtable-ui-geolocation-map-editor .search-tables-input {
+.dtable-ui-geolocation-map-editor .selection-input {
   padding-right: 30px;
   border-bottom: 0;
   background: #fff;
-  border-radius: 3px;
   border: 1px solid #dedede;
-  box-shadow: 0 -0 12px rgb(0 0 0 / 30%);
-}
-
-.dtable-ui-geolocation-map-editor .search-tables-input.selection-input {
   width: 88%;
   box-shadow: 0 -0 2px rgb(0 0 0 / 30%);
   border-radius: 3px 0px 0px 3px;
   border-right: none;
 }
 
+.dtable-ui-geolocation-map-editor .selection-input:focus {
+  border-color: #bdbdbd;
+  box-shadow: 0 -0 3px rgb(0 0 0 / 30%);
+}
+
 .dtable-ui-geolocation-submit-map-editor {
   display: inline-block;
   height: 38px;
@@ -425,15 +425,6 @@
   text-align: center;
 }
 
-.dtable-ui-geolocation-map-editor .search-tables-input:focus {
-  border-color: #bdbdbd;
-  box-shadow: 0 -0 12px rgb(0 0 0 / 30%);
-}
-
-.dtable-ui-geolocation-map-editor .selection-input:focus {
-  box-shadow: 0 -0 3px rgb(0 0 0 / 30%);
-}
-
 .dtable-ui-geolocation-map-editor-error-message {
   word-break: break-all;
   padding: 10px;

package/lib/GeolocationEditor/pc-editor/index.js

@@ -157,7 +157,8 @@ class PCGeolocationEditor extends _react.default.Component {
         config,
         column,
         getCountryData,
-        getLocationData
+        getLocationData,
+        toggleLargeMap
       } = this.props;
       const props = {
         column,
@@ -171,12 +172,14 @@ class PCGeolocationEditor extends _react.default.Component {
         case _dtableUtils.GEOLOCATION_FORMAT.LNG_LAT:
           {
             return /*#__PURE__*/_react.default.createElement(_mapEditor.default, Object.assign({}, props, {
+              toggleLargeMap: toggleLargeMap,
               ref: ref => this.editor = ref
             }));
           }
         case _dtableUtils.GEOLOCATION_FORMAT.MAP_SELECTION:
           {
             return /*#__PURE__*/_react.default.createElement(_mapSelectionEditor.default, Object.assign({}, props, {
+              toggleLargeMap: toggleLargeMap,
               ref: ref => this.editor = ref
             }));
           }

package/lib/GeolocationEditor/pc-editor/map-editor/index.css

@@ -0,0 +1,33 @@
+.dtable-ui-geolocation-map-lng-lat-editor-header {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.dtable-ui-geolocation-map-lng-lat-editor-header .dtable-ui-geolocation-map-lng-lat-input-container {
+  display: flex;
+  flex: 1 1;
+}
+
+.dtable-ui-geolocation-map-lng-lat-input-label {
+  align-items: center;
+  background-color: #f8f9fa;
+  border: 1px solid #0028641f;
+  border-bottom-left-radius: 3px;
+  border-right: none;
+  border-top-left-radius: 3px;
+  display: flex;
+  justify-content: center;
+  padding: .375rem .75rem;
+}
+
+.dtable-ui-geolocation-map-lng-lat-input-container input {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  flex: 1 1;
+  position: relative;
+  z-index: 0;
+}
+

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _dtableUtils = require("dtable-utils");
 var _toaster = _interopRequireDefault(require("../../../toaster"));
 var _Loading = _interopRequireDefault(require("../../../Loading"));
 var _constants = require("../../../constants");
@@ -14,9 +15,36 @@ var _cell = require("../../../utils/cell");
 var _mapEditorUtils = require("../../map-editor-utils");
 var _largeEditor = _interopRequireDefault(require("./large-editor"));
 var _lang = require("../../../lang");
+require("./index.css");
 class MapEditor extends _react.Component {
   constructor(props) {
     super(props);
+    this.initMap = () => {
+      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;
+      }
+    };
     this.loadMineMapCallBack = () => {
       if (!this.timer) {
         this.timer = setTimeout(() => {
@@ -171,16 +199,48 @@ class MapEditor extends _react.Component {
       });
     };
     this.setValue = point => {
+      const value = point ? {
+        lng: point.lng,
+        lat: point.lat
+      } : null;
       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)
+        value
       }, () => {
-        this.props.setValue(this.state.value);
+        const numericValue = this.getNumericValue(this.state.value);
+        this.setPropsValue(numericValue);
       });
     };
+    this.getNumericValue = value => {
+      const {
+        lng,
+        lat
+      } = value || {};
+      const numLng = typeof lng === 'string' ? parseFloat(lng.trim()) : lng;
+      const numLat = typeof lat === 'string' ? parseFloat(lat.trim()) : lat;
+      return {
+        lng: numLng,
+        lat: numLat
+      };
+    };
+    this.setPropsValue = _ref => {
+      let {
+        lng,
+        lat
+      } = _ref;
+      if (!(0, _dtableUtils.isNumber)(lng) || !(0, _dtableUtils.isNumber)(lat)) {
+        this.props.setValue(null);
+        return;
+      }
+      const newValue = {
+        lng,
+        lat
+      };
+      this.setState({
+        value: newValue
+      });
+      this.props.setValue(newValue);
+      this.rerenderMapMarker(newValue);
+    };
     this.addMarkerByPosition = (lng, lat) => {
       if (this.mapType === _mapEditorUtils.MAP_TYPES.B_MAP) {
         let point = new window.BMap.Point(lng, lat);
@@ -233,62 +293,60 @@ class MapEditor extends _react.Component {
       const {
         value
       } = this.state;
-      this.props.setValue(value);
+      const numericValue = this.getNumericValue(value);
+      this.setPropsValue(numericValue);
       this.setState({
         isShowLargeEditor: !this.state.isShowLargeEditor
-      });
-    };
-    this.clearSearchNumerical = () => {
-      this.setState({
-        inputValue: '',
-        value: {}
+      }, () => {
+        const nextState = this.state.isShowLargeEditor;
+        if (!nextState) {
+          this.initMap();
+        }
+        this.props.toggleLargeMap && this.props.toggleLargeMap(nextState);
       });
     };
     this.onSubmit = () => {
-      const {
-        value
-      } = this.state;
-      this.props.setValue(value);
       this.props.onSubmit();
     };
-    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.rerenderMapMarker = _ref2 => {
+      let {
+        lng,
+        lat
+      } = _ref2;
+      if (!(0, _dtableUtils.isNumber)(lng) || !(0, _dtableUtils.isNumber)(lat)) return;
+      if (this.map) {
+        if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP || this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
+          this.map.setCenter({
+            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);
+        } else {
+          this.map.setCenter(new window.BMap.Point(lng, lat));
         }
       }
+      this.addMarkerByPosition(lng, lat);
+    };
+    this.onChangeLatitude = event => {
+      this.setState({
+        value: {
+          ...this.state.value,
+          lat: event.target.value
+        }
+      }, () => {
+        const numericValue = this.getNumericValue(this.state.value);
+        this.setPropsValue(numericValue);
+      });
+    };
+    this.onChangeLongitude = event => {
+      this.setState({
+        value: {
+          ...this.state.value,
+          lng: event.target.value
+        }
+      }, () => {
+        const numericValue = this.getNumericValue(this.state.value);
+        this.setPropsValue(numericValue);
+      });
     };
     this.onKeyDown = event => {
       event.stopPropagation();
@@ -310,7 +368,10 @@ class MapEditor extends _react.Component {
     this.onLocateCurrentPosition = () => {
       (0, _mapEditorUtils.locateCurrentPosition)(this.map, this.mapType, this.geolocationCallback);
     };
-    const _value = props.value || {};
+    const _value = props.value || {
+      lng: '',
+      lat: ''
+    };
     const {
       mapType,
       mapKey
@@ -318,44 +379,15 @@ class MapEditor extends _react.Component {
     this.mapType = mapType;
     this.mapKey = mapKey;
     this.readOnly = props.readOnly;
-    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,
+      value: _value,
       isShowLargeEditor: false
     };
   }
   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;
-    }
+    this.initMap();
   }
   componentWillUnmount() {
     let center = {};
@@ -376,13 +408,16 @@ class MapEditor extends _react.Component {
     localStorage.setItem('geolocation-map-center', JSON.stringify(center));
     this.map = null;
     this.props.toggleLargeMap && this.props.toggleLargeMap(false);
+    this.onSubmit();
   }
   render() {
     const {
       isLoading,
-      inputValue,
+      value,
       isShowLargeEditor
     } = this.state;
+    const lat = value ? value.lat : '';
+    const lng = value ? value.lng : '';
     if (!isShowLargeEditor) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: "dtable-ui-geolocation-map-editor-header"
@@ -398,24 +433,31 @@ class MapEditor extends _react.Component {
       })), /*#__PURE__*/_react.default.createElement("div", {
         className: "dtable-ui-geolocation-map-editor"
       }, !this.readOnly && /*#__PURE__*/_react.default.createElement("div", {
-        className: "map-editor-header"
+        className: "dtable-ui-geolocation-map-lng-lat-editor-header"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-geolocation-map-lng-lat-input-container map-lat-input-container"
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "search-tables-container"
-      }, /*#__PURE__*/_react.default.createElement("input", {
+        className: "dtable-ui-geolocation-map-lng-lat-input-label"
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Latitude_abbr'))), /*#__PURE__*/_react.default.createElement("input", {
         type: "text",
-        value: inputValue,
+        value: lat,
+        onChange: this.onChangeLatitude,
         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'),
+        className: "form-control",
+        placeholder: (0, _lang.getLocale)('Enter_latitude'),
         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", {
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-geolocation-map-lng-lat-input-container map-lng-input-container"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui-geolocation-map-lng-lat-input-label"
+      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Longitude_abbr'))), /*#__PURE__*/_react.default.createElement("input", {
+        type: "text",
+        value: lng,
+        onChange: this.onChangeLongitude,
+        onKeyDown: this.onKeyDown,
+        className: "form-control",
+        placeholder: (0, _lang.getLocale)('Enter_longitude')
+      }))), /*#__PURE__*/_react.default.createElement("div", {
         className: this.readOnly ? 'geolocation-map-read-only-container' : 'geolocation-map-container'
       }, 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"
@@ -449,6 +491,8 @@ class MapEditor extends _react.Component {
       }))))));
     }
     return /*#__PURE__*/_react.default.createElement(_largeEditor.default, Object.assign({}, this.props, {
+      value: value,
+      setValue: this.setValue,
       toggleFullScreen: this.toggleFullScreen
     }));
   }