dtable-ui-component 0.1.75-beta → 0.1.75-beta1

package/lib/components/common/images-lazy-load.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _utils = require("../../utils/utils");
+
+var propTypes = {
+  images: _propTypes.default.array.isRequired,
+  server: _propTypes.default.string,
+  onImageClick: _propTypes.default.func
+};
+
+var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ImagesLazyLoad, _React$Component);
+
+  function ImagesLazyLoad(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
+      var images = _this.state.images;
+
+      _this.lazyLoadImages(images);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillReceiveProps", function (nextProps) {
+      if (nextProps.images.toString() !== _this.props.images.toString()) {
+        _this.lazyLoadImages(nextProps.images);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
+      // prevent async operation
+      _this.setState = function (state, callback) {
+        return;
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lazyLoadImages", function (images) {
+      if (!Array.isArray(images) || images.length === 0) {
+        return;
+      }
+
+      var server = _this.props.server.server;
+      images.forEach(function (item) {
+        var url = (0, _utils.getImageThumbnailUrl)(item, server);
+
+        _this.lazyLoadImage(url, function (image) {
+          var _this$state = _this.state,
+              loadedCount = _this$state.loadedCount,
+              loadedImages = _this$state.loadedImages;
+
+          _this.setState({
+            loadedCount: loadedCount + 1,
+            loadedImages: loadedImages.concat(image)
+          });
+        }, function () {
+          var loadedCount = _this.state.loadedCount;
+
+          _this.setState({
+            loadedCount: loadedCount + 1
+          });
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lazyLoadImage", function (url, resolve, reject) {
+      if (!url) {
+        reject('img path is require');
+        return;
+      }
+
+      var image = new Image();
+
+      image.onload = function () {
+        resolve(image);
+      };
+
+      image.onerror = function (e) {
+        reject(e);
+      };
+
+      image.src = url;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseDown", function (event) {
+      event.stopPropagation();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageClick", function (event, index) {
+      event.stopPropagation();
+
+      _this.props.onImageClick(index);
+    });
+    _this.state = {
+      images: props.images,
+      loadedImages: [],
+      loadedCount: 0
+    };
+    return _this;
+  }
+
+  var _proto = ImagesLazyLoad.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$state2 = this.state,
+        images = _this$state2.images,
+        loadedImages = _this$state2.loadedImages,
+        loadedCount = _this$state2.loadedCount;
+
+    if (!Array.isArray(images) || images.length === 0) {
+      return '';
+    }
+
+    if (images.length > loadedCount) {
+      var style = {
+        marginLeft: '4px'
+      };
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/_react.default.createElement(_loading.default, null));
+    }
+
+    if (images.length === loadedCount) {
+      return loadedImages.map(function (image, index) {
+        return /*#__PURE__*/_react.default.createElement("img", {
+          key: index,
+          className: "image-item",
+          src: image.src,
+          onMouseDown: _this2.onMouseDown,
+          onClick: function onClick(event) {
+            return _this2.onImageClick(event, index);
+          },
+          alt: ""
+        });
+      });
+    }
+
+    return '';
+  };
+
+  return ImagesLazyLoad;
+}(_react.default.Component);
+
+ImagesLazyLoad.propTypes = propTypes;
+var _default = ImagesLazyLoad;
+exports.default = _default;

package/lib/components/common/link-editor-option.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  option: _propTypes.default.object.isRequired,
+  isShowRemoveIcon: _propTypes.default.bool,
+  onDeleteLinkOption: _propTypes.default.func
+};
+
+var LinkEditorOption = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(LinkEditorOption, _React$Component);
+
+  function LinkEditorOption() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDeleteOption", function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+
+      _this.props.onDeleteLinkOption(_this.props.option);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getContainerStyle", function () {
+      return {
+        display: 'inline-flex',
+        marginRight: '10px',
+        padding: '0px 5px',
+        height: '20px',
+        borderRadius: '2px',
+        fontSize: '13px',
+        background: '#eceff4',
+        cursor: 'pointer'
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptionStyle", function () {
+      return {
+        flex: 1,
+        display: 'flex',
+        alignContent: 'center',
+        margin: '0 4px 0 2px'
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptionNameStyle", function () {
+      return {
+        maxWidth: '230px',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOperationStyle", function () {
+      return {
+        height: '20px',
+        width: '16px',
+        cursor: 'pointer',
+        color: '#909090',
+        transform: 'scale(.8)'
+      };
+    });
+    return _this;
+  }
+
+  var _proto = LinkEditorOption.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        option = _this$props.option,
+        isShowRemoveIcon = _this$props.isShowRemoveIcon;
+    var containerStyle = this.getContainerStyle();
+    var optionStyle = this.getOptionStyle();
+    var optionNameStyle = this.getOptionNameStyle();
+    var operationStyle = this.getOperationStyle();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui link-option-item",
+      style: containerStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-info",
+      style: optionStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-name",
+      style: optionNameStyle
+    }, option.name)), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-remove",
+      style: operationStyle,
+      onClick: this.onDeleteOption
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number",
+      style: {
+        fontSize: '12px',
+        lineHeight: '20px'
+      }
+    })));
+  };
+
+  return LinkEditorOption;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(LinkEditorOption, "defaultProps", {
+  isShowRemoveIcon: false
+});
+LinkEditorOption.propTypes = propTypes;
+var _default = LinkEditorOption;
+exports.default = _default;

package/lib/components/common/mobile/mb-editor-header.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  title: _propTypes.default.string,
+  titleClass: _propTypes.default.string,
+  leftContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  rightContent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  onLeftClick: _propTypes.default.func,
+  onRightClick: _propTypes.default.func
+};
+
+var MBEditorHeader = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(MBEditorHeader, _React$Component);
+
+  function MBEditorHeader() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = MBEditorHeader.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        title = _this$props.title,
+        titleClass = _this$props.titleClass,
+        leftContent = _this$props.leftContent,
+        rightContent = _this$props.rightContent,
+        onLeftClick = _this$props.onLeftClick,
+        onRightClick = _this$props.onRightClick;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-mb-editor-header " + (titleClass ? titleClass : '')
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "editor-header-left-content",
+      onClick: onLeftClick
+    }, leftContent), /*#__PURE__*/_react.default.createElement("span", {
+      className: "editor-header-title"
+    }, title), /*#__PURE__*/_react.default.createElement("span", {
+      className: "editor-header-right-content",
+      onClick: onRightClick,
+      style: {
+        color: '#f09f3f'
+      }
+    }, rightContent));
+  };
+
+  return MBEditorHeader;
+}(_react.default.Component);
+
+MBEditorHeader.propTypes = propTypes;
+var _default = MBEditorHeader;
+exports.default = _default;

package/lib/components/common/modal-portal.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  children: _propTypes.default.object.isRequired
+};
+var modalRoot = document.getElementById('modal-wrapper');
+
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(ModalPortal, _React$Component);
+
+  function ModalPortal(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.el = document.createElement('div');
+    return _this;
+  }
+
+  var _proto = ModalPortal.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    modalRoot.appendChild(this.el);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    modalRoot.removeChild(this.el);
+  };
+
+  _proto.render = function render() {
+    return /*#__PURE__*/_reactDom.default.createPortal(this.props.children, this.el);
+  };
+
+  return ModalPortal;
+}(_react.default.Component);
+
+ModalPortal.propTypes = propTypes;
+var _default = ModalPortal;
+exports.default = _default;

package/lib/components/common/select-editor-option.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/**
+ * option : {
+ *   id: '',
+ *   name: '',
+ *   color: '',
+ * }
+ */
+var propTypes = {
+  option: _propTypes.default.object.isRequired,
+  isShowRemoveIcon: _propTypes.default.bool,
+  onDeleteSelectOption: _propTypes.default.func
+};
+
+var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(SelectEditorOption, _React$Component);
+
+  function SelectEditorOption() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDeleteOption", function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+
+      _this.props.onDeleteSelectOption(_this.props.option);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getContainerStyle", function () {
+      var option = _this.props.option;
+      return {
+        display: 'inline-flex',
+        justifyContent: 'center',
+        marginRight: '10px',
+        padding: '0px 10px',
+        height: '20px',
+        borderRadius: '10px',
+        fontSize: '13px',
+        backgroundColor: option.color
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptionStyle", function (option) {
+      var textColor = option.textColor || null;
+      return {
+        flex: 1,
+        display: 'flex',
+        alignContent: 'center',
+        margin: '0 4px 0 2px',
+        color: textColor
+      };
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOperationStyle", function (option) {
+      var textColor = option.textColor || null;
+      return {
+        height: '20px',
+        width: '16px',
+        cursor: 'pointer',
+        color: textColor === '#FFFFFF' ? '#FFFFFF' : '#909090',
+        transform: 'scale(.8)'
+      };
+    });
+    return _this;
+  }
+
+  var _proto = SelectEditorOption.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        option = _this$props.option,
+        isShowRemoveIcon = _this$props.isShowRemoveIcon;
+    var containerStyle = this.getContainerStyle();
+    var optionStyle = this.getOptionStyle(option);
+    var operationStyle = this.getOperationStyle(option);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui select-option-item",
+      style: containerStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-info",
+      style: optionStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-name"
+    }, option.name)), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("div", {
+      className: "option-remove",
+      style: operationStyle,
+      onClick: this.onDeleteOption
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-fork-number",
+      style: {
+        fontSize: '12px',
+        lineHeight: '20px'
+      }
+    })));
+  };
+
+  return SelectEditorOption;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(SelectEditorOption, "defaultProps", {
+  isShowRemoveIcon: false
+});
+SelectEditorOption.propTypes = propTypes;
+var _default = SelectEditorOption;
+exports.default = _default;

package/lib/components/common/select-item.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  option: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired,
+    color: _propTypes.default.string.isRequired
+  }).isRequired,
+  fontSize: _propTypes.default.number
+};
+
+var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inheritsLoose2.default)(SelectItem, _React$PureComponent);
+
+  function SelectItem() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getStyle", function (option, fontSize) {
+      return {
+        display: 'inline-block',
+        padding: '0px 10px',
+        marginRight: '8px',
+        height: '20px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        borderRadius: '10px',
+        fontSize: fontSize ? fontSize + "px" : '13px',
+        backgroundColor: option.color,
+        color: option.textColor || null
+      };
+    });
+    return _this;
+  }
+
+  var _proto = SelectItem.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        option = _this$props.option,
+        fontSize = _this$props.fontSize;
+    var style = this.getStyle(option, fontSize);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui select-item",
+      style: style
+    }, option.name);
+  };
+
+  return SelectItem;
+}(_react.default.PureComponent);
+
+SelectItem.propTypes = propTypes;
+var _default = SelectItem;
+exports.default = _default;

package/lib/components/file-uploader/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var propTypes = {
+  isCheckRepeat: _propTypes.default.bool,
+  onFileUploadProgress: _propTypes.default.func,
+  onFileUploadSuccss: _propTypes.default.func,
+  onFileUploadFailed: _propTypes.default.func,
+  dtableWebAPI: _propTypes.default.object.isRequired
+};
+
+var FileUploader = /*#__PURE__*/function (_React$Component) {
+  (0, _inheritsLoose2.default)(FileUploader, _React$Component);
+
+  function FileUploader(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFilesChanged", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uploadFiles", function (fileList, isMultiple) {
+      if (isMultiple === void 0) {
+        isMultiple = false;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "checkRepeat", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelUploadFile", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileUploadProgress", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileUploadSuccss", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileUploadFailed", function () {});
+    _this.state = {};
+    _this.uploadFiles = [];
+    return _this;
+  }
+
+  var _proto = FileUploader.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/_react.default.createElement("input", {
+      type: "file",
+      onChange: this.onFilesChanged
+    });
+  };
+
+  return FileUploader;
+}(_react.default.Component);
+
+FileUploader.propTypes = propTypes;
+var _default = FileUploader;
+exports.default = _default;

package/lib/components/loading.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = Loading;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../css/loading.css");
+
+function Loading() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "loading-icon loading-tip"
+  });
+}