dtable-ui-component 5.2.3-alpha.3 → 5.2.4

package/lib/CheckboxFormatter/index.js

@@ -36,7 +36,7 @@ class CheckboxFormatter extends _react.default.PureComponent {
       style: {
         width: '16px',
         height: '16px',
-        color: checkboxStyle.color
+        fill: checkboxStyle.color
       }
     }, /*#__PURE__*/_react.default.createElement("use", {
       xlinkHref: "#".concat(checkboxStyle.type)

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -32,7 +32,7 @@ function DepartmentMultipleSelectFilter(props) {
         name
       } = option;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item d-flex align-items-center",
+        className: "department-item",
         key: index,
         onClick: event => selectDepartment(event, type)
       }, /*#__PURE__*/_react.default.createElement("input", {

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-single-select-filter.js

@@ -37,7 +37,7 @@ function DepartmentSingleSelectFilter(props) {
         name
       } = option;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item department-item d-flex align-items-center",
+        className: "department-item",
         key: index,
         onClick: event => onSelect(event, type)
       }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -301,7 +301,6 @@
   width: 100%;
 }
 
-.dropdown-item .collaborator,
 .filters-list .option-group .option-group-content .collaborator {
   background-color: unset;
 }

package/lib/Department-editor/department-multiple-select/index.css

@@ -1,4 +1,10 @@
 .departments-container.dtable-ui {
+  position: absolute;
+  background-color: #fff;
+  border-radius: 3px;
+  min-width: 12rem;
+  height: 285px;
+  box-shadow: 0 0 5px #ccc;
   top: -4px;
   left: -3px;
   width: calc(100% + 8px);
@@ -52,12 +58,14 @@
   cursor: pointer;
 }
 
-.departments-container.dtable-ui .dropdown-item {
-  padding-left: 10px;
+.departments-container.dtable-ui .department-item {
+  padding: 4px 15px 4px 10px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-.departments-container.dtable-ui .dropdown-item:hover {
+.departments-container.dtable-ui .department-item:hover {
   background: #f5f5f5;
   color: #212529;
 }

package/lib/Department-editor/department-multiple-select/index.js

@@ -92,7 +92,7 @@ function DepartmentMultipleSelect(props) {
     return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: id
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-item d-flex align-items-center",
+      className: "department-item",
       onClick: event => onSelectDepartment(event, id)
     }, /*#__PURE__*/_react.default.createElement("input", {
       type: "checkbox",
@@ -123,7 +123,7 @@ function DepartmentMultipleSelect(props) {
       ref: departmentContainerRef,
       onClick: onStopPropagation,
       onMouseDown: onStopPropagation,
-      className: "dropdown-menu show departments-container dtable-ui ".concat(classNamePrefix)
+      className: "departments-container dtable-ui ".concat(classNamePrefix)
     }, isShowSelectedDepartments && /*#__PURE__*/_react.default.createElement("div", {
       className: "selected-departments dtable-ui",
       onClick: onClick

package/lib/Department-editor/department-single-select.js

@@ -146,7 +146,7 @@ class DepartmentSingleSelect extends _react.Component {
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: id
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "dropdown-item department-item d-flex align-items-center",
+        className: "department-item",
         onClick: event => this.onSelectDepartment(event, id),
         style: itemStyle
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -250,7 +250,7 @@ class DepartmentSingleSelect extends _react.Component {
   }
   render() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dropdown-menu department-editor-list dtable-ui show m-0 p-0",
+      className: "department-editor-list dtable-ui",
       style: this.props.menuStyle || {},
       ref: ref => this.departmentsRef = ref,
       onClick: this.onStopPropagation,

package/lib/Department-editor/index.css

@@ -1,6 +1,14 @@
 .dtable-ui.department-editor-list {
+  position: absolute;
+  left: 0;
+  z-index: 1000;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 3px;
+  min-width: 12rem;
   width: 300px;
   height: 285px;
+  box-shadow: 0 0 5px #ccc;
 }
 
 .dtable-ui.department-editor-list .editor-department-container {
@@ -44,13 +52,14 @@
   display: initial !important;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .dropdown-item {
-  padding-left: 10px;
-  padding-right: 15px;
+.dtable-ui.department-editor-list .editor-department-container .department-item {
+  padding: 4px 15px 4px 10px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
-.dtable-ui.department-editor-list .editor-department-container .dropdown-item:hover {
+.dtable-ui.department-editor-list .editor-department-container .department-item:hover {
   background: #f5f5f5;
   color: #212529;
 }

package/lib/FileItemFormatter/utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.imageCheck = exports.getFileThumbnailInfo = exports.getFileIconUrl = void 0;
-var _utils = require("../ImageFormatter/utils");
+var _url = require("../utils/url");
 const FILEEXT_ICON_MAP = {
   // text file
   md: 'txt.png',
@@ -62,7 +62,7 @@ const getFileThumbnailInfo = fileItem => {
   } else {
     isImage = imageCheck(fileItem.name);
     if (isImage) {
-      fileIconUrl = (0, _utils.getImageThumbnailUrl)(fileItem.url);
+      fileIconUrl = (0, _url.getImageThumbnailUrl)(fileItem.url);
     } else {
       fileIconUrl = require('./' + getFileIconUrl(fileItem.name, fileItem.type));
     }

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Loading = _interopRequireDefault(require("../Loading"));
-var _utils = require("./utils");
+var _url = require("../utils/url");
 class ImagesLazyLoad extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -42,7 +42,9 @@ class ImagesLazyLoad extends _react.default.Component {
           server
         } = this.props;
         images.forEach((item, index) => {
-          let url = (0, _utils.getImageThumbnailUrl)(item, server);
+          let url = (0, _url.getImageThumbnailUrl)(item, {
+            server
+          });
           this.lazyLoadImage(url, image => {
             let {
               loadedCount,

package/lib/ImageFormatter/index.js

@@ -9,8 +9,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _imagesLazyLoad = _interopRequireDefault(require("./images-lazy-load"));
-var _utils = require("./utils");
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
+var _url = require("../utils/url");
 require("./index.css");
 class ImageFormatter extends _react.default.Component {
   constructor(props) {
@@ -79,7 +79,7 @@ class ImageFormatter extends _react.default.Component {
     }
     if (isSample) {
       let item = value[0];
-      let url = (0, _utils.getImageThumbnailUrl)(item, server);
+      let url = (0, _url.getImageThumbnailUrl)(item, server);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: className
       }, /*#__PURE__*/_react.default.createElement("img", {

package/lib/ImageFormatter/utils.js

@@ -1,14 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getImageThumbnailUrl = void 0;
-const getImageThumbnailUrl = (url, server) => {
-  if (typeof url !== 'string') return '';
-  if (server && url.indexOf(server) > -1) {
-    return url.replace('/workspace', '/thumbnail/workspace') + '?size=256';
-  }
-  return url;
-};
-exports.getImageThumbnailUrl = getImageThumbnailUrl;
+"use strict";

package/lib/ImagePreviewerLightbox/index.css

@@ -0,0 +1,8 @@
+.ril__outer .ril__navButtons:focus,
+.ril__outer .ril__builtinButton:focus {
+  outline: none;
+}
+
+.ril-caption .ril__builtinButton {
+  width: 24px;
+}

package/lib/ImagePreviewerLightbox/index.js

@@ -8,45 +8,83 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
-var _utils = require("./utils");
+var _url = require("../utils/url");
 var _lang = require("../lang");
 require("@seafile/react-image-lightbox/style.css");
+require("./index.css");
 function ImagePreviewerLightbox(props) {
   const {
     imageItems,
     imageIndex,
-    deleteImage,
-    downloadImage,
-    onRotateImage,
     readOnly,
+    className,
     server,
-    moveToPrevRowImage,
-    moveToNextRowImage,
-    className
+    workspaceID,
+    dtableUuid,
+    deleteImage,
+    downloadImage,
+    onRotateImage
   } = props;
-  const imageItemsLength = imageItems.length;
-  const URL = imageItems[imageIndex];
-  const imageTitle = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
+  const imageSrcList = imageItems.map(src => {
+    if (server && dtableUuid && (0, _url.isCustomAssetUrl)(src)) {
+      const assetUuid = src.slice(src.lastIndexOf('/') + 1, src.lastIndexOf('.'));
+      return server + '/dtable/' + dtableUuid + '/custom-asset/' + assetUuid;
+    }
+    if (server && dtableUuid && workspaceID && (0, _url.isDigitalSignsUrl)(src)) {
+      return (0, _url.generateCurrentBaseImageUrl)({
+        server,
+        workspaceID,
+        dtableUuid,
+        partUrl: src
+      });
+    }
+    return src;
+  });
+  const imagesLength = imageSrcList.length;
+  const URL = imageSrcList[imageIndex];
+
+  // Handle URL has special symbol %$
+  let imageName = '';
+  try {
+    imageName = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error);
+  }
+
   // svg image is vectorgraph and can't rotate, external image can't rotate
-  const canRotateImage = onRotateImage && !readOnly && !(0, _utils.checkSVGImage)(URL) && (0, _utils.isInternalImg)(URL, server);
-  const imageTitleEl = /*#__PURE__*/_react.default.createElement("span", {
+  const canRotateImage = onRotateImage && !readOnly && !(0, _url.checkSVGImage)(URL) && (0, _url.isInternalImg)(URL, server);
+  let mainSrc = URL;
+  if ((0, _url.needUseThumbnailImage)(URL)) {
+    mainSrc = (0, _url.getImageThumbnailUrl)(URL, {
+      server,
+      dtableUuid,
+      workspaceID,
+      size: 512
+    });
+  }
+  const imageTitleDOM = props.imageTitle || /*#__PURE__*/_react.default.createElement("span", {
     className: "d-flex"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "text-truncate"
-  }, imageTitle), /*#__PURE__*/_react.default.createElement("span", {
-    className: "flex-shrink-0"
-  }, "(", imageIndex + 1, "/", imageItemsLength, ")"));
+  }, imageName), /*#__PURE__*/_react.default.createElement("span", {
+    className: "flex-shrink-0 pl-1"
+  }, "(", imageIndex + 1, "/", imagesLength, ")"));
   return /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
     wrapperClassName: (0, _classnames.default)('dtable-ui-component', className),
-    imageTitle: imageTitleEl,
-    mainSrc: imageItems[imageIndex],
-    nextSrc: imageItems[(imageIndex + 1) % imageItemsLength],
-    prevSrc: imageItems[(imageIndex + imageItemsLength - 1) % imageItemsLength],
+    imageTitle: imageTitleDOM,
+    mainSrc: mainSrc,
+    nextSrc: imageSrcList[(imageIndex + 1) % imagesLength],
+    prevSrc: imageSrcList[(imageIndex + imagesLength - 1) % imagesLength],
+    imagePadding: 70,
+    viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
+    enableRotate: canRotateImage,
     onCloseRequest: props.closeImagePopup,
     onMovePrevRequest: props.moveToPrevImage,
     onMoveNextRequest: props.moveToNextImage,
-    onClickMoveUp: moveToPrevRowImage,
-    onClickMoveDown: moveToNextRowImage,
+    onClickMoveUp: props.moveToPrevRowImage,
+    onClickMoveDown: props.moveToNextRowImage,
+    onViewOriginal: props.onViewOriginal,
     onRotateImage: canRotateImage ? deg => {
       onRotateImage(imageIndex, deg);
     } : null,
@@ -55,11 +93,7 @@ function ImagePreviewerLightbox(props) {
     } : null,
     onClickDownload: downloadImage ? () => {
       downloadImage(URL);
-    } : null,
-    imagePadding: 70,
-    onViewOriginal: props.onViewOriginal,
-    viewOriginalImageLabel: (0, _lang.getLocale)('View_original_image'),
-    enableRotate: canRotateImage
+    } : null
   });
 }
 var _default = exports.default = ImagePreviewerLightbox;

package/lib/utils/url.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.getImageThumbnailUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = void 0;
+const isTargetUrl = (target, url) => {
+  if (!url || typeof url !== 'string') return false;
+  return target && url ? url.indexOf(target) > -1 : false;
+};
+exports.isTargetUrl = isTargetUrl;
+const isInternalImg = (url, server) => {
+  if (!url || typeof url !== 'string') return false;
+  const currentServer = server || window.dtable && window.dtable.server;
+  return url.indexOf(currentServer) > -1;
+};
+exports.isInternalImg = isInternalImg;
+const isCustomAssetUrl = url => {
+  return isTargetUrl('custom-asset://', url);
+};
+exports.isCustomAssetUrl = isCustomAssetUrl;
+const checkSVGImage = url => {
+  if (!url || typeof url !== 'string') return false;
+  const isSVGImage = url.substring(url.lastIndexOf('.')).toLowerCase() === '.svg';
+  return isSVGImage;
+};
+exports.checkSVGImage = checkSVGImage;
+const isDigitalSignsUrl = url => {
+  if (!url || typeof url !== 'string') return false;
+  return isTargetUrl('/digital-signs/', url) && !url.includes('http');
+};
+exports.isDigitalSignsUrl = isDigitalSignsUrl;
+const needUseThumbnailImage = url => {
+  if (!url || typeof url !== 'string' || url.lastIndexOf('.') === -1) {
+    return false;
+  }
+  const image_suffix = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
+  const suffix = ['bmp', 'tif', 'tiff'];
+  return suffix.includes(image_suffix);
+};
+exports.needUseThumbnailImage = needUseThumbnailImage;
+const generateCurrentBaseImageThumbnailUrl = _ref => {
+  let {
+    server,
+    workspaceID,
+    dtableUuid,
+    partUrl,
+    size
+  } = _ref;
+  if (!partUrl || typeof partUrl !== 'string') return '';
+  return "".concat(server, "/thumbnail/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl, "?size=").concat(size);
+};
+exports.generateCurrentBaseImageThumbnailUrl = generateCurrentBaseImageThumbnailUrl;
+const generateCurrentBaseImageUrl = _ref2 => {
+  let {
+    server,
+    workspaceID,
+    dtableUuid,
+    partUrl
+  } = _ref2;
+  if (!partUrl || typeof partUrl !== 'string') return '';
+  return "".concat(server, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
+};
+exports.generateCurrentBaseImageUrl = generateCurrentBaseImageUrl;
+const getImageThumbnailUrl = function (url) {
+  let {
+    server,
+    dtableUuid,
+    workspaceID,
+    size = 256
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!url || typeof url !== 'string') return '';
+  if (server && dtableUuid && isCustomAssetUrl(url)) {
+    const assetUuid = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
+    return server + '/dtable/' + dtableUuid + '/custom-asset-thumbnail/' + assetUuid + '?size=' + size;
+  }
+  if (server && workspaceID && dtableUuid && isDigitalSignsUrl(url)) {
+    return generateCurrentBaseImageThumbnailUrl({
+      server,
+      workspaceID,
+      dtableUuid,
+      size,
+      partUrl: url
+    });
+  }
+  if (checkSVGImage(url) || !isInternalImg(url)) {
+    return url;
+  }
+  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
+};
+exports.getImageThumbnailUrl = getImageThumbnailUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.2.3-alpha.3",
+  "version": "5.2.4",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "3.0.1",
@@ -9,11 +9,10 @@
     "antd-mobile": "2.3.1",
     "classnames": "2.3.2",
     "dayjs": "1.10.7",
-    "dtable-utils": "4.4.0",
+    "dtable-utils": "5.0.11",
     "is-hotkey": "0.2.0",
     "prop-types": "^15.8.1",
     "react": "17.0.2",
-    "react-app-polyfill": "^3.0.0",
     "react-dom": "17.0.2",
     "react-responsive": "9.0.2",
     "react-color": "2.19.3",

package/lib/ImagePreviewerLightbox/utils.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isInternalImg = exports.checkSVGImage = void 0;
-const isInternalImg = (url, server) => {
-  if (!url) return;
-  const currentServer = server || window.dtable && window.dtable.server;
-  return url.indexOf(currentServer) > -1;
-};
-exports.isInternalImg = isInternalImg;
-const checkSVGImage = url => {
-  if (!url) return false;
-  return url.substr(-4).toLowerCase() === '.svg';
-};
-exports.checkSVGImage = checkSVGImage;