dtable-ui-component 5.3.6 → 5.3.8

package/lib/GeolocationEditor/country-editor.js

@@ -0,0 +1,319 @@
+"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 _constants = require("../constants");
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _lang = require("../lang");
+class CountryEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.onHotKey = e => {
+      if (e.keyCode === _constants.KeyCodes.Enter) {
+        this.onEnter(e);
+      } else if (e.keyCode === _constants.KeyCodes.UpArrow) {
+        this.onUpArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.DownArrow) {
+        this.onDownArrow(e);
+      } else if (e.keyCode === _constants.KeyCodes.Tab) {
+        if (this.props.onPressTab) {
+          this.props.onPressTab(e);
+        }
+      }
+    };
+    this.onDownArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndexes
+      } = this.state;
+      const continents = Object.keys(this.filteredCountry);
+      if (continents.length === 0) return;
+      const continent = continents[highlightIndexes[0]];
+      if (highlightIndexes[1] < this.filteredCountry[continent].length - 1) {
+        highlightIndexes[1] = highlightIndexes[1] + 1;
+      } else if (highlightIndexes[1] === this.filteredCountry[continent].length - 1 && highlightIndexes[0] < continents.length - 1) {
+        highlightIndexes[0] = highlightIndexes[0] + 1;
+        highlightIndexes[1] = 0;
+      }
+      this.setState({
+        highlightIndexes: [...highlightIndexes]
+      }, () => {
+        let itemCount = this.getItemCount(highlightIndexes[0], highlightIndexes[1]);
+        if (itemCount >= this.maxItemNum) {
+          this.selectContainer.scrollTop += this.itemHeight * (highlightIndexes[1] === 0 ? 2 : 1);
+        }
+      });
+    };
+    this.onUpArrow = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let {
+        highlightIndexes
+      } = this.state;
+      const continents = Object.keys(this.filteredCountry);
+      if (continents.length === 0) return;
+      if (highlightIndexes[1] === 0 && highlightIndexes[0] !== 0) {
+        highlightIndexes[0] = highlightIndexes[0] - 1;
+        highlightIndexes[1] = this.filteredCountry[continents[highlightIndexes[0]]].length - 1;
+      } else if (highlightIndexes[1] === 0 && highlightIndexes[0] === 0) {
+        highlightIndexes = [0, 0];
+      } else {
+        highlightIndexes[1] = highlightIndexes[1] - 1;
+      }
+      this.setState({
+        highlightIndexes: [...highlightIndexes]
+      }, () => {
+        let itemCount = this.getItemCount(highlightIndexes[0], highlightIndexes[1]);
+        if (itemCount < this.getItemCount(continents.length - 1, this.filteredCountry[continents[continents.length - 1]].length - 1) - this.maxItemNum) {
+          this.selectContainer.scrollTop -= this.itemHeight * (highlightIndexes[1] === 0 ? 2 : 1);
+        }
+      });
+    };
+    this.getItemCount = (continentIndex, countryIndex) => {
+      const continents = Object.keys(this.filteredCountry);
+      let count = continentIndex + 1;
+      for (let index = 0; index < continentIndex; index++) {
+        count += this.filteredCountry[continents[index]].length;
+      }
+      count = count + countryIndex;
+      return count;
+    };
+    this.onEnter = e => {
+      e.stopPropagation();
+      const cuntries = Object.values(this.filteredCountry).flat();
+      if (cuntries && cuntries.length === 1) {
+        this.props.setValue({
+          country_region: cuntries[0]
+        });
+        this.props.onSubmit();
+      } else {
+        const {
+          highlightIndexes
+        } = this.state;
+        const continents = Object.keys(this.filteredCountry);
+        if (continents.length > 0) {
+          const continent = continents[highlightIndexes[0]];
+          const country = this.filteredCountry[continent][highlightIndexes[1]];
+          if (!country) return;
+          this.props.setValue({
+            country_region: country
+          });
+          this.props.onSubmit();
+        }
+      }
+    };
+    this.onMenuMouseEnter = (continentIndex, countryIndex) => {
+      this.setState({
+        highlightIndexes: [continentIndex, countryIndex]
+      });
+    };
+    this.onMenuMouseLeave = (continentIndex, countryIndex) => {
+      this.timer = setTimeout(() => {
+        const {
+          highlightIndexes
+        } = this.state;
+        if (highlightIndexes[0] === continentIndex && highlightIndexes[1] === countryIndex) {
+          this.setState({
+            highlightIndexes: [0, -1]
+          });
+        }
+      }, 300);
+    };
+    this.getLocationData = () => {
+      const {
+        config
+      } = this.props;
+      const {
+        mediaUrl
+      } = {
+        ...window.dtable,
+        ...config
+      };
+      let geoFileName = 'en-region-location';
+      if (this.lang === 'cn') {
+        geoFileName = 'cn-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();
+        });
+      });
+    };
+    this.createContinentList = () => {
+      let isSearchResultEmpty = true;
+      const continents = Object.keys(this.filteredCountry);
+      const continentsList = continents.map((continent, index) => {
+        const countryList = this.createCountryList(continent, index);
+        if (countryList.length > 0) {
+          isSearchResultEmpty = false;
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+            key: continent
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "geolocation-region-editor-continent"
+          }, continent), countryList);
+        }
+        return null;
+      });
+      if (isSearchResultEmpty) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "country-list-empty"
+        }, (0, _lang.getLocale)('No_options'));
+      }
+      return continentsList;
+    };
+    this.createCountryList = (continent, continentIndex) => {
+      const {
+        value,
+        highlightIndexes
+      } = this.state;
+      let countryList = this.filteredCountry[continent].map((country, index) => {
+        const isHighlight = highlightIndexes[0] === continentIndex && highlightIndexes[1] === index;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "geolocation-region-editor-country ".concat(isHighlight ? 'geolocation-region-editor-province-highlight' : ''),
+          key: country,
+          onMouseEnter: () => this.onMenuMouseEnter(continentIndex, index),
+          onMouseLeave: () => this.onMenuMouseLeave(continentIndex, index),
+          title: country,
+          "aria-label": country,
+          onClick: () => this.onClick(country)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "icon ".concat(value === country ? 'dtable-font dtable-icon-check-mark' : '')
+        }), /*#__PURE__*/_react.default.createElement("span", {
+          className: "country-name"
+        }, country));
+      });
+      return countryList;
+    };
+    this.onClick = country => {
+      this.props.setValue({
+        country_region: country
+      });
+      this.props.onSubmit();
+    };
+    this.onChange = e => {
+      const value = e.target.value.trim();
+      if (value.length === 0) {
+        this.countryReg = null;
+      }
+      if (value.length > 0) {
+        let regStr = '(.*)' + value.split('').join('(.*)') + '(.*)';
+        this.countryReg = new RegExp(regStr, 'i');
+      }
+      this.filteredCountry = this.filterCountry();
+      this.setState({
+        searchingCountry: e.target.value,
+        highlightIndexes: Object.keys(this.filteredCountry).length > 0 ? [0, 0] : [0, -1]
+      });
+    };
+    this.filterCountry = () => {
+      const continents = Object.keys(this.geolocationRegions);
+      const map = {};
+      for (let i = 0; i < continents.length; i++) {
+        const countries = this.geolocationRegions[continents[i]];
+        const continent = continents[i];
+        map[continent] = [];
+        countries.forEach(item => {
+          if (this.countryReg && this.countryReg.test(item)) {
+            map[continent].push(item);
+          } else if (!this.countryReg) {
+            map[continent].push(item);
+          }
+        });
+        if (map[continent].length === 0) {
+          delete map[continent];
+        }
+      }
+      return map;
+    };
+    this.onKeyDown = e => {
+      if (e.keyCode === _constants.KeyCodes.ChineseInputMethod || e.keyCode === _constants.KeyCodes.Enter || e.keyCode === _constants.KeyCodes.LeftArrow || e.keyCode === _constants.KeyCodes.RightArrow) {
+        e.stopPropagation();
+      }
+    };
+    this.countryReg = null;
+    const {
+      column,
+      value: _value
+    } = props;
+    const columnData = column.data || {};
+    this.lang = columnData.lang === 'cn' ? 'cn' : 'en';
+    this.state = {
+      searchingCountry: '',
+      value: _value.country_region,
+      isLoadingData: true,
+      highlightIndexes: [0, -1]
+    };
+    this.filteredCountry = [];
+    this.timer = null;
+    this.maxItemNum = 6;
+    this.itemHeight = 30;
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.onHotKey, true);
+    if (this.lang === 'cn' && window.app.countryListCn) {
+      this.geolocationRegions = window.app.countryListCn;
+      this.filteredCountry = this.geolocationRegions;
+      this.setState({
+        isLoadingData: false
+      });
+      return;
+    }
+    if (this.lang !== 'cn' && window.app.countryListEn) {
+      this.geolocationRegions = window.app.countryListEn;
+      this.filteredCountry = this.geolocationRegions;
+      this.setState({
+        isLoadingData: false
+      });
+      return;
+    }
+    this.getLocationData().then(data => {
+      this.geolocationRegions = data || {};
+      this.filteredCountry = this.geolocationRegions;
+      if (this.lang === 'cn') {
+        window.app.countryListCn = this.geolocationRegions;
+      } else {
+        window.app.countryListEn = this.geolocationRegions;
+      }
+      this.setState({
+        isLoadingData: false
+      });
+    });
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onHotKey, true);
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  }
+  render() {
+    const {
+      isLoadingData
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-country-editor"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "geolocation-region-list-header"
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      value: this.state.searchingCountry,
+      onChange: this.onChange,
+      autoFocus: true,
+      onKeyDown: this.onKeyDown,
+      placeholder: (0, _lang.getLocale)('Search_country')
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "geolocation-region-list-container",
+      ref: ref => this.selectContainer = ref
+    }, isLoadingData ? /*#__PURE__*/_react.default.createElement(_Loading.default, null) : this.createContinentList()));
+  }
+}
+var _default = exports.default = CountryEditor;