import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { openSidebar } from '../actions/sidebar' import { openPopover } from '../actions/popover' import { BREAKPOINT_EXTRA_SMALL } from '../constants' import { me } from '../initial_state' import { makeGetAccount } from '../selectors' import Responsive from '../features/ui/util/responsive_component' import { CX, POPOVER_NAV_SETTINGS, } from '../constants' import Avatar from './avatar' import BackButton from './back_button' import Button from './button' import Heading from './heading' import Icon from './icon' import Search from './search' import Text from './text' const mapStateToProps = (state) => ({ account: makeGetAccount()(state, me), }) const mapDispatchToProps = (dispatch) => ({ onOpenSidebar() { dispatch(openSidebar()) }, onOpenNavSettingsPopover(targetRef) { dispatch(openPopover(POPOVER_NAV_SETTINGS, { targetRef, position: 'top', })) } }) export default @connect(mapStateToProps, mapDispatchToProps) class NavigationBar extends ImmutablePureComponent { static propTypes = { account: ImmutablePropTypes.map, actions: PropTypes.array, tabs: PropTypes.array, title: PropTypes.string, showBackBtn: PropTypes.bool, onOpenSidebar: PropTypes.func.isRequired, onOpenNavSettingsPopover: PropTypes.func.isRequired, noSearch: PropTypes.bool, } handleOnOpenNavSettingsPopover = () => { this.props.onOpenNavSettingsPopover(this.avatarNode) } setAvatarNode = (c) => { this.avatarNode = c } render() { const { title, showBackBtn, actions, tabs, account, onOpenSidebar, noSearch, } = this.props return (
{ /** Default */}

{ !noSearch &&
}
{ !!account && }
{ /** Mobile */}
{ !!account && !showBackBtn && } { showBackBtn && }
{title}
{ actions && actions.map((action, i) => (
) } } class NavigationBarButtonDivider extends PureComponent { render() { return (
) } } class NavigationBarButton extends PureComponent { static propTypes = { title: PropTypes.string, icon: PropTypes.string, to: PropTypes.string, href: PropTypes.string, attrTitle: PropTypes.string, } render() { const { title, icon, to, href, attrTitle, } = this.props const active = false const classes = CX({ default: 1, height53PX: 1, flexRow: 1, alignItemsCenter: 1, justifyContentCenter: 1, outlineNone: 1, cursorPointer: 1, bgTransparent: 1, noUnderline: 1, colorNavigation: 1, px10: !!title, px5: !title, colorWhite: !!title, fs13PX: !!title, fontWeightNormal: !!title, }) const iconClasses = CX({ fillNavigation: !!title || active, fillNavigationBlend: !title, mr10: !!title, }) const iconSize = !!title ? '16px' : '18px' return ( ) } }