dtable-ui-component 6.0.36 → 6.0.37-beta1

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

@@ -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) => {
@@ -326,11 +326,53 @@ class MapEditor extends _react.default.Component {
     this.onClose = () => {
       this.props.onToggle();
     };
+    this.handleLatitudeChange = value => {
+      this.setState({
+        value: {
+          ...this.state.value,
+          lat: value
+        }
+      }, () => {
+        const numericValue = this.getNumericLngLatValue(this.state.value);
+        this.rerenderMapMarker(numericValue);
+      });
+    };
+    this.handleLongitudeChange = value => {
+      this.setState({
+        value: {
+          ...this.state.value,
+          lng: value
+        }
+      }, () => {
+        const numericValue = this.getNumericLngLatValue(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 +385,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 +444,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(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 +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(null);
+        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/lib/locales/de.json

@@ -132,8 +132,6 @@
   "Select_location": "Auswählen",
   "Positioning_failed": "Die Positionierung ist gescheitert.",
   "Address": "Adresse",
-  "Enter_longitude_and_latitude": "Längengrad und Breitengrad eingeben",
-  "Enter_latitude_and_longitude": "Längen- und Breitengrad eingeben",
   "The_map_plugin_is_not_properly_configured_contact_the_administrator": "Das Karten-Plugin ist nicht richtig konfiguriert. Kontaktieren Sie den Administrator.",
   "Fill_in": "Ausfüllen",
   "Search_failed_please_enter_detailed_address": "Die Suche ist fehlgeschlagen. Geben Sie die Adresse mit mehr Details ein.",
@@ -165,5 +163,9 @@
   "Add_participants": "Teilnehmer hinzufügen",
   "Edit_long_text": "Langtext bearbeiten",
   "Choose_a_department": "Bereich wählen",
-  "Close": "Schließen"
+  "Close": "Schließen",
+  "Latitude_abbr": "Breite",
+  "Longitude_abbr": "Länge",
+  "Enter_latitude": "Breitengrad eingeben",
+  "Enter_longitude": "Längengrad eingeben"
 }

package/lib/locales/en.json

@@ -132,8 +132,6 @@
   "Select_location": "Select",
   "Positioning_failed": "Positioning failed",
   "Address": "Address",
-  "Enter_longitude_and_latitude": "Enter longitude and latitude",
-  "Enter_latitude_and_longitude": "Enter latitude and longitude",
   "The_map_plugin_is_not_properly_configured_contact_the_administrator": "The map plugin is not properly configured. Contact the administrator.",
   "Fill_in": "Fill in",
   "Search_failed_please_enter_detailed_address": "Search failed, please enter detailed address",
@@ -165,5 +163,9 @@
   "Add_participants": "Add participants",
   "Edit_long_text": "Edit long text",
   "Choose_a_department": "Choose a department",
-  "Close": "Close"
+  "Close": "Close",
+  "Latitude_abbr": "Lat",
+  "Longitude_abbr": "Lng",
+  "Enter_latitude": "Enter latitude",
+  "Enter_longitude": "Enter longitude"
 }

package/lib/locales/es.json

@@ -132,8 +132,6 @@
   "Select_location": "Elegir",
   "Positioning_failed": "El posicionamiento ha fallado",
   "Address": "Dirección",
-  "Enter_longitude_and_latitude": "Introduce longitud y latitud",
-  "Enter_latitude_and_longitude": "Introduce latitud y longitud",
   "The_map_plugin_is_not_properly_configured_contact_the_administrator": "El plugin de mapas no está bien configurado. Contacta con el administrador.",
   "Fill_in": "Rellenar",
   "Search_failed_please_enter_detailed_address": "La búsqueda ha fallado, por favor introduce la dirección completa",
@@ -165,5 +163,9 @@
   "Add_participants": "Añadir participantes",
   "Edit_long_text": "Edit long text",
   "Choose_a_department": "Choose a department",
-  "Close": "Cerrar"
+  "Close": "Cerrar",
+  "Latitude_abbr": "Lat",
+  "Longitude_abbr": "Lng",
+  "Enter_latitude": "Enter latitude",
+  "Enter_longitude": "Enter longitude"
 }

package/lib/locales/fr.json

@@ -132,8 +132,6 @@
   "Select_location": "Sélectionner",
   "Positioning_failed": "La localisation a échoué.",
   "Address": "Adresse",
-  "Enter_longitude_and_latitude": "Entrer longitude et latitude",
-  "Enter_latitude_and_longitude": "Entrer latitude et longitude",
   "The_map_plugin_is_not_properly_configured_contact_the_administrator": "Le plugin de carte n'est pas correctement configuré. Veuillez contacter l'administrateur.",
   "Fill_in": "Remplir",
   "Search_failed_please_enter_detailed_address": "La recherche a échoué. Veuillez entrer une adresse détailée.",
@@ -165,5 +163,9 @@
   "Add_participants": "Ajouter des participants",
   "Edit_long_text": "Modifier le texte long",
   "Choose_a_department": "Sélectionner un département",
-  "Close": "Fermer"
+  "Close": "Fermer",
+  "Latitude_abbr": "Lat",
+  "Longitude_abbr": "Lng",
+  "Enter_latitude": "Enter latitude",
+  "Enter_longitude": "Enter longitude"
 }

package/lib/locales/pt.json

@@ -132,8 +132,6 @@
   "Select_location": "Selecione",
   "Positioning_failed": "Posicionamento falhou",
   "Address": "Endereço",
-  "Enter_longitude_and_latitude": "Entre longitude e latitude",
-  "Enter_latitude_and_longitude": "Entre na latitude e longitude",
   "The_map_plugin_is_not_properly_configured_contact_the_administrator": "O plug -in de mapa não está configurado corretamente. Entre em contato com o administrador.",
   "Fill_in": "Fill in",
   "Search_failed_please_enter_detailed_address": "Search failed, please enter detailed address",
@@ -165,5 +163,9 @@
   "Add_participants": "Adicione participantes",
   "Edit_long_text": "Editar texto longo",
   "Choose_a_department": "Choose a department",
-  "Close": "Fechar"
+  "Close": "Fechar",
+  "Latitude_abbr": "Lat",
+  "Longitude_abbr": "Lng",
+  "Enter_latitude": "Enter latitude",
+  "Enter_longitude": "Enter longitude"
 }

package/lib/locales/ru.json

@@ -132,8 +132,6 @@
   "Select_location": "Выбирать",
   "Positioning_failed": "Позиционирование не удалось",
   "Address": "Адрес",
-  "Enter_longitude_and_latitude": "Введите долготу и широту",
-  "Enter_latitude_and_longitude": "Введите широту и долготу",
   "The_map_plugin_is_not_properly_configured_contact_the_administrator": "Плагин Карты не настроен должным образом. Обратитесь к администратору.",
   "Fill_in": "Заполнить",
   "Search_failed_please_enter_detailed_address": "Поиск не удался, пожалуйста, введите подробный адрес",
@@ -165,5 +163,9 @@
   "Add_participants": "Добавить участников",
   "Edit_long_text": "Редактировать длинный текст",
   "Choose_a_department": "Выберите отдел",
-  "Close": "Закрыть"
+  "Close": "Закрыть",
+  "Latitude_abbr": "Lat",
+  "Longitude_abbr": "Lng",
+  "Enter_latitude": "Enter latitude",
+  "Enter_longitude": "Enter longitude"
 }

package/lib/locales/zh-CN.json

@@ -132,8 +132,6 @@
   "Select_location": "选择",
   "Positioning_failed": "定位失败",
   "Address": "地址",
-  "Enter_longitude_and_latitude": "输入经度和纬度",
-  "Enter_latitude_and_longitude": "输入经度和纬度",
   "The_map_plugin_is_not_properly_configured_contact_the_administrator": "地图插件未正确配置。请与管理员联系。",
   "Fill_in": "填入",
   "Search_failed_please_enter_detailed_address": "搜索失败，请输入详细地址",
@@ -165,5 +163,9 @@
   "Add_participants": "添加参与人",
   "Edit_long_text": "编辑长文本",
   "Choose_a_department": "选择一个部门",
-  "Close": "关闭"
+  "Close": "关闭",
+  "Latitude_abbr": "纬度",
+  "Longitude_abbr": "经度",
+  "Enter_latitude": "输入纬度",
+  "Enter_longitude": "输入经度"
 }

package/package.json

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