2.2.1 • Published 2 years ago
chronoscloud-navigation v2.2.1
React Chronos Navigation
Installation
npm i chronoscloud-navigation
How To Use
First import this component where you want to use it
import ChronosCloudNavigationBar from "chronoscloud-navigation"
Then just renders it
<ChronosCloudNavigationBar />
Props
Prop | Description | Default value |
---|---|---|
alias | Profile Alias | null |
application | Application Title | null |
appServices | Application Subscribed Services | null |
currentUser | User Profile | null |
hasCreateInvitePermission | Is invite permision link on profile menu visible | false |
hasMultiView | Is MultiView in App Switcher visible | false |
hasCoreAnalytics | Is Core Analytics in App Switcher visible | false |
hasSearch | Is Search bar visible | false |
host | ChronosCloud Host | null |
logo | Application Logo | null |
main | Main Title | null |
onLogout | On logout method | null |
returnToHome | Return To Homemethod | null |
protocol | ChronosCloud Protocol | null |
searchInput | Search Textbox area | null |
Example
import React, { Component } from "react";
import ChronosCloudNavigationBar from "chronoscloud-navigation";
import { userManager } from '../auth';
import { CHRONOSCLOUD_PROTOCOL, CHRONOSCLOUD_HOST, APP_ASSET_URL, APP_AUTH_IMAGE, APP_AUTH_URL, APP_CORE_IMAGE, APP_CORE_URL, APP_EDGE_IMAGE, APP_EDGE_URL, APP_TRACKER_IMAGE, APP_TRACKER_URL, APP_OV_URL, APP_ANALYTICS_IMAGE, APP_MULTIVIEW_IMAGE} from '../environment';
import SearchInput from '../components/Navigation/search';
class App extends Component {
onLogoutButtonClick(event) { // Used to handle logout event
event.preventDefault();
userManager.signoutRedirect();
}
render() {
const { profile } = this.props.subscription.data || {},
alias = profile ? profile.account_alias || profile.account : '',
currentPath = window.location.pathname,
currentUser = this.props.currentUser ? this.props.currentUser.profile || {} : null,
hasCreateInvitePermission = currentUser ? (currentUser.permissions.includes("AUTH.MANAGE_INVITATIONS")) : false,
hasCoreAnalytics = currentUser ? (currentUser.permissions.includes("CORE.ANALYTICS")) : false;
let services = {},
APP_MULTIVIEW_URL;
let services = {},
APP_MULTIVIEW_URL;
if(currentUser){
const PUBLIC_URL = `${CHRONOSCLOUD_PROTOCOL}//${currentUser.account_alias}.${CHRONOSCLOUD_HOST}`,
APP_ANALYTICS_URL = `${PUBLIC_URL}/analytics`;
APP_MULTIVIEW_URL = `${PUBLIC_URL}/multi_view`;
services = {
"AUTH": {
name: "Accounts",
icon: APP_AUTH_IMAGE,
link: APP_AUTH_URL
},
"CORE": {
name: "Enterprise",
icon: APP_CORE_IMAGE,
link: APP_CORE_URL
},
"EDGE": {
name: "Edge",
icon: APP_EDGE_IMAGE,
link: APP_EDGE_URL
},
"TRACKER": {
name: "Tracker",
icon: APP_TRACKER_IMAGE,
link: APP_TRACKER_URL
},
"VERIFIER": {
name: "Order Verifier",
icon: APP_CORE_IMAGE,
link: APP_OV_URL
},
"CORE.ANALYTICS": {
name: "Analytics",
icon: APP_ANALYTICS_IMAGE,
link: APP_ANALYTICS_URL
},
"MULTI.VIEW": {
name: "Multi View",
icon: APP_MULTIVIEW_IMAGE,
link: APP_MULTIVIEW_URL
}
}
}
returnToHome(){
this.props.history.push(`/`);
}
return (
<ChronosCloudNavigationBar
alias={alias}
protocol={CHRONOSCLOUD_PROTOCOL}
host={CHRONOSCLOUD_HOST}
currentUser={this.props.currentUser}
onLogout={this.onLogoutButtonClick}true
hasSearch={true}
hasCreateInvitePermission={hasCreateInvitePermission}
hasMultiView={true}
hasCoreAnalytics={hasCoreAnalytics}
main='ChronosCloud'
application='Enterprise'
appServices={services}
logo={`${APP_ASSET_URL}/scm-logo.png`}
returnToHome={returnToHome}
searchInput={<SearchInput className="chronos-navbar-search" {...this.props} /> }
/>
);
}
}
export default App;
2.2.1
2 years ago
2.2.0
3 years ago
2.1.0
3 years ago
2.0.12
3 years ago
2.0.11
3 years ago
2.0.9
3 years ago
2.0.10
3 years ago
2.0.8
4 years ago
2.0.7
4 years ago
2.0.6
4 years ago
2.0.5
4 years ago
2.0.4
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.1
5 years ago
1.0.24
5 years ago
1.0.0
5 years ago