dtable-ui-component 5.3.1-beta1 → 6.0.0

package/lib/GeolocationEditor/index.js

@@ -1,241 +0,0 @@
-"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

@@ -1,368 +0,0 @@
-"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;