dtable-ui-component 5.3.1-beta → 5.3.1

package/lib/GeolocationEditor/province-editor.js

@@ -1,226 +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 _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
-var _constants = require("../constants");
-var _Loading = _interopRequireDefault(require("../Loading"));
-var _lang = require("../lang");
-class ProvinceEditor extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.getLocationData = () => {
-      // mediaUrl
-      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.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.onEnter = e => {
-      e.stopPropagation();
-      let selectedProvince;
-      if (this.filteredProvince.length === 1) {
-        selectedProvince = this.filteredProvince[0];
-      } else if (this.state.highlightIndex > -1) {
-        selectedProvince = this.filteredProvince[this.state.highlightIndex];
-      }
-      if (selectedProvince) {
-        this.props.setValue({
-          province: selectedProvince.name
-        });
-        this.props.onSubmit();
-      }
-    };
-    this.onUpArrow = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      let {
-        highlightIndex
-      } = this.state;
-      if (highlightIndex > 0) {
-        this.setState({
-          highlightIndex: highlightIndex - 1
-        }, () => {
-          if (highlightIndex < this.filteredProvince.length - this.maxItemNum) {
-            this.selectContainer.scrollTop -= this.itemHeight;
-          }
-        });
-      }
-    };
-    this.onDownArrow = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      let {
-        highlightIndex
-      } = this.state;
-      if (highlightIndex < this.filteredProvince.length - 1) {
-        this.setState({
-          highlightIndex: highlightIndex + 1
-        }, () => {
-          if (highlightIndex >= this.maxItemNum) {
-            this.selectContainer.scrollTop += this.itemHeight;
-          }
-        });
-      }
-    };
-    this.onClick = province => {
-      this.props.setValue({
-        province
-      });
-      this.setState({
-        value: province
-      });
-      this.props.onSubmit();
-    };
-    this.onChange = searchVal => {
-      const value = searchVal.trim();
-      if (value === this.state.searchingProvince) return;
-      if (value.length === 0) {
-        this.provinceReg = null;
-      }
-      if (value.length > 0) {
-        this.provinceReg = new RegExp(value, 'i');
-      }
-      this.filteredProvince = this.locations.children.filter(item => {
-        if (!this.provinceReg) {
-          return true;
-        }
-        return this.provinceReg.test(item.name) || this.provinceReg.test(item.alphabetic);
-      });
-      this.setState({
-        searchingProvince: value,
-        highlightIndex: this.filteredProvince.length > 0 ? 0 : -1
-      });
-    };
-    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.onMenuMouseEnter = index => {
-      this.setState({
-        highlightIndex: index
-      });
-    };
-    this.onMenuMouseLeave = index => {
-      this.timer = setTimeout(() => {
-        if (this.state.highlightIndex === index) {
-          this.setState({
-            highlightIndex: -1
-          });
-        }
-      }, 300);
-    };
-    this.createProvinceList = () => {
-      const {
-        value,
-        highlightIndex
-      } = this.state;
-      let provinceList = this.filteredProvince.map((item, index) => {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: "geolocation-region-editor-province ".concat(highlightIndex === index ? 'geolocation-region-editor-province-highlight' : ''),
-          key: item.alphabetic + index,
-          title: item.name,
-          "aria-label": item.name,
-          onClick: () => this.onClick(item.name),
-          onMouseEnter: () => this.onMenuMouseEnter(index),
-          onMouseLeave: () => this.onMenuMouseLeave(index)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "province-name"
-        }, item.name), /*#__PURE__*/_react.default.createElement("span", {
-          className: "icon ".concat(value === item.name ? 'province-selected-icon dtable-font dtable-icon-check-mark' : '')
-        }));
-      });
-      if (provinceList.length === 0) {
-        provinceList.push( /*#__PURE__*/_react.default.createElement("div", {
-          key: 'province-null',
-          className: "country-list-empty"
-        }, (0, _lang.getLocale)('No_options')));
-      }
-      return provinceList;
-    };
-    this.value = props.value || {};
-    this.locations = {};
-    this.state = {
-      isLoadingData: true,
-      searchingProvince: '',
-      value: this.value.province,
-      highlightIndex: -1
-    };
-    this.filteredProvince = [];
-    this.timer = null;
-    this.maxItemNum = 5;
-    this.itemHeight = 30;
-  }
-  componentDidMount() {
-    if (!window.app.location) {
-      this.getLocationData().then(data => {
-        this.locations = data;
-        window.app.location = data;
-        this.filteredProvince = this.locations.children;
-        this.setState({
-          isLoadingData: false
-        });
-      });
-    } else {
-      this.locations = window.app.location;
-      this.filteredProvince = this.locations.children;
-      this.setState({
-        isLoadingData: false
-      });
-    }
-    document.addEventListener('keydown', this.onHotKey, true);
-  }
-  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-province-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-province-list-header"
-    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
-      placeholder: (0, _lang.getLocale)('Search_province'),
-      onKeyDown: this.onKeyDown,
-      onChange: this.onChange,
-      autoFocus: true
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "geolocation-province-list-container",
-      ref: ref => this.selectContainer = ref
-    }, isLoadingData ? /*#__PURE__*/_react.default.createElement(_Loading.default, null) : this.createProvinceList()));
-  }
-}
-var _default = exports.default = ProvinceEditor;

package/lib/GeolocationEditor/selector-header-item.js

@@ -1,28 +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 _lang = require("../lang");
-class SelectorHeaderItem extends _react.default.Component {
-  render() {
-    const {
-      type,
-      clickHandler,
-      selectedType,
-      selectedItem
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: 'dtable-ui-geolocation-selector-header-item ' + (selectedType === type ? 'selected-dtable-ui-geolocation-selector-header-item' : ''),
-      onClick: () => {
-        clickHandler(type);
-      }
-    }, /*#__PURE__*/_react.default.createElement("span", null, selectedItem ? selectedItem.name ? selectedItem.name : selectedItem : (0, _lang.getLocale)('Select_location')), /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-down3"
-    }));
-  }
-}
-var _default = exports.default = SelectorHeaderItem;

package/lib/GeolocationEditor/selector-list.js

@@ -1,33 +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"));
-class SelectorList extends _react.default.Component {
-  render() {
-    const {
-      clickHandler,
-      type,
-      selectedItem,
-      parent,
-      doubleClickHandler
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("ul", {
-      className: "dtable-ui-geolocation-selector-list"
-    }, parent.children.map((item, index) => {
-      const isSelected = selectedItem && item.name === selectedItem.name;
-      return /*#__PURE__*/_react.default.createElement("li", {
-        onClick: () => clickHandler(item),
-        onDoubleClick: () => {
-          doubleClickHandler && doubleClickHandler(item);
-        },
-        key: type + '-item-' + index,
-        className: "dtable-ui-geolocation-selector-list-item ".concat(type === 'province' ? 'province-item' : '', " ").concat(isSelected ? 'selected-list-item' : '')
-      }, item.name);
-    }));
-  }
-}
-var _default = exports.default = SelectorList;

package/lib/GeolocationEditor/with-ref.js

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-// Just do one thing, pass `WrappedComponent` back to `getInstance` (if any)
-const withRef = WrappedComponent => {
-  var _withRef;
-  return _withRef = class withRef extends _react.Component {
-    render() {
-      // You directly modify this.props.ref in the react development mode will report an error, you are not allowed to modify
-      const props = {
-        ...this.props
-      };
-      // Assign getInstance to ref here
-      // Pass to `WrappedComponent` so that getInstance can get the `WrappedComponent` instance
-      if (typeof this.props.getInstance === 'function') {
-        props.ref = this.props.getInstance;
-      }
-      return /*#__PURE__*/_react.default.createElement(WrappedComponent, props);
-    }
-  }, _withRef.displayName = "withRef(".concat(WrappedComponent.displayName || WrappedComponent.name || 'Component', ")"), _withRef;
-};
-var _default = exports.default = withRef;

package/lib/ImageEditor/addition-previewer/image-link/index.css

@@ -1,45 +0,0 @@
-.dtable-ui-image-link {
-  width: 100%;
-  padding: 6rem 0;
-}
-
-.dtable-ui-image-link-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dtable-ui-image-link-input {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  width: 50%;
-}
-
-.dtable-ui-image-link-input:focus {
-  z-index: 2;
-}
-
-.dtable-ui-image-link-icon {
-  display: flex;
-  width: 2.375rem;
-  height: 2.375rem;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid rgba(0, 40, 100, 0.12);
-  border-left: none;
-  color: #a6aeb6;
-  cursor: pointer;
-  border-radius: 0 3px 3px 0;
-  background: #fafafa;
-}
-
-.dtable-ui-image-link-icon:hover {
-  background: #ededed;
-}
-
-.dtable-ui-image-link-error-message {
-  margin-top: 10px;
-  text-align: center;
-  color: red;
-}

package/lib/ImageEditor/addition-previewer/image-link/index.js

@@ -1,73 +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 _reactstrap = require("reactstrap");
-var _lang = require("../../../lang");
-require("./index.css");
-class ImageLink extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.saveImageLink = () => {
-      let {
-        imageLink
-      } = this.state;
-      let _this = this;
-      let image = new Image();
-      image.onload = function () {
-        // Determine if the picture url is correct
-        if (image.fileSize > 0 || image.width > 0 && image.height > 0) {
-          _this.props.saveImageLink(imageLink);
-        }
-      };
-      image.onerror = function () {
-        _this.setState({
-          isShowErrorMessage: true
-        });
-      };
-      image.src = imageLink;
-    };
-    this.handleChange = event => {
-      let value = event.target.value;
-      this.setState({
-        imageLink: value
-      });
-    };
-    this.imageLinkPaste = e => {
-      e.stopPropagation();
-    };
-    this.onKeyDown = e => {
-      e.stopPropagation();
-    };
-    this.state = {
-      imageLink: '',
-      isShowErrorMessage: false
-    };
-  }
-  render() {
-    const {
-      isShowErrorMessage
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-link",
-      onKeyDown: this.onKeyDown
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-link-container"
-    }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
-      className: "dtable-ui-image-link-input",
-      placeholder: (0, _lang.getLocale)('Enter_a_URL'),
-      onPaste: this.imageLinkPaste,
-      onChange: this.handleChange
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-image-link-icon dtable-font dtable-icon-url",
-      onClick: this.saveImageLink
-    })), isShowErrorMessage && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-link-error-message"
-    }, (0, _lang.getLocale)('Please_enter_the_correct_image_address')));
-  }
-}
-var _default = exports.default = ImageLink;

package/lib/ImageEditor/addition-previewer/index.css

@@ -1,106 +0,0 @@
-.dtable-ui-image-addition-left {
-  border-right: 1px solid #e9ecef;
-  width: 150px;
-  padding: 12px 8px;
-}
-
-.dtable-ui-image-addition-left .dtable-ui-addition-item {
-  padding: 5px 0 5px 8px;
-  border-radius: 3px;
-  display: inline-block;
-  cursor: pointer;
-  width: 100%;
-}
-
-.dtable-ui-image-addition-left .dtable-ui-addition-item:hover {
-  background-color: #f5f5f5;
-}
-
-.dtable-ui-image-addition-container .dtable-ui-image-addition-left .dtable-ui-addition-item-selected {
-  background-color: #FF8000;
-  color: #fff;
-}
-
-.dtable-ui-image-addition-right {
-  height: 350px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 1rem;
-  width: 470px;
-}
-
-.dtable-ui-image-addition-right.dtable-ui-image-addition-right-recent {
-  padding: 0;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-addition-right-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  width: 100%;
-  height: 100%;
-}
-
-.dtable-ui-image-addition-right.dtable-ui-image-addition-right-recent .dtable-ui-image-addition-right-container {
-  width: 100%;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-upload-container {
-  height: 100%;
-  width: 100%;
-  border: 1px dashed transparent;
-  position: relative;
-  cursor: pointer;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-upload-container-active {
-  border: 1px dashed #ccc;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-upload-container .dtable-ui-image-add-span {
-  margin-top: 5px;
-  font-size: 12px;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-upload-container .image-addition-paste {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  pointer-events: none;
-  opacity: 0;
-  z-index: 3;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-wrapper {
-  height: 100px;
-  width: 100px;
-  border: 2px solid #ededed;
-  border-radius: 4px;
-  position: relative;
-  margin-right: 12px;
-  margin-bottom: 12px;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-wrapper:hover {
-  border-color: #c9c9c9;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-wrapper:nth-child(4n) {
-  margin-right: 0px;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-wrapper .dtable-ui-image-content {
-  width: 96px;
-  height: 96px;
-  text-align: center;
-  line-height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dtable-ui-image-addition-right .dtable-ui-image-wrapper img {
-  max-height: 96px;
-  max-width: 96px;
-}

package/lib/ImageEditor/addition-previewer/index.js

@@ -1,63 +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 _localImageAddition = _interopRequireDefault(require("./local-image-addition"));
-var _imageLink = _interopRequireDefault(require("./image-link"));
-var _lang = require("../../lang");
-require("./index.css");
-class AdditionPreviewer extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.toggle = tab => {
-      if (this.state.activeTab !== tab) {
-        this.setState({
-          activeTab: tab
-        });
-      }
-    };
-    this.addFiles = fileSelectedList => {
-      this.props.addUploadedFile(fileSelectedList);
-      setTimeout(() => {
-        this.props.showImageListPreviewer();
-      }, 0);
-    };
-    this.state = {
-      activeTab: 'localPicture'
-    };
-  }
-  render() {
-    const {
-      activeTab
-    } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-left"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-nav"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-addition-item ".concat(activeTab === 'localPicture' ? 'dtable-ui-addition-item-selected' : ''),
-      onClick: this.toggle.bind(this, 'localPicture')
-    }, (0, _lang.getLocale)('Local_Images')), this.props.saveImageLink && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-addition-item ".concat(activeTab === 'imageLink' ? 'dtable-ui-addition-item-selected' : ''),
-      onClick: this.toggle.bind(this, 'imageLink')
-    }, (0, _lang.getLocale)('Image_Link')))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-right"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-image-addition-right-container"
-    }, activeTab === 'localPicture' && /*#__PURE__*/_react.default.createElement(_localImageAddition.default, {
-      uploadLocalImageValue: this.props.uploadLocalImageValue,
-      deleteImage: this.props.deleteImage,
-      fileUploadCompleted: this.props.fileUploadCompleted,
-      uploadFile: this.props.uploadFile
-    }), activeTab === 'imageLink' && /*#__PURE__*/_react.default.createElement(_imageLink.default, {
-      saveImageLink: this.props.saveImageLink
-    }))));
-  }
-}
-var _default = exports.default = AdditionPreviewer;