haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-07 01:41:39 +00:00
Code Issues Releases Wiki Activity

feat: storage tree-panel section state (#7282)

Browse Source 
Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2024-12-30 19:01:33 +08:00
committed by GitHub
parent 324d981420
commit 50887d21dc
7 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/dir-view-mode/dir-column-view.js
View File

@@ -224,7 +224,7 @@ class DirColumnView extends React.Component {
updateCurrentDirent={this.props.updateCurrentDirent}
/>
)}
{currentMode === LIST_MODE &&
{currentMode === LIST_MODE && (
<DirListView
path={this.props.path}
repoID={this.props.repoID}
@@ -264,8 +264,8 @@ class DirColumnView extends React.Component {
getMenuContainerSize={this.getMenuContainerSize}
eventBus={this.props.eventBus}
/>
}
{currentMode === GRID_MODE &&
)}
{currentMode === GRID_MODE && (
<DirGridView
path={this.props.path}
repoID={this.props.repoID}
@@ -301,7 +301,7 @@ class DirColumnView extends React.Component {
getMenuContainerSize={this.getMenuContainerSize}
eventBus={this.props.eventBus}
/>
}
)}
</div>
</div>
);

2
frontend/src/components/dir-view-mode/dir-files.js
View File

@@ -367,6 +367,8 @@ class DirFiles extends React.Component {
return (
<>
<TreeSection
repoID={repoID}
stateStorageKey="files"
title={gettext('Files')}
renderHeaderOperations={this.renderTreeSectionHeaderOperations}
>

2
frontend/src/components/dir-view-mode/dir-tags/index.js
View File

@@ -21,7 +21,7 @@ const DirTags = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
if (!enableMetadata || !enableTags) return null;
return (
<TreeSection title={gettext('Tags')}>
<TreeSection repoID={repoID} title={gettext('Tags')} stateStorageKey="tags">
{!isLoading && (<TagsTreeView userPerm={userPerm} repoID={repoID} currentPath={currentPath} />)}
</TreeSection>
);

2
frontend/src/components/dir-view-mode/dir-views/index.js
View File

@@ -51,6 +51,8 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
return (
<>
<TreeSection
repoID={repoID}
stateStorageKey="views"
title={gettext('Views')}
renderHeaderOperations={renderTreeSectionHeaderOperations}
>

28
frontend/src/components/tree-section/index.js
View File

@@ -1,19 +1,37 @@
import React, { useCallback, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { TREE_PANEL_SECTION_STATE_KEY } from '../../constants';
import './index.css';
const TreeSection = ({ title, children, renderHeaderOperations, className }) => {
const TreeSection = ({ repoID, stateStorageKey, title, children, renderHeaderOperations, className }) => {
const [showChildren, setShowChildren] = useState(true);
const [highlight, setHighlight] = useState(false);
const [freeze, setFreeze] = useState(false);
const storageKey = useMemo(() => `${TREE_PANEL_SECTION_STATE_KEY}_${repoID}`, [repoID]);
useEffect(() => {
if (!stateStorageKey) return;
const stateString = window.localStorage.getItem(storageKey, '{}');
const state = JSON.parse(stateString) || {};
const currentValue = state[stateStorageKey] === false ? false : true;
setShowChildren(currentValue);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const toggleShowChildren = useCallback((event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
setShowChildren(!showChildren);
}, [showChildren]);
const newValue = !showChildren;
setShowChildren(newValue);
if (!stateStorageKey) return;
const stateString = window.localStorage.getItem(storageKey, '{}');
const stateOldValue = JSON.parse(stateString);
const newState = { ...stateOldValue, [stateStorageKey]: newValue };
window.localStorage.setItem(storageKey, JSON.stringify(newState));
}, [showChildren, storageKey, stateStorageKey]);
const onMouseEnter = useCallback(() => {
if (freeze) return;
@@ -76,6 +94,8 @@ const TreeSection = ({ title, children, renderHeaderOperations, className }) =>
};
TreeSection.propTypes = {
repoID: PropTypes.string,
stateStorageKey: PropTypes.string,
title: PropTypes.any.isRequired,
children: PropTypes.any,
className: PropTypes.string,

4
frontend/src/constants/index.js
View File

@@ -45,3 +45,7 @@ export const SYSTEM_FOLDERS = [
];
export const DIRENT_DETAIL_SHOW_KEY = 'sf_dirent_detail_show';
export const TREE_PANEL_STATE_KEY = 'sf_dir_view_tree_panel_open';
export const TREE_PANEL_SECTION_STATE_KEY = 'sf_dir_view_tree_panel_section_state';

6
frontend/src/pages/lib-content-view/lib-content-view.js
View File

@@ -21,7 +21,7 @@ import FileUploader from '../../components/file-uploader/file-uploader';
import CopyMoveDirentProgressDialog from '../../components/dialog/copy-move-dirent-progress-dialog';
import DeleteFolderDialog from '../../components/dialog/delete-folder-dialog';
import { EVENT_BUS_TYPE } from '../../components/common/event-bus-type';
import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY } from '../../constants';
import { PRIVATE_FILE_TYPE, DIRENT_DETAIL_SHOW_KEY, TREE_PANEL_STATE_KEY } from '../../constants';
import { MetadataStatusProvider } from '../../hooks';
import { MetadataProvider, CollaboratorsProvider } from '../../metadata/hooks';
import { TagsProvider } from '../../tag/hooks';
@@ -50,7 +50,7 @@ class LibContentView extends React.Component {
super(props);
let isTreePanelShown = true;
const storedTreePanelState = localStorage.getItem('sf_dir_view_tree_panel_open');
const storedTreePanelState = localStorage.getItem(TREE_PANEL_STATE_KEY);
if (storedTreePanelState != undefined) {
isTreePanelShown = storedTreePanelState === 'true';
}
@@ -2140,7 +2140,7 @@ class LibContentView extends React.Component {
if (this.state.isTreePanelShown) {
this.loadSidePanel(this.state.path);
}
localStorage.setItem('sf_dir_view_tree_panel_open', String(this.state.isTreePanelShown));
localStorage.setItem(TREE_PANEL_STATE_KEY, String(this.state.isTreePanelShown));
});
};