@seafile/seafile-database 0.0.19 → 0.0.21

package/dist/views/card/card-items/card-item/index.css

@@ -0,0 +1,234 @@
+.sf-metadata-card-item {
+  min-width: 0;
+  height: fit-content;
+  background: #f9f9f9;
+  border: 1px solid var(--bs-border-secondary-color);
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  user-select: none;
+  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
+  cursor: pointer;
+}
+
+.sf-metadata-card-item.selected {
+  border-color: #ff9800;
+}
+
+.sf-metadata-card-item:hover {
+  box-shadow: 0 0 6px #0000002e;
+}
+
+.sf-metadata-card-item-image-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  min-height: 150px;
+  border-bottom: 1px solid var(--bs-border-secondary-color);
+}
+
+/* Use pseudo-element to establish aspect ratio (3:2) so height is always reserved */
+.sf-metadata-card-item-image-container::before {
+  content: '';
+  display: block;
+  padding-top: 66.6667%;
+}
+
+.sf-metadata-card-item-image-container .sf-metadata-card-item-image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: contain;
+  object-position: center;
+}
+
+.sf-metadata-card-item-image-scroll-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.sf-metadata-card-item-image-scroll-wrapper.show-scrollbar {
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+[data-bs-theme="dark"] .sf-metadata-card-item-image-scroll-wrapper.show-scrollbar {
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+.sf-metadata-card-item-image-scroll-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sf-metadata-card-item-image-scroll-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sf-metadata-card-item-image-scroll-wrapper::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.sf-metadata-card-item-image-scroll-wrapper.show-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.sf-metadata-card-item-image-scroll-wrapper.show-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+[data-bs-theme="dark"] .sf-metadata-card-item-image-scroll-wrapper.show-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+[data-bs-theme="dark"] .sf-metadata-card-item-image-scroll-wrapper.show-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.sf-metadata-card-item-image-scroll-wrapper .sf-metadata-card-item-doc-thumbnail {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
+  object-position: top center;
+}
+
+.sf-metadata-card-item-text-container {
+  padding: 12px 16px 16px;
+  background-color: var(--bs-body-bg);
+}
+
+.sf-metadata-card-item-text-container .sf-metadata-file-name {
+  font-weight: 500;
+}
+
+.sf-metadata-card-item-text-container .sf-metadata-card-last-modified-info {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sf-metadata-card-item-text-container .sf-metadata-card-last-modified-info .collaborator-item {
+  color: var(--bs-body-color);
+  background-color: transparent;
+  padding: 0;
+}
+
+.sf-metadata-card-item-text-container .sf-metadata-card-last-modified-info .ctime-formatter {
+  color: #666;
+  flex-shrink: 0;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field {
+  margin-top: 10px;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field-name {
+  display: block;
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field .sf-metadata-record-cell-empty {
+  display: inline-block;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  height: 8px;
+  width: 20px;
+}
+
+.sf-metadata-card-item .sf-metadata-ui {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+  font-size: 13px;
+}
+
+.sf-metadata-card-item .sf-metadata-date-formatter,
+.sf-metadata-card-item .sf-metadata-number-formatter {
+  text-align: left;
+}
+
+.sf-metadata-card-item .sf-metadata-text-formatter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sf-metadata-card-item .file-name-formatter {
+  margin-bottom: 8px;
+}
+
+.sf-metadata-card-item .file-name-formatter .sf-metadata-file-icon {
+  transform: translateY(-1px);
+  max-width: 100%;
+  height: auto;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field .collaborators-formatter {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field .collaborators-formatter .collaborator-item {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field .sf-metadata-checkbox-formatter {
+  justify-content: flex-start;
+  padding-left: 2px;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field .sf-metadata-multiple-select-formatter {
+  flex-wrap: wrap;
+}
+
+.sf-metadata-card-item .sf-metadata-card-item-field .sf-metadata-multiple-select-formatter .sf-metadata-ui-select-option {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.sf-metadata-view-card-items-container-text-wrap .sf-metadata-card-item-field .text-formatter {
+  white-space: normal;
+  max-height: 68px;
+}
+
+.sf-metadata-card-item .long-text-formatter,
+.sf-metadata-view-card-items-container-text-wrap .sf-metadata-card-item-field .long-text-formatter {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  line-height: 1.5;
+  white-space: normal;
+}
+
+[data-bs-theme="dark"] .sf-metadata-card-item {
+  background-color: rgba(19, 19, 19, 1);
+  border-color: var(--bs-border-secondary-color);
+}
+
+[data-bs-theme="dark"] .sf-metadata-card-item.selected {
+  border-color: #ff9800;
+}
+
+[data-bs-theme="dark"] .sf-metadata-card-item:hover {
+  box-shadow: none;
+  border-color: rgba(255, 255, 255, 0.2);
+}

package/dist/views/card/card-items/card-item/index.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _iconUtils = require("../../../../common/utils/icon-utils");
+var _utils = require("../../../../common/utils/utils");
+var _globalSettings = _interopRequireDefault(require("../../../../global-settings"));
+var _hooks = require("../../../../hooks");
+var _cell = require("../../../../utils/cell");
+var _row = require("../../../../utils/row");
+var _formatter = _interopRequireDefault(require("./formatter"));
+require("./index.css");
+const CardItem = _ref => {
+  let {
+    isSelected,
+    record,
+    tagsData,
+    fileNameColumn,
+    mtimeColumn,
+    modifierColumn,
+    displayColumns,
+    displayEmptyValue,
+    displayColumnName,
+    onOpenFile,
+    onSelectCard,
+    onContextMenu
+  } = _ref;
+  const {
+    context
+  } = (0, _hooks.useFileRepoContext)();
+  const [isUsingIcon, setIsUsingIcon] = (0, _react.useState)(false);
+  const [showScrollbar, setShowScrollbar] = (0, _react.useState)(false);
+  const imgRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
+  const hoverTimerRef = (0, _react.useRef)(null);
+  const fileNameValue = (0, _cell.getCellValueByColumn)(record, fileNameColumn);
+  const mtimeValue = (0, _cell.getCellValueByColumn)(record, mtimeColumn);
+  const modifierValue = (0, _cell.getCellValueByColumn)(record, modifierColumn);
+
+  // for the big image
+  const parentDir = (0, _react.useMemo)(() => (0, _cell.getParentDirFromRecord)(record), [record]);
+  const isDir = (0, _react.useMemo)(() => (0, _row.checkIsDir)(record), [record]);
+  const shouldUseThumbnail = (0, _react.useMemo)(() => {
+    if (isDir) return false;
+    const value = fileNameValue;
+    const enableSeadoc = _globalSettings.default.getSetting('enableSeadoc');
+    const enableThumbnailServer = _globalSettings.default.getSetting('enableThumbnailServer');
+    return _utils.Utils.imageCheck(value) || _utils.Utils.pdfCheck(value) || _utils.Utils.videoCheck(value) || _utils.Utils.isEditableSdocFile(value, enableSeadoc) && enableThumbnailServer;
+  }, [isDir, fileNameValue]);
+  const isDocumentFile = (0, _react.useMemo)(() => {
+    if (!shouldUseThumbnail || isUsingIcon) return false;
+    const value = fileNameValue;
+    const enableSeadoc = _globalSettings.default.getSetting('enableSeadoc');
+    return _utils.Utils.pdfCheck(value) || _utils.Utils.isEditableSdocFile(value, enableSeadoc);
+  }, [shouldUseThumbnail, fileNameValue, isUsingIcon]);
+  const imageURLs = (0, _react.useMemo)(() => {
+    if (isDir) {
+      const iconURL = (0, _iconUtils.getFolderIconUrl)();
+      return {
+        URL: iconURL,
+        iconURL: iconURL
+      };
+    }
+    const value = fileNameValue;
+    const fileIconURL = (0, _iconUtils.getFileIconUrl)(value);
+    if (shouldUseThumbnail) {
+      const path = _utils.Utils.encodePath(_utils.Utils.joinPath(parentDir, value));
+      const siteRoot = _globalSettings.default.getSetting('siteRoot');
+      const thumbnailSizeForOriginal = _globalSettings.default.getSetting('thumbnailSizeForOriginal');
+      const repoID = context.getViewSetting('repoID');
+      const thumbnailURL = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}?mtime=${(0, _cell.getFileMTimeFromRecord)(record)}`;
+      return {
+        URL: thumbnailURL,
+        iconURL: fileIconURL
+      };
+    }
+    return {
+      URL: fileIconURL,
+      iconURL: fileIconURL
+    };
+  }, [isDir, fileNameValue, shouldUseThumbnail, parentDir, context, record]);
+  const onLoadError = (0, _react.useCallback)(() => {
+    setIsUsingIcon(true);
+    imgRef.current.src = imageURLs.iconURL;
+  }, [imageURLs]);
+  const handleClickCard = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onSelectCard(record);
+  }, [record, onSelectCard]);
+  const handleFilenameClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    const canPreview = context.canPreview();
+    if (!canPreview) return;
+    onOpenFile(record);
+  }, [context, onOpenFile, record]);
+  const handleImageContainerMouseEnter = (0, _react.useCallback)(() => {
+    if (!isDocumentFile) return;
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+    }
+    hoverTimerRef.current = setTimeout(() => {
+      setShowScrollbar(true);
+    }, 500);
+  }, [isDocumentFile]);
+  const handleImageContainerMouseLeave = (0, _react.useCallback)(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    setShowScrollbar(false);
+  }, []);
+  const handleImageContainerScroll = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+  }, []);
+  const scrollable = isDocumentFile && !isUsingIcon;
+  return /*#__PURE__*/_react.default.createElement("article", {
+    "data-id": record._id,
+    className: (0, _classnames.default)('sf-metadata-card-item', {
+      'selected': isSelected
+    }),
+    onClick: handleClickCard,
+    onContextMenu: onContextMenu,
+    tabIndex: "0",
+    onKeyDown: _utils.Utils.onKeyDown
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: "sf-metadata-card-item-image-container",
+    onMouseEnter: handleImageContainerMouseEnter,
+    onMouseLeave: handleImageContainerMouseLeave
+  }, scrollable ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('sf-metadata-card-item-image-scroll-wrapper', {
+      'show-scrollbar': showScrollbar
+    }),
+    onScroll: handleImageContainerScroll
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    loading: "lazy",
+    className: "sf-metadata-card-item-doc-thumbnail",
+    ref: imgRef,
+    src: imageURLs.URL,
+    onError: onLoadError,
+    alt: ""
+  })) : /*#__PURE__*/_react.default.createElement("img", {
+    loading: "lazy",
+    className: "sf-metadata-card-item-image",
+    ref: imgRef,
+    src: imageURLs.URL,
+    onError: onLoadError,
+    alt: ""
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-card-item-text-container"
+  }, /*#__PURE__*/_react.default.createElement(_formatter.default, {
+    value: fileNameValue,
+    column: fileNameColumn,
+    record: record,
+    hideIcon: true,
+    onFileNameClick: handleFilenameClick,
+    tagsData: tagsData
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-card-last-modified-info"
+  }, /*#__PURE__*/_react.default.createElement(_formatter.default, {
+    value: modifierValue,
+    column: modifierColumn,
+    record: record,
+    tagsData: tagsData
+  }), /*#__PURE__*/_react.default.createElement(_formatter.default, {
+    value: mtimeValue,
+    format: "relativeTime",
+    column: mtimeColumn,
+    record: record,
+    tagsData: tagsData
+  })), displayColumns.map(column => {
+    const value = (0, _cell.getCellValueByColumn)(record, column);
+    if (!displayEmptyValue && !(0, _cell.isValidCellValue)(value)) {
+      if (displayColumnName) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "sf-metadata-card-item-field",
+          key: column.key
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: "sf-metadata-card-item-field-name"
+        }, column.name));
+      }
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sf-metadata-card-item-field",
+      key: column.key
+    }, displayColumnName && /*#__PURE__*/_react.default.createElement("span", {
+      className: "sf-metadata-card-item-field-name"
+    }, column.name), /*#__PURE__*/_react.default.createElement(_formatter.default, {
+      value: value,
+      column: column,
+      record: record,
+      tagsData: tagsData
+    }));
+  })));
+};
+var _default = exports.default = CardItem;

package/dist/views/card/card-items/index.css

@@ -0,0 +1,31 @@
+.sf-metadata-view-card-items-container {
+  height: auto;
+  --sf-card-min-width: 240px;
+  --sf-card-max-width: 1fr;
+  --sf-card-gap: 20px;
+  padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--sf-card-min-width), var(--sf-card-max-width)));
+  gap: var(--sf-card-gap);
+  align-content: start;
+}
+
+@media (max-width: 1200px) {
+  .sf-metadata-view-card-items-container {
+    --sf-card-min-width: 210px;
+  }
+}
+
+@media (max-width: 900px) {
+  .sf-metadata-view-card-items-container {
+    --sf-card-min-width: 190px;
+  }
+}
+
+@media (max-width: 600px) {
+  .sf-metadata-view-card-items-container {
+    --sf-card-min-width: 160px;
+    padding: 12px;
+    --sf-card-gap: 12px;
+  }
+}

package/dist/views/card/card-items/index.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _emptyTip = _interopRequireDefault(require("../../../common/components/empty-tip"));
+var _imagePreviewer = _interopRequireDefault(require("../../../components/image-previewer"));
+var _constants = require("../../../constants");
+var _hooks = require("../../../hooks");
+var _translate = _interopRequireDefault(require("../../../lang/translate"));
+var _cell = require("../../../utils/cell");
+var _file = require("../../../utils/file");
+var _row = require("../../../utils/row");
+var _cardItem = _interopRequireDefault(require("./card-item"));
+require("./index.css");
+// import ContextMenu from '../context-menu';
+
+const CardItems = _ref => {
+  let {
+    modifyRecord,
+    deleteRecords,
+    modifyColumnData,
+    onCloseSettings
+  } = _ref;
+  const {
+    context
+  } = (0, _hooks.useFileRepoContext)();
+  const {
+    tagsData
+  } = (0, _hooks.useTagsData)();
+  const {
+    metadata,
+    isDirentDetailShow,
+    updateCurrentDirent,
+    updateSelectedRecordIds
+  } = (0, _hooks.useMetadata)();
+  const containerRef = (0, _react.useRef)(null);
+  const currentImageRef = (0, _react.useRef)(null);
+  const [selectedCard, setSelectedCard] = (0, _react.useState)('');
+  const [isImagePreviewerVisible, setImagePreviewerVisible] = (0, _react.useState)(false);
+  const repoID = context.getViewSetting('repoID');
+  const repoInfo = context.getViewSetting('repoInfo');
+  (0, _react.useEffect)(() => {
+    const unsubscribe = context.eventBus.subscribe(_constants.EVENT_BUS_TYPE.UPDATE_SELECTED_RECORD_IDS, ids => {
+      setSelectedCard(Array.isArray(ids) ? ids[0] : null);
+    });
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [context.eventBus]);
+  const fileNameColumn = (0, _react.useMemo)(() => {
+    return metadata.key_column_map[_constants.PRIVATE_COLUMN_KEY.FILE_NAME];
+  }, [metadata.key_column_map]);
+  const mtimeColumn = (0, _react.useMemo)(() => {
+    return metadata.key_column_map[_constants.PRIVATE_COLUMN_KEY.FILE_MTIME];
+  }, [metadata.key_column_map]);
+  const modifierColumn = (0, _react.useMemo)(() => {
+    return metadata.key_column_map[_constants.PRIVATE_COLUMN_KEY.FILE_MODIFIER];
+  }, [metadata.key_column_map]);
+  const displayColumns = (0, _react.useMemo)(() => {
+    const displayColumnsConfig = metadata.view.settings[_constants.CARD_SETTINGS_KEYS.COLUMNS];
+    if (!displayColumnsConfig) return [];
+    return displayColumnsConfig.filter(config => config.shown).map(config => metadata.key_column_map[config.key]);
+  }, [metadata.key_column_map, metadata.view.settings]);
+  const displayEmptyValue = (0, _react.useMemo)(() => !metadata.view.settings[_constants.CARD_SETTINGS_KEYS.HIDE_EMPTY_VALUE], [metadata.view.settings]);
+  const displayColumnName = (0, _react.useMemo)(() => metadata.view.settings[_constants.CARD_SETTINGS_KEYS.SHOW_COLUMN_NAME], [metadata.view.settings]);
+  const textWrap = (0, _react.useMemo)(() => metadata.view.settings[_constants.CARD_SETTINGS_KEYS.TEXT_WRAP], [metadata.view.settings]);
+  const records = (0, _react.useMemo)(() => {
+    const {
+      rows
+    } = metadata;
+    return rows || [];
+  }, [metadata]);
+  const onOpenFile = (0, _react.useCallback)(record => {
+    const repoID = context.getViewSetting('repoID');
+    const canPreview = context.canPreview();
+    if (!canPreview) return;
+    (0, _file.openFile)(record, repoID, () => {
+      currentImageRef.current = record;
+      setImagePreviewerVisible(true);
+    });
+  }, [context]);
+  const closeImagePreviewer = (0, _react.useCallback)(() => {
+    currentImageRef.current = null;
+    setImagePreviewerVisible(false);
+  }, []);
+  const handleUpdateCurrentDirent = (0, _react.useCallback)(record => {
+    if (!record) return;
+    const recordId = (0, _cell.getRecordIdFromRecord)(record);
+    const name = (0, _cell.getFileNameFromRecord)(record);
+    const path = (0, _cell.getParentDirFromRecord)(record);
+    const isDir = (0, _row.checkIsDir)(record);
+    updateCurrentDirent && updateCurrentDirent({
+      id: recordId,
+      type: isDir ? 'dir' : 'file',
+      mtime: '',
+      name,
+      path,
+      file_tags: []
+    });
+    setSelectedCard(recordId);
+    updateSelectedRecordIds([recordId]);
+  }, [updateCurrentDirent, updateSelectedRecordIds]);
+  const onSelectCard = (0, _react.useCallback)(record => {
+    const recordId = (0, _cell.getRecordIdFromRecord)(record);
+    if (selectedCard === recordId) return;
+    handleUpdateCurrentDirent(record);
+    onCloseSettings();
+  }, [selectedCard, onCloseSettings, handleUpdateCurrentDirent]);
+  const handleClickOutside = (0, _react.useCallback)(event => {
+    setSelectedCard(null);
+    updateSelectedRecordIds([]);
+    updateCurrentDirent();
+  }, [updateCurrentDirent, updateSelectedRecordIds]);
+  const onContextMenu = (0, _react.useCallback)((event, recordId) => {
+    event.preventDefault();
+    if (selectedCard === recordId) return;
+    const record = (0, _row.getRowById)(metadata, recordId);
+    handleUpdateCurrentDirent(record);
+  }, [metadata, selectedCard, handleUpdateCurrentDirent]);
+  const onDeleteRecords = (0, _react.useCallback)(recordIds => {
+    deleteRecords(recordIds, {
+      success_callback: () => {
+        setSelectedCard(null);
+        updateSelectedRecordIds([]);
+        updateCurrentDirent();
+      }
+    });
+  }, [deleteRecords, updateCurrentDirent, updateSelectedRecordIds]);
+  const onRename = (0, _react.useCallback)((rowId, updates, oldRowData, originalUpdates, originalOldRowData, _ref2) => {
+    let {
+      success_callback
+    } = _ref2;
+    modifyRecord(rowId, updates, oldRowData, originalUpdates, originalOldRowData, {
+      success_callback: operation => {
+        success_callback && success_callback(operation);
+        const record = (0, _row.getRowById)(metadata, rowId);
+        handleUpdateCurrentDirent(record);
+      }
+    });
+  }, [metadata, modifyRecord, handleUpdateCurrentDirent]);
+  (0, _react.useEffect)(() => {
+    if (!isDirentDetailShow) {
+      setSelectedCard(null);
+      updateSelectedRecordIds([]);
+    }
+  }, [isDirentDetailShow, updateSelectedRecordIds]);
+  if (records.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_emptyTip.default, {
+      text: _translate.default.gettext('No items')
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: (0, _classnames.default)('sf-metadata-view-card-items-container', {
+      'sf-metadata-view-card-items-container-text-wrap': textWrap
+    }),
+    onClick: handleClickOutside
+  }, records.map((record, index) => {
+    const isSelected = selectedCard === record._id;
+    return /*#__PURE__*/_react.default.createElement(_cardItem.default, {
+      key: index,
+      isSelected: isSelected,
+      record: record,
+      tagsData: tagsData,
+      fileNameColumn: fileNameColumn,
+      mtimeColumn: mtimeColumn,
+      modifierColumn: modifierColumn,
+      displayColumns: displayColumns,
+      displayEmptyValue: displayEmptyValue,
+      displayColumnName: displayColumnName,
+      onOpenFile: onOpenFile,
+      onSelectCard: onSelectCard,
+      onContextMenu: e => onContextMenu(e, record._id)
+    });
+  })), isImagePreviewerVisible && /*#__PURE__*/_react.default.createElement(_imagePreviewer.default, {
+    repoID: repoID,
+    repoInfo: repoInfo,
+    record: currentImageRef.current,
+    table: metadata,
+    closeImagePopup: closeImagePreviewer
+  }));
+};
+var _default = exports.default = CardItems;