dtable-ui-component 0.2.1 → 0.2.3

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

@@ -0,0 +1,148 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import Loading from '../loading';
+import { getImageThumbnailUrl } from '../../utils/utils';
+
+var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImagesLazyLoad, _React$Component);
+
+  var _super = _createSuper(ImagesLazyLoad);
+
+  function ImagesLazyLoad(props) {
+    var _this;
+
+    _classCallCheck(this, ImagesLazyLoad);
+
+    _this = _super.call(this, props);
+
+    _this.componentDidMount = function () {
+      var images = _this.state.images;
+
+      _this.lazyLoadImages(images);
+    };
+
+    _this.componentWillReceiveProps = function (nextProps) {
+      if (nextProps.images.toString() !== _this.props.images.toString()) {
+        _this.lazyLoadImages(nextProps.images);
+      }
+    };
+
+    _this.componentWillUnmount = function () {
+      // prevent async operation
+      _this.setState = function (state, callback) {
+        return;
+      };
+    };
+
+    _this.lazyLoadImages = function (images) {
+      if (!Array.isArray(images) || images.length === 0) {
+        return;
+      }
+
+      var server = _this.props.server.server;
+      images.forEach(function (item) {
+        var url = 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
+          });
+        });
+      });
+    };
+
+    _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;
+    };
+
+    _this.onMouseDown = function (event) {
+      event.stopPropagation();
+    };
+
+    _this.onImageClick = function (event, index) {
+      event.stopPropagation();
+
+      _this.props.onImageClick(index);
+    };
+
+    _this.state = {
+      images: props.images,
+      loadedImages: [],
+      loadedCount: 0
+    };
+    return _this;
+  }
+
+  _createClass(ImagesLazyLoad, [{
+    key: "render",
+    value: 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.createElement("div", {
+          style: style
+        }, /*#__PURE__*/React.createElement(Loading, null));
+      }
+
+      if (images.length === loadedCount) {
+        return loadedImages.map(function (image, index) {
+          return /*#__PURE__*/React.createElement("img", {
+            key: index,
+            className: "image-item",
+            src: image.src,
+            onMouseDown: _this2.onMouseDown,
+            onClick: function onClick(event) {
+              return _this2.onImageClick(event, index);
+            },
+            alt: ""
+          });
+        });
+      }
+    }
+  }]);
+
+  return ImagesLazyLoad;
+}(React.Component);
+
+export default ImagesLazyLoad;

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

@@ -0,0 +1,113 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var LinkEditorOption = /*#__PURE__*/function (_React$Component) {
+  _inherits(LinkEditorOption, _React$Component);
+
+  var _super = _createSuper(LinkEditorOption);
+
+  function LinkEditorOption() {
+    var _this;
+
+    _classCallCheck(this, LinkEditorOption);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.onDeleteOption = function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+
+      _this.props.onDeleteLinkOption(_this.props.option);
+    };
+
+    _this.getContainerStyle = function () {
+      return {
+        display: 'inline-flex',
+        marginRight: '10px',
+        padding: '0px 5px',
+        height: '20px',
+        borderRadius: '2px',
+        fontSize: '13px',
+        background: '#eceff4',
+        cursor: 'pointer'
+      };
+    };
+
+    _this.getOptionStyle = function () {
+      return {
+        flex: 1,
+        display: 'flex',
+        alignContent: 'center',
+        margin: '0 4px 0 2px'
+      };
+    };
+
+    _this.getOptionNameStyle = function () {
+      return {
+        maxWidth: '230px',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      };
+    };
+
+    _this.getOperationStyle = function () {
+      return {
+        height: '20px',
+        width: '16px',
+        cursor: 'pointer',
+        color: '#909090',
+        transform: 'scale(.8)'
+      };
+    };
+
+    return _this;
+  }
+
+  _createClass(LinkEditorOption, [{
+    key: "render",
+    value: 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.createElement("div", {
+        className: "dtable-ui link-option-item",
+        style: containerStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-info",
+        style: optionStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-name",
+        style: optionNameStyle
+      }, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
+        className: "option-remove",
+        style: operationStyle,
+        onClick: this.onDeleteOption
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number",
+        style: {
+          fontSize: '12px',
+          lineHeight: '20px'
+        }
+      })));
+    }
+  }]);
+
+  return LinkEditorOption;
+}(React.Component);
+
+LinkEditorOption.defaultProps = {
+  isShowRemoveIcon: false
+};
+export default LinkEditorOption;

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

@@ -0,0 +1,48 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var MBEditorHeader = /*#__PURE__*/function (_React$Component) {
+  _inherits(MBEditorHeader, _React$Component);
+
+  var _super = _createSuper(MBEditorHeader);
+
+  function MBEditorHeader() {
+    _classCallCheck(this, MBEditorHeader);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(MBEditorHeader, [{
+    key: "render",
+    value: 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.createElement("div", {
+        className: "dtable-ui-mb-editor-header ".concat(titleClass ? titleClass : '')
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "editor-header-left-content",
+        onClick: onLeftClick
+      }, leftContent), /*#__PURE__*/React.createElement("span", {
+        className: "editor-header-title"
+      }, title), /*#__PURE__*/React.createElement("span", {
+        className: "editor-header-right-content",
+        onClick: onRightClick,
+        style: {
+          color: '#f09f3f'
+        }
+      }, rightContent));
+    }
+  }]);
+
+  return MBEditorHeader;
+}(React.Component);
+
+export default MBEditorHeader;

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

@@ -0,0 +1,44 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import ReactDOM from 'react-dom';
+var modalRoot = document.getElementById('modal-wrapper');
+
+var ModalPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(ModalPortal, _React$Component);
+
+  var _super = _createSuper(ModalPortal);
+
+  function ModalPortal(props) {
+    var _this;
+
+    _classCallCheck(this, ModalPortal);
+
+    _this = _super.call(this, props);
+    _this.el = document.createElement('div');
+    return _this;
+  }
+
+  _createClass(ModalPortal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      modalRoot.appendChild(this.el);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      modalRoot.removeChild(this.el);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return ReactDOM.createPortal(this.props.children, this.el);
+    }
+  }]);
+
+  return ModalPortal;
+}(React.Component);
+
+export default ModalPortal;

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

@@ -0,0 +1,106 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var SelectEditorOption = /*#__PURE__*/function (_React$Component) {
+  _inherits(SelectEditorOption, _React$Component);
+
+  var _super = _createSuper(SelectEditorOption);
+
+  function SelectEditorOption() {
+    var _this;
+
+    _classCallCheck(this, SelectEditorOption);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.onDeleteOption = function (event) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+
+      _this.props.onDeleteSelectOption(_this.props.option);
+    };
+
+    _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
+      };
+    };
+
+    _this.getOptionStyle = function (option) {
+      var textColor = option.textColor || null;
+      return {
+        flex: 1,
+        display: 'flex',
+        alignContent: 'center',
+        margin: '0 4px 0 2px',
+        color: textColor
+      };
+    };
+
+    _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;
+  }
+
+  _createClass(SelectEditorOption, [{
+    key: "render",
+    value: 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.createElement("div", {
+        className: "dtable-ui select-option-item",
+        style: containerStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-info",
+        style: optionStyle
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "option-name"
+      }, option.name)), isShowRemoveIcon && /*#__PURE__*/React.createElement("div", {
+        className: "option-remove",
+        style: operationStyle,
+        onClick: this.onDeleteOption
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number",
+        style: {
+          fontSize: '12px',
+          lineHeight: '20px'
+        }
+      })));
+    }
+  }]);
+
+  return SelectEditorOption;
+}(React.Component);
+
+SelectEditorOption.defaultProps = {
+  isShowRemoveIcon: false
+};
+export default SelectEditorOption;

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

@@ -0,0 +1,58 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var SelectItem = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(SelectItem, _React$PureComponent);
+
+  var _super = _createSuper(SelectItem);
+
+  function SelectItem() {
+    var _this;
+
+    _classCallCheck(this, SelectItem);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.getStyle = function (option, fontSize) {
+      return {
+        display: 'inline-block',
+        padding: '0px 10px',
+        marginRight: '8px',
+        height: '20px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        borderRadius: '10px',
+        fontSize: fontSize ? "".concat(fontSize, "px") : '13px',
+        backgroundColor: option.color,
+        color: option.textColor || null
+      };
+    };
+
+    return _this;
+  }
+
+  _createClass(SelectItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          option = _this$props.option,
+          fontSize = _this$props.fontSize;
+      var style = this.getStyle(option, fontSize);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "dtable-ui select-item",
+        style: style
+      }, option.name);
+    }
+  }]);
+
+  return SelectItem;
+}(React.PureComponent);
+
+export default SelectItem;

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

@@ -0,0 +1,53 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var FileUploader = /*#__PURE__*/function (_React$Component) {
+  _inherits(FileUploader, _React$Component);
+
+  var _super = _createSuper(FileUploader);
+
+  function FileUploader(props) {
+    var _this;
+
+    _classCallCheck(this, FileUploader);
+
+    _this = _super.call(this, props);
+
+    _this.onFilesChanged = function () {};
+
+    _this.uploadFiles = function (fileList) {
+      var isMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    };
+
+    _this.checkRepeat = function () {};
+
+    _this.cancelUploadFile = function () {};
+
+    _this.onFileUploadProgress = function () {};
+
+    _this.onFileUploadSuccss = function () {};
+
+    _this.onFileUploadFailed = function () {};
+
+    _this.state = {};
+    _this.uploadFiles = [];
+    return _this;
+  }
+
+  _createClass(FileUploader, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("input", {
+        type: "file",
+        onChange: this.onFilesChanged
+      });
+    }
+  }]);
+
+  return FileUploader;
+}(React.Component);
+
+export default FileUploader;

package/es/components/loading.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import '../css/loading.css';
+export default function Loading() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: "loading-icon loading-tip"
+  });
+}