mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-25 23:02:26 +00:00
Optimize/tabs animation (#7998)
* activities tabs * radio group * optimize statistic router * statistic tabs * devices tabs * libraries tabs * users tabs * optimize users * optimize libraries related routers * logs tab * virus scan & admin logs * optimize * revert debug code * optimize --------- Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
@@ -15,15 +15,27 @@ class Nav extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.navItems = [
|
||||
{ name: 'all', urlPart: 'all-libraries', text: gettext('All') },
|
||||
{ name: 'wikis', urlPart: 'all-wikis', text: gettext('Wikis') },
|
||||
{ name: 'system', urlPart: 'system-library', text: gettext('System') },
|
||||
{ name: 'trash', urlPart: 'trash-libraries', text: gettext('Trash') }
|
||||
{ name: 'all-libraries', urlPart: 'all-libraries', text: gettext('All') },
|
||||
{ name: 'all-wikis', urlPart: 'all-wikis', text: gettext('Wikis') },
|
||||
{ name: 'system-library', urlPart: 'system-library', text: gettext('System') },
|
||||
{ name: 'trash-libraries', urlPart: 'trash-libraries', text: gettext('Trash') }
|
||||
];
|
||||
this.sortOptions = [
|
||||
{ value: 'file_count-desc', text: gettext('Descending by files') },
|
||||
{ value: 'size-desc', text: gettext('Descending by size') }
|
||||
];
|
||||
this.itemRefs = [];
|
||||
this.itemWidths = [];
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.measureItems();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.currentItem !== prevProps.currentItem) {
|
||||
this.measureItems();
|
||||
}
|
||||
}
|
||||
|
||||
onSelectSortOption = (item) => {
|
||||
@@ -31,15 +43,34 @@ class Nav extends React.Component {
|
||||
this.props.sortItems(sortBy);
|
||||
};
|
||||
|
||||
measureItems = () => {
|
||||
this.itemWidths = this.itemRefs.map(ref => ref?.offsetWidth || 77);
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { currentItem, sortBy, sortOrder = 'desc' } = this.props;
|
||||
const showSortIcon = currentItem == 'all' || currentItem == 'wikis';
|
||||
const showSortIcon = currentItem == 'all-libraries' || currentItem == 'all-wikis';
|
||||
const activeIndex = this.navItems.findIndex(item => item.name === currentItem) || 0;
|
||||
const indicatorWidth = this.itemWidths[activeIndex] || 56;
|
||||
const indicatorOffset = this.itemWidths.slice(0, activeIndex).reduce((a, b) => a + b, 0);
|
||||
|
||||
return (
|
||||
<div className="cur-view-path tab-nav-container">
|
||||
<ul className="nav">
|
||||
<ul
|
||||
className="nav nav-indicator-container position-relative"
|
||||
style={{
|
||||
'--indicator-width': `${indicatorWidth}px`,
|
||||
'--indicator-offset': `${indicatorOffset}px`
|
||||
}}
|
||||
>
|
||||
{this.navItems.map((item, index) => {
|
||||
return (
|
||||
<li className="nav-item" key={index}>
|
||||
<li
|
||||
className="nav-item"
|
||||
key={index}
|
||||
ref={el => this.itemRefs[index] = el}
|
||||
>
|
||||
<Link to={`${siteRoot}sys/${item.urlPart}/`} className={`nav-link${currentItem == item.name ? ' active' : ''}`}>{item.text}</Link>
|
||||
</li>
|
||||
);
|
||||
|
Reference in New Issue
Block a user