@seafile/seafile-database 0.0.24 → 0.0.26

package/dist/components/popover/view-type-popover/index.js

@@ -0,0 +1,64 @@
+"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 _components = require("../../../common/components");
+var _icons = _interopRequireDefault(require("../../icons"));
+var _constants = require("../../../constants");
+var _translate = _interopRequireDefault(require("../../../lang/translate"));
+require("./index.css");
+const ViewTypePopover = _ref => {
+  let {
+    target,
+    type,
+    onChangeType,
+    hidePopover
+  } = _ref;
+  const onChangeViewType = (0, _react.useCallback)(type => {
+    onChangeType(type);
+    hidePopover();
+  }, [onChangeType, hidePopover]);
+  return /*#__PURE__*/_react.default.createElement(_components.CustomizePopover, {
+    target: target,
+    popoverClassName: "sea-metadata-view-type-popover",
+    hidePopover: hidePopover,
+    hidePopoverWithEsc: hidePopover,
+    modifiers: [{
+      name: 'preventOverflow',
+      options: {
+        boundary: document.body
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [-6, 8]
+      }
+    }]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-view-type-wrapper"
+  }, _constants.VIEW_TYPE_OPTIONS.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-view-type-item",
+    onClick: () => onChangeViewType(item.value),
+    key: index
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sea-metadata-view-type-item-left"
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    className: "sea-metadata-icon",
+    symbol: item.icon,
+    title: item.name
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "ml-2"
+  }, item.name)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sea-metadata-view-type-item-right"
+  }, type === item.value && /*#__PURE__*/_react.default.createElement(_icons.default, {
+    className: "sea-metadata-icon",
+    symbol: "check",
+    title: _translate.default.gettext('Selected')
+  }))))));
+};
+var _default = exports.default = ViewTypePopover;

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.useFileViewContext)();
   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.useFileViewContext)();
+  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.useFileViewContext)();
+  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.useFileViewContext)();
   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;
+ }

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

@@ -0,0 +1,98 @@
+"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 = Views;
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("../../../common/components");
+var _utils = require("../../../common/utils/utils");
+var _insertViewDialog = _interopRequireDefault(require("../../dialogs/insert-view-dialog"));
+var _icons = _interopRequireDefault(require("../../icons"));
+var _hooks = require("../../../hooks");
+var _viewsPopover = _interopRequireDefault(require("./views-popover"));
+require("./index.css");
+function Views() {
+  const {
+    context
+  } = (0, _hooks.useFileViewContext)();
+  const {
+    views,
+    currentViewId,
+    insertView
+  } = (0, _hooks.useViewContext)();
+  const viewRef = (0, _react.useRef)(null);
+  const [menuStyle, setMenuStyle] = (0, _react.useState)(null);
+  const [isShowViewsPopover, setIsShowViewsPopover] = (0, _react.useState)(false);
+  const [isShowAddViewDialog, setIsShowAddViewDialog] = (0, _react.useState)(false);
+  const currentView = (0, _react.useMemo)(() => {
+    return views.find(view => view._id === currentViewId);
+  }, [currentViewId, views]);
+  const onOpenViewsPopover = (0, _react.useCallback)(event => {
+    event && event.stopPropagation();
+    if (isShowViewsPopover) {
+      setIsShowViewsPopover(false);
+      return;
+    }
+    const {
+      left,
+      bottom
+    } = viewRef.current.getBoundingClientRect();
+    setMenuStyle({
+      left,
+      top: bottom + 12
+    }); // 12 is (view item height) - (all views button height)
+    setIsShowViewsPopover(true);
+  }, [isShowViewsPopover]);
+  const onCloseViewsPopover = (0, _react.useCallback)(event => {
+    event && event.stopPropagation();
+    setIsShowViewsPopover(false);
+  }, []);
+  const onAddViewDialogToggle = (0, _react.useCallback)(() => {
+    setIsShowAddViewDialog(!isShowAddViewDialog);
+    setIsShowViewsPopover(false);
+  }, [isShowAddViewDialog]);
+  const onAddView = (0, _react.useCallback)((viewName, viewType) => {
+    context.insertView({
+      name: viewName,
+      type: viewType
+    }).then(res => {
+      const {
+        view
+      } = res.data;
+      insertView(view);
+      onAddViewDialogToggle();
+    }).catch(err => {
+      const errMessage = _utils.Utils.getErrorMsg(err);
+      _components.toaster.danger(errMessage);
+    });
+  }, [context, insertView, onAddViewDialogToggle]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-database-views-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: viewRef,
+    className: "base-view-item",
+    onClick: onOpenViewsPopover
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "view-name"
+  }, currentView.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "view-icons ml-2"
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    width: "8px",
+    height: "8px",
+    symbol: 'arrow-up'
+  }), /*#__PURE__*/_react.default.createElement(_icons.default, {
+    width: "8px",
+    height: "8px",
+    symbol: 'arrow-down'
+  }))), isShowViewsPopover && /*#__PURE__*/_react.default.createElement(_viewsPopover.default, {
+    menuStyle: menuStyle,
+    onViewsPopoverToggle: onCloseViewsPopover,
+    onAddViewDialogToggle: onAddViewDialogToggle
+  }), isShowAddViewDialog && /*#__PURE__*/_react.default.createElement(_insertViewDialog.default, {
+    onAddView: onAddView,
+    toggleCancel: onAddViewDialogToggle
+  })));
+}

package/dist/components/view-toolbar/view-items/views-popover.js

@@ -0,0 +1,80 @@
+"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 = ViewsPopover;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("../../../common/components");
+var _icons = _interopRequireDefault(require("../../icons"));
+var _keyCodes = require("../../../constants/keyCodes");
+var _hooks = require("../../../hooks");
+var _translate = _interopRequireDefault(require("../../../lang/translate"));
+require("../../../assets/css/dropdown-menu.css");
+function ViewsPopover(_ref) {
+  let {
+    menuStyle,
+    onViewsPopoverToggle,
+    onAddViewDialogToggle
+  } = _ref;
+  const {
+    views,
+    currentViewId,
+    setCurrentViewId
+  } = (0, _hooks.useViewContext)();
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if (event.keyCode === _keyCodes.KeyCodes.ChineseInputMethod || event.keyCode === _keyCodes.KeyCodes.LeftArrow || event.keyCode === _keyCodes.KeyCodes.RightArrow) {
+      event.stopPropagation();
+    }
+  }, []);
+  const onSearchValueChange = (0, _react.useCallback)(newSearchValue => {
+    if (searchValue === newSearchValue) return;
+    setSearchValue(newSearchValue);
+  }, [searchValue]);
+  const toggleView = (0, _react.useCallback)(id => {
+    setCurrentViewId(id);
+    onViewsPopoverToggle();
+  }, [onViewsPopoverToggle, setCurrentViewId]);
+  return /*#__PURE__*/_react.default.createElement(_components.ClickOutside, {
+    onClickOutside: onViewsPopoverToggle
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-database-dropdown-menu dropdown-menu position-fixed sea-database-views-dropdown-menu",
+    style: menuStyle
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-database-views-search-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_components.SearchInput, {
+    autoFocus: true,
+    isShowSearchIcon: true,
+    value: searchValue,
+    size: 28,
+    placeholder: _translate.default.gettext('Search view'),
+    onKeyDown: onKeyDown,
+    onChange: onSearchValueChange
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-database-views-list-wrapper"
+  }, views.map(view => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: view._id,
+      onClick: () => {
+        toggleView(view._id);
+      },
+      className: (0, _classnames.default)('sea-database-dropdown-menu-item view-item')
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "view-item-left",
+      draggable: true
+    }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+      symbol: "drag"
+    }), view.name), /*#__PURE__*/_react.default.createElement("span", {
+      className: "view-item-right"
+    }, view._id === currentViewId && /*#__PURE__*/_react.default.createElement(_icons.default, {
+      symbol: "check"
+    })));
+  })), /*#__PURE__*/_react.default.createElement(_components.CommonAddTool, {
+    callBack: onAddViewDialogToggle,
+    footerName: _translate.default.gettext('Add view')
+  })));
+}

package/dist/constants/event-bus-type.js

@@ -66,5 +66,7 @@ const EVENT_BUS_TYPE = exports.EVENT_BUS_TYPE = {
   START_SEARCH_ROWS: 'start_search_rows',
   CLEAR_SEARCH_ROWS: 'clear_search_rows',
   RE_SEARCH_ROWS: 're_search_rows',
-  DISPLAY_SORTS: 'display_sorts'
+  DISPLAY_SORTS: 'display_sorts',
+  // card
+  UPDATE_SELECTED_RECORD_IDS: 'update_selected_record_ids'
 };