All files / ts/components/navigation nav-bar.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
21x
21x
21x
21x
 
21x
 
21x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21x
 
 
11x
 
 
11x
 
 
 
 
 
 
21x
11x
11x
 
 
21x
5x
2x
 
 
5x
2x
 
 
 
21x
1x
1x
 
 
21x
48x
64x
16x
 
 
 
 
 
 
 
 
16x
 
 
 
 
 
 
 
 
 
 
 
16x
 
 
 
 
 
 
21x
26x
 
13x
6x
 
7x
 
 
 
21x
13x
 
13x
5x
5x
 
8x
8x
 
 
 
11x
5x
5x
 
5x
4x
 
4x
 
 
 
3x
 
 
 
 
 
 
5x
 
21x
 
21x
 
import * as classNames from 'classnames';
import * as React from 'react';
import { HTMLProps, PureComponent } from 'react';
import * as ReactDOM from 'react-dom';
import { ComponentProps } from '../../types';
import { addClassName, getScrollOffset, removeClassName } from '../../utils';
 
const WITH_FIXED_NAV_BAR = 'with-fixed-nav-bar';
 
export interface NavBarProps extends ComponentProps, HTMLProps<HTMLElement> {
  /**
   * Fix the navbar to the top of the screen
   */
  fixed?: boolean;
  /**
   * Hide the navbar when scrolling down, but display when scrolling up
   */
  shy?: boolean;
  /**
   * Remove NavBar shadow
   */
  noShadow?: boolean;
}
 
export interface NavBarState {
  hidden: boolean;
}
 
export class NavBar extends PureComponent<NavBarProps, NavBarState> {
  private previousScrollY: number;
 
  public constructor (props: NavBarProps) {
    super(props);
 
    this.previousScrollY = getScrollOffset().y;
 
    this.state = {
      hidden: false,
    };
  }
 
  public componentWillMount () {
    this.updateBodyClass(this.props);
    this.toggleShyListeners(this.props);
  }
 
  public componentWillUpdate (nextProps: NavBarProps) {
    if (this.props.shy !== nextProps.shy) {
      this.toggleShyListeners(nextProps);
    }
 
    if (this.props.fixed !== nextProps.fixed || this.props.shy !== nextProps.shy) {
      this.updateBodyClass(nextProps);
    }
  }
 
  public componentWillUnmount () {
    window.removeEventListener('scroll', this.hideOrShowNavBar);
    window.removeEventListener('resize', this.hideOrShowNavBar);
  }
 
  public render () {
    const {
      children,
      className,
      fixed,
      shy,
      noShadow,
      component: Component = 'div',
      ...remainingProps,
    } = this.props;
 
    const {
      hidden,
    } = this.state;
 
    const myClassNames = [
      'nav-bar',
      fixed || shy ? 'fixed' : null,
      shy ? 'shy' : null,
      hidden ? 'hidden' : null,
      noShadow ? 'no-shadow' : null,
      className
    ];
 
    return (
      <Component {...remainingProps} className={classNames(myClassNames)}>
        {children}
      </Component>
    );
  }
 
  private updateBodyClass (props: NavBarProps) {
    const { fixed, shy } = props;
 
    if (fixed || shy) {
      addClassName(document.body, WITH_FIXED_NAV_BAR);
    } else {
      removeClassName(document.body, WITH_FIXED_NAV_BAR)
    }
  }
 
  private toggleShyListeners (props: NavBarProps) {
    const { shy } = props;
 
    if (shy) {
      window.addEventListener('scroll', this.hideOrShowNavBar);
      window.addEventListener('resize', this.hideOrShowNavBar);
    } else {
      window.removeEventListener('scroll', this.hideOrShowNavBar);
      window.removeEventListener('resize', this.hideOrShowNavBar);
    }
  }
 
  private hideOrShowNavBar = () => {
    const { y } = getScrollOffset();
    const element = ReactDOM.findDOMNode(this);
 
    if (element) {
      const { height } = element.getBoundingClientRect();
 
      if (y > this.previousScrollY && y > height) {
        this.setState({
          hidden: true,
        });
      } else if (y < this.previousScrollY) {
        this.setState({
          hidden: false,
        });
      }
    }
 
    this.previousScrollY = y;
  }
}
 
export default NavBar;