Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import SvgIcon from '../../../shared/svg-icon';
import { Menu, MenuList, MenuItem } from '../../menus/dropdown/example';
import ButtonIcon from '../../button-icons/';
import WaffleIcon from '../../dynamic-icons/waffle';
import _ from '../../../shared/helpers';
// Context Item Dropdown Menu
const ContextDropdownMenu = () => {
const menuGroupUniqueId = _.uniqueId('menu-group-id-');
return (
<Menu className="slds-dropdown_right">
<MenuList>
<MenuItem title="Main action">
<SvgIcon
className="slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small"
sprite="utility"
symbol="add"
/>
Main action
</MenuItem>
<li role="presentation">
<ul role="group" aria-labelledby={menuGroupUniqueId}>
<li
className="slds-dropdown__header slds-has-divider_top-space"
role="presentation"
id={menuGroupUniqueId}
>
<span>Menu header</span>
</li>
<MenuItem>Menu Item One</MenuItem>
<MenuItem>Menu Item Two</MenuItem>
<MenuItem>Menu Item Three</MenuItem>
</ul>
</li>
</MenuList>
</Menu>
);
};
export const NavBarItem = props => {
const {
label,
isActive,
hasNavMenu,
hasNavMenuOpen,
hasMenuDropdown
} = props;
const computedClassNames = classNames('slds-context-bar__item', {
'slds-is-active': isActive,
'slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click': hasNavMenu,
'slds-is-open': hasNavMenuOpen
});
return (
<li className={computedClassNames}>
<a
href="#"
className="slds-context-bar__label-action"
title={label}
onClick={e => e.preventDefault()}
>
{isActive && <span className="slds-assistive-text">Current Page:</span>}
<span className="slds-truncate" title={label}>
{label}
</span>
</a>
{hasNavMenu && (
<React.Fragment>
<OverflowMenuButton onClick={props.onClick} />
{hasMenuDropdown && <ContextDropdownMenu />}
</React.Fragment>
)}
</li>
);
};
NavBarItem.defaultProps = {
label: 'Menu Item',
hasMenuDropdown: true
};
NavBarItem.propTypes = {
label: PropTypes.string.isRequired,
isActive: PropTypes.bool,
hasNavMenu: PropTypes.bool,
hasNavMenuOpen: PropTypes.bool,
hasMenuDropdown: PropTypes.bool
};
const OverflowMenuButton = props => {
return (
<div className="slds-context-bar__icon-action slds-p-left_none">
<ButtonIcon
className="slds-button_icon slds-context-bar__button"
symbol="chevrondown"
aria-haspopup="true"
assistiveText="Open menu item submenu"
title="Open menu item submenu"
{...props}
/>
</div>
);
};
export let ContextBar = props => {
const { appName, homeItemIsActive, hasNavMenuOpen, children } = props;
return (
<div className="slds-context-bar">
<div className="slds-context-bar__primary">
<div className="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div className="slds-context-bar__icon-action">
<WaffleIcon className="slds-context-bar__button" />
</div>
<span className="slds-context-bar__label-action slds-context-bar__app-name">
<span className="slds-truncate" title={appName || 'App Name'}>
{appName || 'App Name'}
</span>
</span>
</div>
</div>
<nav className="slds-context-bar__secondary" role="navigation">
<ul className="slds-grid">
<NavBarItem label="Home" isActive={homeItemIsActive} />
{!children ? (
<React.Fragment>
<NavBarItem
label="Menu Item"
hasNavMenu
hasNavMenuOpen={hasNavMenuOpen}
onClick={() => props.toggleNavMenu()}
/>
<NavBarItem label="Menu Item" />
<NavBarItem label="Menu Item" />
<NavBarItem label="Menu Item" />
</React.Fragment>
) : (
children
)}
</ul>
</nav>
</div>
);
};
ContextBar.propTypes = {
appName: PropTypes.string,
homeItemIsActive: PropTypes.bool,
hasNavMenuOpen: PropTypes.bool,
children: PropTypes.node
};
class GlobalNavigation extends Component {
constructor() {
super();
this.toggleNavMenu = this.toggleNavMenu.bind(this);
this.state = {
hasNavMenuOpen: false
};
}
toggleNavMenu() {
this.setState({
hasNavMenuOpen: !this.state.hasNavMenuOpen
});
}
render() {
return (
<ContextBar
homeItemIsActive
toggleNavMenu={this.toggleNavMenu}
hasNavMenuOpen={this.props.hasNavMenuOpen || this.state.hasNavMenuOpen}
/>
);
}
}
export default GlobalNavigation;
|