dtable-ui-component 5.1.10 → 5.1.12

package/lib/FileFormatter/index.css

@@ -12,6 +12,10 @@
   border: 1px solid #f0f0f0;
 }
 
+.dtable-ui.file-formatter .file-item-icon.img {
+  width: fit-content;
+}
+
 .dtable-ui.file-formatter .file-item-count {
   display: inline-block;
   padding: 0 3px;

package/lib/FileItemFormatter/index.js

@@ -8,22 +8,18 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./utils");
 class FileItemFormatter extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.getFileIconData = item => {
-      let fileIconUrl = (0, _utils.getFileIconUrl)(item.name, item.type);
-      let fileIconData = require('./' + fileIconUrl);
-      return fileIconData;
-    };
-  }
   render() {
     const {
       file
     } = this.props;
+    const {
+      fileIconUrl,
+      isImage
+    } = (0, _utils.getFileThumbnailInfo)(file);
     return /*#__PURE__*/_react.default.createElement("img", {
-      className: "file-item-icon",
-      src: this.getFileIconData(file),
-      alt: file.name
+      className: "file-item-icon ".concat(isImage ? 'img' : ''),
+      src: fileIconUrl,
+      alt: (file === null || file === void 0 ? void 0 : file.name) || ''
     });
   }
 }

package/lib/FileItemFormatter/utils.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFileIconUrl = void 0;
+exports.imageCheck = exports.getFileThumbnailInfo = exports.getFileIconUrl = void 0;
+var _utils = require("../ImageFormatter/utils");
 const FILEEXT_ICON_MAP = {
   // text file
   md: 'txt.png',
@@ -52,6 +53,26 @@ const FILEEXT_ICON_MAP = {
   // default
   default: 'file.png'
 };
+const getFileThumbnailInfo = fileItem => {
+  let fileIconUrl;
+  let isImage;
+  if (!fileItem.name) {
+    fileIconUrl = FILEEXT_ICON_MAP['default'];
+    isImage = false;
+  } else {
+    isImage = imageCheck(fileItem.name);
+    if (isImage) {
+      fileIconUrl = (0, _utils.getImageThumbnailUrl)(fileItem.url);
+    } else {
+      fileIconUrl = require('./' + getFileIconUrl(fileItem.name, fileItem.type));
+    }
+  }
+  return {
+    fileIconUrl,
+    isImage
+  };
+};
+exports.getFileThumbnailInfo = getFileThumbnailInfo;
 const getFileIconUrl = (filename, direntType) => {
   if (typeof direntType === 'string' && direntType === 'dir') {
     return 'assets/folder/' + FILEEXT_ICON_MAP['folder'];
@@ -64,4 +85,15 @@ const getFileIconUrl = (filename, direntType) => {
   const iconUrl = FILEEXT_ICON_MAP[file_ext] ? 'assets/file/192/' + FILEEXT_ICON_MAP[file_ext] : 'assets/file/192/' + FILEEXT_ICON_MAP['default'];
   return iconUrl;
 };
-exports.getFileIconUrl = getFileIconUrl;
+exports.getFileIconUrl = getFileIconUrl;
+const imageCheck = filename => {
+  // no file ext
+  if (!filename || typeof filename !== 'string') return false;
+  if (filename.lastIndexOf('.') === -1) {
+    return false;
+  }
+  const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+  const image_exts = ['gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'webp'];
+  return image_exts.includes(file_ext);
+};
+exports.imageCheck = imageCheck;

package/lib/SelectOptionGroup/index.js

@@ -137,7 +137,7 @@ class SelectOptionGroup extends _react.Component {
         let key = opt.value.column ? opt.value.column.key : i;
         let isActive = this.state.activeIndex === i;
         return /*#__PURE__*/_react.default.createElement(_option.default, {
-          key: key,
+          key: "".concat(key, "-").concat(i),
           index: i,
           isActive: isActive,
           value: opt.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "5.1.10",
+  "version": "5.1.12",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "2.0.5",