dtable-ui-component 5.3.0-alpha1 → 5.3.1-beta

package/lib/GeolocationEditor/index.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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 _withRef = _interopRequireDefault(require("./with-ref"));
+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
+            }));
+          }
+      }
+    };
+    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() {
+    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());
+  }
+}
+var _default = exports.default = (0, _withRef.default)(GeolocationEditor);

package/lib/GeolocationEditor/location-editor.js

@@ -0,0 +1,368 @@
+"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 _constants = require("../constants");
+var _Loading = _interopRequireDefault(require("../Loading"));
+var _parseGeolocation = _interopRequireDefault(require("./parse-geolocation"));
+var _lang = require("../lang");
+class LocationEditor extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getLocationText = (province, city, district) => {
+      return (province ? province.name : '') + (city ? city.name : '') + (district ? district.name : '');
+    };
+    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,
+          selectedCounty: 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,
+          selectedCounty: null,
+          selectedItem: 'city'
+        };
+      }
+      let selectedCounty = selectedCity.children.find(county => {
+        return value.district && value.district.length > 0 && county.name.includes(value.district);
+      });
+      if (!selectedCounty) {
+        return {
+          selectedProvince,
+          selectedCity,
+          selectedCounty: null,
+          selectedItem: 'county'
+        };
+      }
+      return {
+        selectedProvince,
+        selectedCity,
+        selectedCounty,
+        selectedItem: 'county'
+      };
+    };
+    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.onKeyDown = e => {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      if (e.keyCode === _constants.KeyCodes.Escape) {
+        this.props.onCancel();
+      }
+    };
+    this.onToggleSelector = () => {
+      this.setState({
+        isShowSelector: !this.state.isShowSelector,
+        errMessage: ''
+      });
+    };
+    this.selectProvince = province => {
+      this.setState({
+        selectedProvince: province,
+        selectedItem: province ? 'city' : 'province',
+        selectedCity: null,
+        selectedCounty: null,
+        location: this.getLocationText(province)
+      });
+      this.value = Object.assign({}, this.value, {
+        province: province ? province.name : '',
+        city: '',
+        district: ''
+      });
+      this.props.setValue(this.value);
+    };
+    this.selectCity = city => {
+      this.setState({
+        selectedCity: city,
+        selectedItem: city ? 'county' : 'city',
+        selectedCounty: null,
+        location: this.getLocationText(this.state.selectedProvince, city)
+      });
+      this.value = Object.assign({}, this.value, {
+        city: city ? city.name : '',
+        district: ''
+      });
+      this.props.setValue(this.value);
+    };
+    this.selectCounty = county => {
+      this.setState({
+        selectedCounty: county,
+        isShowSelector: false,
+        location: this.getLocationText(this.state.selectedProvince, this.state.selectedCity, county)
+      });
+      this.value = Object.assign({}, this.value, {
+        district: county ? county.name : ''
+      });
+      this.props.setValue(this.value);
+    };
+    this.selectSelectorType = type => {
+      const {
+        selectedProvince,
+        selectedCity
+      } = this.state;
+      if (!selectedProvince) return;
+      if (type === 'county' && !selectedCity) return;
+      this.setState({
+        selectedItem: type
+      });
+    };
+    this.onChange = () => {
+      this.value = Object.assign({}, this.value, {
+        detail: this.detailInfo.value
+      });
+      this.props.setValue(this.value);
+    };
+    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,
+          district,
+          detail
+        } = (0, _parseGeolocation.default)(this.locations, value);
+        if (this.detailInfo) {
+          this.detailInfo.value = detail || '';
+          this.value = Object.assign({}, this.value, {
+            detail: this.detailInfo.value
+          });
+        }
+        this.props.setValue(this.value);
+        this.selectProvince(province);
+        if (!province) return;
+        this.selectCity(city);
+        if (!city) return;
+        this.selectCounty(district);
+      }, 100);
+    };
+    this.onCompositionStart = () => {
+      this.isComposing = true;
+    };
+    this.onCompositionEnd = () => {
+      this.isComposing = false;
+    };
+    this.onSubmit = () => {
+      const {
+        province,
+        city,
+        district
+      } = this.value;
+      if (!province || !city || !district) {
+        const errMessage = (0, _lang.getLocale)('Province/City/District_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"
+      }, (0, _lang.getLocale)('Submit')));
+    };
+    this.value = props.value;
+    this.locations = {};
+    this.state = {
+      isShowSelector: false,
+      location: "".concat(this.value.province || '').concat(this.value.city || '').concat(this.value.district || ''),
+      selectedProvince: null,
+      selectedCity: null,
+      selectedCounty: null,
+      selectedItem: 'province',
+      isLoadingData: true,
+      errMessage: ''
+    };
+    this.isComposing = false;
+    this.timer = null;
+  }
+  UNSAFE_componentWillMount() {
+    if (!window.app.location) {
+      this.getLocationData().then(data => {
+        this.locations = data;
+        window.app.location = data;
+        const {
+          selectedProvince,
+          selectedCity,
+          selectedCounty,
+          selectedItem
+        } = this.initLocationSelecting(this.value);
+        this.setState({
+          isLoadingData: false,
+          selectedProvince,
+          selectedCity,
+          selectedCounty,
+          selectedItem
+        });
+      });
+    } else {
+      this.locations = window.app.location;
+      const {
+        selectedProvince,
+        selectedCity,
+        selectedCounty,
+        selectedItem
+      } = this.initLocationSelecting(this.value);
+      this.setState({
+        isLoadingData: false,
+        selectedProvince,
+        selectedCity,
+        selectedCounty,
+        selectedItem
+      });
+    }
+  }
+  render() {
+    const {
+      selectedItem,
+      selectedCity,
+      selectedProvince,
+      selectedCounty,
+      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_district')), /*#__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(_selectorHeaderItem.default, {
+      type: "county",
+      clickHandler: this.selectSelectorType,
+      selectedType: selectedItem,
+      selectedItem: selectedCounty
+    })), /*#__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
+    }), selectedItem === 'county' && /*#__PURE__*/_react.default.createElement(_selectorList.default, {
+      type: "county",
+      parent: selectedCity,
+      selectedItem: selectedCounty,
+      clickHandler: this.selectCounty
+    })))), this.props.isShowAddressDetail && /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item dtable-ui-geolocation-editor-detail"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item-left"
+    }, (0, _lang.getLocale)('Detailed_address') + ':'), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-editor-item-right"
+    }, /*#__PURE__*/_react.default.createElement("textarea", {
+      ref: ref => this.detailInfo = ref,
+      placeholder: (0, _lang.getLocale)('Detailed_address_placeholder'),
+      className: "dtable-ui-geolocation-editor-detail-info",
+      type: "text",
+      onChange: this.onChange,
+      defaultValue: this.value.detail,
+      onKeyDown: this.onKeyDown,
+      autoFocus: true
+    }))), /*#__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/districts_roads_neighborhoods_etc_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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Loading.default, null), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        textAlign: 'center'
+      }
+    }, (0, _lang.getLocale)('Loading_geolocation_data'))), this.state.errMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+      color: "danger",
+      className: "mt-2"
+    }, this.state.errMessage), this.createFooter());
+  }
+}
+var _default = exports.default = LocationEditor;