forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from OfficeDev/master
Updating fork
- Loading branch information
Showing
242 changed files
with
10,104 additions
and
6,765 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,117 @@ | ||
| import * as React from 'react'; | ||
| import './App.scss'; | ||
| import { AppState } from './AppState'; | ||
| import { css } from 'office-ui-fabric-react/lib/Utilities'; | ||
| import { autobind } from 'office-ui-fabric-react/lib/Utilities'; | ||
| import AttachedScrollUtility from '../../utilities/AttachedScrollUtility'; | ||
| import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; | ||
| import { Nav } from '../Nav/Nav'; | ||
|
|
||
| export interface IAppProps extends React.Props<App> { | ||
| } | ||
|
|
||
| export interface IAppState { | ||
| isNavOpen: boolean; | ||
| isAttached: boolean; | ||
| navHeight: number; | ||
| } | ||
|
|
||
| export class App extends React.Component<IAppProps, any> { | ||
|
|
||
| private _attachedScrollThreshold: number; | ||
| private _appContent: HTMLDivElement; | ||
| private _appContentRect: ClientRect; | ||
|
|
||
| constructor(props: IAppProps) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| isNavOpen: false | ||
| isAttached: false | ||
| }; | ||
| } | ||
|
|
||
| public componentDidMount() { | ||
| window.addEventListener('scroll', this._handleNavPositioning); | ||
| window.addEventListener('resize', this._handleNavPositioning); | ||
|
|
||
| this._attachedScrollThreshold = AttachedScrollUtility.calculateAttachedScrollThreshold(); | ||
| this._handleNavPositioning(); | ||
| } | ||
|
|
||
| public componentWillUnmount() { | ||
| window.removeEventListener('scroll', this._handleNavPositioning); | ||
| window.removeEventListener('resize', this._handleNavPositioning); | ||
| } | ||
|
|
||
| public render() { | ||
| let { isNavOpen } = this.state; | ||
| let { navHeight } = this.state; | ||
| let appContentTop = this._appContentRect ? this._appContentRect.top : 100; | ||
| // Using appContentTop as a reference to match instead of 'unset' because it does not work in IE. | ||
| let navTop: string = this.state.isAttached ? '0' : appContentTop.toString(); | ||
| let navStyle = { | ||
| top: navTop, | ||
| height: navHeight | ||
| }; | ||
|
|
||
| return ( | ||
| <Fabric | ||
| className={ css( | ||
| 'App', | ||
| isNavOpen && 'is-navOpen' | ||
| ) } | ||
| className='App' | ||
| > | ||
| <div className='App-wrapper'> | ||
| <div className='App-nav'> | ||
| <div | ||
| className='App-nav' | ||
| style={ navStyle } | ||
| > | ||
| <Nav | ||
| pages={ AppState.pages } | ||
| onLinkClick={ this._onNavItemClicked.bind(this) } | ||
| /> | ||
| </div> | ||
| <div className='App-content' data-is-scrollable='true'> | ||
| <div | ||
| className='App-content' | ||
| data-is-scrollable='true' | ||
| ref={ (el) => this._appContent = el } | ||
| data-app-content-div='true' | ||
| > | ||
| { this.props.children } | ||
| </div> | ||
| </div> | ||
| </Fabric> | ||
| ); | ||
| } | ||
|
|
||
| private _onNavItemClicked(ev: MouseEvent) { | ||
| @autobind | ||
| private _handleNavPositioning() { | ||
| let { isAttached, navHeight } = this.state; | ||
| this._appContentRect = this._appContent.getBoundingClientRect(); | ||
| const viewPortHeight = window.innerHeight; | ||
| isAttached = AttachedScrollUtility.shouldComponentAttach(isAttached, this._attachedScrollThreshold); | ||
| navHeight = this._calculateNavHeight(viewPortHeight, this._appContentRect, navHeight); | ||
| this.setState({ | ||
| isNavOpen: false | ||
| isAttached: isAttached, | ||
| navHeight: navHeight | ||
| }); | ||
| } | ||
|
|
||
| private _calculateNavHeight(viewPortHeight: number, appContentRect: ClientRect, height: number): number { | ||
| if (!appContentRect) { | ||
| return height; | ||
| } | ||
| if (appContentRect.top >= 0) { | ||
| // This case accounts for space taken up by the UHF header in the viewport. | ||
| height = viewPortHeight - appContentRect.top; | ||
| if (appContentRect.height < appContentRect.bottom && viewPortHeight > appContentRect.bottom) { | ||
| // This case might only exist in the UHF testing environment, when content isn't rendering properly and its height is weird. | ||
| height = appContentRect.height; | ||
| } | ||
| } else if (viewPortHeight < appContentRect.bottom && appContentRect.top < 0) { | ||
| // For pages with content that's longer than the viewport, the viewport is the height. | ||
| // Takes effect when you scroll past the header. | ||
| height = viewPortHeight; | ||
| } else if (appContentRect.bottom < 0) { | ||
| // In smaller screens when you scroll till the footer takes the whole page, collapse the nav. | ||
| height = 0; | ||
| } else { | ||
| // Once the footer is in view, match nav bottom to content bottom. | ||
| height = appContentRect.bottom; | ||
| } | ||
| return height; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.