dtable-ui-component 6.0.2 → 6.0.4

package/lib/GeolocationEditor/parse-geolocation.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const MUNICIPALITY = ['北京市', '天津市', '上海市', '重庆市', '香港', '澳门'];
+let initProvince = null;
+let initCity = null;
+function getProvince(string, geoTree) {
+  if (string.length === 0) {
+    return {
+      province: '',
+      city: '',
+      district: '',
+      detail: ''
+    };
+  }
+  let startPoint = 0;
+  let endPoint = 2;
+  let subProvince = string.substring(startPoint, endPoint);
+  let province;
+  while (subProvince.length === 2) {
+    // eslint-disable-next-line no-loop-func
+    const selectedProvince = geoTree.children.find(provinceItem => {
+      if (provinceItem.name.indexOf(subProvince) === 0) {
+        return true;
+      }
+      return null;
+    });
+    if (selectedProvince) {
+      province = selectedProvince;
+      break;
+    }
+    startPoint++;
+    endPoint++;
+    subProvince = string.substring(startPoint, endPoint);
+  }
+  if (province) {
+    const name = province.name;
+    while (name.includes(string.substring(startPoint, endPoint)) && endPoint <= string.length) {
+      endPoint++;
+    }
+    return {
+      province,
+      string: string.substring(endPoint - 1)
+    };
+  }
+  return {
+    province,
+    string: string.substring(0)
+  };
+}
+function getCity(province, string, geoTree) {
+  let city;
+  let startPoint = 0;
+  let endPoint = 2;
+  if (string.length === 0) {
+    return {
+      province,
+      city: '',
+      district: '',
+      detail: ''
+    };
+  }
+  let subCity = string.substring(startPoint, endPoint);
+  if (province) {
+    if (MUNICIPALITY.includes(province.name)) {
+      city = province.children[0];
+      const name = city.name;
+      if (!name.includes(subCity)) {
+        return {
+          province,
+          city,
+          string: string.substring(startPoint)
+        };
+      }
+      while (name.includes(string.substring(startPoint, endPoint)) && endPoint <= string.length) {
+        endPoint++;
+      }
+      return {
+        province,
+        city,
+        string: string.substring(endPoint - 1)
+      };
+    }
+    while (subCity.length === 2) {
+      // eslint-disable-next-line no-loop-func
+      let selectedCity = province.children.find(cityItem => {
+        if (cityItem.name.indexOf(subCity) === 0) {
+          return true;
+        }
+        return false;
+      });
+      if (selectedCity) {
+        city = selectedCity;
+        break;
+      }
+      startPoint++;
+      endPoint++;
+      subCity = string.substring(startPoint, endPoint);
+    }
+    if (city) {
+      while (city.name.includes(string.substring(startPoint, endPoint)) && endPoint <= string.length) {
+        endPoint++;
+      }
+      return {
+        province,
+        city,
+        string: string.substring(endPoint - 1)
+      };
+    }
+    return {
+      province,
+      city,
+      string
+    };
+  }
+  if (!province) {
+    let city;
+    let newProvince;
+    while (subCity.length === 2) {
+      // eslint-disable-next-line no-loop-func
+      geoTree.children.find(provinceItem => {
+        let selectedCity = provinceItem.children.find(city => {
+          if (city.name.indexOf(subCity) === 0) {
+            return true;
+          }
+          return false;
+        });
+        if (selectedCity) {
+          city = selectedCity;
+          newProvince = provinceItem;
+          return true;
+        }
+        return false;
+      });
+      if (city) {
+        break;
+      }
+      startPoint++;
+      endPoint++;
+      subCity = string.substring(startPoint, endPoint);
+    }
+    if (city) {
+      const name = city.name;
+      while (name.includes(string.substring(startPoint, endPoint)) && endPoint <= string.length) {
+        endPoint++;
+      }
+      return {
+        province: newProvince,
+        city,
+        string: string.substring(endPoint - 1)
+      };
+    } else {
+      return {
+        province,
+        city,
+        string
+      };
+    }
+  }
+}
+const getDistrict = (province, city, string, geoTree) => {
+  if (!string) {
+    return {
+      province,
+      city,
+      district: '',
+      detail: ''
+    };
+  }
+  let startPoint = 0;
+  let endPoint = 2;
+  let subDistrict = string.substring(startPoint, endPoint);
+  let district;
+  if (province) {
+    if (city) {
+      while (subDistrict.length === 2) {
+        // eslint-disable-next-line no-loop-func
+        let selectedDistrict = city.children.find(item => {
+          if (item.name.indexOf(subDistrict) === 0) {
+            return true;
+          }
+          return false;
+        });
+        if (selectedDistrict) {
+          district = selectedDistrict;
+          break;
+        }
+        startPoint++;
+        endPoint++;
+        subDistrict = string.substring(startPoint, endPoint);
+      }
+      if (district) {
+        const name = district.name;
+        while (name.includes(string.substring(startPoint, endPoint)) && endPoint <= string.length) {
+          endPoint++;
+        }
+        return {
+          province,
+          city,
+          district,
+          string: string.substring(endPoint - 1)
+        };
+      } else {
+        return {
+          province: initProvince,
+          city: initCity,
+          district,
+          string: string.substring(0)
+        };
+      }
+    } else {
+      let result = {
+        province,
+        city,
+        district: ''
+      };
+      for (let index = 0; index < province.children.length; index++) {
+        const city = province.children[index];
+        result = getDistrict(province, city, string, geoTree);
+        if (result.district) {
+          break;
+        }
+      }
+      return result;
+    }
+  } else {
+    let result = {
+      province,
+      city
+    };
+    const provinces = geoTree.children;
+    for (let provinceIndex = 0; provinceIndex < provinces.length; provinceIndex++) {
+      const province = provinces[provinceIndex];
+      const cities = province.children;
+      for (let cityIndex = 0; cityIndex < cities.length; cityIndex++) {
+        result = getDistrict(province, cities[cityIndex], string, geoTree);
+        if (result.district) {
+          break;
+        }
+      }
+      if (result.district) {
+        break;
+      }
+    }
+    return result;
+  }
+};
+const parseGeolocationString = (geoTree, geoString) => {
+  if (geoString === null || geoString.length < 2) {
+    return {
+      province: {},
+      city: {},
+      district: {},
+      detail: geoString
+    };
+  }
+  let string = geoString;
+  let provinceResult = getProvince(string, geoTree);
+  let province = provinceResult.province;
+  string = provinceResult.string;
+  const cityResult = getCity(province, string, geoTree);
+  province = cityResult.province;
+  let city = cityResult.city;
+  string = cityResult.string;
+  initProvince = province;
+  initCity = city;
+  let districtResult = getDistrict(province, city, string, geoTree);
+  let district = districtResult.district;
+  province = districtResult.province;
+  city = districtResult.city;
+  string = districtResult.string;
+  return {
+    province,
+    city,
+    district,
+    detail: string
+  };
+};
+var _default = exports.default = parseGeolocationString;

package/lib/GeolocationEditor/province-city-editor.js

@@ -0,0 +1,292 @@
+"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 _reactstrap = require("reactstrap");
+var _selectorList = _interopRequireDefault(require("./selector-list"));
+var _selectorHeaderItem = _interopRequireDefault(require("./selector-header-item"));
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _parseGeolocation = _interopRequireDefault(require("./parse-geolocation"));
+var _constants = require("../constants");
+var _lang = require("../lang");
+class ProvinceCityEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getLocationText = function () {
+      let province = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      let city = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      return province + city;
+    };
+    this.initLocationSelecting = value => {
+      let selectedProvince = this.locations.children.find(province => {
+        return value.province && value.province.length > 0 && province.name.includes(value.province);
+      });
+      if (!selectedProvince) {
+        return {
+          selectedProvince: null,
+          selectedCity: null,
+          selectedItem: 'province'
+        };
+      }
+      let selectedCity = selectedProvince.children.find(city => {
+        return value.city && value.city.length > 0 && city.name.includes(value.city);
+      });
+      if (!selectedCity) {
+        return {
+          selectedProvince,
+          selectedCity: null,
+          selectedItem: 'city'
+        };
+      }
+      return {
+        selectedProvince,
+        selectedCity,
+        selectedItem: 'city'
+      };
+    };
+    this.getLocationData = () => {
+      const {
+        mediaUrl
+      } = window.dtable;
+
+      // get locations from server
+      return fetch("".concat(mediaUrl, "geo-data/cn-location.json")).then(res => {
+        return res.json();
+      }).catch(() => {
+        // get locations from local
+        return fetch('./geo-data/cn-location.json').then(res => {
+          return res.json();
+        });
+      });
+    };
+    this.onToggleSelector = () => {
+      this.setState({
+        isShowSelector: !this.state.isShowSelector,
+        errMessage: ''
+      });
+    };
+    this.selectProvince = province => {
+      this.setState({
+        selectedProvince: province,
+        selectedItem: 'city',
+        selectedCity: null,
+        location: this.getLocationText(province.name)
+      });
+      this.value = Object.assign({}, this.value, {
+        province: province.name,
+        city: '',
+        district: ''
+      });
+      this.props.setValue(this.value);
+    };
+    this.selectCity = city => {
+      this.setState({
+        selectedCity: city,
+        isShowSelector: false,
+        location: this.getLocationText(this.state.selectedProvince.name, city.name)
+      });
+      this.value = Object.assign({}, this.value, {
+        city: city.name,
+        district: ''
+      });
+      this.props.setValue(this.value);
+    };
+    this.selectSelectorType = type => {
+      const {
+        selectedProvince
+      } = this.state;
+      if (!selectedProvince) return;
+      this.setState({
+        selectedItem: type
+      });
+    };
+    this.onClick = e => {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+    };
+    this.onParseChange = () => {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      this.timer = setTimeout(() => {
+        clearTimeout(this.timer);
+        this.timer = null;
+        const value = this.parseRef.value;
+        if (this.isComposing) return;
+        const {
+          province,
+          city
+        } = (0, _parseGeolocation.default)(this.locations, value);
+        this.value = Object.assign({}, this.value);
+        this.props.setValue(this.value);
+        if (!province) return;
+        this.selectProvince(province);
+        if (!city) return;
+        this.selectCity(city);
+      }, 100);
+    };
+    this.onCompositionStart = () => {
+      this.isComposing = true;
+    };
+    this.onCompositionEnd = () => {
+      this.isComposing = false;
+    };
+    this.onKeyDown = e => {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      if (e.keyCode === _constants.KeyCodes.Escape) {
+        this.props.onCancel();
+      }
+    };
+    this.onSubmit = () => {
+      const {
+        province,
+        city
+      } = this.value;
+      if (!province || !city) {
+        const errMessage = (0, _lang.getLocale)('Province/City_must_be_filled_in');
+        this.setState({
+          errMessage
+        });
+        return;
+      }
+      this.props.onSubmit();
+    };
+    this.createFooter = () => {
+      return /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, {
+        className: "dtable-ui-geolocation-editor-footer"
+      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+        onClick: this.props.onCancel,
+        color: "secondary"
+      }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+        onClick: this.onSubmit,
+        color: "primary",
+        autoFocus: true
+      }, (0, _lang.getLocale)('Submit')));
+    };
+    this.value = props.value || {};
+    this.locations = {};
+    this.state = {
+      isShowSelector: false,
+      location: this.getLocationText(this.value.province, this.value.city, this.value.district),
+      selectedProvince: null,
+      selectedCity: null,
+      selectedItem: 'province',
+      isLoadingData: true,
+      errMessage: ''
+    };
+    this.timer = null;
+    this.isComposing = false;
+  }
+  componentDidMount() {
+    if (!window.app.location) {
+      this.getLocationData().then(data => {
+        this.locations = data;
+        window.app.location = data;
+        const {
+          selectedProvince,
+          selectedCity,
+          selectedItem
+        } = this.initLocationSelecting(this.value);
+        this.setState({
+          isLoadingData: false,
+          selectedProvince,
+          selectedCity,
+          selectedItem
+        });
+      });
+    } else {
+      this.locations = window.app.location;
+      const {
+        selectedProvince,
+        selectedCity,
+        selectedItem
+      } = this.initLocationSelecting(this.value);
+      this.setState({
+        isLoadingData: false,
+        selectedProvince,
+        selectedCity,
+        selectedItem
+      });
+    }
+  }
+  render() {
+    const {
+      selectedItem,
+      selectedCity,
+      selectedProvince,
+      isShowSelector,
+      isLoadingData,
+      location
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoadingData ? /*#__PURE__*/_react.default.createElement("div", {
+      onClick: this.onClick,
+      className: "dtable-ui-geolocation-editor-content"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item dtable-ui-geolocation-editor-selector-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item-left"
+    }, (0, _lang.getLocale)('Address_information') + ':'), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item-right"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      onClick: this.onToggleSelector,
+      className: "dtable-ui-geolocation-editor-selector text-truncate ".concat(isShowSelector ? 'focus' : '')
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "selected-option-show"
+    }, location ? location : (0, _lang.getLocale)('Select_province_city')), /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-down3 dtable-ui-geolocation-editor-parameter-icon"
+    }))), isShowSelector && /*#__PURE__*/_react.default.createElement("div", {
+      className: "geolocation-selector-container"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "geolocation-selector-header"
+    }, /*#__PURE__*/_react.default.createElement(_selectorHeaderItem.default, {
+      type: "province",
+      clickHandler: this.selectSelectorType,
+      selectedType: selectedItem,
+      selectedItem: selectedProvince
+    }), /*#__PURE__*/_react.default.createElement(_selectorHeaderItem.default, {
+      type: "city",
+      clickHandler: this.selectSelectorType,
+      selectedType: selectedItem,
+      selectedItem: selectedCity
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "geolocation-selector-body"
+    }, selectedItem === 'province' && /*#__PURE__*/_react.default.createElement(_selectorList.default, {
+      type: "province",
+      parent: this.locations,
+      selectedItem: selectedProvince,
+      clickHandler: this.selectProvince
+    }), selectedItem === 'city' && /*#__PURE__*/_react.default.createElement(_selectorList.default, {
+      type: "city",
+      parent: selectedProvince,
+      selectedItem: selectedCity,
+      clickHandler: this.selectCity
+    })))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item dtable-ui-geolocation-editor-parse"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item-left"
+    }, (0, _lang.getLocale)('Auto_recognition') + ':'), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item-right"
+    }, /*#__PURE__*/_react.default.createElement("textarea", {
+      ref: ref => this.parseRef = ref,
+      placeholder: (0, _lang.getLocale)('Try_pasting_addresses_such_as_provinces/cities_information_to_quickly_identify_the_address_information'),
+      className: "dtable-ui-geolocation-editor-detail-info dtable-ui-geolocation-editor-recognition",
+      type: "text",
+      onChange: this.onParseChange,
+      onKeyDown: this.onKeyDown,
+      onCompositionEnd: this.onCompositionEnd,
+      onCompositionStart: this.onCompositionStart
+    })))) : /*#__PURE__*/_react.default.createElement(_Loading.default, null), this.state.errMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+      color: "danger",
+      className: "mt-2"
+    }, this.state.errMessage), this.createFooter());
+  }
+}
+var _default = exports.default = ProvinceCityEditor;