Skip to content

Commit

Permalink
feat: optimzie code
Browse files Browse the repository at this point in the history
  • Loading branch information
杨国璇 authored and 杨国璇 committed Aug 6, 2024
1 parent 060f34a commit 0832df8
Show file tree
Hide file tree
Showing 13 changed files with 114 additions and 72 deletions.
5 changes: 2 additions & 3 deletions frontend/src/components/dirent-detail/dirent-details/dir-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { CellType } from '../../../metadata/metadata-view/_basic';
import { gettext } from '../../../utils/constants';
import { MetadataDetails } from '../../../metadata';

const DirDetails = ({ repoID, repoInfo, dirent, direntType, path, direntDetail }) => {
const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail }) => {
const parent = useMemo(() => getFileParent(repoInfo, dirent, path), [repoInfo, dirent, path]);
const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);

Expand All @@ -22,7 +22,7 @@ const DirDetails = ({ repoID, repoInfo, dirent, direntType, path, direntDetail }
}]} />
<DetailItem field={{ type: CellType.MTIME, name: gettext('Last modified time') }} value={direntDetail.mtime} />
{window.app.pageOptions.enableMetadataManagement && (
<MetadataDetails repoID={repoID} filePath={direntPath} direntType={direntType} />
<MetadataDetails repoID={repoID} filePath={direntPath} direntType="dir" />
)}
</>
);
Expand All @@ -32,7 +32,6 @@ DirDetails.propTypes = {
repoID: PropTypes.string,
repoInfo: PropTypes.object,
dirent: PropTypes.object,
direntType: PropTypes.string,
path: PropTypes.string,
direntDetail: PropTypes.object,
};
Expand Down
18 changes: 14 additions & 4 deletions frontend/src/components/dirent-detail/dirent-details/file-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import EditFileTagPopover from '../../popover/edit-filetag-popover';
import FileTagList from '../../file-tag-list';
import { Utils } from '../../../utils/utils';
import { MetadataDetails } from '../../../metadata';
import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';

const FileDetails = ({ repoID, repoInfo, dirent, path, direntDetail, direntType, onFileTagChanged, repoTags, fileTagList }) => {
const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => {
const [isEditFileTagShow, setEditFileTagShow] = useState(false);

const parent = useMemo(() => getFileParent(repoInfo, dirent, path), [repoInfo, dirent, path]);
Expand Down Expand Up @@ -46,7 +47,7 @@ const FileDetails = ({ repoID, repoInfo, dirent, path, direntDetail, direntType,
</DetailItem>
)}
{window.app.pageOptions.enableMetadataManagement && (
<MetadataDetails repoID={repoID} filePath={direntPath} direntType={direntType} />
<MetadataDetails repoID={repoID} filePath={direntPath} direntType="file" />
)}
{isEditFileTagShow &&
<EditFileTagPopover
Expand All @@ -61,13 +62,22 @@ const FileDetails = ({ repoID, repoInfo, dirent, path, direntDetail, direntType,
}
</>
);
};
}, (props, nextProps) => {
const { repoID, repoInfo, dirent, path, direntDetail } = props;
const isChanged = (
repoID !== nextProps.repoID ||
path !== nextProps.path ||
!ObjectUtils.isSameObject(repoInfo, nextProps.repoInfo) ||
!ObjectUtils.isSameObject(dirent, nextProps.dirent) ||
!ObjectUtils.isSameObject(direntDetail, nextProps.direntDetail)
);
return !isChanged;
});

FileDetails.propTypes = {
repoID: PropTypes.string,
repoInfo: PropTypes.object,
dirent: PropTypes.object,
direntType: PropTypes.string,
path: PropTypes.string,
direntDetail: PropTypes.object,
onFileTagChanged: PropTypes.func,
Expand Down
42 changes: 22 additions & 20 deletions frontend/src/components/dirent-detail/dirent-details/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,17 @@ import Dirent from '../../../models/dirent';
import Header from '../header';
import DirDetails from './dir-details';
import FileDetails from './file-details';
import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';

import './index.css';

const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRepoInfo, repoTags, fileTags, onItemDetailsClose, onFileTagChanged }) => {
const [direntType, setDirentType] = useState('');
const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
const [direntDetail, setDirentDetail] = useState('');
const [dirent, setDirent] = useState(null);

const updateDetailView = useCallback((repoID, dirent, direntPath) => {
const apiName = dirent.type === 'file' ? 'getFileInfo' : 'getDirInfo';
seafileAPI[apiName](repoID, direntPath).then(res => {
setDirentType(dirent.type === 'file' ? 'file' : 'dir');
setDirentDetail(res.data);
setDirent(dirent);
}).catch(error => {
Expand All @@ -29,7 +28,6 @@ const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRe
}, []);

useEffect(() => {
console.log('index 组件更新');
setDirent(null);
if (propsDirent) {
const direntPath = Utils.joinPath(path, propsDirent.name);
Expand All @@ -39,36 +37,32 @@ const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRe
const dirPath = Utils.getDirName(path);
seafileAPI.listDir(repoID, dirPath).then(res => {
const direntList = res.data.dirent_list;
let folderDirent = null;
for (let i = 0; i < direntList.length; i++) {
let dirent = direntList[i];
if (dirent.parent_dir + dirent.name === path) {
folderDirent = new Dirent(dirent);
break;
}
let folderDirent = direntList.find(item => item.parent_dir + item.name === path) || null;
if (folderDirent) {
folderDirent = new Dirent(folderDirent);
}
updateDetailView(repoID, folderDirent, path);
}).catch(error => {
const errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [propsDirent, path]);
}, [propsDirent, path, repoID]);

if (!dirent) return null;
const direntName = dirent.name;
const smallIconUrl = Utils.getDirentIcon(dirent);
// let bigIconUrl = dirent ? Utils.getDirentIcon(dirent, true) : Utils.getDirentIcon(folderDirent, true);
// let bigIconUrl = Utils.getDirentIcon(dirent, true);
let bigIconUrl = '';
const isImg = Utils.imageCheck(dirent.name);
// const isVideo = dirent ? Utils.videoCheck(dirent.name) : Utils.videoCheck(folderDirent.name);
// const isVideo = Utils.videoCheck(dirent.name);
if (isImg) {
bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
}

return (
<div className="detail-container">
<Header title={direntName} icon={smallIconUrl} onClose={onItemDetailsClose} />
<Header title={direntName} icon={smallIconUrl} onClose={onClose} />
<div className="detail-body dirent-info">
{isImg && (
<div className="detail-image-thumbnail">
Expand All @@ -77,12 +71,11 @@ const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRe
)}
{direntDetail && (
<div className="detail-content">
{direntType === 'dir' ? (
{dirent.type !== 'file' ? (
<DirDetails
repoID={repoID}
repoInfo={currentRepoInfo}
dirent={dirent}
direntType={direntType}
direntDetail={direntDetail}
path={path}
/>
Expand All @@ -91,7 +84,6 @@ const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRe
repoID={repoID}
repoInfo={currentRepoInfo}
dirent={dirent}
direntType={direntType}
path={path}
direntDetail={direntDetail}
repoTags={repoTags}
Expand All @@ -104,16 +96,26 @@ const DirentDetails = React.memo(({ dirent: propsDirent, path, repoID, currentRe
</div>
</div>
);
}, (props, nextProps) => {
const { dirent, path, repoID, currentRepoInfo, repoTags, fileTags } = props;
const isChanged = (
!ObjectUtils.isSameObject(currentRepoInfo, nextProps.currentRepoInfo) ||
!ObjectUtils.isSameObject(dirent, nextProps.dirent) ||
JSON.stringify(repoTags || []) !== JSON.stringify(nextProps.repoTags || []) ||
JSON.stringify(fileTags || []) !== JSON.stringify(nextProps.fileTags || []) ||
path !== nextProps.path ||
repoID !== nextProps.repoID
);
return !isChanged;
});

DirentDetails.propTypes = {
repoID: PropTypes.string.isRequired,
dirent: PropTypes.object,
path: PropTypes.string.isRequired,
currentRepoInfo: PropTypes.object.isRequired,
onItemDetailsClose: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
onFileTagChanged: PropTypes.func.isRequired,
direntDetailPanelTab: PropTypes.string,
repoTags: PropTypes.array,
fileTags: PropTypes.array,
};
Expand Down
46 changes: 43 additions & 3 deletions frontend/src/components/dirent-detail/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,49 @@
import React from 'react';
import PropTypes from 'prop-types';
import LibDetail from './lib-details';
import DirentDetail from './dirent-details';

import './index.css';
import ObjectUtils from '../../metadata/metadata-view/utils/object-utils';

export {
LibDetail,
DirentDetail,
const Index = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {

if (path === '/' && !dirent) {
return (
<LibDetail currentRepoInfo={currentRepoInfo} onClose={onClose} />
);
}
return (
<DirentDetail
repoID={repoID}
path={path}
dirent={dirent}
currentRepoInfo={currentRepoInfo}
repoTags={repoTags}
fileTags={fileTags}
onFileTagChanged={onFileTagChanged}
onClose={onClose}
/>
);
}, (props, nextProps) => {
const isChanged = props.repoID !== nextProps.repoID ||
props.path !== nextProps.path ||
!ObjectUtils.isSameObject(props.dirent, nextProps.dirent) ||
!ObjectUtils.isSameObject(props.currentRepoInfo, nextProps.currentRepoInfo) ||
JSON.stringify(props.repoTags || []) !== JSON.stringify(nextProps.repoTags || []) ||
JSON.stringify(props.fileTags || []) !== JSON.stringify(nextProps.fileTags || []);
return !isChanged;
});

Index.propTypes = {
repoID: PropTypes.string,
path: PropTypes.string,
dirent: PropTypes.object,
currentRepoInfo: PropTypes.object,
repoTags: PropTypes.array,
fileTags: PropTypes.array,
onClose: PropTypes.func,
onFileTagChanged: PropTypes.func,
};

export default Index;
14 changes: 7 additions & 7 deletions frontend/src/components/dirent-detail/lib-details/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,26 @@ import Loading from '../../loading';
import DetailItem from '../detail-item';
import { CellType } from '../../../metadata/metadata-view/_basic';

const LibDetail = React.memo(({ currentRepo, closeDetails }) => {
const LibDetail = React.memo(({ currentRepoInfo, onClose }) => {
const [isLoading, setLoading] = useState(true);
const [repo, setRepo] = useState({});
const smallIconUrl = useMemo(() => Utils.getLibIconUrl(currentRepo), [currentRepo]);
const smallIconUrl = useMemo(() => Utils.getLibIconUrl(currentRepoInfo), [currentRepoInfo]);

useEffect(() => {
setLoading(true);
seafileAPI.getRepoInfo(currentRepo.repo_id).then(res => {
seafileAPI.getRepoInfo(currentRepoInfo.repo_id).then(res => {
const repo = new Repo(res.data);
setRepo(repo);
setLoading(false);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
});
}, [currentRepo.repo_id]);
}, [currentRepoInfo.repo_id]);

return (
<div className="detail-container">
<Header title={currentRepo.repo_name} icon={smallIconUrl} onClose={closeDetails} />
<Header title={currentRepoInfo.repo_name} icon={smallIconUrl} onClose={onClose} />
<div className="detail-body dirent-info">
{isLoading ? (
<div className="w-100 h-100 d-flex algin-items-center justify-content-center"><Loading /></div>
Expand All @@ -55,8 +55,8 @@ const LibDetail = React.memo(({ currentRepo, closeDetails }) => {
});

LibDetail.propTypes = {
currentRepo: PropTypes.object.isRequired,
closeDetails: PropTypes.func.isRequired,
currentRepoInfo: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
};

export default LibDetail;
7 changes: 2 additions & 5 deletions frontend/src/metadata/metadata-details/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,9 @@ import { Utils } from '../../utils/utils';
import metadataAPI from '../api';
import Column from '../metadata-view/model/metadata/column';
import { normalizeFields, getCellValueByColumn } from './utils';
import toaster from '../../components/toast';
import DetailItem from '../../components/dirent-detail/detail-item';

const MetadataDetails = React.memo(({ repoID, filePath, direntType, emptyTip }) => {
const MetadataDetails = ({ repoID, filePath, direntType, emptyTip }) => {
const [isLoading, setLoading] = useState(true);
const [metadata, setMetadata] = useState({ record: {}, fields: [] });

Expand All @@ -26,8 +25,6 @@ const MetadataDetails = React.memo(({ repoID, filePath, direntType, emptyTip })
setMetadata({ record, fields });
setLoading(false);
}).catch(error => {
const errorMsg = Utils.getErrorMsg(error);
toaster.danger(errorMsg);
setLoading(false);
});
}, [repoID, filePath, direntType]);
Expand All @@ -39,7 +36,7 @@ const MetadataDetails = React.memo(({ repoID, filePath, direntType, emptyTip })
const value = getCellValueByColumn(record, field);
return (<DetailItem key={field.key} field={field} value={value} emptyTip={emptyTip}/>);
});
});
};

MetadataDetails.propTypes = {
repoID: PropTypes.string,
Expand Down
1 change: 0 additions & 1 deletion frontend/src/metadata/metadata-view/components/table/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@
}

.sf-metadata-result-table-content .sf-metadata-result-table-row.sf-metadata-last-table-row {
height: 32px !important;
border-bottom: none;
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/metadata/metadata-view/components/table/table-main/records/group-body/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { getColumnScrollPosition, getColVisibleEndIdx, getColVisibleStartIdx } f
import { GROUP_HEADER_HEIGHT, GROUP_ROW_TYPE, GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH, EVENT_BUS_TYPE } from '../../../../../constants';
import { addClassName, removeClassName } from '../../../../../utils';

const ROW_HEIGHT = 32;
const ROW_HEIGHT = 33;
const GROUP_OVER_SCAN_ROWS = 10;
const MAX_ANIMATION_ROWS = 50;
const LOCAL_FOLDED_GROUP_KEY = 'path_folded_group';
Expand Down
13 changes: 7 additions & 6 deletions frontend/src/metadata/metadata-view/components/table/table-main/records/record/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,14 +175,15 @@ class Record extends React.Component {
};

getRecordStyle = () => {
const { isGroupView, height } = this.props;
let style = {
height: height + 'px',
};
const { isGroupView, height, isLastRecord } = this.props;
let style = { height: isLastRecord ? height - 1 : height };
if (isGroupView) {
const { top, left } = this.props;
style.top = top + 'px';
style.left = left + 'px';
style.top = top;
style.left = left;
if (isLastRecord) {
style.height = height + 1;
}
}
return style;
};
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/metadata/metadata-view/utils/group-metrics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const getGroupsRows = (
const lastRowIndex = rowsLength - 1;
const isRowVisible = isParentGroupVisible && isExpanded;
const isBtnInsertRowVisible = isRowVisible && includeInsertRow;
const rowsHeight = isRowVisible ? rowsLength * rowHeight : 0;
const rowsHeight = isRowVisible ? rowsLength * rowHeight + 1 : 0;
const btnInsertRowHeight = isBtnInsertRowVisible ? INSERT_ROW_HEIGHT : 0;
let rows = row_ids.map((rowId, index) => {
return {
Expand All @@ -90,7 +90,7 @@ export const getGroupsRows = (
rowIdx: index,
isLastRow: index === lastRowIndex,
visible: isRowVisible,
height: rowHeight,
height: index === lastRowIndex ? rowHeight + 1 : rowHeight,
level: currentLevel,
rowsLength,
left,
Expand Down
1 change: 1 addition & 0 deletions frontend/src/metadata/metadata-view/utils/object-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ class ObjectUtils {
}

static isSameObject(source, comparison) {
if (!source && !comparison) return true;
if (!source || !comparison) return false;
return !this.isObjectChanged(source, comparison);
}
Expand Down
Loading

0 comments on commit 0832df8

Please sign in to comment.