我希望用户单击按钮时弹出导航元素。因此,我决定从办公结构中合并Nav和Callout。
但是,当我添加/删除菜单项或用户展开/折叠项时,标注不会更改其大小。
为了获得所需的结果,我创建了函数“ updateSize”,并在componentDidMount,componentDidUpdate,linkExpandClick上调用它。
我希望我可以用更优雅的方式做到这一点。有一个吗?
PageNav.tsx:
import * as React from 'react';
import { Nav, INavLink } from 'office-ui-fabric-react/lib/Nav';
import { createRef } from 'office-ui-fabric-react/lib/Utilities';
interface PageNavState{
width: number,
height: number,
}
export class PageNav extends React.Component<any, PageNavState> {
static Navigation: INavLink[];
private divRef = createRef();
private navRef = createRef();
constructor(props) {
super(props);
this.state = { width: 100, height: 200};
}
componentDidMount = () => {
this.updateSize();
}
componentDidUpdate = () => {
this.updateSize();
}
linkExpandClick = () => {
this.setState({}, this.updateSize);
}
updateSize = () => {
// Does anybody knows a better way to handle size change of the menu?
var element : any = window.document.getElementsByClassName("nav")["0"];
if (!element) return;
element = element["childNodes"];
if (!element) return;
element = element["0"];
if (!element) return;
var h = element.clientHeight;
var w = element.clientWidth;
if (h != this.state.height || w != this.state.width)
{
this.setState({height: h, width: w});
}
}
public render(): JSX.Element {
return (
<div ref={this.divRef} style= {{height: this.state.height + 54, width: this.state.width}}>
<Nav className="nav" componentRef={this.navRef}
groups={[
{
links: PageNav.Navigation,
}
]}
isOnTop={true}
expandedStateText={'expanded'}
collapsedStateText={'collapsed'}
selectedKey={PageNav.getCurrentSelection()}
expandButtonAriaLabel={'Expand or collapse'}
onLinkExpandClick={this.linkExpandClick}
/>
</div>
);
}
static getCurrentSelection(): string {
return window.location.pathname;
}
}
MenuButton.tsx:
import * as React from 'react';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { PageNav } from './pageNav';
import Elements from '../design/elements';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
interface IMenuButtonState {
isMenuVisible?: boolean;
}
export default class MenuButton extends React.Component<{}, IMenuButtonState> {
private _menuButtonElement = React.createRef<HTMLDivElement>();
public constructor(props: {}) {
super(props);
this.state = {
isMenuVisible: false
};
}
public render(): JSX.Element {
return (
<div ref={this._menuButtonElement}
style={Elements.Menu}>
<Icon
onClick={this._onShowMenuClicked}
iconName="MoreVertical"
ariaLabel="Menu"
/>
<Callout
target={this._menuButtonElement.current}
onDismiss={this._onCalloutDismiss}
setInitialFocus={true}
hidden={!this.state.isMenuVisible}
calloutMaxHeight={1000}
isBeakVisible={false}
><PageNav /></Callout>
</div>
);
}
private _onShowMenuClicked = (): void => {
this.setState({
isMenuVisible: !this.state.isMenuVisible
});
};
private _onCalloutDismiss = (): void => {
this.setState({
isMenuVisible: false
});
};
}