dtable-ui-component 6.0.29-beta2 → 6.0.29-beta4

package/lib/GeolocationEditor/index.js

@@ -1,240 +1,100 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _constants = require("../constants");
-var _objectUtils = _interopRequireDefault(require("../utils/object-utils"));
-var _locationEditor = _interopRequireDefault(require("./location-editor"));
-var _mapEditor = _interopRequireDefault(require("./map-editor"));
-var _mapSelectionEditor = _interopRequireDefault(require("./map-selection-editor"));
-var _countryEditor = _interopRequireDefault(require("./country-editor"));
-var _provinceEditor = _interopRequireDefault(require("./province-editor"));
-var _provinceCityEditor = _interopRequireDefault(require("./province-city-editor"));
-require("./index.css");
-class GeolocationEditor extends _react.default.Component {
-  constructor(_props) {
-    super(_props);
-    this.onHotKey = e => {
-      if (e.keyCode === _constants.KeyCodes.Enter && e.target.tagName !== 'TEXTAREA') {
-        this.onSubmit();
-      } else if (e.keyCode === _constants.KeyCodes.Escape) {
-        if (this.props.isInModal) {
-          e.stopPropagation();
-          this.onCancel();
-        }
-      }
-    };
-    this.getValue = () => {
-      return this.value;
-    };
-    this.setValue = value => {
-      this.value = value;
-    };
-    this.onSubmit = () => {
-      if (_objectUtils.default.isSameObject(this.initValue, this.value)) {
-        this.onCancel();
-        return;
-      }
-      this.props.onCommit(this.value);
-    };
-    this.onCancel = () => {
-      this.props.onCommitCancel && this.props.onCommitCancel();
-    };
-    this.setEditorPosition = () => {
-      const {
-        isInModal
-      } = this.props;
-      const editorFormat = this.getGeoFormat();
-      if (this.ref && (editorFormat === _dtableUtils.GEOLOCATION_FORMAT.COUNTRY_REGION || editorFormat === _dtableUtils.GEOLOCATION_FORMAT.PROVINCE)) {
-        let height = 240;
-        let width = 200;
-        let left = this.ref.parentNode.getBoundingClientRect().x;
-        let top = this.ref.parentNode.getBoundingClientRect().y;
-        if (isInModal) {
-          left = 220;
-        }
-        if (top + height > window.innerHeight) {
-          top = window.innerHeight - height - 35;
-        }
-        this.setState({
-          editorPosition: {
-            top,
-            left,
-            width,
-            zIndex: 1000,
-            position: 'fixed'
-          }
-        });
-        return;
-      }
-      if (this.ref && editorFormat === _dtableUtils.GEOLOCATION_FORMAT.PROVINCE_CITY) {
-        let height = 215;
-        let width = 400;
-        let left = this.ref.parentNode.getBoundingClientRect().x;
-        let top = this.ref.parentNode.getBoundingClientRect().y;
-        if (isInModal) {
-          left = 220;
-          if (top + height + 35 + 200 > window.innerHeight) {
-            top = window.innerHeight - height - 235;
-          }
-        } else {
-          if (top + height + 200 > window.innerHeight) {
-            top = window.innerHeight - height - 200 - 5;
-          }
-          if (left + width > window.innerWidth) {
-            left = window.innerWidth - width - 10;
-          }
-        }
-        this.setState({
-          editorPosition: {
-            top,
-            left,
-            width,
-            zIndex: 1000,
-            position: 'fixed'
-          }
-        });
-        return;
-      }
-      if (this.ref) {
-        const isMapTypeEditor = editorFormat === _dtableUtils.GEOLOCATION_FORMAT.LNG_LAT || editorFormat === _dtableUtils.GEOLOCATION_FORMAT.MAP_SELECTION;
-        let width = isMapTypeEditor ? 500 : 400;
-        let height = isMapTypeEditor ? 454 : 310;
-        let geoEditorTop = 0;
-        let geoEditorLeft = 0;
-        if (isInModal) {
-          let innerHeight = window.innerHeight;
-          const offsetTop = this.ref.parentNode.getBoundingClientRect().y;
-          geoEditorTop = offsetTop;
-          geoEditorTop = height + geoEditorTop > innerHeight ? innerHeight - height - 30 : geoEditorTop;
-          geoEditorLeft = -30;
-        } else {
-          let {
-            offsetLeft,
-            offsetTop
-          } = this.ref.parentNode;
-          geoEditorLeft = offsetLeft - width;
-          geoEditorTop = offsetTop;
-          if (offsetLeft < width) {
-            geoEditorLeft = offsetLeft + this.props.column.width;
-          }
-          if (geoEditorLeft + width > window.innerWidth) {
-            geoEditorLeft = window.innerWidth - width;
-          }
-          if (offsetTop + height > window.innerHeight) {
-            geoEditorTop = window.innerHeight - height;
-          }
-        }
-        this.setState({
-          editorPosition: {
-            top: geoEditorTop,
-            left: geoEditorLeft,
-            zIndex: 1000,
-            position: 'fixed'
-          }
-        });
-      }
-    };
-    this.getGeoFormat = () => {
-      const {
-        column
-      } = this.props;
-      let data = column.data || {};
-      return data.geo_format ? data.geo_format : _dtableUtils.DEFAULT_GEOLOCATION_FORMAT;
-    };
-    this.getLargeEditorState = () => {
-      var _this$editor, _this$editor$state;
-      return (_this$editor = this.editor) === null || _this$editor === void 0 ? void 0 : (_this$editor$state = _this$editor.state) === null || _this$editor$state === void 0 ? void 0 : _this$editor$state.isShowLargeEditor;
-    };
-    this.createEditor = () => {
-      const geoFormat = this.getGeoFormat();
-      const {
-        config,
-        column
-      } = this.props;
-      const props = {
-        column,
-        config,
-        value: this.value,
-        setValue: this.setValue,
-        onSubmit: this.onSubmit,
-        onCancel: this.onCancel
-      };
-      switch (geoFormat) {
-        case _dtableUtils.GEOLOCATION_FORMAT.LNG_LAT:
-          {
-            return /*#__PURE__*/_react.default.createElement(_mapEditor.default, Object.assign({}, props, {
-              ref: ref => this.editor = ref
-            }));
-          }
-        case _dtableUtils.GEOLOCATION_FORMAT.MAP_SELECTION:
-          {
-            return /*#__PURE__*/_react.default.createElement(_mapSelectionEditor.default, Object.assign({}, props, {
-              ref: ref => this.editor = ref
-            }));
-          }
-        case _dtableUtils.GEOLOCATION_FORMAT.COUNTRY_REGION:
-          {
-            return /*#__PURE__*/_react.default.createElement(_countryEditor.default, Object.assign({}, props, {
-              ref: ref => this.editor = ref
-            }));
-          }
-        case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE:
-          {
-            return /*#__PURE__*/_react.default.createElement(_provinceEditor.default, Object.assign({}, props, {
-              onPressTab: this.props.onPressTab,
-              ref: ref => this.editor = ref
-            }));
-          }
-        case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE_CITY:
-          {
-            return /*#__PURE__*/_react.default.createElement(_provinceCityEditor.default, Object.assign({}, props, {
-              ref: ref => this.editor = ref
-            }));
-          }
-        case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE_CITY_DISTRICT:
-          {
-            return /*#__PURE__*/_react.default.createElement(_locationEditor.default, Object.assign({}, props, {
-              ref: ref => this.editor = ref
-            }));
-          }
-        default:
-          {
-            return /*#__PURE__*/_react.default.createElement(_locationEditor.default, Object.assign({}, props, {
-              isShowAddressDetail: true,
-              ref: ref => this.editor = ref
-            }));
-          }
-      }
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _pcEditor = _interopRequireDefault(require("./pc-editor"));
+var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+const GeolocationEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isMobile,
+    config: propsConfig,
+    ...props
+  } = _ref;
+  const config = (0, _react.useMemo)(() => {
+    var _window;
+    return {
+      ...((_window = window) === null || _window === void 0 ? void 0 : _window.dtable),
+      ...propsConfig
     };
-    this.value = _props.value || {};
-    this.initValue = this.value;
-    this.state = {
-      editorPosition: null
-    };
-    this.editor = null;
-  }
-  componentDidMount() {
-    this.setEditorPosition();
-    document.addEventListener('keydown', this.onHotKey, true);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.onHotKey, true);
-  }
-  render() {
+  }, [propsConfig]);
+  const getLocationData = (0, _react.useCallback)(() => {
+    var _window2, _window2$app;
+    if ((_window2 = window) !== null && _window2 !== void 0 && (_window2$app = _window2.app) !== null && _window2$app !== void 0 && _window2$app.location) return new Promise((resolve, reject) => {
+      resolve(window.app.location);
+    });
+    const {
+      mediaUrl
+    } = config || {};
+    return fetch("".concat(mediaUrl, "geo-data/cn-location.json")).then(res => {
+      // get locations from server
+      return res.json();
+    }).catch(() => {
+      // get locations from local
+      return fetch('./geo-data/cn-location.json').then(res => {
+        return res.json();
+      });
+    });
+  }, [config]);
+  const getCountryData = (0, _react.useCallback)(lang => {
+    if (lang === 'cn' && window.app.countryListCn) return new Promise((resolve, reject) => {
+      resolve(window.app.countryListCn);
+    });
+    if (lang !== 'cn' && window.app.countryListEn) return new Promise((resolve, reject) => {
+      resolve(window.app.countryListEn);
+    });
     const {
-      editorPosition
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: ref => this.ref = ref,
-      style: editorPosition,
-      className: "dtable-ui-dtable-ui-geolocation-editor"
-    }, this.createEditor());
-  }
-}
+      mediaUrl
+    } = config;
+    const geoFileName = lang === 'cn' ? 'cn-region-location' : 'en-region-location';
+    return fetch("".concat(mediaUrl, "geo-data/").concat(geoFileName, ".json")).then(res => {
+      return res.json();
+    }).catch(() => {
+      // get locations from local
+      return fetch("./geo-data/".concat(geoFileName, ".json")).then(res => {
+        return res.json();
+      });
+    }).then(res => {
+      const data = res || {};
+      if (lang === 'cn') {
+        window.app.countryListCn = data;
+      } else {
+        window.app.countryListEn = data;
+      }
+      return data;
+    });
+  }, [config]);
+  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    config: config,
+    getLocationData: getLocationData,
+    getCountryData: getCountryData,
+    ref: ref
+  }));
+  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    config: config,
+    getLocationData: getLocationData,
+    getCountryData: getCountryData,
+    ref: ref
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(min-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+    config: config,
+    getLocationData: getLocationData,
+    getCountryData: getCountryData,
+    ref: ref
+  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+    query: "(max-width: 768px)"
+  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+    config: config,
+    getLocationData: getLocationData,
+    getCountryData: getCountryData,
+    ref: ref
+  }))));
+});
 var _default = exports.default = GeolocationEditor;

package/lib/GeolocationEditor/map-editor-utils.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.locateCurrentPosition = exports.loadMapSource = exports.getMineMapUrl = exports.getMapInfo = exports.getInitCenter = exports.MAP_TYPES = exports.DOMESTIC_MAP_TYPE = void 0;
+exports.locateCurrentPosition = exports.loadMapSource = exports.getMineMapUrl = exports.getMapInfo = exports.getInitCenter = exports.MAP_TYPES = exports.INPUT_MODE_MAP = exports.DOMESTIC_MAP_TYPE = void 0;
+const INPUT_MODE_MAP = exports.INPUT_MODE_MAP = {
+  ANY_LOCATION: 'any_location',
+  ONLY_MOBILE_POSITIONING: 'only_mobile_positioning'
+};
 const MAP_TYPES = exports.MAP_TYPES = {
   B_MAP: 'b_map',
   // baidu
@@ -101,7 +105,7 @@ const loadMapSource = (mapType, mapKey, callback) => {
   let script = document.createElement('script');
   script.type = 'text/javascript';
   if (mapType === MAP_TYPES.B_MAP) {
-    scriptUrl = "https://api.map.baidu.com/api?v=3.0&ak=".concat(mapKey, "}&callback=renderBaiduMap");
+    scriptUrl = "https://api.map.baidu.com/api?v=3.0&ak=".concat(mapKey, "&callback=renderBaiduMap");
   } else if (mapType === MAP_TYPES.G_MAP) {
     scriptUrl = "https://maps.googleapis.com/maps/api/js?key=".concat(mapKey, "&callback=renderGoogleMap&libraries=&v=weekly");
   } else {

package/lib/GeolocationEditor/mb-editor/country-editor.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _picker = _interopRequireDefault(require("antd-mobile/lib/picker"));
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireWildcard(require("react"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _lang = require("../../lang");
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
+const CountryEditor = _ref => {
+  let {
+    column,
+    value: oldValue,
+    getData,
+    onToggle,
+    onCommit
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)([]);
+  const [isLoading, setLoading] = (0, _react.useState)(true);
+  const locations = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    getData().then(data => {
+      locations.current = data;
+      const continent = data.find(a => a.children.find(b => b.value === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.country_region) || ''));
+      const value = [(continent === null || continent === void 0 ? void 0 : continent.value) || '', (oldValue === null || oldValue === void 0 ? void 0 : oldValue.country_region) || ''];
+      setValue(value);
+      setLoading(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onValueChange = (0, _react.useCallback)(newValue => {
+    if (value === newValue) return;
+    setValue(newValue);
+  }, [value]);
+  const onSubmit = (0, _react.useCallback)(() => {
+    if (value[1] !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.country_region)) {
+      onCommit({
+        country_region: value[1]
+      });
+    }
+    onToggle();
+  }, [value, oldValue, onCommit, onToggle]);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    onClose: onToggle
+  }, /*#__PURE__*/_react.default.createElement(Header, {
+    onLeftClick: onToggle,
+    onRightClick: onSubmit
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#f09f3f'
+    }
+  }, (0, _lang.getLocale)('Submit'))), /*#__PURE__*/_react.default.createElement(Body, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-mobile-row-expand-subtitle"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
+    className: "dtable-ui-mobile-geolocation-editor-picker",
+    data: isLoading ? [] : locations.current,
+    value: value,
+    format: "",
+    onChange: onValueChange,
+    cascade: true,
+    title: (0, _lang.getLocale)('Address_information'),
+    extra: (0, _lang.getLocale)('Select_location'),
+    onOk: e => onValueChange(e),
+    okText: (0, _lang.getLocale)('Done'),
+    dismissText: (0, _lang.getLocale)('Cancel'),
+    cols: 2
+  }, /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    arrow: "horizontal"
+  }, value[1] || (0, _lang.getLocale)('Select_location')))));
+};
+var _default = exports.default = CountryEditor;

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

@@ -0,0 +1,11 @@
+.dtable-ui-mobile-geolocation-editor-picker .am-picker-popup-content .am-picker-popup-header-left {
+  color: #666666;
+}
+
+.dtable-ui-mobile-geolocation-editor-picker .am-picker-popup-content .am-picker-popup-title {
+  color: #212529;
+}
+
+.dtable-ui-mobile-geolocation-editor-picker .am-picker-popup-content .am-picker-popup-header-right {
+  color: #e5a252;
+}

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

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dtableUtils = require("dtable-utils");
+var _countryEditor = _interopRequireDefault(require("./country-editor"));
+var _provinceEditor = _interopRequireDefault(require("./province-editor"));
+var _provinceCityEditor = _interopRequireDefault(require("./province-city-editor"));
+var _locationEditor = _interopRequireDefault(require("./location-editor"));
+var _mapEditor = _interopRequireDefault(require("./map-editor"));
+var _mapSelectionEditor = _interopRequireDefault(require("./map-selection-editor"));
+require("./index.css");
+const transLocationData = data => {
+  if (Object.prototype.toString.call(data) === '[object Object]') {
+    const name = data.name;
+    data.label = name;
+    data.value = name;
+    data.name = null;
+    if (data.children) {
+      data.children.map(child => {
+        return transLocationData(child);
+      });
+    }
+  }
+  return data.children;
+};
+const transCountryData = data => {
+  let _data = [];
+  for (let key in data) {
+    let obj = {};
+    let children = [];
+    obj.label = key;
+    obj.value = key;
+    obj.name = null;
+    data[key].forEach(item => {
+      let obj = {};
+      obj.label = item;
+      obj.value = item;
+      obj.name = null;
+      children.push(obj);
+    });
+    obj.children = children;
+    _data.push(obj);
+  }
+  return _data;
+};
+const MBGeolocationEditor = _ref => {
+  let {
+    column,
+    config,
+    getLocationData,
+    getCountryData,
+    ...props
+  } = _ref;
+  const format = (0, _react.useMemo)(() => {
+    let data = column.data || {};
+    return data.geo_format ? data.geo_format : _dtableUtils.DEFAULT_GEOLOCATION_FORMAT;
+  }, [column]);
+  const getData = (0, _react.useCallback)(() => {
+    return getLocationData().then(data => transLocationData(data));
+  }, [getLocationData]);
+  const _getCountryData = (0, _react.useCallback)(() => {
+    const columnData = column.data || {};
+    const lang = columnData.lang === 'cn' ? 'cn' : 'en';
+    return getCountryData(lang).then(data => transCountryData(data));
+  }, [column, getCountryData]);
+  switch (format) {
+    case _dtableUtils.GEOLOCATION_FORMAT.LNG_LAT:
+      {
+        return /*#__PURE__*/_react.default.createElement(_mapEditor.default, Object.assign({}, props, {
+          config: config,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.MAP_SELECTION:
+      {
+        return /*#__PURE__*/_react.default.createElement(_mapSelectionEditor.default, Object.assign({}, props, {
+          config: config,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.COUNTRY_REGION:
+      {
+        return /*#__PURE__*/_react.default.createElement(_countryEditor.default, Object.assign({}, props, {
+          getData: _getCountryData,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE:
+      {
+        return /*#__PURE__*/_react.default.createElement(_provinceEditor.default, Object.assign({}, props, {
+          getData: getData,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE_CITY:
+      {
+        return /*#__PURE__*/_react.default.createElement(_provinceCityEditor.default, Object.assign({}, props, {
+          getData: getData,
+          column: column
+        }));
+      }
+    case _dtableUtils.GEOLOCATION_FORMAT.PROVINCE_CITY_DISTRICT:
+      {
+        return /*#__PURE__*/_react.default.createElement(_locationEditor.default, Object.assign({}, props, {
+          getData: getData,
+          column: column
+        }));
+      }
+    default:
+      {
+        return /*#__PURE__*/_react.default.createElement(_locationEditor.default, Object.assign({}, props, {
+          isShowDetails: true,
+          getData: getData,
+          column: column
+        }));
+      }
+  }
+};
+var _default = exports.default = MBGeolocationEditor;

package/lib/GeolocationEditor/mb-editor/location-editor.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _inputItem = _interopRequireDefault(require("antd-mobile/lib/input-item"));
+var _picker = _interopRequireDefault(require("antd-mobile/lib/picker"));
+var _list = _interopRequireDefault(require("antd-mobile/lib/list"));
+var _react = _interopRequireWildcard(require("react"));
+var _MobileFullScreenPage = _interopRequireDefault(require("../../MobileFullScreenPage"));
+var _lang = require("../../lang");
+var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
+const {
+  Header,
+  Body
+} = _MobileFullScreenPage.default;
+const LocationEditor = _ref => {
+  let {
+    isShowDetails,
+    column,
+    value: oldValue,
+    getData,
+    onToggle,
+    onCommit
+  } = _ref;
+  let initValue = [(oldValue === null || oldValue === void 0 ? void 0 : oldValue.province) || '', (oldValue === null || oldValue === void 0 ? void 0 : oldValue.city) || '', (oldValue === null || oldValue === void 0 ? void 0 : oldValue.district) || ''];
+  if (isShowDetails) {
+    initValue.push((oldValue === null || oldValue === void 0 ? void 0 : oldValue.detail) || '');
+  }
+  const [value, setValue] = (0, _react.useState)(initValue);
+  const [isLoading, setLoading] = (0, _react.useState)(true);
+  const locations = (0, _react.useRef)([]);
+  (0, _react.useEffect)(() => {
+    getData().then(data => {
+      locations.current = data;
+      setLoading(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onValueChange = (0, _react.useCallback)(newValue => {
+    if (value === newValue) return;
+    setValue(newValue);
+  }, [value]);
+  const onAddressChange = (0, _react.useCallback)(address => {
+    const newValue = value.slice(0, 3);
+    newValue.push(address);
+    setValue(newValue);
+  }, [value]);
+  const onSubmit = (0, _react.useCallback)(() => {
+    let newValue = {
+      province: value[0],
+      city: value[1],
+      district: value[2]
+    };
+    if (isShowDetails) {
+      newValue['detail'] = value[3];
+    }
+    if (!_objectUtils.default.isSameObject(newValue, oldValue)) {
+      onCommit(newValue);
+    }
+    onToggle();
+  }, [isShowDetails, value, oldValue, onCommit, onToggle]);
+  return /*#__PURE__*/_react.default.createElement(_MobileFullScreenPage.default, {
+    onToggle: onToggle
+  }, /*#__PURE__*/_react.default.createElement(Header, {
+    onLeftClick: onToggle,
+    onRightClick: onSubmit
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, column.name), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#f09f3f'
+    }
+  }, (0, _lang.getLocale)('Submit'))), /*#__PURE__*/_react.default.createElement(Body, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-mobile-row-expand-subtitle"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Address_information'))), /*#__PURE__*/_react.default.createElement(_picker.default, {
+    className: "dtable-ui-mobile-geolocation-editor-picker",
+    data: isLoading ? [] : locations.current,
+    value: value.slice(0, 3),
+    format: "",
+    onChange: onValueChange,
+    cascade: true,
+    title: (0, _lang.getLocale)('Address_information'),
+    extra: (0, _lang.getLocale)('Select_location'),
+    onOk: e => onValueChange(e),
+    okText: (0, _lang.getLocale)('Done'),
+    dismissText: (0, _lang.getLocale)('Cancel'),
+    cols: 3
+  }, /*#__PURE__*/_react.default.createElement(_list.default.Item, {
+    arrow: "horizontal"
+  }, value.slice(0, 3).join(' ') || (0, _lang.getLocale)('Select_location'))), isShowDetails && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dtable-ui-mobile-row-expand-subtitle"
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Detailed_address'))), /*#__PURE__*/_react.default.createElement(_inputItem.default, {
+    placeholder: (0, _lang.getLocale)('Detailed_address_placeholder'),
+    value: value[3],
+    onChange: onAddressChange,
+    moneyKeyboardAlign: "left"
+  }))));
+};
+var _default = exports.default = LocationEditor;

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

@@ -0,0 +1,11 @@
+.dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-input-container {
+  height: 60px;
+  padding-top: 16px;
+  width: 100%;
+}
+
+.dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-map {
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+}