dtable-ui-component 6.0.36 → 6.0.37-beta

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

@@ -1,9 +1,12 @@
 .dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-input-container {
-  height: 60px;
-  padding-top: 16px;
+  height: auto;
   width: 100%;
 }
 
+.dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-input-container .view-subtitle:first-child {
+  border-top: 0;
+}
+
 .dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-map {
   flex: 1;
   overflow: hidden;

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

@@ -184,8 +184,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) => {
@@ -329,8 +328,8 @@ class MapEditor extends _react.default.Component {
     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 +342,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: lat,
+        editable: isEdit,
+        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: inputValue,
+        value: lng,
         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.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 +401,21 @@ 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;
-    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) : ''
+      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(() => {
@@ -175,12 +203,43 @@ class MapEditor extends _react.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.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(this.props.value);
+        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 +292,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 +367,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 +378,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 +407,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 +432,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 +490,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
     }));
   }

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

@@ -12,10 +12,13 @@
   width: 100%;
   flex: 1;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .dtable-ui-large-map-editor-dialog .geolocation-map-container-large {
-  height: 100%;
+  flex: 1;
+  overflow: hidden;
   display: flex;
   align-items: center;
   text-align: center;
@@ -50,14 +53,19 @@
   position: relative;
 }
 
-.dtable-ui-large-map-editor-dialog .dtable-ui-geolocation-map-editor-large .search-tables-input {
-  line-height: 38px;
+.dtable-ui-large-map-editor-dialog .selection-input-large {
   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%);
+  border-right: none;
+  border-radius: 2px 0 0 2px;
+  box-shadow: 0 -0 2px rgb(0 0 0 / 30%);
+  width: 415px;
+}
+
+.dtable-ui-large-map-editor-dialog .selection-input-large:focus {
+  box-shadow: 0 0 3px #0000004d;
 }
 
 .clear-search-numerical {
@@ -77,12 +85,6 @@
   box-shadow: 0 -0 12px rgb(0 0 0 / 30%);
 }
 
-.dtable-ui-geolocation-map-editor-large .search-tables-input.selection-input-large {
-  width: 415px;
-  box-shadow: 0 -0 2px rgb(0 0 0 / 30%);
-  border-radius: 2px 0px 0px 2px;
-}
-
 .dtable-ui-geolocation-map-editor-large .selection-input-large:focus {
   box-shadow: 0 -0 3px rgb(0 0 0 / 30%);
 }

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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");
@@ -168,14 +169,42 @@ class LargeMapEditorDialog extends _react.default.Component {
         _toaster.default.danger((0, _lang.getLocale)('Positioning_failed'));
       }
     };
+    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(this.props.value);
+        return;
+      }
+      this.props.setValue({
+        lng,
+        lat
+      });
+    };
     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)
+        value
+      }, () => {
+        const numericValue = this.getNumericValue(this.state.value);
+        this.setPropsValue(numericValue);
       });
     };
     this.addMarkerByPosition = (lng, lat) => {
@@ -223,46 +252,47 @@ class LargeMapEditorDialog extends _react.default.Component {
         }
       }
     };
-    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);
+    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.rerenderMapMarker(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.rerenderMapMarker(numericValue);
+      });
     };
     this.onKeyDown = event => {
       event.stopPropagation();
@@ -271,12 +301,6 @@ class LargeMapEditorDialog extends _react.default.Component {
         this.onSubmit();
       }
     };
-    this.clearSearchNumerical = () => {
-      this.setState({
-        inputValue: '',
-        value: {}
-      });
-    };
     this.onSubmit = () => {
       const {
         value
@@ -316,7 +340,10 @@ class LargeMapEditorDialog extends _react.default.Component {
       readOnly,
       config
     } = props;
-    const _value = props.value || {};
+    const _value = props.value || {
+      lng: '',
+      lat: ''
+    };
     this.readOnly = readOnly;
     const {
       mapType,
@@ -324,16 +351,10 @@ class LargeMapEditorDialog extends _react.default.Component {
     } = (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
+      value: _value
     };
   }
   componentDidMount() {
@@ -384,8 +405,10 @@ class LargeMapEditorDialog extends _react.default.Component {
   render() {
     const {
       isLoading,
-      inputValue
+      value
     } = this.state;
+    const lat = value ? value.lat : '';
+    const lng = value ? value.lng : '';
     return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
       size: "lg",
       isOpen: true,
@@ -407,24 +430,31 @@ class LargeMapEditorDialog extends _react.default.Component {
       className: "dtable-ui-geolocation-map-editor-large",
       onClick: this.handlerClick
     }, !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: "search-tables-container"
-    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "dtable-ui-geolocation-map-lng-lat-input-container dtable-ui-geolocation-map-lat-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)('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 dtable-ui-geolocation-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-large'
     }, this.mapType && isLoading && /*#__PURE__*/_react.default.createElement(_Loading.default, null), !this.mapType && /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui-geolocation-map-editor-error-message d-flex justify-content-center mt-9"

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

@@ -18,6 +18,18 @@ var _lang = require("../../../lang");
 class MapSelectionEditor 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();
+        }
+        window.onSubmitSelection = this.onSubmitSelection;
+        return;
+      }
+    };
     this.renderBaiduMap = () => {
       this.setState({
         isLoading: false
@@ -238,6 +250,12 @@ class MapSelectionEditor extends _react.Component {
       this.props.setValue(value);
       this.setState({
         isShowLargeEditor: !this.state.isShowLargeEditor
+      }, () => {
+        const nextState = this.state.isShowLargeEditor;
+        if (!nextState) {
+          this.initMap();
+        }
+        this.props.toggleLargeMap && this.props.toggleLargeMap(nextState);
       });
     };
     this.clearSearchNumerical = () => {
@@ -337,16 +355,7 @@ class MapSelectionEditor extends _react.Component {
     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;
-    }
+    this.initMap();
   }
   componentWillUnmount() {
     if (this.mapType === _mapEditorUtils.MAP_TYPES.B_MAP) {
@@ -407,7 +416,7 @@ class MapSelectionEditor extends _react.Component {
       value: inputValue,
       onKeyDown: this.onKeyDown,
       onChange: this.onChange,
-      className: "form-control search-tables-input selection-input",
+      className: "form-control selection-input",
       placeholder: (0, _lang.getLocale)('Please_enter_the_address'),
       autoFocus: true
     }), inputValue && /*#__PURE__*/_react.default.createElement("span", {

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

@@ -243,7 +243,7 @@ class LargeMapSelectionEditorDialog extends _react.default.Component {
         value
       } = this.state;
       this.props.setValue(value);
-      this.props.toggleFullScreen();
+      this.props.toggleFullScreen(event);
     };
     this.renderSearchResults = () => {
       const {
@@ -399,7 +399,7 @@ class LargeMapSelectionEditorDialog extends _react.default.Component {
       value: inputValue,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
-      className: "form-control search-tables-input selection-input-large",
+      className: "form-control selection-input-large",
       placeholder: (0, _lang.getLocale)('Please_enter_the_address'),
       autoFocus: true
     }), inputValue && /*#__PURE__*/_react.default.createElement("span", {

package/lib/RowExpandEditor/geolocation-editor/pc-editor/index.js

@@ -23,13 +23,17 @@ class RowExpandPCGeolocationEditor extends _react.default.Component {
       }
     };
     this.hideEditor = event => {
-      if (!this.state.isShowEditor || !event.target || this.editorContainer.contains(event.target)) return;
+      if (!this.state.isShowEditor || this.isLargeMapOpen || !event.target || this.editorContainer.contains(event.target)) return;
       this.setState({
         isShowEditor: false
       });
     };
+    this.toggleLargeMap = open => {
+      this.isLargeMapOpen = open;
+    };
     this.toggleEditor = () => {
       this.props.updateTabIndex(this.props.columnIndex);
+      this.isLargeMapOpen = false;
       this.setState({
         isShowEditor: !this.state.isShowEditor
       }, () => {
@@ -47,12 +51,21 @@ class RowExpandPCGeolocationEditor extends _react.default.Component {
     this.onFocus = () => {
       this.props.updateTabIndex(this.props.columnIndex);
     };
+    this.closeEditor = () => {
+      this.isLargeMapOpen = false;
+      this.setState({
+        isShowEditor: false
+      });
+    };
     this.onCommit = value => {
       this.props.onCommit(value);
       this.setState({
         value
       });
-      this.toggleEditor();
+      this.isLargeMapOpen = false;
+      this.setState({
+        isShowEditor: false
+      });
     };
     this.renderGeoLocation = () => {
       let {
@@ -99,7 +112,7 @@ class RowExpandPCGeolocationEditor extends _react.default.Component {
       value: row[_column[valueKey]] || {}
     };
     this.addBtnRef = /*#__PURE__*/_react.default.createRef();
-    this.isGeolocationLargeMapOpen = false;
+    this.isLargeMapOpen = false;
   }
   componentDidMount() {
     document.addEventListener('mousedown', this.hideEditor);
@@ -150,8 +163,9 @@ class RowExpandPCGeolocationEditor extends _react.default.Component {
       value: value,
       config: config,
       onCommit: this.onCommit,
-      onToggle: this.toggleEditor,
-      onPressTab: this.props.onPressTab
+      onToggle: this.closeEditor,
+      onPressTab: this.props.onPressTab,
+      toggleLargeMap: this.toggleLargeMap
     }));
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.36",
+  "version": "6.0.37beta",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",