Fix sectionName and menuItemName to display with spaces rather then dashes

This commit is contained in:
Fabio Berger 2018-03-21 18:04:27 +00:00
parent ac25764d12
commit 18d3e5458a
3 changed files with 8 additions and 4 deletions

View File

@ -1,3 +1,5 @@
# CHANGELOG # CHANGELOG
## v0.0.1 - _March 8, 2018_ ## v0.0.2 - _TBD_
* Fix section and menuItem text display to replace dashes with spaces.

View File

@ -43,6 +43,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
const id = utils.getIdFromName(sectionName); const id = utils.getIdFromName(sectionName);
const finalSectionName = sectionName.replace(/-/g, ' ');
return ( return (
<div <div
className="md-px1 sm-px2 overflow-hidden" className="md-px1 sm-px2 overflow-hidden"
@ -55,7 +56,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
<span style={{ textTransform: 'capitalize', color: colors.grey700 }}> <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
<AnchorTitle <AnchorTitle
headerSize={headerSize} headerSize={headerSize}
title={sectionName} title={finalSectionName}
id={id} id={id}
shouldShowAnchor={this.state.shouldShowAnchor} shouldShowAnchor={this.state.shouldShowAnchor}
/> />

View File

@ -85,6 +85,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
: styles.menuItemWithoutHeaders; : styles.menuItemWithoutHeaders;
const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
const menuItems = _.map(menuItemNames, menuItemName => { const menuItems = _.map(menuItemNames, menuItemName => {
const finalMenuItemName = menuItemName.replace(/-/g, ' ');
const id = utils.getIdFromName(menuItemName); const id = utils.getIdFromName(menuItemName);
return ( return (
<div key={menuItemName}> <div key={menuItemName}>
@ -96,11 +97,11 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
containerId={constants.DOCS_CONTAINER_ID} containerId={constants.DOCS_CONTAINER_ID}
> >
<MenuItem <MenuItem
onTouchTap={this._onMenuItemClick.bind(this, menuItemName)} onTouchTap={this._onMenuItemClick.bind(this, finalMenuItemName)}
style={menuItemStyles} style={menuItemStyles}
innerDivStyle={menuItemInnerDivStyles} innerDivStyle={menuItemInnerDivStyles}
> >
<span style={{ textTransform: 'capitalize' }}>{menuItemName}</span> <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span>
</MenuItem> </MenuItem>
</ScrollLink> </ScrollLink>
{this._renderMenuItemSubsections(menuItemName)} {this._renderMenuItemSubsections(menuItemName)}