This repository has been archived by the owner on Nov 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
80 lines (68 loc) · 2.44 KB
/
index.js
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
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'redux';
import injectReducer from 'utils/injectReducer';
import withClickOutsideListener from 'react-onclickoutside';
import { createStructuredSelector } from 'reselect';
import NavItem from 'components/Navigation/NavItem';
import SubNav from 'components/Navigation/SubNav';
import SubNavItem from 'components/Navigation/SubNavItem';
import ImprovedLink from 'containers/ImprovedLink';
import { makeSelectSubnavVisible } from './selectors';
import { closeSubnav, toggleSubnav } from './actions';
import reducer from './reducer';
export class SubNavLinkContainer extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
handleClickOutside(event) {
this.props.onClose(event);
}
renderSubNav(subnav, visible, subnavKey) {
return (
<SubNav visible={visible}>
{this.renderSubNavItems(subnav, subnavKey)}
</SubNav>
);
}
renderSubNavItems(subnav, subnavKey) {
return subnav.map((item) =>
<SubNavItem key={`${subnavKey}_subitem_${item.to}`} onClick={this.props.onClose}>
<ImprovedLink {...item}>{item.title}</ImprovedLink>
</SubNavItem>
);
}
render() {
return (
<NavItem>
<a onClick={(evt) => this.props.onClick(evt, this.props.visible)} role="menuitem" tabIndex={this.props.tabIndex}>{this.props.children}</a>
{this.renderSubNav(this.props.subnav, this.props.visible, this.props.subnavKey)}
</NavItem>
);
}
}
SubNavLinkContainer.defaultProps = {
subnav: [],
tabIndex: 1,
};
SubNavLinkContainer.propTypes = {
subnav: PropTypes.array,
visible: PropTypes.bool,
subnavKey: PropTypes.string.isRequired,
onClick: PropTypes.func,
onClose: PropTypes.func,
tabIndex: PropTypes.number,
children: PropTypes.any,
};
const mapStateToProps = (state, ownProps) => createStructuredSelector({
visible: makeSelectSubnavVisible(ownProps),
});
export const mapDispatchToProps = (dispatch, ownProps) => ({
onClick: (evt, visible) => { evt.preventDefault(); return dispatch(toggleSubnav(visible, ownProps.subnavKey)); },
onClose: (evt) => dispatch(closeSubnav(evt, ownProps.subnavKey)),
});
const withReducer = injectReducer({ key: 'subnavs', reducer });
const withConnect = connect(mapStateToProps, mapDispatchToProps);
export default compose(
withReducer,
withConnect,
withClickOutsideListener,
)(SubNavLinkContainer);