dtable-ui-component 0.1.79-beta → 0.1.82-beta

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"
+  });
+}

package/es/components/toast/alert.js

@@ -0,0 +1,150 @@
+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 { css } from 'glamor';
+
+var Alert = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Alert, _React$PureComponent);
+
+  var _super = _createSuper(Alert);
+
+  function Alert(props) {
+    var _this;
+
+    _classCallCheck(this, Alert);
+
+    _this = _super.call(this, props);
+    _this.containerStyle = css({
+      borderRadius: '3px',
+      backgroundColor: '#fff',
+      padding: '10px 16px',
+      display: 'flex',
+      boxSizing: 'border-box',
+      boxShadow: 'rgba(67, 90, 111, 0.3) 0px 0px 1px, rgba(67, 90, 111, 0.47) 0px 8px 10px -4px',
+      justifyContent: 'space-between',
+      flexDirection: 'row'
+    });
+    _this.containerBorderSuccess = css({
+      borderLeft: '3px solid rgb(71, 184, 129)'
+    });
+    _this.containerBorderWarn = css({
+      borderLeft: '3px solid rgb(217, 130, 43)'
+    });
+    _this.containerBorderDanger = css({
+      borderLeft: '3px solid rgb(236, 76, 71)'
+    });
+    _this.containerBorderNotify = css({
+      borderLeft: '3px solid rgb(16, 112, 202)'
+    });
+    _this.toastTextTitle = css({
+      fontWeight: '600',
+      fontSize: '14px',
+      color: '#435a6f',
+      margin: '0'
+    });
+    _this.toastTextChild = css({
+      fontSize: '14px',
+      color: '#999',
+      margin: '0'
+    });
+    _this.toastClose = css({
+      marginLeft: '15px',
+      height: '24px',
+      width: '24px',
+      lineHeight: '22px',
+      fontWeight: '700',
+      textAlign: 'center',
+      fontSize: '20px',
+      color: '#000',
+      cursor: 'pointer',
+      opacity: '0.5',
+      ':hover': {
+        opacity: 1
+      }
+    });
+    _this.toastIcon = css({
+      marginRight: '10px',
+      width: '14px',
+      height: '20px',
+      lineHeight: '20px'
+    });
+    return _this;
+  }
+
+  _createClass(Alert, [{
+    key: "getContainerStyle",
+    value: function getContainerStyle(intent) {
+      switch (intent) {
+        case 'success':
+          return {
+            borderStyle: this.containerBorderSuccess,
+            iconColor: css({
+              color: 'rgb(71, 184, 129)'
+            }),
+            iconClass: 'dtable-font dtable-icon-check-circle'
+          };
+
+        case 'warning':
+          return {
+            borderStyle: this.containerBorderWarn,
+            iconColor: css({
+              color: 'rgb(217, 130, 43)'
+            }),
+            iconClass: 'dtable-font dtable-icon-exclamation-triangle'
+          };
+
+        case 'none':
+          return {
+            borderStyle: this.containerBorderNotify,
+            iconColor: css({
+              color: 'rgb(16, 112, 202)'
+            }),
+            iconClass: 'dtable-font dtable-icon-exclamation-circle'
+          };
+
+        case 'danger':
+          return {
+            borderStyle: this.containerBorderDanger,
+            iconColor: css({
+              color: 'rgb(236, 76, 71)'
+            }),
+            iconClass: 'dtable-font dtable-icon-exclamation-circle'
+          };
+
+        default:
+          return {
+            borderStyle: this.containerBorderSuccess,
+            iconColor: css({
+              color: 'rgb(71, 184, 129)'
+            }),
+            iconClass: 'dtable-font dtable-icon-check-circle'
+          };
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var toastStyle = this.getContainerStyle(this.props.intent);
+      return /*#__PURE__*/React.createElement("div", css(toastStyle.borderStyle, this.containerStyle), /*#__PURE__*/React.createElement("div", {
+        className: this.toastIcon
+      }, /*#__PURE__*/React.createElement("i", Object.assign({
+        className: toastStyle.iconClass
+      }, toastStyle.iconColor))), /*#__PURE__*/React.createElement("div", {
+        className: this.toastTextContainer
+      }, /*#__PURE__*/React.createElement("p", {
+        className: this.toastTextTitle
+      }, this.props.title), this.props.children ? /*#__PURE__*/React.createElement("p", {
+        className: this.toastTextChild
+      }, this.props.children) : null), this.props.isRemoveable && /*#__PURE__*/React.createElement("div", {
+        onClick: this.props.onRemove,
+        className: this.toastClose
+      }, /*#__PURE__*/React.createElement("span", null, "\xD7")));
+    }
+  }]);
+
+  return Alert;
+}(React.PureComponent);
+
+export default Alert;

package/es/components/toast/index.js

@@ -0,0 +1,3 @@
+import Toaster from './toaster';
+var toaster = new Toaster();
+export default toaster;