dtable-ui-component 6.0.24 → 6.0.25-alpha.2

package/lib/FileFormatter/index.js

@@ -10,46 +10,104 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _FileItemFormatter = _interopRequireDefault(require("../FileItemFormatter"));
 require("./index.css");
-class FileFormatter extends _react.default.PureComponent {
-  render() {
-    let {
-      isSample,
-      value,
-      containerClassName,
-      renderItem
-    } = this.props;
-    if (!Array.isArray(value) || value.length === 0) {
-      return null;
+const FileFormatter = _ref => {
+  let {
+    isSample = false,
+    value = [],
+    containerClassName = '',
+    renderItem,
+    isSupportOpenFile = false,
+    server,
+    workspaceID,
+    dtableUuid
+  } = _ref;
+  if (!Array.isArray(value) || value.length === 0) {
+    return null;
+  }
+  const [largeImageIndex, setLargeImageIndex] = (0, _react.useState)(-1);
+  const [fileImageUrlList, setFileImageUrlList] = (0, _react.useState)([]);
+  const getFileItemImageUrlList = (0, _react.useCallback)(value => {
+    let newFileImageUrlList = [];
+    value.forEach(fileItem => {
+      const {
+        url,
+        name
+      } = fileItem;
+      let assetFileIndex = typeof url === 'string' ? url.indexOf('/asset') : -1;
+      if (assetFileIndex > -1) {
+        const isImage = imageCheck(name);
+        if (isImage) {
+          newFileImageUrlList.push(url);
+        }
+      }
+    });
+    setFileImageUrlList(newFileImageUrlList);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!isSupportOpenFile) return;
+    getFileItemImageUrlList(value);
+  }, [value, getFileItemImageUrlList]);
+  const showLargeImage = (0, _react.useCallback)(imageIndex => {
+    setLargeImageIndex(imageIndex);
+  }, []);
+  const openFile = (0, _react.useCallback)(fileItem => {
+    if (!isSupportOpenFile || !server || !workspaceID || !dtableUuid) return;
+    let openFileUrl = fileItem.url;
+    const imageIndex = fileImageUrlList.indexOf(openFileUrl);
+    if (imageIndex > -1) {
+      showLargeImage(imageIndex);
+      return;
     }
-    let className = (0, _classnames.default)('dtable-ui cell-formatter-container file-formatter', containerClassName);
-    if (isSample) {
-      let item = value[0];
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: className
-      }, /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
-        file: item
-      }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
-        className: "file-item-count"
-      }, "+".concat(value.length)));
+    let previewerUrl;
+    let assetFileIndex = openFileUrl.indexOf('/asset');
+    if (assetFileIndex > -1) {
+      previewerUrl = openFileUrl.replace('/asset', '/asset-preview');
+      window.open(previewerUrl, '_blank');
     }
+  }, [fileImageUrlList, showLargeImage]);
+  const moveNext = (0, _react.useCallback)(() => {
+    setLargeImageIndex(prevIndex => (prevIndex + 1) % fileImageUrlList.length);
+  }, [fileImageUrlList]);
+  const movePrev = (0, _react.useCallback)(() => {
+    setLargeImageIndex(prevIndex => (prevIndex + fileImageUrlList.length - 1) % fileImageUrlList.length);
+  }, [fileImageUrlList]);
+  const hideLargeImage = (0, _react.useCallback)(() => {
+    setLargeImageIndex(-1);
+  }, []);
+  const className = (0, _classnames.default)('dtable-ui cell-formatter-container file-formatter', containerClassName);
+  if (isSample) {
+    const item = value[0];
     return /*#__PURE__*/_react.default.createElement("div", {
       className: className
-    }, value.map((item, index) => {
-      const dom = /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
-        file: item
-      });
-      if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: index
-      }, renderItem(dom));
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-        key: index
-      }, dom);
-    }));
+    }, /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
+      file: item
+    }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
+      className: "file-item-count"
+    }, "+".concat(value.length)));
   }
-}
-exports.default = FileFormatter;
-FileFormatter.defaultProps = {
-  isSample: false,
-  value: [],
-  containerClassName: ''
-};
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className
+  }, value.map((item, index) => {
+    const dom = /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
+      openFile: openFile,
+      file: item
+    });
+    if (renderItem) return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: index
+    }, renderItem(dom));
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: index
+    }, dom);
+  }), largeImageIndex > -1 && /*#__PURE__*/_react.default.createElement(ImagePreviewerLightbox, {
+    server: server,
+    workspaceID: workspaceID,
+    dtableUuid: dtableUuid,
+    readOnly: true,
+    imageItems: fileImageUrlList,
+    imageIndex: largeImageIndex,
+    closeImagePopup: hideLargeImage,
+    moveToPrevImage: movePrev,
+    moveToNextImage: moveNext
+  }));
+};
+var _default = exports.default = FileFormatter;

package/lib/FileItemFormatter/index.js

@@ -10,13 +10,15 @@ var _url = require("../utils/url");
 const FileItemFormatter = _ref => {
   let {
     file,
-    config
+    config,
+    openFile
   } = _ref;
   const {
     fileIconUrl,
     isImage
   } = (0, _url.getFileThumbnailInfo)(file, config);
   return /*#__PURE__*/_react.default.createElement("img", {
+    onClick: () => openFile && openFile(file),
     className: "file-item-icon ".concat(isImage ? 'img' : ''),
     src: fileIconUrl,
     alt: (file === null || file === void 0 ? void 0 : file.name) || ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.24",
+  "version": "6.0.25-alpha.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",