@seafile/seafile-database 0.0.19 → 0.0.21

package/dist/components/icons/index.js

@@ -10,11 +10,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
 var _addIcon = _interopRequireDefault(require("./add-icon"));
 var _addTableIcon = _interopRequireDefault(require("./add-table-icon"));
+var _arrowDownIcon = _interopRequireDefault(require("./arrow-down-icon"));
+var _arrowUpIcon = _interopRequireDefault(require("./arrow-up-icon"));
 var _checkCircleIcon = _interopRequireDefault(require("./check-circle-icon"));
 var _checkIcon = _interopRequireDefault(require("./check-icon"));
 var _checkMarkIcon = _interopRequireDefault(require("./check-mark-icon"));
 var _checkSquareSolidIcon = _interopRequireDefault(require("./check-square-solid-icon"));
 var _checkboxIcon = _interopRequireDefault(require("./checkbox-icon"));
+var _closeIcon = _interopRequireDefault(require("./close-icon"));
 var _collaboratorIcon = _interopRequireDefault(require("./collaborator-icon"));
 var _copyIcon = _interopRequireDefault(require("./copy-icon"));
 var _creatorIcon = _interopRequireDefault(require("./creator-icon"));
@@ -33,6 +36,7 @@ var _hideIcon = _interopRequireDefault(require("./hide-icon"));
 var _locationIcon = _interopRequireDefault(require("./location-icon"));
 var _longTextIcon = _interopRequireDefault(require("./long-text-icon"));
 var _manageIcon = _interopRequireDefault(require("./manage-icon"));
+var _moreIcon = _interopRequireDefault(require("./more-icon"));
 var _multipleSelectIcon = _interopRequireDefault(require("./multiple-select-icon"));
 var _numberIcon = _interopRequireDefault(require("./number-icon"));
 var _partiallySelectedIcon = _interopRequireDefault(require("./partially-selected-icon"));
@@ -43,6 +47,7 @@ var _rowHeightDouble = _interopRequireDefault(require("./row-height-double"));
 var _rowHeightQuadruple = _interopRequireDefault(require("./row-height-quadruple"));
 var _rowHeightTriple = _interopRequireDefault(require("./row-height-triple"));
 var _searchIcon = _interopRequireDefault(require("./search-icon"));
+var _setUpIcon = _interopRequireDefault(require("./set-up-icon"));
 var _singleSelectIcon = _interopRequireDefault(require("./single-select-icon"));
 var _sortAscendingIcon = _interopRequireDefault(require("./sort-ascending-icon"));
 var _sortDescendingIcon = _interopRequireDefault(require("./sort-descending-icon"));
@@ -126,7 +131,7 @@ function Icon(_ref) {
     case 'url':
       return /*#__PURE__*/_react.default.createElement(_urlIcon.default, props);
     case 'more':
-      return /*#__PURE__*/_react.default.createElement(_urlIcon.default, props);
+      return /*#__PURE__*/_react.default.createElement(_moreIcon.default, props);
     case 'check-circle':
       return /*#__PURE__*/_react.default.createElement(_checkCircleIcon.default, props);
     case 'exclamation-circle':
@@ -155,6 +160,14 @@ function Icon(_ref) {
       return /*#__PURE__*/_react.default.createElement(_helpIcon.default, props);
     case 'partially-selected':
       return /*#__PURE__*/_react.default.createElement(_partiallySelectedIcon.default, props);
+    case 'close':
+      return /*#__PURE__*/_react.default.createElement(_closeIcon.default, props);
+    case 'arrow-up':
+      return /*#__PURE__*/_react.default.createElement(_arrowUpIcon.default, props);
+    case 'arrow-down':
+      return /*#__PURE__*/_react.default.createElement(_arrowDownIcon.default, props);
+    case 'set-up':
+      return /*#__PURE__*/_react.default.createElement(_setUpIcon.default, props);
     default:
       return /*#__PURE__*/_react.default.createElement(_textIcon.default, props);
   }

package/dist/components/icons/set-up-icon.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+const SetUpIcon = props => /*#__PURE__*/React.createElement("svg", Object.assign({
+  width: 32,
+  height: 32,
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M12.3048 1.04102C13.0668 0.859993 13.8405 1.29543 14.0802 2.04102C14.3696 2.94055 15.1732 3.53862 16.1124 3.53223L16.3068 3.52344C17.2681 3.44595 18.0378 2.85385 18.341 2.18946L18.4035 2.06738C18.7413 1.47614 19.4426 1.18166 20.1095 1.36817C21.4489 1.74318 22.6896 2.28193 23.9728 3.06934C25.1023 3.76249 26.2908 4.71126 27.2365 5.74121C27.7325 6.28157 27.7653 7.10175 27.3136 7.67969C26.7469 8.4046 26.6346 9.27919 27.0704 10.208C27.5879 10.9886 28.5746 11.4613 29.4884 11.3984L29.6251 11.3955C30.3005 11.4102 30.8912 11.8779 31.0509 12.5459C31.668 15.1295 31.6716 18.0018 30.924 20.6621C30.7125 21.4138 29.9599 21.8777 29.1935 21.7285C28.4485 21.5834 27.587 21.9403 27.0617 22.792C26.5366 23.6433 26.6069 24.5663 27.0695 25.1602C27.5508 25.778 27.476 26.6625 26.8976 27.1904C24.8547 29.0546 22.284 30.344 19.6954 30.959C18.9335 31.14 18.1598 30.7046 17.9201 29.959C17.6489 29.1159 16.9257 28.5374 16.0626 28.4736L15.8878 28.4678C14.8367 28.4754 13.9827 29.102 13.6593 29.8105C13.3525 30.4825 12.6021 30.8308 11.8908 30.6318C10.5514 30.2568 9.31064 29.7181 8.02747 28.9307C6.89795 28.2375 5.70942 27.2888 4.7638 26.2588C4.26774 25.7184 4.23493 24.8982 4.68665 24.3203C5.25363 23.5951 5.36538 22.7203 4.92884 21.791C4.41118 21.0111 3.4253 20.5388 2.51185 20.6016C1.78077 20.6518 1.11971 20.1668 0.949349 19.4541C0.332247 16.8705 0.328662 13.9982 1.0763 11.3379C1.28775 10.5863 2.04037 10.1223 2.80677 10.2715C3.55176 10.4166 4.41323 10.0597 4.93861 9.20801C5.46366 8.35672 5.39341 7.43367 4.93079 6.83985C4.44946 6.22204 4.52418 5.3375 5.10267 4.80957C7.14554 2.94543 9.7162 1.65606 12.3048 1.04102ZM11.8673 4.28223C10.4992 4.73716 9.17485 5.41808 8.0138 6.29102C8.55023 7.76552 8.32683 9.43023 7.49232 10.7832C6.65717 12.1371 5.26815 13.0849 3.70814 13.2705C3.44526 14.7249 3.43696 16.2401 3.65931 17.6875C5.07739 17.9423 6.41655 18.7335 7.2931 19.9355L7.51283 20.2607L7.58216 20.3857C8.33408 21.8973 8.3938 23.5361 7.75208 24.9922C8.33344 25.5126 8.97641 25.9933 9.59681 26.374C10.3047 26.8084 10.9826 27.1412 11.674 27.4043C12.6652 26.2383 14.1905 25.4798 15.8663 25.4678H15.8673C17.6431 25.4556 19.203 26.3424 20.132 27.7168C21.5003 27.2619 22.8243 26.581 23.9855 25.708C23.4497 24.2338 23.6736 22.5694 24.5079 21.2168C25.3429 19.8631 26.7315 18.9143 28.2911 18.7285C28.5539 17.274 28.5625 15.759 28.34 14.3115C26.798 14.0342 25.3492 13.1229 24.4874 11.7393C24.4623 11.6988 24.4393 11.6569 24.4181 11.6143C23.6661 10.1025 23.6053 8.46308 24.2472 7.00684C23.6661 6.48681 23.0234 6.00642 22.4035 5.62598C21.6951 5.19132 21.0171 4.85788 20.3253 4.59473C19.3341 5.76081 17.8098 6.52017 16.1339 6.53223H16.1329C14.3566 6.54435 12.7962 5.65729 11.8673 4.28223Z",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M18.5 16C18.5 14.6193 17.3807 13.5 16 13.5C14.6193 13.5 13.5 14.6193 13.5 16C13.5 17.3807 14.6193 18.5 16 18.5C17.3807 18.5 18.5 17.3807 18.5 16ZM21.5 16C21.5 19.0376 19.0376 21.5 16 21.5C12.9624 21.5 10.5 19.0376 10.5 16C10.5 12.9624 12.9624 10.5 16 10.5C19.0376 10.5 21.5 12.9624 21.5 16Z",
+  fill: "currentColor"
+}));
+var _default = exports.default = SetUpIcon;

package/dist/components/image-previewer/_hooks/metadata-details.js

@@ -51,7 +51,7 @@ const MetadataDetailsProvider = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _hooks.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
   const {
     enableMetadata,
     detailsSettings

package/dist/components/image-previewer/_hooks/metadata-status.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _loading = _interopRequireDefault(require("../../../common/components/loading"));
 var _toaster = _interopRequireDefault(require("../../../common/components/toaster"));
 var _utils = require("../../../common/utils/utils");
-var _appContext = require("../../../hooks/app-context");
+var _hooks = require("../../../hooks");
 // This hook provides content related to seahub interaction, such as whether to enable extended attributes
 const MetadataStatusContext = /*#__PURE__*/_react.default.createContext(null);
 const MetadataStatusProvider = _ref => {
@@ -20,7 +20,7 @@ const MetadataStatusProvider = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
   const [isLoading, setLoading] = (0, _react.useState)(true);
   const [enableMetadata, setEnableMetadata] = (0, _react.useState)(false);
   const [globalHiddenColumns, setGlobalHiddenColumns] = (0, _react.useState)([]);

package/dist/components/image-previewer/image-detail/index.js

@@ -31,7 +31,7 @@ const ImageFileDetail = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _hooks.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
   const {
     headerComponent
   } = component;

package/dist/components/image-previewer/index.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _toaster = _interopRequireDefault(require("../../common/components/toaster"));
 var _utils = require("../../common/utils/utils");
 var _globalSettings = _interopRequireDefault(require("../../global-settings"));
-var _appContext = require("../../hooks/app-context");
+var _hooks = require("../../hooks");
 var _cell = require("../../utils/cell");
 var _imageDialog = _interopRequireDefault(require("./image-dialog"));
 const ImagePreviewer = _ref => {
@@ -23,7 +23,7 @@ const ImagePreviewer = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
   const [imageIndex, setImageIndex] = (0, _react.useState)(0);
   const [imageItems, setImageItems] = (0, _react.useState)([]);
   const repoID = (0, _react.useMemo)(() => {

package/dist/components/popover/groupbys-popover/index.js

@@ -11,7 +11,7 @@ var _reactstrap = require("reactstrap");
 var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _customizeAddTool = _interopRequireDefault(require("../../../common/components/customize-add-tool"));
 var _dom = require("../../../common/utils/dom");
-var _appContext = require("../../../hooks/app-context");
+var _hooks = require("../../../hooks");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 var _constants = require("../../../constants");
 var _group = require("../../../utils/group");
@@ -29,7 +29,7 @@ const GroupbysPopover = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
   const [groupbys, setGroupbys] = (0, _react.useState)(propsGroupBys);
   const [isChanged, setChanged] = (0, _react.useState)(false);
   const isSelectOpenRef = (0, _react.useState)(false);
@@ -66,7 +66,7 @@ const GroupbysPopover = _ref => {
       document.removeEventListener('keydown', onHotKey);
       unsubscribeOpenSelect();
     };
-  }, [hide, onHotKey, setSelectStatus]);
+  }, [context.eventBus, hide, onHotKey, setSelectStatus]);
   const updateGroups = (0, _react.useCallback)(newGroupBys => {
     setChanged(true);
     setGroupbys(newGroupBys);
@@ -98,10 +98,10 @@ const GroupbysPopover = _ref => {
   }, [groupbys, updateGroups]);
   const hideAllGroups = (0, _react.useCallback)(() => {
     context.eventBus.dispatch(_constants.EVENT_BUS_TYPE.COLLAPSE_ALL_GROUPS);
-  }, []);
+  }, [context.eventBus]);
   const showAllGroups = (0, _react.useCallback)(() => {
     context.eventBus.dispatch(_constants.EVENT_BUS_TYPE.EXPAND_ALL_GROUPS);
-  }, []);
+  }, [context.eventBus]);
   const onPopoverInsideClick = (0, _react.useCallback)(event => {
     event.stopPropagation();
   }, []);

package/dist/components/searcher/index.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _searchInput = _interopRequireDefault(require("../../common/components/search-input"));
-var _appContext = require("../../hooks/app-context");
+var _hooks = require("../../hooks");
 var _translate = _interopRequireDefault(require("../../lang/translate"));
 var _constants = require("../../constants");
 var _keyCodes = require("../../constants/keyCodes");
@@ -20,7 +20,7 @@ const Searcher = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
   const searchInputRef = (0, _react.useRef)(null);
   const onToggleSearch = (0, _react.useCallback)(() => {
@@ -52,7 +52,7 @@ const Searcher = _ref => {
       unsubscribeClearSearch();
       unsubscribeReSearch();
     };
-  }, [onClear, onReSearch]);
+  }, [context.eventBus, onClear, onReSearch]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-metadata-searcher-container mr-2"
   }, !isSearchActive && /*#__PURE__*/_react.default.createElement(_iconButton.default, {

package/dist/components/view-toolbar/card-view-toolbar/index.js

@@ -0,0 +1,89 @@
+"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 _utils = require("../../../common/utils/utils");
+var _iconButton = _interopRequireDefault(require("../../icon-button"));
+var _constants = require("../../../constants");
+var _hooks = require("../../../hooks");
+var _translate = _interopRequireDefault(require("../../../lang/translate"));
+var _dataProcessSetter = require("../../data-process-setter");
+const CardViewToolbar = _ref => {
+  let {
+    isCustomPermission,
+    readOnly,
+    view,
+    collaborators,
+    modifyFilters,
+    modifySorts,
+    onToggleDetail = () => {},
+    onCloseDetail = () => {}
+  } = _ref;
+  const {
+    context
+  } = (0, _hooks.useFileRepoContext)();
+  const viewType = (0, _react.useMemo)(() => view.type, [view]);
+  const viewColumns = (0, _react.useMemo)(() => {
+    if (!view) return [];
+    return view.columns;
+  }, [view]);
+
+  // const filterColumns = useMemo(() => {
+  //   return viewColumns.filter(c => c.key !== PRIVATE_COLUMN_KEY.FILE_TYPE);
+  // }, [viewColumns]);
+
+  const onToggleSettings = (0, _react.useCallback)(() => {
+    context.eventBus.dispatch(_constants.EVENT_BUS_TYPE.TOGGLE_CARD_SETTINGS);
+    onCloseDetail();
+  }, [context.eventBus, onCloseDetail]);
+  const toggleDetails = (0, _react.useCallback)(() => {
+    context.eventBus.dispatch(_constants.EVENT_BUS_TYPE.CLOSE_CARD_SETTINGS);
+    onToggleDetail();
+  }, [context.eventBus, onToggleDetail]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-tool-left-operations"
+  }, /*#__PURE__*/_react.default.createElement(_dataProcessSetter.FilterSetter, {
+    wrapperClass: "sea-metadata-view-tool-operation-btn sea-metadata-view-tool-filter  mr-2",
+    filtersClassName: "sea-metadata-filters",
+    target: `sea-metadata-filter-popover-${view._id}`,
+    readOnly: readOnly,
+    filterConjunction: view.filter_conjunction,
+    basicFilters: view.basic_filters,
+    filters: view.filters,
+    columns: viewColumns,
+    modifyFilters: modifyFilters,
+    collaborators: collaborators,
+    viewType: viewType
+  }), /*#__PURE__*/_react.default.createElement(_dataProcessSetter.SortSetter, {
+    wrapperClass: "sea-metadata-view-tool-operation-btn sea-metadata-view-tool-sort  mr-2",
+    target: `sea-metadata-sort-popover-${view._id}`,
+    readOnly: readOnly,
+    sorts: view.sorts,
+    type: viewType,
+    columns: viewColumns,
+    modifySorts: modifySorts
+  }), !readOnly && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    icon: "set-up",
+    className: "sf-metadata-view-tool-operation-btn sea-metadata-view-tool-setting",
+    size: 24,
+    role: "button",
+    "aria-label": _translate.default.gettext('Settings'),
+    title: _translate.default.gettext('Settings'),
+    tabIndex: 0,
+    onClick: onToggleSettings,
+    onKeyDown: _utils.Utils.onKeyDown
+  }), !isCustomPermission && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    className: "cur-view-path-btn ml-2",
+    icon: "info",
+    title: _translate.default.gettext('Properties'),
+    onClick: toggleDetails
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-tool-right-operations"
+  }));
+};
+var _default = exports.default = CardViewToolbar;

package/dist/components/view-toolbar/index.css

@@ -9,7 +9,38 @@
   border-bottom: 1px solid var(--bs-border-secondary-color);
 }
 
-.sea-metadata-view-tools {
+.sea-metadata-base-operations {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  white-space: break-spaces;
+  word-break: break-word;
+  min-width: 0px;
+  overflow: hidden;
+  font-weight: 700;
+  font-size: 22px;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  margin-inline-end: 4px;
+
+}
+
+.sea-metadata-base-operations .base-operations__ops {
+  display: none;
+}
+
+.sea-metadata-base-operations:hover .base-operations__ops {
+  display: block;
+}
+
+.base-operations__ops .seafile-multicolor-icon-btn:hover {
+  cursor: pointer;
+  background-color: #efefef;
+  border-radius: 4px;
+}
+
+.sea-metadata-view-ribbon .sea-metadata-view-tools {
+  flex-grow: 1;
   flex-shrink: 0;
   flex-wrap: nowrap;
   display: flex;
@@ -64,3 +95,25 @@
 .sea-qa-icon-btn.sea-metadata-rows-tool-btn {
   width: auto;
 }
+
+.sea-metadata-view-ribbon.multiple-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 79px;
+}
+
+.sea-metadata-view-ribbon.multiple-view .sea-metadata-base-operations {
+  width: 100%;
+  height: 30px;
+}
+
+.sea-metadata-view-ribbon.multiple-view .sea-metadata-view-tools-container {
+  width: 100%;
+  height: 49px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/dist/components/view-toolbar/index.js

@@ -9,22 +9,25 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../../constants");
 var _hooks = require("../../hooks");
-var _appContext = require("../../hooks/app-context");
-var _row = require("../../utils/row");
-var _rowsToolbar = _interopRequireDefault(require("./rows-toolbar"));
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+var _cardViewToolbar = _interopRequireDefault(require("./card-view-toolbar"));
 var _tableViewToolbar = _interopRequireDefault(require("./table-view-toolbar"));
-var _views = _interopRequireDefault(require("./views"));
+var _viewItems = _interopRequireDefault(require("./view-items"));
 require("./index.css");
 const ViewToolBar = _ref => {
   let {
     fixedColumnCount,
     tools = _constants.VIEW_TOOLS,
-    createRowsTools = null,
-    toggleView
+    createRowsTools = null
   } = _ref;
   const {
+    fileRepo,
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
+  const {
+    views,
+    currentViewId
+  } = (0, _hooks.useViewContext)();
   const {
     collaborators
   } = (0, _hooks.useCollaborators)();
@@ -36,58 +39,40 @@ const ViewToolBar = _ref => {
     modifyRowHeight,
     modifyHiddenColumns,
     modifyColumnOrder,
-    searchRows,
-    deleteRows,
-    modifyRows,
-    updateLocalRow
+    searchRows
   } = (0, _hooks.useMetadata)();
-  const {
-    selectedRowIds
-  } = (0, _hooks.useSelectedRows)();
   const selectNone = (0, _react.useCallback)(event => {
     event && event.stopPropagation();
     event && event.nativeEvent && event.nativeEvent.stopImmediatePropagation();
     context.eventBus.dispatch(_constants.EVENT_BUS_TYPE.SELECT_NONE);
-  }, []);
+  }, [context.eventBus]);
   const onHeaderClick = (0, _react.useCallback)(() => {
     selectNone();
   }, [selectNone]);
-  const renderLeftTools = (0, _react.useCallback)(view => {
-    if (selectedRowIds.length > 0 && tools.includes(_constants.VIEW_TOOL.ROWS_TOOLS)) {
-      const rows = (0, _row.getRowsByIds)(metadata, selectedRowIds);
-      return /*#__PURE__*/_react.default.createElement(_rowsToolbar.default, {
-        rows: rows,
-        columns: (metadata === null || metadata === void 0 ? void 0 : metadata.columns) || [],
-        selectNone: selectNone,
-        deleteRows: deleteRows,
-        modifyRows: modifyRows,
-        updateLocalRow: updateLocalRow,
-        createTools: createRowsTools
-      });
-    }
-    if (tools.includes(_constants.VIEW_TOOL.VIEWS)) {
-      return /*#__PURE__*/_react.default.createElement(_views.default, {
-        view: view,
-        toggleView: toggleView
-      });
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sea-metadata-views"
-    });
-  }, [selectedRowIds, tools, metadata, selectNone, deleteRows, modifyRows, updateLocalRow, createRowsTools, toggleView]);
-  const view = metadata === null || metadata === void 0 ? void 0 : metadata.view;
-  const viewType = view === null || view === void 0 ? void 0 : view.type;
-  const readOnly = view && context.canModifyView ? !context.canModifyView(view) : true;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sea-metadata-view-ribbon",
+  const viewType = (0, _react.useMemo)(() => {
+    const view = views.find(view => view._id === currentViewId);
+    return view.type;
+  }, [currentViewId, views]);
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-view-ribbon multiple-view",
     onClick: onHeaderClick
-  }, renderLeftTools(view), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-base-operations"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "base-name mr-2"
+  }, fileRepo.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "base-operations__ops"
+  }, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    size: 24,
+    icon: 'more'
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-view-tools-container"
+  }, /*#__PURE__*/_react.default.createElement(_viewItems.default, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-metadata-view-tools"
-  }, view && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, viewType === _constants.VIEW_TYPE.TABLE && /*#__PURE__*/_react.default.createElement(_tableViewToolbar.default, {
-    readOnly: readOnly,
+  }, viewType === _constants.VIEW_TYPE.TABLE && /*#__PURE__*/_react.default.createElement(_tableViewToolbar.default, {
     tools: tools,
     fixedColumnCount: fixedColumnCount,
-    view: view,
+    view: metadata === null || metadata === void 0 ? void 0 : metadata.view,
     collaborators: collaborators,
     modifyFilters: modifyFilters,
     modifySorts: modifySorts,
@@ -96,6 +81,13 @@ const ViewToolBar = _ref => {
     modifyHiddenColumns: modifyHiddenColumns,
     modifyColumnOrder: modifyColumnOrder,
     searchRows: searchRows
-  }))));
+  }), viewType === _constants.VIEW_TYPE.CARD && /*#__PURE__*/_react.default.createElement(_cardViewToolbar.default, {
+    isCustomPermission: true,
+    readOnly: false,
+    view: metadata === null || metadata === void 0 ? void 0 : metadata.view,
+    collaborators: collaborators,
+    modifyFilters: modifyFilters,
+    modifySorts: modifySorts
+  })))));
 };
 var _default = exports.default = ViewToolBar;

package/dist/components/view-toolbar/rows-toolbar/index.js

@@ -12,7 +12,7 @@ var _components = require("../../../common/components");
 var _typeDetection = require("../../../common/utils/type-detection");
 var _iconButton = _interopRequireDefault(require("../../icon-button"));
 var _icons = _interopRequireDefault(require("../../icons"));
-var _appContext = require("../../../hooks/app-context");
+var _hooks = require("../../../hooks");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 const RowsToolbar = _ref => {
   let {
@@ -26,7 +26,7 @@ const RowsToolbar = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileRepoContext)();
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [isSubOpen, setIsSubOpen] = (0, _react.useState)(false);
   const [subMenuKey, setSubMenuKey] = (0, _react.useState)('');

package/dist/components/view-toolbar/table-view-toolbar/index.js

@@ -72,7 +72,7 @@ const TableViewToolbar = _ref => {
     wrapperClass: "sea-metadata-view-tool-hide-column mr-2",
     target: `sea-metadata-hide-column-popover-${view._id}`,
     readOnly: readOnly,
-    columns: viewColumns.slice(fixedColumnCount),
+    columns: viewColumns === null || viewColumns === void 0 ? void 0 : viewColumns.slice(fixedColumnCount),
     hiddenColumns: view.hidden_columns || [],
     modifyHiddenColumns: modifyHiddenColumns,
     modifyColumnOrder: modifyColumnOrder

package/dist/components/view-toolbar/view-items/index.css

@@ -0,0 +1,55 @@
+ .sea-database-views-wrapper {
+   display: flex;
+   align-items: center;
+   flex-grow: 1;
+   position: relative;
+ }
+
+ .sea-database-views-wrapper .base-view-item {
+   display: flex;
+   align-items: center;
+   cursor: pointer;
+ }
+
+ .sea-database-views-wrapper .base-view-item .view-icons {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   font-size: 8px;
+   cursor: pointer;
+ }
+
+ .sea-database-views-dropdown-menu {
+   display: block;
+ }
+
+ .sea-database-views-dropdown-menu .sea-database-views-search-wrapper {
+   padding: 8px 16px;
+ }
+
+ .sea-database-views-dropdown-menu .sea-database-views-list-wrapper {
+   max-height: 240px;
+   min-height: 100px;
+   overflow-y: auto;
+   width: 300px;
+ }
+
+ .sea-database-views-dropdown-menu .view-item {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   position: relative;
+ }
+
+ .sea-database-views-dropdown-menu .view-item .view-item-left .seafile-multicolor-icon:hover {
+   cursor: grab;
+ }
+
+ .sea-database-views-dropdown-menu .view-item .view-item-right {
+   margin-right: 0;
+ }
+
+ .sea-database-views-dropdown-menu .add-item-btn {
+   padding-top: 8px;
+   height: 32px;
+ }