1 | import React, { Component } from 'react';
|
2 | import ReactDOM from 'react-dom';
|
3 | import PropTypes from 'prop-types';
|
4 | import Gumshoe from 'gumshoejs';
|
5 |
|
6 | const propTypes = {
|
7 | selector:PropTypes.string.isRequired,
|
8 | offset:PropTypes.func,
|
9 | navClass:PropTypes.string,
|
10 | contentClass:PropTypes.string,
|
11 | nested:PropTypes.bool,
|
12 | nestedClass:PropTypes.string,
|
13 | reflow:PropTypes.bool,
|
14 | event:PropTypes.bool,
|
15 | activeHandle:PropTypes.func,
|
16 | deactiveHandle:PropTypes.func,
|
17 | };
|
18 | const defaultProps = {
|
19 | navClass: 'active',
|
20 | contentClass: 'active',
|
21 |
|
22 |
|
23 | nested: false,
|
24 | nestedClass: 'active',
|
25 |
|
26 |
|
27 | offset: 0,
|
28 | reflow: false,
|
29 |
|
30 |
|
31 | events: true,
|
32 | activeHandle:()=>{},
|
33 | deactiveHandle:()=>{}
|
34 | };
|
35 | class Anchor extends Component {
|
36 |
|
37 | componentDidMount(){
|
38 | let props = this.props;
|
39 | this.anchor = new Gumshoe(props.selector,{
|
40 | ...props
|
41 | })
|
42 | this.anchorDOM.addEventListener('gumshoeActivate',(event)=>{
|
43 |
|
44 | let li = event.target;
|
45 |
|
46 |
|
47 | let link = event.detail.link;
|
48 |
|
49 |
|
50 | let content = event.detail.content;
|
51 |
|
52 | props.activeHandle(li,link,content)
|
53 | })
|
54 | this.anchorDOM.addEventListener('gumshoeDeactivate',(event)=>{
|
55 | let li = event.target;
|
56 |
|
57 |
|
58 | let link = event.detail.link;
|
59 |
|
60 |
|
61 | let content = event.detail.content;
|
62 |
|
63 | props.deactiveHandle(li,link,content)
|
64 | })
|
65 | }
|
66 | componentDidUpdate(){
|
67 | this.anchor.setup()
|
68 | this.anchor.detect()
|
69 | }
|
70 | componentWillUnmount(){
|
71 | this.anchor.destroy()
|
72 | }
|
73 | render(){
|
74 | return (
|
75 | <div className='u-anchor' ref={ref=>{this.anchorDOM=ref}}>
|
76 | {this.props.children}
|
77 | </div>
|
78 | )
|
79 | }
|
80 | };
|
81 |
|
82 | Anchor.propTypes = propTypes;
|
83 | Anchor.defaultProps = defaultProps;
|
84 | export default Anchor; |
\ | No newline at end of file |