dtable-ui-component 0.3.1 → 0.3.2-alpha1

package/lib/ButtonFormatter/index.js

@@ -28,10 +28,20 @@ var ButtonFormatter = /*#__PURE__*/function (_React$Component) {
           url_address = _this$props$data.url_address;
 
       if (button_type === 'open_url' && url_address) {
-        window.open(url_address);
+        _this.openUrlLink(url_address);
       }
     };
 
+    _this.openUrlLink = function (url) {
+      var a = document.createElement('a');
+      document.body.appendChild(a);
+      a.href = url;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      a.click();
+      document.body.removeChild(a);
+    };
+
     return _this;
   }
 

package/lib/DigitalSignFormatter/index.js

@@ -23,8 +23,10 @@ var DigitalSignFormatter = /*#__PURE__*/function (_Component) {
     _this = _super.call(this, props);
 
     _this.getSignImages = function () {
-      var value = _this.props.value;
-      return [getDigitalSignImageUrl(value)].filter(Boolean);
+      var _this$props = _this.props,
+          value = _this$props.value,
+          config = _this$props.config;
+      return [getDigitalSignImageUrl(value, config)].filter(Boolean);
     };
 
     _this.onClickSignImage = function (index) {
@@ -72,10 +74,11 @@ var DigitalSignFormatter = /*#__PURE__*/function (_Component) {
   _createClass(DigitalSignFormatter, [{
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          server = _this$props.server,
-          containerClassName = _this$props.containerClassName,
-          readOnly = _this$props.readOnly;
+      var _this$props2 = this.props,
+          containerClassName = _this$props2.containerClassName,
+          readOnly = _this$props2.readOnly,
+          config = _this$props2.config,
+          isSample = _this$props2.isSample;
       var className = cn('dtable-ui cell-formatter-container digital-sign-formatter', containerClassName);
       var signImages = this.getSignImages();
       if (signImages.length === 0) return null;
@@ -86,12 +89,12 @@ var DigitalSignFormatter = /*#__PURE__*/function (_Component) {
         className: className
       }, /*#__PURE__*/React.createElement(ImagesLazyLoad, {
         images: signImages,
-        server: server,
+        server: config.server,
         onImageClick: this.onClickSignImage
       })), isPreviewSignImage && /*#__PURE__*/React.createElement(ImagePreviewerLightbox, {
         className: "digital-sign-formatter-image-previewer",
         readOnly: readOnly,
-        server: server,
+        server: isSample ? config.server : '',
         imageItems: signImages,
         imageIndex: largeSignImageIndex,
         closeImagePopup: this.hideLargeSignImage,
@@ -110,7 +113,7 @@ DigitalSignFormatter.defaultProps = {
   isSupportPreview: false,
   readOnly: true,
   value: '',
-  server: '',
+  config: {},
   containerClassName: ''
 };
 export default DigitalSignFormatter;

package/lib/DigitalSignFormatter/utils.js

@@ -1,6 +1,23 @@
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-dayjs.extend(utc);
-export var getDigitalSignImageUrl = function getDigitalSignImageUrl(cellValue) {
-  return cellValue && cellValue.sign_image_url || '';
+export var getDigitalSignImageUrl = function getDigitalSignImageUrl(cellValue, config) {
+  if (!cellValue) return '';
+  var url = cellValue && cellValue.sign_image_url || '';
+  if (!url) return '';
+  if (!config) return url;
+
+  var _ref = config || {},
+      server = _ref.server,
+      workspaceID = _ref.workspaceID,
+      dtableUuid = _ref.dtableUuid;
+
+  if (server && (workspaceID || workspaceID === 0) && dtableUuid) {
+    return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(url);
+  }
+
+  return url;
+};
+export var isValidDigitalSignImageValue = function isValidDigitalSignImageValue(cellValue) {
+  if (!cellValue) return false;
+  var digitalSignImage = cellValue && cellValue.sign_image_url;
+  if (!digitalSignImage) return false;
+  return true;
 };

package/lib/FileFormatter/index.js

@@ -25,12 +25,13 @@ var FileFormatter = /*#__PURE__*/function (_React$PureComponent) {
           isSample = _this$props.isSample,
           value = _this$props.value,
           containerClassName = _this$props.containerClassName;
-      var className = cn('dtable-ui cell-formatter-container file-formatter', containerClassName);
 
       if (!Array.isArray(value) || value.length === 0) {
         return null;
       }
 
+      var className = cn('dtable-ui cell-formatter-container file-formatter', containerClassName);
+
       if (isSample) {
         var item = value[0];
         return /*#__PURE__*/React.createElement("div", {
@@ -61,4 +62,4 @@ FileFormatter.defaultProps = {
   value: [],
   containerClassName: ''
 };
-export default FileFormatter;
+export { FileFormatter as default };

package/lib/FileFormatter/row-expand-file-formatter.css

@@ -0,0 +1,60 @@
+.dtable-ui.row-expand-file-formatter {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 550px;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file {
+  height: 100px;
+  width: 100px;
+  border: 2px solid #ededed;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+  position: relative;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover {
+  border-color: #c9c9c9;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice {
+  height: 20px;
+  width: 100%;
+  top: 0;
+  position: absolute;
+  color: #fff;
+  display: none;
+  padding: 0 3px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file:hover .dtable-file-icons-choice {
+  display: flex;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(0,0,0,.5);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon:nth-child(2) {
+  margin-left: 5px;
+}
+
+.dtable-ui.row-expand-file-formatter .row-expand-item-file .dtable-file-icons-choice .file-icon .dtable-font {
+  font-size: 12px;
+  transform: scale(.7);
+}

package/lib/FileFormatter/row-expand-file-formatter.js

@@ -0,0 +1,60 @@
+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 classname from 'classnames';
+import RowExpandFileItemFormatter from '../FileItemFormatter/row-expand-file-item-formatter';
+import './index.css';
+import './row-expand-file-formatter.css';
+
+var RowExpandFileFormatter = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(RowExpandFileFormatter, _React$PureComponent);
+
+  var _super = _createSuper(RowExpandFileFormatter);
+
+  function RowExpandFileFormatter() {
+    _classCallCheck(this, RowExpandFileFormatter);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RowExpandFileFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          containerClassName = _this$props.containerClassName,
+          column = _this$props.column,
+          downloadFile = _this$props.downloadFile,
+          deleteFile = _this$props.deleteFile,
+          readOnly = _this$props.readOnly;
+
+      if (!Array.isArray(value) || value.length === 0) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classname('dtable-ui cell-formatter-container row-expand-file-formatter', containerClassName)
+      }, value.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(RowExpandFileItemFormatter, {
+          file: item,
+          key: index,
+          index: index,
+          column: column,
+          downloadFile: downloadFile,
+          deleteFile: deleteFile,
+          readOnly: readOnly
+        });
+      }));
+    }
+  }]);
+
+  return RowExpandFileFormatter;
+}(React.PureComponent);
+
+RowExpandFileFormatter.defaultProps = {
+  value: [],
+  containerClassName: ''
+};
+export { RowExpandFileFormatter as default };

package/lib/FileItemFormatter/index.js

@@ -47,4 +47,4 @@ var FileItemFormatter = /*#__PURE__*/function (_Component) {
   return FileItemFormatter;
 }(Component);
 
-export default FileItemFormatter;
+export { FileItemFormatter as default };

package/lib/FileItemFormatter/row-expand-file-item-formatter.js

@@ -0,0 +1,125 @@
+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, { Component } from 'react';
+import { Tooltip } from 'reactstrap';
+import { getLocale } from '../lang';
+import { getFileIconUrl } from './utils';
+import DeleteTip from '../common/delete-tip';
+
+var RowExpandFileItemFormatter = /*#__PURE__*/function (_Component) {
+  _inherits(RowExpandFileItemFormatter, _Component);
+
+  var _super = _createSuper(RowExpandFileItemFormatter);
+
+  function RowExpandFileItemFormatter(props) {
+    var _this;
+
+    _classCallCheck(this, RowExpandFileItemFormatter);
+
+    _this = _super.call(this, props);
+
+    _this.toggleTooltip = function () {
+      _this.setState({
+        isTooltipOpen: !_this.state.isTooltipOpen
+      });
+    };
+
+    _this.closeDeleteTip = function () {
+      _this.setState({
+        isDeleteTipOpen: false
+      });
+    };
+
+    _this.onClickDelete = function (e) {
+      e.stopPropagation();
+      _this.position = {
+        top: e.clientY,
+        left: e.clientX
+      };
+
+      _this.setState({
+        isDeleteTipOpen: true
+      });
+    };
+
+    _this.onDelete = function (e) {
+      e.stopPropagation();
+
+      _this.closeDeleteTip();
+
+      _this.props.deleteFile(_this.props.index);
+    };
+
+    _this.getFileIconData = function (item) {
+      var fileIconUrl = getFileIconUrl(item.name, item.type);
+      return require('./' + fileIconUrl);
+    };
+
+    _this.state = {
+      isTooltipOpen: false,
+      isDeleteTipOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(RowExpandFileItemFormatter, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          file = _this$props.file,
+          column = _this$props.column,
+          index = _this$props.index,
+          readOnly = _this$props.readOnly,
+          downloadFile = _this$props.downloadFile,
+          deleteFile = _this$props.deleteFile;
+      var id = 'file-list-preview-item' + column.key + index;
+      var url = this.getFileIconData(file);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        key: "file-".concat(index),
+        className: "row-expand-item-file",
+        id: id
+      }, /*#__PURE__*/React.createElement("img", {
+        src: url,
+        id: "item-file-".concat(index),
+        alt: file.name
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "dtable-file-icons-choice"
+      }, downloadFile && /*#__PURE__*/React.createElement("span", {
+        className: "file-icon",
+        onClick: function onClick(e) {
+          return _this2.props.downloadFile(file, e);
+        }
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-download"
+      })), !readOnly && deleteFile && /*#__PURE__*/React.createElement("span", {
+        className: "file-icon",
+        onClick: this.onClickDelete
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "dtable-font dtable-icon-fork-number"
+      })))), this.state.isDeleteTipOpen && /*#__PURE__*/React.createElement(DeleteTip, {
+        position: this.position,
+        toggle: this.closeDeleteTip,
+        onDelete: this.onDelete,
+        deleteTip: getLocale('Are_you_sure_you_want_to_delete_this_file')
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        placement: "bottom",
+        isOpen: this.state.isTooltipOpen,
+        toggle: this.toggleTooltip,
+        target: id,
+        delay: {
+          show: 0,
+          hide: 0
+        },
+        fade: false
+      }, file.name));
+    }
+  }]);
+
+  return RowExpandFileItemFormatter;
+}(Component);
+
+export { RowExpandFileItemFormatter as default };

package/lib/ImageFormatter/images-lazy-load.js

@@ -55,6 +55,7 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
             var _this$state = _this.state,
                 loadedCount = _this$state.loadedCount,
                 loadedImages = _this$state.loadedImages;
+            if (loadedCount + 1 > images.length) return;
             var newImageList = loadedImages.slice(0);
             newImageList[index] = image;
 
@@ -64,6 +65,7 @@ var ImagesLazyLoad = /*#__PURE__*/function (_React$Component) {
             });
           }, function () {
             var loadedCount = _this.state.loadedCount;
+            if (loadedCount + 1 > images.length) return;
 
             _this.setState({
               loadedCount: loadedCount + 1

package/lib/common/delete-tip.css

@@ -0,0 +1,16 @@
+.dtable-tip.tip-container {
+  display: flex;
+  flex-direction: column;
+  width: 232px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 8px 1px rgba(0,0,0,.2);
+  position: fixed;
+  z-index: 10000;
+}
+
+.dtable-tip.tip-container b {
+  line-height: 1.5;
+}

package/lib/common/delete-tip.js

@@ -0,0 +1,83 @@
+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 { getLocale } from '../lang';
+import './delete-tip.css';
+
+var DeleteTip = /*#__PURE__*/function (_React$Component) {
+  _inherits(DeleteTip, _React$Component);
+
+  var _super = _createSuper(DeleteTip);
+
+  function DeleteTip() {
+    var _this;
+
+    _classCallCheck(this, DeleteTip);
+
+    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.handleOutsideClick = function (e) {
+      if (_this.tipContainer && !_this.tipContainer.contains(e.target)) {
+        _this.props.toggle();
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(DeleteTip, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleOutsideClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleOutsideClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          toggle = _this$props.toggle,
+          onDelete = _this$props.onDelete,
+          position = _this$props.position,
+          deleteTip = _this$props.deleteTip;
+      return /*#__PURE__*/React.createElement("div", {
+        ref: function ref(node) {
+          return _this2.tipContainer = node;
+        },
+        className: "dtable-tip tip-container",
+        style: {
+          top: position.top,
+          left: position.left
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }, /*#__PURE__*/React.createElement("b", {
+        className: "mb-4"
+      }, deleteTip), /*#__PURE__*/React.createElement("div", {
+        className: "d-flex justify-content-end"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: "btn btn-secondary mr-2",
+        onClick: toggle
+      }, getLocale('Cancel')), /*#__PURE__*/React.createElement("button", {
+        className: "btn btn-primary",
+        onClick: onDelete
+      }, getLocale('Delete'))));
+    }
+  }]);
+
+  return DeleteTip;
+}(React.Component);
+
+export { DeleteTip as default };