@seafile/seafile-database 0.0.23 → 0.0.25

package/dist/api/api.js

@@ -10,6 +10,10 @@ var _axios = _interopRequireDefault(require("axios"));
 class SeafileAPI {
   constructor() {
     var _this = this;
+    (0, _defineProperty2.default)(this, "getFileRepoInfo", (wikiId, fileViewId) => {
+      const url = this.server + '/api/v2.1/wiki2/' + wikiId + '/file-views/' + fileViewId + '/';
+      return this.req.get(url);
+    });
     (0, _defineProperty2.default)(this, "getCollaborators", repoID => {
       const url = this.server + '/api/v2.1/repos/' + repoID + '/related-users/';
       return this.req.get(url);
@@ -160,43 +164,33 @@ class SeafileAPI {
       });
     });
   }
-  getRepoInfo(repoID) {
+  getRepo(repoID) {
     const url = this.server + '/api/v2.1/repos/' + repoID + '/';
     return this.req.get(url);
   }
-  getMetadataStatus(repoID) {
-    const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/';
+  getMetadata(params) {
+    const {
+      wiki_id: wikiId,
+      file_view_id: fileViewId
+    } = params;
+    const url = this.server + '/api/v2.1/wiki2/' + wikiId + '/file-view/' + fileViewId + '/records';
     return this.req.get(url);
   }
   getView(view_data) {
     const {
       wiki_id: wikiId,
-      view_id: viewId
+      file_view_id: fileViewId
     } = view_data;
-    const url = this.server + '/api/v2.1/wiki2/' + wikiId + '/views/' + viewId + '/';
+    const url = this.server + '/api/v2.1/wiki2/' + wikiId + '/file-views/' + fileViewId + '/';
     return this.req.get(url);
   }
-  modifyView(wikiId, viewId, viewData) {
-    const url = this.server + '/api/v2.1/wiki2/' + wikiId + '/views/';
+  modifyView(wikiId, fileViewId, viewData) {
+    const url = this.server + '/api/v2.1/wiki2/' + wikiId + '/file-views/' + fileViewId + '/';
     const data = {
-      view_id: viewId,
       view_data: viewData
     };
     return this.req.put(url, data);
   }
-  getMetadata(params) {
-    const {
-      view_data
-    } = params;
-    const {
-      wiki_id: wikiId,
-      view_id: viewId
-    } = view_data;
-    const url = this.server + '/api/v2.1/wiki2/' + wikiId + '/views/' + viewId + '/records/';
-    return this.req.get(url, {
-      params: params
-    });
-  }
   rotateImage(repoID, path, angle) {
     let url = `${this.server}/api/v2.1/repos/${repoID}/image-rotate/`;
     let form = new FormData();
@@ -300,5 +294,9 @@ class SeafileAPI {
     }
     return this.req.put(url, data);
   }
+  getMetadataStatus(repoID) {
+    const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/';
+    return this.req.get(url);
+  }
 }
 var _default = exports.default = SeafileAPI;

package/dist/assets/css/dropdown-menu.css

@@ -0,0 +1,96 @@
+.sea-database-dropdown-menu,
+.sea-database-dropdown-menu .sea-database-dropdown-menu-container {
+  min-width: 12rem;
+  padding: 8px 0;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-divider {
+  width: 100%;
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid #e9ecef;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item {
+  height: 30px;
+  width: 100%;
+  padding: 4px 24px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item-title {
+  color: #666;
+  padding: 3px 12px;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item-title:hover {
+  background-color: unset !important;
+  cursor: initial !important;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item-no-results {
+  height: 30px;
+  width: 100%;
+  padding: 4px 24px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item-hidden {
+  display: none;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item.disabled,
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item.disabled .sea-database-dropdown-item-content-icon {
+  color: #c2c2c2 !important;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item:hover {
+  background-color: #F5F5F5;
+  cursor: pointer;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item.disabled:hover {
+  background-color: unset;
+  cursor: default;
+  color: #c2c2c2;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-menu-item .sea-database-dropdown-item-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  font-size: 14px;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-item-content .sea-database-dropdown-item-content-icon {
+  margin-right: 10px;
+}
+
+.sea-database-dropdown-menu .sea-database-arrow-right {
+  color: #666;
+  font-size: 12px !important;
+}
+
+.sea-database-dropdown-menu .sea-database-dropdown-item-with-left-icon {
+  min-height: 32px;
+  padding: 3px 12px;
+}
+
+.sea-database-dropdown-menu .sea-database-check-mark {
+  color: #666;
+}
+
+/* sub menu */
+.sea-database-sub-dropdown-menu .popover {
+  left: -8px !important;
+}
+
+.sea-database-sub-dropdown-menu .bs-popover-auto[x-placement^="left"] {
+  left: 8px !important;
+}

package/dist/assets/css/file-repo.css

@@ -0,0 +1,3 @@
+.sdoc-file-repo-base-container {
+  position: relative;
+}

package/dist/common/components/file-tag/index.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _uuid = require("uuid");
 var _utils = require("../../utils/utils");
-var _appContext = require("../../../hooks/app-context");
+var _hooks = require("../../../hooks");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 var _fileTagList = _interopRequireDefault(require("./file-tag-list"));
 var _editFiletagPopover = _interopRequireDefault(require("./popover/edit-filetag-popover"));
@@ -26,7 +26,7 @@ const FileTag = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const [isEditFileTagShow, setEditFileTagShow] = (0, _react.useState)(false);
   const direntPath = (0, _react.useMemo)(() => (0, _utils2.getDirentPath)(dirent, path), [dirent, path]);
   const tagListTitleID = (0, _react.useMemo)(() => `detail-list-view-tags-${(0, _uuid.v4)()}`, []);

package/dist/common/components/modal-portal.js

@@ -16,6 +16,18 @@ class ModalPortal extends _react.default.Component {
   componentDidMount() {
     modalRoot.appendChild(this.el);
   }
+  componentDidUpdate() {
+    const {
+      className,
+      style
+    } = this.props;
+    if (className) {
+      this.el.className = className;
+    }
+    if (style) {
+      this.el.style = style;
+    }
+  }
   componentWillUnmount() {
     modalRoot.removeChild(this.el);
   }

package/dist/common/utils/icon-utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getFolderIconUrl = exports.getFileIconUrl = exports.getDirentIcon = void 0;
+exports.getFolderIconUrl = exports.getFileIconUrl = exports.getFileIconName = exports.getDirentIcon = void 0;
 var _css = _interopRequireDefault(require("../../assets/imgs/256/files/css.png"));
 var _draw = _interopRequireDefault(require("../../assets/imgs/256/files/draw.png"));
 var _excel = _interopRequireDefault(require("../../assets/imgs/256/files/excel.png"));
@@ -119,4 +119,11 @@ const getDirentIcon = (dirent, isBig) => {
     return getFolderIconUrl(readonly, size, dirent.has_been_shared_out);
   }
 };
-exports.getDirentIcon = getDirentIcon;
+exports.getDirentIcon = getDirentIcon;
+const getFileIconName = function (fileName) {
+  if (fileName.lastIndexOf('.') === -1) return FILEEXT_ICON_MAP['default'];
+  const file_ext = fileName.substr(fileName.lastIndexOf('.') + 1).toLowerCase();
+  if (FILEEXT_ICON_MAP[file_ext]) return FILEEXT_ICON_MAP[file_ext];
+  return FILEEXT_ICON_MAP['default'];
+};
+exports.getFileIconName = getFileIconName;

package/dist/common/utils/utils.js

@@ -328,6 +328,34 @@ const Utils = exports.Utils = {
     const image_exts = ['gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp', 'tif', 'tiff', 'jfif', 'heic', 'webp', 'svg'];
     return image_exts.includes(file_ext);
   },
+  pdfCheck: function (filename) {
+    if (filename.lastIndexOf('.') === -1) {
+      return false;
+    }
+    const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+    return file_ext === 'pdf';
+  },
+  // check if a file is a video
+  videoCheck: function (filename) {
+    // no file ext
+    if (filename.lastIndexOf('.') == -1) {
+      return false;
+    }
+    const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+    return ['mp4', 'ogv', 'webm', 'mov', 'm4v', 'mkv'].includes(file_ext);
+  },
+  isEditableSdocFile: function (filename, enableSeadoc) {
+    // no file ext
+    if (filename.lastIndexOf('.') === -1) {
+      return false;
+    }
+    const file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+    if (enableSeadoc && file_ext === 'sdoc') {
+      return true;
+    } else {
+      return false;
+    }
+  },
   isMarkdownFile: function (filePath) {
     let index = filePath.lastIndexOf('.');
     if (index === -1) {

package/dist/components/cell-editors/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _constants = require("../../constants");
-var _appContext = require("../../hooks/app-context");
+var _hooks = require("../../hooks");
 var _collaboratorEditor = _interopRequireDefault(require("./collaborator-editor"));
 var _dateEditor = _interopRequireDefault(require("./date-editor"));
 var _fileNameEditor = _interopRequireDefault(require("./file-name-editor"));
@@ -22,7 +22,7 @@ var _typeEditor = _interopRequireDefault(require("./type-editor"));
 const Editor = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   switch (props.column.type) {
     case _constants.CellType.TEXT:
       {

package/dist/components/cell-editors/multiple-select-editor/index.js

@@ -12,7 +12,7 @@ var _components = require("../../../common/components");
 var _typeDetection = require("../../../common/utils/type-detection");
 var _icons = _interopRequireDefault(require("../../icons"));
 var _keyCodes = require("../../../constants/keyCodes");
-var _appContext = require("../../../hooks/app-context");
+var _hooks = require("../../../hooks");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 var _column = require("../../../utils/column");
 var _deleteOptions = _interopRequireDefault(require("./delete-options"));
@@ -32,7 +32,7 @@ const MultipleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) =>
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const [value, setValue] = (0, _react.useState)((0, _column.getColumnOptionIdsByNames)(column, oldValue));
   const [searchValue, setSearchValue] = (0, _react.useState)('');
   const [highlightIndex, setHighlightIndex] = (0, _react.useState)(-1);

package/dist/components/cell-editors/single-select-editor/index.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _main = _interopRequireDefault(require("../../../common/components/option-editor/main"));
-var _appContext = require("../../../hooks/app-context");
+var _hooks = require("../../../hooks");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 var _cell = require("../../../utils/cell");
 var _column = require("../../../utils/column");
@@ -30,7 +30,7 @@ const SingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const editorRef = (0, _react.useRef)(null);
   const mainRef = (0, _react.useRef)(null);
   const canEditData = context.canModifyColumnData(column);

package/dist/components/cell-editors/tags-editor/index.js

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _main = _interopRequireDefault(require("../../../common/components/option-editor/main"));
 var _constants = require("../../../constants");
 var _hooks = require("../../../hooks");
-var _appContext = require("../../../hooks/app-context");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 require("./index.css");
 const TagsEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -27,7 +26,7 @@ const TagsEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const {
     tagsData,
     createTag

package/dist/components/cell-formatter/creator.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _globalSettings = _interopRequireDefault(require("../../global-settings"));
 var _validate = require("../../utils/validate");
 var _collaborator = _interopRequireDefault(require("./collaborator"));
 const CreatorFormatter = _ref => {
   let {
     value,
-    mediaUrl,
     className,
     api,
     collaborators = [],
@@ -33,6 +33,7 @@ const CreatorFormatter = _ref => {
       isMounted && setCollaborator(collaborator);
       return () => isMounted = false;
     }
+    const mediaUrl = _globalSettings.default.getSetting('mediaUrl');
     const defaultAvatarUrl = `${mediaUrl}/avatars/default.png`;
     if (value === 'anonymous') {
       collaborator = {
@@ -65,7 +66,7 @@ const CreatorFormatter = _ref => {
       isMounted && setCollaborator(collaborator);
     });
     return () => isMounted = false;
-  }, [value, api, mediaUrl, collaborators, collaboratorsCache, updateCollaboratorsCache]);
+  }, [value, api, collaborators, collaboratorsCache, updateCollaboratorsCache]);
   if (!collaborator) return emptyFormatter || null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('sea-metadata-ui cell-formatter-container creator-formatter', className)

package/dist/components/context-menu/index.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _components = require("../../common/components");
 var _dom = require("../../common/utils/dom");
-var _appContext = require("../../hooks/app-context");
+var _hooks = require("../../hooks");
 require("./index.css");
 const ContextMenu = _ref => {
   let {
@@ -20,7 +20,7 @@ const ContextMenu = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const menuRef = (0, _react.useRef)(null);
   const [visible, setVisible] = (0, _react.useState)(false);
   const [position, setPosition] = (0, _react.useState)({

package/dist/components/data-process-setter/filter-setter.js

@@ -12,7 +12,6 @@ var _deepCopy = _interopRequireDefault(require("deep-copy"));
 var _hotkey = require("../../common/utils/hotkey");
 var _typeDetection = require("../../common/utils/type-detection");
 var _hooks = require("../../hooks");
-var _appContext = require("../../hooks/app-context");
 var _translate = _interopRequireDefault(require("../../lang/translate"));
 var _constants = require("../../constants");
 var _filter = require("../../utils/filter");
@@ -35,7 +34,7 @@ const FilterSetter = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const {
     typesData
   } = (0, _hooks.useTypesData)();
@@ -95,7 +94,7 @@ const FilterSetter = _ref => {
     id: target
   }), isShowSetter && /*#__PURE__*/_react.default.createElement(_popover.FilterPopover, {
     appContext: context,
-    placement: "bottom-end",
+    placement: "bottom-start",
     filtersClassName: filtersClassName,
     target: target,
     readOnly: readOnly,

package/dist/components/data-process-setter/hide-column-setter.js

@@ -62,7 +62,7 @@ const HideColumnSetter = _ref => {
     readOnly: readOnly,
     hiddenColumns: validHiddenColumns,
     target: target,
-    placement: "bottom-end",
+    placement: "bottom-start",
     columns: validColumns,
     hidePopover: onSetterToggle,
     onChange: onChange,

package/dist/components/data-process-setter/index.js

@@ -34,6 +34,12 @@ Object.defineProperty(exports, "RowHeightSetter", {
     return _rowHeightSetter.default;
   }
 });
+Object.defineProperty(exports, "SettingsSetter", {
+  enumerable: true,
+  get: function () {
+    return _settingsSetter.default;
+  }
+});
 Object.defineProperty(exports, "SortSetter", {
   enumerable: true,
   get: function () {
@@ -45,4 +51,5 @@ var _groupbySetter = _interopRequireDefault(require("./groupby-setter"));
 var _hideColumnSetter = _interopRequireDefault(require("./hide-column-setter"));
 var _manageSetter = _interopRequireDefault(require("./manage-setter"));
 var _rowHeightSetter = _interopRequireDefault(require("./row-height-setter"));
+var _settingsSetter = _interopRequireDefault(require("./settings-setter"));
 var _sortSetter = _interopRequireDefault(require("./sort-setter"));

package/dist/components/data-process-setter/manage-setter.js

@@ -8,13 +8,12 @@ exports.default = void 0;
 var _react = require("react");
 var _reactstrap = require("reactstrap");
 var _hooks = require("../../hooks");
-var _appContext = require("../../hooks/app-context");
 var _translate = _interopRequireDefault(require("../../lang/translate"));
 var _icons = _interopRequireDefault(require("../icons"));
 const ManageSetter = () => {
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const {
     toggleAllTags
   } = (0, _hooks.useTagsData)();

package/dist/components/data-process-setter/settings-setter.js

@@ -0,0 +1,119 @@
+"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 _hotkey = require("../../common/utils/hotkey");
+var _constants = require("../../constants");
+var _translate = _interopRequireDefault(require("../../lang/translate"));
+var _column = require("../../utils/column");
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+var _settingsPopover = _interopRequireDefault(require("../popover/settings-popover"));
+const SettingsSetter = _ref => {
+  let {
+    readOnly,
+    wrapperClass,
+    target,
+    columns,
+    columnsMap,
+    settings,
+    modifySettings
+  } = _ref;
+  const [isShowSetter, setShowSetter] = (0, _react.useState)(false);
+  const displayColumns = (0, _react.useMemo)(() => {
+    const displayColumnsConfig = settings[_constants.CARD_SETTINGS_KEYS.COLUMNS];
+    const nameColumnKey = _constants.PRIVATE_COLUMN_KEY.FILE_NAME;
+    const mtimeColumnKey = _constants.PRIVATE_COLUMN_KEY.FILE_MTIME;
+    const lastModifierColumnKey = _constants.PRIVATE_COLUMN_KEY.FILE_MODIFIER;
+    const filteredColumns = columns.filter(item => item.key !== nameColumnKey && item.key !== mtimeColumnKey && item.key !== lastModifierColumnKey);
+    if (!displayColumnsConfig) {
+      return filteredColumns.map(column => ({
+        ...column,
+        shown: false
+      }));
+    }
+    const validDisplayColumnsConfig = displayColumnsConfig.map(columnConfig => {
+      const column = columnsMap[columnConfig.key];
+      if (column) return {
+        ...column,
+        shown: columnConfig.shown
+      };
+      return null;
+    }).filter(column => column && column.key !== nameColumnKey && column.key !== mtimeColumnKey);
+    const addedColumns = filteredColumns.filter(column => !(0, _column.getColumnByKey)(validDisplayColumnsConfig, column.key)).map(column => ({
+      ...column,
+      shown: false
+    }));
+    return [...validDisplayColumnsConfig, ...addedColumns];
+  }, [settings, columns, columnsMap]);
+  const displayColumnsConfig = (0, _react.useMemo)(() => displayColumns.map(column => ({
+    key: column.key,
+    shown: column.shown
+  })), [displayColumns]);
+  const onSetterToggle = (0, _react.useCallback)(() => {
+    setShowSetter(!isShowSetter);
+  }, [isShowSetter]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    if ((0, _hotkey.isEnter)(event) || (0, _hotkey.isSpace)(event)) onSetterToggle();
+  }, [onSetterToggle]);
+  const handleUpdateSettings = (0, _react.useCallback)((key, value) => {
+    modifySettings({
+      ...settings,
+      [key]: value
+    });
+  }, [settings, modifySettings]);
+  const onToggleField = (0, _react.useCallback)((key, shown) => {
+    const newDisplayColumnsConfig = displayColumnsConfig.map(columnConfig => {
+      if (columnConfig.key === key) return {
+        ...columnConfig,
+        shown
+      };
+      return columnConfig;
+    });
+    handleUpdateSettings(_constants.CARD_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig);
+  }, [displayColumnsConfig, handleUpdateSettings]);
+  const onMoveField = (0, _react.useCallback)((sourceKey, targetKey) => {
+    const newDisplayColumnsConfig = displayColumnsConfig.slice(0);
+    const sourceIndex = displayColumnsConfig.findIndex(columnConfig => columnConfig.key === sourceKey);
+    const targetIndex = displayColumnsConfig.findIndex(columnConfig => columnConfig.key === targetKey);
+    if (sourceIndex === -1 || targetIndex === -1) return;
+    newDisplayColumnsConfig.splice(sourceIndex, 1, displayColumnsConfig[targetIndex]);
+    newDisplayColumnsConfig.splice(targetIndex, 1, displayColumnsConfig[sourceIndex]);
+    handleUpdateSettings(_constants.CARD_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig);
+  }, [displayColumnsConfig, handleUpdateSettings]);
+  const onToggleFieldsVisibility = (0, _react.useCallback)(visibility => {
+    const newDisplayColumnsConfig = displayColumnsConfig.map(columnConfig => ({
+      ...columnConfig,
+      shown: visibility
+    }));
+    handleUpdateSettings(_constants.CARD_SETTINGS_KEYS.COLUMNS, newDisplayColumnsConfig);
+  }, [displayColumnsConfig, handleUpdateSettings]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+    icon: 'set-up',
+    size: 24,
+    className: wrapperClass,
+    onClick: onSetterToggle,
+    role: "button",
+    onKeyDown: onKeyDown,
+    tabIndex: 0,
+    id: target,
+    title: _translate.default.gettext('Setting'),
+    "aria-label": _translate.default.gettext('Setting')
+  }), isShowSetter && /*#__PURE__*/_react.default.createElement(_settingsPopover.default, {
+    readOnly: readOnly,
+    target: target,
+    columns: displayColumns,
+    settings: settings,
+    handleUpdateSettings: handleUpdateSettings,
+    onMoveField: onMoveField,
+    onToggleField: onToggleField,
+    onToggleFieldsVisibility: onToggleFieldsVisibility,
+    hidePopover: onSetterToggle
+  }));
+};
+var _default = exports.default = SettingsSetter;

package/dist/components/data-process-setter/sort-setter.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hotkey = require("../../common/utils/hotkey");
-var _appContext = require("../../hooks/app-context");
+var _hooks = require("../../hooks");
 var _translate = _interopRequireDefault(require("../../lang/translate"));
 var _constants = require("../../constants");
 var _sort = require("../../utils/sort");
@@ -27,7 +27,7 @@ const SortSetter = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const [isShowSetter, setShowSetter] = (0, _react.useState)(false);
   const sorts = (0, _react.useMemo)(() => {
     return (0, _sort.getValidSorts)(propsSorts || [], columns);

package/dist/components/data-process-setter/view-type-setter.js

@@ -0,0 +1,53 @@
+"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 _hotkey = require("../../common/utils/hotkey");
+var _translate = _interopRequireDefault(require("../../lang/translate"));
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+var _icons = _interopRequireDefault(require("../icons"));
+var _popover = require("../popover");
+const SettingsSetter = _ref => {
+  let {
+    readOnly,
+    wrapperClass,
+    target,
+    type,
+    modifyViewType
+  } = _ref;
+  const [isShowSetter, setShowSetter] = (0, _react.useState)(false);
+  const onSetterToggle = (0, _react.useCallback)(() => {
+    setShowSetter(!isShowSetter);
+  }, [isShowSetter]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    if ((0, _hotkey.isEnter)(event) || (0, _hotkey.isSpace)(event)) onSetterToggle();
+  }, [onSetterToggle]);
+  const onChangeType = (0, _react.useCallback)(type => {
+    modifyViewType(type);
+  }, [modifyViewType]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClass,
+    id: target,
+    onClick: onSetterToggle,
+    title: _translate.default.gettext('View type'),
+    "aria-label": _translate.default.gettext('View type')
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    className: 'mr-1',
+    symbol: type
+  }), /*#__PURE__*/_react.default.createElement(_icons.default, {
+    symbol: 'arrow-down'
+  })), isShowSetter && /*#__PURE__*/_react.default.createElement(_popover.ViewTypePopover, {
+    readOnly: readOnly,
+    target: target,
+    type: type,
+    onChangeType: onChangeType,
+    hidePopover: onSetterToggle
+  }));
+};
+var _default = exports.default = SettingsSetter;