@gloojs/core-ui

Shared components for internal and external gloo projects

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@gloojs/core-ui
2.2.110 months ago3 years agoMinified + gzip package size for @gloojs/core-ui in KB

Readme

core-ui Navigation
Navigation is a shared, consistent navbar component for all new Gloo applications.
| Mobile | Desktop | | -------- | -------- | | | |

Usage

$ npm i @gloojs/core-ui --save

# or

$ yarn add @gloojs/core-ui

# Install peerDependencies
npx install-peerdeps @gloojs/core-ui --auth $NPM_TOKEN

Gloo API Proxy

The Navigation component initiates REST API calls using the config passed via the client prop. For these API calls to succeed, your application server needs to proxy those request to the backend services. It is recommended to use the glooApiProxyMiddleware for this purpose.

Design limitations

Due to design wishes, Navigation is always fixed at the top of the page. Because of this, Navigation exports it's height as a static property, Navigation.height.

Organizations and Locations in Navigation

There are cases when you may not need to control current location because your application is working only on organization level, in these cases you can pass in only your organizationId and the organization/location dropdown changes to only display organizations. When you need to be able to switch between locations it's sufficient to pass in only the locationId prop. We can derive the current organization from the location.
If no valid location/organization is passed to Navigation, the dropdown will be hidden.

Example

```jsx= import { Navigation, createClient } from "@gloojs/core-ui"; import { useRouter } from "next/router";
const client = createClient({ baseURL: "/gloo-api" });
function App(props) { const router = useRouter(); const isAdmin = router.query.page === "admin";
const changeRoute = (e, id) => {
e.preventDefault();
router.push(`${router.pathname}?id=${id}`);
};
const links =
{
  text: "People",
  href: "#people",
  onClick: () => {}
},
{
  text: "Dashboards",
  href: "#dashboards"
}
;
const config = {
onLocationChange: (e, { locId, orgId }) => changeRoute(e, locId),
onOrganizationChange: (e, { orgId, locId }) => changeRoute(e, orgId),
getLocationHref: locId => `/app?id=${locId}`,
getOrganizationHref: orgId => `/app?id=${orgId}`,
signOutLink: "/logout",
onSignOutClick: () => console.log("Logged out"),
applicationContext: {
  name: "Home",
  onClick: () => console.log("clicked home"),
  href: "/",
  logoSrc: "https://assets.gloo.us/design/some-cool-logo.png"
},
links,
appDomain: process.env.APP_DOMAIN
};
const organization = useMemo(() => ({ id: router.query.id }),
router.query.id
);
const orgProps = isAdmin
? { organizationId: organization.id }
: { locationId: organization.id };
return (
<div styles={{paddingTop: `${Navigation.height}px`}}>
  <Navigation config={config} {...orgProps} />
</div>
); }
export default App; ```

Props

organizationId

string | default: undefined

Used to control currently selected organization.

locationId

string | default: undefined

Used to control currently selected location.

client

function(options: RequestConfig) | Required

Used to configure axios client instance.

config

object | Required

More detailed description of all props within config is detailed under here.

disableOrgSwitching

boolean | default: false

Switch off/enable organization switching dropdown.
onLocationChange
function(e: Event, {locId: string, orgId: string}) | default: () => {/* noop */}

Called when location is changed in the locations dropdown, can be used to run side-effects such as programmatic route changes or logging. Returns the click event and the new current location and organization.
onOrganizationChange
function(e: Event, {locId: string, orgId: string}) | default: () => {/* noop */}

Called when organization is changed in the organizations dropdown, can be used to run side-effects such as programmatic route changes or logging. Returns the click event and the new current location and organization. Location defaults to the first location of the current organization.
getLocationHref
function(locationId: string) | Required

Used to construct a link for the location list items.
getOrganizationHref
function(organizationId: string) | Required

Used to construct a link for the organization list items.
signOutLink
string | Required

Link for sign out page.
onSignOutClick
function() | default: () => {/* noop */}

Can be used to perform side effects when signing out.
applicationContext
object | Required

Configure information about the current gloo application.
| Prop | Type | Description | | -------- | -------- | -------- | |name|string, required | Name of the current application. I.e Home, Admin, etc.| |href|string, required | Link to the index page of the current application. | |onClick|function() | Perform side-effects when clicking link to application index. | |logoSrc|string, required | Link to logo used for application. |
links
array | default: undefined

Links to be shown on the navigation bar.
| Prop | Type | Description | | -------- | -------- | -------- | |text|string, required | Text on link | |href|string, required | Link href. | |onClick|function() | Perform side-effects when clicking link. |
appDomain
string | Required

>Example - dev.gloo.us / gloo.us
Used to configure environment on links, make sure you're using production env for deployed applications.
environmentBaseUrl

This config value is not supported in version 2.0.0 and later

This config value is deprecated! - Please use the appDomain config value

string

Used to configure environment on links, make sure you're using production env for deployed applications.
allowedOrganizationTypes
array of string | default: undefined

Restrict the organization dropdown to only organizations of the specified types, e.g. NETWORK.
accountMenuLinks
array | default: undefined

Links to be shown in the Account Dropdown between the Administration and Sign Out links.
| Prop | Type | Description | | -------- | -------- | -------- | |text|string, required | Text on link |

|href|string, required | Link href. |