dtable-ui-component 6.0.2 → 6.0.4

package/lib/GeolocationEditor/province-editor.js

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

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

@@ -0,0 +1,33 @@
+"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/ImageEditor/addition-previewer/image-link/index.css

@@ -0,0 +1,45 @@
+.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

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

@@ -0,0 +1,106 @@
+.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

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

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

@@ -0,0 +1,125 @@
+.dtable-ui-image-add-box {
+  display: flex;
+  background: #f0f0f0;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.dtable-ui-image-add-box .dtable-ui-image-add-button {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 10px 0;
+}
+
+.dtable-ui-image-add-box .dtable-ui-image-add-button i {
+  color: #999;
+  font-size: 25px;
+}
+
+dtable-ui-image-add-box .dtable-ui-image-add-span {
+  color: #999;
+  margin-top: 5px;
+  font-size: 12px;
+}
+
+.dtable-ui-dtable-ui-image-add-icon {
+  line-height: 1;
+}
+
+.dtable-ui-dtable-ui-image-add-icon i {
+  font-size: 54px;
+  color: #ccc;
+}
+
+.dtable-ui-image-tip-addition {
+  text-align: center;
+  padding: 6rem 4rem;
+  width: 100%;
+}
+
+.dtable-ui-image-upload-percent {
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.dtable-ui-image-upload-success {
+  width: 60px;
+  height: 60px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 2px;
+  position: absolute;
+  z-index: 5;
+}
+
+.dtable-ui-image-upload-success .dtable-ui-image-upload-success-scale {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.dtable-ui-image-upload-success .dtable-ui-image-upload-success-scale .dtable-ui-image-upload-success-tip {
+  color: #fff;
+  font-size: 12px;
+  width: 100%;
+  transform: scale(0.8);
+  text-align: center;
+}
+
+.dtable-ui-image-upload-success .dtable-ui-image-upload-success-icon i {
+  display: inline-block;
+  color: #757474;
+}
+
+.dtable-ui-image-upload-mask {
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 2;
+  border-radius: 2px;
+}
+
+.dtable-ui-image-upload-error-tip {
+  z-index: 3;
+  font-size: 12px;
+  transform: scale(0.7);
+  position: absolute;
+  color: #fff;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.dtable-ui-image-upload-again {
+  text-decoration: underline;
+  cursor: pointer;
+  margin-left: 3px;
+}
+
+.dtable-delete-image-icon {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  height: 32px;
+  width: 32px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+  transform: scale(0.5);
+}
+
+.dtable-delete-image-icon .image-delete-span {
+  font-size: 20px;
+}