@seafile/seafile-database 0.0.21 → 0.0.23

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

@@ -9,25 +9,22 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _constants = require("../../constants");
 var _hooks = require("../../hooks");
-var _iconButton = _interopRequireDefault(require("../icon-button"));
-var _cardViewToolbar = _interopRequireDefault(require("./card-view-toolbar"));
+var _appContext = require("../../hooks/app-context");
+var _row = require("../../utils/row");
+var _rowsToolbar = _interopRequireDefault(require("./rows-toolbar"));
 var _tableViewToolbar = _interopRequireDefault(require("./table-view-toolbar"));
-var _viewItems = _interopRequireDefault(require("./view-items"));
+var _views = _interopRequireDefault(require("./views"));
 require("./index.css");
 const ViewToolBar = _ref => {
   let {
     fixedColumnCount,
     tools = _constants.VIEW_TOOLS,
-    createRowsTools = null
+    createRowsTools = null,
+    toggleView
   } = _ref;
   const {
-    fileRepo,
     context
-  } = (0, _hooks.useFileRepoContext)();
-  const {
-    views,
-    currentViewId
-  } = (0, _hooks.useViewContext)();
+  } = (0, _appContext.useAppContext)();
   const {
     collaborators
   } = (0, _hooks.useCollaborators)();
@@ -39,40 +36,58 @@ const ViewToolBar = _ref => {
     modifyRowHeight,
     modifyHiddenColumns,
     modifyColumnOrder,
-    searchRows
+    searchRows,
+    deleteRows,
+    modifyRows,
+    updateLocalRow
   } = (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 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",
+  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",
     onClick: onHeaderClick
-  }, /*#__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", {
+  }, renderLeftTools(view), /*#__PURE__*/_react.default.createElement("div", {
     className: "sea-metadata-view-tools"
-  }, viewType === _constants.VIEW_TYPE.TABLE && /*#__PURE__*/_react.default.createElement(_tableViewToolbar.default, {
+  }, view && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, viewType === _constants.VIEW_TYPE.TABLE && /*#__PURE__*/_react.default.createElement(_tableViewToolbar.default, {
+    readOnly: readOnly,
     tools: tools,
     fixedColumnCount: fixedColumnCount,
-    view: metadata === null || metadata === void 0 ? void 0 : metadata.view,
+    view: view,
     collaborators: collaborators,
     modifyFilters: modifyFilters,
     modifySorts: modifySorts,
@@ -81,13 +96,6 @@ 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 _hooks = require("../../../hooks");
+var _appContext = require("../../../hooks/app-context");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 const RowsToolbar = _ref => {
   let {
@@ -26,7 +26,7 @@ const RowsToolbar = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _hooks.useFileRepoContext)();
+  } = (0, _appContext.useAppContext)();
   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 === null || viewColumns === void 0 ? void 0 : viewColumns.slice(fixedColumnCount),
+    columns: viewColumns.slice(fixedColumnCount),
     hiddenColumns: view.hidden_columns || [],
     modifyHiddenColumns: modifyHiddenColumns,
     modifyColumnOrder: modifyColumnOrder

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

@@ -0,0 +1,85 @@
+@import url('../view-item/index.css');
+
+.sea-metadata-views .sea-metadata-all-views-container {
+  padding: 0 8px;
+}
+
+.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item {
+  height: 24px;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item:hover {
+  background-color: #efefef;
+}
+
+.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item.active::before {
+  display: none;
+}
+
+.sea-metadata-views .sea-metadata-all-views-container .sea-qa-icon-svg-down {
+  width: 1rem !important;
+  height: 1rem !important;
+  color: #666;
+}
+
+.sea-metadata-views .sea-metadata-all-views-container .sea-metadata-view-item {
+  width: 24px;
+  height: 24px;
+  padding: 4px 6px;
+}
+
+.sea-metadata-view-dropdown-menu .all-views-search-wrapper {
+  padding: 8px 16px;
+}
+
+.sea-metadata-view-dropdown-menu .all-views-list-wrapper {
+  max-height: 240px;
+  min-height: 100px;
+  overflow-y: auto;
+  width: 300px;
+}
+
+.all-views-list-wrapper .dropdown-item.view-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.all-views-list-wrapper .dropdown-item.view-item.sea-metadata-view-item-next-position-before::before {
+  content: '';
+  border: 0.5px solid #555;
+  border-radius: 1px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+}
+
+.all-views-list-wrapper .dropdown-item.view-item.sea-metadata-view-item-next-position-after::after {
+  content: '';
+  border: 0.5px solid #555;
+  border-radius: 1px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+}
+
+.all-views-list-wrapper .dropdown-item.view-item .view-item-left .sea-qa-icon-svg:hover {
+  cursor: grab;
+}
+
+.all-views-list-wrapper .dropdown-item.view-item .view-item-right .sea-qa-icon-svg {
+  margin-right: 0;
+}
+
+.all-views-list-wrapper .all-views-empty-tip {
+  padding-left: 16px;
+}
+
+.all-views-list-wrapper .tip-default {
+  font-size: 14px;
+}

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

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("../../../../common/components");
+var _icons = _interopRequireDefault(require("../../../icons"));
+var _keyCodes = require("../../../../constants/keyCodes");
+var _translate = _interopRequireDefault(require("../../../../lang/translate"));
+require("./index.css");
+const AllViews = _ref => {
+  let {
+    viewID,
+    allViews = [],
+    isSelected,
+    onMove,
+    toggleView
+  } = _ref;
+  const [isShowDropdownMenu, setIsShowDropdownMenu] = (0, _react.useState)(false);
+  const [dropRelativePosition, setDropRelativePosition] = (0, _react.useState)('');
+  const [currentOverViewId, setCurrentOverViewId] = (0, _react.useState)('');
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const viewRef = (0, _react.useRef)(null);
+  const menuStyle = (0, _react.useRef)({});
+  const enteredCounter = (0, _react.useRef)(0);
+  const onDragStart = (0, _react.useCallback)((event, viewId) => {
+    event.stopPropagation();
+    event.dataTransfer.setDragImage(event.target.parentNode, 10, 10);
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', viewId);
+  }, []);
+  const onDragEnter = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    enteredCounter.current = enteredCounter.current + 1;
+  }, []);
+  const onDragOver = (0, _react.useCallback)((event, viewId) => {
+    if (event.dataTransfer.dropEffect === 'copy') return;
+    event.stopPropagation();
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    const dropRelativePosition = event.nativeEvent.offsetY <= event.target.clientHeight / 2 ? 'before' : 'after';
+    setDropRelativePosition(dropRelativePosition);
+    setCurrentOverViewId(viewId);
+  }, []);
+  const onDragLeave = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    enteredCounter.current = enteredCounter.current - 1;
+    if (!enteredCounter.current === 0) return;
+    setDropRelativePosition('');
+    setCurrentOverViewId('');
+  }, []);
+  const onDrop = (0, _react.useCallback)((event, viewId) => {
+    event.stopPropagation();
+    event.preventDefault();
+    enteredCounter.current = 0;
+    const moveViewID = event.dataTransfer.getData('text/plain');
+    if (moveViewID !== viewId) {
+      onMove && onMove(moveViewID, viewId, dropRelativePosition);
+    }
+    setDropRelativePosition('');
+    setCurrentOverViewId('');
+  }, [dropRelativePosition, onMove]);
+  const openDropdownMenu = (0, _react.useCallback)(() => {
+    const {
+      left,
+      bottom
+    } = viewRef.current.getBoundingClientRect();
+    menuStyle.current = {
+      left,
+      top: bottom + 12
+    }; // 12 is (view item height) - (all views button height)
+    setIsShowDropdownMenu(true);
+  }, []);
+  const closeDropdown = (0, _react.useCallback)(() => {
+    setIsShowDropdownMenu(false);
+    setSearchValue('');
+  }, []);
+  const views = (0, _react.useMemo)(() => {
+    if (searchValue) {
+      return allViews.filter(v => v.name.toLowerCase().includes(searchValue.toLowerCase()));
+    }
+    return allViews;
+  }, [allViews, searchValue]);
+  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]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sea-metadata-view-container sea-metadata-all-views-container",
+    onClick: openDropdownMenu
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)('sea-metadata-view-item', {
+      'active': isSelected
+    }),
+    ref: viewRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sea-metadata-view-item-operation-down"
+  }, /*#__PURE__*/React.createElement(_icons.default, {
+    symbol: "down"
+  })))), isShowDropdownMenu && /*#__PURE__*/React.createElement(_components.ClickOutside, {
+    onClickOutside: closeDropdown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sea-qa-dropdown-menu dropdown-menu position-fixed sea-metadata-view-dropdown-menu",
+    style: menuStyle.current
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "all-views-search-wrapper"
+  }, /*#__PURE__*/React.createElement(_components.SearchInput, {
+    autoFocus: true,
+    isShowSearchIcon: true,
+    value: searchValue,
+    size: 28,
+    placeholder: _translate.default.gettext('Search view'),
+    onKeyDown: onKeyDown,
+    onChange: onSearchValueChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "all-views-list-wrapper"
+  }, views.map(view => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: view._id,
+      onClick: () => {
+        toggleView(view._id);
+      },
+      className: (0, _classnames.default)('dropdown-item sea-qa-dropdown-item view-item', {
+        'sea-metadata-view-item-next-position-before': dropRelativePosition === 'before' && currentOverViewId === view._id,
+        'sea-metadata-view-item-next-position-after': dropRelativePosition === 'after' && currentOverViewId === view._id
+      }),
+      onDragStart: event => {
+        onDragStart(event, view._id);
+      },
+      onDragEnter: onDragEnter,
+      onDragOver: event => {
+        onDragOver(event, view._id);
+      },
+      onDragLeave: event => {
+        onDragLeave(event, view._id);
+      },
+      onDrop: event => {
+        onDrop(event, view._id);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "view-item-left",
+      draggable: true
+    }, /*#__PURE__*/React.createElement(_icons.default, {
+      symbol: "drag"
+    }), view.name), /*#__PURE__*/React.createElement("span", {
+      className: "view-item-right"
+    }, view._id === viewID && /*#__PURE__*/React.createElement(_icons.default, {
+      symbol: "check"
+    })));
+  }), views.length === 0 && /*#__PURE__*/React.createElement("div", {
+    className: "all-views-empty-tip"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tip-default"
+  }, _translate.default.gettext('No results')))))));
+};
+var _default = exports.default = AllViews;

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

@@ -0,0 +1,22 @@
+.sea-metadata-views { 
+  height: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 0 8px 0 16px;
+  overflow: hidden;
+}
+
+.sea-metadata-views .sea-metadata-views-nav-container {
+  height: 100%;
+  margin-right: 8px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  position: relative;
+  scrollbar-width: none;
+  display: inline-flex;
+}
+
+.sea-metadata-views .sea-metadata-views-nav-scroll-btns .scroll-active {
+  background-color: #efefef;
+}

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

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("../../../common/components");
+var _typeDetection = require("../../../common/utils/type-detection");
+var _iconButton = _interopRequireDefault(require("../../icon-button"));
+var _hooks = require("../../../hooks");
+var _appContext = require("../../../hooks/app-context");
+var _translate = _interopRequireDefault(require("../../../lang/translate"));
+var _allViews = _interopRequireDefault(require("./all-views"));
+var _viewItem = _interopRequireDefault(require("./view-item"));
+require("./index.css");
+const Views = _ref => {
+  var _getViewById;
+  let {
+    view,
+    toggleView
+  } = _ref;
+  const {
+    context
+  } = (0, _appContext.useAppContext)();
+  const [canScrollPrev, setCanScrollPrev] = (0, _react.useState)(false);
+  const [canScrollNext, setCanScrollNext] = (0, _react.useState)(false);
+  const [canViewsScroll, setViewsScroll] = (0, _react.useState)(true);
+  const [isShowViewNameDialog, setIsShowViewNameDialog] = (0, _react.useState)(false);
+  const isRenameRef = (0, _react.useRef)(false);
+  const viewsNavContainerRef = (0, _react.useRef)(null);
+  const {
+    isLoading,
+    viewsData,
+    viewID,
+    insertView,
+    modifyView,
+    moveView,
+    duplicateView,
+    deleteView,
+    getViewById
+  } = (0, _hooks.useViewsData)();
+  const allViews = (0, _react.useMemo)(() => {
+    if (isLoading) return [];
+    const {
+      navigation,
+      views
+    } = viewsData;
+    if (!navigation || !views) return [];
+    return navigation.map(n => views.find(v => v._id === n._id));
+  }, [isLoading, viewsData]);
+  const isSelected = (0, _react.useMemo)(() => {
+    if (viewID && !allViews.find(v => v._id === viewID)) return true;
+    return false;
+  }, [allViews, viewID]);
+  const openViewNameDialog = (0, _react.useCallback)(isRename => {
+    isRenameRef.current = Boolean(isRename);
+    setIsShowViewNameDialog(true);
+  }, []);
+  const closeViewNameDialog = (0, _react.useCallback)(() => {
+    isRenameRef.current = false;
+    setIsShowViewNameDialog(false);
+  }, []);
+  const checkAvailableScrollType = (0, _react.useCallback)(() => {
+    let {
+      offsetWidth,
+      scrollWidth,
+      scrollLeft
+    } = viewsNavContainerRef.current;
+    let _canScrollPrev = false;
+    let _canScrollNext = false;
+    if (scrollLeft > 0) {
+      _canScrollPrev = true;
+    }
+    if (scrollLeft + offsetWidth + 1 < scrollWidth) {
+      _canScrollNext = true;
+    }
+    if (_canScrollPrev !== canScrollPrev || _canScrollNext !== canScrollNext) {
+      setCanScrollPrev(_canScrollPrev);
+      setCanScrollNext(_canScrollNext);
+    }
+  }, [canScrollPrev, canScrollNext]);
+  const isContainerOverflowing = (0, _react.useCallback)(() => {
+    if (!viewsNavContainerRef.current) {
+      return false;
+    }
+    const container = viewsNavContainerRef.current;
+    const containerWidth = container.offsetWidth;
+    const childrenTotalWidth = container.scrollWidth;
+    return childrenTotalWidth > containerWidth;
+  }, []);
+  (0, _react.useEffect)(() => {
+    setViewsScroll(isContainerOverflowing());
+    const handleResize = () => {
+      setViewsScroll(isContainerOverflowing());
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isContainerOverflowing]);
+  const onScroll = (0, _react.useCallback)(() => {
+    checkAvailableScrollType();
+  }, [checkAvailableScrollType]);
+  const onWheel = (0, _react.useCallback)(event => {
+    const {
+      wheelDeltaX,
+      wheelDeltaY
+    } = event.nativeEvent;
+    // Mouse wheel scrolls, wheelDeltaY is not 0, wheelDeltaX is 0 (scroll up and down)
+    if (wheelDeltaY !== 0 && wheelDeltaX === 0) {
+      let tablesScrollLeft = viewsNavContainerRef.current.scrollLeft - wheelDeltaY;
+      if (tablesScrollLeft <= 0 && viewsNavContainerRef.current.scrollLeft > 0) {
+        viewsNavContainerRef.current.scrollLeft = 0;
+        return;
+      }
+      if (tablesScrollLeft > 0 && tablesScrollLeft < viewsNavContainerRef.current.clientWidth) {
+        viewsNavContainerRef.current.scrollLeft = tablesScrollLeft;
+      }
+    }
+  }, []);
+  const onScrollControlClick = (0, _react.useCallback)(type => {
+    const {
+      offsetWidth,
+      scrollWidth,
+      scrollLeft
+    } = viewsNavContainerRef.current;
+    let targetScrollLeft;
+    if (type === 'left') {
+      if (scrollLeft === 0) return;
+      targetScrollLeft = Math.max(scrollLeft - offsetWidth, 0);
+    } else if (type === 'right') {
+      if (scrollLeft + offsetWidth === scrollWidth) return;
+      targetScrollLeft = Math.min(scrollLeft + offsetWidth, scrollWidth - offsetWidth);
+    }
+    let timer = null;
+    const startScrollLeft = scrollLeft;
+    const distance = targetScrollLeft - startScrollLeft;
+    const stepCount = 20;
+    let currentStep = 0;
+    timer = setInterval(() => {
+      currentStep++;
+      const progress = currentStep / stepCount;
+      const easeProgress = 1 - Math.pow(1 - progress, 3);
+      const newScrollLeft = startScrollLeft + distance * easeProgress;
+      viewsNavContainerRef.current.scrollLeft = newScrollLeft;
+      if (currentStep >= stepCount) {
+        viewsNavContainerRef.current.scrollLeft = targetScrollLeft;
+        clearInterval(timer);
+      }
+    }, 16);
+  }, []);
+  (0, _react.useEffect)(() => {
+    checkAvailableScrollType();
+  }, [allViews, checkAvailableScrollType]);
+  const deleteAble = allViews.length > 1 && context.canDeleteView();
+  const moveAble = context.canMoveView();
+  const duplicateAble = context.canDuplicateView();
+  const modifyAble = context.canModifyView();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sea-metadata-views"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sea-metadata-views-nav-container",
+    ref: viewsNavContainerRef,
+    onScroll: onScroll,
+    onWheel: onWheel
+  }, allViews.map(v => {
+    const isSelect = (0, _typeDetection.isFunction)(toggleView) && v._id === viewID;
+    return /*#__PURE__*/React.createElement(_viewItem.default, {
+      key: v._id,
+      isSelect: isSelect,
+      view: v,
+      modifyAble: modifyAble,
+      deleteAble: deleteAble,
+      moveAble: moveAble,
+      duplicateAble: duplicateAble,
+      onSelect: toggleView,
+      onModify: () => openViewNameDialog(true),
+      onMove: moveView,
+      onDelete: deleteView,
+      onDuplicate: duplicateView
+    });
+  })), canViewsScroll && /*#__PURE__*/React.createElement("div", {
+    className: "sea-metadata-views-nav-scroll-btns d-flex align-items-center mr-2"
+  }, /*#__PURE__*/React.createElement(_allViews.default, {
+    viewID: viewID,
+    allViews: allViews,
+    isSelected: isSelected,
+    onMove: moveView,
+    toggleView: toggleView
+  }), /*#__PURE__*/React.createElement(_iconButton.default, {
+    icon: "left",
+    className: (0, _classnames.default)('scroll-control-btn scroll-prev', {
+      'scroll-active': canScrollPrev
+    }),
+    onClick: () => onScrollControlClick('left')
+  }), /*#__PURE__*/React.createElement(_iconButton.default, {
+    icon: "right",
+    className: (0, _classnames.default)('scroll-control-btn scroll-next ml-2', {
+      'scroll-active': canScrollNext
+    }),
+    onClick: () => onScrollControlClick('right')
+  })), context.canInsertView() && /*#__PURE__*/React.createElement(_iconButton.default, {
+    icon: "add",
+    onClick: () => openViewNameDialog()
+  })), isShowViewNameDialog && /*#__PURE__*/React.createElement(_components.CustomizeNameDialog, {
+    title: isRenameRef.current ? _translate.default.gettext('Rename view') : _translate.default.gettext('New view'),
+    value: isRenameRef.current ? ((_getViewById = getViewById(view._id)) === null || _getViewById === void 0 ? void 0 : _getViewById.name) || '' : '',
+    onToggle: closeViewNameDialog,
+    onSubmit: isRenameRef.current ? name => modifyView(view._id, {
+      name
+    }) : insertView
+  }));
+};
+var _default = exports.default = Views;