How to use terra-application-utility - 10 common examples
To help you get started, we’ve selected a few terra-application-utility examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
cerner / terra-framework / packages / terra-application-utility / src / terra-dev-site / doc / example / ApplicationHeaderUtilityExample.jsx View on Github 
render() {
const accessory = <img src="{FallbackAvatar}" alt="Fallback Avatar">;
const title = 'User Name';
return (
<div>
<div>
{}}
onDisclose={this.onDiscloseUtility}
initialSelectedKey="menu"
title={title}
accessory={accessory}
variant={UtilityUtils.VARIANTS.HEADER}
/>
</div>
<div>{`Disclose count: ${this.state.discloseCount}`}</div>
</div>
);
}
}render() {
const customComponent = <img src="{FallbackAvatar}" alt="Fallback Avatar">;
return (
<div>
<div>
</div>
<div>{`Trigger event for: ${this.state.selectedKey}`}</div>
<div>{`Request close count: ${this.state.requestCloseCount}`}</div>
</div>
);
}
}render() {
const accessory = <img src="{FallbackAvatar}" alt="Fallback Avatar">;
const title = 'User Name';
return (
<div>
<div>
</div>
<div>{`Trigger event for: ${this.state.selectedKey}.`}</div>
<div>{`Disclose count: ${this.state.discloseCount}.`}</div>
</div>
);
}
}render() {
const accessory = <img src="{FallbackAvatar}" alt="Fallback Avatar">;
const title = 'User Name';
return (
<div>
<div>
</div>
<div>{`Trigger event for: ${this.state.selectedKey}.`}</div>
<div>{`Disclose count: ${this.state.discloseCount}.`}</div>
</div>
);
}
}render() {
const customComponent = <img src="{FallbackAvatar}" alt="Fallback Avatar">;
return (
<div>
<div>
</div>
<div>{`Trigger event for: ${this.state.selectedKey}`}</div>
<div>{`Request close count: ${this.state.requestCloseCount}`}</div>
</div>
);
}
}render() {
const accessory = <img src="{FallbackAvatar}" alt="Fallback Avatar">;
const title = 'User Name';
return (
<div>
<div>
{}}
onDisclose={this.onDiscloseUtility}
initialSelectedKey="menu"
title={title}
accessory={accessory}
variant={UtilityUtils.VARIANTS.HEADER}
/>
</div>
<div>{`Disclose count: ${this.state.discloseCount}`}</div>
</div>
);
}
}key: defaultKeys.ABOUT,
title: aboutTitle(intl),
},
{
key: defaultKeys.TERMS_OF_USE,
title: termsOfUseTitle(intl),
},
];
return reconcileChildren(defaultConfig, additionalItems);
};
export default {
getDefaultUtilityItems,
defaultKeys,
locations: UtilityUtils.LOCATIONS,
};content: userDataComponent,
childKeys: [
defaultKeys.CHANGE_PHOTO,
],
},
{
key: defaultKeys.SETTINGS,
title: settingsTitle(intl),
childKeys: [
defaultKeys.APPEARANCE,
defaultKeys.SECURITY,
],
},
{
key: defaultKeys.LOG_OUT,
contentLocation: UtilityUtils.LOCATIONS.FOOTER,
title: logOutTitle(intl),
},
{
key: defaultKeys.HELP,
title: helpTitle(intl),
childKeys: [
defaultKeys.GETTING_STARTED,
defaultKeys.ABOUT,
defaultKeys.TERMS_OF_USE,
],
},
{
key: defaultKeys.CHANGE_PHOTO,
title: changePhotoTitle(intl),
},
{/**
* Shape for ApplicationLayout's `utilityConfig` prop.
*/
const utilityConfigPropType = PropTypes.shape({
title: PropTypes.string,
accessory: PropTypes.element,
onChange: PropTypes.func.isRequired,
menuItems: PropTypes.arrayOf(UtilityUtils.itemShape).isRequired,
initialSelectedKey: PropTypes.string.isRequired,
});
/**
* Shape for utilityConfig's menuItem.
*/
const utilityMenuItemPropType = UtilityUtils.itemShape;
export default {
utilityConfigPropType,
utilityMenuItemPropType,
layoutConfigPropType,
nameConfigPropType,
navigationAlignmentPropType,
navigationItemsPropType,
};*/
const navigationItemsPropType = PropTypes.arrayOf(PropTypes.shape({
path: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
hasSubMenu: PropTypes.bool,
icon: PropTypes.node,
}));
/**
* Shape for ApplicationLayout's `utilityConfig` prop.
*/
const utilityConfigPropType = PropTypes.shape({
title: PropTypes.string,
accessory: PropTypes.element,
onChange: PropTypes.func.isRequired,
menuItems: PropTypes.arrayOf(UtilityUtils.itemShape).isRequired,
initialSelectedKey: PropTypes.string.isRequired,
});
/**
* Shape for utilityConfig's menuItem.
*/
const utilityMenuItemPropType = UtilityUtils.itemShape;
export default {
utilityConfigPropType,
utilityMenuItemPropType,
layoutConfigPropType,
nameConfigPropType,
navigationAlignmentPropType,
navigationItemsPropType,
};terra-application-utility
The Utility is used to disclose a utility menu. There are two versions - a header version and menu version. These should be used with the corresponding `terra-application-header-layout` and `terra-application-menu-layout` components.
