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 | 1x 2x 1x 2x 1x 1x 1x 1x 1x 1x | // 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 classNames from 'classnames';
import GlobalActions from './global-actions/';
export const SkipLink = () => (
<React.Fragment>
<a
href="#"
className="slds-assistive-text slds-assistive-text_focus"
onClick={e => e.preventDefault()}
>
Skip to Navigation
</a>
<a
href="#"
className="slds-assistive-text slds-assistive-text_focus"
onClick={e => e.preventDefault()}
>
Skip to Main Content
</a>
</React.Fragment>
);
export const Logo = () => (
<div className="slds-global-header__logo">
<span className="slds-assistive-text">Salesforce</span>
</div>
);
class GlobalHeader extends Component {
constructor() {
super();
this.toggleFavorite = this.toggleFavorite.bind(this);
this.showNotification = this.showNotification.bind(this);
this.showIncomingNotification = this.showIncomingNotification.bind(this);
this.state = {
favoritesClicked: false,
showNotification: false,
notificationCount: 0
};
}
toggleFavorite() {
this.setState({
favoritesClicked: !this.state.favoritesClicked
});
}
showNotification() {
this.setState({
showNotification: !this.state.showNotification,
notificationCount: 1
});
}
showIncomingNotification() {
this.setState({
notificationCount: ++this.state.notificationCount
});
}
render() {
return (
<header
className={classNames(
'slds-global-header_container',
this.props.className
)}
>
<SkipLink />
<div className="slds-global-header slds-grid slds-grid_align-spread">
<div className="slds-global-header__item">
<Logo />
</div>
{!this.props.playground && (
<div className="slds-global-header__item slds-global-header__item_search">
{this.props.globalSearch}
</div>
)}
<div className="slds-global-header__item">
<GlobalActions
toggleFavorite={this.toggleFavorite}
favoritesClicked={this.state.favoritesClicked}
favoritesDisabled={this.props.favoritesDisabled}
showFavoritesPopup={this.props.showFavoritesPopup}
showNotification={this.state.showNotification}
notificationCount={this.state.notificationCount}
showNotificationPopup={this.props.showNotificationPopup}
showTaskMenu={this.props.showTaskMenu}
/>
</div>
</div>
{this.props.playground && (
<div className="slds-button-group slds-m-around_medium">
<button
className="slds-button slds-button_neutral"
onClick={() => this.showNotification()}
>
Toggle Notification
</button>
<button
className="slds-button slds-button_neutral"
onClick={() => this.showIncomingNotification()}
>
Increase count
</button>
</div>
)}
</header>
);
}
}
export default GlobalHeader;
|